‘script’ 태그
- 자바스크립트는 HTML 문서 어느 곳에나 삽입할 수 있다.
- 브라우저는 이 자바스크립트 태그를 만나면 안의 코드를 자동으로 처리한다.
예시:
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p>스크립트 후</p>
</body>
</html>모던 마크업
자바스크립트 태그엔 몇 가지 속성(attribute)이 있습니다. 요즘엔 잘 사용하진 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있습니다.
1. type 속성:
<script type=…>HTML4에선 스크립트에 type을 명시하는 것이 필수였으나 지금은 타입 명시가 필수가 아니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었습니다.
2. language 속성:
<script language=…>이 속성은 현재 사용하고 있는 스크립트 언어를 나타내지만 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색되어 더이상 사용할 필요가 없어졌다.
3. 스크립트 전후에 위치한 주석
<script type="text/javascript"><!--
...
//--></script>아주 오래된 책과 가이드에서는 다음과 같이 태그 안에 주석이 존재하는 걸 볼 수 있다.모던 자바스크립트에선 이런 트릭을 사용하지 않는다.
외부 스크립트
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 각 파일은 src 속성을 사용해 HTML에 삽입할 수 있다.
<script src="/path/to/script.js"></script>여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타내고 현재 페이지에서의 상대 경로를 사용하는 것도 가능하다.
물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 된다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…✅ 주의:
- HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용하고 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
- 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점도 있다. 이를 통해 트래픽이 절약되고 웹 페이지의 실 속도가 빨라집니다.
⛔ src 속성이 있으면 태그 내부의 코드는 무시됩니다.
태그는 src 속성과 내부 코드를 동시에 가지지 못합니다.<script src="file.js"> alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다. </script>따라서 외부 파일을 연결할지 아니면 태그 내에 코드를 작성할지를 선택해야 합니다. 아래 예시처럼 스크립트 두 개로 분리하면 정상적으로 실행됩니다.
<script src="file.js"></script> <script> alert(1); </script>
과제
1. alert 창 띄우기
"자바스크립트!"라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어 보세요.
HTML 코드 :
<!DOCTYPE html>
<html>
<body>
<script>
alert( "I'm JavaScript!" );
</script>
</body>
</html>동일한 폴더안에 alert.js가 있는 경우
alert("I'm JavaScript!");2. 외부 스크립트를 이용해 alert 창 띄우기
HTML 코드:
<!DOCTYPE html>
<html>
<body>
<script src="alert.js"></script>
</body>
</html>동일한 폴더에 있는 alert.js 파일의 경우
alert("I'm JavaScript!");참고자료 : Hello, world!
