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의 값으로 자바스크립트 파일의 경로를 지정하여 사용하였다.
'JavaScript > JavaScript_지식_정리' 카테고리의 다른 글
Javascript에서 랜덤한 값 생성(난수 생성) (0) | 2021.07.31 |
---|---|
HTML input 태그의 text 타입의 값을 Javascript의 변수로 할당 (0) | 2021.07.29 |
함수의 인자값으로 들어가는 함수인 콜백 함수(CallBack Function) (0) | 2021.07.25 |
Javascript의 함수를 짧게 표현하는 화살표 함수(Array Function) (2) | 2021.07.24 |