자바스크립트의 위치

코딩하는망아치 2021. 3. 12. 15:56

자바스크립트의 위치는 HTML의 <body>와 <head>에 위치할수 있다.

먼저 <head>안에 위치할때의 모습을 보자

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

<button type="button" onclick="myFunction()">Try it</button> 이부분에서 버튼을 클릭하면 myFunction()을 호출해주고 이걸로 인해서 <head>안에존재하는 myFunction이 실행되서 demo라는 아이디를 가지고있는 태그안의 내용이 변하게 된다.

실행전

실행후

다음은 <body>안에 존재할때의 경우이다

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<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> 안에 위치하게 하는것이 <head>안에 위치한것 보다 실행 속도가 빠르다는 것이다.

추가적으로 자바스크립트는 별도의 파일로 만들어져서 동작할수도 있다.

코드부터 한번 살펴보자

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

코드에서 보면 myFunction()이라는 함수를 호출은 하는데 코드상에는 존재하지 않는것을 볼수 있다.

대신

이 부분에서 외부에 만들어져있는 myFunction()을 호출하면 실행되는 기능을 정의해 놓은 코드가 있는 파일을 호출해준다.

외부에서 자바스크립트 파일을 불러오는 방식의 장점

- html과 코드랑 서로 분리 되어 있다

- html과 javascript를 더 읽기 쉽고 유지보수하기 쉽게 만들어 준다

- 파일을 불러오는 방식이 페이지 로딩 속도를 더 빠르게 할수 있다.

외부에서 자바스크립트 파일을 불러오는 방법

1.링크형식으로 할때는 URL을 적어줘야한다.

2. 스크립트가 위치한 경로를 적어준다.