코딩의 시작, TCP School

HTML <script> 태그

정의 및 특징

참조된 외부 스크립트 파일을 다음과 같이 여러 가지 방법으로 실행시킬 수 있습니다.

- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안 스크립트가 실행됨.

- async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.

- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.

이렇게 정의된 자바스크립트는 일반적으로 이미지 조정, 폼(form)에 대한 검증, 콘텐츠의 동적 변경 등에 사용됩니다.

또한, <noscript> 요소를 사용하여 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 수 있습니다.

예제

<script type="application/javascript">
    document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<script>	1.0	지원함	지원함	1.0	지원함	지원함

HTML5에서 변경된 사항

HTML 4.01에서는 <script> 요소에 type 속성을 반드시 명시해야 했지만, HTML5에서는 명시하지 않아도 괜찮도록 변경되었습니다.

또한, HTML5에서는 <script> 요소의 xml:space 속성이 더 이상 지원되지 않으며, async 속성이 새롭게 추가되었습니다.

HTML과 XHTML에서의 차이점

XHTML에서는 <script> 요소의 콘텐츠를 CDATA가 아닌 PCDATA로 선언합니다.

CDATA(Character DATA)란 XML 파서가 분석하지 않는 문자 데이터를 의미하여, PCDATA(Parsed Character DATA)란 XML 파서에 의해 분석될 문자 데이터를 의미합니다.

따라서 XHTML에서는 모든 특수 문자를 인코딩하거나, 다음 예제와 같이 CDATA 영역으로 감싸주어야 합니다.

<script>
<!--
function alertMsg() {
  alert("Hello World!")
}
//-->
</script>

사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된 속성

속성명	속성값	설명
async	async	스크립트가 비동기적으로 실행됨을 명시함. (단, <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있음)
charset	문자셋	외부 스크립트 파일에서 사용되는 문자 인코딩 방식을 명시함. (단, <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있음)
defer	defer	페이지의 파싱이 모두 끝나면 스크립트가 실행됨을 명시함. (단, <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있음)
src	URL	외부 스크립트 파일의 URL을 명시함.
type	미디어 타입	스크립트의 미디어 타입을 명시함.
xml:space	preserve	스크립트 코드 내의 공백 문자(whitespace)의 보존 여부를 명시함. HTML5에서는 더 이상 지원하지 않음.

CSS 기본값

script {

display: none;

}

DOM 인터페이스

interface HTMLScriptElement : HTMLElement {

attribute DOMString src;

attribute DOMString type;

attribute DOMString charset;

attribute boolean async;

attribute boolean defer;

attribute DOMString? crossOrigin;

attribute DOMString text;

attribute DOMString nonce;

};

연관 페이지

HTML과 자바스크립트 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<script>