[기초 이론] How to add the JavaScript to WebPage?

웹 페이지에 JavaScript를 어떻게 넣을까?

CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있다. CSS가 <link> 요소로 외부 스타일 시트를 적용하고,
<style> 요소로 내부 스타일 시트를 적용했다면 JavaScript는 <script> 요소만 요구한다.

HTML 파일의 <body> 부분의 최하단에 아래와 같이 입력한다.

<body>
    <p>Lorem ipsum</p>
    <script>
        let a = 0;
    </script>
</body>

가장 많이 쓰이는 방식으로 내부 JavaScript를 외부 파일로 분리하고 싶을 때 사용한다. 내부 JavaScript와 마찬가지로 HTML 파일의 <body> 부분의 최하단에 아래와 같이 입력한다.

<body>
    <p>Lorem ipsum</p>
    <script src="script.js"></script>
</body>

let a = 0;

가끔 HTML에 JavaScript 코드가 포함될 수 있다. HTML 코드에 인라인으로 CSS를 넣는 것처럼 인라인 JavaScript 또한 HTML 코드가 무거워지고, 수정이 비효율적이므로 되도록 사용해서는 안되는 방법이다.

<button onclick="createParagraph()"> Click me! </button>

단점이 명확한 인라인 JavaScript 대신 순수한 JavaScript 방법을 사용하자. queryselectorAll() 함수를 사용하면 현재 페이지 내 모든 버튼을 선택할 수 있다. 그 후 반복과 addEventListener() 로 처리하면 된다.

const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('click', createParagraph);
}

[기초 이론] Data Type: Primitive (0)	2022.06.09
[기초 이론] Variable, Constant (0)	2022.06.08
[기초 이론] What is the JavaScript doing on WebPage? (0)	2022.06.06
[기초 이론] What is the JavaScript? (0)	2022.06.05
[기초 이론] 서론 (0)	2022.06.04