본문 바로가기

Javascript

JavaScript (자바스크립트) 표기 방법 (삽입 방식 및 위치)

JavaScript (자바스크립트) 표기 방법


내.외부의 js 파일을 로드하여 사용하거나 html 파일 내부에서 <script></script> 태그를 통해 사용하는 것으로 구분됩니다.

그럼 자바스크립트 삽입 방식과 위치에 대해 알아보겠습니다.



내.외부의 js 파일을 로드하여 사용하는 경우


- 스크립트를 분리하여 재사용할 수 있어 효율적으로 사용할 수 있습니다.  

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




html 파일 내부에서 <script></script> 태그를 통해 사용하는 경우


- 즉각적인 스크립트 호출로 결과를 얻을 수 있지만 실행 위치를 주의해야 하며 <body> 태그내에서 남발할 경우 자칫 코드의 가독성이 떨어질 수 있습니다.

<script>alert('TEST');</script>



자바스크립트 위치


1) <head></head> 내부 : 브라우저 렌더링에 방해되지 않는 비교적 가벼운 스크립트로 작성

<html>

<head>

<script>

function test() {

alert('TEST');

}

</script>

</head>

<body>

<button onclick="test()">클릭!</button>

</body>

</html>


2) </body> 직전 : 브라우저 렌더링에 방해될 정도의 무거운 스크립트로 작성

<html>

<head>

</head>

<body>

<button onclick="test()">클릭!</button>

<script>

function test() {

alert('TEST');

}

</script>

</body>

</html>