티스토리 뷰

JavaScript

자바스크립트 위치

IT Knowledge Share 2021. 9. 11. 11:52
반응형

자바스크립트의 위치에 대해 자세히 알아보도록 하겠습니다.

 

자바스크립트는 script 태그 사이에 위치하게 됩니다. 이렇게 script 태그 사이에 위치한 자바스크립트 코드를 자바스크립트 블록이라고 합니다. 자바스크립트 블록에 함수가 들어간 경우, 자바스크립트 함수라고 칭합니다. 아래의 예문과 같이, 자바스크립트 블록은 script 태그로 감싸져 있으며, 이는 자바스크립트 블록이라고 할 수 있습니다. 당연히, 어떤 콜백 함수가 들어가 있다면, 이는 자바스크립트 함수라고 말할 수 있겠습니다.

<script>
document.getElementById("test").innerHTML = "자바스크립트 블록";
</script>
<script>
function myFunction() {
  document.getElementById("test").innerHTML = "자바스크립트 함수입니다.";
}
</script>

 

자바스크립트는 head와 body 태그에 모두 올 수 있습니다(footer에도 가능). HTML 페이지가 head 쪽의 코드부터 차례대로 읽는다고 가정한다면, 이러한 사실을 기반으로 어디에 자바스크립트 블록이나 함수를 위치시킬 것인지 결정하면 됩니다.

반응형

아래는 자바스크립트 함수를 head 태그에 위치시킨 후, 이를 이용해서 body 태그의 문장을 변경하는 예문입니다. 이렇게 onclick 이벤트 발생 시 myFunction 메소드를 실행시키도록 합니다. 물론 자바스크립트 함수를 body 태그에 위치시켜도 무방합니다!

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("test").innerHTML = "변경된 문장입니다.";
}
</script>
</head>
<body>

<p id="test">문장을 변경해주세요.</p>
<button type="button" onclick="myFunction()">클릭!</button>

</body>
</html>

 

자바스크립트 기능을 외부에서 가져올 수도 있습니다. CSS 파일처럼, 자바스크립트 파일을 따로 관리하여 많이 사용합니다. js라는 확장자는 자바스크립트 파일을 가리킵니다. 아래와 같이 myJavascript.js 파일에는 자바스크립트 함수가 적혀 있습니다. 

 

이때 중요한 사실은 자바스크립트 외부 파일에는 script 태그가 쓰이지 않습니다. 이렇게 외부 자바스크립트를 사용하면 좋은 이유는 다음과 같습니다.

1. HTML 코드가 길어질 경우, 자바스크립트 코드를 분리시켜 줍니다.

2. HTML 코드와 자바스크립트 코드를 별도로 두어 가독성을 증진시킵니다.

3. 자바스크립트 파일이 캐시로 남아 페이지 로딩이 빨라집니다.

* myJavascript.js

function myFunction() {
  document.getElementById("test").innerHTML = "외부 자바스크립트 함수.";
}

 

자바스크립트 함수를 참조하는 방법은 다음과 같습니다.

 

1. 파일이 속한 전체 주소

2. 파일이 속한 상위 디렉토리

3. 파일 그 자체

 

이러한 외부 자바스크립트 파일들은 한 HTML 페이지에서 여러 개 참조 될 수 있습니다.

<script src="https://test.com/js/myScript1.js"></script>
<script src="/js/myScript2.js"></script>
<script src="myScript3.js"></script>

** 외부 자바스크립트 참조 **
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
<script src="myScript3.js"></script>
반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

자바스크립트 연산자 Operators  (0) 2021.09.14
자바스크립트 변수 Var, Let, Const  (0) 2021.09.12
자바스크립트 사용법  (0) 2021.09.11
자바스크립트로 HTML 내용 보여주기/테스트하기/출력하기  (0) 2021.09.11
자바스크립트의 기능  (0) 2021.09.11
댓글