<JavaScript>조건문 활용 | 야간모드와 주간모드 | 생활코딩

Chaeyoung·2023년 3월 8일
1
post-thumbnail

사진출저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';
     }"
/>

0개의 댓글