프론트엔드 개발자를 위한 JS - 2장

Java Script/프론트앤드 개발자를 위한 자바스크립트 2020. 4. 24. 18:44

2장. HTML속의 자바스크립트

● <script>요소

○ JS를 HTML 페이지에 삽입하는 일차적인 방법

1. async
- Optional, 외부 스크립트 파일을 불러올 때만 유효. 스크립트를 즉시 내려받지만 자원을 받거나 다른 스크립트를 불러오는 등 다른 페이지 작업을 방해해서는 안됨.

2. charset
- Optional, src 속성으로 명시한 코드의 문자셋을 지정. 브라우저가 이 속성값을 무시하는 경우가 많아 잘 안씀.

3. src
- Optional, 실행할 코드를 포함한 외부 파일의 위치를 지정.

4. defer
- Optional, 외부 스크립트 파일을 불러올 때만 유효. 문서의 콘텐츠를 완전히 파싱하고 표시할 때까지 스크립트 실행을 지연해도 안전함을 나타냄.

5. type
- Optional, language 속성을 대체하기 위해 만들어짐. 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정.
default 값은 "text/javascript", 따라서 생략해도 괜찮음.
JS 파일은 "application/x-javascript" 마임 타입으로 전송됨 ~> type 속성을 명시적으로 지정하면 script가 무시될 가능성이 있음.
인터넷 익스플로러를 제외한 브라우저는 "application/javascript"와 "application/ecmascript"도 인식함.

6. language - 폐기, 대부분 브라우저에서 이 속성을 무시, 쓰면 안됨.

○ 인라인 JS 코드 (Inline Javascript) - 태그 내에 직접 js 명령어를 작성하는 방법

<h1 onclick="alert('ok!')">인라인 방식 자바스크립트</h1>
  <h1>내부 자바스크립트</h1>

○ 내부 JS 코드 (Internal Javascript) - 페이지에서 직접 작성

  <script type="text/javascript">
      function sayHi(){ 
          alert("Hi!");
      }
  </script>

▲ 코드는 위에서부터 차례로 순차해석, 함수 정의가 먼저 해석되어 인터프리터 환경 내부에 저장됨.

또한, JS 코드 사용할 때는 문자열"</script>"를 쓸 수 없음.

<script type="text/javascript">
   function sayScript(){ 
    alert ("</script>"); 
  } 
  </script>

▲ 문자열"</script>"는 script를 닫는 태그로 인식돼서 error 발생. 이러한 경우 "/" 를 앞에 붙여 이스케이프해서 사용.

<script type="text/javascript">
   function sayScript(){ 
    alert ("<\/script>"); 
  } 
  </script>

▲ 코드 정상 작동

○ 외부 JS 코드 (External Javascript) - 작성되어있는 js파일 불러옴.

<script type="text/javascript" src="example.js"></script>

※ Internal JS와 External JS를 동시에 사용하면, 브라우저는 Script 파일을 내려받아 실행하며 Internal 코드는 무시함.

○ defer와 async를 제외하고는 script 요소는 페이지에 나타난 순서대로 실행.

○ <script>태그는 <head>태그 안에 작성하는 것이 일반적이지만, 불러오는 JS파일이 많아지면 JS코드를 전부 내려받고 -> 파싱하고 -> 해석을 끝날 때까지 페이지 렌더링이 멈추게 된다. 브라우저는 <body>태그를 만나면서 페이지 렌더링을 시작하기 때문이다. 이런 이유로 최신 웹 애플리케이션에서는 <body>요소 안에, 페이지 콘텐츠 마지막에 쓴다.

<!DOCTYPE html>
   <html>
    <head>
     <title>Example HTML Page</title>
    </head>
    <body>
     < !— 페 이 지 콘 덴 츠 -->
     <script type="text/javascript" src="ex1.js"></script>
     <script type="text/javascript" src="ex2.js"></script>
    </body> 
   </html>

○ defer를 이용해서 페이지 전체를 파싱한 후에 스크립트를 실행. (코드는 즉시 내려받음)

<!DOCTYPE html> 
 <html> 
  <head> 
   <title>Example KTNL Page</title>
    <script type="text/javascript" defer src="ex1.js"></script>
    <script type="text/javascript" defer src="ex2.js"></script>
  </head> 
  <body> 
   < !— 페 이 지 콘 텐 츠 --> 
  </body>
 </html>

