반응형
자바스크립트 사용 방법 정리.
HTML 내에서 직접 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 연결하기</title>
</script>
</head>
<body>
<h1 id="title">
HELLO WORLD
</h1>
<script>
const title = document.querySelector("#title")
console.log(title);
</script>
</body>
</html>
기본적으로 브라우저는 javascript를 위부터 아래로 읽어내려간다. 때문에 문서 상단에 입력하면, 아직 뼈대가 만들어져있지 않은 상태에서 javascript로 동작을 내릴 수가 없다. 자바스크립트는 문서의 내용이 다 입력된 뒤 body가 끝나는 부분에 적는다.
js 파일을 로드해서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 연결하기</title>
<script defer src="main.js">
</script>
</head>
<body>
<h1 id="title">
HELLO WORLD
</h1>
</body>
</html>const title = document.querySelector("#title")
console.log(title);
문서 외부에 js파일을 만들어 연결한다.
<head> 안쪽에 <script>로 삽입하는데, script로만 불러오면 앞서 말했듯이 문서가 읽히기 전에 스크립트가 먼저 인식되어 동작할 수 없다. 때문에 태그 내에 문서를 먼저 다 읽고 js 코드를 실행할 수 있도록 연기시키는 'defer' 라는 문구를 추가해서 삽입한다.
자바스크립트의 사용법 정리. CSS와 마찬가지로 간단한 코드라면 HTML에 삽입하기도 하지만, 일반적으로 코드가 길어질 수록 관리가 어렵기 때문에 따로 js파일을 분리하여 링크하는 두번째 방식이 주로 사용된다. 링크를 할 때는 'defer'를 잊지 않도록 해야겠다.
반응형
