[JavaScript] 자바스크립트 for 웹 2.0 - 1부 기초 (1장 ~ 3장)

개요

"자바스크립트 for 웹 2.0"을 학습하며 기억해 둘 만한 항목을 정리해 보았다. 이 책은 자바스크립트에 대하여 기본적인 기술을 소개하고 있고 이 책은 EMCA-262와 JavaScript 1.5/1.6을 기초로 하고 있다.​

저자

셸리 파워즈(Shelley Powers)

소프트웨어 개발자, 사진작가이면서 오라일리에서 여러 권의 책(『Developing ASP Components』,『Unix Power Tools, Third Edition』, 『Essential Blogging』, 『Practical RDF』)을 집필한 작가이다. 1996년 자바스크립트에 관한 첫 저서를 썼고 이듬해인 1997년에 Dynamic HTML(DHTML)에 관한 책을 집필하였다. 또한 크로스 브라우저 개발, 자바스크립트, CSS, XML에 관한 수많은 기사들을 기고하였다. 

 

그녀의 웹사이트 주소는 http://burningbird.net

Burningbird – Burningbird: All human all of the time

 

1장. 자바스크립트의 소개 및 개요 

자바스크립트와 자그마한 웹페이지 응용프로그램을 처음으로 소개한다.

자바스크립트 사용에 관련된 여러 가지 이슈들(통합개발환경, 보안, 접근성 등)을 다룬다.

 

01. 자바스크립트의 소개와 특징

    브라우저와 프로그램에 내장되어 사용되는 스크립트 언어.

    컴포넌트 기반의 특성 때문에 복잡한 라이브러리를 간단히 생성.

    충분한 보안기능을 제공하는 객체기반 언어. 

 

02. 자바스크립트의 뒤틀린 역사

    넷스케이프 라이브커넥트라는 서버 측 기술. 라이브스크립트라는 언어 개발.

    

    1995년 12월 4일에 자바스크립트를 공표. 당시 자바의 인지도에 따라 마케팅 측면을 고려.

    1995년 넷스케이프 커뮤니케이션즈의 브렌던 아이크 (Brendan Eich)에 라이브스크립트로 개발되었다.

    1997년 ECMA스크립트 첫 번째 버전 ECMA-262를 발표

    199X년 ECMA-262 두 번째 버전 발표 (메인터넌스 릴리즈)

    1999년 12월 ECMA-262 세 번째 버전 발표

    2004년 공표. E4X: ECMA-262에 XML기능을 추가

 

03. 브라우저간 호환성 문제

    대부분의 경우 브라우저간 호환성 문제는 DOM이나 CSS의 차이점에서 기인.

    document 객체의 엘리먼트를 표현하는 방식이 다르게 구현

 

    DOM(문서 객체 모델)이 서로 다름

    CSS 구현하는 방법이 다름    

 

04. 자바스크립트로 할 수 있는 것들

    폼필드 검사

    웹 쿠키 저장 및 읽기

    페이지 엘리먼트를 동적으로 변경

    엘리먼트 감추기/보이기

    엘리먼트 이동

    사용자 이벤트 캡처

    페이지 변경

    좌우 스크롤

    Ajax 서버 측 프로그램과 통신 

    Dynamic HTML

 

05. 자바스크립트와의 첫 만남

    script 태그, 가급적 외부파일로 작성.

    type 값

        text/javascript

        text/ecmascript

    language 속성 (language="javascript")

    charset 속성은 웹페이지의 인코딩 방식과 같다면 생략가능.

    defer 속성을 지정하는 브라우저에게 스크립트가 문서 콘텐츠를 생성하지 않는다고 명시

 

    대부분의 브라우저는 innerHTML 지원

    JavaScript 주석 /**/는 헤더표시로 코드설명은 주로 // 사용

    이벤트 핸들러란 브라우저에서 제공하는 DOM의 일부

 

    var 전역변수와 지역변수

    prototype 연산자

    이제는 자바스크립트를 <!-- //-->로 감쌀 필요가 없다. 

 

    오히려 //<![CDATA[  ... //]]> 권장    

    <script type="text/javascript">
    //<![CDATA[ 
    //]]>
    </script>

 

06. 자바스크립트 샌드박스

    샌드박스: 스크립트가 컴퓨터의 자원에 임의로 접근할 수 없도록 하는 제한된 환경

    보안기능: 브라우저는 최소한의 것만 자바스크립트가 접근할 수 있도록 허용하였다.

    크로스 사이트 스크립트 (XSS, Cross-Site Scripting)

 

07. 접근성과 좋은 코딩 습관

    개발자는 이상적인 환경을 가정해서 코딩하는 습관이 있다.

    접근성 가이드라인: 다양한 상황을 고려 (마우스/키이벤트)

    noscript 태그 고려

    <noscript>
    <a href="js1.htm">자바스크립트가 동작하지 않습니다</a>
    </noscript>

 

    내장콘솔, 디버깅 도구의 활용

    DOM Inspector

    CSS Style Rules      

 