▲ </html> 태그를 만난 후 <script> 태그 실행, defer는 외부 스크립트를 불러올 때만 유효. 하지만, 모든 브라우저가 호환되는게 아니기 때문에, body 마지막에서 script를 불러오는게 좋음.

1. 비동기 스크립트 - async는 defer와 비슷하게 브라우저에게 파일을 즉시 내려받으라고 지시하지만,
마크업 순서대로 실행된다는 보장이 없다는 점이 다르다.
~> Random으로 Script를 읽는다고 생각하면 편함
따라서, js파일 사이에 의존성이 있으면 안된다.
(ex Library와 이를 이용하는 script file)
▶ DOM을 조작하는 스크립트는 Async로 불러오지 않는편이 좋다.

2. XHTML - 하이퍼텍스트 마크업 언어 = HTML에 XML을 적용한 것

<script type="text/javascript" >
 function compare(a, b) {
  if (a < b) {
   alert ("A is less than B")
  else if( a > b) {
   alert ("A is greater than B")
  } else {
   alert ("A is equal to B")
  }
</script>

▲ HTML에서 쓸 수 있는 문법이지만, XHTML에서는 a < b 에서 <를 태그의 시작으로 간주하기 때문에 쓸 수 없다. 따라서, XHTML에서는 해당 기호를 \< 로 바꾸거나 CDATA 섹션으로 감싸서 사용할 수 있다. XML을 Parsing할 때 코드나 기호를 전달하고자 CDATA를 쓰기는 하지만, script 자체에서 쓰는 것은 좋은 코드가 아니라고 생각하기 때문에 여기서는 알고만 넘어가자.

○ 인라인 코드와 외부 파일

◎ External JS의 장점

1. 관리하기 쉽다.

2. 캐싱 - 서로 다른 페이지에서 같은 파일을 사용한다면 한 번만 내려받아도 된다. 따라서 페이지를 불러오는 시간이 짧아진다.

3. 안정성 - CDATA 섹션이나 주석 편법 등 인라인 코드 작성법이 달라지는데 반해, 외부에서 script를 불러오는 방법이 변하지 않는한 안전함

○ 문서 모드

◎ IE 5.5는 독타입 스위칭(Doctype Switching)을 통해 문서 모드라는 개념을 도입
1. 쿽스 모드 - IE 버전 5인 것처럼 행동하여 여러 비표준 기능 사용
2. 표준 모드 - 표준에 가까운 방식으로 동작
▲ 콘텐츠 렌더링의 차이지만, JS에도 영향을 미침
3. 거의 표준 모드 - 표준 모드의 대부분의 기능 지원하지만, 엄격X

◎ 문서의 시작 부분에 Doctype을 쓰지 않으면 모든 브라우저에서 쿽스 모드를 사용한다. 이는 브라우저 사이에 일관성을 깨뜨림.

◎ 표준모드 적용

<!-- HTML 4.01 Stric  -->
<!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>

◎ 거의 표준 모드 적용 (Transitional 이나 Frameset 에서 사용)

<!-- HTML 4.01 Transitional --> 
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.0rg/TR/xhtml1/DTD/xhtml1-frameset.dtd">

○ <noscript> 요소

◎ 브라우저가 스크립트를 지원X or 지원이 꺼져 있을 때 표시

<!DOCTYPE html>
 <html>
  <head>
   <title>Example HTML Page</title>
      <script type="text/javascript" defer="defer" src="ex1.js"></script>
      <script type = "text/java script" defer="defer" src= "ex2.js"></script>
  </head>
  <body>
      <noscript>
          <p>This page
      </noscript>
  </body>
 </html>

▲ script를 사용할 수 없을 때, 사용자에게 메세지를 표시하는 코드

저작자표시

'Java Script > 프론트앤드 개발자를 위한 자바스크립트' 카테고리의 다른 글

4장) 변수와 스코프, 메모리 (0)	2020.06.26
프론트앤드 개발자를 위한 JS - 3장 (0)	2020.05.03
프론트엔드 개발자를 위한 JS - 1장 (1)	2020.04.22

ABOUT ME

Zin0's 개발 기록 공간 Zin0's 개발 기록 공간

2장. HTML속의 자바스크립트

'Java Script > 프론트앤드 개발자를 위한 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

2장. HTML속의 자바스크립트

'Java Script > 프론트앤드 개발자를 위한 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바