[JS] javascript vs html vs CSS 누가먼저 실행될까

*결론 : 브라우저 마다 실행 속도가 다르다.

​

화면을 만들땐 HTML + CSS + javascript 를 사용하여 만든다.

서로 다른 언어를 섞어쓸땐 각 브라우저마다 실행속도가 다르므로 처리를 해줘야 한다.

​

페이지가 로딩이 되면 로딩이 완료된후 다음 코드를 실행할수 있게 처리를 해줘야한다

1

 

    <script>
        //첫번쨰 아이디어 : 지연 명령실행 (window.setTimeout)을 활용하여 시간늦추기
        //==>페이지,인터넷 상황 , 컴퓨터 성능에 따라 로딩시간이 다 다르므로 맞추기 어렵다.
        //=>태그는 인식한다
        window.setTimeout(function(){
        var h1=document.querySelector(".title");
        h1.style.color="red";
        },100);
      

    </script>

2

 <script>
        //두번쨰 아이디어 : 로딩이벤트(onload) 활용
        //=>onload이벤트는 body에 설정한다.

        function init(){    
            var h1=document.querySelector(".title");
            console.log(h1);
            h1.style.color="red";
        }
    </script>

3

  <script>
        //세번쨰 아이디어 : 자바스크립트 내장객체를 활용하여 지연처리
        //window에 객체를 소사해보니 onload라는 속성이 있더라
        //내가만든 함수를 onload에 연결시키면 어떨까?

        //winodw.onload=내가만든함수;
        //winodw.onload=init(); //inint을 실행환 결과를 넣어라(X)
        window.onload=init; //init함수를 연결해라 (O)
          

        function init(){    
            var h1=document.querySelector(".title");
            console.log(h1);
            h1.style.color="red";
        }
    </script>

4

 <script>
        //세번쨰 아이디어 : 자바스크립트 내장객체를 활용하여 지연처리
        //window에 객체를 소사해보니 onload라는 속성이 있더라
        //내가만든 함수를 onload에 연결시키면 어떨까?

        window.onload=function(){    
            var h1=document.querySelector(".title");
            console.log(h1);
            h1.style.color="red";
        };
          

       
    </script>

★5.★ 최종형태

<script>
        //네번쨰 아이디어 : 
        //onload에 직접 함수를 설정하면 기존함수들이 모두제거된다.(덮어쓰기)
        //이벤트를 덮어쓰기를 하는것이 아니라 추가할수 잇는 방식으로 변경
        //addEventListener()명령 사용
        //window.addEventListener("이벤트종류",함수);
        //기존이벤트를 해치지않고 추가로 설정할 수 있다.
        window.addEventListener("load",function(){
            var h1=document.querySelector(".title");
            h1.style.color="blue";
        }); 
 </script>