BOM(Browser Object Model)&AJAX

꿈나무기록장·2021년 1월 13일
0

2021웹캠프정리

목록 보기
10/25
  • 웹 브라우저와 관련된 객체의 집합

  • 객체 모델 종류: window(최상위), location, navigator, history, screen, document

  • 정확히는 자바스크립트가 아닌 웹브라우저가 제공하는 기능

window 객체

  • 다른 BOM 객체의 상위 개념
  • alert(), prompt() 등 많은 메소드를 가지고 있음
  • var 키워드로 선언한 일반 변수도 window 객체의 속성이 됨

moveTo(x, y) : 윈도우의 위치를 절대적으로 이동
resizeTo(x, y) : 윈도우의 크기를 절대적으로 지정
close() : 윈도우 닫음

  • 윈도우 객체 생성 예시

window.open('https://www.google.com', 'child', 'width=500', 'height=300', true);

screen 객체

  • 웹브라우저 화면이 아닌 운영체제 화면의 속성을 갖는 객체
  • screen 객체의 속성
    screen.width : 화면의 너비
    screen.height : 화면의 높이
    screen.availWidth : 실제 화면에서 사용 가능한 너비
    screen.availHeight : 실제 화면에서 사용 가능한 높이
    screen.colorDepth : 사용 가능한 색상 수
    screen.pixelDepth : 한 픽셀당 비트 수

location 객체

  • 웹브라우저의 주소 표시줄과 관련된 객체
  • location 객체는 프로토콜의 종류, 호스트 명, 문서 위치 등의 정보가 있음
  • location 객체의 속성

href : 문서의 URL 주소
host : 호스트 이름과 포트번호 // localhost:30763
hostname : 호스트 이름 // localhost
port : 포트 번호 // 30763
pathname : 디렉토리 경로 // /a/index.html
hash : 앵커 이름(#~) // #beta
search : 요청 매개변수 // ?param=10
protocol : 프로토콜 종류 // http:

  • location 객체의 메소드
    assign(link) : 현재 위치를 이동
    reload() : 새로고침
    replace(link) : 현재 위치를 이동(뒤로가기 사용 불가)
  • 웹페이지를 실행 중인 브라우저에 대한 정보가 담긴 객체
  • navigator 객체의 속성

appCodeName : 브라우저의 코드 이름
appName : 브라우저의 이름
appVersion : 브라우저의 버전
platform : 사용 중인 운영체제의 시스템 환경
userAgent : 웹 브라우저 전체 정보
language: 브라우저가 사용하는 언어(ex.한글)

JavaScript Popup Boxes

  • Alert box
  • Confirm box: 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자
  • Prompt box: 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄움

Timing Events

  • setTimeout(function, milliseconds)
  • setInterval(function, milliseconds)
  • clearTimeout()
  • clearInterval()

JavaScript Cookies

: 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부

  • 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달

  • path=/: 현재 경로

  • document.cookie


AJAX

ajax는 프로그래밍 언어가 아니다

The XMLHttpRequest Object

: XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다.

  • 모든 종류의 데이터를 받아오는데 사용

XMLHttpRequest Object Properties

readyState

  • 0: request not initialized
  • 1: server connection established
  • 2: request received
  • 3: processing request
  • 4: request finished and response is ready

status

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"
profile
초보자가 기록하는 곳

0개의 댓글