참고: https://flexiple.com/javascript/call-javascript-from-html/
이 포스트에서는 HTML 파일에서 자바스크립트 함수를 호출하는 방법을 알아보겠습니다. 프로젝트에 따라 여러 방법 중 하나를 사용할 수 있습니다.
HTML에서 자바스크립트를 사용하는 이유
HTML과 CSS는 웹 페이지에 정적 정보를 표시하기에 좋지만 자바스크립트를 사용하면 페이지를 대화형으로 만들 수 있습니다. 자바스크립트를 사용하면 사용자가 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등과 같은 복잡한 기능을 웹 페이지에 구현할 수 있습니다. 이제 HTML 페이지에서 자바스크립트 함수를 호출하는 여러 방법을 알아보겠습니다.
script 태그 사용
HTML 코드에 바로 자바스크립트를 작성하는 것은 HTML에 기능을 추가하는 가장 쉬운 방법 중 하나이며 자바스크립트 함수의 코드 줄 수가 적을 때 더 유용합니다. 이를 사용하는 방법은 HTML 문서의 head 섹션에 자바스크립트 함수를 정의하고 HTML 문서의 body에서 호출하면 됩니다.
<html>
<head>
<script type="text/javascript">
var myVar = "hello";
function exampleFunction() { alert('You triggered an alert!'); }
</script>
</head>
<body>
<p><a href="#" onClick="exampleFunction()">Click Me</a></p>
</body>
</html>
인라인 삽입
이 방법은 태그안에 자바스크립트를 바로 작성하는 것으로 이는 모범 사례로 간주되지 않습니다.
<img name="photo" src="photo.jpg" onMouseOver="photo.setAttribute('class','red')" onMouseOut="photo.setAttribute('class','blue')">외부 파일
이 방법은 위의 방법들 보다 더 많이 사용되고있고 선호하는 방법입니다. 이는 별도의 파일에 자바스크립트를 정의하고 HTML의 head 섹션에서 script 태그를 사용하여 src 속성에 파일 경로를 연결하면됩니다. type은 text/javascript로 설정해야합니다. 여기서 외부 자바스크립트 파일의 확장자는 .js 입니다.
function.js:
function exampleFunction() {
alert('You triggered an alert!');
}index.html:
<html>
<head>
<script type = "text/javascript" src="function.js"></script>
</head>
<body>
<p><a href="#" onClick="exampleFunction;">Click Me</a></p>
</body>
</html>
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 배열 초기화 (8) | 2023.06.27 |
|---|---|
| [javascript] 자바스크립트 현재 시간 가져오기 (Date) (6) | 2023.06.27 |
| [javascript] 자바스크립트 instanceof 연산자 (9) | 2023.06.26 |
| [javascript] 자바스크립트 onmouseout 이벤트 (6) | 2023.06.23 |
| [javascript] 자바스크립트 onmouseover 이벤트 (6) | 2023.06.23 |
댓글