[JavaScript] JavaScript 정리 - 3 (브라우저, 윈도우 객체)

👉 Window 객체

     윈도우 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역객체.

     BOM(Browser Object Model)으로 불리기도 함.

     요새는 alert()나 prompt() 같은 경우는 모달창, 다이얼로그 등으로 대체되는 추세이다.

window 객체 (브라우저의 창을 open)
alert()	브라우저의 알림 창
confirm()	브라우저의 확인/취소 선택 창
prompt()	브라우저의 입력 창

window 객체 (navigator)

브라우저의 정보가 내장된 객체

서로 다른 브라우저를 구분할 수 있다.

window 객체 (페이지의 주소, 이력)
location.href	현재 url 조회 또는 할당된 url로 이동
location.reload()	현재 페이지를 새로고침. 디비의 정보를 가져와서 화면을 업데이트 시에 사용.
history.back()	브라우저의 뒤로가기
history.forward()	브라우저의 앞으로 가기

 

👉 새 창 열기

     window.open('페이지 url', '창이름', '특성', 히스토리 대체여부);

• 창 이름(string): open할 대상 지정 혹은 창의 이름
• 특성(string): 새로 열릴 창의 너비, 높이 등의 특성 지정
• 히스토리 대체 여부(boolean): 현재 페이지 히스토리에 덮어 쓸지 여부
• 새 창을 연 놈: opener / 새 창 : self

브라우저는 내부적으로 캐시 메모리를 이용하기 때문에, 다음에 같은 주소를 요청하는 경우에 예전 데이터를 보낼 수 있다. 따라서, 브라우저를 닫고 다시 열거나, 모든 창을 새로고침하거나, 캐싱을 못하도록 갱신할 수 있게 캐싱 메모리를 막아둘 수 있다.

 

👉 문서 객체 만들기

함수명	설명
createElement(tagName)	element 노드를 생성
createTextNode(text)	text 노드를 생성
appendChild(node)	객체에 노드를 child로 추가

 

👉 문서 객체 속성 설정하기

함수명	설명
setAttribute(name, value)	객체의 속성을 지정 (웹 브라우저가 지원하지 않는 태그의 속성도 가능)
getAttribute(name)	객체의 속성값을 가져옴

 

👉 문서 객체 삽입하기

함수명	설명
innerHTML	HTML 태그로 삽입
innerText	text로 삽입

 

👉 문서 객체 가져오기

id의 경우만 고유한 1개의 엘리먼트를 가져오기 때문에 element다음에 s가 들어가지 않는다.

 

👉 문서 객체 제거

removeChild(childnode)

 

👉 이벤트

     DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행

     이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행

     이벤트 핸들러 또는 이벤트 리스너 라고 한다.

이벤트가 발생하는 상황

웹 페이지가 로딩됨

페이지를 스크롤함

마우스를 클릭함

키보드로 키를 입력함

form이 submit됨

input의 내용이 변경됨

마우스를 움직여서 element를 이동

 

👉 키보드 이벤트

이벤트	설명
onkeypress	키보드가 눌러 졌을 때 발생
onkeydown	키보드를 누르는 순간 발생
onkeyup	키보드의 누르고 있던 키를 뗄 때 발생

 

👉 Frame 이벤트

이벤트	설명
onload()	document, image, frame 등이 모두 로딩 되었을 때 발생.

 

👉 Form 이벤트

이벤트	설명
onsubmit	form이 전송될 때 발생

 

👉 이벤트 핸들러 등록(inline)

     초기) html 요소의 내부에서 직접 이벤트 핸들러를 등록

     javascript만 사용하는 경우) 인라인 이벤트 핸들러를 사용하지 않았음.

     Angular, React, Vue.js 같은 걸 사용하는 경우) inline 이벤트 핸들러를 이용해서 이벤트를 처리. 

     장점은 HTML과 JavaScript 코드를 분리할 수 있다.

 

👉 이벤트 핸들러 등록(property)

     하나의 이벤트 핸들러만을 바인딩 가능하기 때문에, 여러 핸들러가 나오는 경우 마지막에 선언된 핸들러를 실행

 

👉 이벤트 핸들러 등록(addEventListener 방식)

     전달 인자

     1. 이벤트 이름     2. 이벤트 핸들러    3. 캡처링 여부

     *IE9 이전 버전에서는 사용 불가(attachEvent 사용)

     하나의 이벤트에 대해서 여러 개의 핸들러를 지정할 수 있음

     HTML 말고도 모든 DOM(XML, SVG)에 대해서 동작

     만약 이벤트 핸들러가 다양한 태그에 대해서 동작해야 하는 경우

     이벤트 핸들러 내부에 함수를 호출하여 해결할 수 있도록 한다.

     

👉 이벤트 캡처링, 버블링

     따로 검색해서 알아보기

 

👉 웹 스토리지

     데이터를 저장할 수 있는 공간(localStorage)

     getItem(), setItem(), removeItem(), clear() 만 기억하자.

     지우라고 명령하기 전까지는 지워지지 않음

     같은 세션에서만 저장되는 세션 스토리지도 있다.