In this post, 10 JavaScript lecture is introuduced.

Linking JS Files

• colors.js

var Body = {
        setColor: function (color){
            var target = document.querySelector('body');
            target.style.color = color;
        },
        setBackColor : function (color){
            document.querySelector('body').style.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; 
            }
        }
    }
  
    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="colors.js"> // use src="~~.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>
  

• 웹페이지를 로드할때 웹서버에 접속을 2번해야한다. index.html과 colors.js 필요하므로. 그러나 많은 파일들에서 colors.js 를 사용하면 이득.

  • 한 번 웹브라우저에서 다운로드한 파일은 브라우저가 컴퓨터 cache에 저장하므로 다음에 읽을때 웹서버에 네트워크를 통해 접속하지 않고 저장된 파일을 읽어옴. 서버 입장에서는 비용 절감, 사용자 입장에서도 네트워크 트래픽 절감, 더 빠르게 웹페이지 표시 가능.