이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

HTML <script> 요소는 실행가능한 코드를 문서에 포함시키거나 참조하기 위하 것입니다; 일반적으로는 자바스크립트 코드를 문서에 포함하거나 참조하기 위해 사용하나 WebGL의 GLSL 쉐이더 프로그래밍 언어(GLSL shader programming language)와 같은 다른 언어에 대해서도 사용할 수 있습니다.

컨텐트 카테고리 메타데이터 컨텐트, 플로우 컨텐트, 파싱 컨텐트.
허용 컨텐트 text/javascript와 같은 동적(dynamic) 스크립트
태그 생략 없습니다. 시작 태그와 종료 태그는 필수적입니다.
허용되는 부모 메타데이터 컨텐츠를 가질 수 있는 모든 요소, 또는 파싱 컨텐트를 가질 있는 모든 요소
허용되는 ARIA roles 없음
DOM 인터페이스 HTMLScriptElement

속성

이 요소는 전역 속성을 포함합니다.

async HTML5
이 불리언 속성은 브라우저가 가능하다면 스크립트를 비동기적으로(asynchronously) 실행해야 함을 나타냅니다.

 이 속성은 src 속성이 없는 경우(예를 들어, 인라인 스크립트인 경우)에는 사용하면 안됩니다. 이 경우에는 아무런 영향을 주지 않습니다.

브라우저는 HTML을 파싱하는 동안, 통상 최악의 시나리오를 가정하고 스크립트를 동기적으로(synchronously) 로딩합니다(예를 들어, async=false인 경우).

(document.createElement를 사용하여)동적으로 삽입되는 스크립트는 기본적으로 비동기적으로 실행되므로 동기적인 실행을 위해서는(예를 들어, 스크립트가 삽입되는 순서대로 실행되도록 하려면) async=false로 설정해야 합니다.

브라우저별 지원 내용을 확인하려면 Browser compatibility를 살펴보시기 바랍니다. Async scripts for asm.js도 같이 살펴보세요.

crossorigin
일반 script 요소는 표준 CORS 검사(the standard CORS checks)를 통과하지 않는 스크립트의 경우 window.onerror에 대해 최소한의 정보만 넘깁니다. 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 로깅(error logging)을 허용하기 위해 이 속성을 사용합니다. 유효한 인수에 대한 보다 자세한 설명은 CORS 속성 설정을 살펴보시기 바랍니다.
defer
이 불리언 속성은 브라우저에게 문서가 파싱된 후 DOMContentLoaded 이벤트가 발생하기 전에 작동되어야 하는 스크립트라는 것을 알려주기 위해 사용됩니다.
defer 속성이 적용되는 스크립트는 스크립트가 로딩되고 평가가 완료될 때까지 DOMContentLoaded 이벤트가 발생하지 않습니다.

이 속성은 src 속성이 없는 경우(예를 들어, 인라인 스크립트인 경우)에는 사용하면 안됩니다. 이 경우에는 아무런 영향을 주지 않습니다.

동적으로 삽입된 스크립트에 대해 유사한 효과를 얻기 위해서는 async=false를 대신 사용하십시오. defer 속성이 적용되는 스크립트는 문서 내에서 스크립트가 나타나는 순서대로 실행됩니다.
integrity
이 속성에는 사용자 에이전트(user agent)가 가져온(fetched) 리소스가 예기치 않은 조작 없이 전송되었는지 확인하는 데 사용할 수 있는 인라인 메타 데이터를 담습니다. 자세한 내용은 하위 리소스 무결성(Subresource Integrity)을 참조하십시오. 
nomodule
이 불리언 속성은 ES2015 modules을 지원하는 브라우저에서는 스크립트가 실행되면 안된다는 것을 의미한다 - 실제로는 모듈식(modular) 자바스크립트 코드를 지원하지 않는 구형 브라우저에 폴백(fallback) 스크립트를 제공하기 위해 주로 사용합니다.
nonce
script-src 컨텐츠 보안 정책(script-src Content-Security-Policy)의 화이트 리스트에 인라인 스크립트를 등록하기 위한 암호화된 일회용 숫자(nonce)를 의미합니다. 서버는 정책을 전송할 때마다 고유한 일회용 숫자 값을 생성해야 합니다. 추측할 수 없는 일회용 숫자를 제공하는 것이 중요한데, 그렇지 않다면 자원의 정책을 우회하는 것은 대수롭지 않은 일입니다.
src
이 속성은 외부 스크립트의 URI를 나타낸다; 이는 문서 내에 스크립트를 직접 내장하는 것에 대한 대체 수단이 될 수 있습니다.

