자바 스크립트는에 배치 할 수 있습니다 <body> 와 <head> HTML 페이지의 섹션.
<script> 태그
HTML에서 자바 스크립트 코드 사이에 삽입해야합니다 <script> 및 </script> 태그.
예
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
: 이전 예는 유형 속성을 사용할 수 있습니다 <script type="text/javascript"> .
이 유형의 속성은 필요하지 않습니다. 자바 스크립트는 HTML의 기본 스크립트 언어입니다.
자바 스크립트 함수 및 이벤트
자바 스크립트 function 에 대한 "요청"때 실행될 수있는 자바 스크립트 코드의 블록이다.
이벤트는 사용자가 버튼을 클릭했을 때와 같이 발생할 때, 예를 들어, 기능이 실행될 수있다.
나중에 장에서 기능 및 이벤트에 대한 더 많은 것을 배울 것입니다.
자바 스크립트 <head> 또는 <body>
당신은 HTML 문서에 스크립트의 수를 배치 할 수 있습니다.
스크립트는 배치 할 수 있습니다 <body> , 또는에서 <head> HTML 페이지의 섹션, 또는 둘 다입니다.
한 곳에서 모든 코드를 유지, 항상 좋은 습관이다.
자바 스크립트 <head>
이 예에서, 자바 스크립트 기능이 배치되어 <head> HTML 페이지의 섹션을 참조하십시오.
버튼이 클릭되면 함수 (호출) 호출 :
예
<!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>
»그것을 자신을 시도 자바 스크립트 <body>
이 예에서, 자바 스크립트는 함수에 배치 <body> HTML 페이지의 부분.
버튼이 클릭되면 함수 (호출) 호출 :
예
<!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> 요소입니다.
컴파일 스크립트 디스플레이를 늦출 수 있기 때문에, 페이지로드를 향상시킬 수있다.
외부 자바 스크립트
스크립트 파일은 외부에 배치 될 수있다 :
myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
동일한 코드가 다양한 웹 페이지에서 사용되는 경우 외부 스크립트가 실용적이다.
자바 스크립트 파일은 파일 확장자가 .js .
a의 SRC (소스) 속성에 스크립트 파일의 이름을 넣어, 외부 스크립트를 사용하려면 <script> 태그 :
당신은에서 외부 스크립트 참조 배치 할 수 있습니다 <head> 또는 <body> 당신이 좋아합니다.
그것이 정확히 어디에있는 것처럼 스크립트가 작동합니다 <script> 태그가 있습니다.
외부 스크립트를 포함 할 수 없습니다 <script> 태그를.
외부 자바 스크립트의 장점
외부 파일에 자바 스크립트를 배치하면 몇 가지 장점이 있습니다 :
- 그것은 HTML 코드를 분리
- 그것은 HTML과 자바 스크립트를 쉽게 읽고 유지할 수
- 캐시 된 자바 스크립트 파일은 페이지가로드 속도를 높일 수 있습니다