JavaScript Where To
JavaScripts 는 HTML 페이지의 <body> 와 <head> 섹션에 위치할 수 있습니다.
<script> Tag
HTML 에서, JavaScripts 는 <script> 와 </script>
태그 사이에 삽입해야만 한다.
Example
<script>
document.getElementById("demo").innerHTML
= "My First JavaScript";
</script>
이제는 type 속성을 필요로 하지 않는다. JavaScript 가 HTML의 기본 스크립트 언어이다.
JavaScript Functions 과 Events
JavaScript 함수(function)는 요청되었을 때 실행될 수 있는 JavaScript 코드다.
예를 들어, JavaScript 코드는 사용자가 버튼을 클릭 할 때와 같은 이벤트가 발생할 때 실행될 수 있다.
JavaScript in <head> or <body>
HTML 문서에 스크립트를 무제한으로 넣을 수 있습니다.
스크립트는 HTML의 <body> 또는 <head> 섹션에서, 또는 두 곳 모두에 올 수
있습니다.
<head> 섹션에 함수를 넣고, 또는 페이지의 하단에 넣는 것이 좋은 습관이다. 이렇게 함으로써 한 곳에
모든 코드를 모아 페이지의 내용과 섞이지 않게 된다.
JavaScript in <head>
이 예에서, JavaScript 함수는 HTML 페이지의 <head> 섹션에 위치하며, 버튼을 클릭 할 때
함수가 호출됩니다:
Example
<!DOCTYPE
html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML
= "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button"
onclick="myFunction()">Try it</button>
</body>
</html>
Try it Yourself » JavaScript in <body>
이 예에서, JavaScript 함수는 HTML 페이지의 <body> 섹션에 위치하며, 버튼을 클릭 할 때 함수가 호출됩니다:
Example
<!DOCTYPE
html>
<html>
<body>
<h1>My 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>
Try
it Yourself » 스크립트 해석이 표시 속도를 늦추기 때문에 <body> 요소의 맨 아래에 스크립트를 배치하면 표시 속도가 향상됩니다.
External JavaScripts
스크립트는 외부 파일에 놓일 수 있습니다.
외부 스크립트는 같은 코드가 여러 다른 웹 페이지에서 사용될 때 적절하다.
JavaScript 파일은 파일 확장자가 .js 입니다.
외부 스크립트를 사용하려면 <script> 태그의 "src" 속성에 스크립트 파일의 이름을 입력합니다 :
Example
<!DOCTYPE
html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
Try it Yourself » 외부 스크립트의 참조는 <head> 나 <body> 에 넣을 수 있다.
External JavaScript Advantages
JavaScript 를 외부 파일에 두면 다음과 같은 장점들이 있다:- HTML 과 코드의 분리
- HTML 과 JavaScript 를 읽고 유지하기 쉽게 해준다.
- 케쉬된(cached) JavaScript 파일은 페이지 로드를 빠르게 해준다.