[パブリックトレーニング-Webベース]JavaScript 2/3

1.勉強の内容

①スタックの画像を得る

Layoutをキャプチャするときに役立つかもしれません.

<style>
	body {
		background-image: url(https://picsum.photos/1024);
		background-size: cover;
	}
</style>

② Beautiful color selector

いい色の組み合わせがおすすめのサイトを使いましょう!!

<style>
	body {
		background-color: #ADC178;
		color: #F0EAD2;
	}
</style>

③cssの適用

h1 {
    border-bottom: 10px solid darkred !important;
    padding: 30px;
}

<link rel="stylesheet" href="style.css">

④ Comparison Operator

console.log(1 > 1); // false
console.log(1 === 1); // true
console.log(1 !== 1); // false

⑤ Conditional Statements

console.log(1);
if(true) {
	console.log(2);
}
console.log(3);
if(false) {
	console.log(4);
}
else {
	console.log(5);
}
console.log(6);
// 1, 2, 3, 5, 6

⑥アレイ（Array）

var topics = ['html', 'css', 'js'];
console.log(topics.length); // 3
console.log(topics[0]); // html

ㅇ重复句

var topics = ['html', 'css', 'js'];
for (var i = 0; i < topics.length; i++) {
	document.write(topics[i] + ' ');
} // html, css, js

◇ダークモード切り替えボタン（if）

<script>
	<input type="button" id="dnbtn" value="night" onclick="
 		let button = document.querySelector('#dnbtn');
		if (button.value === 'night') {
			document.querySelector('body').style.backgroundColor = 'black';
			document.querySelector('body').style.color = 'white';
			document.querySelectorAll('a').forEach(a => a.style.color = 'white');
			button.value = 'day';
		}
		else {
			document.querySelector('body').style.backgroundColor = 'white';
			document.querySelector('body').style.color = 'black';
			document.querySelectorAll('a').forEach(a => a.style.color = 'black');
			button.value = 'night';
		}
	">
</script>

⑨ダークモードボタン切替（Array）

<script>
	<input type="button" value="night" onclick="
 		const toggle = {
			value: ['night', 'day'],
			backgroundColor: ['black', 'white'],
			color: ['white', 'black'],
			getIndex: () => toggle.value.indexOf(this.value)
		};
        
		document.querySelector('body').style.backgroundColor = toggle.backgroundColor[toggle.getIndex()];
		document.querySelector('body').style.color = toggle.color[toggle.getIndex()];
		document.querySelectorAll('a').forEach(a => a.style.color = toggle.color[toggle.getIndex()]);
		this.value = toggle.value[(toggle.getIndex() + 1) % 2]
	">
</script>

暗いモードの切り替えボタン(3つの演算子)

<script>
	<input type="button" value="night" onclick="
		var toggle = {
			isNight: () => this.value === 'night',
			getValue: () => toggle.isNight()? 'night' : 'day',
			getBackgroundColor: () => toggle.isNight()? 'black' : 'white',
			getColor: () => toggle.isNight()? 'white' : 'black',
			toggle: () => this.value = toggle.isNight()? 'day' : 'night',
		};
        
		document.querySelector('body').style.backgroundColor = toggle.getBackgroundColor();
		document.querySelector('body').style.color = toggle.getColor();
		document.querySelectorAll('a').forEach(a => a.style.color = toggle.getColor());
		toggle.toggle();
	">
</script>

2.学習内容の難点

3.解決方法

4.勉強の心得