[대문] (주)마중물소프트 개발팀 노트

[정보] 관리 서버 정보

Fri, 31 Dec 2010 13:29:11 +0900

아래와 같이 마중물소프트의 서버 정보를 공유합니다. [최종수정 : 2010. 12. 31 - realchoky]

운영서버 1
- IP : 116.126.142.170
- Location : 일산 SK IDC
- O/S : Windows 2008 Standard Edition SP1
- Processor : Intel Xeon E5430 2.55GHz * 2
- Memory : 16GB
- Storage :
- Usage : 마중물 Web/DB
운영서버 2
- IP : 116.124.128.179
- Location : 일산 SK IDC
- O/S : Cent OS 5.5
- Processor :
- Memory :
- Storage :
- Usage : 마중물교육 프로젝트

운영서버 3
- IP : 116.124.128.180
- Location : 일산 SK IDC
- O/S : Windows 2008 Standard Edition SP1
- Processor : Intel Xeon X5550 2.67GHz * 2
- Memory : 12GB
- Storage :
- Usage : 협회 CDP 솔루션

개발서버
- IP : 192.168.10.246
- Location : 마중물소프트 사내
- O/S : Windows 2008 Standard Edition SP1
- Processor :
- Memory :
- Storage :
- Usage : 개발 서버

[코드] CSS Template Code

Thu, 30 Dec 2010 18:01:43 +0900

[CSS 초기화 코드 - init.css]

* {

margin: 0;

padding: 0;

border: 0;

background-color: transparent;

color: 색상값;

font-size: 100%;

font-weight: normal;

font-style: normal;

text-decoration: none;

}

[CSS 브라우져 판별 핵]

margin: 10px; /* any browsers */

margin: 12px\9; /* IE 8 and below (\9 mandotory) */

*margin: 15px; /* IE 7 and below */

_margin: 20px; /* IE 6 and below */

_margin /**/:30px; /* IE 5.5 below */

[팀노트] jQuery Note

Wed, 29 Dec 2010 16:17:15 +0900

[jQuery Cookbook - 1장 jQuery의 기초]

jQuery는 HTML문서, 보다 정확하게는 문서객체모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈소스자바스크립트 라이브러리이다.
jQuery의 철학 : Write less, do more (적게 작성하고, 보다 많이 한다)
jQuery 선택자 : #은 id, .은 class
jQuery('div').hide() => 모든 div를 숨긴다.
jQuery('div').text('new content') => 모든 div의 내부텍스트를 변경한다.
jQuery('div').addClass("updatedContent") => 모든 div에 updatedContent클래스를 추가한다.
jQuery('div').show() => 모든 div를 나타낸다.
jQuery 온라인문서 : http://docs.jquery.com/Main_Page
문서에 jQuery 포함하기 (부가적인 기능향상을 위해 방법1을 사용하자!)

방법1 : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

방법2 : 다운로드 받아 포함시키기

DOM 로드된 후 함수 실행 (로딩속도 향상을 위해 방법3을 사용하자!)

