728x90
https://ko.javascript.info/hello-world
Hello, world!
ko.javascript.info
✏️ '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 type="text/javascript"><!-- ... //--></script> - 태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하기 위해 사용
- 지난 15년간 출시된 브라우저는 <script>를 모두 처리할 수 있기 때문에 주석의 의미가 사라짐
- 아주 오래된 코드
-
- type 속성 : <script type=...>
✏️ 외부 스크립트
- 자바스크립트 코드의 양이 많은 경우, 파일로 소분하여 저장 가능
- src 속성을 통해 HTML에 삽입
-
<script src="/path/to/script.js"></script> - /path/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>
-
- 복수의 스크립트를 사용하고 싶다면 태그를 여러 개 사용
-
<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>- alert 코드가 실행되지 않음
- <script src="...">로 외부 파일을 연결 혹은 <script> 태그 내에 코드를 작성, 둘 중에 하나를 선택해야 함
-
<script src="file.js"></script> <script> alert(1); </script>- 위의 코드를 두 개의 스크립트 태그로 분리한다면 정상적으로 사용 가능
✅과제
✏️ alert 창 띄우기
- 크롬 브라우저의 콘솔 창에서 아래의 코드 입력
-
alert("자바스크립트!");
-
- HTML 문서 내에 스크립트 작성
-
<script> alert("자바스크립트!"); </script>
-
✏️ 외부 스크립트를 이용해 alert 창 띄우기
<script src="alert.js"></script>// alert.js
alert("자바스크립트!");728x90
'이론 (Front-end) > JavaScript' 카테고리의 다른 글
| [모던 자바스크립트] 2.4 변수와 상수 (0) | 2023.01.08 |
|---|---|
| [모던 자바스크립트] 2.3 엄격 모드 (0) | 2023.01.05 |
| [모던 자바스크립트] 2.2 코드 구조 (0) | 2022.12.29 |