728x90
1. Script import 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">
내용
</div>
<script src="index.js"></script> // script 호출
</body>//index.js
let test = document.querySelector("#test");
test.addEventListener("click", function(){
alert("Hello Test")
});<script src = "js파일경로/js파일명"></script> 로 호출할 수 있다.
위의 예제에서 index.js파일 경로는 html과 같은 폴더안에 있어서 경로를 생략했다.
2. Script 파일 위치
script를 head 태그 안에 위치할 수 있다. 하지만 이 경우에는 위의 예시에서는 오류가 발생한다.
오류를 방지하기 위해서는 위 예시의 index.js를 아래처럼 바꿔야 한다.
//index.js
window.onload = function(){
let test = document.querySelector("#test");
test.addEventListener("click", function(){
alert("Hello Test")
})
}window.onload = function() 함수는 웹 브라우저의 모든 구성요소에 대한 로드가 끝났을 때 브라우저에 의해서 호출되는 함수이다.
따라서,
script 파일은 head 태그 보다 페이지의 하단에 위치 하는게 좋다.
728x90
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 무한 스크롤 (Infinite Scroll) (0) | 2021.06.16 |
|---|---|
| [JavaScript] event.stopPropagation 이란 (0) | 2021.02.12 |
| [JavaScript] Callback / Promise / async await을 이용한 비동기 예제 (0) | 2021.01.06 |
| [JavaScript] 반복자(Iterator)와 반복 가능(Iterable) 객체 차이 (0) | 2020.12.25 |
| [JavaScript] 배열 내장 함수 - filter란 ?? (0) | 2020.12.18 |