방법1 : jQuery(document).ready(function() { //실행구문 })

방법2 : jQuery(function() { //실행구문 })

방법3 : </body> 앞에 스크립트 추가
DOM요소 선택

jQuery('a') => 모든 a요소 (== document.getElementsByTagName('a'))

jQuery('a').length => 모든 a요소의 개수

jQuery('input', $('form')) => 모든 form요소내의 input요소(들)

jQuery('input', document.forms[0]) => 첫번째 form요소내의 input요소(들)

jQuery('input', 'body') => body요소내의 input요소(들)

DOM요소 필터링

jQuery('a').filter('.external') => 모든 a요소 중 클래스명이 external인 a요소(들) (== jQuery('a').filter(function(index) { return $(this).hasClass('external'); }))

jQuery('p').filter('.middle').end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 필터링 전 요소(들) (== jQuery('p'))
파괴작업 (end()도 파괴작업의 이) : 일치된 jQuery요소집합에 변경을 가하는 모든 종류의 작업
DOM요소 검색

jQuery('p').find('em') => 모든 p요소 하위의 em요소(들) (== jQuery('em', $('p')) ==jQuery('p em'))

jQuery('p').filter('.middle').find('span').end().end() => 모든 p요소 중 클래스명이 middle인 요소(들)의 하위 span요소(들)의 검색 전, 필터링 전 요소(들)

(==jQuery('p'))
filter는 현재 요소(들)에 대해, find는 하위 요소(들)에 대해 작동
DOM 셀렉션 추가

jQuery('div').find('p').andSelf().css('border', '1px solid #993300'); => div요소(들)과 하위 p요소(들) 모두에 대해 스타일 적용
DOM 탐색

jQuery('li:eq(1)') => 두번째 li 요소

관련메소드 => next():다음요소, prev():이전요소, parent():상위요소, children():하위요소들, nextAll():다음요소들, prevAll():이전요소들

jQuery('li:eq(1)').parent().children(':last') => 두번째 li요소의 상위요소의 마지막 하위요소

기타 탐색관련 메소드 : http://docs.jquery.com/Traversing
DOM요소 생성

jQuery('<p><a>jQuery</a></p>'); => p요소 생성

jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com'); => p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경

jQuery('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jquery.com').end().appendTo('body');

=> p요소를 생성하고 하위 a요소(들)을 찾아 속성 변경 후 생성된 p 요소를 body요소 하위로 포함시킴
DOM요소 제거

jQuery('a).remove(); => 모든 a요소 제거

jQuery('a').remove('.remove'); => 클래스명이 remove인 모든 a요소 제거
DOM요소 교체

jQuery('li.remove').replaceWith('<li>removed</li>'); => 클래스명이 remove인 모든 li요소들을 뒤에 나온 li요소로 변경
DOM요소 복제

jQuery('ul').clone().appendTo('body'); => 모든 ul요소들을 복제하여 body의 하위요소로 포함시킴

jQuery('ul#a li').click(function() { //실행구문 }).parent().clone(true).find('li').appendTo('#b').end().end().remove();

=> 아이디가 a인 ul 하위의 li요소들을 클릭하면 함수를 실행시키고 부모요소인 ul요소를 찾아 복제(true이면 이벤트까지도 복제됨)한 후 복제된 ul의

하위 li요소들을 찾아 아이디가 b인 요소의 하위요소로 포함시킨 후 기존 ul을 제거
속성 제어

jQuery('a').attr('href', 'http://www.jquery.com').attr('href'); => 모든 a요소의 href속성의 값을 설정하고 가져옴

jQuery('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) => 모든 a요소의 href속성값과 title속성값을 설정

jQuery('a').removeAttr('title') => 모든 a요소의 title속성 제거
class 조작

addClass() : 클래스 추가 hasClass() : 클래스 값 확인 removeClass() : 클래스 제거 toggleClass() : 클래스 없으면 추가, 있으면 제거
HTML 컨텐츠 / 텍스트 조작

jQuery('p').html('<strong>Hello World</strong>'); => 모든 p요소에 html컨텐츠 삽입

jQuery('p').html(); => 모든 p요소의 html 가져옴

jQuery('p').text('Hello World'); => 모든 p요소에 text 삽입 (text메소드는 html을 escape한다)

jQuery('p').text(); => 모든 p요소의 text 가져옴
전역적인 충돌 없이 $ 사용

(function($) {

})(jQuery);

실습파일 : Chapter1.html

[JQuery Cookbook - 2장 jQuery로 요소 선택하기]

jQuery함수내에서 CSS셀렉터 사용
jQuery('#content p a'); => id가 content인 요소의 하위 모든 p요소의 하위 모든 a요소들
jQuery('#content p a').addClass('selected'); => 선택된 요소들에 selected 클래스 적용
직속 자손 결합자 (>) : 계층적 관계
jQuery('#nav li > a'); => id가 nav인 요소의 하위 모든 li요소의 직속 자손인 a요소들

jQuery('> p', '#content'); => id가 content인 요소의 직속 자손인 p요소들 => jQuery('#content > p')와 같다

jQuery('#content').children(); => id가 content인 요소의 모든 직속 자손들 => jQuery('#content').find('> *');과 같다

jQuery('#content').children('p'); => id가 content인 요소의 모든 직속 p요소들
인접 형제 결합자 (+) : 같은 레벨벨
jQuery('h1 + h2'); => h1요소에 인접한 h2요소들 => jQuery('h1').next('h2');와 같다
jQuery('h1').siblings('h2, h3, p'); => h1요소에 인접한 h2나 h3나 p 요소들
jQuery('li.selected').nextAll('li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들
일반 형제 결합자 (~)

jQuery('li.selected ~ li'); => selected클래스를 가진 모든 li요소들 다음에 나오는 모든 li요소들
필터
- :first 첫번째 선택요소
- :last 마지막 선택요소
- :even 짝수번째 요소들
- :odd 홀수번째 요소들
- :eq(n) 인덱스가 n인 요소
- :lt(n) 인덱스가 n보다 작은 요소들
- :gt(n) 인덱스가 n보다 큰 요소들
  
  jQuery(':even'); => 문서내의 모든 짝수번째 요소들
  jQuery('ul li').filter(':first'); => ul요소다음에 나오는 첫번째 li요소들
현재 에니메이션 중인 요소 선택
jQuery('div:animated'); => 에니메이션 중인 div요소들

jQuery('div:not(div:animated)').animate({height:100}); => 에니메이션 중이 아닌 div요소들의 높이를 100까지 에니메이션
텍스트나 요소를 포함하는 요소 선택

jQuery('span:contains("bob")'); => bob라는 문자열을 포함하는 span요소들

jQuery('div:has(p a)'); => p요소 하위에 a요소를 가진 div요소들

jQuery('p').filter(function() { return /(^|\s)(apple|orange|lemon)(\s|$)/.test(jQuery(this).text()); });

=> apple이나 orange나 lemon이라는 텍스트를 가진 p요소들
일치되지 않는 요소 선택

jQuery('div:not(#content)'); => id가 content가 아닌 모든 div요소들

jQuery('a:not(div.important a, a.nav)'); => important클래스를 가진 div요소의 하위 a요소가 아니고 nav클래스를 가진 a요소가 아닌 a요소들

jQuery('a').click( function() { jQuery('a').not(this).addClass('not-clicked'); } ); => a요소를 클릭하면 모든 다른 a요소들에 not-clicked클래스 추가

$('#nav a').not('a.active'); => id가 nav인 요소의 하위 a요소들 중 active클래스를 가지지 않은 a요소들
가시성 기반 요소 선택

jQuery('div:hidden'); => 눈에 보이지 않는 div요소들
속성 기반 요소 선택

jQuery('a[href="http://google.com"]');=>href속성의 값이 http://google.com인 a요소들

jQuery('*[title][href]'); => title과 href 속성을 모두 가지는 요소들

jQuery('div[id^="content-sec-"]'); => id속성의 값이 content-sec-으로 시작하는 div요소들
속성 셀렉터
- [attr] 특정 속성을 가지고 있는 요소
- [attr=val] 속성이 특정값을 가지는 요소
- [attr!=val] 속성이 특정값을 가지지 않는 요소
- [attr^=val] 속성이 특정값으로 시작하는 요소
- [attr$=val] 속성이 특정값으로 끝나는 요소
- [attr~=val] 공백과 함께 특정값을 포함하는 요소 (car는 car와 일치하지만 cart와는 불일치)
폼요소 셀렉터
- :text <input type="text" />
- :password <input type="password" />
- :radio <input type="radio" />
- :checkbox <input type="checkbox" />
- :submit <input type="submit" />
- :image <input type="image" />
- :reset <input type="reset" />
- :button <input type="button" />
- :file <input type="file" />
- :hidden <input type="hidden" />

jQuery(':text'); => type속성의 값이 text인 모든 input요소들

jQuery(':input:not(:hidden)'); => 눈에 보여지는 모든 input요소들

jQuery(':text, :textarea'); => type속성의 값이 text이거나 textarea인 모든 input요소들

특성을 갖는 요소 선택

jQuery('*').filter(function() { return !!jQuery(this).css('backgroundImage') });

=> 배경이미지를 갖는 모든 요소들

=> !!는 타입을 불린으로 변경하기 위함

=> jQuery함수의 인자인 this는 모든요소들(*) 중 filter에 인자로 전달되는 시점에 함수에 인자로 전달된 요소를 가리키는데

요소를 jQuery함수의 인자로 넘겨 jQuery메소드를 사용할 수 있도록 함

jQuery('div').filter(function() { var width = jQuery(this).width(); return width>100&&width<200; });

=> 넓이가 100보다 크고 200보다 작은 모든 div요소들
컨텍스트 매개변수
- 컨텍스트란 jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소
- jQuery에 의해 사용되는 기본 컨텍스트는 DOM계층에서 최상위 항목인 document임. 즉, jQuery('p')는 jQuery('p', 'document')와 같다

jQuery('p', '#content'); => id가 content인 요소의 하위 p요소들 (이때 #content가 p의 컨텍스트) => jQuery('#content p');와 같다

jQuery('form').bind('submit', function() { var allInputs = jQuery('input', this); });

=> form요소들 중 submit이벤트가 일어나면 allinputs변수에 이벤트가 일어난 form의 모든 input요소들을 저장

실습파일 : Chapter2.html

[규칙] Javascript Code Convention

Wed, 29 Dec 2010 11:14:20 +0900

명칭을 부여할 때는 아래 사항들을 준수한다.
- 패키지명 : 내부에서 개발하는 패키지의 경우 kr.co.mjmsoft.js를 기본패키지명으로 한다.
  
  var kr = {};
  
  var kr.co = {};
  
  var kr.co.mjmsoft = {};
  
  var kr.co.mjmsoft.js = {};
- 클래스, 생성자, 상수의 명칭은 대문자로 시작한다.
- 상수의 경우 여러단어로 구성될 경우 '_' 기호로 단어들을 연결한다.
- 패키지, 변수, 메소드의 명칭은 소문자로 시작한다.
- 복합어의 경우 '_'를 사용하여 각 단어를 연결하며, 축약하여 사용하지 않는다.
소스코드 배치 순서
- 패키지선언 -> 클래스선언 -> 전역변수 -> 전역함수
파일주석은 아래 형식을 준수한다.

/*

* 클래스 또는 인터페이스 명 (버젼, 최종수정일)

* 설명

* 작성자(작성자메일주소)
* 카피라이트

메소드주석은 아래 형식을 준수한다.

/**

* 기능설명

* 인자리스트

* 반환값

* 예외

들여쓰기는 tab키를 이용하며, 공백 4개를 기본으로 하지만, 가독성을 높이기 위해 공백의 개수를 조절할 수 있다.

블럭지정에 주의하며 항상 dangling else를 조심하라!

한 라인의 컬럼 수는 최대 80컬럼로 하며, 한 라인의 코드가 80컬럼을 넘는 경우 가독성을 고려하여 엔터를 삽입해 줄나누기 한다.

블럭 정의를 위해 { 기호를 A 형식으로 사용함을 원칙으로 하지만, 가독성을 위해서 B 형식으로로 사용해도 무방하다. (가능한 A로)

     A. if (condition) { B. if (condition)

       // statements {

       } // statements

}

하나의 변수는 한 라인에 선언한다.

변수 선언시는 반드시 var 키워드를 사용하며 반드시 초기화하여 사용한다.

[개인노트]임근수 사원-Javascript

Tue, 28 Dec 2010 22:07:41 +0900

[자바스크립트 완벽가이드]

1장 자바스크립트 소개

자바스크립트란?
- 객체지향 프로그래밍을 지원하는 인터프리터 방식의 프로그램언어
- 주로 웹브라우저에서 사용(다양한 객체들로 확장되어 사용자와 상호작용하고 웹브라우저 제어, 웹브라우저 창에 나타나는 문서의 내용을 변경)
- 자바스크립트는 자바가 아니라
  - 넷스케이프와 썬의 마케팅 전략으로 이름만 비슷하다.
- 자바스크립트는 간단하지가 않다,
  - 컴파일 되지않고 인터프리트된다
여러버전의 자바스크립트
- ECMA에 의해 표준
클라이언트측 자바스크립트
- 클라이언트측 자바스크립트는 자바스크립트 인터프리터의 스크립트 지원과 웹브라우저에 의해서 정의되는 문소 객체모델을 결합한 것
- 1-3 자바스크립트로 대출 상환금 계산하기
- <html>
  <head>
  <title>1-3 자바스크립트로 대출 상환금 걔산</title>
  <style type="text/css">
  .result{
  font-weight: bold;
  }
  #payment{
  text-decoration: underline;
  }
- </style>
  <script type="text/javascript">
  function calculate(){
  var principal = document.loandate.principal.value;
  var interest = document.loandate.interest.value/100/12;
  var payments = document.loandate.years.value*12;
  
  var x = Math.pow(1+interest, payments);
  var monthly = (principal*x*interest)/(x-1);
  
  var payment = document.getElementById("payment");
  var total = document.getElementById("total");
  var totalinterest = document.getElementById("totalinterest");
  
  if(isFinite(monthly)){
    payment.innerHTML = monthly.toFixed(2);
    total.innerHTML = (monthly*payments).toFixed(2);
    totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
  }
  else{
    payment.innerHTML = "";
    total.innerHTML = "";
    totalinterest.innerHTML = "";
  }
  }
- </script>
  </head>
  <body>
  <form name="loandate">
  <table>
  <tr>
    <td><b>Enter loan Information</b></td>
  </tr>
  <tr>
    <td>1) Amount of the loan(any current) : </td>
    <td><input type="text" name="principal" onclick="calculate();"/></td>
  </tr>
  <tr>
    <td>2) Annual percentage rate of interest : </td>
    <td><input type="text" name="interest" onclick="calculate();"/></td>
  </tr>
  <tr>
    <td>3) Repayment period in years : </td>
    <td><input type="text" name="years" onclick="calculate();"/></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" value="compute" onclick="calculate();"></td>
  </tr>
  <tr>
    <td><b>Your monthly payment</b></td>
  </tr>
  <tr>
    <td>3) Your monthly payment : </td>
    <td>$<span class="result" id="payment"></span></td>
  </tr>
  <tr>
    <td>3) Your total payment : </td>
    <td>$<span class="result" id="total"></span></td>
  </tr>
  <tr>
    <td>3) Your total interest payments : </td>
    <td>$<span class="result" id="totalinterest"></span></td>
  </tr>
  </table>
- </form>
- </body>
  </html>

2장 어휘 구조

문자집합Unicode문자집합을 사용
- 7비트 ASCII인코딩, 8비트 ISO Latin-8인코딩과 다르게 16비트 Unicode문자집합은 지구상에서 널리 사용되는 대부분의 문자를 표현이가능
대소문자 구분
- 키워드, 변수, 함수 이름, 그밖에 모든 다른 식별자들은 일관하게 대소문자를 구별하여 입력해야함
- HTML에서는 대소문자 구분이 없다(XHTML은 대소문자 구별)
공백과 줄나눔
- 자바스크립트는 프로그램 내 토큰 사이에 존재하는 스페이스나 탭, 줄바꿈등을 무시한다.
선택적인 세미클론 사용
- 자바스크립트는 세미클론을 생략할수 있다(되도록이면 생략해서 쓰지말자)
  - a=3;
  - b=4; (생략 가능)
  - a=3 ; b=4 (생략이 불가능)
  - ex) return true;(원래 작성해야할 내용)
  - -> return
    
    true; (작성시 자바스크립트는 return; true;로 인식)
주석은 '//' 나 '/*' '*/'로 사용한다.
리터럴
- 프로그램내에 직접 나타나는 데이터 값(숫자 값(10,..) 문자열('Hello JS' or "Hi"), 불리언(true, false), null..... )
- ex)배열 초기자 : {1,2,3,4,5}, 객체 초기자 : {x=1,y=2}
식별자
- 함수나 변수의 이름및 코드내 루프문에 레이블을 붙이는데 사용
- 첫번째 문자는 _or알파벳or$표시 이어야 된다(올바른 식별자)
예약어
- 자바스크립트네에 예약되어 있는 키워드
- 변수나 함수에 이름등에 사용이 불가능하다.

3장 데이터 타입과 값

숫자
- 정수리터럴 : 10진 진수 정수로 연속적인 숫자 형태로 작성된다.
- 16진수와 8진수
  - 16진수 리터널은 '0x','0X'로 시작하고 숫자나 알파벳 a~f까지 16진수 숫자들이 뒤따르는 형태
  - 8진수 리터널은 숫자 0부터 시작하여 0~7사이에 연속적인 숫자형태로 작성
- 부동 소수점 리터럴은 정수부분과 '.'소수점 이하의 부분으로 표현
- 숫자 조작 : 연산자(+,-,*,.)와 기타 산술 연산자로 조작이 가능 \
- 특수한 숫자값
  - Infinity : 무한대를 나타내는 특수한 값('-'있을 시 음의 무한대)
  - NaN : 숫자가 아닌 특수한 값
문자열
- 문자 리터럴 : 하나이상의 Unicode문자들이 ''or""둘러 싸인 변수
- 문자 리터럴 내 이스케이프 시퀀스
  - 널분자 : /0
  - 백스페이스 : /b
  - 수평 탭 : /t
  - 줄바꿈 문자 : /n
  - 수직 탭 : /v
  - 폼피드 : /f
  - 캐리지 리턴 : /r
  - 큰따움표 : /"
  - 작은따움표 : /'
  - 역슬래시 : //
- 문자열 조작
  - 문자열 이어붙이기 : "문자열" + "문자열" = "문자열문자열";
  - 문자열 길이 : s.length;
  - 마지막 문자 가져오기 : last_char = s.charAt(s.length-1);
  - 두번째, 세번째, 네번째 문자 추출 : sub = s.subString(1,4);
  - 문자열 내 'a'문자의 위치(첫번째) : i=s.indexOf('a');
- 숫자를 문자로 변환하기
  - 숫자열+빈문자열 : var n_as_string : n+" ";
  - String()함수 : var string_value = String(n);
  - toString 매서드 사용 : var string_value = n.toString();
- 문자열을 숫자로 변환
  - 문자열이 숫자문맥에 사용되면 자동적으로 숫자로 반환된다. : var product = "21" * "2" ; //두 문자열 곱은 숫자 42가 된다
  - 숫자값을 가지고 있는 문자열에서 0을 빼는 방법 : var number ="10000" - "0" ;
  - Numbe 함수 사용 : var number = Number(string_value);
  - parseInt(), parseFloat()사용: 문자열내에 존재하는 어떤형태의 숫자라도 변환하고 숫자 다음에 나오는 문자들을 모두 무시한다.
    - parseInt() - 정수변환, parseFloat-정수와 부동소수점 숫자를 변환
불리언 값
- true & false로만 표현
- 블리언 타입 변환
  - 불리언 값은 쉽게 다른 타입으로 변환되거나 다른 타입에서 불리언 값으로 변환 될수 있으며, 많은 경우 그 변환은 자동 수행된다.
  - 불리언 값이 숫자 문맥에서 사용되면 true=1, false=0
  - 문자열 문맥에서 사용되면 true "true", false "false"로 변환
  - Boolean() 함수로 변환
    - var x_as_boolean = Boolean(x);
  - NOT연산자를 두번 사용하는 방법
    - var x_as_boolean = !!x;
함수
- 자바스크립트 프로그램에 정의되어 있거나 자바스크립트 구현내에 정의(자신만의 함수)되어 실행 가능한 코드
- 함수 리터럴
  - 함수 정의 : function square(x){return x*x;}
  - 함수 리터럴 사용 : var square = function(x){return x*x;}
  - 전달인자 목록과 함수몸체를 문자열 형태로 Function생성자에 전달하는 방법 : var squars = new Function("x", "return x*x;");
객체
- 객체 생성
  - var point = new Object();
  - (객체내의 프로퍼티 사용) point.x=2.3; point.y=-1.2;
- 객체 리터럴
  - 객체 초기자라고도 불리며 아래와 같이 표현
  - var point = {x:2.3, y:-1.2};
  - 객체 리터럴의 중첩
    - var rectangle : {upperleft:{x:2, y:2},
      - lowerRight : {x:4, y:4} };
- 객체 변환
  - 블리언으로 변경시 true로 반환
  - 문자열로 변경시 valueOf()호출(객체의 기본데이터 값)->toString()호출(valueOf의 반환된 값을 문자열로 변경하여 출력)
배열
- 데이터값을의 모음
- 배열 생성
  - Array()생성자 함수로 생성
    - 디폴트 생성자로 생성후 배열의 인덱스값으로 데이터를 저장
    - 생성과 동시에 초기화
    - 생성자에 숫자 하나를 넘겨줘 배열의 크기로 생성
- 배열 리터럴
  - 배열 생성과 동시에 초기화
    - var a = [1,2,"javascript",true,{x:1, y:3}];
  - 배열 리터럴 중첩 가능
    - var matrix = [{1,2,3},{4,5,6},{7,8,9} ];
  - 배열 요소내에 임의의 표현식이 올수 있으며 반드시 상수일 필요는 없다.
    - var base =1024;
    - var table = [base, base+1, base+2, base+3];
  - 숨펴사이의 값을 생략하여 정의되지 않은 요소를 배열 리터럴내에 포함시킬수 있다.
    - var arr = [1, , , , ,6]; (배열의 크기는 6)
null : 아무런 데이터도 없는 특수한 값이다. 불리형으로 변환하면 false, 숫자형 0, 문자형"null"로 변환한다.
undefined : 변수는 선언되었지만 값을 할당받지 않았을때 접근할 경우 반환되는 경우 불리형으로 변환하면 false, 숫자형 NaN, 문자형"undifined"로 변환한다.
Date객체
- 날짜와 시간을 표현하고 그값을 조작하는데 사용하는 객체 new Date, Date()생성 가능
기본데이터타입 래퍼 객체
- 문자열 new String()
  - var s = "hello world"; //문자열
  - var s = new String("hello wor;d"); //문자열(래퍼 객체)
- 숫자 객체 Number, Boolean객체가 있음
- String, Numver, Boolean 값들은 Object()함수를 사용하여 대응되는 레퍼 객체로 변환할수 있다.
객체에서 기본타입으로 변환
- 객체에서 기본타입으로 손쉽게 변환이 가능하다.

4장 변수

변수타입
- 변수 타입 제약이 엄격하지 않아 저장되는 자료의 타입이 자동으로 변환되는 특징이 있다.(변수타입은 수시로 변할수 있음)
변수 선언
- 변수 선언시 var 키워드를 사용한다.
  - var i; or var i,j;, or var i=1, j=2; ....
변수 선언의 반복과 생략 그리고 유효범위
- var 구문으로 같은 이름의 변수를 여러번 선언가능
- 전역변수의 유효범위는 전역적 즉 자바스크립트 코드 전체에 걸쳐 정의, 지역변수의 유효범위는 오직 그 함수 몸체안에서만 정의
  - scope = "global"; //전역변수로 선언(var없이도)
  - function checkscope(){
    - scope="local"; //전역변수의 값을 변경
    - document.write(scope); //전역변수 "local"값 출력
    - myscope = "local"; //전역변수 선언
    - document.write(myscope ); //전역변수 "local"값 출력
    - }
  - checkscope(); //locallocal 출력
  - document.write(scope); //전역변수 "local"값 출력
  - document.write(myscope ); //전역변수 "local"값 출력
- 함수내 var문을 선언되지 않은 변수에 값을 할당시 자바스크립트가 암묵적으로 그 변수를 전역변수로 선언
  - var a=0;//전역변수
  - function aa(){
    - b=0 //전역변수가 된다
    - var c=0//지역변수가 된다.
    - }
- 여러 단계로 중첩된 함수 내에서의 변수 유효범위
  - var scope ="global scope";// 전역변수
  - function c1(){
    - var scope ="local scope"; //c1 지역변수 선언
    - function c2(){
      - var scope="c2 scope"; //c2 지역변수 선언
      - document.write(scope); //"c2 scope"출력
    - }
    - c2();// 출력시 undefined
  - }
  - c1();// 출력시 undefined
- 블록 단위의 유효범위는 없다.
  - var scope = "global";
  - function f(){
    - alert(scope);//global이 아닌 undefined출력
    - var scope = "local"; //전역변수(scope)는 이곳에서 초기화
    - alert(scope);//"local"출력
    - }
    - <body onload=f()>
  - var scope="global" <-실행되기전 function f()먼저 실행된다.
- 정의되지 않은 변수 vs할당되지 않은 변수
  - 정의되지 않은 변수 읽을시 런타임 에러가 발생하지 않고 자바스크립트가 암묵적 전역변수로 선언한다.
- 가비지 컬렉션
  - 자바스크립트 프로그램에서 문자열, 배열 또는 객체등을 생성할때마다 인터프리터는 해당 개체를 저장하기 위한 메모리를 동적으로 할당하고 자동으로 해제한다.
- 변수와 프로퍼티
  - 전역객체
    - 자바스크립트 인터프리터는 전역 객체를 생성하면서, 미리 정의된 값들과 함수들을 참조하는 다수의 프로퍼티들을 초기화한다.
    - this키워드를 이용하여 전역변수(최상위 변수등)을 참조 가능
  - 지역변수(호출객체)
    - 함수내에 정의되여 함수가 실행되는 동안 그 함수의 전달인자와 지역변수는 이호출객체(지역변수) 에 저장한다.
  - 자바스크립트 실행 컨텍스트
    - 자바스크립트 코드가 실행되고 있는 컨텍스트를 말하며 자바스크립트 인터프리터가 어떤 함수를 실행할때 마다 그 함수에 대해 새로운 실행 컨텍스트를 생성한다.

5장 표현식과 연산자

표현식
- 자바스크립트 인터프리터가 계산하여 값을 구할수 있는 자바스크립트 구절을 말한다.(리터럴, 변수 이름)
연산자
- 연산자 우선순위
  - w=x+y*z; //곱셈 연산자 '*'는 덧셈 연산자 '+' 보다 우선순위가 높다. 할당 연산자'='는 우선순위가 가장 낮은 우선순위
  - ()를 이용하여 우선순위 변경가능하다
- 연산자 결합 방향
  - x=~-~y; ==> ~(-(~y));
  - w=x=y=z; ==> w=(x=(y=z));
  - q=a?b:c?d:e?f:g; ==> q=a?b:(c?d:(e?f:g));
- 동등 연산자
  - 동등(==)과 일치(===)
    - 두연사자 모두 피연산자의 타입을 가리지 않으며 피연산자들이 같으면 true 다르면 false반환한다
    - 레퍼 타입의 경우 동등연산자는 내용이 같을경우 true반환하지만 일치연산자일 경우 주소와 내용이 일치해야 true를 반환한다.
    - ===연산자 규칙
      - 두값의 타입이 다르면 두값은 일치하지 않는다
      - 두값이 모두 숫자이고 같이 같다면 두값은 일치, 단. 적어도 하나의 값이 NaN일 경우 일치하지 않는다.
      - 두값이 모두 문자열이고 같은 위치에 정확히 같은 문자를 갖고 있다면 두값은 일치한다. 만일 문자열의 길이나 내용이 다를 경우 두값은 일치하니 않는다.
      - 두값이 모두 불리언 값 true인 경우 또는 두값이 모두 불리언 값 false인 경우 두값은 일치한다.
      - 두값이 같은 객체 배열 또는 함수를 참조할 경우 두값은 일치한다. 만일 두값이 서로 별개의 객체(배열, 함수)를 참조할 경우 두 값은 일치하지 않는다.
      - 두값이 모두 null일 경우 또는 구 값이 모두 undefined일 경우 두값은 일치한다.
    - == 연산자 규칙
      - 두 값의 타입이 같은 경우 두 값이 일치하는지 테스트한다 두 값이 일치할 경우 그둘은 동등하다 값이 일치하지 않는 경우 동등하지 않다.
      - 두값의 타입이 다른경우라도 할지라도 동등할 여지가 있디. 동등함을 확인 과정에는 다음 규칙과 타입 변환이 사용
        
        두갑중 하나가 null이고 다른 하나가 undefined라면 두 값은 동등하다
        
        한 값이 숫자이고 다른하나는 문자열이면 문자열을 숫자로 변환한 후 이를 사용해 다시비교한다
        
        두값중 하나가 true면 이를 1로 변환한후 다시비교한다, 두값중 하나가 false면 이를 0으로 변환한 후 다시 비교한다
        
        한 값이 객체이고 다른하나는 숫자 또는 문자열이면 객체를 기본타입의 값으로 변환한 후 다시 비교한다. 객체를 기본값으로 변환하는 데에는 해당 객체의 toString()나 valueOf()사용
        
        위에 열거하지 않은 기타값들의 조합은 동등하지 않는다
- 관계 연산자
  - 비교 연산자
    - 두 피연산자가 모두 숫자이거나 또는 둘다 숫자이거나 또는 둘 다 숫자로 변환 할 수 있으면 이둘은 숫자로 비교
    - 두 피연산자가 모두 문자열이거나 또는 둘다 문자열로 변환할수 있으면 이 둘은 문자열로 비교
    - 피연산자는 문자열(변환 가능)이고 다른 하나는 숫자(변환 가능하면)라면 비교 연산자는 먼저 문자열을 숫자로 변환하여 이들을 숫자로 비교, 만일 여기서 문자열이 숫자가 아니라면 이문자열은 NaN으로 변환후 결과는 false
    - 어떤 객체를 숫자나 문자열로 변환할수 있으면 자바스크립트는 숫자변환을 수행
    - Date객체는 숫자로서 비교가능
    - 비교 연산자의 피연산자가 숫자나 문자열로 변환되지 못할 경우엔 언제나 false를 반환
    - 둘중 하나의 피연산자가 NaN이거나 NaN 으로 반환하면 비교연산자는 언제나 false를 반환
- in연산자
  - 좌변의 피연사자로 문자열(변환 가능)을 받는다 우변의 피연산자로는 객체나 배열을 받는다.
  - ex var point{x=1, y=1};
  - var has_x_coord = 'x' in point //true
  - var has_y_coord = 'y' in point //true
  - var has_z_coord = 'z' in point //false
- instanceof연산자
  - 좌변의 피연산자로 객체를 우변의 피연산자로 객체 클레스의 이름을 받는다
  - 좌변객체가 우변 클래스의 인스턴스일 경우 연산 결과는 true 그렇지 않을 경우 fals
  - var d = new Date();
  - d instanceof Date; // true
  - d instanceof Object; //true
  - d instanceof Number; //false
- 문자열 연산자
  - <.<=,>,>= 연산자는 두 문자열을 비교하여 순서를 판단한다. (Unicode 문자 인코딩 기준)
  - + 연산자는 숫자 피연산자보다 문자열 피연산자에 우선권을 주어 문자열로 변환하고 결과로 얻어지는 두문자열을 이어 붙인다.
- 논리연산자
  - 논리 AND(&&)
    - &&연산자가 불리언 피연산자에 대해 쓰일 경우 이연산자는 두 값에 대한 불리언 AND를 수행한다. 적어도 하나 이상의 피연산자가 false이면 결과를 false로 반환한다.
  - 논리 OR(||)
    - ||연산자가 불리언 피연산자에 대해 쓰일 경우 이연산자는 두값에 대한 불리언 OR를 수행한다. 두 피연산자가 중 하나가 true이거나 둘다 true일 경우 true를 반환한다.
  - 논리 NOT(!)
    - !연산자는 단항 연산자로 피연산자의 불리언 값을 반전하여 반환한다.
- 비트 연산자
  - 비트 단위 연산자는 정수 값 피연산자를 요구, 부동소수점표현법이 아닌 32비트 정수 표현법이다.
  - &,|,^,~ 는 피연산자의 개별 비트에 대해 불리언 대수를 수행
  - <<,>>,>>> 는 왼쪽, 오른쪽 으로 비트를 이동할때 사용
    - 비트단위 AND(&)
      - &연산자는 두정수 피연산자들의 개별 비트 끼리 불리언 AND연산을 수행된다. 동일 위치의 비트가 두 피연산자에 모두 설정되어 있어야만 결과값의 해당 위치 비트도 설정
    - 비트단위 OR(|)
      - |연산자는 두정수 피연산자들의 개별 비트끼리 불리언 OR 연산을 수행한다. 적어도 하나 이상의 피연산자에서 어떤위치의 비트가 설정되지 않으면 결과값의 해당 위치 비트도 설정
    - 비트단위 XOR(^)
      - ^연산자는 두정수 피연산자들의 개별비트끼리 배타적 OR(XOR)연산을 수행한다
      - 배타적 OR = 두연산자중 하나가 true 이지만 둘다 true는 아니다.
      - 두 피연산자중 하나에서만 어떤 비트가 설정되어 있으면 결과값의해당 위치 비트도 설정된다
    - 비트단위 NOT(~)
      - ~연산자는 당항 연산자로 단일 정수 피연산자의 앞에 위치한다.
      - 피연산자의 모든 비트를 반전시켜 자바스크립트에서 부호 있는 정수를 표현하는 방법으로 인하여 ~연산자를 적용하는 것은 그값의 부호를 바꾸고 1을 뻬는 결과를 얻게된다.
- 기타 연산자들
  - 조건부 연산자 (?:)
    - 조건부 연산자는 3항연산자 3개의 항을 비교할때 사용된다
  - typeof연산자
    - 단항 연산자로 피 연산자는 아무 타입이라도 무방하다.
    - 숫자 문자열 불리언값일 경우 typeof는 number, string, boolean을 반환한다.
    - 객체, 배열, null일 경우 object로 반환한다.
    - function, 정의되지 않은 피연산자는 undefined를 반환한다.
  - new 객체생성 연산자
    - new 연산자는 새로운 객체를 생성하고 초기화하기 위한 생성자 호출 하는 연산자
  - delete 연산자
    - 단항연산자로 피연산자로 지정된 객체 프로퍼티, 배열 원소, 변수를 삭제 할때사용(성공 true, 실패 false반환)
  - void연산자
    - 단일 피연산자앞에 쓰이는 단항 연산자로 피연산자의 타입은 아무 타입이라도 관계없다.
  - , 연산자
    - 쉽표연산자는 왼쪽의 전달인자를 평가하고 오른쪽의 전달인자를 평가하고 오른쪽전달인자의 값을 반환
  - 배열, 객체 접근 연산자
    - 배열([]), 객체({})시용하고 원소나 프로퍼티 접근시 마침포(.)로 이용하여 접근한다.
  - () 함수호출 연산자
    - 자바스크립트에서 함수 호출시 사용

[6장 문장]

if
- if문은 조건부로 문장을 실행 할수 있는 기능을 제공하는 기본적인 제어문
  - if(표현식){문장} //표현식이 true일 경우 문장 실행
  - if(username==null)문장 //username이 null또는 undefined일때
  - if(!username) 문장//null, undefined, 0, "",NaN이면 false로 변환되므로 실행
- else
  - if조건에 해당되지 않을때(false)실행
else if
- if문에 여러 조건을 부여할때 두번째 부터 else if 준다.
switch
- 모든 분기가 단하나의 변수 값에 의해 결정될 때
- case 는 해당 레이블시 아래 코드를 실행한다.
- case에 대해 해당 레이블을 찾지 못하면 default:레이블을 실행
while
- 기본적인 반복문으로 무언가 반복적인 행동을 수행할때 사용
- while표현식이 false면 자바스크립트는 다음의 프로그램 문장으로 이동
- 표현식이 true이면 while루프 몸체를 형성하는 문장을 실행된후 표현식이 다시 평가된다.
do/while
- 반복문으로 표현식이 테스트되는 곳이 루프의 처음이 아니라 마지막에 한다. 따라서 한번은 루프몸체가 실행된다.
- do
  - 문장
- while(표현식);
for
- for(초기화:테스트:증가)문장
- 처음 변수는 초기화를 거치며 루프 매회 반복에 앞서 평가되는 표현식의 일부로서 테스트 된다
- 마지막으로 루프 몸체의 끝에서, 즉 표현식이 다시 평가되기 직전에 증가식을 갱신한다.
for/in
- for(변수 in 객체) 문장
- 변수는 변수/배열객체/객체 프로퍼티를 선언하는 var문이어야한다
- 객체는 객체이름 또는 객체로 평가될 수 있는 표현식이어야 한다.
- for(var prop in my_object){ //변수는 readable인경우
  - document.write("name :"+prop+" ; value : "+my_object[prop],"<br>");}
break
- break문을 감싸고 있던 가장 안쪽의 루프나 switch문에서 즉시 빠져나온다.
- 레이블 이름과 같이 사용시(break 레이블사용;) 해당 레이블 이름이 붙은 문장의 끝으로 건너뛰고 종료된다.
continu
- 새로운 반복을 시작
- 항상 while, do/while, for, for/in 루프의 몸체 내부에 사용
var
- 명시적으로 하나 또는 그이상의 변수를 선언하는 데 쓰인다.
- var문에 의해 생성되는 프로퍼티는 delete연산자로 삭제 불가능
function
- 자바스크립트 함수를 정의 하는데 사용
- function 함수명([전달인자1[전달인자2[....,[전달인자n]]]){ 문장}
return
- 함수 호출 표현식의 값, 즉 함수에서 반환되는 값을 지정하는데 쓰인다.
throw
- 예외적인 상황이나 에러가 발생했을을 가리키는 신호
try/catch/finally
- 자바스크립트의 예외처리 기법
- try{
- - //정상이라면 이코드는 아무런 문제없이 블록의 시작부터 끝까지 수행한다
  - //하지만 경우에 따라 예외가 발생할 수 있다
  - //예외는 throw문에 의해 직접적으로 발생할수 있고,
  - //또는 예외를 발생시키는 메서드의 호출에 의해 발생할수 있다
  - }catch(e){
  - //이블록내부의 문장은 오직 try블로에서 예외가 발생할 경우에만 실행된다.
  - //이 문장들에선 지역 변수 e를 사용하여 Error 객체 또는 앞에서 던진 다른 값을 참조할 수 있다.
  - //이블록에서는 어떻게든 그 예외를 처리할수 있고 무시할수도 있다
  - //아니면 throw를 사용해서 예외를 다시 발생 시킬수 있다.
  - }finally{
  - //이 블록에서는 try블록에서 일어난 일에 관계없이 무조건 실행될 코드가 위치한다.
  - //이 코드는 try블록이 어떻게든 종료되면 실행된다.
  - //try블록이 종료되는 상황은 다음과 같다
  - //1)정상적으로 블록의 끝에 도달하였을때
  - //2)break, continu또는 return 문에 의해서 예외가 발생했지만 앞의 catch절에서 처리했을때
  - //3)예외가 발생했고 그것을 잡히지 않은 채 빠져나갈때
  - }
with
- 해당 변수를 유효범위 지정하는 것으로 ~유효범위 내에 ~변수를
- with문을 사용해서 유효범위 체인에 위의 폼을 추가하는것
- with(frames[1].document.forms[0]){
  - //여기선 폼 엘리먼트에 직접 접근이 가능하다
  - name.value="";
  - address.value="";
  - email.value="";
  - }

[7장 객체와 배열]

객체
- 객체 생성하기
  - 겍체는 이름과 값으로 구성된 프로퍼티들의 집합이다
  - 중괄호({})안에 이름과 갓을 한 쌍으로 하는 프로퍼티들을 콤마로 분히하여 연결한 리스트
  - 객체 리터럴은 자바스크립트 표현식으로서 평가될때 마다 새로운 객체를 생성하고 초기화 한다
  - var empty={};
  - var point={x:0, y:0}
  - var circle{x:point.x, y:point.y+1, radius:2}
  - var homer ={
    - "name" : "Homer Simpson",
    - "age" : 34,
    - "married" : true,
    - "occupation" : "plant operator",
    - "email" : homer@example.com
  - }
- 객체 프로퍼티
  - 객체 프로퍼티 값에 접근하기 위해서는 마침표 연산자를 사용하며, 접근하려는 프로퍼티를 소유한 객체가 이 연산자의 촤측에 위치
  - var book={};
  - book.title = "Java Script : The Definitive Guide";
- 프로퍼티 열거하기
  - for/in 루프를 사용하여 객체 프로퍼티들을 열거하거나 객체의 각 프로퍼티에 대한 작업을 반복적으로 수행
  - function DisplayPropertyNames(obj){
    - var names="";
    - for(var name in obj)names += name+'\n';
    - alert(names);
  - }
- 프로퍼티 존재 확인하기
  - in연산자를 사용하면 프로퍼티의 존재 여부를 확인할수 있다.
  - if("x" in o)o.x=1;//객체 프로퍼티에 x가 있으면 x에 1을 저장한다
  - if(0.x !==undefined)o.x=1;//x 프로퍼티가 존재하고 값이 undefined가 아니라면 1을 저장한다
- 프로퍼티 삭제하기
  - 객체의 프로퍼티를 삭제하기 위해서는 delete연산자를 사용
  - delete book.chapter2;//book객체에 chapter2의 내용을 삭제한다.
- 연관 배열로서의 객체
  - object.property <-객체 표기
  - object["property"] <-연관배열 표기
  - 연관배열 또는 자바스크립트의 객체의 프로퍼티 이름을 열거해 낼수 있는 유일한 방법이 바로 for/in루프이다(읽을수 있는 프로퍼티만 나옴)
- 공통적으로 나타나는 객체 프로퍼티와 메서드
- constuctor 프로퍼티
  - 자바스크립트에서 모든 객체는 객체를 초기화하는데 사용되는 생성자 함수인 constructor프로퍼티를 지니고 있다.
  - ex) d.constructor 프로퍼티는 Date를 가리킨다
  - var d = new Date();
  - d.constructor == Date;
- toString매서드
  - 별도의 인자없이 호출되며, 메서드를 호출한 객체의 값을 어떠한 방식으로든 표현하는 문자열을 만들어 결과로 반환한다.
- toLocaleString()매서드
  - 객체의 지역화된 문자열 표현을 제공한다.
- valueOf()매서드
  - 자바스크립트가 객체를 문자열이 아니라 숫자 같은 다른 기본 타입으로 변환하려 할 때 호출된다.
  - 객체가 기본타입 값을 필요로 하는 문맥 안에서 사용될 때 자바스크립트는 valueOf()매서드를 자동으로 호출한다.
hasOwnProperty() 매서드
- 프로퍼티의 이름을 담는 한개의 문자열 전달인자를 받아서 객체가 이 프로퍼티를 소유하고 있는지 검사
- var o={}'//초기화(정의)되지 않은 o객체 생성
- o.hasOwnProperty("undef"); //false:프로퍼티가 정의되지 않음
- o.hasOwnProperty("toString"); //false : toString은 상속받은 프로퍼티이다.
- Math.hasOwnProperty("cos"); //true : Math객체에 cos프로퍼티가 있다.

propertyIsEnumerable()매서드

hasOwnProperty()매서드와 마찬가지로 프로퍼티의 이름을 담은 문자열 전달인자를 하나 받아서, 이 이름의 프로퍼티를 객체가 상속받지 않고 직접 지역적으로 정의했는지 검사한다.
var o={x:0};
o.propertyIsEnumerable("x"); //true : 프로퍼티가 존재하고 열거할수 있다
o.propertyIsEnumerable("y"); //false : 프로퍼티가 존재하지 않는다
o.propertyIsEnumerable("valueOf"); //false : valueOf는 상속받은 프로퍼티이다.

isPropertyOf()매서드

객체가 전달인자로 주어진 객체의 프로토타입객체라면 true를 반환하고, 그렇지 않으면 false를 반환한다.
var o ={};
Object.prototype.isPropertyOf(o); //true : o.constructor == object
Object.isPropertyOf(o); //false
o.isPropertyOf(Object.prototype); //false
Function.prototype.isPropertyOf(Object); //true : Object.constructor =Function

배열

순서있는 값들의 집합이다
배열 안의 각 값을 원소라 부르며 각 원소는 배열 안에서 그 위치를 가리키는 번호를 할당 받는데 이번호를 인덱스라 한다.
배열은 추가기능을 아주 조금 지닌 객체에 지나지 않는다.
var b = [[1,{x:1,y:2}], [2,{x:3, y:4}]];//배열 안에 배열 그리고 객체
전달인자 없이 호출하는 방법 (var a = new Array())
명시적으로 배열의 처음 n개의 원소를 정의하며 호출하는 방법 (var a = new Array(5,4,3,2,1,"testing, testing"); )
배열의 길이를 지정하는 숫자 값을 전달인자로 하여 호출하는 방법( var a = new Array(10) )
원소의 값은 undefined이며 length 프로퍼티의 값은 생성자의 전달인자에 명시된 수치이다.
배열원소 읽고 쓰기
- 배열의 각 원소에 접근할 때에는 []연산자를 사용한다.
  - varue = a[0];
  - a[1]=3.14;
  - i=2;
  - a[i]=3;
  - a[i+1]="hello";
  - a[a[i]]=a[0];...

배열에 새로운 원소 추가하기

배열은 임의 개수의 원소를 가질 수 있으며 원소의 개수는 언제든 변경할 수 있다.
a[10000]=10; //새로운 원소 추가!
10000번 인덱스를 위해서만 메모리를 항당하며 그 사이에 있는 9999개의 인덱스에 대해서는 메모리를 할당하지 않는다.
배열 원소는 객체에도 추가 될수 있다
- var c = new Circle(1,2,3);//객체생성
- c[0]="this is an array element of an object!";//c[0]은 객체의 배열 원소다.

배열 원소 삭제하기

delete 연산자를 사용하면 배열 원소의 값을 undefined 값으로 설정할수있다.

배열의 길이

length 프로퍼티를 사용, length 프로퍼티는 배열 안에서 가장 큰 인덱스 값보다 언제나 하나 더 큰 값

배열 순회하기

for문을 이용한 배열 순회
ex)var fruits = ["mango","banana",cherry", "pear"];
for(var i =0;i<fruits.length;i++){alert(fruits[i]);}
Array()생성자로 생성된 배열의 원소를 초기화하는데 사용
var lookup_table = new Array(1024);
for(var i=0;i<lookup_table.length;i++){ lookup_table[i]=i*512;}

배열 크기 조절하기

length프로퍼티를 현재 값보다 작게 설정하면 배열은 그새로운 길이로 축소한다
새롭게 설정된 배열의 길이를 벗어나는 위치의 원소들은 버려지고 그원소들의 값은 전부 잃어버림

배열 매서드

join()
- 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다
- var a=[1,2,3];
- var s = a.join(); //s=="1,2,3"
- 구분자 문자열을 직접정의하여 결과를 핸들링할수 있다
- s=a.join(", "); //s=="1, 2, 3"
reverse()
- 배열 안의 원소 순서를 반대로 정렬하여 반환
- var a = new Array(1,2,3);
- a.reverse(); //반대로 정렬
- var s = a.join(); //s=="3,2,1"
sort()
- 배열 안의 원소들을 정렬하여 반환
- var a = new Array("banana", "cherry", "apple");
- a.sort(); //정렬
- var s = a.join(); //s=="apple","banana","cherry";
concat()
- 본래 배열의 모든 원소에 concat()매서드의 전달인자를 전부 이어붙인 배열을 새롭게 생성하여 반환
- var a=[1,2,3];
- a.concat(4,5); //[1,2,3,4,5]
- a.concat([4,5]); //[1,2,3,4,5]
- a.concat([4,5],[6,7]); //[1,2,3,4,5,6,7]
- a.concat(4,[5,[6,7]]); //[1,2,3,4,5,[6,7]]
slice()
- 베열의 일부분 혹은 부분 배열을 반환
- var a = [1,2,3,4,5];
- a.slice(0,3); //[1,2,3]
- a.slice(3); //[4,5]
- a.slice(1,-1); //[2,3,4]
- a.slice(-3,-2); //[3]
splice()
- 배열에 원소를 삽입하거나 원소를 제거하려 할때에 범용적으로 사용할 수 있는 메서드
- var a = [1,2,3,4,5,6,7,8];
- a.splice(4); //[5,6,7,8]을 반환 a=[1,2,3,4]
- a.splice(1,2); //[2,3]을 반환 a=[1,4]
- a.splice(1,1); //[4]을 반환 a=[1]
push()와 pop()
- 배열을 마치 스택인 것처럼 조작이 가능
- push()매서드는 하나 혹은 그이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를 반환
- pop()매서드는 push()와 반대로 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨후 배열에서 제거한 원소를 반환
unshift()와 shift()
- 배열의 끝이아니라 배열의 맨 앞에서 원소를 삽입하고 제거한다.
toString()과 toLocaleString()
- toString()은 우선 배열의 모든 원소를 문자열로 변환
- toLocaleString() toString()의 지역화된 버전으로 우선 배열의 각 원소들을 그 원소의 toLocaleString()매서드를 사용하여 변환하고
  
  지역에 특화되 있거나 구현에 정의된 구분자 문자열을 사용하여 각 결과 문자열을 연결한다
추가적인 배열 함수
- 배열상에서 주어진 값을 찾을수 있는 indexOf()와 lastIndexOf()메서드 추가
- forEach()는 배열의 모든 원소에 대하여 지정된 함수를 호출
- map() 배열의 각원소에 지정된 함수를 호출하여 얻은 결과를 원소로 하는 배열을 반환
- filter() 지정된 술어 함수(불리언 값을 반환하는 함수)가 true를 반환하는 원소들로 구성된 배열을 반환
배열과 유사한 객체
- length
  - 이프로퍼티 값은 배열에 새로운 원소가 추가될 때마다 자동으로 갱신된다
  - 이프로퍼티 값은 임의로 설정함으로써 배열의 크기를 확장하거나 축소할수 있다
- 배열은 Array클래스의 인스턴스이며 배열을 통해 Array클래스의 다양한 메서드를 호출할수 있다.

[8장 함수]

함수 정의와 호출
- 함수 이름
- 괄호()안에 0개 혹은 임의 개수의 매개변수 이름으로 쉼표로분리한목록
- 중괄호[]안에 함수의 몸체를 구성하는 자바스크립트 문장들
- return문에 연결된 표현식이 없으면 undefined값을 반환
- 함수가 기대하는 개수보다 적은 수의 전달인자를 전달하면 빠뜨린 매개변수에는 undefined값이 할당
중첩된함수
- function hypotenuse(a,b){
  - function square(e){return x*x;}//하나의 맴버 중첩된 함수
  - return Math.sqrt(sqare(a)+square(b));
  - }
함수 리터럴
- function f(x)(return x*x;)//function문
- var f = function(x){return x*x;}; //함수 리터럴
함수 이름 붙이기
- 함수의 이름은 코드 가독석과 유지보수 측면에 도움이 되도록하고 동사로 시작한다.
- 둘이상의 단어를 포함할땐 밑줄 문자로 연결하거나 첫번째 단어 이후의 모든단어를 대문자로 시작
함수 전달인자
- 생략 가능한 전달인자(Optional Arguments)
  - 함수 정의 당시에 선언된 전달인자의 개수보다 적은 수의 전달인자와 함께 호출되면 남은 전달인자 값들은 undefined가 된다.
  - 생략시 undefined가 아닌 기본값을 할당해줄 보안코드
    - function copyPropertyNamesToArray(o, /*optional*/ a){
      - if(!a)a=[]; //a가 정의 되지 않거나 null이면 빈배열 사용
      - for(var property in o)a.push(property);
      - return a;
    - }
  - var a = copyPropertyNamesToArray(o); //o의프로퍼티에 새로운 배열을 넣는다
  - copyPropertyNamesToArray(p,o) //p의 프로퍼티 이름들을 위해서 받은 배열에 넣는다.
- 가변길이 전달인자 목록 : 전달인자 객체
  - arguments 프로퍼티
    - Arguments 객체를 참조하는 특별한 프로퍼티
    - 배열과 유사한 객체이다.
    - 함수에 전달된 전달인자의 값을 전달인자 이름이 아니라 숫자를 사용햐 접근하기 위한 방법을 제공
    - function f(x,y,z){
      - //먼저 올바른 개수의 전달인자를 받았는지 검사
      - if(argument.length!=3){
        
        throw new Erorr("에러발생");
        
        }
      - //if조건 false시 실행
      - .....
      - }
- collee프로퍼티
  - 배열의 원소, 현재 실행되고 있는 함수를 가리키는 collee포로퍼티를 정의함
  - 재귀적으로 호출할때 주로 사용
  - function(x){
    - if(x<=1) return 1;
    - return x * arguments.collee(x-1);//호출시 자신에게 전달받은 x값, x-1값(재귀호출)을 곱한다.
  - }
- 객체 프로퍼티를 전달인자로 사용하기
  - 이름과 값의 쌍으로 전달하여 주는 방법을 제공
    - 하나의 객체를 전달인자로 받는 함수를 정의하고 함수 사용자로 하여금 함수에서 필요로 하는 이름과 값의 쌍들을 객체 리터럴로 정의
    - function a(/*array*/ from, /*index*/ from_start){.....}
- 전달인자 데이터 타입
  - 함수 전달인자들에 자신을 잘 묘사하는 이름을 붙이거나, 전달인자의 데이터 타입을 주석으로 적어 코드 문서화
  - 전달인자 개수와 타입을 유연하게 대처하는 코드 예제
    - function fiexisun(a){
      - var total = 0;
      - for(var i=0;i<arguments.length;i++){
        
        var element = arguments[i];
        
        if(!element)continue; //모든 null, undefined전달인자 무시
        
        //전달인자 데이터 타입 변환 작업
        
        var n;
        
        switch(typeof element){
        
        case "number":
        
        n=element;
        
        break;
        
        case "object":
        
        if(element instanceof Array){//배열 처리
        
        n=fiexisum.apply(this,element);
        
        }else{
        
        n=element.valueOf();
        
        }
        
        break;
        
        case "string":
        
        n=parseFloat(element);
        
        break;
        
        case "boolean":
        
        n=NaN;
        
        break;
        
        }
        
        if(typeof n=="number"&&!isNaN(n))total+=n;
        
        else throw new Erorr("숫자 변환 실패");
      - }
      - return total;
    - }
- 데이터로서 함수 (함수 리터럴) => var f = function(x){return x*x;}
- 메서드로서 함수 => o.m =f;(f=함수가정) > o.m()(호출)
- 생성자 함수 => 객체의 프로퍼티들을 초기화 하는 함수로 new 연산자와 같이 사용가능(new Function)
- 함수 프로퍼티와 매서드
  - length프로퍼티
    - 함수의 몸체안 arguments배열의 length프로퍼티는 함수가 전달받은 전달인자의 개수이다.
    - length 예제
    - function check(args){
      - var actual = args.length //실제 전달받은 전달인자 개수
      - var expected = args.collee.length;//함수가 기대하는 전달인자 갯수
      - if(actual!=expected)throw new Erorr("에러");
    - }
    - function f(x,y,z){
      - check(arguments); //f함수 인자들을
      - return x+y+z;
    - }
  - prototype 프로퍼티
    - 함수가 new 연산자를 통해 생성자로 사용될 때 새 객체를 정의하는 과정에서 중요한 역활을 수행
    - 인스턴스 객체들이 하나의 매서드를 공유할때 사용할수 있다.
  - apply(), call()
    - call(), apply() 첫번째 전달인자는 함수가 소속되어 호출될 객체를 지정하며 이 전달인자는 함수 몸체안에서 this 키워드 값이 된다.
    - apply()매서드는 두번째인자부터 전달인자가 배열로 지정하며 call은 함수가 호출될때 함수의 전달인자로 건네진다.
- 함수 유효범위와 클로저
  - 어휘적 유효범위
    - 자바스크립트의 함수들은 동적이라기 보단 어휘적으로 유효범위가 정해짐
      - 함수가 실행되는 유효범위가 아니라 함수가 정의되어있는 유효범위 안에서 실행됨
  - 호출 객체
    - 자바스크립트 인터프리터가 함수를 호출할 때엔 먼저 유효범위를 함수가 정의될 당시의 효력을 지니는 유효범위 체인으로 설정
    - 그 이후 호출객체로 알려진 새로운 객체를 생성하여 유효범위 맨앞에 추가
  - 네임 스페이스로서의 호출객체
    - 네임스페이스로 작동할 수 있는 호출객체를 생성하여 그 안에 원하는 변수를 정의하고 프로퍼티를 생성하기 위한 용도로 함수를 정의
    - function init(){
    - /*코드는 여기에 넣는다
    - 선언된 모든 변수는 전역 네임스페이스를 어지럽히는 대신 호출 객체의 프로퍼티가 된다
    - */
    - }
    - init(); .//호출시 함수 내에 변수와 코드를 실행한다.
  - 클로저로서의 중첩된함수
    - 어휘적 유효범위 내에서 호출하는 경우
    - var x="global";
    - function f(){
      - var x="local";
      - function g(){alert(x);}
      - g();
    - }
    - f(); //local 호출
    - 클로저 : 중첩된 함수를 정읳는 함수가 종료되는 시점에서 지역 유효범위의 존재또한 종료될거라고 예상되지만 실제로 종료되지 않고
      
      메모리상 할당을 받는다. 그로 인해 몇몇 브라우저 내에서 클로저로 인해 메모리 누수현상이 발생한다(인터넷 익스플로러)
  - 메모리 누수현상
    - IE상 클라이언트 측 프로그래밍에서 클로저가 사용될 때에는 순환 형태에 참조시 클로저가 존재하는한 메모리에서 사라지지 않아 메모리상
      
      사용되지 않는 메모리를 남겨두는 메모리 누수현상이 발생한다.
- Function 생성자
  - ex) var f = new Function("x","y","return x+y;");

[9장클래스 생성자 프로토타입]

생성자
- 새 객체 하나를 생성한 후 new 연산자 뒤에있는 함수를 호출하고 this키워드가 새로 생성된 객체를 가르키게 된다.
- ex)
  - function Rect(x,h){
    - this.width=x;
    - this.height=h;
  - }
  - var r1 = new Rect(2,4); //r1={width:2, height:4};
- 생성자 함수에는 일반적으로 반환값이 없음. 다시말해 생성자 함수는 this키워드가 가리키는 객체를 초기화 시킬뿐 아무런 값도 반환하지 않는다.
프로토타입과 상속
- 자바스크립트의 모든객체는 프로토타입이라고 불리는 또 다른 객체를 내부적으로 참조가 가능 그리고 객체는 프로토타입의 프로퍼티들을 자신의 프로퍼티로 가져온다
  
  =>자바스크립트의 객체는 자신의 프로토타입에 있는 프로퍼티들을 상속받는다
  - ex)
  - function Rectangle (w,h){
    - this.width=w;
    - this.height=h;
    - this.area = function(){return this.width * this.height;}
  - }
  - var r = new Rectangle(8.5,11);
  - var a = r.area();
- 빈객체가 생성되면 new 연산자는 해당 객체의 프로토타입을 설정한다.
  
  생성된 객체는 자신을 만들어낸 생성자의 prototype 프로퍼티 값을 자신의 프로토타입으로 설정한다
- 내장형 타입의 확장
  - 내장형 클레스에도 프로토 타입이 있으며 사용자가 여기에 값을 할당할 수 있다.
자바스크립트의 클래스 시물레이션
- 인스턴스 프로퍼티
  - 모든객체에는 자신만의 인스턴스 프로퍼티 사본이 있다.(한 클레스에 속하는 객체가 열개있다면 인스턴스 프로퍼티 사본이 열개 만들어진다.)
- 인스턴스 메서드
  - 데이터 값이 아니라 메서드라는 점을 제외하면 인스턴스 프로퍼티와 비슷하다
  - ex) Rectangle 클래스의 area() 메소드는 하나의 인스턴스 메서드이다.
    - a=r.area(); //Rectangle객체의 r이 호출;
    - 호출한 객체나 인스턴스를 참조하기 위해서는 this키워드 사용
- 클래스 프로퍼티
  - 클래스의 각 인스턴스가 아닌 클래스 자체와 연관되어 있는 프로퍼티로 한개만 존재한다.
  - 클래스 프로퍼티 생성방법
  - Rectangle.UNIT=new Rectangle(1,1);
- 클래스 매서드
  - 클래스 자체와 연관이 있는 매서드
  - Circle클래스의 예
  - function Circle(radius){
    - this.r=radius;//인스턴스 프로퍼티 (r) 초기화
  - }
  - Cricle.PI=3.14;//클래스 프로퍼티
  - Circle.property.area = function(){ return Circle.PI * this.r*this.r; }//원의 넓이를 계산하는 인스턴스 매서드
  - Circle.max = function(a,b){//두객체중 큰 것을 반환하는 매서드
    - if(a.r>b.r) return a;
    - else return b;
  - }
- private 맴버
  - 데이터 캡슐화 기술
  - 자바스크립트에서는 클로저를 사용하여 이를 흉내 낼수 있지만 이를 위해서는 인스턴스 마다 접근 매서드가 저장되어 있어야한다.
  - function ImmutableRectangle(w,h){
    - //이생성자는 초기화 시킬때 width, height프로퍼티들을 저장하지 않음
    - //객체의 접근 메서드를 정의
    - //이메서드는 클로저이며 width와 height의 값은 메서드 유효범위 체인 안에 있다.
    - this.getWidth=function(){return w; }
    - this.getHeight=function(){return h; }
  - }
  - ImmutableRectangle.prototype.area=function{
    - return this.getWidth()*this.getHeight();
  - }
공통적인 객체 메서드
- toString매서드
  - 객체를 문자열 형태로 반환할 수 있게 하는 매서드
- valueOf매서드
  - 자바스크립트가 객체를 Number같은 문자열외의 기본타입으로 변환하려 할때 호출 되는 매서드
- 비교 매서드
  - 동등연산자는 값이 아닌 참조를 통해 객체를 비교한다.(두 참조가 같은 객체를 가리키는지 검사)
  - compareTo() : 한개 전달인자를 받아들이고 매서드를 호출한 객체와 전달인자와 비교한다
슈퍼클레스와 서브 클레스
- 모든 클래스는 자신의 프로퍼티와 메서드를 상속받는 슈퍼클래스를 가짐
- 어떤클래스라도 확장하거나 서브 클래스화 되어 결과로 만들어지는 서브 클래스가 자신의 행동을 그대로 상속받을수 있다.
- 생성자 체이닝
  - 생성자 함수는 상위 클래스의 생성자 함수를 명시적으로 호출하는 기법(하위 클래스 생성시 사용)
  - ex)//상위 클래스 생성자에 대한 참조를 저장
  - PositionedRectangle.prototype.superclass=Rectangle;
  - //정의한 프로퍼티를 사용한 생성자 체이닝
  - function PositionedRectangle(x,y,w,h){
    - this.superclass(w,h);
    - this.x=x;
    - this.y=y;
  - }
- 재정의된 매서드 호출하기
  - 하위 클래스가 상위 클래스에 있는 메서드와똑같은 이름의 매서드를 정의하면 하위 클래스는 이 매서드를 재정의한다.
  - Rectangle.prototype.toString=function(){
    - return "["+this.width+","+ghis.height+"]";
  - }
  - PositionedRectangle.prototype.toString=function(){
    - return "("+this.x+","+this.y+")"+//PositionedRectangle 필드들
    - Ractangle.prototype.toString.apply(this); //상위 클래스 체이닝
  - }
- 상속없이 확장하기
  - ex)
  - function borrowMethods(brorowFrom, addTo){
    - var from = borrowFrom.prototype; //메서드를 빌려올 프로토 타입객체
    - var to = addTo.prototype; //확장할 프로토타입객체
    - for(m in from){//프로토타입의 모든 프로퍼티에 대해 반복
      - if(typeof from[m] !="function") continue; //함수가 아닌것을 무시
      - to[m]=from[m];
    - }
  - }
  - 믹스인클래스(믹스인) : 빌려주는 작업을 수행할 목적으로 만들어진 클래스
  - ex)// 클래스 자체만 유용하지 않지만 toString()를 빌려줄 용도로 사용하는 믹스인클래스
  - function GenericToString(){}
  - GenericToString.prototype.toString=function(){
    - var props=[];
    - for(var name in this){
      - if(!this.hasOwnProperty(name))continue; //this(호출한 객체)객체 name프로퍼티가 없으면 무시하고 다음반복을 진향한다..
      - var value =this[name];
      - var s = name+":"
      - switch(typeof value){
        
        case 'function':
        
        s+="function";
        
        break;
        
        case 'object':
        
        if(calue instanceof array)s+="array"
        
        else s+=value.toString();
        
        break;
        
        defualt:
        
        s+=String(value);
        
        break;
      - }
      - props.push(s);
    - }
    - return "{"+props.join(", ")+"}";
  - }
  - //동등성을 비교하는 equals()정의
  - function GenericEquals()
  - GenericEquals.prototype.equals = function(that){
    - if(this==that)return true;
    - var propsInThat=0;
    - for(var name in that){
      - propsInthat++;
      - if(this[name]!=that[name])return false;
    - }
    - //this객체(호출한 객체)는 추가적인 프로퍼티 없는지 체크
    - var propsInThis=0;
    - for(name in this)propsInThis++;
    - //that, this 프로퍼티 수 비교
    - if(propsInThat !=propsInThat) return false;
    - return true;
  - }
- 객체타입 판단하기
  - instanceof와 constructor, typeof
    - 비교하는 방법
      - typeof == '타입(object)' //같으면 true 다르면 false
      - f instanceof 클래스(Object...) //같으면 true 다르면 false
      - f.constructor== 클래스(Object...) //같으면 true 다르면 false
  - 오리타이핑
    - 어떤 클래스가 정의된 모든 메서드를 구현하면 그것은 그클래스의 인스턴스이다.
    - 주로 다른클레스에서 메서드를 빌려오는 클래스를 연결할때 사용한다
- 유틸리티 메서드인 defineClass()
  - defineClass();
    - name : 정의되는 클래스 이름. 만약 이값이 기술되어 있다면 프로토타입 객체에 있는 classname에 저장됨
    - extend : 확장될 클래스의 생성자. 만약 이것이 빠져 있다면 Object()생성자가 사용된다. 이값은 프로토타입 객체의 superclass프로퍼티에 저장됨
    - construct : 클래스의 생성자 함수. 이것이 빠져 있으면 새로운 빈 함수가 사용된다. 이 값은 나중에 이함수의 반환값이 되며 프로토타입 객체의 constructor프로퍼티에도 저장됨
    - methods : 클래스를 위한 인스턴스 메서드들(그리고 공유된 다른 프로퍼티들)을 지정하는 객체 이객체의 프로퍼티들은 클래스의 프로토 타입객체로 복사된다 만약 이것이 빠져있으면 대신 빈객체가 사용된다 프로퍼티 이름인 classname과 superclass, constructor는 예약되어 있는 이름이며 이객체에서 사용해서는 안된다.
    - borrow : 생성자 함수의 배열 혹은 생성자 함수 주어진 클래스의 인스턴스 매서드들은 새 클래스가 주어진 클래스의 메서드를 빌려갈수 있게 새클래스의 프로토 타입객체로 복사된다. 생성자는 주어진 순서대로 처리되기 때문에 배열의 마지막에 있는 클래스의 매서드는 배열의 앞에 있는 클래스의 메서드를 덮어쓸 수 있다. 빌려온 매서드는 위의 methods객체에 있는 매서드를 덮어쓸 수 있다. 빌려온 매서드는 위의 methods객체에 있는 프로퍼티보다 먼저 프로토타입객체에 저장된다,
    - provides : 생성자 함수의 배열 혹은 생성자함수 프로토타입 객체가 완전히 초기화 되고 나면 이함수는 프로토타입이 가진 매서드의 이름과 전달인자의 수가 이클래스들의 각각이 정의한 인스턴스 매서드와 일치하는지 검증하고 아무런 매서드도 복사되지 않음

[10장 모듈과 네임 스페이스]

모듈과 네임스페이스 생성
- 모듈은 실제 정의하여 사용할수 없다
- 네임스페이스는 자바의 패키지 개념과 비슷(중복방지하고 이름으로 고유의 값 식별)
- Class.js;//클래스와 함께 작동하기 위한 유틸리티 모듈
- var Class={};//네임스패이스로서 빈객체 생성
- //네임스페이스 안에 함수를 정의
- Class.define=function(data){}
- 모듈사용기능성 검사
  - 단순히 그 모듈의 네임스페이스를 검사함으로써 해당 모듈이 존재하는지 체크
  - ex)
  - var com; //전역심벌이 존재하는지 검사전 선언
  - if(!com||!com.davidflanagan||!com.devidflanagan.Class)
    - throw new Error("com/davidflanagan/Class.js has not been loaded");
- 모듈로 사용되는 클래스
  - Class모듈은 단순히 서로 협력하여 작동하는 유틸리티 함수들의 집합이다.
  - 모듈이 함수 한개로 구성될수도 있으며 자바스크립트 클래스나 협력클래스들과 함수들의 집합이 될수 있다.
  - ex)복소수 클래스 모듈
  - //Class 모듈 검사
  - var com;
  - if(!com||!com.davidflanagan||!com.devidflanagan.Class)
    - throw new Error("com/davidflanagan/Class.js has not been loaded");
  - com.davidflanagan.Complex - com.davidflanagan.Class.define({
    - name : "Complex",
    - Construct : function(x,y){this.x=x; this.y=y;},
    - methods : {
      - add:function(c){
        
        return new com.davidflanagan.Complex(this.x+c.x, this.y+c.y);
      - }
    - }
  - });
  - 위의 코드는 하나의 클래스 구성된 모듈을 생성하는 코드를 보여준다. 가상 Class모듉하 Class모듈우ㅏ define()함수의 의존
