* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.
(섹션 2 : 18)
브라우저에게 JavaScript 로드 및 실행을 지시하는 방법
1. HTML 파일의 파일 내부의 <head> 섹션 안에 <script> 태그를 추가한 뒤 그 사이에 JavaScript를 추가하는 방법
페이지가 로드되기 전에 JavaScript 코드를 실행하고 나머지 페이지가 로드된다. 이 방법의 단점은 JavaScript 코드가 길어질수록 HTML 파일 코드가 길어진다는 것이다. 기술적인 문제는 없지만 웹사이트를 관리하기가 어려워진다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basics</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/styles/app.css" />
<script>
alert("Hello!");
</script>
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
</html>
2. 스크립트를 가져오는 방법 - Best
script 태그에 src (source의 특성)을 추가하고 큰따옴표 사이에 스크립트 파일의 위치를 적는다.
예시) <script src="assets/scripts/app.js"></script>
※ <script /> 셀프 클로징 script 태그는 지원하지 않음
-> 브라우저에게 이 폴더 내부로 이동해 app.js 파일을 로드하도록 지시한다.
페이지가 먼저 로드되고 JavaScript가 실행되도록 하려면 <body> 섹션의 가장 끝에 위치시키면 된다. 그러면 브라우저가 JavaScript 코드를 실행하기 전에 먼저 모든 HTML 코드를 분석하고 렌더링을 끝내도록 한다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basics</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/styles/app.css" />
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
<script src="assets/scripts/vendor.js"></script>
<script src="assets/scripts/app.js"></script>
</body>
</html>app.js
alert("Hello!");
주의해야 할 점
JavaScript 파일을 가져올 때 어떤 파일이 다른 파일을 의존하는 경우에는 의존할 내용이 있는 파일을 먼저 가져와야 한다. (JavaScript에서는 순서가 중요함)
'Study Record > Javascript' 카테고리의 다른 글
| JavaScript 데이터 타입 (0) | 2022.06.20 |
|---|---|
| JavaScript 변수와 연산자 (0) | 2022.06.15 |
| Java와 JavaScript의 차이점, 클라이언트 측과 서버 측 JavaScript의 차이점 (0) | 2022.06.15 |
| Javascript의 정의, 특징, 실행 과정 (0) | 2022.06.14 |
| Javascript 공부 기록 (0) | 2022.06.13 |
