고정 헤더 영역
상세 컨텐츠
본문
HTML에서 JavaScript를 실행하기
HTML에서 자바스크립트 코드를 삽입하는 세가지 방법을 정리합니다.
- inline 자바스크립트
- 내부 자바스크립트
- 외부 자바스크립트
1. inline 방식
html 태그에 이벤트 속성으로 자바스크립트를 삽입할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<input type="button" onclick="alert('Hello world!')" value="버튼"/>
</body>
</html>input 태그의 onclick 속성으로 자바스크립트 코드를 입력했습니다. 웹 페이지에서 버튼을 클릭하면 alert('Hello world')가 실행됩니다.
2. html 내부에서 사용하기
<script> 태그를 사용하면 html 내부에서 자바스크립트를 실행할 수 있습니다.
<script> </script>는 자바스크립트가 시작하고 종료되는 위치를 표시합니다.
<!DOCTYPE html> <html> <head> <title>Document</title> <script> document.write("hello world!"); // script 태그 안에 작성한 코드가 실행된다. </script> </head> <body> </body> </html> 3. 외부 파일 불러오기
자바스크립트 파일을 html과 별개인 .js 확장자의 파일로 저장한 후 불러올 수 있습니다.
외부 자바스크립트를 사용하려면 script 태그의 src 속성으로 파일의 경로를 입력하면 됩니다.
- example.js
document.write("Hello world!");- example.html
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="./example.js"></script>
</head>
<body>
</body>
</html>
4. 자바스크립트를 삽입하는 위치
<script> 태그는 html 내부 어디에도 넣을 수 있지만 일반적으로 head나 body 태그 안에 위치합니다.
브라우저는 html과 css 구문을 분석하던 중 script 태그를 만나게 되면 해당 스크립트를 모두 실행할 때까지 렌더링을 일시정지합니다.
따라서 보통 가벼운 스크립트를 실행할 때는 head 태그 안에, 무거운 스크립트를 실행할 땐 body 태그 안에 삽입합니다.
'Study > HTML' 카테고리의 다른 글
| 다른 페이지의 특정 위치로 이동하는 방법 (0) | 2022.10.21 |
|---|---|
| DOM이란 (0) | 2020.07.13 |
| CSS를 HTML에 적용시키는법 (0) | 2020.06.11 |
