카테고리 없음

5. Javascript와 HTML

okthatsimple 2024. 7. 25. 02:08

HTML head 안에 javascript 넣기

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h3 id="change" style="color:green;">Hello!</h3>
    <button type="button" onclick="change()">Click</button>
    <script>
        function change() {
            document.getElementById("change")
                .innerHTML = "Changed!";
        }
    </script>
</body>
</html>
  • head에 script를 넣는 경우
    • 초기 웹 페이지 렌더링 때 필요한 기능인 경우

HTML body 안에 javascript 넣기

  • head에 있는 script 태그를 body로 옮기면 된다.
  • body에 script를 넣는 경우
    • 보통 body에 넣으면 됨
    • 빠른 페이지 로딩이 필요한 경우(head에서 불러오기에 자바스크립트가 너무 무거운 경우)

외부 javascript 읽어오기

  • js 파일을 생성하고, script 태그 안의 내용을 옮긴다(script tag 부분은 불필요)
  • <script src="script.js"></script>로 불러와서 사용한다.