2장. 자바스크립트 데이터 타입과 변수 

이 장에서는 자바스크립트에서 사용하는 변수, 식별자, 문법, 기본 데이터 타입 등에 대해 개괄적으로 설명한다.

 

01. 데이터 타입의 개요

    자바스크립트의 가장 큰 장점은 관대함.

    자바스크립트의 데이터 타입 변환에 있어서는 콘텍스트가 매우 중요.

    확장문자열(escape sequence) 및 유니코드

 

02. 변수 식별

    자바스크립트 변수는 식별자, 영역, 데이터 타입으로 구성된다.

    첫 글자는 반드시 문자, 달러기호, 밑줄 기호 중 하나로 시작해야 한다.

    자바스크립트는 대소문자를 구분한다. 

    키워드와 ECMA 262 확장스펙 예약어는 사용불가.

    이름은 이해하기 쉬운 단어를 사용 (구글 스타일 가이드, Dojo 툴킷 스타일 가이드 참조)

    private 변수는 밑줄 기호(_)로 시작

    XmlName, DomTree 

 

03. 영역

    가급적 모든 변수선언에 var를 사용.

    예상치 못한 부작용 예방.

    지역(Local)과 전역(Global)을 확실히 구분. 

 

04. 기본 데이터 타입

    기본 데이터 타입은 세 가지:

 

    String 데이터 타입.

    문자 리터럴 "", ''

    \n, \t

 

    var sOne = escape("http://oreilly.com");

    escape / unescape 함수: ASCII 문자열을 URL 인코딩 문자열로 변환.

    encodeURI / decodeURI 함수 : ASCII 외의 문자도 인코딩/디코딩 가능.

    encodeURIComponent / decodeURIComponent 함수 : &, +, = 를 디코딩. Ajax 연산에 사용

    문자열을 숫자로 변환 시에 숫자가 아닌 경우엔 "NaN"으로 반환

 

    Boolean 데이터 타입    

    true/false

 

    Number 데이터 타입

    부동소수점 수를 말함.

    Infinity: +무한대, -Infinity: -무한대

    parseInt: 문자열에서 정수 부분의 값을 반환. 10진수로 변환 시에도 사용

    parseFloat: 문자열 속에 숫자가 아닌 값이 나타날 때까지

 

    parseInt("33.00");

    parseFloat("1.45inch");

    

    자바스크립트에서 문자열, 데이터 타입, 객체 간의 경계가 불분명하다.

    null(정의되지 않음과 undefined(값이 정의되지 않음)의 경계

    함수의 매개 변수로 넘겨주었을 때, null은 에러, undefined는 통과.

 

    0, "", NaN, null, undefined는 false이고 나머지는 전부 true. 

 

05. 상수 

    const 키워드 사용. 

 

3장. 연산자와 구문

 할당문, 조건문, 제어문 등의 자바스크립트 기본 구문과 이에 사용되는 연산자에 대해 다룬다.

 

01. 자바스크립트 구문의 형식

    모든 자바스크립트 구문의 끝에 세미콜론을 붙이는 것이 좋다.

    공백문자와 주석을 적절히 사용

    자바스크립트 압축기 JSMin, Packer 

 

02. 단순 구문

    배정문(할당문)

    산술구문

    단항 연산자: ++, --, -

    연산자 우선순위

    복합 배정연산자: +=, -=, *=, %=

    비트연산자. 잘 사용하지 않는다. 

 

03. 프로그램의 흐름과 조건문

    자바스크립트에서 흐름은 순차적이다.

    항상 중괄호로 감싸준다.

    if() .. else ...

    switch() ... case 

    switch (stateCode) {
    case 'OR','MA','WI' 
       statePercentage = 0.5;
       break;
    case 'MO' :

 

04. 조건 연산자 (if else, switch)

    동등연산자: == 

    부등연산자: !=

    일치연산자: ===

    불일치연산자: !==

    관계연산자: < <= > >= 

    삼항조건연산자: 조건 ? 참일 때 : 거짓일 때; 

 

05. 논리 연산자

    논리 AND: &&

    논리 OR: ||

    연산자 &&와 || 는 단축평가가 적용된다. 자원을 적게 사용하는 조건을 왼쪽에 둠.

    연산자 &&와 || 양쪽 논리식에 괄호를 사용. 

 

06. 반복문(while, do while, for, for in)

    for ... in 문은 연관배열을 사용할 때 유용하다.

    for ... in 문은 객체의 프로퍼티뿐만 아니라 프로퍼티 값에도 접근한다.

    연관배열은 각 요소가 특정 키값을 통해 접근할 수 있는 일종의 해쉬다.