3일만에 끝내는 HTML, CSS, JS 기초
j02. 자바스크립트 태그의 위치 본문
자바스크립트 태그의 위치
자바스크립트 태그의 위치는 어디에 두어야 할까요? HTML 페이지 내에서 <body> 태그에 둘수도 있고, <head> 태그에 둘수도 있습니다. 심지어 두곳에 다 있어도 되고, 스크립트를 몇 개를 넣어도 됩니다. 그러나 반드시 <script> 태그로 둘러싸서 그 안에 자바스크립트 코드를 입력하여야 합니다.<script> document.getElementById("myID").innerHTML = "이러저러한 내용"; </script>옛날 예제 에서는 타입 속성을 사용했던 것을 볼수 있습니다. <script type="text/javascript"> 타입 속성 (type attribute) 은 자바스크립트 (JavaScript) 가 HTML 에서 기본 스크립팅 언어가 되면서 필요가 없어졌습니다.
자바스크립트 함수 (JavaScript function) 는, 요청받을 때 마다 실행되는자바스크립트 코드의 블록 입니다. 예를 들면, 함수 (function) 는 사용자가 버튼을 클릭하는 것처럼 어떤 이벤트를 발생시키면, 실행될 수 있습니다.
아래는 헤드 태그에 스크립트를 넣은 경우입니다. <!DOCTYPE html> <html> <head><script> function someFunction() { document.getElementById("myID").innerHTML = "내용이 바뀌었습니다."; } </script></head> <body> <h1>헤드 태그에 스크립트를 넣은 경우</h1> <p id="myID">바뀌기 전의 문장</p> <button type="button" onclick="someFunction()">클릭하세요.</button> </body> </html>
아래는 <body> 태그의 바닥에 스크립트를 넣었는데, 이 경우는 페이지 로드 (load) 가 빨라질 수 있습니다. 스크립트를 맨 위에 놓으면, 순차적으로 로드 되기 때문에, 화면에 표시는 늦어질 수 있기 때문입니다. <!DOCTYPE html> <html> <body> <h1>바디 태그에 스크립트를 넣은 경우</h1> <p id="myID2">바뀌기 전의 문장</p> <button type="button" onclick="anotherSomeFunction()">클릭하세요.</button><script> function anotherSomeFunction() { document.getElementById("myID2").innerHTML = "내용이 바뀌었습니다."; } </script></body> </html>
외부 자바스크립트 (External JavaScript) 는 스크립트가 외부 파일에 있는 경우입니다. 외부 스크립트 (External scripts) 는 여러 웹 페이지에 동일한 코드가 사용되는 경우에 유용합니다. 자바스크립트 파일의 확장자는 .js 입니다. 외부 스크립트를 사용하려면, <script> 태그에 소스 속성 (src attribute) 에 스크립트의 이름을 넣어 주면 됩니다.<!DOCTYPE html> <html> <body> <h3>외부 자바스크립트 파일의 연결</h3> <p id="myThirdID">여기에 문장이 바뀌는 코드 입니다.</p> <button type="button" onclick="myThirdFunction()">여기 클릭하지 마세요. 그냥 예시입니다. ㅋㅋ</button> <p><strong>여기서</strong> myThirdFunction 함수는 외부 파일 "myThirdScript.js" 에 저장되어 있습니다.</p> <script src="myThirdScript.js"></script> </body> </html>외부 스크립트 참조 링크도 <head> 또는 <body> 어디에나 넣어도 됩니다. 스크립트는 그 <script> 태그가 있는 곳에 원래부터 있었던 것처럼 작동합니다. 단, 외부 스크립트 안에 또 <script> 태그를 넣을 수는 없습니다.
자바 스크립트를 외부 파일에 위치시키면 아래와 같은 잇 점이 있습니다. 1. 일단 HTML 코드와 분리됩니다. 2. 그렇게 하면 HTML 과 자바스크립트 모두 읽기도 쉽고, 관리하기도 쉽게 됩니다. 3. 일단 자바스크립트 파일이 캐쉬 되고 나면 페이지 로드가 빨라질 수 있습니다.
[광고] Udemy 동영상 강의로 보기
'JAVASCRIPT' 카테고리의 다른 글
| j06. 자바스크립트 연산자 (0) | 2016.06.05 |
|---|---|
| j05. 자바스크립트 지시문 (0) | 2016.06.05 |
| j04. 자바스크립트 구문 (0) | 2016.06.05 |
| j03. 자바스크립트 출력 (0) | 2016.06.05 |
| j01. 자바스크립트 소개 (0) | 2016.06.05 |