[코어 자바스크립트] 2.1 Hello, World!
출처 : 모던 JavaScript 튜토리얼
1. script 태그
<script>태그를 이용하면 자바스클비트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.<script>태그엔 자바스크립트 코드가 들어간다. 브라우저는<script>태그를 만나면 안의 코드를 자바스크립트 코드로 인식하여 처리한다.- 예)
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p>스크립트 후</p>
</body>
</html>
2. 모던 마크업
<script>태그에 사용할 수 있는 몇 가지 속성(attribute)가 있다.
type 속성 : <script type= ... >
- HTML5에서는 type을 명시하는 것이 필수가 아니다. 또한 type 속성은 자바스크립트 모듈에 사용할 수 있다.
language 속성: <script language= ... >
- language 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다. 하지만 자바스크립트가 기본 언어이기 때문에 이 속성을 더이상 사용할 필요가 없어졌다.
- HTML 문서에서 아래와 같은 코드는 작성한 지 오래된 코드이다.
<script type="text/javascript">
</script>
3. 외부 스크립트
- 자바스크립트 코드의 양이 많은 경우에는 HTML 파일에 직접 자바스크립트 코드를 작성하지 않고 외부 파일로 저장하여 HTML 문서에 그 경로를 삽입한다.
- 아래의 코드에서
/path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다.
<script src="/path/to/script.js"></script>
- 현재 페이지에서부터 자바스크립트 파일까지의 상태 경로를 사용하는 것도 가능하다. 예를 들어 같은 폴더 내에 있는 파일을 참조한다면 아래와 같이 작성한다.
<script src="script.js"></script>
- 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>
주의
- HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.
- 스크립트를 별도의 파일에 작성하면 블라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있기도 하다.
- 여러 페이지에서 동일산 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 스크립트 파일을 한 번만 다운받으면 되기 때문에 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.
src 속성이 있으면 태그 내부의 코드는 무시된다.
<script>태그는src속성과 내부 코드를 동시에 가지지 못한다.
<script src="file.js">
alert(1); // src 속성이 사용되었으므로 이 코드는 무시된다.
</script>
<script src="…">로 외부 파일을 연결할지, 아니면<script>태그 내에 코드를 작성할지를 하나만 선택해야 한다.
<script src="file.js"></script>
<script>
alert(1);
</script>
4. 요약
- 웹 페이지에 자바스크립트 코드를 추가하기 위해
<script>태그를 사용한다. type과language속성은 필수가 아니다.- 외부 스크립트 파일은
<script src="path/to/script.js"></script>와 같이 삽입한다.
5. 과제
**alert 창 띄우기**
- “자바스크립트!”라는 메시지를 담고 있는 alert 창을 띄워주는 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script>
alert("자바스크립트");
</script>
</body>
</html>
외부 스크립트를 이용해 alert 창 띄우기
- 이전 과제 ‘alert 창 띄우기’의 해답에 있는 스크립트를
alert.js라는 외부 파일로 옮긴 후, 스크립트가 기존처럼 alert 창을 잘 띄워주는지 확인하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script src="alert.js"> </script>
</body>
</html>
alert("자바스크립트");