사진출저unsflash.com

🪵기초복습

🌳변수란

• 변하는 수

🌱변수 선언하는 법 3가지

• var, let, const

🌱var, let 차이

• let : 영역안에서 고정변수 설정( 스코프 or 파일)
• var : 전역변수 설정(전에 설정한 변수와 중복될 수 있으니 주의)
• const : 고정변수 끝판왕(수정불가)

🌳데이터타입

• number
• string
• boolean

🌳조건문

• "if(){}" 형태로 쓰인다.
• ()안에오는 조건에 따라서 { }안에 js가 실행된다.

document.write("if-true");
if (ture) {
  document.write("1<br>");
} else {
  document.write("2<br>");
}

document.write("if-false");
if (false) {
  document.write("3<br>");
} else {
  document.write("4<br>");
}

• 위에 코드와 같이 if문 ()안에 조건이 true이면 if문 {}안의 코드가 실행되고 ()안이 false이면 else문의 {}안의 코드가 실행된다.
• 여기서 ()안에 쓰인 true, false를 데이터타입 중 불리언(boolean)이라 한다.

🪵야간모드와 주간모드 만들기

🌳input

🌱type의 종류

<input type = button value = "night" onclick = "...">

• button
• reset
• submit

🌳onclick 이용하기

• onclick에 javascript속성을 입력해 주간모드와 야간모드 버튼을 만들어준다.

<input
  type="button"
  value="night"
  onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';"
/>

<input
  type="button"
  value="day"
  onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';"
/>

🌳버튼 하나로 합치기(onclick에 조건문 활용하기)

• onclick = "if(){} else{}"넣기
• 아래코드처럼 조건문을 이용해 한 버튼으로 주간모드와 야간모드를 설정할 수 있다.

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