📌 참고 사이트
Hello, world! (javascript.info)
Hello, world!
ko.javascript.info
📋 script tag
📍 특징
➡️ <script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입 가능하다.
➡️ <script> 태그에는 자바스크립트 코드가 들어가고, 브라우저가 이 태그를 만나면 안의 코드를 자동으로 처리한다.
📍속성
요즘은 잘 사용하지 않지만 오래된 코드에서 아래의 속성들을 발견할 수 있다.
➡️ type 속성 : <script type=.....>
HTML4에서는 type을 명시하는 것이 필수였다. 따라서 type="text/javascript" 속성을 작성하였다.
but 현재는 타입 명시가 필수가 아니고 모던 HTML 표준에서 위 속성은 자바스크립트 모듈에 사용할 수 있는 것으로 바뀌었다.
➡️ language 속성 : <script language=.....>
현재 사용하고 있는 스크립트 언어를 나타낸다.
현재는 자바스크립트가 기본 언어로 사용되고 있기 때문에 굳이 적어주지 않는다.
💻 사용해보기
<!DOCTYPE html>
<html>
<body>
<p>스크립트 전</p>
<!--HTML 문서에 <script> tag를 이용해 자바스크립트 프로그램 삽입-->
<script>
alert('Hello world!');
</script>
<p>스크립트 후</p>
</body>
</html>
<결과>
📍 외부 스크립트
자바스크립트 코드의 양이 많은 경우 'src' 속성을 사용해 HTML에 삽입한다.
➡️ 절대 경로 : '/path/to/script.js'
사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다.
절대경로.js 파일이 Hello, world! 폴더 하부에 존재한다고 가정하면 다음과 같이 절대경로로 나타낼 수 있다.
<script src="/Hello, world!/절대경로.js"></script>
➡️ 상대 경로 : 'script.js'
현재 페이지에서의 상대 경로를 사용하는 것도 가능하다.
상대경로.js 파일이 Hello, world! 폴더 하부에 존재한다고 가정하면 다음과 같이 상대경로로 나타낼 수 있다.
(이때 ./ 는 상대경로.js 파일이 현재 html 파일과 동일한 폴더 내에 위치하고 있음을 나타낸다.)
<script src="./상대경로.js"></script>
➡️ url 전체를 속성으로 사용하는 것도 가능하다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
📍 외부 스크립트의 이점
위와 같이 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 발생한다.
여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 스크립트 파일을 한 번만 다운받으면 되는 것이다.
이에 따라 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.
* (웹에서의) 캐시
캐시는 웹 페이지의 요소, 특히 나중에 필요할 수 있는 요소를 저장하는 임시 저장소로, 클라이언트 컴퓨터에 저장된다.그래픽 파일, 스크립트 파일 등과 같은 요소들이 캐시에 저장될 수 있다.정보는 웹 페이지를 로드할 시 브라우저의 캐시에서 자동으로 다운로드된다.동일한 페이지를 다음 번에 더 빠르게 렌더링하여 시간이 절약될 수 있다는 장점이 있다.
Difference between Cache and Cookie | Cache vs Cookie
Difference between Cache and Cookie | Cache vs Cookie
www.differencebetween.info
❕src 속성이 존재하면 <script> tag 내부에 자바스크립트 코드를 작성해도 그것은 무시된다. 따라서 여러 묶음의 자바스크립트 코드를 적용시키고 싶다면 여러개의 <script> tag를 사용해야 한다.
✏️ 과제
1️⃣ alert 창 띄우기
"자바스크립트!" 라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어 보세요.
📍 HTML
<!DOCTYPE html>
<html lang="en">
<body>
<script>
alert('자바스크립트!');
</script>
</body>
</html>
<결과>
2️⃣ 외부 스크립트를 이용해 alert 창 띄우기
alert 창 띄우기의 해답에 있는 스크립트를 alert.js라는 외부 파일로 옮겨보세요.
📍 HTML
<!DOCTYPE html>
<html lang="en">
<body>
<script src="./alert.js"></script>
</body>
</html>
📍 JS
alert('자바스크립트!');'Javascript study' 카테고리의 다른 글
| 고정 소수점 방식과 부동 소수점 방식 (0) | 2023.07.03 |
|---|---|
| [Javascript] 변수와 상수 (0) | 2023.07.03 |
| [Javascript] 엄격 모드 (0) | 2023.07.01 |
| [Javascript] 코드 구조 (0) | 2023.06.30 |
| [Javascript] 자바스크립트란? (0) | 2023.06.30 |
댓글