프로그래밍/Javascript

[JAVASCRIPT/자바스크립트] 자바스크립트 HTML 실행순서 / 이벤트 활용

Rolen 2022. 12. 6. 20:40

실행순서

<!DOCTYPE html>
<html>
    <head>
        <title>실행순서</title>
    </head>
    <body>
        <h1>h1 태그</h1>
        <h2>h2 태그</h2>
        <script>
            // script태그를 바디 또는 밑에 삽입하면 유지보수가 힘들다. -> 이벤트 활용하여 보완
            // head에 삽입 추천
            document.querySelector('h1').style.backgroundColor = 'pink';
            document.querySelector('h2').style.color = 'pink';
        </script>
    </body>
</html>

======================이벤트 활용 (.onload)=======================

<!DOCTYPE html>
<html>
    <head>
        <title>실행순서</title>
        <script>
            // window.onload 의 해석은 body 가 실행되고 나면 으로 해석 // 즉 html이 모두 켜지고 마지막에 진행
            window.onload = function () {
                document.querySelector('h1').style.backgroundColor = 'pink';
                document.querySelector('h2').style.color = 'pink';
            }
        </script>
    </head>
    <body>
        <h1>h1 태그</h1>
        <h2>h2 태그</h2>
    </body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지</title>
    <script>
        // 화면 구성이 완료되면
        window.onload = function () {
            // h1 태그 내부의 문자를 변경합니다.
            const header = document.getElementById('header');
            const originalText = header.innerHTML; // 이 때 originalText 의 값은 Header 1 이다.
            header.innerHTML = '자바스크립트로 변경했어요!<br />';  // 대입연산자로 인하여 텍스트 변경됨.
            header.innerHTML += '원래는 ' + originalText + '였답니다!'; // += 연산자로 인하여 텍스트 추가됨.
        };
    </script>
</head>
<body>
    <h1 id="header">Header 1</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 변수를 선언합니다.
            // id가 image인 img 태그를 image 객체 type으로 저장.
            const image = document.getElementById('image'/*id*/);
            
            // 속성을 변경합니다.
            // html때 img src 와 같음.
            // image 객체를 이용하여 src 속성의 값을 조작한다.
            // +해당주소는 사진이 준비되지 않았을 때, 일단 공간을 채워넣어놓기 위할때 많이 사용
            image.src = 'https://via.placeholder.com/400x400';
            
            image.width = 400;
            image.height = 400;
        };
    </script>
</head>
<body>
    <img id="image" />
</body>
</html>
728x90