320x100
‘script’ 태그
- 자바스크립트는 HTML 문서 어느 곳에나 삽입할 수 있다.
- 브라우저는 이 자바스크립트 태그를 만나면 안의 코드를 자동으로 처리한다.
예시:<!DOCTYPE HTML> <html> <body> <p>스크립트 전</p> <script> alert( 'Hello, world!' ); </script> <p>스크립트 후</p> </body> </html>모던 마크업
자바스크립트 태그엔 몇 가지 속성(attribute)이 있습니다. 요즘엔 잘 사용하진 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있습니다.1. type 속성:HTML4에선 스크립트에 type을 명시하는 것이 필수였으나 지금은 타입 명시가 필수가 아니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었습니다.2. language 속성:이 속성은 현재 사용하고 있는 스크립트 언어를 나타내지만 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색되어 더이상 사용할 필요가 없어졌다.3. 스크립트 전후에 위치한 주석아주 오래된 책과 가이드에서는 다음과 같이 태그 안에 주석이 존재하는 걸 볼 수 있다.모던 자바스크립트에선 이런 트릭을 사용하지 않는다. <script type="text/javascript"><!-- ... //--></script><script language=…><script type=…>
외부 스크립트
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 각 파일은 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!
반응형
'Developer > JavaScript 튜토리얼 번역공부' 카테고리의 다른 글
| 2.3 엄격 모드 (0) | 2020.08.04 |
|---|---|
| 2.2 코드 구조 (0) | 2020.08.04 |
| 1.4 개발자 콘솔 (0) | 2020.08.04 |
| 1.3 코드 에디터 (0) | 2020.08.04 |
| 1.2 매뉴얼과 명세서 (0) | 2020.08.04 |