- 모듈 초기화 코드
  - 모듈은 나중에 호출될 함수를 정의하는 것 이상의 일을한다.
  - 모듈은 네임스페이스를 설정하고 할당하는 시점에도 코드를 실행이 가능하다.
  - 또한 모듈은 로딩이 완료 됐을때 자신만의 초기화 코드를 실행시킬수있다 그외 다른 모듈에는 나중에 호출될 초기화함수가 있어야함
  - 초기화 함수를 정의하고 이함수가 초기화 함수 라고 문서에 적어두어 사용자가 초기화 함수를 적당한 시점에서 호출하는 방법이있음
네임스페이스에서 심벌 가져오기
- var define=com.devidflanagan.Class.define;//모듈을 변수에 저장하여 사용
- 변수에 담아 심벌을 가저오는 것에 대한 몇가지 중요사항
  - 함수나 객체 또는 배열을 참조하는 심벌들만 가져올수 있음
  - 가져오기가 모듈 사용자를 위한 것
- private심벌
  - 클로저를 이용한 네임스페이스 정의(클로저 : 함수뿐만아니라 함수가 정의되었을때 효력이 미치는 유효범위)
  - var com;
  - if(!com)com={};
  - if(!com.davidflanagan)com.davidflanagan={};
  - com.davidflanagan.Class={};
  - //private네임 스페이스로 작동할 클로저를 생성하기위한 익명 함수를 생성하고 호출(public심벌은 클로저에서 com.davidflanagan.Class로 내보냄)
  - //익명함수 시작
  - (function(){
    - //클로저 내부에서 심벌생성
    - function define(data){counter++;}
    - function provides(o,c){}
    - //지역변수는 클로저 내부에 있는 심벌이다(private)
    - var counter=0;
    - function getCounter(){return counter;}
    - //public 프로퍼티는 public네임스페이스로 내보내고
    - //private 프로퍼티는 숨겨진채로 놔둔다
    - var ns=com.davidflanagan.Class;
    - ns.define=define;
    - ns.provides = provides;
    - ns.getCounter=getCounter;
  - })();
