[JavaScript] 다른 파일에서 자바스크립트 파일 불러오기
2021. 4. 30. 13:23ㆍProgram/JavaScript
002 _ 다른 파일에서 자바스크립트 파일 불러오기
[적용]
- HTML로 외부 파일로 존재하는 자바스크립트 파일을 불러올때
[내용]
HTML 내부에 자바스크립트를 직접 작성할 경우 코드가 길어지고 추후 수정등에 불편할 수 있다.
또한 기존에 작성 되어있던 자바스크립 파일을 재사용하거나
다른 사람이 작성한 파일을 불러와서 사용하는데 용이하다.
확장자가 '.js'인 자바스크립트 파일은 HTML 에서 다른 파일에서 불러올 수 있다.
[문법]
| 구문 (HTML 코드) | 의미 |
| <script src="자바스크립트파일주소" defer> </script> | 자바스크립트 파일 불러 오기 |
[예시]
example.js 파일을 불러오는 코드를 작성해보자
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- example.js 불러오기 -->
<script src="example.js" defer></script>
</head>
<body>
</body>
</html>
- JavaScript
alert('다른 파일에서 불러온 자바스크립트 코드입니다~')
- 실행결과
여러개의 자바스크립트 파일도 하나의 HTML에서 불러올 수 있으며,
명령 기술의 순서에 따라 파일을 불러와 작업한다.
- HTML
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
<script src="script3.js" defer></script>여기서 script 태그의 defer 속성은 자바스크립트 실행 관련 지정자이다.
자바스크립트를 읽어올때 읽기 타이밍을 최적화 하기 위한 코드이며,
defer의 경우 자바스크립트 파일을 읽어와 HTML 실행 완료 후 실행하라는 코드이다.
자바스크립트를 HTML과 분리하면 전체적인 구조 파악이 쉬우며,
상대경로, 루트경로, 절대경로 를 이용해 파일의 위치 지정이 가능하다.
- HTML
// 상대경로
<script src="./js/script.js" defer></script>
// 루트경로
<script src="/project/js/script.js" defer></script>
// 절대경로
<script src="https://example.com/js/script.js" defer></script>
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
이케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 계산(사칙연산) 프로그램 만들기 (0) | 2021.04.30 |
|---|---|
| [JavaScript] 자바스크립트 콘솔로그(console.log)를 이용하여 출력하기 (0) | 2021.04.30 |
| [JavaScript] 자바스크립트의 구현(사용) 방식 (0) | 2021.04.30 |
| [JavaScript] 폴더 안의 파일 갯수 세기 (length) (0) | 2021.03.09 |
| [JavaScript] 현재 날짜+요일+시간을 표시하는 시계 (0) | 2021.03.05 |