우당탕탕 좌충우돌 개발일기
자바스크립트 위치(JavaScript Where To) 본문
<script> 태그
HTML에서 자바스크립트 코드는 <script>와 </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>
💡 오래된 자바스크립트 예제들 중 <script type="text/javascript"> 타입의 스크립트 태그를 사용하는 경우도 있다.
자바스크립트는 HTML의 기본 스크립트 언어기때문에 <script>로만 사용해도 무방하다.
자바스크립트 함수와 이벤트(Functions and Events)
자바스크립트 함수는 호출될 때 실행할 수 있는 자바스크립트 코드 블록이다.
예를 들어, 사용자가 버튼을 클릭하는 이벤트가 발생할 때 함수는 호출된다.
자바스크립트 <head> 혹은 <body>
HTML 문서안에 원하는 만큼 스크립트를 배치할 수 있다.
스크립트의 위치는 <body> 태그나 <head>태그 안쪽에 배치되야하고 혹은 양쪽 모두에 배치될 수도 있다.
1. <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>
2. <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>
💡 <head>태그에 스크립트를 삽입하게되면, 스크립트를 해석하느라 디스플레이가 느려지기 때문에 <body>태그의 하단쪽에 스크립트를 배치하는게 디스플레이 속도를 향상시키는 방법이다.
외부 자바스크립트(External JavaScript)
스크립트는 외부 파일에 위치할 수도 있다.
외부 스크립트는 동일한 코드가 여러 다른 웹 페이지에서 사용될 때 실용적인데 확장자는 .js로 저장한다
<외부 파일 : myScript.js>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
💡 외부자바스크립트에서는 <sciprt>태그를 사용할 수 없다.
<예제>
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
외부 myScript.js를 사용하기 위해서는 <script> 태그 내의 src에 해당 자바스크립트 파일이 위치한 경로를 기재하면된다.
외부 자바스크립트 파일도 <script>태그를 통해 <head>나 <body>태그안에 배치하여 사용 가능하다.
외부 자바스크립트의 장점(External JavaScript Advantages)
자바스크립트 파일을 외부파일로 두는 것에는 몇 가지 장점이 있다.
- HTML 과 코드가 분리된다.
- HTML과 JavaScript를 읽기 쉽고 유지 보수를 용이하게한다.
- 페이지 로드에 있어 속도를 향상시킨다.
한 페이지에서 여러개의 자바스크립트 파일을 사용하고 싶다면, 여러개의 <script> 태그를 사용하면 된다.
<예제>
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
외부 자바스크립트 경로 참조
외부 스크립트는 3가지 방법으로 참조할 수 있다.
- URL의 전체주소 기재(웹 주소 전체)
<script src="https://www.w3schools.com/js/myScript.js"></script>
- 파일이 위치한 경로 기재
<script src="/js/myScript.js"></script>
- 파일명만 기재
<script src="myScript.js"></script>'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 주석(JavaScript Comments) (0) | 2022.10.13 |
|---|---|
| 자바스크립트 문법(JavaScript Syntax) (0) | 2022.10.13 |
| 자바스크립트 구문(JavaScript Statements) (0) | 2022.10.12 |
| 자바스크립트 출력(JavaScript Output) (0) | 2022.10.12 |
| 자바스크립트 소개(JavaScript Introduction) (0) | 2022.10.12 |