모듈 유틸리티
- Module.createNamespace() : 네임스페이스 생성과 에러 검사를 다룬다
  - Module.createNamespace("com.flanagan.Class");//네임스페이스 생성
  - //네임스페이스 채우기
  - com.davidflanagan.Class.define=function(data){}
  - com.davidflanagan.Class.provides=function(o,c){}
- Module.require() 주어진 버전과 이름을 가진 모듈이 존재하는지 검사하고 만약 존재하지 않으면 에러를 발생
  - Module.require("com.davidflanagan.Class", 1/0);
- Module.importSymbols() 심벌을 전역네임스페이스 혹은 주어진 다른 네임스페이스로 작업을 간소화한다.
  - Module.importSymbols(Module);//네임스페이스를 넘겨줌
  - //Complex클래스를 전역 네임스페이스로 가져옴
  - importSymbols(com.davidflanagan.Complex);
- Module.registerInitalizationFunction() 나중에 실행할 초기화 코드를 함수를 등록

[11장 정규표현식을 사용한 패턴매칭]

정규표현식 정의
- RegExp객체로 표현
  - var pattern = /s$/;(리터럴 표현방식)
  - var pattern = new RegExp("s$"); (RegExp객체 생성자로 표현)
- 정규표현식 리터럴 문자
  - 알파벳 문자와 숫자조합 =같은 조합문자들
  - \0 = null문자
  - \t = 탭
  - \n = 줄바꿈
  - \v = 수직 탭
  - \f = 폼피드
  - \r = 캐리지 리턴
  - \xnn = 16진수 nn해당하는 라틴 문자
  - \uxxxx = 16진수xxxx에 해당하는 Unicode문자
  - \cX = 제어문자 ^X
