IT/Javascript
[Javascript] HTML에서 외부 js 파일의 함수 호출하기
hi.anna
2025. 2. 27. 06:17
HTML에서 외부 JS 파일의 함수 호출하기
1. JavaScript 파일 생성
먼저, 외부 JavaScript 파일을 생성합니다.
예를 들어, script.js 파일을 다음과 같이 만듭니다.
// script.js
function sayHello() {
alert("Hello, World!");
}
2. HTML 파일에 외부 JS 파일 연결
HTML 파일에서 <script> 태그를 사용하여 외부 JavaScript 파일을 연결합니다.
<head> 또는 <body> 끝 부분에 추가할 수 있습니다.
defer 속성을 사용하면 HTML 파싱이 끝난 후 스크립트가 실행되므로 성능에 유리합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>외부 JS 호출 예제</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>외부 JS 호출 예제</h1>
<button onclick="sayHello()">Say Hello</button>
</body>
</html>
src="script.js"
- 외부 JavaScript 파일의 경로를 지정합니다.
- 이 예제에서는, script.js가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.
- 경로 설정
- 같은 폴더에 있을 경우: <script src="script.js" defer></script>
- 다른 폴더에 있을 경우 : <script src="js/script.js" defer></script>
defer
- HTML 문서가 완전히 파싱된 후에 JavaScript가 실행되도록 합니다.
onclick="sayHello()"
- 버튼을 클릭하면 script.js에 정의된 sayHello() 함수가 호출됩니다.
3. 결과
- 브라우저에서 index.html을 열고 버튼을 클릭하면 alert 창에 "Hello, World!"가 표시됩니다.
반응형