In this post, 11 JavaScript lecture is introuduced.

jQuery Library

jQuery 를 다운로드 할 필요 없이, CDN (Content Delivery Network) 을 이용하면 쉽게 라이브러리를 이용할 수 있다. 많은 라이브러리들이 자기들의 서버에 파일을 보관해놓고 우리는 script src 문법을 이용해 이를 사용할 수 있는 CDN을 제공하고 있다.

• colors.js

  var Body = {
          setColor: function (color){
              // var target = document.querySelector('body');
              // target.style.color = color;
              $('body').css('color', color); 
          },
          setBackColor : function (color){
              //document.querySelector('body').style.backgroundColor = color;
              $('body').css('backgroundColor', color); 
          }
      }
    
      var Links = {
          setColor: function (color){
          //     var alist = document.querySelectorAll('a');
          //     var i = 0;
          //     while (i < alist.length){
          //         alist[i].style.color = color;
          //         i = i + 1; 
          //     }
          // }
              $('a').css('color', color); // $ 함수. 모든 'a' 태그를 jQuery로 제어하겠다는 뜻 
          }
      }
      
      function nightDayHandler(self){
          // var target = document.querySelector('body');
          if(self.value === 'night'){
              Body.setBackColor('black');
              Body.setColor('white');
              self.value = 'day';
    
              Links.setColor('powderblue');
          } else{
              Body.setBackColor('white');
              Body.setColor('black');
              self.value = 'night';
    
              Links.setColor('blue');
          }
      }
  

• index.html

  <!doctype html>
  <html>
  <head>
      <title>WEB1 - html</title>
      <meta charset="utf-8">  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> // CDN 이용하여 js query 이용!!
    
      <script
      src="colors.js">
      </script>  
  </head>
    
  <body>
      <h1><a href="index.html">WEB</a></h1>
      <input type="button" value="night" onclick="
          nightDayHandler(this);
      ">
      <ol>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2> HTML</h2>
      I'm <u>studying</u> <strong>html</strong>.<br>
      Visit <a href="https://www.w3.org/TR/2011/WD-html5-20110405/">HERE</a> if you want to see the official document of HTML.
      <img src="coding.jpg" width="100%">
  </body>
  </html>