독학

♧9/20 생활코딩 [자바 스크립트] (웹사이트에 night, day 테마 만들기 - 비교연산자, 블리언, 조건문)

피자돈가스 2022. 9. 20. 23:26







-html css 스타일태그로 배경색 검정, 글자 하양 만들기 코드와 결과





-
<input type="button" name="" value="night">
<input type="button" name="" value="day">













-자바스크립트로 클릭에 대한 이벤트를 주자.

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











( .myclass = 클래스 명이 마이클래스인 태그를 선택하는 선택자.)











- 배경색이 까마니까 동시에 글씨는 흰색으로 되게 만들어보자

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

(안녕~ 글씨 보면됨ㅋㅋ)

 

근데,,할거생겼다. 리그오브레전드 로고 밑에 선이 나이트모드하니까 안보이네. 어떻게하면 해결되는지 알아보자.)

 

 

 

 

 

 

 

 

 

 

-day 도 똑같이 색만 반대로 하면 됨

하하. 그나저나 vs코드가 참 좋네 에러를 발견해줘서

아톰쓰는데 작은따옴표 하나 안써서 구동안돼서 또 미쳐버릴뻔 하하!!

재밌다~!

 

 

 

 

 

 

 

 

 

 

<조건문>

 

 

-조건에 따라서 다른 기능들이 실행되게 하는 것.

 

 

 

 

 

 

 

 

 

 

 

 

<나이트와 데이가 버튼이 두개인게 너무 촌시러! 하나로 만들어서 껐다켰다할래. ->'토글' 기능 만들기>

 

비교연산자와 블리언,

조건문

 

 

<h1>Comparison operator & Boolean</h1>
    <h2>===</h2>
    <script>
        document.write(1===1)
    </script>
 
이 왼쪽의 1과 오른쪽 1 값이 같냐? ㅇㅇ 참이다.
 

출력결과

 

 

 

 

 

이번엔 1과 2가  같냐고 물어보자

 

<h3>1===2</h3>
    <script>
        document.write(1===2)
    </script>
 
 

결과.

 

 

 

 

 

 

 

여기서 1===1 이 부분이 비교연산자다.  

 

 

 

 

 

 

-

&lt;
 
=
<
 
 
저렇게 표현함,
 
 
 
 
 
<h3>1&lt;2</h3>
<script>
    document.write(1<2)
</script>

 

 

 

 

 

 

<h3>1&lt;1</h3>
<script>
    document.write(1<1)
</script>
 
 
 
 
 
 
 
 
요롷게 하면 뭐가뜰까요?
 
바로
 
 
 
 
 

1<1

false
 
이거지요~

 

 

 

 

 

 

 

 

<블리언과 비교연산자를 그럼 어디다가 쓰나?>

 

 

일단. 

<script>
    document.write("1<br>");
    document.write("2<br>");
    document.write("3<br>");
    document.write("4<br>");
</script>
 
이건 그냥  줄바꿈.
1
2
3
4
이렇게 뜸
 
 
 
 
 
 
 
 
 
 
 
-
<script>
    document.write("1<br>");
    if(true){
    document.write("2<br>");
    } else {
    document.write("3<br>");
    }
    document.write("4<br>");
</script>
 

 

실행의 순서가 바뀌었네.. 3을 무시하는 방향으로. 

 

 

 

 

 

 

 

 

<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>

 

폴스니까 엘스 안에 있는 코드가 실행된 후 4가 실행됐다.

 

 

 

 

 

 즉, if 문의 뒤에 따라오는 괄호 안에는 블리언 데이터 타입이 오는데, (트루 혹은 폴스가 옴)

만약  트루라면 첫번째 중괄호에 있는 코드들이 실행되고 두번째 중괄호는 무시된다.

만약 폴스라면 첫번째 중괄호에 있는 코드들은 무시되고 두번째 중괄호를 실행한다.

 

 

= 블리언의 값이 무엇이냐에 따라 실행되는 코드가 바뀐다.

 

 

 

 

 

 

-만약 나이트라면,

 

 

만약 나이트가 아니라면, 데이버튼 눌렀을 때 코드인 것이 실행되면 되겠죠.

 

<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';
      } else {
    document.querySelector('body').style.backgroundColor='white';
      document.querySelector('body').style.color='black';
      }
      ">
 
 
=만약 밸류 값이 나이트와 같다면 야간모드에 해당하는 코드가 실행,
그렇지 않다면 주간모드 코드 실행

 

세번째 버튼 누르면 나이트 됨. 근데 다시 누르면 안바뀜 왜? 나이트니까. 나이트 이미 적용됐으니까!

즉, 야간모드로 바뀌었을 때 저 밸류값을 day로 바꾸면 되겠져.

 

 

 

 

 

 

<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';
      }
      ">
 
 
 
 
(if 와 else 의 마지막줄 한줄 추가한거 잘봐!)
 
 
결과

이렇게 저 토글버튼이 비로소 활성화된다.

 

 

 

하으, 

저 코드를 한국어로 번역(?) 하면 

 

버튼 이름은 나이트_데이 이고 타입은 버튼인데 버튼에 표시되는 이름은 나이트야.

그런데 만약에 지금 이 버튼 이름이 나이트 이면 , 이 버튼을 눌렀을 때 백그라운드 색은 검정으로 바꿔주고, 글씨는 흰색으로 바꾸고, 이 버튼의 이름을 day 로 바꿔줘.

 

버튼 이름이 나이트가 아니라면 (데이라면) , 백그라운드  색은 흰색, 글씨는 검정으로하고 이름은 나이트로 바꿔줘.

 

 

 

 이말이다. 
이게뭐라고 첨에 이해가 왜케 안됐을까? ㅋ

 

 

 

 

그래서..

 

 

 

 

 위에 했던 저 장황한 코드는 필요없다. 지워주고 토글버튼만 쓸거임

 

 

 조건문은 바로 이렇게 쓰는것이었답니다~

 

 

 

 

 

 

 

 

 

 

 

 

 

내일은 

<리팩토링 - 중복의 제거>

 

를 공부해야겠다~바위바위~