[JS, jQuery]html 문서 해석 순서, window.onload(), ready() 함수

 

 

1. html 문서 해석 순서

• html 문서는 항상 위에서 아래 순서로 해석된다. 만약 해당 코드의 함수가 실행코드보다 밑에 있다면 undefined에러가 발생한다.
• 즉 아래쪽에 작성되어 아직 해석이 안된 코드는 사용 할 수 없다.
• 아래와 같은 경우 <script> 내의 함수가 실행될 때 아직 id = "test1"을 읽지 못한 상태이므로 오류가발생하는 것이다.
• 이러한 문제를 해결하기 위해 JS의 window.onload()와 jQuery의 ready()를 사용할 수 있다.

<script>    
      document.getElementById("test1").innerText = "HTML 해석 순서 테스트";  
 </script>

    <p id="test1"></p>

 

 

 

2. window.onload() 함수

• html(현재창)이 모두 로딩이 되었을 때라는 이벤트 리스너
• 일단 html 문서 내용을 모두 다 해석한 후 마지막에 onload 옆에 작성된 함수가 수행된다
• 즉, 화면에 필요한 모든 요소(css,js,image..)들이 웹 페이지 메모리에 모두 올려진 다음에 실행된다.
•  *window.onload의 단점: 한 페이지 내에서 한번만 사용할 수 있다. 여러번 작성되면 마지막 내용이 수행된다.
• 아래 코드는 정상적으로 실행된다.

<script>
      // test1 아이디를 가지는 요소가 해석되기 전에 내용을 추가하기 때문에
      // 해당 코드는 정상 수행되지 않음
     
      //window.load 함수를 통해 html문서를 끝까지 모두 읽고 다시 돌아와 함수를
      //시행하기 때문에 맨 마지막 id="test1"를 읽은 상태라 정상 실행
      window.onload = function () {
        document.getElementById("test1").innerText = "HTML 해석 순서 테스트";
      };
    </script>

    <p id="test1"></p>

 

 

 

3. ready() 함수

• html 문서 로딩이 완료된 후 수행할 기능을 작성하는 함수로 window.onload()와 그 기능은 동일하다.
• window.onload의 단점인 한 번만 작성할 수 있다는 문제점 보안하여 여러번 작성 가능하다.
• jQuery를 나타내는 기호인 '$'와 함께 사용한다.
• ready()함수의 작성 방법은 다음과 같은데 모두 동일한 결과를 낸다.

ready() 작성방법         1) jQuery(document).ready(function(){코드;});         2) $(document).ready(function(){코드;});         3) $(function(){코드;});

 

• 앞 선 ready() 작성 방법을 통해 ready()을 중복해서 사용할 수 있음을 확인했다.
• 아래 코드 실행시 문자출력(text), 배경색 스타일 적용(css("backgroundColor", "pink")), 글자크기 변경(css("fontSize", "30px"))이 모두 적용된 결과물이 화면에 출력된다.
• JS의 예약어는 다음과 같이 jQuery 와 대응된다. innerText -> text, style -> css("속성", "값")
• jQuery도  JS를 사용한 라이브러리이기 때문에 jQuery 함수 내애서 자바스크립트 코드도 사용 가능하다.

jQuery(document).ready(function () {
        $("#test2").text("ready() 함수 테스트");

        // $("#test2"): 아이디가 test2인 요소
        // .text("ready() 함수 테스트") : 요소의 내용으로 "ready() 함수 테스트" 출력
        // text() == innerText
      });

      // ready 함수 중복 적용 가능: text 출력->배경색 변경
      $(document).ready(function () {
        $("#test2").css("backgroundColor", "pink"); //배경색 변경
        //css() == style
      });

      $(() => {
        $("test2").css("fontSize", "30px");

        console.log("자바스크립트 코드도 사용 가능");
        document.getElementById("test2").style.fontWeight = "bold";
        document.getElementById("test2").innerText += " 새로운 내용추가";
      });
    </script>

    <p id="test2"></p>

 

화면 출력 결과