0813 TIL

잠깐!✋🏻css 강의

<div> 라는 태그는 아무 의미가 없는 태그이다. 대신 css나 js로 제어하고 싶을 때 사용하는 태그라고 하면 됨. 
그리고 화면 전체를 쓰는 block 태그이기 때문에 자동으로 줄바꿈이 일어난다. 
<span> div와 마찬가지로 무색무취 태그이지만, lnline태그 이기때문에 줄바꿈이 일어나지 않는다. 

js 기초 강의

조건문 : 조건에 따라 다른 기능이 실행되도록 하는 것 if문 / if else문 등
if는 true 조건일 때 실행되고 else는 false 조건일 때 실행된다.

<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';
        }
">

코드해석:
html과 javascript가 합쳐진 형태. 일단 결과물은 버튼이 하나 생기고 그 버튼을 누를때마다 다크모드 night 와 day 모드로 바뀐다. value가 night 니까 조건이 충족되서 if문 안에 있는 것들이 실행된다. 이때 night버튼은 day로 바뀌게 된다. 그리고 나서 다시 버튼을 누를때는 (onclick)는 value(버튼)가 day인 상태니까 false가 되며 다시 else문이 시작되어 day모드로 바뀌게 된다. 이때 value버튼도 night로 바뀌고 그럼 다시 if문이 실행되어 계속해서 반복되게 되는 코드이다.

-코드 리팩토링

• 코드가 속해있는 태그를 가르키도록 약속되어있는 특수한 키워드를 this 라고 부른다.
• 중복을 끝까지 쫒아가서 다 없애버리자.

<input type="button" value="night" onclick="
let 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';
        }
">

코드해석:
document.querySelector('#night_day')는 코드의 속해있는 자기자신의 태그라서 this로 바꿔 쓸 수 있다. 그리고 this로 바꿨으니 더이상 id = 'night_day' 라는 태그도 필요가 없어졌다. 그러므로 삭제하는데, 삭제하고 실행해도 전혀 문제없이 실행되는 모습을 볼 수 있다. 거기에 let target 이라는 변수를 만들어서 document.querySelector('body'); 를 넣어주면 이제
target을 집어넣기만하면 변수가 작동하게 되는 것이다.
그러면 코드를 훨씬더 간결하게 작성할 수 있다.

배열

• Array 라고 부른다.
• '[' 로 시작되어 ']' 로 끝난다.
• 값과 값 사이에는 , (콤마)를 사용한다.
• 변수에 담아서 사용합니다. (예: let coworkers = ["egoing", "leezche"];)
• [] 안에 있는 값은 index라고 부릅니다. 인덱스는 0번부터 시작합니다.
• .lenth 를 쓰면 인덱스의 길이(즉 몇 개)를 나타낸다. 길이를 나타낼때는 인덱스를 0번부터 세지 않는다. 갯 수를 세기때문에 1번부터 시작한다.
• .push를 이용하여 데이터 끝에 넣고싶은걸 추가한다.

반복문 while

document.write('<li>1</li>');
while (true) {
document.write('<li>2</li>');
document.write('<li>3</li>');
}
document.write('<li>4</li>');

코드해석 :
첫번째 줄이 먼저 실행된다음, 그 다음 while 문을 보는데 true면 중괄호 안에 있는걸 하나씩 실행시켜서 false가 나오면 그때 끝나면서 while문 밖에 있는 코드를 실행시킨다. 저렇게 실행시키면 무한반복이 될 것입니다.

3번만 반복되게 하고싶을 때

document.write('<li>하나</li>');
let i = 0;
while (i < 3) {
document.write('<li>둘</li>');
document.write('<li>셋</li>');
i += 1;
}
document.write('<li>넷</li>');

코드해석:
일단 제일 먼저 맨 위에 있는 '하나'가 실행된다. i 는 현재 0이다. 그래서 i는 while ( i < 3 ) 이라는 값이 충족이 된다. 그러면서 첫번째 '둘,셋'이 찍힌다. i(0) + 1을 하니까 i는 이제 1이된다. 그러면 다시 while이 실행된다. 역시 (1<3) 충족되니까 다시 '둘,셋'이 찍힌다. 1+1 하니까 i 가 2가되고 다시 while문 실행. (2<3) 충족되니까 다시한번 더 '둘,셋'이 찍힌다.
하지만 이 이후에 2+1 은 3이 되어버리니까 while문인 (3<3)은 충족이 되지못하고 false가 되어버려서 코드가 멈추게 되고 while문 중괄호 밖에 있던 마지막 '넷' 이 실행되는 것이다.

• 팁
  구글링을 열심히 하자. 자기주도적학습이 필요하다.