JavaScript(2)

Window 객체

• 웹 브라우저에서 작동하는 최상위 객체
• 브라우저와 관련된 여러 객체와 속성, 함수가 존재하며, 기본 제공 프로퍼티도 포함된다.
• BOM(Browser Object Model)으로 불리기도 한다.
• alert(): 알림창 띄우기
• confirm(): 확인 / 취소 선택창 띄우기
• prompt(): 입력창 띄우기
• navigator 객체
  • 브라우저의 정보 내장
  • 서로 다른 브라우저를 구분할 수 있음
• location 객체
  • 현재 페이지 주소(URL)와 관련된 정보를 알 수 있음
  • location.href: 값을 할당하지 않으면 현재 URL을 조회, 값을 할당하면 이동
  • location.reload(): 새로고침
• history 객체
  • history.back(): 뒤로가기
  • history.forward(): 앞으로 가기
• open(): 새 창 열기
  • window.open(URL, 창 이름, 특성, 덮어쓸지 여부)
• close(): 창 닫기
• opener 속성: 부모 창 컨트롤 가능
• setTimeout(): 지정한 밀리초 시간이 흐른 후에 함수 호출
• setInterval(): 지정한 밀리초 주기마다 함수 호출 반복
• clearInterval(): setInterval 함수 정지

DOM

• DOM(Document Object Model): HTML과 XML 문서의 구조를 정의하는 API 제공
• 문서 요소 집합을 트리 형태의 계층 구조로 표현
• HTML 계층 구조의 제일 위에는 document 노드 존재

문서 객체 만들기

• 텍스트 노드를 따로 만들어야한다.
• createElement(태그이름): element node 생성
• createTextNode(텍스트 내용): text node 생성
• appendChild(노드): 객체에 노드를 자식으로 추가
• setAttribute(name, value): 속성 설정
• getAttribute(name): 속성 가져오기
• innerHTML: 문자열을 HTML 태그로 삽입(HTML 마크업 인식)
• innerText: 문자열을 text node로 삽입(문자열 그대로 인식)
• removeChild(자식 노드): 객체의 자식 노드 제거

Event

• 마우스, 키보드 등에서 다양한 이벤트가 발생
• js를 이용하여 DOM에서 발생하는 이벤트를 감지하여 상황에 맞는 작업을 수행할 수 있다.
• 이벤트 핸들러(Handler) 혹은 이벤트 리스너(Listener) 함수에 이벤트 발생시 수행할 코드 작성
• Frame 이벤트
  • onload: 문서의 모든 요소가 다 로딩되었을 때 발생

Handler 등록

• 인라인 이벤트 핸들러: HTML 요소의 내부에 직접 등록
• 프로퍼티 방식: js에서 이벤트 핸들러 등록 → HTML 코드와 js 코드의 분리가 가능 → 하나의 이벤트 핸들러만 바인딩 할 수 있음
• addEventLister 메서드 방식: addEventListener(이벤트 이름, 이벤트 핸들러, 캡처링 여부)

Web Storage

• WebStorage API: LocalStorage
• 데이터를 사용자 로컬에 보존하는 방식
• 저장, 덮어쓰기, 삭제 등 가능
• js로만 조작
• Cookie와의 차이는 유효 기간이 없고 영구적 이용이 가능하며 5MB까지 사용이 가능하다.
• 또한, 네트워크 요청 시 서버로 전송되지 않으며 서버가 내용을 조작할 수 없다.
• origin(프로토콜, 도메인, 포트)이 다르면 접근할 수 없다.
• Key와 Value를 하나의 세트로 저장하며 도메인과 브라우저별로 저장된다.
• setItem(key, value): 값 저장
• getItem(key): 값 리턴
• removeItem(key): key에 해당하는 값 삭제
• clear(): 모든 값 삭제
• key(index): index에 해당하는 key 리턴
• length: 저장된 항목의 개수