아카이브

[JS] HTML에 JavaScript 코드 삽입하기 본문

Frontend

[JS] HTML에 JavaScript 코드 삽입하기

Rayi 2024. 1. 26. 13:44

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
'Frontend' Related Articles more
Comments