- 문자 클래스
  - 개별리터럴 문자는 대괄호로 둘러싸서 문자 클래스로 묶일수 있다 (/[abc]/)
  - 정규 표현식 문자 클래스
    - [...] = 대괄호 안에 있는 문자
    - [^...] = 대괄호 않에 없는 문자
    - . = 줄바꿈이나 unicode줄마침 문자를 제외한 아무문자
    - \w = ASCII문자
    - \W = ASCII문자가 아닌 문자
    - \s = unicode공백문자
    - \S = unicode 공백문자가 아닌 문자
    - \d = ASCII숫자
    - \D = ASCII숫자가 아닌 문자
    - [\b] = 백스페이스
- 반복
- - /\d\d/=두자리 숫자표현
  - 정규 표현식의 원소가 몇번이나 반복될수 있는지 기술하는 문법
  - 정규 표현식 반복 문자
    - {n,m} = 앞의 항목이 적어도 n번이상나타나고 m번보다는 적게 나타난다.
    - {n,} = 앞의 항목이 n번이상 나타난다
    - {n} = 앞의항목이 n번나타난다.
    - ? = 앞의 항목이 0또는 한번 나타난다 즉 앞의 항목이 생략할수 있다({0,1})
    - + = 앞의 항목이 한 번 이상 나타난다는 것을 의미({1,})
    - 앞의 항목이 0번이상 나타난다는 것을 의미한다 ({0,})
  - 욕심이 없는 방법
    - 반복문자는 가능한 많은 수의 문자와 매치되며 정규 표현식상 그 반복 문자 뒤에 있는 패턴도 문자열에 계속 적용
  - 대체와 그룹화 참조
    - 정규 표현식 문법에는 대체 표현식과 부분 표현식의 그룹화 이전부분 표현식을 참조하기 위한 특수한 문자가 포함됨
    - /ab|cd|ef/는 'ab' or 'cd' or'ef'에 매치
    - /\d{3}|[a-z]{4}/는 세자리 숫자나 네개의 소문자에 매치
  - 매치 위치지정
    - \s 는 단일 공백문자에 매치
    - \w(ASCII),\W(비단어 문자)의 경계혹은 ASCII문자와 문자열의 시작이나 끝의 경계를 말한다.
    - "JavaScript" 단어 자체가 한줄인 것과 매치 = /^JavaScript$/
    - 정규 표현식 앵커문자
      - ^ = 문자열의 시작부분이나 여러라인을 찾는 경우에는 줄의 시작부분에 매치된다.
      - $ = 문자열의 꿑 부분이나 여러줄을 찾는 경우에는 줄의 끝부분에 매치
      - \b = 단어 경계에 매치된다. \w, \W문자나 \w문자열의 시작이나 끝부분의 위치와 매치된다([\b]는 백스페이스)
      - \B = 단어경계가 아닌 곳에 매치된다
      - (?=p) = 긍정적 뒤보기 선언 이후에 나올 문자들이 패턴 p 에 매치되어야 하지만 매치결과는 나타나지 않는다.
      - (?!p) = 부정적 뒤보기 선언 이후에 나올 문자들이 패턴 p에 매치되어서는 안된다
  - 플래그(flag)
    - 플래그는 /문자 바깥에 기술
    - i플래그 = 패턴매칭이 대소문자 구별없이 이루어져야한다는 것을 의미
    - g플래그 = 패턴 매칭이 전역적이어야 한다 즉 탐색된 문자열에서 매치된 부분을 모두 얻어야 한다.
    - m플래그 = 여러줄에 걸친 패턴 매칭을 수행
  - 자바스크립트에서 지원되지 않는 펄의 RegExp기능
  - - s(한줄상태)와 x(확장된 문법)플래그
    - \a,\e,\l,\u,\L,\U,\E,\Q,\A,\Z,\z,\G 이스케이프 시퀀스
    - (?<=긍정적 앞보기 앵커와 (?<!부정적 앞보기 앵커
    - (?#주석과 확장된 (?문법
패턴 매칭을 위한 문자열 매서드
- search()
  - 정규표현식을 전달인자로 받아서 가장 처음 매칭되는 부분 문자열의 위치를 반환하고 매칭되는 부분 문자열이 없으면 -1반환
  - "JavaScript".search(/script/i); //4반환
- replace()
  - 찾아서 바꾸기 작업
  - text.replace(/Javascript/gi, "JavaScript"); // Javascript->JavaScript로
- match()
  - String의 정규 표현식 메서드들 중에서 가장 일반화된 매서드로 정규표현식을 유일한 전달인자로 받고 매치된 결과를 배열로 반환
  - "1 plus 2 equals 3".match()/\+d/g); //["1","2","3"]
- splite()
  - 전달인자를 분리 기준으로 삼아 자신을 호출한 문자열을 쪼개어 부분문자열로 만든 후 배열에 저장
  - "123,456,789".split(",");// ["123","456","789"]
RegExp객체
- RegExp() 생성자 : 한개나 두개의 문자열 형태의 전달인자를 받아서 새로운 RegExp객체를 생성
  - var zipcode = new RegExp("\\d{5}","g");
- 패턴 매칭을 위한 RegExp매서드
  - exec() : RegExp객체대신 문자열을 전달인자로 받는다는 점을 제외하면 match매서드와 유사
    - match()다르게 exec()매서드는 정규 표현식에 전역 g플래그의 존재여부에 상관없이 같은 종류의 배열을 반환
  - text() : 문자열을 전달받고 이문자열 내에서 정규표현식과 매치되는 부분이 있으면 true를 반환
- RegExp의 인스턴스 프로퍼티
  - source프로퍼티는 읽기 전용 문자열이며 정규표현식의 텍스트가 저장
  - global 프로퍼티는 정규 표현식에 g플래그가 있는지 없는지 나타내는 읽기전용 불리언 값
  - ignoreCase프로퍼티는 정규표현식에 i플래그가 존재하는지 나타내는 읽기전용 불리언값이다.
  - multiline 프로퍼티는 정규표현식에 m플래그가 있는지를 나타내는 읽기전용 불리언값이다.
  - lastIndex 프로퍼티는 읽거나 쓸수있는 정수형값이다,

[대문] (주)마중물소프트 개발팀 노트

Mon, 27 Dec 2010 17:48:45 +0900

This is...

(주)마중물소프트의 개발팀 노트입니다.

늘 열공하는 준비된 마중물소프트가 됩시다!

[대문표지 : 아이유우~~~]

We are...

개발팀장 조기용(realchoky@mjmsoft.co.kr)

프로그래머 김현철 (sernal@mjmsoft.co.kr)

디자이너 봉미혜 (bongmi27@mjmsoft.co.kr)

프로그래머 임근수 (forlks@mjmsoft.co.kr)

팀노트 관리 및 계정문의 : realchoky (realchoky@mjmsoft.co.kr) 노트가입비 : 100억 (최초 1회)

[질답] 묻고답하기

Mon, 27 Dec 2010 17:20:22 +0900

서로 묻고 답해줍시다! 당신의 아는 척이 다른 사람에게는 힘이 될 수 있습니다 ^^

* 사용예

[질문 - realchoky] Is Hyun-Cheol alien?

[답변 - realchoky] Absolutely YES!

[질문 - 임근수] 요소에 display속성을 두번 사용하는 방법?

#Contents div.banner p span.logo{ diplay : block;

float : left;

display : inline:......}

</div>

logo의 하위 요소에는 이미지가 배치되어 있구요 p 요소는 clear : both 속성을 가지고 있습니다. 약술해서 위의 내용처럼 나와있는데.. diplay 속성을 왜 두번사용했는지 또한 사용하면 어떠한 변화가 있는지 궁금합니다.

[답변 - realchoky]

span의 경우 기본적으로 display속성이 inline이므로 block으로 변경하지 않을 것이면 위 코드처럼 사용할 필요가 없음.

코드를 테스트 해 본 결과 display속성들을 변경해도 레이아웃에 전혀 영향을 미치지 않음.

[질문-임근수] 자바스크립트에서 제가 정확히 올바르게 이해하고 있는지 알아보고 싶어서 질문드립니다.

function f(a,b,c){

function exam(a,b,c){

f.apply(this, arguments);

}

apply()사용중 this는 apply() 호출한 함수 f자체로 해석이 맞는지..

이때 arguments는 exam 전달인자 배열이 맞는지... 궁금합니다.

[답변 - realchoky]

자, 우선 이해해야할 것들...

- arguments는 함수가 전달받은 인자들의 배열

- f.length는 함수의 매개변수의 개수 (f가 함수라 하면)
- 함수내의 this는 함수가 실행되는 컨텍스트 객체 (쉽게 말하기가 힘들군...ㅎㅎ 굳이 쉽게 말하자면 함수가 실행된 객체의 영역?)

위 예제는 내부함수에서 외부함수를 다시 호출(apply에 의해)하므로 무한루프에 빠지겠죠? 변형한 예제를 통해 이해해 보자구요!

function f(a, b, c) {

alert("1. f this ===> " + this);

alert("2. f arguments ===> " + arguments.length);

alert("3. f length ===> " + f.length);

var exam = function (a, b, c) {

alert("4. exam this ===> " + this);

alert("5. exam arguments ===> " + arguments.length);

alert("6. exam length ===> " + exam.length);

}

return exam(a, b, c); // code b

}

f('1','2','3', '4', '5'); // code a

</script>

자 위 예제를 타이핑해서 결과를 보세요! (우선 6가지 alert의 결과를 예측해 보면 더욱 좋겠죠?)

결과 : 1, 4번 결과의 this는 code a에서 f함수를 실행시킨 window객체(브라우져의 전역객체)가 됩니다.
     (exam은 f함수내에 정의되었을 뿐 실행시킨건 f함수가 아니라 window객체 입니다!
   고로 질문했던 apply에 인자 this 또한 window객체입니다!)
결과 : 2번 결과는 1,2,3,4,5를 f함수가 전달 받았으므로 5겠죠?
결과 : 3번 결과는 f가 a,b,c 세개의 파라미터를 정의했으므로 3이죠!
결과 : 5번 결과는  code b에서 a,b,c 세개의 인자를 전달했으므로 exam이 전달받은 인자는 세개니까 3이죠!
결과 : 6번 결과는 exam이 a,b,c 세개의 파라미터를 정의했으므로 3이죠!

Tip! 보통 함수에 전달한 값들은 인자(arguments), 함수가 정의한 전달값들의 저장소?는 매개변수(parameter)라고
정의합니다. 구분해 알아두고 사용한다면 좋겠죠...ㅋㅋ

더 질문이 있다면... 스터디 시간에.... 이상 아는척~! 당신의 열정과 노력에 박수를 보내며...

[코드] jQuery Template Code

Fri, 24 Dec 2010 14:10:56 +0900

[jQuery 스크립트 삽입]

[전역 충돌없이 jQuery 사용]

(function($) {

// code here

})(jQuery);

[일정] 12월 내부교육 일정

Thu, 23 Dec 2010 13:06:16 +0900

김현철, 봉미혜 : 12/15~ 자바스크립트완벽가이드
이교철, 임근수 : 12/6~ 웹표준교과서, 12/15~ 자바스크립트완벽가이드

6일	7일	8일	9일	10일	11일	12일
웹표준교과서2 장	웹표준교과서3 장	웹표준교과서4 장	웹표준교과서5 장	웹표준교과서6 장
13일	14일	15일	16일	17일	18일	19일
웹표준교과서7 장	웹표준교과서8 장	자바스크립트 완벽가이드 1,2장	자바스크립트 완벽가이드 3장	자바스크립트 완벽가이드 4,5장
20일	21일	22일	23일	24일	25일	26일
(test ~5장) 자바스크립트 완벽가이드 6장	자바스크립트 완벽가이드 7장	자바스크립트 완벽가이드 8장	자바스크립트 완벽가이드 9장	자바스크립트 완벽가이드 10,11장
27일	28일	29일	30일	31일	1월 1일	2일
(test ~11장) 자바스크립트 완벽가이드 13,14장	자바스크립트 완벽가이드 15장	자바스크립트 완벽가이드 16장	자바스크립트 완벽가이드 17,18장	자바스크립트 완벽가이드 19장		2011. 1. 3 (test ~19장)

[개인노트]김현철 사원-Javascript

Fri, 17 Dec 2010 09:58:55 +0900

[개인노트] 이교철-웹표준

Fri, 17 Dec 2010 09:50:15 +0900

[12/6 - 웹표준교과서 1장]-------------------------------------------------------------------------
제1장 소개-웹표준은 무엇인가? 1. 누가 웹표준을 정하는가?

W3C란 단체가 중심이 되어 제정(권고)
=>ECMA,IANA...
- 웹표준이란 웹에서 표준적으로 사용되는 기술을 총칭
인프라와 트렌트에서 생각하는 웹표준
- CSS(Cascading Style Sheet)
- 가장 엄격한 버전 'Strict', 비추천 요소와 속성의 사용을 인정한 'Transitional' , 프레임 관련 요소의 사용을 인정한 'Frameset'
웹표준의 장점
- 수정과 관리 용이
- 웹 접근성 향상
- SEO(검색엔진 최적화)대책
- 파일 사이즈 축소와 서버 저장 공간 절약
- 하위호환성과 상위호환성 확보
구조언어와 표현언어
- 구조 언어 - HTML, XHTML, XML
  - XML : HTML처럼 특정 목적이 있는 언어가 아니라 요소와 관계를 기술하는 문서형 정의를 기술하는 문서형 정의(DTD)를 갖추어 새로운 언어 규정이 가능한 메타언어이다. XML은 비즈니스에서 표준적 문서로 여겨진다.
  - HTML4.0은 가장 잘 알려진 마크업 언어이다.(Strict, Transitional, Frameset DTD)
  - XHTML1.0 하위 요소의 모바일기기용 마크업 언어로는 W3C 권고로 2000년 12월 공표한 XHTML Basic이 일반적으로 이용된다.(Strict, Transitional, Frameset DTD)
  - XHTML 1.1 모듈화된 XHTML이며, XHTML1.0 Strict에 해당하는 것만 인정한다. 엄격함
- 왜 HTML이 아니라 XHTML을 채택하는가
  - 빠른 데이터 처리와 안정적 브라우저 동작
  - 데이터 재이용성과 정보공유 촉진
  - 네임 스페이스 이용과 다양한 기기에 대응
- XHTML 중에 어떤 문서형을 선택하면 좋을까
  - 웹사이트의 목적과 목표가 중요요인
  - 추천 요소.속성을 사용(문서구조와 시각표현을 엄밀히 분리)할지'가 선택기준이다.
  - XHTML1.1은 문서 구성 요소가 자세하게 분할되어 있어 그 조합에 의해 다양한 기기와 브라우징 환경에 유연하게 대응할 수 있는 '모듈화' 구성이 가능하다.
- 표현언어 CSS
  - CSS는 웹페이지의 시각표현을 지정하는 언어이며 단순히 스타일시트라고 한다.
그 밖의 언어와 가이드 라인
- 동작.조작언어
  - ECMAScript(ECMA-262) : JavaScript
  - DOM(Document Object Model) : 플랫폼과 언어에 의존하지 않고 문서 콘텐츠와 구조, 스타일을 동적을 변화시키기 위한 스크립트언어이며 Dynamic HTML의 표준 규격이라고 할 수 있는 사양이다.
- 수식/그래픽/멀티미디어
  - MathML : 수학
  - SVG : 그래픽
  - SMIL : 멀티미디어
- 메타데이터
  - RDF/RDFS(Resource Description Framework) : 메타데이터 표현
  - OWL(Web Ontology Language)
- 웹 접근성
  - WCAG1.0(Web Content Accessibility Guidelines) : 접근 가능한 웹페이지를 제작하기 위한 가이드 라인

[12/7 - 웹표준교과서 2장]

-------------------------------------------------------------------------
제 2장 문서구조-XHTML 웹페이지 구축 시작

웹 구조 이해
*HTML, URI, HTTP
-웹의 기본적 개념은 문서형인 HTML, 문서 전송 프로토콜인 HTTP(HyperText Transfer Protocol), 문서 소재 지정방법인 URI(Uniform Resource Identifier)의 세가지이다.
-URL(Uniform Resource Locator)+URN(Uniform Resource Name)= URI 가 주로 사용된다.
-HTTP는 웹서버와 클라이언트(브라우저 등)가 데이터를 송수신할 때 준수하는 통신규약(프로토콜)이며, 웹페이지는 기본적으로 HTTP를 기반을 데이터를 주고 받는다.

*URI와 링크
-Http://www.naver.com/data/index.html (URI스킴)://(서버명).(도메인명)/(폴더명)/(파일명)
-URI스킴은 URI를 어떤 규칙에 따라 기술하고 자원(데이터)에 어떻게 접근하는지 지정하는 것이다.
-웹페이지에서 http:스킴/ FTP서버에 접근하기 위한 ftp:스킴 / 이메일 주소를 지정하기 위한 mailto:스킴

-http://<authority><path>
-http://<authority><path>?<query> 쿼리 부분
-http://<authority><path>#<fragment> 프래그먼트 식별자

-책임자 부분 : 서버명과 도메인명으로 구성되어 있다. 앞부분에 '//'을 지정하여 네트워크상에 있는 리소스임을 나타낸다. 또 끝부분에 ':'으로 구분하여 서버의 포트번호를 지정할 수 있다.
-패스부분 : 책임자 부분의 뒷부분을 패스 부분이라 하며 폴더명과 파일명으로 구성된다. 서버 내부 자원의 위치를 나타내며, 임의로 이름을 붙일 수 있다.

*절대 URI와 상대 URI
-절대 URI는 URI를 URI스킴에서 패스까지 전부 적는 것을 말한다.
-절대 URI가 폴더명으로 끝나는 때에는 끝부분에 '/'를 확실히 붙여야 한다.
-상대 URI는 어떤 파일과 폴더를 기점으로 한 다른 파일과의 경로이다. '.'은 같은 폴더를 '/'은 폴더의 구별을 나타낸다. '..'은 한 단계 위 폴더를 나타낸다.
-'/'으로 시작하는 상대URI는 절대패스라고 하여 URI스킴과 책임자 부분을 생략한 것으로 인식한다. (절대 패스와 절대 URI는 다르다.)

2.XHTML의 전체 모양과 서식
*XHTML의 전체 모양
<html>
    <head>
    (그 페이지의 기본정보)
    </head>
</html>
<body>
    (그 페이지의 본문)
</body>
</html>

*XHTML 서식
-요소명은 '<'과 '>'으로 둘러싼다
-<요소명>~</요소명> 형식으로 기술한다.
-요소에 속성을 부여할 때 시작태그를 <요소명 속성명="속성값"> 형식으로 기술
-하나의 요소에 복수의 속성을 부여할 때에는 반각 스페이스 사용(한칸 뛰움)
-부모 요소와 자식 요소의 관계를 적절하게 지정한다.
-공백문자 처리 : 복수의 공백문자가 연속해서 존재할 때는 특별한 경우(pre)를 제외하고 는 하나의 공백문자로 정리된다.

3. XML선언, 문서형 선언, 네임 스페이스와 언어코드
* XML선언
<?XML version="1.0" encoding="UTF-8"?>       <== 버전 속성, 인코딩 속성
<html>
    <head>
    (그 페이지의 기본정보)
    </head>
</html>
<body>
    (그 페이지의 본문)
</body>
</html>

- 인코딩 속성
   # UTF-8 : 유니코드(한 개의 문자코드 체계에 다언어처리를 가능하게 한 문자코드세트)의 한 종류. 8비트의 가변 멀티바이트
   # UTF-16 : 16비트의 가변 멀티바이트
   # EUC-KR : 유틱스 서버와 워크스테이션 표준의 문자코드세트.
   ==> 현재 UTF-8과 EUC-KR을 가장 많이 사용

- standalone속성 : 외부 DTD의 참조 여부를 지정하기 위한 속성

*문서형 선언
<?XML version="1.0" encoding="UTF-8"?>       <== 버전 속성, 인코딩 속성
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1.DTD/xhtml1-strict.dtd">   <== PUBLIC "공개 식별자 " "시스템 식별자"
<html>
    <head>
    (그 페이지의 기본정보)
    </head>
</html>
<body>
    (그 페이지의 본문)
</body>
</html>
-공개 식별자(Formal Public Identifier)는 문서형 정의를 참조하기 위한 식별자이다.
-시스템 식별자(System Identifier)는 그 문서가 준수하는 문서형 정의를 참조하는 URI이며 오른쪽 같이 절대URI로 지정할 수 있다. 시스템 식별자는 HTML에서 생략가능하나 XHTML에선 생략 불가능하다.

*버전 정의
    [XHTML 1.0 Strict]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1.DTD/xhtml1-strict.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.org/TR/xhtml1.DTD/xhtml1-frameset.dtd">

    [XHTML 1.1]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1.DTD/xhtml11.dtd">

2. 네임 스페이스와 언어코드
<?XML version="1.0" encoding="UTF-8"?>       <== 버전 속성, 인코딩 속성
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1.DTD/xhtml1-strict.dtd">   <== PUBLIC "공개 식별자 " "시스템 식별자"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <== xmlns, xml:lang, lang
<html>
    <head>
    (그 페이지의 기본정보)
    </head>
</html>
<body>
    (그 페이지의 본문)
</body>
</html>

-네임 스페이스는 xmlns 속성으로 지정한다.
-언어코드는 xml:lang속성으로 지정한다. 하위 호환성을 위해 lang을 같은 값으로 지정한다.

4. 타이틀, 문자코드세트, 설명문과 키워드
* 타이틀
* 마임 타입과 문자코드세트
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset="UTF-8"/>
    <title> 웹 구조의 이해 </title>
    </head>
- http-equiv 속성 : 서버의 HTTP헤더(HTTP 리스폰스 메세지 헤더)와 동일한 정보를 추가적으로 우선적으로 출력하게 지시하는 것이다.
- 마임 타입 : 문자 속성으로 마임 타입을 지정한다.[Text/html, Application/xhtml+xml, Application/xml, Text/xml]
- 문자 코드 세트 " ..;charset="UTF-8"/>
*설명문과 키워드
    <meta name="description" contnet="HTML, HTTP, URI 등의 웹의 기본적 구조와 URI의 구조를 설명." />
    <meta name="keyword" content="Web, WWW, 구조, HTML, HTTP, URI, 링크"/>

5. 검색로봇 제어, 그 밖의 메타데이터, 내비게이션 링크
* 검색 로봇 제어
- <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
- Robot.txt 이용
* 그 밖의 메타데이터
- author, copyright, reply-to, date
* 기준 URI :그 문서 안 상대 URI의 기준이 되는 절대 URI를 말한다.
- <base href="http://www.cybergarden.net/"/>
- 기준 URI 선택 순서 1 base 요소 2 HTTP헤더 정보 3 그 문서가 위치한 기준 URI
* 내비게이션 링크 : 사이트에서 이동이 편리하고 사용성이 향상
- <link rel="contents" href="/index.html" title="차례"/>

6.제목, 문단, 작성자 정보, 구분선
*블록 레벨 요소(block-level elements)
-자기영역을 가지는 한개의 독립된 덩어리를 말하며 줄바꿈이 일어난다.
*인라인 요소 (inline elements)
-'행 안의 일부'라는 의미로서 텍스트와 동격 요소이다.
-body요소의 바로 하위에는 블록 레벨 요소만이 자식 요소로 올 수 있고 인라인 요소가 직접적으로 body의 하위 요소로 하는 것은 옳지 않다.
*제목 <h1> ~ <h6>
- 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하지만, 블록 레벨 요소는 포함 할 수 없다.
*문단 <p> - 텍스트를 문단으로 정의하려고 p요소를 사용
- 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하지만, 블록 레벨 요소는 포함 할 수 없다.
*작성자 정보(address 요소)
- 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하지만, 블록 레벨 요소는 포함 할 수 없다.
*구분선(hr)
- hr요소는 블록 레벨 요소이지만 빈 요소이므로 <hr/>형식으로 기술

7. 인용문, 정형화된 텍스트
*인용문(blockquote 요소)
- 블록 레벨 요소이지만 직접 인라인 요소와 텍스트를 포함하는 것이 불가능하고, p요소 등 다른 블록 레벨 요소를 포함해야 한다.
- cite 속성으로 인용한 곳의 URI 명시
- title 속성으로 인용한 곳의 타이틀 명시
- 인라인에서의 인용에는 q 요소 사용
*정형화된 텍스트(pre요소)
- 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하지만, 블록 레벨 요소는 포함 할 수 없다.
- pre요소는 code요소와 조합하여 스크립트 언어와 프로그래밍 언어의 소스코드를 표시하는 데 사용하는 것이 일반적이다.

8.순서 있는 목록과 순서 없는 목록, 정의형 목록, 표

[12/13 - 웹표준교과서 6장]

-------------------------------------------------------------------------
제 6장 크로스 브라우저 레이아웃 - 브라우저를 차별하지 않는 레이아웃 기법

브라우저의 구현과 호환성
- CSS 기본 규칙 - 브라우저에 따라 (X)HTML 요소나 속성,속성값, CSS의 선택자나 속성 값등을 지원하는 정도가 다른 점이다.
- 브라우저의 독자 확장 - IE와 네스케이프
- 하위호환성과 상위호환성
  - 하위호환성 - 옛 브라우저에서도 문제없이 표현되고 안정적으로 동작하는 것
  - 상위호환성 - 앞으로 새로운 브라우저나 입출력 장치가 개발되어도 현재의 페이지가 문제없이 표현되고 동작하는 것을 목표로 하는 것

문서형식 전환과 표현방식
- 브라우저가 갖춘 복수의 표현 방식
  - 두 종류 표현방식을 갖춘 브라우저
    - 표준방식 - W3C 기술문서 등의 웹 표준을 준수한 표현방식
    - 호환방식 - 옛 브라우저와 하위 호환성을 우선한 표현방식
  - 세 종류 표현방식을 갖춘 브라우저
    - 표준방식
    - 거의 표준방식
    - 호환방식
- 브라우저의 표현 방식과 웹 표준에서 규칙
  - HTML4.0 또는 4.01 에서 시스템 식별자는 생략 가능.
  - XHTML에서 시스템 식별자는 생략 불가.
  - XHTML에서 XML선언은 그 문서의 문자코드세트가 'UTF-8' 또는 'UTF-16'이외 경우는 필수
- 브라우저별 주의점
- 잠정적 해결책
  - 모든 브라우저에 같은 표현방식이 채용되게 노력해야 한다. CSS중심의 레이아웃을 구현하는 많은 사이트가 채용한 해결책이다.
  - 브라우저별로 다른 표현방식이 적용되는 것을 전제로 디자인한다. (CSS핵)
CSS핵
- CSS핵이란? 특정 브라우저만을 대상으로 CSS를 적용하는 방법
- 유명한 CSS핵
  - 스타핵 : WIN IE 4-6, MAC IE 4-5
  - 언더스코어핵 : WIN IE 4-6
- 박스모델 핵
  - TANTEK 박스모델 핵
  - 단순 박스모델 핵(SBMH)
외부 스타일 시트 만들기
- 브라우저 스타일 초기화 - 브라우저 스타일은 제작자 스타일이나 사용자 스타일보다 하위에 위치함. -> 브라우저 스타일에 큰 차이가 있어 초기화 필요
- 속성을 지정하는 순서
  - Suggested order
  - display
  - list-style
  - position
  - float
  - clear
  - width
  - height
  - margin
  - padding
  - border
  - background
  - color
  - font
  - text-decoration
  - text-align
  - vertical-align
  - white-space
  - other text
  - content
레이아웃 기법(1)- 문서본체
- 여백조절
  - body 요소의 여백에 대해 Opera를 제외한 많은 브라우저는 margin 속성으로 Opera는 padding 속성으로 조절한다.(즉, 둘다 조정해야 함)
- 중앙 정렬
  - 블록 요소인 때는 좌우 마진 값에 'auto'를 지정한다.
  - 인라인 요소인 때는 부모 요소인 블록 요소의 text-align 속성값에 'center'를 지정한다.
  - IE 6 예외
레이아웃 기법(2) - 내비게이션
- 목록을 이용한 구조화 내비게이션
  - p요소 안에 ul요소를 이용하여 블록 요소로 정의하고 CSS의 display 속성에 인라인화하는 편이 구조적으로 올바르고 접근성이 향상된 내비게이션을 구성할 수 있다.
레이아웃 기법(3) - 링크
- 기본적인 디자인 방법
  - 밑선을 점선으로 바꾼다
  - 가상클래스와의 조합
  - 배경 지정
- 외부 링크를 나타내는 아이콘 이미지 표현
  
  a.external{
  
  padding-right : 23px;
  
  background : url(/images/external.gif) no-repeat center right;
  
  }
- E-mail 주소를 나타내는 아이콘 이미지 표현
레이아웃 기법(4) - 텍스트
- 강조(em요소, strong 요소)
  
  em[lang="ko"]{font-style : normal}
  
  em[lang="en"]{font-style : oblique}
  
  strong{font-weight : bold}
- 생략어와 두문자어(abbr 요소, acronym 요소)
- 소스코드(code 요소)
- 드롭 캡 표현
  - :first-letter 가상 요소를 이용하여 요소의 첫 번째 문자를 드롭 캡으로 표현할 수 있다.
- 대문자와 소문자 변환
  - text-transform:uppercase;
- 소문자의 스몰 캐피털화
  - font-variant : small-caps;
레이아웃 기법(5) - 제목글
- 제목글의 시선 집중 효과
  - 적당한 패팅을 지정하여 시각적인 여유를 갖추는 것(문자색과 배경색을 바꾼 후)
- 제목글과 이미지 조합
  - 제목글에 모서리가 접힌 효과를 부여
    
    h2{
    
    padding : 8px;
    
    color : white;
    
    background : #699 url(/images/h2_dogeared.gif) no-repeat top right;
    
    font-size : 1.2em;
    
    }
  - 제목글 앞부분에 아이콘 표현
  - 제목글 아랫부분에 그라데이션 표현
- 제목글에 자동으로 번호를 매긴다
  
  h1{
  
  counter-increment : chapter;
  
  }
  
  h1:before{
  
  content : counter(chapter) " " ;
  
  }
  
  h2{
  
  counter-increment : section;
  
  counter-reset:subsection;
  
  }
  
  h2:before{
  
  content : counter(section) " " ;
  
  }
  
  h3{
  
  content-increment : subsection;
  
  }
  
  h3:before {
  
  content : counter(chapter) "." counter(section) "."
  
  counter(subsection) " " ;
  
  }
레이아웃 기법(6) - 인용문
- 블록레벨의 인용문(blockquote 요소)
  - 마진이나 선, 배경을 지정 : margin-left 속성으로 지정
  - 인용문 안에 인용문
  - 이미지를 조합
- 인라인 인용문(q 요소)
  
  q.first:before { content: "[";}
  
  q.first:after { content: "]";}
- 인용처/참조처(cite 요소)
레이아웃 기법(7) - 목록
- ul 요소
  - 선을 지정한 수직 목록
    
    ul{
    
    margin-left : 15px;
    
    padding-left : 15px;
    
    border-left : 2px dotted #7aa;
    
    }
    
    li{
    
    list-style-type : none ;
    
    margin-top : 4px;
    
    margin-bottom : 4px;
    
    }
  - 배경이미지를 지정한 수직 목록
  - 블릿을 이미지로 대체한다
- ol 요소
  - decimal(1,2,3..)
  - lower-alpha(a,b,c..)
  - lower-roman(i,ii,iii..)
  - upper-alpha(A,B,C..)
  - upper-roman(I,II,III,..)
- dl 요소
  - 링크 목록
  - 카테고리 목록
레이아웃 기법(8) - 테이블
- 선을 이용하여 격자선을 표현한다.
  
  table{
  
  border-collapse : collapse;
  
  border : 1px solid #666;
  
  border-spacing : 0;
  
  empty-cells : show;
  
  }
  
  th {
  
  padding : 5px;
  
  border : 1px solid #666;
  
  }
  
  td{
  
  padding :5px;
  
  border : 1px solid #666;
  
  }
  - 안쪽의 선을 점선으로
- 디자인의 대비를 조절한다.
  - 헤더에 배경색을 지정한다.
- 캡션을 디자인 한다.
  
  caption{
  
  ..
  
  backgroud : url(/images/caption_icon.gif) no-repeat center left;
  
  }
레이아웃 기법 (9) - 폼
- 입력 양식은 어떤 요소에 적용해야 하는가
  - form 요소는 블록 요소와 script 요소만을 직접적인 자식 요소로 넣을 수 있다. 즉 입력 양식을 직접 form 요소의 자식요소로 넣는 것이 아니라 블록 요소에 포함시켜 지정하는 것이 타당하다.
  - 라벨을 dt요소, 입력 양식을 dd 요소로 정의하면 폼을 명확하게 구조화할 수 있기 때문이다. 또 라벨과 입력 양식을 적용하는 요소가 다르기 때문에 CSS로 디자인을 하기 쉽다는 장점이 있다.
- 입력 양식의 다양한 디자인 방법
  - 입력 양식의 폭을 정렬한다
  - 선 지정
  - 텍스트 영역 고정폭 폰트를 지정한다.
  - :focus 가상 클래스 지정
- fieldset 요소와 legend 요소를 디자인 한다
- 표로 짠듯한 레이아웃
레이아웃 기법 (10) - 이미지 대체 기법
- 이미지 대체 기법 기본
  - 이미지 대체 기법에서 기본은 배경관련 속성을 작 사용하는 것이다.
- display 속성 이용 : none
- text-indent 속성 이용 : '-9999px'
  - 텍스트 숨기기
  - 로고의 표현영역에 링크를 설정한다.
  - 로고에 롤오버 효과를 부여한다.
- CSS에 의한 다단 레이아웃의 의미
  - 지금까지의 다단은 표를 사용하여 구현하는 경우가 많았지만 CSS의 플로트나 포지션을 이용하여 구현할 수 있다. 문서 구조와 시각표현의 분리를 철저히 준수하기 위해서도 CSS로 구현하는 것이 바람직하다.
- 2단 구성 레이아웃(이중 플로트형)
  
  div#container{
  
  width : 100%;
  
  }
  
  div#contnet{
  
  width : 70%;
  
  float : right;
  
  }
  
  div#sidebar{
  
  width: 30%;
  
  float : left;
  
  }
  
  div#header{
  
  width : 100%;
  
  }
  
  div#footer{
  
  clear : both;
  
  width : 100%;
  
  }
