티스토리 뷰

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 요약



페이스북 그룹 자바스크립트 제대로 배우기의 스터디로 학습내용을 정리한내용입니다.



반응형
댓글
댓글쓰기 폼