'javascrip'에 해당되는 글 3건
- 2014.09.23 HTML 속의 자바스크립트
- 2014.09.23 자바스크립트 소개
- 2014.09.22 자바스크립트란 무엇인가
HTML 속의 자바스크립트
2014. 9. 23. 16:58 나홀로스터디/JS For Web Dev
이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
2.1 <'script> 요소 사용
2.2 인라인 스크립트와 외부 스크립트의 비교
2.3 문서 모드가 자바스크립트에 미치는 영향
2.4 자바스크립트가 비활성화된 상황에 대한 대비
2.1 <script> 요소 사용
<script>요소는 async, charset, defer, language, src, type 여섯가지 속성이 있다.
async와 defer속성은 외부 스크립트 파일을 불러올 때만 유효하고 charset와 language속성은 거의 사용하지 않는다. src속성은 외부 파일의 위치를 지정하고 type속성은 브라우저 호환성을 위해 "text/javascript"로 표기하나 기본값이므로 생략 가능하다.
<script> 요소는 두가지 방법으로 사용한다.
페이지에 직접 작성하는 인라인 자바스크립트 코드는 위에서부터 차례로 해석되며 스크립트 요소 내부의 코드 전체를 평가하기 전에는 페이지의 나머지 콘텐츠를 불러오지도 표시하지도 않는다.
인라인 스크립트를 파싱하는 방식때문에 "/"문자를 \로 이스케이프해서 해결한다.
자바스크립트를 외부에서 불러오려면 src속성을 사용하고 마찬가지로 외부파일 코드를 해석하는 동안은 페이지 처리가 멈춘다.
<script type="text/javascript" src="example.js"></script>
중요: <script>와 </script> 태그 사이에 스크립트 코드가 있고 src 속성도 사용했다면 브라우저는 스크립트 파일을 내려받아 실행하며 인라인 코드는 무시한다.
2.1.1 태그위치
외부파일을 한곳에서 관리하기 위한 목적으로 전통적으로 <script>요소는 페이지 <head> 요소 안에 쓰는것이 일반적이나 <body>를 만나기전 자바스크립트 코드를 내려받고 파싱하고, 해석이 끝날때까지 렌더링이 지연되는 것을 이유로 최신 웹 애플리케이션에서는 자바 스크립트 코드를 모두 <body> 요소 안에, 페이지 콘텐츠 마지막에 쓴다.
2.1.2 스크립트 처리 지연(defer 속성)
defer속성을 설정하면 브라우저는 즉시 코드를 내려받지만 실행은 지연한다. 하지만 현실에서는 defer 속성으로 지연시킨 스크립트가 항상 순서대로 실행되지 않고 html5를 지원하는 브라우저는 인라인 defer속성을 무시한다. 따라서 지연시킬 <script>요소는 하나만 쓰고 맨 마지막에 놓는것이 최선이다.
2.1.3 비동기 스크립트(async 속성)
스크립트를 내려받아 실행할 때까지 기다릴 필요없이 페이지 렌더링을 시작해도 좋다는 명시이므로 파일 사이에 의존성이 있으면 제대로 실행되지 않을수 있다. DOM을 조작하는 스크립트는 비동기적으로 불러오지 않는것이 좋다.
2.1.4 XHTML에서 바뀐 점
확장성 있는 하이퍼텍스트 마크업 언어 XHTML은 HTML에 XML을 적용한 것으로 HTML보다 엄격한 규칙으로 <script>요소의 콘텐츠를 파싱하는 규칙이 적용되지 않는다.
따라서 < 기호를 태그의 시작으로 간주하여 < 기호다음에는 공백문자가 올수 없으므로 발생하는 문법에러를 해결하기 위해서는 < 기호를 HTML 엔티티 <로 변경하거나 CDATA 섹션으로 자바스크립트 코드를 감싸는 방법이 있다.
XHTML 비호환 브라우저에서 CDATA 섹션을 지원하지 않는 문제를 해결하기 위해 CDATA 마크업앞에 주석기호 //를 사용한다.
2.2 인라인 스크립트와 외부 스크립트의 비교
- 외부파일 사용의 이점
2.3 문서 모드
인터넷 익스플로러 5.5는 '쿽스모드'와 '표준모드' 두 가지 문서모드를 도입했다. 두 모드 사이의 중요한 차이는 콘텐츠 렌더링으로 자바스크립트에도 영향이 있다. 이후 등장한 '거의 표준모드'는 표준모드의 대부분을 지원하나 엄격하지 않고 테이블에서 사용한 이미지 주변의 공백을 어떻게 처리하느냐의 차이가 크게 나타난다.
문서 시작에 독타입을 쓰지 않으면 모든 브라우저는 쿽스모드를 사용하고, '거의 표준'모드는 트랜지셔널이나 프레임셋 독타입에서 사용된다. 표준 모드와 '거의 표준'모드는 거의 유사하기 때문에 '표준 모드'는 쿽스모드를 제외한 둘이라고 생각해도 무관하다.
2.4 자바스크립트가 비활성화된 상황에 대한 대비(noscript 요소)
<noscript> 요소는 브라우저가 자바스크립트를 지원하지 않을때 대체 콘텐츠를 제공하기 위한 것으로 <script> 요소를 제외한 html 요소를 포함할수 있다.
브라우저가 스크립트를 지원하지 않거나 스크립트 지원이 꺼져있는 상황이 되면 <noscript> 요소의 내용이 렌더링 된다.
'나홀로스터디 > JS For Web Dev' 카테고리의 다른 글
| 참조타입 (0) | 2014.10.17 |
|---|---|
| 객체에 대한 이해 (0) | 2014.10.15 |
| 변수와 스코프, 메모리 (0) | 2014.10.07 |
| 언어의 기초 (0) | 2014.10.01 |
| 자바스크립트란 무엇인가 (0) | 2014.09.22 |
자바스크립트 소개
2014. 9. 23. 16:37 나홀로스터디/JS 완벽가이드
이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
1.1 자바스크립트란?
1.2 여러 버전의 자바스크립트
1.3 클라이언트 측 자바스크립트
1.4 기타 환경에서의 자바스크립트
1.5 자바스트립트 탐험
자바스크립트는 객체지향 프로그래밍을 지원하는 인터프리터 방식의 프로그램 언어로 변수의 타입을 명시할 필요가 없는 타입 제약이 약한 언어이다.
자바스크립트의 객체지향 상속 메커니즘은 프로토타입(prototype) 기반이며 기본 데이터 타입으로 숫자, 문자열, 불리언 값을 지원하고 배열, 날짜, 정규 표현식 객체를 기본으로 지원한다.
웹브라우저에 내장된 자바스크립트는 HTML 웹 페이지 내에 포함된 스크립트를 실행하는데 이것은 웹 서버에 의해 실행되는것이 아니라 클라이언트 컴퓨터에 의해 실행되는 것으로 클라이언트 측 자바스크립트라고 불린다.
1.1 자바스크립트란?
자바스크립트는 자바가 아니다
자바스크립트는 썬 마이크로시스템즈의 프로그램 언어인 자바와 문법이 약간 닮은 것과 둘다 웹브라우저에서 실행될 수 있다는 것을 제외하고는 서로 관련이 없다.
1.2 자바스크립트란 무엇인가
자바스크립트는 간단하지 않다
자바스크립트는 언뜻 간단해 보이지만 사실 다른 언어와 비슷하거나 일부 언어보다 더 다양한 기능을 갖춘 완벽한 프고그램 언어다.
1.3 클라이언트 측 자바스크립트
클라이언트 자바스크립트는 자바스크립트 인터프리터가 웹 브라우저에 내장된 것으로 클라이언트 측 자바스크립트는 자바스크립트 인터프리터의 스크립트 지원과 웹 브라우저에 의해서 정의되는 문서 객체 모델(DOM: Document Object Model)을 결합한 것으로 정적인 콘텐츠에 동적인 성질을 부여한다.
자바스크립트의 진정한 힘은 스크립트로 HTML 문서 내용에 접근할 수 있다는 것이다.
>> 클라이언트 측 자바스크립트 예
자바스크립트란 무엇인가
2014. 9. 22. 11:09 나홀로스터디/JS For Web Dev
이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
1.1 역사
1.2 자바스크립트란 무엇인가
1.3 ECMAScript와 관계
1.4 다양한 버전
1995년 입력 유효성 검사를 주목적으로 등장한 자바스크립트는 브라우저 창과 콘텐츠 모든 부분과 상호작용하며 클로저나 익명(람다)함수, 심지어 메타프로그래밍까지 처리하며 복잡한 계산과 상호작용을 수향하는 완전한 프로그래밍 언어로 발전하였다.
1.1 역사
클라이언트 언어의 필요성을 느끼던 넷스케이프는 Mocha, LiveScript라고 불리는 스크립트 언어를 개발했는데 개발기간을 줄이기 위해 선 마이크로시스템즈와 협력하기로 하고 당시 자바의 인기에 편승하기 위해 출시 직전 넷스케이프 네이게이터2 LiveScript의 이름을 자바스크립트로 바꾼다. 1996년 8월 마이크로소프트가 JScript라는 이름을 가지고 독자적으로 자바스크립트를 구현하면서 두가지 버전이 존재하게 되었고 이 둘을 제어할 표준을 정하게 된다. 이로써 ECMA(유럽 컴퓨터 제작자 협회)는 기술위원회를 발족하여 "문법과 의미를 표준화하여 일반적인 목적에 쓸 수 있고 플랫폼을 가리지 않으며 제조사에 중립인 스크립트 언어"를 만들기로 하고 여러 프로그래머를 투입해 ECMAScript(이크마스크립트)라는 이름의 스크립트 언어를 정의한다.
1.2 자바스크립트란 무엇인가
자바스크립트는 ECMA-262에 정의된것보다 훨씬 많은 내용을 담고 있다.
- 코어(ECMAScript)
- 문서 객체모델(DOM)
- 브라우저 객체모델(BOM)
1.3 ECMAScript와 관계
ECMAScript는 견고한 스크립트 언어를 만드는 기반이다.
ECMAScript는 단순히 명세에서 설명하는 부분(문법,타입,선언문,키워드,예약어,연산자,객체)을 구현한 언어를 부르는 말일뿐 자바스크립트는 ECMAScript를 구현한것이다.
'나홀로스터디 > JS For Web Dev' 카테고리의 다른 글
| 참조타입 (0) | 2014.10.17 |
|---|---|
| 객체에 대한 이해 (0) | 2014.10.15 |
| 변수와 스코프, 메모리 (0) | 2014.10.07 |
| 언어의 기초 (0) | 2014.10.01 |
| HTML 속의 자바스크립트 (0) | 2014.09.23 |
by 허클베리밋