** BOM(Browser Object Mode)
1. Math
2. Date
3. Array
4. JSON 객체
5. window 객체
6. screen 객체
7. location 객체
8. navigator 객체
9. history
** DOM(Document Object Model)
1. document
2. 이벤트 처리
3. 이벤트 종류
* BOM(Browser Object Model)
- 자바스크립트가 제공하는 객체
1. Math
- 모든 멤버가 전부 정적(static) 멤버
- 별도의 객체를 생성하지 않고 Mate를 이용해서 모든 멤버에 접근
2. Date
- 날짜와 관련된 객체
3. Array
- 배열 객체
- 배열에서 가장 중요한 것은 생성, 전체 데이터 접근, 정렬이다.
1) 생성 방법
[데이터 나열] : 처음부터 데이터가 존재하는 경우
new Array(개수) : 처음에는 데이터가 없고 나중에 데이터가 만들어지는 경우
2) 데이터 접근
- 전체를 읽기
for(인덱스 변수 in 배열){
배열[인덱스 변수]
}
- 하나씩 읽기
length 속성 : 데이터 개수
배열[인덱스] -> 여기서의 인덱스는 0부터 데이터 개수 - 1까지
3) 자바스크립트에서는 배열에 toString 메서드가 재정의 되어 있어서 요소 각각의 toString을 호출해서 [ ]로 묶어서 리턴해준다.
4) 데이터 정렬
- sort 메서드를 이용
- 정렬은 오름차순이 기본
- 자바스크립트는 숫자 데이터도 문자열로 변환해서 정렬
- 크기 비교를 할 수 없거나 다른 방식의 정렬을 원하면 sort에 크기 비교를 위한 함수를 만들어주어야 한다.
- 크기 비교하는 함수는 매개변수가 2개이고 정수를 리턴해줘야 한다.
- 양수가 리턴되면 2개의 데이터의 자리를 바꾸고 0이나 음수가 리턴되면 2개의 자리를 바꾸지 않는다.
- 자바스크립트는 문자도 부등호를 이용해서 크기 비교를 할 수 있다.
- 문자열 데이터 정렬은 바로 정렬되지만 숫자 데이터는 크기 비교한 후 정렬하여야 한다.
5) Map-Reduce Programming
- 분산된 데이터 처리 시스템에서 데이터를 모아서 처리하지 않고 데이터가 있는 곳에서 처리를 한 후 결과를 모으는 방식
- 최근에 Edge Computing {데이터가 발생한 곳에서 처리 - 스마트 폰에서 보안이 필요한 데이터(생체 인식 데이터)를 서버로 보내서 처리하지 말고 발생한 곳에서 바로 처리}과 많이 등장하는 용어 중의 하나이다.
- 이 프로그래밍을 위해서 공통으로 사용되는 함수가 map, filter, reduce이다.
- map은 데이터를 변환해서 모아주는 함수, filter는 조건에 맞는 데이터만 골라내는 함수, reduce는 연산을 수행해서 결과를 리턴하는 함수이다.
- map은 하나의 매개변수를 받아서 리턴하는 함수를 대입해줘야 한다.
- filter는 하나의 매개변수를 받아서 Boolean을 리턴하는 함수를 대입해줘야 한다.
- 자바스크립트는 매개변수를 2개를 추가하는데 두 번째 매개변수가 인덱스이고 세 번째 매개변수는 배열 자신을 저장한다.
4. JSON 객체
- JSON 문자열과 데이터 파싱을 위해서 추가된 객체
- JSON(Java Script Object Notation) : 자바스크립트 표현 방식으로 데이터를 표현하는 표준 포맷으로 현재 가장 많이 사용되는 포맷
- 배열은 [ ] 안에 객체는 { } 안에 속성:값의 형식으로 작성
- JSON.parse(문자열) : JSON으로 표현된 문자열을 자바스크립트 데이터 타입으로 변환을 해 준다.
- 이 메소드는 ajax에서 많이 사용
- JSON.stringify(자바스크립트의 데이터) : 데이터를 JSON 문자열로 만들어서 리턴
5. window 객체
- 웹 브라우저 및 프레임을 표시하기 위한 객체
- 이 객체의 멤버는 window. 을 생략하고 사용 가능
- 많이 사용하는 속성과 메소드
- location : 현재 URL을 저장하고 있는데 이 속성에 다른 URL을 대입하면 그 URL로 이동
- open(url, 윈도우 이름, 옵션, history 저장 여부) : 팝업 창을 만들어주는 메소드
- 타이머 관련 메소드
- setTimeout(함수, 시간) - 시간 후에 함수를 1번 수행
- setInterval(함수, 시간) - 시간마다 함수를 수행
- clearTimeout(타이머 이름), clearInterval(타이머 이름) : 타이머를 중지
- 윈도우 창 관련 메소드
- moveBy(x, y), MoveTo(x, y) : 좌표로 브라우저를 옮김
- resizeBy(width, height), resizeTo(width, height) : 브라우저의 크기 변경
- scrollBy(x, y), scrollTo(x, y) : 스크롤을 변경
- By는 현재 위치나 크기를 기준으로 변경을 하고 To는 현재 위치나 크기와 상관없이 변경
- close() : 창을 닫는 메소드
6. screen 객체
- 화면에 대한 정보를 가진 객체
- width, height : 웹 브라우저의 스크린 너비와 높이
7. location 객체
- URL에 대한 정보를 가진 객체
- href : 현재 보여지는 페이지의 url을 리턴하고 이 속성에 url을 대입하면 url로 이동을 한다.
8. navigator 객체
- 웹 브라우저에 대한 정보 및 버전과 시스템 등의 정보를 가진 객체
- userAgent : 웹 브라우저의 정보와 플랫폼 정보를 리턴
- userAgent 정보를 이용해서 스마트 폰에서 접속하면 모바일 페이지로 보내고 스마트폰이 아닌 곳에서 접속하면 일반 페이지로 접속을 하도록 만든다.
- userAgent 속성 안에 스마트 폰 운영체제 이름이 있는지 확인해서 작업
- 아이폰은 iPhone, 아이패드는 iPad, 아이팟 iPod, 안드로이드는 Android
9. history
- 방문했던 URL에 대한 정보를 저장한 객체
- back() : 뒤로 버튼을 누른 것처럼 한 페이지 뒤로 이동
- forward() : 앞으로 버튼을 누른 것처럼 한 페이지 뒤로 이동
- go() : URL이나 인덱스를 사용해서 인덱스번째 또는 URL로 이동
* DOM
- Document Object Model
- body 태그 내의 모든 객체를 DOM이라고 한다.
1. document
- body : body 태그에 해당하는 객체
- cookie : 쿠키 파일에 기술할 정보를 설정할 수 있는 속성
- 서버로 데이터를 전송하고 클라이언트에서 사용할 수 있는 데이터를 쿠키라고 한다.
- 모든 DOM 객체에게 상속되는 속성
- innerHTML : 태그와 태그 사이의 문자열 <h1>제목</h1>에서 제목이 innerHTML이다.
- value : 입력도구들에서 입력된 값
- style : 스타일 속성으로 style.속성 = 값을 설정하면 스타일을 적용할 수 있다.
- 값은 전부 문자열의 형태로 설정
- refferer : 이 페이지에 어떻게 접속했는지를 저장하고 있는 속성
- getElementById(id) : id를 가진 객체의 참조를 리턴한다.
- id를 가진 객체(태그)가 로드(메모리 할당)되고 난 이후에 사용해야 한다.
2. 이벤트 처리
- event : 사용자 또는 애플리케이션이 발생시키는 사건
- event가 발생했을 때 코드를 수행하도록 하는 것을 event handling이라고 하고 수행되는 코드를 가지고 있는 함수나 인스턴스를 event handler라고 한다.
1) 이벤트 처리 방법
- 인라인 처리 - 태그 안에서 처리
<태그 이벤트 이름 = "script:처리 코드"></태그>
script : 생략 가능
- 고전적 이벤트 처리
DOM객체.이벤트이름 = function(event객체이름)(이벤트 처리 내용);
- 표준 이벤트 모델 - 권장
DOM객체.addEventListener("이벤트이름", function(event객체이름){
이벤트 처리 내용;
});
2) 이벤트 처리 메소드에서 this
- 이벤트 처리 메소드 안에서 this는 이벤트가 발생한 객체이다.
- this를 이용해서 속성을 조작하면 이벤트가 발생한 객체의 속성이 변경된다.
3) event 객체
- 발생한 이벤트에 대한 정보를 가진 객체
- 이 객체는 IE와 다른 브라우저가 가져오는 방법이 다르다.
var 변수명 = 이벤트 처리 함수의 매개변수 || window.event
- 일반적인 브라우저에서는 이벤트 처리 함수의 매개변수가 event 객체가 되고 IE에서는 window.event가 event 객체이다.
- 프로퍼티
- data : 드래그 앤 드랍이 발생할 때 드랍된 객체의 URL
- modifier : 같이 누른 조합키(shift, alt, control) 정보
- x, y : 이벤트가 발생한 좌표
- which : 이벤트가 발생한 키보드 값
- target : 이벤트가 전달된 객체를 문자열로 저장
4) eventtrigget
- 데이터베이스에서는 데이터의 삽입이나 삭제 또는 갱신을 하기 전이나 한 후에 수행할 동작을 만드는 개체
- 강제로 다른 객체의 이벤트를 발생시키는 것
이벤트객체.on이벤트() -> 고전적 이벤트 모델을 사용한 경우
이벤트객체.이벤트() -> 표준 이벤트 모델을 사용한 경우
5) default event
- 이벤트 처리를 하지 않아도 가지고 있는 기본적인 이벤트 처리 코드
- a 태그는 아무런 코드를 작성하지 않아도 href 속성에 설정된 URL로 이동
- submit : form 안에 존재하면 form의 데이터를 action으로 전송
- reset : form 안에 존재하면 form의 내용을 모두 삭제
- button 태그 : form 안에 존재하면 form의 내용을 모두 삭제
- keydown : 누른 키보드의 값을 input 상자에 출력
- 이벤트 처리 중에 기본 이벤트를 제거하고 싶을 때는 event 객체.preventDefault()를 호출하거나 false를 리턴하면 된다.
6) event bubbling
- 부모에 이벤트 처리 내용이 있고 포함된 자식에 동일한 이벤트를 처리하는 내용이 있을 때 자식에 이벤트가 발생하면 자식의 이벤트 처리 내용을 수행하고 부모에게도 이벤트를 전달해서 부모의 이벤트 처리 내용도 수행하는 것
- 이벤트 버블링을 막고자 하는 경우에는 일반 브라우저에서는 이벤트 객체가
- stopPropagation() 메소드를 호출하면 된다.
- IE에서는 이벤트 객체의 cancelBubble 속성에 true를 대입
3. 이벤트 종류
1) 클릭 이벤트
click, dblclick
- 버튼이나 a 태그에 사용해서 누르면 작업을 수행하고자 할 때 많이 사용
2) 키보드 이벤트
keydown, keypress, keyup
- 기본적인 처리로 누른 키 값을 input 객체에 출력
- event 객체에 전달되는 값
- which : 누른 키의 ASCII 코드 값을 저장 - 이 속성이 없는 경우는 keyCode에 저장
- code : 누른 문자에 해당하는 상수
- key : 누른 문자
- which는 누른 키보드의 코드 값을 가지고 있게 되는데 코드 값은 대소문자 구분을 하지 않고 값을 리턴
- 특수문자에도 반응
- key는 누른 문자를 가지고 있는데 대소문자 구분을 한다.
- 특수문자에는 반응을 하지 않음
