Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

joyful

Javascript 개념정리 - 폼과 자바스크립트 & 브라우저 객체모델 본문

Javascript

Javascript 개념정리 - 폼과 자바스크립트 & 브라우저 객체모델

조이풀한 개발자 2023. 7. 1. 22:45

폼과 자바스크립트

1. 폼 요소에 접근하는 여러 가지 방법

  • id 값이나 class 값을 사용
  • name 값을 사용
  • 폼 배열을 사용
//id class
document.querySelector("#이름")
document.querySelector(".이름")

//name
document.이름

//폼 배열 (id, class, name 속성이 모두 없을 때 사용)
document.forms[0].elements[0]

 

브라우저 객체 모델

1. 브라우저 객체 모델이란?

브라우저 요소 전체를 객체화 한 것

 

자주 사용하는 브라우저 내장 객체:

  • Window: 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체.
  • Document: 웹 문서에서 <body> 태그를 만나면 만들어진느 객체.
  • History: 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체.
  • Location: 현재 페이지에 대한 URL 정보를 가지고 있는 객체.
  • Navigator: 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체.
  • Screen: 현재 사용 중인 화면 정보를 다루는 객체.

 

2. Window 객체

Window 객체의 속성:

  • document: 브라우저 창에 표시된 웹 문서에 접근할 수 있다.
  • frameElement: 현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환한다.(그렇지 않으면 null을 반환)
  • innerHeight: 내용 영역의 높이를 나타낸다.
  • innerWidth: 내용 영역의 너비를 나타낸다.
  • localStorage: 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다.
  • location: Window 객체의 위치/현재 URL을 나타낸다.
  • name: 브라우저 창의 이름을 가져오거나 수정한다.
  • outerHeight: 브라우저 창의 바깥 높이.
  • outerWidth: 브라우저 창의 바깥 너비.
  • pageXOffset: 스크롤했을 때 화면이 수평으로 이동하는 픽셀 수. (scrollX와 같음)
  • pageYOffset: 스크롤했을 때 화면이 수직으로 이동하는 픽셀 수. (scrollY와 같음)
  • parent: 현재 창이나 서브 프레임의 부모 프레임.
  • screenX: 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리.
  • screenY: 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리.
  • scrollX: 스크롤했을 때 수평으로 이동하는 픽셀 수.
  • scrollY: 스크롤했을 때 수직으로 이동하는 픽셀 수.
  • sessionStorage: 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환한다. 

 

Window 객체의 함수 (자주 사용)

  • alert(): 알림 창을 표시한다.
  • blur(): 창에서 포커스를 제거한다.
  • close(): 현재 열려 있는 창을 닫는다.
  • confirm(): [확인], [취소]가 있는 확인 창을 표시한다.
  • focus(): 현재 창에 포커스를 부여한다.
  • moveBy(): 현재 창을 지정한 크기만큼 이동한다.
  • moveTo(): 현재 창을 지정한 좌표로 이동한다.
  • open(): 새로운 창을 연다.
  • postMessage():다른 창으로 메시지를 전달한다.
  • print(): 현재 문서를 인쇄한다.
  • prompt(): 프롬프트 창에 입력한 텍스트를 반환한다.
  • resizeBy(): 지정한 크기만큼 현재 창 크기를 조절한다.
  • resizeTo(): 동적으로 브라우저 창의 크기를 조절한다.
  • scroll(): 문서에서 특정 위치로 스크롤한다.
  • scrollBy(): 지정한 크기만큼씩 스크롤한다.
  • scrollTo(): 지정한 위치까지 스크롤한다.
  • setCursor(): 현재 창의 커서를 변경한다.
  • showModalDialog(): 모달 창을 표시한다.
  • sizeToContent(): 내용에 맞게 창 크기를 맞춘다.
  • stop(): 로딩을 중지한다. 

 

3. Navigator 객체

