안녕하세요.
오늘은 HTML 페이지에 JavaScript를 사용하는 방법에 대해서 알아보겠습니다.
HTML페이지에 JavaScript를 사용하는 방법은 크게 두가지가 있습니다.
인라인 스크립트로 사용하는 방법이 있고, 외부 스크립트를 임포트해서 사용하는 방법이 있습니다.
인라인 스크립트를 사용하는 방법
다음과 같이 HTML 템플릿이 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Hyukho's Blog</title>
</head>
<body>
<p>Welcome to Hyukho's Blog</p>
</body>
</html>
JavaScript를 사용하기 위해서는 <script> 태그를 사용합니다.
<script> 태그는 <head> 태그 사이에 놓을 수도 있고, <body> 태그에 놓일 수도 있습니다.
JavaScript를 인라인으로 사용하려면 관련된 html 태그 다음이나 또는 <body> 태그가 끝나는 </body> 태그 바로 위쪽에 다음과 같이 <script> 태그를 사용하는 것을 추천합니다.
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Hyukho's Blog</title>
</head>
<body>
<p>Welcome to Hyukho's Blog</p>
<script>
console.log('This is JavaScript');
</script>
</body>
</html>
외부 스크립트를 사용하는 방법
외부의 JavaScript로 만들어진 파일을 가져와서 사용하는 방법은 아래와 같이 사용하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Hyukho Blog</title>
<script src="http://code.jquery.com/jquery.js" defer></script>
</head>
<body>
<p>Welcome to Hyukho Blog</p>
</body>
</html>
<head> 태그 사이에 사용할 때에는 defer attribute와 함께 사용하는 것을 추천합니다. 그래야 html이 완전히 로드가 완료되고나서 JavaScript가 실행되기 때문입니다. 기본으로는 async로 사용되어 html이 로드가 완전히 끝나기도 전에 JavaScript가 실행되어 JavaScript가 적용되지 않을 수 있기 때문입니다. 이러한 현상은 웹페이지에 이미지가 많이 있는 경우에 나타납니다.
인라인 스크립트와 외부 스크립트를 함께 사용하는 방법
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Hyukho Blog</title>
<!-- 외부 스크립트 -->
<script src="http://code.jquery.com/jquery.js" defer></script>
<!-- 외부 스크립트 2 -->
<script src="app.js" defer></script>
</head>
<body>
<p>Welcome to Hyukho Blog</p>
</body>
</html>
외부 스크립트와 인라인 스크립트를 함께 사용하는 방법은 외부 스크립트를 먼저 사용한 다음 인라인 스크립트 외부 스크립트로 바꾸고 defer attribute를 추가하여 사용합니다. 왜냐하면, 이렇게 해야 html 이 완전히 로드되고 나서 외부 스크립트 순서대로 로드되어 실행될 수 있기 때문입니다.
대부분의 경우, 여러개의 JavaScript를 사용하기 때문에, 세번째로 소개해드린 외부 스크립트와 인라인스크립트를 함께 사용합니다.
이렇게 HTML 페이지에 JavaScript를 사용하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글