안녕하세요. 신기한 연구소입니다.
자바스크립트는 보통 HTML 내에서 사용하는데요.
그렇다면 HTML 내에서 어떻게 사용할까요?
바로 <script> 요소를 사용하는 것입니다.
공식 HTML 명세에 추가된 <script>는 여섯 가지 속성이 있는데
같이 살펴보겠습니다.
src
HTML 내에 직접 스크립트를 작성하지 않고. js 별도의 스크립트 파일로 저장한 뒤 그 경로를 지정할 때 사용합니다.
type
language 속성을 지정할 때 사용하는데 보통 text/javascript를 사용합니다.
하지만 생략해도 되는데 이유는 기본값이 바로 text/javascript이기 때문입니다.
async
외부 스크립트 파일을 불려올 때 유용합니다. 하지만 자원 내려받기, 다른 스크립트 불러오기 등 다른 작업을 방해하지 않는 선에서 즉시 스크립트를 내려받도록 합니다. 즉 파싱 중에도 스크립트를 실행하게 됩니다.
defer
src를 사용해서 외부 스크립트 파일을 불러올 때 유효하고 브라우저가 페이지를 파싱하고 나면 실행하게 합니다.
charset
코드의 문자셋을 지정하지만 브라우저는 보통 무시하므로 사용하지 않아도 됩니다.
language
대부분 브라우저에서 무시하기 때문에 사용하지 않습니다.
자바스크립트는 HTML 문서 내에서 사용하거나 외부 js 파일을 불러와서 사용하는 두가지 방법이 있습니다.
내부 HTML에서 사용하는 예시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<script>
var a = 1; //전역 지역의 전역변수
function funcA() { //전역 지역의 전역 함수
a = 3;
console.log(a);
return 2;
}
function funcB() { //전역 지역의 전역 함수
var b = 4;
console.log(funcA());
console.log(b);
console.log(a);
return 2;
}
</script>
</head>
<body>
Hello~
</body>
</html>
|
cs |
외부 js 파일 불러오는 예시
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<script src="./jsbook/logi.js"></script>
</head>
<body>
Hello~
</body>
</html>
|
cs |
js 파일을 작성할 때 주의점은 js파일 내에서는 <script></script> 를 넣으면 안 됩니다.
오직 HTML 파일에서만 <script> 요소를 사용해야 합니다.
이 src는 막강한 기능이 있는데 바로 같은 서버에 위치한 js 파일뿐만 아니라
다른 도메인에 있는 js 파일도 가져올 수 있다는 겁니다.
<script src=’http://www.aaa.com/abc/sample.js’></script>
하지만 외부에 있기에 신뢰할 수 있는 경우에만 사용해야 합니다.
스크립트 순서대로 해석을 한다는 점을 꼭 기억해야 합니다.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]if...else문 사용하기 편. (if 조건문) (0) | 2022.06.12 |
|---|---|
| [자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript (1) | 2022.05.24 |
| [왕초보]자바스크립트 Function.prototype.bind() 함수 구문 이해하기. bind(). (0) | 2022.04.10 |
| [왕초보]자바스크립트 Function.prototype.apply() 함수 구문 이해하기. apply(). (0) | 2022.03.27 |
| [왕초보]자바스크립트 Function.prototype.call() 함수 구문 이해하기. call(). (0) | 2022.03.13 |
