이 글은 모던자바스크립트https://ko.javascript.info 를 참고하여 작성되었습니다. 오류가 있다면 댓글로 말씀 부탁드립니다.
요약
- 웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용함
- type과 language 속성은 필수가 아님 (오래된 코드에만 있음)
- 외부 스크립트 파일은 <script src=”path/to/script.js”></script>와 같이 삽입
‘script’ 태그
<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있음
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert( 'Hello, world!' );
</script>
<p>스크립트 후</p>
</body>
</html><script> 태그에는 자바스크립트 코드가 들어감. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리
모던 마크업
- <script> 태그의 몇 가지 오래된 코드의 속성
- type 속성: <script type=…>
- HTML4에선 스크립트에 type을 명시하는 것이 필수였음. (예: type="text/javascript")
- 이젠 타입 명시가 필수가 아니고, 모던 HTML 표준에선 이 속성의 의미가 바뀌었음. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있음. (모듈은 심화 내용이기 때문에 다른 파트에서 다시 다룸)
- language 속성: <script language=…>
- 현재 사용하고 있는 스크립트 언어를 나타냄. 지금은 자바스크립트 언어가 기본 언어이므로 속성의 의미가 퇴색되어 사용할 필요가 없어짐.
- 스크립트 전후에 위치한 주석
태그 옆에 붙은 주석은 <script>태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했으나, 지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로, 이제는 이런 트릭을 사용하지 않음<script type="text/javascript"><!-- ... //--></script>- 아주 오래된 책과 가이드에서 위와 같이 <script> 태그 안에 주석이 존재하는 것을 볼 수 있음
- 아주 오래된 책과 가이드에서 위와 같이 <script> 태그 안에 주석이 존재하는 것을 볼 수 있음
- type 속성: <script type=…>
외부 스크립트
자바스크립트 코드의 양이 많은 경우에, 파일로 소분하여 저장할 수 있음
이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입
<script src=”/path/to/script.js”></script>
"/path/to/script.js” : 사이트의 루트에서부터 파일이 위치한 절대 경로
“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>
⚠️ HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용, 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋음. 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있음. 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용함. 스크립트 파일을 한 번만 다운받으면 되므로 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라짐
📛 src 속성이 있으면 태그 내부의 코드는 무시됨
<script> 태그의 src 속성과 내부 코드를 동시에 가지지 못함
다음 코드는 실행되지 않음
<script src="file.js">
alert(1);
</script>
따라서 <script src=”…”>로 외부 파일을 연결할 지 아니면 <script>태그 내에 코드를 작성할지를 선택해야 함
위의 예시는 스크립트 두 개로 분리하면 정상 실행됨
<script src="file.js"></script>
<script>
alert(1);
</script>
과제1. alert창 띄우기
“자바스크립트!”라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어보세요.
해결
해결코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
alert("자바스크립트!");
</script>
</body>
</html>
과제2. 외부 스크립트를 이용해 alert 창 띄우기
이전 과제 alert창 띄우기의 해답에 있는 스크립트를 alert.js라는 외부 파일로 옮겨보세요.
해당 파일을 문서와 동일한 경로로 옮긴 후, 스크립트가 기존처럼 alert 창을 잘 띄워주는지 확인해보세요.
해결
해결코드
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="alert.js"></script>
</body>
</html>
alert.js
alert("자바스크립트!");
알게된 점
- Node.js는 브라우저 이외의 환경에 주력한다
- 코어 자바스크립트 : 실행 환경으로부터 자유로운 자바스크립트를 말함 → 자바스크립트에는 브라우저 의존적인 것, 브라우저로부터 자유로운 것 두 가지가 있다
- alert: 브라우저 한정 명령어
- Node.js와 같은 서버사이드 환경에서 스크립트를 실행하고 싶다면 ‘node my.js’와 같은 명령어를 사용
이게 무슨 말인지는 잘 모르겠다
'개발공부 > Javascript' 카테고리의 다른 글
| [모던자바스크립트] 코드 블록 만들기 (0) | 2023.08.11 |
|---|
