JavaScript(JS) 코드를 웹에 적용하려면 HTML 코드 안에 JS 코드를 삽입해야 합니다.
JS 코드를 삽입하는 방법은 크게 두 가지가 있습니다.
1. HTML 코드에 직접 추가
HTML 코드에 직접 JS 코드를 추가할 때는 <script> 태그를 사용합니다.
<script type = "text/javascript">
document.write("[JS script content]");
</script>
여기서 document.write()는 JS에서 document 오브젝트의 쓰기 함수입니다.
2. 외부 JS 파일 불러오기
JS파일을 불러올 때도 <script> 태그를 사용하지만, 추가로 src 속성을 사용합니다.
대신 src에서 JS파일을 불러왔으므로 <script> 태그의 본문에는 아무 내용이 없습니다.
<script type="text/javascript" src="[JS file].js"></script>
두 방법을 모두 사용하여 다음과 같은 HTML 코드를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Wolrd!</title>
</head>
<body>
/* 1. HTML에 직접 추가하기 */
<script type = "text/javascript">
document.write(" <p>Hello, JavaScript!</p> ");
</script>
/* 1. HTML에 직접 추가하기 */
/* 2. JS 파일 불러오기 */
<script type="text/javascript" src="sample.js"></script>
/* 2. JS 파일 불러오기 */
</body>
</html>
728x90
'Frontend' 카테고리의 다른 글
| [JS] Form element (0) | 2024.02.21 |
|---|---|
| [JS] 자바스크립트로 HTML 객체 만들기 (0) | 2024.02.14 |
| DOM Script에 대해서 (0) | 2024.02.14 |
| [JS] 알림창 종류 정리 (0) | 2024.02.08 |
| [HTML] HTML 태그와 속성 정리 (0) | 2024.01.26 |