2.1 Hello, world!
script 태그
<script>태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
<!DOCTYPE HTML>
<html>
<body>
<p> 스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p> 스크립트 후<p>
</body>
</html>모던 마크업
<script> 태그엔 몇 가지 속성(attribute)이 있다. 요즘엔 잘 사용하지 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있다.
**type**속성:**<script type=...>**- HTML4에선 스크립트에
type을 명시하는 것이 필수였다. 따라서**type="text/javascript"**속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었다. - 그러나 이젠 타입 명시가 필수가 아니며, 모던 HTML 표준에선 이 속성의 의미가 바뀌었다.
- HTML4에선 스크립트에
**language**속성:**<script language=...>**- 이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다.
- 지금은 자바스크립트가 기본언어이므로 속성의 의미가 퇴색된 상황이이기에 더는 사용할 필요가 없다.
스크립트 전후에 위치한 주석
아주 오래된 책과 가이드에서는 다음과 같이 <script> 태그 안에 주석이 존재하는걸 볼 수 있다.
<script type="text/javascript">
<!--
...
//-->
</script>모던 자바스크립트에선 이런 트릭을 사용하지 않는다. 태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했었다.
지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 코드라는 사실을 알 수 있다.
외부 스크립트
-
자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다.
이렇게 해 놓은 각 파일은
src속성을 사용해 HTML에 삽입한다.
<script src="/path/to/script.js"></script>- 여기서
/paht/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다. - 현재 페이지에서의 상대 경로를 사용하는 것도 가능하다.
- 같은 폴더 내에 있는 파일인
"script.js"를src="script.js"로 참조하는 것 처럼 말이다.
또는 URL로 전체를 속성으로 사용할 수도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여려 개 사용하면 된다.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
<script src="/js/script3.js"></script>
...⚠️ src 속성이 있으면 태그 내부의 코드는 무시된다.
<script> 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.
- 다음 코드는 실행되지 않는다.
<script src="hile.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시된다.
</script> 따라서 <script src="..."> 로 외부 파일을 연결할지 아니면 <script> 태그 내에 코드를 작성할지를 선택해야 한다.
위의 예시는 스크립트 두 개로 분리하면 정상적으로 실행된다.
<script src="file.js"></script>
<script>
alert(1);
</script>요약
웹 페이지에서 자바스크립트 코드를 추가하기 위해
<script>태그를 사용해야 한다.
type과language속성은 필수가 아니다.
외부 스크립트 파일은
<script src="path/to/script.js"></script>와 같이 삽입한다.
✅ 과제
alert 창 띄우기
<!DOCTYPE html>
<html>
<body>
<script>
alert( "I'm JavaScript!" );
</script>
</body>
</html>외부 스크립트를 이용해 alert 창 띄우기
<!DOCTYPE html>
<html>
<body>
<script src="alert.js"></script>
</body>
</html>동일한 폴더에 있는 alert.js 파일 인 경우
alert("I'm JavaScript!");