본문 바로가기

JavaScript/JavaScript_지식_정리

HTML에서 Javascript 불러오기

HTML에서 Javascript 불러오기

HTML에서 Javascript 불러오는 방법으로는 3가지 정도가 있다.

1. HTML 태그 내부에 속성 값으로 자바스크립트 문법을 사용하는 방식

2. HTML 문서 내부에서 script 태그 내부에 자바스크립트를 작성하는 방식

3. HTML 문서 내부에서 script 태그의 속성 값으로 자바스크립트 파일의 경로를 지정하여 불러오는 방식

 

태그 내부 속성 값으로 Javascript 불러오기

input 속성인 onclick의 값으로 자바스크립트 함수 사용
<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<input type="button" value="Alert" onclick="alert('Alert');">
	</body>
</html>

 

 

input 태그에 button 타입 같은 이벤트를 발생시키는 태그의 경우에만 이벤트 속성에 대한 값으로 자바스크립트 코드를 넣어 사용할 수 있다.

 

 

문서 내부에서 script 태그 내부에 Javascript작성

 head 태그 내부에 script 태그 내부에 Javascript 작성
<!DOCTYPE html>
<html>
	<head>
		<script>
			document.write('Alert');
		</script>
	</head>
	<body>
	</body>
</html>

 

 

script 태그 내부에 자바스크립트 코드를 넣어서 사용하였다.

script 태그는 head 태그에 위치해 있어도 되고, body 태그에 위치해 있어도 된다.

 

문서 내부에서 script 태그 속성으로 자바스크립트 파일 경로 지정

script 태그에 scr 속성 값으로 외부 자바스크립트 파일 경로 지정
<!DOCTYPE html>
<html>
	<head>
		<script src="./Alert.js"></script>
	</head>
	<body>
	</body>
</html>

 

 

//Alert.js
document.write('Alert');

 

script 태그 속성인 scr의 값으로 자바스크립트 파일의 경로를 지정하여 사용하였다.