티스토리 뷰

7. 코딩 일지

자바스크립트(JAVASCRIPT) 조건문 스스로만든 예제

dahaha 2020. 3. 18. 14:07

 자바스크립트로 IF 조건문을 활용해서 글자를 누를때마다 페이지의 글자색이 미리 지정한 색상들로 현란하게 바뀌는 것을 만들어보았다. 처음에는 배경색이 바뀌도록 했는데 너무 어지러워서 몇 가지 색상들로 글자만 바뀌게 수정했다.

배운것을 약간 응용하여 다른것을 만들어낼 때마다 작지만 성취감이 느껴진다. 물론 매우 허접하다

 

조건문의 기본 구조는 아래와 같다

 

if( 조건식 ){명령문}

else if( 조건식 ){명령문}

else{명령문}

 

예제

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      input {
              margin:50px;
              align:top;
            }
      .box1 {border : solid 1px;
            display: : block;
            width : 500px;

            }

    </style>
  </head>
  <body style="color :green;">
      <script>
        document.querySelector('body').style.backgroundColor
      </script>
      <div class="box1">
        <h2>■</h2>
        <script>
          var target = document.querySelector('body')
        </script>
        <input type="text" onkeydown = "
            if(target.style.color==='green')
            {target.style.backgroundColor='white';
            target.style.color='red';}
            else if(target.style.color==='red')
            {target.style.backgroundColor='white';
            target.style.color='pink';}
            else if(target.style.color==='pink')
            {target.style.backgroundColor='white';
            target.style.color='yellow';}
            else if(target.style.color==='yellow')
            {target.style.backgroundColor='white';
            target.style.color='blue';}
            else
            {target.style.color='blue';
            target.style.color='green';}
            ">
      </div>

  </body>
</html>

 

저작자표시 비영리 변경금지

'7. 코딩 일지' 카테고리의 다른 글

리액트(React)를 배우기 시작하며  (0) 2020.08.26
CSS로 밑줄 두껍게 넣는 가장 간단한 방법  (1) 2020.08.17
파이썬으로 인스타그램 이미지 크롤링하여 다운로드하기  (7) 2020.08.09
티스토리, 네이버, 워드프레스, 홈페이지, 어플 장단점 총 정리  (0) 2020.05.24
자바스크립트 - 입력값을 나타내어 주는 코드 addEventListener사용  (0) 2020.03.24
NODE.JS에서 사용하는 PM2 명령어  (0) 2020.03.20
자바스크립트(JAVASCRIPT) 함수부분 연습하기  (0) 2020.03.18
문과생을 위한 코딩 배우는 순서 추천  (0) 2020.03.18
댓글