- 2단 구성 레이아웃(포지셔닝형)
  - 절대적 위치와 상대적 위치 조합
  - 절대적인 위치와 플로트의 조합
  - 절대적 위치와 마진 조합
- 3단 구성 레이아웃(이중 컨테이너형)
- 3단 구성 레이아웃(포지셔닝형)
  - 절대적 위치와 상대적 위치 조합
  - 절대적 위치와 플로트 조합
  - 절대적인 위치와 마진의 조합
    
    div#header{
    
    width : 100%;
    
    }
    
    div#container{
    
    position : relative;
    
    width : 100%;
    
    }
    
    div#contnet{
    
    width : 60%;
    
    margin-left : 20%;
    
    margin-right : 20%;
    
    }
    
    div#sidebarA{
    
    position : absolute;
    
    top: 0;
    
    left : 0;
    
    width: 20%;
    
    }
    
    div#sidebarB{
    
    position : absolute;
    
    top: 0;
    
    right : 0;
    
    width: 20%;
    
    }
    
    div#footer{
    
    width : 100%;
    
    }
레이아웃 기법(12) - 인쇄용 스타일
- 인쇄용 스타일 준비
  - 외부 스타일시트 안에 부분적으로 적용
  - 별도의 외부 스타일시트 이용
- 인쇄에 불필요한 내용 숨기기
- 고정폭이나 플로트 해제
- body 요소에 전체의 스타일 지정
- 링크 텍스트를 어떻게 스타일링할까
- 흑백인쇄를 전제하는 경우
- @page규칙과 페이지미디어 대상 속성
  - 요소 앞뒤로 페이지를 나눈다(page-break-before 속성, page-break-after 속성)
  - 페이지를 나눌 때의 상하의 최소 행수(windows 속성, orphans 속성)

