https://opentutorials.org/course/3085/18879
자료 - 생활코딩 WEB2 JavaScript 14~20
조건문 : 조건에 따라 다른 순서의 기능들이 실행되도록 할 수 있음.
토글 구현하기 - 버튼을 누를때마다 night/day 바꾸기. if와 else로 가능함.
`===` : 이항 연산자 -> 값은 Boolean이 나옴(T/F)
(1===1) -> T
<h1>Comparison operators & Boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
document.write(1===1);
</script>
<h3>1===2</h3>
<script>
document.write(1===2);
</script>
<h3>1<2</h3>
<script>
document.write(1<2);
</script>
<h3>1<1</h3>
<script>
document.write(1<1);
</script>
조건문 알아보기.
if(불리언데이터타입) {true일때 실행}
else {false일때 실행}
<h1>Conditional statements</h1>
<h2>Program</h2>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<h2>IF-true</h2>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
<h2>IF-false</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
조건문을 활용하기.
if night일때의 코드와 else일때의 코드를 나눠 작성해보기.
=== 'night' 일땐 야간모드에 해당하는 코드로.
=== 'day' 일땐 주간모드에 해당하는 코드로 실행되도록.
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>
JavaScript
</p>
리팩토링 중복의 제거 공부하기
코드에서 비효율적인 면들을 효율적이게 만들며 개선하는 작업을 리팩토링이라고 함.
웹페이지 아래에서도 버튼을 실행하려면 'night_day2' 처럼 구분을 해줘야 함. 이렇게 버튼을 만약 1억개 복사하려면 하나하나 수정해야 하는 번거로움이 있음. onclick 안에 있는 코드들은 사실상 자기 자신을 가리키고 있음. this로 바꾸면 됨.
중복해서 등장하는 부분은 끝까지 찾아서 없애버리기.
var target = document.querySelector('body')로 줄이기.
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>
JavaScript
</p>
배열 공부하기.
-> 왜 필요한지는 반복문 공부하면서 느낄 수 있음.
데이터가 많아짐에 따라 서로 연관된 데이터를 잘 정리정돈해서 넣어두는 수납상자를 배열이라고 생각하면 됨.
배열은 대괄호 안에 적음. (cf. 문자열은 따옴표)
변수에 배열을 장해도 됨.
배열의 첫번째 인덱스는 0이 됨.
document.wirte(coworkers.length)처럼, .length를 사용하면 개수를 알 수 있음.
.push 를 사용하면 배열에 추가 가능.
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var coworkers = ["egoing", "leezche"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>add</h2>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>