script 요소에 src 속성이 지정되어 있다면, 태그 내에 스크립트가 포함되지 않아야 합니다.

text
textContent 속성과 마찬가지로 이 속성은 요소의 문자 컨텐츠를 설정합니다. 하지만, 이 속성은 textContent 속성과는 달리 해당 노드(node)가 DOM에 삽입된 후에는 실행가능한 코드로 평가됩니다. 
type

이 속성은 표시되는 스크립트 유형을 나타냅니다. 이 속성의 값은 다음 범주 중 하나입니다:

  • 생략 또는 JavaScript MIME 유형: HTML5호환 브라우저의 경우 스크립트가 JavaScript임을 나타냅니다. HTML5 스펙(Specification)에는 규격은 작성자가 불필요한 MIME유형을 제공하기보다는 속성을 생략할 것을 권장합니다. 초기 브라우저에서, 이 속성은 src 속성을 통해 임포트되거나(imported) 내장된(embedded) 코드의 스크립팅 언어를 식별하는데 사용되었습니다. JavaScript MIME 유형은 해당 스펙(specification)에 열거되어 있습니다.
  • module: HTML5 HTML5호환 브라우저의 경우 코드가 JavaScript 모듈로 취급됩니다. 스크립트 내용 처리는 charset과 defer 속성의 영향을 받지 않습니다. module 사용에 대한 자세한 내용은 ES6 in Depth: Modules을 참조하십시오. module 키워드가 사용된 경우 코드가 다르게 동작할 수 있습니다.
  • 다른 값: 내장된 콘텐츠는 브라우저에서 처리되지 않는 데이터 블록으로 취급됩니다. 개발자는 데이터 블록을 나타내는데 JavaScript MIME 유형이 아닌 유효한 MIME유형을 사용해야 합니다. src 속성은 무시됩니다.

각주:  Firefox에서는 type 속성 내에 비표준인 version 매개변수를 포함함으로써 <script> 요소 내에 들어 있는 JavaScript의 버전을 명시할 수 있습니다. 예를 들면, type="application/javascript;version=1.8"과 같습니다. 이는 Firefox 59에서는 제거되었습니다(bug 1428745 참조).

사라질 속성

language
type 속성과 마찬가지로, 이 속성은 사용하는 스크립팅 언어를 나타냅니다. 하지만, type 속성과는 달리, 이 속성에 사용가능한 값은 표준화되지 않았습니다. type 속성을 대신 사용해야 합니다.

Notes

인라인 스크립트뿐만 아니라 asyncdefer 속성이 설정되지 않은 스크립트는 브라우저가 페이지에 대한 파싱을 계속하기 전에 즉시 가져와(fetched) 실행합니다.

