본문 바로가기

프로그래밍 세상/자바스크립트 이야기

제 13장. 웹 브라우저와 자바스크립트

 

브라우저 자바스크립트 예제

 

1. HTML 내부에 스크립트 사용하기

기존에 많이 사용하는 방법이다.

<head></head> 사이에 <script> 태그 한 줄 밑에 스크립트를 작성 후 </script> 태그로 닫아주면 된다.

<script>

// 여기에 작성하면 되죠~잉...

</script>

 

2. 외부 파일 첨부해서 사용하기

script 속성 중 src 를 추가해서 사용하면 된다.

 

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

 

 

3. 스크립트 언어 지정하기

1) meta 태그 이용하기

meta 태그는 일반적인 웹페이지에 있어서 그 표현방식에는 영향을 주지 않고 웹제작 정보, 문서, 내용 등의 정보를

제공하는 동시에 키워드를 표시하여 각종 검색엔진들이 해당 웹사이트를 검색할 시 참고하는 태그이다.

 

<meta http-equiv="Content-Script-Type" content="text/javascript">

meta 태그를 이용해서 브라우저의 기본 스크립트를 자바스크립트로 지정한다.

하지만, 이 태그를 선언하지 않았다면 기본 스크립트 언어를 자바스크립트로 인식한다.

만약 meta 태그에서 사용하는 스크립트를 사용하지 않겠다고 한다면?

아래와 같이 작성하면 된다.

 

  <script type="text/vbscript"></script>

 

script 가 소개 되지 않은 이전 브라우저에서는 type 속성을 지원하지 않았다.

그래서 지원한 것이 languague 속성이다.

  <script language="javascript"></script>

 

이렇게 language 속성을 이용해서 자바스크립트, VB스크립트로 작성하겠다는 것을 선언했던 것이다.

이전 브라우저와의 호환성을 위해서 type, language 속성을 모두 사용했던 기억이 있었을 것이다.

  <script type="text/javascript" language="javascript"></script>

   

현재는 자바스크립트가 기본 스크립트로 인식되기 때문에 <script> 만 사용해도 된다.

 

4. defer 속성

  <script type="text/javascript" defer="defer"></script>

 

위와 같이 사용하면 된다. Why? 왜? 사용하는 것인가?

위와 같이 선언하면 브라우저는 해당 코드가 화면 표시와 관계 없다고 인식하며, 화면에서 컨트롤들이 배치되는

시간이 엄청 절약된다.script 간의 충돌 문제는 개발자 몫으로...

5. <noscript>

script 가 모든 브라우저에서 지원된다면 얼마나 좋을까? 현재는 다 지원되겠지만...ㅎㅎㅎ

<script> ... </script> 와 반대 개념으로 <noscript> ... </noscript> 라고 작성하게 되면,

스크립트를 지원하지 않는 브라우저는 <script> 내용을 해석하지 못하므로 <noscript> 내용을 해석하게 된다.

<script> 내용은 자바스크립트를 이용한 명령어 모음인데 반해

<noscript>는 스크립트를 제외한 html 형식으로 작성해야 한다.

Why? 왜? 그럴까? 정말 몰라서 묻나요?! ^^ㆀ

 

6. 이벤트 처리기

   <div style="width:200px; height: 20px; background-color:skyblue;"  onclick="alert('Wow')">

Thers's no place like home</div>

이벤트의 대표적인 경우라고 할 수 있는 onclick 이벤트에 대한 예제이다.

텍스트 공간에 마우스로 클릭을 하게 되면, 클릭 이벤트가 발생되어 onclick 에 해당하는 함수 및 스크립트를

실행하게 된다. 이벤트는 이외에도 onmousedown, onmouseup, onchange, onload 등의 이벤트가 정의되어 있다.

 

7. URL 안의 자바스크립트

         <a href='javascript: window.open("about:blank"); void 0;'>chomae</a>

a 태그를 이용한 예제이다. chomae 글자를 클릭할 경우 href 속성에 해당되는 주소로 이동하게 되는데,

위와 같이 about:blank 값을 주게 되면 빈 페이지가 열리게 된다.

만약 void 0; 을 추가 하지 않는다면 화면에 [object window] 가 표시되면서 새창이 뜰 것이다.

하지만!!!!! 테스트 결과 익스플로러는 void 0; 의 영향을 받지만, 크롬은 영향을 받지 않는다.

void 0; 을 작성하지 않았을 때도 새로운 탭이 열리지만, 부모 창에는 아무런 영향을 미치지 않았다.

 

8. 동일 출저 정책(same origin policy)

웹 브라우저에서 실행 중인 클라이언트 쪽 스크립트 코드는 브라우저 창 또는 프레임에 로드된 다른 문서와

상호작용할 수 없다. 다른 문서라 함은 문서의 도메인, 프로토콜, 포트의 조합이 다른 것을 뜻한다.

보안 관점에서 나온 개념이다.