웹 브라우저와 자바스크립트 의 예제 |
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)
웹 브라우저에서 실행 중인 클라이언트 쪽 스크립트 코드는 브라우저 창 또는 프레임에 로드된 다른 문서와
상호작용할 수 없다. 다른 문서라 함은 문서의 도메인, 프로토콜, 포트의 조합이 다른 것을 뜻한다.
보안 관점에서 나온 개념이다.
'프로그래밍 세상 > 자바스크립트 이야기' 카테고리의 다른 글
| 제 16장 CSS와 DHTML (4) | 2012.11.16 |
|---|---|
| 제 15장. 문서 스크립팅 (0) | 2012.03.03 |
| 제 14장. 브라우저 창 스크립팅 (0) | 2012.02.26 |
| 제 12장. 자바스크립팅 (0) | 2012.02.16 |
| 제 11장. 정규 표현식을 사용한 패턴 매칭 (0) | 2012.02.14 |
| 제 10장. 모듈과 네임스페이스 (0) | 2012.02.13 |
| 제 9장. 클래스, 생성자, 프로토타입 (0) | 2012.02.13 |
| 제 8장. 함수 (0) | 2012.01.30 |
| 제 7장. 객체와 배열 (0) | 2012.01.30 |
| 제 6장. 문장 (0) | 2012.01.21 |