[12/14 - 웹표준교과서 7장]

-------------------------------------------------------------------------
제 7장 접근성 - 다양한 사용자를 위한 설계

한국형웹콘텐츠접근성지침2.0(20091223).pdf

접근성이란
- 접근성의 중요성 : 실무에선 웹표준보다 더욱 중요
  - 사회의 모든 영역에서 웹 이용자가 급속하게 증가하고 있다.
  - 장애 있는 사람이 웹 이용에 기능적 장벽이나 불편이 있다.
  - 접근성이 높아지면 장애가 없는 사람의 편의성도 높아진다.
- 다양한 환경을 마음속에 그려 볼것
- 보편적 접근
  - W3C는 웹을 네트워크로 접근할 수 있는 정보의 보편적 공간이라 정의한다. 오늘날 웹은 인간이 지식을 공유하기 위한 새로운 통신 수단이나 기회를 제공하여 사회에 기여하고 있다.W3C의 주요 목표는 하드웨어, 소프트웨어, 네트워크 인프라, 사용 언어, 문화 ,장소, 신체 능력, 지적 능력에 상관없이 이러한 이익을 모든 사람이 누릴 수 있게 하는 데 있다.
- 장치 독립성
W3C의 대처 : WAI
- WAI의 활동 내용
  - 기술- 핵심 웹 기술이 접근성을 지키도록 한다.
  - 지침-접근성에 관한 지침을 만든다.
  - 도구-접근성을 개선하고 평가하기 위한 도구를 만들게 돕는다.
  - 교육과 홍보- 접근성에 관련된 교육을 하고 그것을 전파한다.
  - 연구 개발-미래의 웹 접근성에 영향을 줄 연구 개발 활동을 한다.
