자바스크립트 정리 :: 자바스크립트 완벽가이드
제1부 코어 자바스크립트 - 자바스크립트 언어자체 1. 자바스크립트 소개 1.1 자바스크립트 코드의 문서내 삽입 1.1.1 < script type="text/javascript"> code here~~ </script> 1.1.2 < script type="text/javascript" src="외부 자바스크립트문서.js"></script> 1.1.3 이벤트 핸들러의 내용 2. 어휘구조 2.1 unicode 문자집합(문자하나당 16bit) - ASCII,Latin-1 (유니코드 문자 집합의 하위 집합) 2.2 대소문자 - 구분한다. 각종 키워드,변수,함수이름,그밖의 모든 식별자는 다 대소문자를 구분한다. 2.3 공백과 줄나눔 - 프로그램내 토큰 사이에 존재하는 모든 스페이스, 탭,줄바꿈등을 무시한다. 2.4 선택적인 세미콜론(;) - 일반적으로 대부분 프로그램언어에서 하나의 정의 문장이 끝나면 세미콜론으로 마무리한다. 하지만 자바스크립트는 선택적이다. 2.5 주석 (설명을 달거나 디버깅 용도로 사용) - // - 한줄 주석 - /* ~~~~ */ - 여러줄 주석 ******* html <!-- ...... --> css /* ......... */ 2.6 리터럴 - 리터럴은 프로그램에 직접 나타나는 데이터 값이다. - 12 //숫자 12 - "hello world~" //문자열 - true,false // 논리값 - null // 널값(객체가 존재하지 않음) 2.7 식별자 - 식별자로 사용할 수 있는 문자의 종류 => 프로그램내에서 특별한 구조적 의미를 가지는 단어 - 영어 알파벳 소문자 - 영어 알파벳 대문자 - 아라비아 숫자 - _(언더바) - $(달러) --- 잘 사용되지 않는다. -- 숫자만으로 이루어진 식별자는 사용할 수 없다. -- 숫자로 시작하는 식별자는 사용할 수 없다. 2.8 예약어 -- 자바스크립트에서 이미 예약되어 사용하고 있는 식별자(키워드) 3. 데이터 타입과 값 3.1 기본 데이터 - 숫자 ( 정수와 실수) - 일반적으로 연산 - 문자열 (쌍 따옴표나 홑 따옴표로 감싸져있는 문자의 집합) - 일반적으로 출력 - 논리값 (참과 거짓을 나타내는 값) - true / false - undefined -- 할당되지 않은 변수의 데이터 타입, 정의된적이 없는 객체의 프로퍼티 - null 3.2 복합데이터 - 객체 --> 자바스크립트는 느슨한 객체 지향적 언어이다. - 기본객체 - 이름 붙은 값들의 모음 - 함수 - 실행 가능한 자바스크립트 코드의 묶음 - 배열 - 순서가 있는 값들의 모음(객체의 특수한 형태) **** 자바스크립트에서 중요한 몇개의 이스케이프 문자들 \t => 탭문자 \n => 개행문자 \r => 라인피드 \" => 문자로서의 따옴표 \' => 문자로서의 홑 따옴표 4. 변수 - 어떠한 값과 연관된 이름(식별자) 4.1 변수의 타입 ==> 변수에 할당된 데이터 타입과 동일하다. 4.2 변수 선언 ==> 식별자 명명 규칙에 따라서 var 키워드를 사용하여 선언. 4.3 변수의 유효범위 ==> 일반적으로 변수는 선언된 문서 어디서든지 사용 가능 하지만 지역변수는 그렇지 않다. 자바스크립트는 블록 단위 유효 범위는 없다. - 전역변수 - 스크립트 태그 내에 직접 선언된 변수 - 지역변수 - 함수안에서 선언된 변수 *** 논리값으로 평가 되었을때 false 평가되는 값들 0 , null , undefined , "" , '' , NaN 위 열거된 이외의 값들은 true로 평가된다. 4.4 기본 타입과 참조 타입 5. 표현식과 연산자 5.1 표현식 -> 자바스크립트 인터프리터가 계산하여 값을 구할 수 있는 자바스크립트 구절 5.2 연산자 -> 특정 데이타 또는 특정 데이타를 담고 있는 변수들을 계산하는 특정 기호 또는 키워드 5.3 산술연산자 + : 덧셈 - :뺄셈 * :곱셈 / :나눗셈 % : 나머지 + : 단항플러스 - : 단항 마이너스 ++ : 증가 연산자 -- : 감소 연산자 5.4 동등 연산자 -> 결과값은 항상 논리값 == (동등) <-> != === (일치) <-> !== 5.5 관계연산자 5.5.1 비교 연산자 -> 결과값은 항상 논리값 > : 크다 < : 작다 >= : 크거나 같다 <= : 작거나 같다. 5.5.2 in 연산자 -> 어떤 객체가 어떠한 프로퍼티를 가지고있는가? 5.5.3 instanceof 연산자 5.6 문자열 연산자 + : 문자열 이어 붙이기 ** 숫자의 자동 형변환 주의** 5.7 논리 연산자 5.7.1 and (&& ) : 논리곱 5.7.2 or (||) : 논리합 5.7.3 not (!) : 논리 부정 5.8 비트 연산자(X) 5.9 할당 연산자 = 5.9.1 복합 할당 연산자 += -= *= /= %= 5.10 기타 연산자들 5.10.1 조건부 연산자(삼항 연산자) (논리값이거나 논리값으로 평가될 수 있는 표현식) ? 표현식1:표현식2 -> 논리 부분이 참이면 표현식1이 실행되어 반환 -> 논리 부분이 거짓이면 표현식2가 실행되어 반환 5.10.2 typeof 연산자 (단항 연산자) 5.10.3 객체 생성 연산자(new) 5.10.4 delete 연산자 5.10.5 배열(객체) 접근 또는 배열의 정의 => [] 5.10.6 . 객체 접근 연산자 6.문장 6.1 표현문 6.2 복합문 6.3 조건문(if) - 조건에 따라서 자바스크립트 특정문장을 실행 6.3.1 형식 - if(조건-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } - if(조건-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else { 위 조건이 거짓일 경우의 실행 영역.... } - if(조건1-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else if(조건2-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else if(조건3-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else if(조건4-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } ...... - if(조건1-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else if(조건2-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else if(조건3-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } else if(조건4-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일 경우의 실행 영역.... } ...... } else { 위의 조건들이 모두 거짓일 경우의 실행 영역... } 6.4 switch case break 문 -- 일치 조건문(===) ---------- 6.4.1 형식 switch(변수(표현식)) { case(값1): 변수와 값1이 일치할 경우 실행 영역.... break; case(값2): 변수와 값2가 일치할 경우 실행 영역.... break; case(값3): 변수와 값3이 일치할 경우 실행 영역.... break; ..................... default: 위 케이스중 하나도 일치하는경우가 없는 경우 실행 영역..... break; } 6.5 while 문 6.5.1 형식 while(조건-논리값이나 논리값으로 평가될수 있는 표현식,문장) { 위 조건이 참일경우 반복 영역..... } 6.6 do while 문 6.6.1 형식 do { 조건이 참일경우 반복 영역..... } while(조건-논리값이나 논리값으로 평가될수 있는 표현식,문장) 6.7 for 문 6.7.1 형식 for(초기값;조건식;증감식) { 위 조건이 참일 경우의 반복 영역..... } 6.8 for in 문 (객체 또는 배열 순회용) 6.8.1 형식 for( 변수 in 객체) { 반복 영역..... } 6.9 break /---- continue / label 6.10 function - 함수 ( 실행가능한 자바스크립트 코드의 모음(묶음)) => 자바스크립트는 함수도 데이터(객체)이다. 그러나 타입검사(typeof)를 시행하면 function 6.10.1 형식 - var 함수명=function([매개변수,....]) { } - function 함수명([매개변수,....]) { } - 매개변수는 해당 함수의 지역변수 6.10.2 유효범위 함수는 자기만의 동적 유효범위를 가진다. 6.10.3 return -함수 밖으로 값을 내보낼때 -이 문장을 만나게 되면 함수는 무조건 종료 7.객체와 배열 7.1 객체 : 이름이 붙은 값들의 집합 7.1 객체 생성하기 7.1.1 리터럴 사용 7.1.2 클래스(모조 클래스,객체 생성자 함수) 사용 7.1.3 프로퍼티 열거하기 7.2 배열 : 특별한 형태의 객체로서 숫자가 붙은 값들의 순서(0 부터) 있는 집합 - Array 클래스를 사용하여 배열 생성 - 배열 리터럴을 사용하여 배열 생성(내부적으로 Array 클래스 사용) 7.2.1 배열의 크기(방의 갯수) - length : 읽기 , 쓰기 7.2.2 다차원 배열 배열의 원소로 배열을 가지고 있는것 7.2.3 배열 메써드 - join(특정 구분자) : 배열의 원소를 꺼내서 특정구분자로 연결하여 문자열 반환 - reverse() : 배열안의 원소의 순서를 꺼꾸로 - 원본배열 변경 - sort() : 배열안의 원소를 오름차순 정렬 - 원본배열 변경 - concat() : 배열을 연결하여 반환 - slice(n,m) : 배열의 n번 인텍스 원소부터 m번 인덱스번호 전까지 잘라서 반환 - splice(i,n [추가 원소,....]) : 배열의 i번 인덱스부터 n개의 원소를 잘라내고 그 자리에 추가 원소를 추가 -- 원본배열 변경,잘라낸값 반환 - push() / pop() : 배열의 끝에 새로운 원소 삽입 / 배열의 마지막 원소를 잘라내기 - unshift() / shift() : 배열의 앞에 새로운 원소 삽입 / 배열의 처음 원소를 잘라내기 - toString() : 객체의 문자열 표현 7.2.4 배열과 유사한 객체 - 객체를 배열 처럼 선언하고 사용 하는것 8.함수 : 함수란 한번 정의해서 임의의 횟수에 걸쳐서 호출하여 실행될 수 있는 자바스크립트의 코드의 블록(모음)이다. 8.1 함수 정의와 호출 - 함수명(식별자) - 매개변수 목록 - 함수 몸체를 구성하는 자바스크립트 코드 - 호출은 함수명(매개변수에 할당될 값.....) 8.2 전달인자(매개변수) - arguments : 전달인자 목록을 가지고 있는 배열과 유사한 객체-함수 호출 시 자동 생성 -- callee 8.3 메써드로서의 함수 9.클래스 / 생성자 / 프로토타입 9.1 생성자 / 프로토타입 9.1.1 new 키워드 9.1.2 생성자 함수 9.1.3 this : 클래스를 통하여 생성될 객체를 지칭하는 키워드이다. 9.1.4 prototype : 클래스의 모든 인스턴스가 공유하는 객체생성자 함수안의 특별한 영역(프로퍼티) 9.1.5 생성자 함수 자체도 객체이기 때문에 자기 자신의 프로퍼티와 메써드를 가질 수 있다. 이들을 정적 속성,정적 메써드라 부른다. 9.1.6 생성자 함수에는 return 문이 없다. 9.2 내장형 타입의 확장 9.2.1 내장 클래스 - 기본형 변수의 래퍼 클래스: String,Number,Boolean - 일반 내장 클래스 : Date,Object,Array,... 9.3 객체 타입 판단하기 9.3.1 typeof - typeof "aaa" => string - typeof 100 => number - typeof true => boolean - typeof undefined => undefined - typeof function() {..} => function - typeof ["aa","bb"] => object - typeof null => object 9.3.2 instanceof : Boolean 9.3.3 모든 객체의 공통 프로퍼티인 constructor 10. 모듈과 네임 스페이스 11. 내장 클래스,내장 객체, 내장 함수 11.1 arguments[] - 함수의 전달인자를 담고 있는 배열과 유사한 객체 - callee - length 11.2 Array - 배열객체 생성자 함수 - length - concat() - join() - pop() - push() - unshift() - shift() - reverse() - slice() - splice() - sort() 11.3 Date - 날짜 객체 생성자 함수 11.3.1 전달인자 - 밀리초 ex) 5000 밀리초 -> 5초 - datestring -> 날짜형식의 문자열 - year,month(0~11),day,hours,minutes,seconds,ms ##time stamp / unix time 표준 시간으로 1970년 1월 1일 0시 0분 0초를 기준으로 해당 시점까지 흐른 시간 11.3.2 메써드 - getDate() : 일(day) 반환 - getDay() : 요일 반환 (0:일~6:토) - getFullYear() : 네자리 연도 반환 | getYear() - getHours() : 시 반환 - getMilliseconds() : 밀리초 반환 - getMilutes() : 분 반환 - getSeconds() : 초 반환 - getMonth() : 월 반환 ( 0:1월 ~ 11:12월 ) - getTime() : 타임스템프 값 반환(밀리초) - setDate() - setFullYear() - setHours() - setMilliseconds() - setMilutes() - setSeconds() - setMonth() - setTime() - toDateString() - toGMTString() - toLocaleDateString() - toLocaleString() - toString(); 11.4 encodeURI() <--> decodeURI() // 내장함수 11.5 encodeURIComponent() <--> decodeURIComponent() // 내장함수 : 문자열 인코딩 / 디코딩( 치환 ) 11.6 eval() // 내장함수 -> 자바스크립트 코드 형식의 문자열을 평가하여 반환 11.7 Function() // 함수 객체 생성자 함수 - arguments - apply() : 전달인자들의 배열을 함수 안으로 전달하면서 지정된 객체의 메써드로서 함수를 호출 - call() : 전달인자를 함수 안으로 전달하면서 지정된 객체의 메써드로서 함수를 호출 11.8 isNaN() // 내장 함수 is not a number? 11.9 Math() //객체 생성자 함수(객체를 생성하는 용도로 사용하지 않는다.) -> 정적 속성 / 메써드만 가진다. - Math.abs() - 절대값 --------------------------- - Math.ceil() - 올림 - Math.floor() - 내림 - Math.max() - 인자중 최대값 - Math.min() - 인자중 최소값 - Math.PI - 원주율 - Math.pow(x,y) - x의 y제곱 - Math.random() - 0과 1사이의 난수 발생 - Math.round() - 반올림 - Math.sqrt() - 제곱근 11.10 Number() // 숫자 객체 생성자 함수 -> 래퍼 클래스 - toFixed(n) - 소수점 밑 자리수 n으로 변경 - toExponential(n) - 지수 표기법 11.11 Object() // 빈 객체 생성자 함수 11.12 parseFloat() / parseInt() : 내장함수 -> NaN 11.13 String() // 문자객체 생성자 함수 - length : 글자 갯수 반환 - charAt(n) : n은 인덱스번호이다. n번 인덱스에 있는 문자 반환 - charCodeAt(n) : n은 인덱스번호이다. n번 인덱스에 있는 문자코드 반환 - concat() : 문자열 병합 - indexOf(c) : c는 문자 또는 문자열이다. c 문자의 인덱스번호를 앞에서 부터 찾는다. - lastIndexOf(c) :c는 문자 또는 문자열이다. c 문자의 인덱스번호를 뒤에서 부터 찾는다. - match() : 정규표현식을 이용 문자열 검색 - replace() : 문자열 검색후 교체 - 정규표현식 사용 가능 - search() : 문자열 검색후 위치 반환- 못찾는 경우 -1 반환 ** 부분 문자열 추출** - slice(from,to) : from -> 정수, to -> 정수 : form 인덱스번호부터 to 인덱스번호 전까지 - substr(start [,length]) : start -> 정수, length -> 0 이상의 정수 - substring(from,to) : from-> 0 이상의 정수 , to-> 0 이상의 정수 : form 인덱스번호부터 to 인덱스번호 전까지 - split(delimiter[,limit]) : delimiter를 구분자로 limit 개수만큼 분리하여 배열로 반환 - toLowerCase() - toUpperCase() ** 정적메써드 String.fromCharCode() 제2부 클리이언트 측 자바스크립트 - 브라우저 컨트롤 13.웹 브라우저와 자바스크립트 13.1 window 객체 // 내장 객체 : 브라우저를 지칭한다. 자바스크립트의 전역실행 컨텍스트로서 자바스크립트는 window 객체를 실행 환경으로 한다. 13.2 BOM - Brower Object Model : 브라우저 컨트롤과 기본적인 문서 컨트롤 13.3 HTML 의 기본적인 이벤트 처리기(이벤트 핸들러) -> 메써드(몸체가 구현되지않은) -> html 태그의 자바스크립트 관련 어트리뷰트 - onclick - onmousedown / onmouseup - onmouseover / onmouseout - onchange -> select , input type="text" - onload - body (window) 14. 브라우저 창 스크립팅(BOM) 14.1 타이머 - 일반적으로 애니메이션에 사용이 된다. (브라우저에서의 모든 애니메이션은 타이머를 이용한다.) - window.setTimeout(code,delay) <-> window.clearTimeout(timerObj) code : 문자열 형식의 자바스크립트 코드 delay : 지체시간(밀리초 단위) - window.setInterval(code,interval) <-> window.clearInterval(timerObj) code : 문자열 형식의 자바스크립트 코드 interval : 간격(밀리초 단위) 14.2 Location / History 14.2.1 Location - href : 전체 주소 ( read / write ) - host : 도메인 또는 아이피 - hostname : 호스트명 - protocol : 통신 규약 ( http or ftp .... ) - hash : 책갈피명 - search : query string ( get 방식의 서버전달 문자열) - port : 포트번호 - pathname : 도메민을 제외한 문서 까지의 경로 - reload() : 현재 페이지 다시 로딩 - 새로고침 ---- - replace() : 현재 주소 교체 ##다른페이지로 이동 - window.location.href='이동할 주소' - window.location.replace('이동할 주소') : 기록을 남기지 않는다. 14.2.2 History - forward() - back() - go(n) : n -> -1 뒤로 n-> -2 뒤로 두번 n-> 2 14.3 창 화면 브라우저에 대한 정보 얻기( window,screen,navigator) 14.3.1 창 위치 -- 표준 브라우저 -- window.screenX window.screenY -- IE -- (뷰포트의 좌표) window.screenLeft window.screenTop 14.3.2 뷰포트의 크기 --- 표준 브라우저 --- window.innerWidth window.innerHeight --- IE(DOCTYPE 존재) document.documentElement.clientWidth document.documentElement.clientHeight 14.4 Screen 객체 - width - height -availWidth -availHeight 14.5 Navigator - 브라우저 정보를 가지고 있는 객체 -------------------------------------- 14.6 창열고 조작하기(popup 창) 14.6.1 window.open(url,name,features) 반환값은 전달인자의 name값에 따라서 새로 생성된 창에대한 참조거나 기존 창의 참조이다. - url : 열린 창에 띄워질 문서의 주소 - name : 창의 이름으로 알파벳,숫자,언더바를 포함한 문자열이며 생략 가능하다. 이렇게 만들어진 이름은 a 태그나 form 태그의 target 속성의 값으로 쓰일 수 있다. - features height : 숫자값 width : 숫자값 left : 숫자값 top : 숫자값 menubar : yes / no location : yes / no ---- X resizable : yes / no ---- X scrollbars : yes / no status : yes / no ---- X 14.6.2 window.close() - 모창 또는 팝업창에따라서 동작을 다르게 한다. *** 팝업창을 닫으면 팝업창의 window object 가 사라지는 것이 아니고 팝업창의 window객체의 closed 속성에 true 가 할당이 된다. 14.6.3 window 객체의 고수준 이벤트 메써드 focus() / blur() ***모창에서의 팝업창 제어는 window.open() 메서드의 반환값을 사용하면된다. 팝업창에서의 모창제어는 팝업창 window객체의 opener 프로퍼티를 사용하면 된다. 팝업창의 opener 프로퍼티는 모창의 참조를 가지고 있다. 14.7 간단한 대화상자 14.7.1 window.alert(message) -> 반환값이 없다 14.7.2 window.confirm(message) -> 반환값은 논리값이다. 14.7.3 window.prompt(title,default value) -> null / 입력문자열 14.8 다중창과 프레임 14.8.1 window.frames 배열과 유사한 객체 15.문서 스크립팅 15.1 레거시 DOM / Level 0 DOM (BOM) - 각 오브젝트를 name 값으로 접근 가능( frame,form,img,폼의 하위 엘리먼트들) 15.1.1 window.document - open() - write() - clear() - close() - bgColor - cookie ----- - domain - lastModified - referrer - title - URL 15.1.2 레거시 window.document의 하위 객체 집합 - anchors[] - forms[] - elements[] - images[] - links[] ** a 태그(책갈피,링크)는 name 값으로 접근 못한다. ** html 엘리먼트의 어트리뷰트에 해당하는 자바스크립트 해당 엘리면트의 객체의 프로퍼티가 존재한다. 읽고 쓸수 있다. 15.2 DOM(w3c DOM , DOM Level 1 ,DOM Level2) 15.2.1 노드 : 모든 html 문서는 노드들로 이루어져 있다. ** nodeType -> 노드타입에 관련된 숫자 값 1 : 엘리먼트 노드 2 : 속성 노드 3 : 텍스트 노드 9 : 도큐먼트 노드 11 : 도큐먼트 프래그먼트 노드 15.2.2 document.documentElement : 문서의 최상위 엘리먼트 객체 참조 html 문서인 경우에는 html 요소를 참조한다. 15.2.3 document.body : 문서의 body 엘리먼트 객체 참조 15.2.4 어트리뷰트 getAttribute(),setAttribute(),removeAttribute() -> html 엘리먼트(DOM 객체)의 메써드 15.2.5 문서내 엘리먼트 찾기 -> - getElementsByTagName('태그명') -> html collection(배열과 유사한 객체) 반환 document 나 엘리먼트객체의 메써드 ------------------------ - getElementById('아이디값') -> 엘리먼트 객체 반환 document 의 메써드 15.2.6 자식노드 배열(컬렉션) - childNodes : 도큐먼트노드나 엘리먼트 노드의 자식 노드의 컬렉션 IE와 표준 브라우저간의 개행문자로 인한 차이가 있을 수 있다. 15.2.7 각종 노드의 프로퍼티--주로 엘리먼트노드(도큐먼트) - nodeName : 객체명,엘리먼트 노드인 경우 노드명(태그명)을 대문자로 반환 -> tagName 텍스트 노드인 경우에는 #text - nodeValue : 객체의 값(주로 텍스트 노드) -- 엘리먼트 노드인 경우 null 값을 가진다. -- 텍스트 노드인 경우 해당 텍스트 값을 가진다. - nodeType : 숫자로 표현되는 노드의 종류 - parentNode : 현 노드의 부모 노드 - childNodes : 자식 노드의 노드 리스트(배열과 유사한 객체,컬렉션) - firstChild : 첫번째 자식 노드 - lastChild : 마지막 자식노드 - previousSibling : 이전 노드 - 형 - nextSilbing : 다음 노드 - 동생 - data : 텍스트 노드의 값 -- 텍스트 노드의 값만을 참조 가능 15.2.7 각종 노드의 메써드 - getElementById(id) -> document - getElementsByTagName(tagNme) -> document / element - getAttribute(name) -> element - setAttribute(name,value) -> element - removeAttribute(name) -> element - getAttributeNode(name) - setAttributeNode(attr) - removeAttributeNode(attr) - hasAttribute(name) -> 반환값은 논리값 15.2.8 자식 트리변경 - 엘리먼트 - insertBefore(newChild,refChild) : 기존 자식 앞에 새로운 자식노드 추가 - replaceChild(newChild,oldChild) : 기존 자식을 새 자식으로 교체 - removeChild(oldChild) : 기존 자식 제거 - appendChild(newChild) : 새로운 자식 추가(막내) 15.2.9 새로운 노드 생성 - document.createElement(tagName) -> element 노드(객체) 생성 반환 - document.createTextNode(data) -> 텍스트 노드(객체) 생성 반환 - document.createAttribute(name) -> 엘리먼트의 속성노드(객체) 반환 - cloneNode(deep) : deep은 불리언 값을 가지며 자식노드까지 복제할것인지를 결정한다. 15.2.10 insertAfter 응용함수 function insertAfter(newElement,targetElement) { var parent=targetElement.parentNode; if(parent.lastChild==targetElement) { parent.appendChild(newElement); } else { var nextEle=targetElement.nextSibling; parent.insertBefore(newElement,nextEle); } } 15.2.11 documentFragment - document.createDocumentFragment() 15.2.12 innerHTML (일기 쓰기 ) / innerText(IE 전용) 16. CSS 와 DHTML 16.1 엘리먼트의 style 프로퍼티 - 인라인 스타일 16.2 className / setAttribute(클래스명) - IE6,IE7 ele.className / setAttribute("className","someValue") - IE8 ele.className / setAttribute("class","someValue") - 표준 ele.className / setAttribute("class","someValue"); => 크로스 브라우징은 ele.hasAttribute를 이용하여 (IE6,IE7 undefined) 16.3 엘리먼트의 위치와 크기 16.3.1 offsetLeft / offsetTop 16.3.2 offsetWidth / offsetHeight 16.3.3 offsetParent 16.4 불투명도 조정 css-> opacity:0~1 (표준); filter:alpha(opacity=0 ~ 100) (IE) 17. 이벤트와 이벤트 처리 17.1 기본 이벤트 모델 - html 이벤트 어트리뷰트나 자바스크립트 이벤트 함수 ex) < ..... onclick="code...." /> / element.onclick=funciton() {....} abort -- 이미지 로드가 중단 되었을때 -- img blur -- 객체가 포커스를 잃었을때 -- window, 폼의 엘리먼트 focus -- 객체가 포커스를 얻었을대 -- window, 폼의 엘리먼트 change -- 값이 변한경우 -- input (text,password), select click -- 마우스로 클릭한경우 -- 대부분의 엘리먼트 dblclick -- 마우스로 더불클릭한경우 -- 대부분의 엘리먼트 error -- 문서자체나 이미지 로딩중 오류가 발생한 경우 -- 웹문서,img ---------------------------------- keydown -- 키보드의 키를 누른경우 (document,form element) keypress -- 키보드의 키를 눌렀다가 뗀경우 (document,form element) keyup -- 키보드의 키를 누른상태에서 뗀경우 (document,form element) load -- 브라우저에 문서의 로딩이 끝난경우 -- window (body) unload -- 브라우저에 로딩되어 있는 페이지에서 빠져 나갈때 -- window(body) mousedown -- 마우스 버튼을 누른경우 -- 대부분의 엘리먼트 mouseup -- 마우스 버튼을 뗀경우 -- 대부분의 엘리먼트 mouseover -- 마우스를 엘리먼트 위로 움직인경우 -- 대부분의 엘리먼트 mouseout -- 마우스를 엘리먼트 밖으로 움직인경우 -- 대부분의 엘리먼트 mousemove -- 마우스를 엘리먼트 위에서 움직이는경우- 대부분의 엘리먼트 reset -- 폼의 초기화 요구가 발생한경우 -- 폼 submit -- 폼의 전송 요구가 발생한 경우 -- 폼 resize -- 창의 크기기 변경 되었을 경우 -- window,frame select -- 텍스트를 선택하였을때 - input (text,password), textarea scroll -- 스크롤할때 -- 스크롤바가 생길수 있는 엘리먼트 ====> 위 이벤트에 관련된 html 엘리먼트의 어트리뷰트 -> onclick,onabort,...... 위 이벤트에 관련된 html 엘리먼트 객체의 메써드 -> onclick,onabort,...... **** 기본 이벤트의 처리 단계(전파) **** 기본 적으로 버블 단계에서 이벤트 처리를 한다. **** 이벤트 객체 ***** - 발생한 이벤트에 관련된 정보를 가지고 있는 객체 - 표준 브라우저에서는 이벤트 처리함수의 인자로 전달 - IE 에서는 window.event 객체에 담겨지게 된다. **** 표준 이벤트 모델의 이벤트 처리단계 -- 캡춰 단계 -- 대상 단계 -- 버블 단계 17.2 표준 이벤트 모델 - 이벤트 등록 메써드 사용 -> addEventListener() 17.2.1 addEventListener(이벤트명,처리함수,이벤트 처리 단계) - 이벤트명 : click,submit,.... 이런 이벤트명을 문자열로 전달 - 처리함수 : 해당 이벤트가 발생했을때 실행할 자바스크립트 함수 해당 엘리먼트의 메써드로 등록된다. - 이벤트 처리단계 : true : 포착단계처리 false: 거품단계처리 대상단계는 무조건 처리 **** 표준 이벤트 객체 프로퍼티 / 메써드 - type : 이벤트 명 - target : 이벤트가 발생한 노드 (currentTarget과 같지 않을 수 있다.) - currentTarget:이벤트가 현재 처리되고있는 노드 - eventPhase : 전파단계정보 1-> 포착(capture), 2 -> 대상(target) 3 -> 거품(bubble) - bubbles : 버블링되는 이벤트인지 나타내는 논리값 - cancelable : 이벤트의 기본행동 취소 가능 여부 논리값 : link - click, form - submit, form - reset - clientX / clientY : 문서내 좌표 - screenX / screenY : 모니터상의 좌표 - relatedTarget : mouseover / mouseout 이벤트에 관련된 프로퍼티 로서 관계엘리먼트를 나타낸다. - stopPropagation() - 전파 중지 - preventDefault() - 기본행동 중지 17.3 IE 전용 이벤트 모델 - 이벤트 등록 메써드 사용 -> attachEvent() 17.3.1 attachEvent(이벤트명,이벤트처리함수) - 이벤트명 -> on+실제이벤트명 ex) click -> onclick - 이벤트객체는 이벤트처리함수의 인자로 전달 되는것이 아니고 window.event 프로퍼티에 할당된다. ****IE Event 객체 **** - type : 이벤트명 ( 표준과 동일) - srcElement : 이벤트가 발생한 문서 엘리먼트(표준에서의 target) - clientX,clientY : 이벤트가 발생한 지점의 문서상의 좌표(표준과 동일) - offsetX,offsetY : 이벤트가 발생한 지점의 엘리먼트 상의 좌표 (표준에는 없다) - fromElement(mouseover),toElement(mouseout) : 마우스오버나 마우스아웃 이벤트에 관련된 엘리먼트를 나타낸다. (표준에서의 relatedTarget과 호관) - cancelBubble - true값을 할당하게 되면 이벤트 버블링이 중지된다. (표준에서의 stopPropagation() 메써드와 호환) - returnValue- false값을 할당하게되면 해당 엘리먼트의 기본행동이 중지 된다. (표준에서의 preventDefault()) 17.4 이벤트 처리기 제거 - removeEventListener() -> 표준 - detachEvent() -> IE 17.5 기본이벤트 모델에서의 이벤트 객체 17.6 - 이벤트 처리기 등록 -> addEvent() - 실제 이벤트가 발행한 엘리먼트 -> getTarget() - 이벤트가 처리되고 있는 노드 -> 이벤트 처리함수의 두번째 인자로 전달된다. - 관계 엘리먼트 -> getRelatedTarget() - 버블링 중지 ->stopBubbling() - 기본 행동취소 -> stopDefaultAction() 18. 폼과 폼 엘리먼트 18.1 폼의 유효성 검사 18.1.1 필수 입력사항 검사 -> text ,password,textarea - value 프로퍼티 값 존재 여부 18.1.2 필수 선택사항 검사 -> radio,checkbox,select-option - radio / checkbox - nodeList -> 배열과 유사한 객체 - length -> 숫자 - checked -> 논리값 - select --------------------------- - selectedIndex - 선택되어 있는 옵션 번호 - read and write 18.1.3 입력값의 유효성 검사 -> text ,password,textarea 18.1.4 파일 컨트롤 유효성검사 - value -> 파일 자체 유효성 검사는 할 수 없다. 18.2 기타 폼 엘리먼트의 조작 18.2.1 radio / checkbox - length - 읽기만 가능 - checked : boolean - disabled : boolean 18.2.2 text / password / textarea - readOnly : boolen - disabled : boolean 18.2.3 select - selectedIndex - read , write - options : 옵션리스트(Collection) - length - 읽기 ,쓰기 18.2.4 option - value - text - selected : boolean 19. 쿠키 - 클라이언트측 지속성 19.1 window.document.cookie 19.2 쿠키값 설정 - document.cookie="쿠키변수=쿠키값; expires=만료일; path=경로; domain=도메인; secure=논리값" - 쿠키값은 기본형 데이터만 사용하여야 한다.(문자,숫자) - 만료일은 GMT 형식의 날짜 문자열 사용 - 경로는 쿠키값 유효 경로 - 도메인은 부속도메인과 본 도메인이 쿠키값을 공유하고한다면 본도메인 값으로 설정 - secure 값을 true로 설정하면 https 프로토콜을 사용한다는 의미이다. 20. HTTP 스크립팅( AJAX - Asynchronous Javascript And XML) 20.1 요청객체 얻어내기 20.1.1 표준 브라우저 - XMLHttpRequest() 20.1.2 .IE - ActiveXObject("Msxml2.XMLHTTP") -> IE6 부터 - ActiveXObject("Microsoft.XMLHTTP") -> IE6 이전 20.2 요청객체 열어서 준비 시키기 20.2.1 요청객체의 open(method,url,동기 비동기여부) - method -> get , post - url -> 요청문서 - 동기 비동기 여부 : true:비동기,false:동기 20.2.2 메써드별 전송 데이타의 위치 get : 데이타는 url에 queryString으로 붙는다 post : send 메써드의 인자로 전달이 된다. 20.3 서버에 요청하기 20.2.2 요청객체의 send(null or data) 메써드 호출 20.4 요청객체의 상태(readyState)프로퍼티 값 0 : 요청객체를 만들기만 했을때 1 : open() 메써드만 호출 된 상태 2 : send() 메써드만 호출 되었지만 서버로 부터 응답을 받기전 3 : 서버로 부터 데이터를 받고 있는중 4 : 서버로 부터의 응답이 완료된 상태 => 요청객체의 readyState 값이 변경이 될때 readystatechange 이벤트 발생 => onreadystatechange 20.5 요청객체의 status 프로퍼티 값 ( 서버로부터의 응답완료시의 상태) 200 : 정상적인 응답 401 : 권한이 없음 404 : 페이지를 찾을 수 없음 .... 20.6 성공적으로 요청이 완료되었을 경우 응답 데이타의 사용 - 요청객체의 responseText 프로퍼티 사용 - text - 요청객체의 responseXML 프로퍼티 사용 - xml 문서 오브젝트 20.7 응답 데이타의 응용 - text ( json )
출처 자료
자바스크립트 가이드
반응형
반응형