JavaScript Where To
JavaScript 는 <body> 와 <head> 에 위치한다.
The <script> Tag
<script> 자바스크립트 코드 </script> tags.
<script> 태그 사이에 자바스크립트 코드를 넣어야 한다.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script> | 예전에는<script type="text/javascript">이렇게 타입을 적 |
|---|
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
For example, a function can be executed when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
| 한곳에 모아두는 것이 좋다. |
|---|
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
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>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
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> | <body>하단에 스크립트를 배치하는 것이 좋다. 위에 소스가 로딩되고 스크립트 실행을 하니까 페이지 로딩할 때 더 좋다. |
|---|
External JavaScript
Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
| 외부 스크립트는 <script>태그를 포함하지 않는다. |
|---|
External JavaScript 장점
Placing JavaScripts in external files has some advantages:
- HTML 코드와 분리
- HTML과 자바스크립트를 쉽게 읽고 유지할 수 있다.
- 캐시된 자바스크립트 파일은 페이지로드 속도를 높일 수 있다.
'차근차근 > JAVA Script' 카테고리의 다른 글
| JavaScript Statements (0) | 2016.02.15 |
|---|---|
| JavaScript Output (0) | 2016.02.15 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (0) | 2016.02.01 |
| 호환성체크 | 팝업 | 오늘 하루 이 창을 열지않기 (0) | 2015.11.10 |
| 이미 클릭하면 팝업창띄우고 닫기버튼 누르면 새 페이지띄우기 (0) | 2015.11.04 |