'script' 태그
<script>태그를 이용하면 자바스크립트 프로그램(스크립트)을 HTML 문서 대부분의 위치에 삽입시킬수 있다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<script>
alert("안녕");
</script>
</body>
</html>
이렇게 <script>태그를 이용하면 자바스크립트 프로그램을 HTML문서에 삽입시킬수있다.
즉, <script>태그엔 자바스크립트 코드가 들어간다.
브라우저는 이 <script>태그를 만나면 안의 코드를 자동으로 처리한다.
모던 마크업
<script>태그엔 여러 속성이 있다. (나도 type외엔 잘몰랐음..)
-
type속성 ex)
<script type=...>
HTML4에선 스크립트에type속성을 명시하는게 필수였다. 그래서type='text/javascript'속성이 붙은 스크립트가 많이 존재했다.
이젠 타입 명시가 필수가 아니다.
그러나import export를 사용하기 위해선type='module'로 스크립트를 모듈로 지정하는데는 사용되곤 한다. -
language 속성 ex)
<script language=...>
이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이므로 명시하는게 의미가 없어짐. 사용할 필요가 없다. -
스크립트 전후에 위치한 주석
나는 본적이 없다. 그러나
<script type="text/javascript"><!--
...
//--></script>이런식으로 오래된 책과 가이드에 <script>태그 안에 주석이 있었다고 한다.
이 주석은 <script>태그를 처리하지 못하는 브라우저가 해당 <script>태그를 읽지 못하게 하려고 사용했었다.
지난 15년간 출시된 브라우저는 <script>태그를 처리할수 있으므로, 요새는 이런 주석이 없다.
외부 스크립트
자바스크립트코드가 양이 많거나 자바스크립트를 모듈화 하여 하나의 파일에 위치시키고 싶을 경우 <script> ~~~</script>사이에 자바스크립트를 위치시키지않고 자바스크립트로 작성된 파일을 위치시키는 방법이 있다.
<script src="./src/index.js"></script>
이런식으로 외부 파일로부터 자바스크립트를 읽고싶을 땐 이렇게 src속성을 용해서 HTML에 삽입한다.
여기서 경로는 상대경로를 이용했지만 절대경로를 이용해서 외부 자바스크립트 파일을 읽어올수 있다.
주의
- HTML안에 직접 스크립트를 작성할 경우
ex) <script>alert('안녕'); ... </script>는 대게 자바스크립트 코드가 간단할 경우만 작성한다.
스크립트가 길어지면 외부 스크립트에서 했던것처럼 분리된 파일로 만들어서 저장하는 것이 좋다.
왜냐면 스크립트를 별도의 파일로 작성하면 브라우저가 스크립트를 다운받아 캐시하기 때문에 성능상 이점이 있다.
브라우저가 캐시한 스크립트파일에 대해 동일한 스크립트파일을 사용할 경우 캐시된 스크립트 파일을 다시 가져와 사용(다시 새로 다운받지 않는다.)하기 때문에 단 한번만 스크립트 파일을 다운받으면 된다.
이를 통해 웹페이지의 실제 속도가 빨라진다.
src속성이 있으면<script>태그의 내부 코드는 무시된다.
<script src='src/index.js'>alert('안녕..');</script>에 대해서 src속성이 존재하므로 내부 코드인 alert('안녕...');은 무시 된당!
따라서 어떤식으로 웹페이지에서 자바스크립트 파일을 받아올지 둘중 하나 선택해야한다.
물론 중복으로 사용가능하다.(다른 방법으로 중복으로 <script>태그를 사용가능하단 소리임.)
<script src='src/index.js'></script>
<script>alert("안녕..");</script>끄읏.
요약
- 웹페이지에서 자바스크립트 코드를 추가하려면
<script>태그를 이용한다. - 속성
type과language는 필수가 아니다. - 외부 스크립트 파일을 HTML에 삽입하려면
src속성을 이용한다. (script태그안에 직접 자바스크립트 코드를 넣는것보다 이 방법이 좋은 이유를 알자! - 브라우저가 외부 스크립트 파일을 캐시한다!)
