- 자바스크립트 코드의 문서내 삽입
1.1
< script type="text/javascript">
code here~~
</script>
1.2
< script type="text/javascript" src="외부 자바스크립트문서.js"></script>
1.3
이벤트 핸들러의 내용 - 어휘구조
2.1 unicode 문자집합(문자하나당 16bit)
ASCII,Latin-1 (유니코드 문자 집합의 하위 집합)
2.2 대소문자 - 구분
각종 키워드,변수,함수이름,그밖의 모든 식별자는 다 대소문자를 구분한다.
2.3 공백과 줄나눔
프로그램내 토큰 사이에 존재하는 모든 스페이스, 탭,줄바꿈등을 무시한다.
2.4 선택적인 세미콜론(;)
일반적인 프로그램언어에서 하나의 정의 문장이 끝나면 세미콜론으로 마무리, JS는 선택적.
2.5 주석 (설명, 디버깅 용도)
-// - 한줄 주석
-/* ~~~~ */ - 여러줄 주석
----
-html <!-- ...... -->
-css /* ......... */
2.6 리터럴 - 리터럴은 프로그램에 직접 나타나는 데이터 값이다.
-12 //숫자 12
-"hello world~" //문자열
-true,false // 논리값
-null // 널값(객체가 존재하지 않음)
2.7 식별자로 사용할 수 있는 문자의 종류 => 프로그램내에서 특별한 구조적 의미를 가지는 단어
-영어 알파벳 소문자
-영어 알파벳 대문자
-아라비아 숫자
-_(언더바)
-$(달러) -- 잘 사용되지 않는다.
-- 숫자만으로 이루어진 식별자는 사용X.
-- 숫자로 시작하는 식별자는 사용X
2.8 예약어 -- 자바스크립트에서 이미 예약되어 사용하고 있는 식별자(키워드) - 데이터 타입과 값
3.1 기본 데이터
- 숫자 ( 정수와 실수) - 일반적으로 연산
- 문자열 (쌍 따옴표나 홑 따옴표로 감싸져있는 문자의 집합) - 일반적으로 출력
- 논리값 (참과 거짓을 나타내는 값) - true / false
- undefined -- 할당되지 않은 변수의 데이터 타입, 정의된적이 없는 객체의 프로퍼티
- null
3.2 복합데이터
- 객체 => 자바스크립트는 느슨한 객체 지향적 언어이다. => { }
- 기본객체 - 이름 붙은 값들의 모음
- 함수 - 실행 가능한 자바스크립트 코드의 묶음
- 배열 - 순서가 있는 값들의 모음(객체의 특수한 형태) => [ ]
**** 자바스크립트에서 중요한 몇개의 이스케이프 문자들
\t => 탭문자
\n => 개행문자
\r => 라인피드
\" => 문자로서의 따옴표
\' => 문자로서의 홑 따옴표 - 변수 - 어떠한 값과 연관된 이름(식별자)
4.1 변수의 타입 ==> 변수에 할당된 데이터 타입과 동일하다.
4.2 변수 선언 ==> 식별자 명명 규칙에 따라서 let 키워드를 사용하여 선언.
4.3 변수의 유효범위 ==> 일반적으로 변수는 선언된 문서 어디서든지 사용 가능하지만 지역변수는 그렇지 않다.
자바스크립트는 블록 단위 유효 범위는 없다.
- 전역변수 - 스크립트 태그 내에 직접 선언된 변수
- 지역변수 - 함수안에서 선언된 변수
*** 논리값으로 평가 되었을때 false 평가되는 값들 0 , null , undefined , " " , '' , NaN
위 열거된 이외의 값들은 true로 평가된다.
4.4 기본 타입과 참조 타입
- 표현식과 연산자
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 논리 연산자
and (&& ) : 논리곱
or (||) : 논리합
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 .(dot)객체 접근 연산자 - 문장
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 - 함수 ( 실행가능한 자바스크립트 코드의 모음(묶음))
=> JS는 함수도 데이터(객체)이다. 그러나 타입검사(typeof)를 시행하면 function
6.10.1 형식
-
function 함수명(매개변수,....) {
//함수내용
}
-
const 함수명 = function( 매개변수,... ) {
//함수내용
}
=> 매개변수는 해당 함수의 지역변수
6.10.2 유효범위
함수는 자기만의 동적 유효범위를 가진다.
6.10.3 return
-함수 밖으로 값을 내보낼때
-이 문장을 만나게 되면 함수는 무조건 종료 - 객체{ }와 배열[ ]
객체 정의 : 이름이 붙은 값들의 집합
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.1 함수 정의와 호출
- 함수명(식별자)
- 매개변수 목록
- 함수 몸체를 구성하는 자바스크립트 코드
- 호출
함수명(매개변수에 할당될 값.....)
8.2 전달인자(매개변수)
- arguments : 전달인자 목록을 가지고 있는
배열과 유사한 객체-함수 호출 시 자동 생성
-- callee
8.3 메써드로서의 함수 - 클래스 / 생성자 / 프로토타입
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 - 모듈과 네임 스페이스
- 내장 클래스,내장 객체, 내장 함수
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()
클라이언트 측 자바스크립트 - 브라우저 컨트롤
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 )
출처: https://janesm.tistory.com/entry/개념정리-자바스크립트-용어-정리 [Practice Makes Perfect!:티스토리]
'codingStudy' 카테고리의 다른 글
| REST API란 (0) | 2024.10.20 |
|---|---|
| SSR 이란? (1) | 2024.10.04 |
| SPA 란? (2) | 2024.10.02 |
| API란? (0) | 2024.01.28 |