[자바스크립트(JavaScript)] HTML 문서에 삽입하는 방법

츄르사려고 코딩하는집사입니다.

HTML에서 자바스크립트(JavaScript)를 삽입하는 방법은 <head> </head> 태그 안에 <script></script>를 사용하여 삽입하는 방법과 따로 .js파일을 만들어 <script></script> 태그 안에 src를 넣어주는 방법이 있습니다.

1. <head> </head> 태그 안에 <script> </script> 넣는 방법

main.html을 만들어서, 아래의 코드를 복사하면 hi라는 alert가 뜨게 됩니다.

1) main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    	alert("Hi");
    </script>
</head>
<body>
    
</body>
</html>

2. .js파일을 만들어 <script> </script> 태그에 src 넣어주는 방법

hello.js파일을 만들어 코드를 입력하여 저장하고, main.html에 <script src="hello".js>로 src를 지정해 주면, 그 자바스크립트(JavaScript)파일이 실행됩니다.

1) hello.js

alert("hello");

2) main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="hello.js"></script>
</head>
<body>
    
</body>
</html>

저작자표시

'Language > JavaScript' 카테고리의 다른 글

제이쿼리(JQuery)에서 input 객체 readonly로 설정하는 방법 (0)	2021.11.08
자바스크립트(JavaScript)에서 Int 형변환하기 (0)	2021.11.03
자바스크립트(JavaScript)에서 input 커서 포커스를 벗어날 때 이벤트 적용 방법 (0)	2021.10.29
제이쿼리(JQuery)의 기본 (0)	2021.10.06
[자바스크립트(JavaScript)] 주석처리 하는 방법 (0)	2021.09.28
$(document).ready(function() {}); 이란? (0)	2021.09.24
비쥬얼 스튜디오 코드(Visual Studio Code, VSCode)에서 자바스크립트(JavaScript) 설치 및 설정하는 방법 (0)	2021.09.13
[JavaScript] Uncaught SyntaxError: Invalid shorthand property initializer 해결 방법 (2)	2021.07.16