자바스크립트를 페이지 내부에 작성하거나 외부의 *.js 파일을 가져온다.
src 애트리뷰트가 없는 경우 type 애트리뷰트에 따라 다르지만 스크립트 콘텐츠 제한과 일치해야 한다. 일반적으로 text/javascript와 같은 동적 스크립트 코드를 작성한다.
src 애트리뷰트가 있는 경우 요소는 비워 있거나 요소의 내용에서 파생된 IDL(Interface Description Language, 자바스크립트 속성)값이 ABNF의 문서 형식과 일치해야 한다. 즉, 실행 코드가 아닌 주석문이 들어갈 수 있다.
<script> 태그는 <head> 또는 <body> 내에서 작성이 가능하며 기본적으로 순차적으로 해석된다. <script>는 src 속성 사용 여부에 따라 <script> 내에 자바스크립트 코드 작성 여부를 결정한다.
<script> 요소 내에 자바스크립트 코드를 작성할 수 있다. 페이지 내부에 직접 포함하는 방식이라고 할 수 있다. 페이지 내부에 직접 포함하는 스크립트는 캐시(cache)가 되지 않으므로 효율성 측면에서는 좋지 않다. 부득이한 경우를 제외하고는 외부에서 가져오는 방식이 여러 가지 면에서 유리하다.
<script>요소에 src 애트리뷰트를 명시하면 외부에서 가져오는 것에 우선 순위를 두며 <script> 요소 내에 추가적인 스크립트를 작성할 수 없다. 하지만 자바스크립트에서 가능한 주석 작성은 할 수 있다.
<script src="cool-effects.js">
// create new instances using:
// var e = new Effect();
// start the effect using .play, stop using .stop:
// e.play();
// e.stop();
</script>외부에서 가져오는 스크립트는 캐시(cache)가 된다. 따라서 속도를 포함한 모든 면에서 매우 효율적일 수 있으나 개발 단계에서는 매번 캐시(cache)를 업데이트해서 확인해야 하는 번거로움이 있을 수 있다. 하지만 조금만 신경을 쓴다면 매우 효과적인 방법이 있다. 다음 샘플은 서버 사이드 스크립트(PHP)의 도움을 받아 캐시(cache)를 업데이트하는 코드를 구조화한다.
<?php
// 다음 변수를 공용으로 만들어 사용하며 개발이 완료되면 정적인 값으로 고정한다.
// time() 함수는 페이지가 로드될 때 마다 유닉스 타임(unix time)을 반환한다.
$cacheVersion = time();
?>
<!-- 스크립트 경로 뒤에 '?any-character'를 추가하면 캐시(cache)가 업데이트된다. -->
<script src="script.js?<?=$cacheVersion?>"></script><script> 태그를 만나면 인라인(inline) 스크립트 또는 async, defer, type="module" 속성이 없는 경우에는 스크립트를 로드하여 평가하기 전까지 HTML 구문 분석을 중단한다.사용할 리소스의 경로를 설정한다.
비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.
<script src="/example.js"></script>가장 많이 사용되는 대표적인 text/html, text/css, text/javascript가 있고 그외의 유형은 Media Types를 참고하라.
미디어 유형 토큰(token) 생성과 일치하는 문자열이다. 매개변수가 포함될 수 있다. 매개변수가 없는 유효한 MIME 형식 문자열은 U+003B(;)을 포함하지 않은 MIME 형식 문자열이다.
설정되지 않거나 빈 문자열이면 기본적으로 자바스크립트 MIME 유형(text/javascript)이다.
<script type="module" src="/example.js" async></script>*.css와 같이 스타일시트(stylesheet) 파일을 나타내는 MIME 유형이다.
*.html, *.htm 파일을 나타내는 MIME 유형이다.
*.js 파일을 나타내는 MIME 유형이다.
ES6의 module을 지원하는 웹브라우저에서 실행하지 않을 스크립트임을 나타낸다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
<script src="/example.js" nomodule></script>자바스크립트가 웹 문서에 포함이 되지만 웹 문서와는 완전하게 독립적으로 동작하도록 한다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
<script src="/example.js" async></script>웹브라우저가 스크립트 문서를 분석한 후 DOMContentLoaded가 발생되기 이전에 실행하도록 한다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
<script src="/example.js" defer></script>교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.153.0/three.min.js"
integrity="sha512-
5ajBhKbDcvRgu2/sCvkhXAQPg6/BnfN/0te1osh0kixzCujtrosB4rmcMfqArTqyAtRpVApQbhgAxTNG26+1Bw=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>교차 출처(CORS) 요청을 수행하지만 별도의 자격 증명을 보내지 않고 same-origin으로 설정되어 익명으로 요청을 한다.
교차 출처(CORS) 요청을 수행하면서 쿠키(cookie), X.509 인증서, HTTP Basic 인증 중 한 가지 이상의 자격 증명을 포함하는 include로 설정되어 요청을 한다.
요청에 대한 무결성 메타데이터를 나타낸다.
지원하는 해시(hash)는 sha256, sha384, sha512이다. 온라인에서 해시를 생성하는 서비스가 있으므로 참고한다. 오픈 소스 라이브러리를 CDN으로 서비스하는 경우에 기본적으로 무결성 해시 키를 제공하는 곳도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/5.1.3/typescript.min.js"
integrity="sha512-gYrAETVZWqQ4aAwe1gRJ1QJLOILzC4zY5usT6DmuAK8qMh9eyq3P1dvYkLEiHDmzBZocbilA7afvmcaGF1zZGw=="
crossorigin="anonymous">
</script>리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.153.0/three.min.js"
referrerpolicy="no-referrer">
</script>리퍼러(referrer) 헤더(header)가 전송되지 않는다.
요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.
same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.
요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.
요청의 전체 referrerURL이 same-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.
외부 리소스를 가져올 때 특정 작업(예: render)을 차단해야 함을 명시적으로 설정한다. 기본값은 차단 가능성이 없는 상태이다.
순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.
평가를 하지만 렌더링을 차단한다.
연결된 리소스를 가져와 처리할 때 우선 순위를 결정한다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
동일한 대상을 가진 다른 리소스와 비교하여 가져오기 우선 순위를 자동으로 결정한다.
동일한 대상을 가진 다른 리소스에 비해 우선 순위가 높은 가져오기를 알린다.
동일한 대상을 가진 다른 리소스에 비해 우선 순위가 낮은 가져오기를 알린다.
이 두 개의 속성은 비동기적으로 다운로드를 실시한다는 것은 동일하지만 실행시 다음과 같은 차이점이 있다.
| 순서 | 시점 | 용도 | |
|---|---|---|---|
async | load-first order 방식이 적용된다. 즉 작성 순서와 관계없이 먼저 로드된 스크립트를 먼저 실행한다. | HTML 문서가 완전히 로드 되지 않았거나 구문 분석이 끝나지 않더라도 실행될 수 있다. 스크립트 크기가 작거나 캐싱된 경우와 HTML 코드가 매우 긴 경우에 발생할 수 있다. | 독립적인 실행 프로세스이며 실행 순서와 관계없는 경우 |
defer | 작성된 순서에 따라 실행한다. | 다운로드 된 스크립트는 HTML 구문 분석이 완료된 후에 작성된 순서에 따라 DOMContentLoaded 이벤트가 발생하기 전에 순차적으로 실행한다. | DOM을 다루면서 실행 순서가 필요한 경우 |
defer 속성을 사용하게 되면 스크립트가 실행하기 전에 DOM이 화면에 렌더링된다. 따라서 완전히 생성되지 않은 UI가 보여질 수 있으므로 적절한 시각적/기능적 처리를 통해 오작동이 발생하지 않도록 할 필요가 있다.