랜더링 엔진

  • 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램.
  • 웹 브라우저마다 내장된 렌더링 엔진이 다르기 때문에 HTML이나 CSS를 해석하는 방법이 다름. (그래서 표준화되지 않은 CSS3 속성 앞에 -webkit- 또는 -oz-같은 접두어를 붙여 브라우저에 맞게 랜더링한다.)
  • 자바스크립트 소스를 해석하는 자바스크립트 엔진도 내장되어 있지만, 이것도 웹 브라우저마다 다름

 

Navigator 객체의 속성:

  • appCodeName: 브라우저 이름(코드 이름)을 문자열로 반환한다.
  • appName: 브라우저 공식 이름을 문자열로 반환한다.
  • appVersion: 브라우저 버전을 문자열로 반환한다.
  • battery: 배터리 충전 상태를 알려 주는 정보가 담긴 객체를 반환한다.
  • connection: 브라우저 장치의 네트워크 정보가 담긴 객체를 반환한다.
  • cookieEnabled: 쿠키 정보를 무시한다면 false, 그렇지 않다면 true를 반환한다.
  • geolocation: 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환한다. 
  • maxTouchPoints: 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환한다.
  • platform: 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환한다.
  • userAgent: 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환한다. 

 

4. History 객체

History 객체의 속성

  • length: 현재 브라우저 창의 History 목록에 있는 항목의 개수(방문한 사이트 개수)를 반환한다.

 

History 객체의 함수

  • back(): History 목록에서 이전 페이지를 현재 화면에 불러온다.
  • forward(): History 목록에서 다음 페이지를 현재 화면에 불러온다.
  • go(): History 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다. 

 

5. Location 객체

Location 객체의 속성

  • hash: URL 중 #로 시작하는 해시 부분을 나타낸다.
  • host: URL의 호스트 이름과 포트 번호를 나타낸다.
  • hostname: URL의 호스트 이름을 나타낸다.
  • herf: 전체 URL이다. 
  • pathname: URL 경로를 나타낸다.
  • port: URL의 포트 번호를 나타낸다.
  • protocol: http://나 ftp:// 같은 URL의 프로토코을 나타낸다.
  • password: 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 URL일 경우 password 정보를 저장한다. 
  • search: URL 중 ?(물음표)로 시작하는 검색 내용 부분을 나타낸다.
  • username: 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트 URL일 경우 username 정보를 저장한다. 

 

Location 객체의 함수

  • assign(): 현재 문서에 새 문서 주소를 할당해 새 문서를 가져온다.
  • reload(): 현재 문서를 다시 불러온다. [새로고침]과 같은 역할.
  • replace(): 현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다.
  • toString(): 현재 문서의 URL을 문자열로 반환한다. 

 

6. Screen 객체

Screen 객체의 속성

  • availHeight: 화면에서 윈도우의 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분의 높이를 나타낸다.
  • availWidth: UI 영역을 제외한 부분의 너비를 나타낸다.
  • colorDepth: 화면상에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타낸다. 
  • height: UI 영역을 포함한 화면의 높이를 나타낸다
  • orientation: 화면의 현재 방향을 나타낸다. (기본은 가로 방향)
  • pixelDepth: 화면상에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타낸다.
  • width: UI 영역을 포함한 화면의 너비를 나타낸다.

 

Screen 객체의 함수

  • lockOrientation(): 화면 방향을 잠근다.
  • unlockOrientation(): 화면 방향 잠금을 해제한다. 

'Javascript' 카테고리의 다른 글

[Javascript] 아코디언 메뉴 Accordion Menu  (2) 2023.09.20
[Javascript] split(), map(), 람다식 함수  (2) 2023.07.15
[Javascript] 가위바위보 게임  (2) 2023.01.19
Javascript 개념 정리4 - 기본타입  (0) 2023.01.12
Javascript 개념 정리3 - 변수  (0) 2023.01.09
'Javascript' Related Articles more