[참고] http://www.w3schools.com/js/js_whereto.asp
자바스크립트는 HTML의 <body>와 <head> 부분에 위치할 수 있다.
<script> 태그
HTML에서 자바스크립트 코드는 <script>와</script> 태그 사이에 삽입되어야 한다.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
 | 이전 예제들에서 <script type="text/javascript">속성을 사용할지도 모른다. 그러나 type 속성은 필수가 아니다. 자바스크립트는 HTML에서 기본 스크립트언어이다. |
|---|
자바스크립트 함수들과 이벤트들
하나의 자바스크립트 함수는 하나의 자바스크립트 코드 블록이고, 요청이 있을 때 실행될 수 있다.
예를 들어, 유저가 버튼을 클릭하는 것 처럼, 이벤트가 발생했을 때 함수는 실행될 수 있다.
뒷장에서 함수 및 이벤트들에 대해 더 많이 배울 것이다.
<head> or <body> 에서 자바스크립트
HTML 문서에 임의의 수의 스크립트들이 위치할 수 있다.
스크립트들은 HTML page의 <head> 부분에 위치할 수도 있고, <body> 부분에 위치할 수도 있다고, 둘 다 위치할 수도 있다.
| 한 곳에서 모든 코드를 유지하는 것이 가장 좋은 습관이다. |
|---|
<head> 에서 자바스크립트
이 예에서, 자바스크립트 함수는 HTML page의 <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 »
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</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>
</html>
<body> 에서 자바스크립트
이 예에서 자바스크립트 함수는 HTML page의 <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>
<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>요소의 아래에 스크립트들이 위치하는게 좋다. 이것은 페이지 로드를 향상시키는데, 왜냐하면 HTML 표시가, 로딩하는 스크립트들에 의해 차단되지 않기 때문이다. |
|---|
외부 자바스크립트
스크립트들은 또한 외부파일에 위치할 수 있다.
동일한 코드들이 많은 다른 페이지들에서 사용될 때, 외부 스크립트들이 실용적이다.
자바스크립트들 파일확장자로 .js를 가지고 있다.
외부 자바스크립트들 사용하기 위해, <script> 태그의 src속성에 스크립트 파일의 이름을 넣어라.
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
Try it Yourself »
외부 스크립트 참조는 <head>나 <body> 중에 당신이 좋아하는 곳에 위치할 수 있다.
스크립트는 마치 <script>태그가 놓인 곳에 정확히 있었던 것처럼 작동할 것이다.
| 외부 스크립트들은 <script> 태그를 포함할 수 없다. |
|---|
외부 자바스크립트의 장점들
외부 파일에 자바스크립트이 위치한다는 것은 몇가지 장점들을 가진다.- HTML과 code를 분리한다.
- HTML과 JavaScriptIt를 읽기쉽고 유지보수하기 쉽게 만들어준다.
- 캐시된 JavaScript 파일은 페이지 로드속도를 높일 수 있다.
댓글 없음:
댓글 쓰기