<script> 태그
HTML에서 자바스크립트 코드는 <script> 태그와 </script> 태그 사이에 삽입됩니다.
| <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> |
| <!DOCTYPE html> <html> <body> <h2>JavaScript in Body</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> </body> </html> |
위의 코드를 실행하면 아래 그림과 같다.
JavaScript Function과 Events
HTML 문서에 원하는 개수의 scripts 를 배치할 수 있습니다.
스크립트는 HTML 페이지의 <body> 또는 <head> 섹션에 배치하거나 둘 다에 배치할 수 있습니다.
버튼을 클릭하면 다음과 같이 함수가 호출됩니다:
| <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body><h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html> |
위의 코드를 실행하면 아래 그림과 같다.
<head> 혹은 <body> 내의 JavaScript
HTML 문서에 임의의 수의 스크립트를 배치할 수 있습니다.
스크립트는 HTML 페이지의 <body> 또는 <head> 섹션에 배치하거나 둘 다에 배치할 수 있습니다.
<head> 안에 JavaScript
이 예에서 자바스크립트 함수는 HTML 페이지의 <head> 섹션에 배치됩니다.
버튼을 클릭하면 다음과 같이 함수가 호출됩니다:이 예에서 자바스크립트 함수는 HTML 페이지의 <head> 섹션에 배치됩니다.
버튼을 클릭하면 다음과 같이 함수가 호출됩니다:
| <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body><h2>Demo JavaScript in Head</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html> |
위의 코드를 실행하면 아래 그림과 같다.
'Try it' 버튼을 클릭을 하면 아래 그림과 같다.
<body> 내의 JavaScript
이 예에서 자바스크립트 함수는 HTML 페이지의 <body> 섹션에 배치됩니다.
버튼을 클릭하면 다음과 같이 함수가 호출됩니다:
| <!DOCTYPE html> <html> <body> <h2>Demo JavaScript in Body</h2> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </body> </html> |
위의 코드를 실행하면 아래 그림과 같다.
'Try it' 버튼을 클릭하면 아래 그림과 같다.
External JavaScript
스크립트는 외부 파일에 배치할 수도 있습니다:
| myScript.js |
| function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } |
외부 스크립트는 동일한 코드가 다양한 웹 페이지에서 사용될 때 유용합니다.
자바스크립트 파일에는 .js 파일 확장자가 있습니다.
외부 스크립트를 사용하려면 <script> 태그의 src(소스) 속성에 스크립트 파일의 이름을 입력합니다:
| <script src="myScript.js"></script> |
외부 스크립트 참조를 원하는 대로 <머리> 또는 <몸체>에 배치할 수 있습니다.
스크립트는 <script> 태그가 있는 위치에 정확히 위치한 것처럼 동작합니다.
외부 스크립트에는 <script> 태그를 포함할 수 없습니다.
External JavaScript 이점
스크립트를 외부 파일에 배치하면 다음과 같은 몇 가지 장점이 있습니다:
HTML과 코드를 분리합니다
HTML 및 JavaScript를 쉽게 읽고 유지 관리할 수 있도록 해줍니다
캐시된 자바스크립트 파일을 사용하면 페이지 로드 속도를 높일 수 있습니다
한 페이지에 여러 스크립트 파일을 추가하려면 여러 스크립트 태그를 사용합니다:
| <script src="myScript1.js"></script> <script src="myScript2.js"></script> |
External References
외부 스크립트는 다음 세 가지 방법으로 참조할 수 있습니다:
전체 URL(전체 웹 주소) 포함
파일 경로 포함(예: /js/)
아무런 경로도 없이
이 예제에서는 전체 URL을 사용하여 myScript.js에 링크합니다:
| <script src="https://www.w3schools.com/js/myScript.js"></script> |
이 예제에서는 파일 경로를 사용하여 내 스크립트에 연결할 파일 경로를 사용합니다.
| <script src="/js/myScript.js"></script> |
이 예제에서는 myScript.js에 연결할 경로를 사용하지 않습니다:
| <script src="myScript.js"></script> |
이번 글에서는 JavaScript의 위치에 대해서 간략히 예제와 함께 살펴보았다.
JS는 <script> 태그내에 사용할 수 있으며, <head> 혹은 <body>내에 위치할 수 있다. 또한 외부에서 참조하는 예제를 함께 살펴보았다.
꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.
모두 화이팅입니다.
출처 : 이 글의 출처는 w3scholls 사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'JavaScript > JavaScript Basic' 카테고리의 다른 글
| JavaScript 개요 (0) | 2024.03.28 |
|---|
댓글