HTML에서 JavaScript를 실행하기
2019. 9. 22. 19:07
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 태그 안에 삽입합니다.
참고 링크
'if (study) > JavaScript' 카테고리의 다른 글
| HTML 문서가 표현되는 방법, DOM의 개념 (0) | 2019.09.22 |
|---|---|
| JavaScript의 객체 타입 (0) | 2019.09.05 |
| JavaScript 기본 문법 요약노트 (0) | 2019.09.05 |