- WAI가 만드는 지침
  - 웹 콘텐츠 접근성 지침 1.0(WCAG 1.0)
  - 저작 도구 접근성 지침 1.0(ATAG 1.0)
  - 웹 표시 장치 접근성 지침 1.0(UAAG 1.0)
  - XML 접근성 지침(XAG)
웹 콘텐츠 접근성 지침 1.0(WCAG 1.0)
- WCAG 1.0의 개요
  - 14개 지침으로 구성
- WCAG 1.0의 두 가지 주제
  - 열악한 환경에서도 문서가 잘 변환되어 보이게 한다.
  - 콘텐츠를 이해할 수 있고 탐색할 수 있게 만들어야 한다.
- 중요도 (Priority) - 중요도 1,2,3
- 적합성 수준
  - 적합성 'A' - 중요도 1의 모든 체크포인트를 지킨다.
  - 적합성 'Double-A' - 중요도 1,2의 모든 체크포인트를 지킨다.
  - 적합성 'Triple-A' - 중요도 1,2,3의 모든 체크포인트를 지킨다.
- 적합도를 나타내는 양식
- 14가지 지침의 상세 내용
  - 지침 1 - 시각적.청각적인 콘텐츠는 그것을 대신할 수 있는 대체 텍스트를 제공한다
  - 지침 2 - 색깔만으로 정보를 구분하면 안 된다.
  - 지침 3 - 마크업과 스타일 시트를 적절히 사용한다.
  - 지침 4 - 내용에 쓰인 언어가 무엇인지 명시한다
  - 지침 5 - 표는 표를 지원하지 않는 환경에서도 유연하게 변경될 수 있게 만든다
  - 지침 6 - 새로운 기술을 사용한 페이지는 그 기술을 지원하지 않는 환경에서도 내용을 보전하면서 표시될 수 있게 한다
  - 지침 7 - 시간의 경과와 함께 변화하는 내용은 사용자가 제어할 수 있게 한다.
  - 지침 8 - 별도로 포함된 사용자 인터페이스에 대해서도 직접적인 접근성을 보장한다.
  - 지침 9 - 입출력 장치에 의존하지 않게 디자인한다
  - 지침 10 - 잠정적인 접근성 보장 기법을 사용한다.
  - 지침 11 - W3C의 기술과 지침을 준수한다
  - 지침 12 - 전후 관계나 위치를 나타내는 정보를 제공한다
  - 지침 13 - 명확한 내비게이션 구조를 제공한다
  - 지침 14 - 문서를 간단 명료하게 작성한다.

[12/15 - 웹표준교과서 참고]

-------------------------------------------------------------------------
KWCAG2.0 - 한국형 웹 컨텐츠 접근성

한국형 웹 컨텐츠 접근성 지침 2.0[2009.12.22]

한국형 웹 콘텐츠 접근성 지침 2.0 개요

원 칙(4개)	지 침(13개)	검사항목(22개)
1.인식의 용이성 (Perceivable)	1.1(대체 텍스트) 텍스트 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.	1.1.1(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체
	1.2(멀티미디어 대체 수단) 동영상, 음성 등 멀티미디어 콘텐츠를 이해 할 수 있도록 대체 수단을 제공해야 한다.	1.2.1(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
	1.3(명료성) 콘텐츠는 명확하게 전달되어야 한다.	1.3.1(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
		1.3.2(명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
		1.3.4(배경음 사용 금지) 자동으로 재생되는 배경음을 사용하지 않아야 한다.
2.운용의 용이성(Operable)	2.1(키보드 접근성) 콘텐츠는 키보드로 접근할 수 있어야 한다.	2.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
		2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
	2.2(충분한 시간 제공) 콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.	2.2.1(응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
		2.2.2(정지 기능 제공)자동으로 변경되는 콘텐츠는 움직임 제어할 수 있어야 한다.
	2.3(광과민성 발작 예방) 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.	2.3.1(깜빡임과 번쩍임 사용 제한) 초당 3~50회의 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
	2.4(쉬운 내비게이션) 콘텐츠는 쉽게 내비게이션할 수 있어야 한다.	2.4.1(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너띌 수 있어야 한다.
		2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
		2.4.3(적절한 링크 텍스트)링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
3.이해의 용이성(Understandable)	3.1(가독성) 콘텐츠는 읽고 이해하기 쉬어야 한다.	3.1.1(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
	3.2(예측 가능성) 콘텐츠의 기능과 실행결과는 예측 가능해야 한다.	3.2.1(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점변화 등)은 실행되지 않아야 한다.
	3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.	3.3.1(콘텐츠의 선형화)콘텐츠는 논리적인 순서로 제공해야 한다.
		3.3.2(표의 구성)표는 이해하기 쉽게 구성해야 한다.
	3.4(입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다.	3.4.1(레이블 제공)입력 서식에는 대응하는 레이블을 제공해야 한다.
		3.4.2(오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
4. 견고성(Robust)	4.1(문법 준수) 웹 콘텐츠는 마크업 언어의 문법을 준수 해야 한다.	4.1.1(마크업 오류 방지)마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
	4.2(웹 애플리케이션 접근성)웹 애플리케이션은 접근성이 있어야 한다.	4.2.1(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.