티스토리 뷰
2장. HTML속의 자바스크립트
< 프론트엔드 개발자를 위한 자바스크립트>(2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.
2.1 <script> 요소
넷스케이프에서 이요소를 만들었고 네비게이터2에서 처음 구현됨, 이후 HTML 명세서에 추가되었음
<script> 요소의 속성
- async
스트립트를 즉시 내려받지만 다른 페이지 작업을 방해해서는 안된다고 지시, 외부 스크립트 불러올때만 유효함 - charset
코드의 문자셋, 잘쓰이지 않음 - defer
문서의 콘텐츠를 완전 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타냄, 외부 스트립트 불러올대만 유효함. - language
폐기됨, 써서는 안되는 옵션 - src
실행할 코드를 포함한 외부 파일의 위치 - type
language 대체를 위한속성, 스크립트언어의 콘텐츠(마임)타입 지정
보통text/javascript사용, 디폴트값도 동일함.
<script> 요소의 예
<script type="text/javascript">
function sayHi() {
alert("Hi");
}
</script>
<script type="text/javascript" src="example.js" />
2.1.1 태그의 위치
전통적으로 <head> 안에서 CSS정보 와 같이 표시하는게 일반적이였음,
하지만, 요즘은 외부파일(js)의 크기가 크고 복잡해 js 파일을 로딩하는동안 브라우져 화면 렌더링이 멈추는 현상 발생.
그래서 최근에는 <body>태그의 제일 하단에 표기함.
2.1.2 스크립트 처리 지연
defer 라는 속성으로 처리를 지연시켜 HTML 페이지 렌더링이 끝나고 나서 외부 자바스크립트 라이브러리를 실행시킬 수 있다. 하지만 모든 브라우져가 지원하지 않기때문에 2.1.1 절 처럼 <body>태그 젤 하단에 표시하는게 최선의 방법임!!
2.1.3 비동기 스크립트
페이지 렌더링과 관여하지 않고 비동기로 외부 자바스크립트를 다운받음. 자바스크립트 해석도 순서대로 된다고 보장하지 않기때문에 다수의 외부스크립트간의 의존관계가 없어야함
2.1.4 XHTML 에서 바뀐 점
- 문제점
<,>등과 같은 기호를 HTML 태그로 인식하여 오류가 발생할 수 있다. - 대응방법
<script type="text/javascript"> //<![CDATA[ function compare(a,b) { if( a < b ) { alert("A is less than B"); } } //]] </script>
2.1.5 구식문법
- 문제점
모자이크 웹브라우져가<script>요소를 지원하지 않아 자바스크립트 코드가 그대로 표현되는 문제가 발생, 그래서<!-- //-->로 감싸서 해결함.
더이상 필요하지 않으므로 사용해선 안됨
2.2 인라인 코드와 외부파일
자바 스크립틑 외부 파일로 분리하는게 모범사례라고 할 수 있다. 장점은 아래와 같다.
- 관리하기 쉽다.
- 캐싱 기능 가능 (인라인 코드는 매번 해석)
- 미래에도 안전함
2.3 문서모드
표준모드만 요약하도록 하겠다.
<!— HTML 4.01 Strict —>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
"http://www.w3.org/TR/html4/strict.dtd">
<!— XHTML 1.0 Strict —>
<!DOCTYPE html PUBLIC
”-//W3C//DTD XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!— HTML5 —>
<!DOCTYPE html>
2.4 <noscript> 요소
아래 두가지 상황에서 표시됨
- 브라우저가 스크립트를 지원하지 않거나
- 브라우저의 스크립트 지원이 꺼져 있을때
다음 예제를 보자 (body)태그 안에 사용
<noscript>
<p>경고 메시지...</p>
</noscript>
2.5 요약
반응형
'Archive > JavaScript' 카테고리의 다른 글
| [페북 JS 스터디그룹] 6.1장 객체에 대한 이해 (0) | 2014.07.13 |
|---|---|
| [페북 JS 스터디그룹] 4장. 변수와 스코프, 메모리 (0) | 2014.04.30 |
| [페북 JS 스터디그룹] 3장. 언어의 기초 (0) | 2014.04.08 |
| [페북 JS 스터디그룹] 1장. 자바스크립트란 무엇인가? (2) | 2014.03.26 |
댓글