스크립트는 text/javascript로 MIME 유형을 설정해야 하나, 브라우저는 이에 대해 관대하며 스크립트가 이미지 형태 (image/*); 비디오 형태 (video/*); 오디오 형태 (audio/*); 또는 text/csv 형태인 경우에만 차단합니다. 스크립트가 차단될 때, load 이벤트가 전송되지 않는 경우라면, error 이벤트가 해당 요소로 전송됩니다.

예제

기본

다음 예제는 HTML4와 HTML5 모두에 대해 <script> 요소를 이용하여 스크립트를 임포트하는 법을 보여줍니다.

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>

모듈 폴백(Module Fallback)

type 속성에 대한 module을 지원하는 브라우저는 nomodule 속성을 가지는 스크립트를 무시합니다. 이는 fallback을 지원하지 않는 브라우저에서 module을 사용하는 방법을 제공합니다.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

규격

규격 상태 비고
HTML Living Standard
The definition of '<script>' in that specification.
Living Standard module 유형을 추가합니다.
HTML5
The definition of '<script>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<script>' in that specification.
Recommendation  
Subresource Integrity
The definition of '<script>' in that specification.
Recommendation integrity 속성을 추가합니다.

브라우저 호환성

다음 정보는 MDN의 Github (https://github.com/mdn/browser-compat-data)에서 발췌한 것입니다.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1
Notes
Full support 1
Notes
Notes Starting in Firefox 4, inserting <script> elements that have been created by calling document.createElement("script") no longer enforces execution in insertion order. This change lets Firefox properly abide by the specification. To make script-inserted external scripts execute in their insertion order, set .async=false on them.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
asyncChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
crossoriginChrome Full support 30Edge Full support YesFirefox Full support 13IE No support NoOpera Full support 12Safari Full support Yes
Notes
Full support Yes
Notes
Notes The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 14Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
deferChrome Full support Yes
Notes
Full support Yes
Notes
Notes Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Edge Full support YesFirefox Full support 3.5
Notes
Full support 3.5
Notes
Notes Since Firefox 3.6, the defer attribute is ignored on scripts that don't have the src attribute. However, in Firefox 3.5 even inline scripts are deferred if the defer attribute is set.
IE Full support 10
Notes
Full support 10
Notes
Notes In versions prior to Internet Explorer 10, it implemented defer by a proprietary specification. Since version 10 it conforms to the W3C specification.
Opera No support NoSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support YesSamsung Internet Android Full support Yes
integrityChrome Full support 45Edge Partial support 17Firefox Full support 43IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Edge Mobile No support NoFirefox Android Full support 43Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 5.0
language
DeprecatedNon-standard
Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nomodule
Experimental
Chrome Full support YesEdge No support NoFirefox Full support 60
Full support 60
No support 55 — 60
Disabled
Disabled From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 60
Full support 60
No support 55 — 60
Disabled
Disabled From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS No support NoSamsung Internet Android Full support Yes
srcChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
textChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
type.moduleChrome Full support 61Edge Full support 16Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 10.1WebView Android Full support 61Chrome Android Full support 61Edge Mobile Full support 16Firefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 48Safari iOS Full support 10.3Samsung Internet Android No support No
type: The version parameter of the type attribute
Non-standard
Chrome No support NoEdge No support NoFirefox No support ? — 59IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support ? — 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

호환성 Notes

async 특성을 지원하지 않는 이전 브라우저에서는 구문 분석기가 삽입한(parser-inserted) 스크립트가 구문 분석기를 차단합니다; 스크립트에 의해 삽입된(script-inserted) 스크립트는 IE와 WebKit에서 비동기적으로 실행되나 Opera나 Firefox 4보다 앞선 버전에서는 동기적으로 실행됩니다. Firefox 4에서 스크립트가 생성한 스크립트에 대한 DOM의 async 속성은 기본적으로 true로 설정되어 있으므로 기본 동작은 IE나 WebKit의 동작과 일치합니다.

document.createElement("script").async가 true로 평가되는 브라우저(Firefox 4와 같은)에서 스크립트에 의해 삽입된 외부 스크립트를 삽입 순서대로 실행되도록 하려면, 순서대로 실행되기를 원하는 스크립트에 대해 .async=false로 설정하십시오.

비동기 스크립트에서는 절대로 document.write()를 호출하지 마십시오. Firefox 3.6에서는 document.write()를 호출하는 것이 예기치 못한 영향을 줍니다. Firefox 4에서, 비동기 스크립트로부터 document.write()를 호출하는 것은 아무런 영향이 없습니다(에러 콘솔에 경고를 출력하는 것 말고는).

참고