JavaScript의 객체에 대해 살펴보자
객체에는 메서드(Method)와 속성(Property)이 있습니다
속성 / 메서드 사용방법
객체이름.메서드이름(파라미터값)
객체 이름. 속성 이름
위와 같이 객체 이름과 메서드/속성 이름 사이에 ( . )을 붙여 호출함
객체의 종류
- 내장 객체 : String, Date, Array, Math, RegExp, Object 등 자바스크립트 엔진에 내장돼있는 객체
- 브라우저 객체 모델(BOM) : 브라우저에 계층적으로 내장되어있는 객체
브라우저 객체 모델(BOM)
window 객체 : 브라우저 최상위 객체
window 객체 메서드
open("url경로", "창 이름", "옵션 설정") - 새 창을 열 때 사용
alert("메시지") - 경고 창
prompt("질의 내용", "기본 답변") - 질의응답 창을 띄움
confirm("질의 내용) - 확인/취소 창을 뛰움 각각 [ TRUE/FALSE ] 반환
moveTo( x , y ) - 창의 위치를(x , y)로 이동시킴
resizeTo(너빗값, 높이 값) - 창의 크기를 변경
setInterval( "스크립트 실행문", 시간 간격 ) - 시간 간격으로 반복하여 실행문 실행
clearInterval( 변수 ) - 변수에 참조돼 있는 setInterval() 삭제
setTimeout( "스크립트 실행문", 시간 간격 ) - 시간 간격으로 한 번만 실행문 실행
clearTimeout( 변수 ) - 변수에 참조돼 있는 setTimeout() 삭제
screen 객체 : 사용자 모니터 정보 제공 객체
screen 객체 속성
width : 화면 너비
height : 화면 높이
availWidth : 작업 표시줄 제외 화면의 너비
availHeight : 작업 표시줄 제외 화면의 높이
location 객체 : 브라우저 주소창에 url에 대한 정보와 새로고침 기능 제공 객체
location 속성 및 메서드
href - 주소 설정, URL
hash - URL의 해시값
hostname - URL의 호스트 이름
host - URL의 호스트 이름과 포트번호
port - URL의 포트 번호
protocol - URL의 프로토콜
search - URL의 쿼리
reload() - 새로고침 메서드
history 객체 : 방문 기록에 관한 속성과 메서드 제공 객체
history 메서드 및 속성
back() - 이전 방문 페이지로 이동
forward() - 다음 방문한 페이지로 이동
go( 숫자 ) - 숫자만큼의 페이지 이동 음수라면 이전 페이지로
length - 방문 기록에 저장된 목록 개수
navigator 객체 : 방문자가 사용하는 브라우저 정보와 운영체제 정보 제공
navigator 속성
appCodeName - 방문자 브라우저 코드명
appName - 방문자 브라우저 이름
appVersion - 방문자 브라우저 버전 정보
language - 방문자의 브라우저 언어
product - 방문자의 브라우저 사용 엔진 이름
platform - 방문자의 브라우저 실행 운영체제
userAgent - 방문자의 브라우저와 운영체제 종합 정보
문자 객체 모델(DOM) : HTML 문서의 구조
선택자
직접 선택자 [ 문서에서 요소를 선택 ( ID / CLASS / 폼 이름 / 요소 이름 등)
document.getElementById( " 아이디 명 " ) - 아이디를 이용해 요소 선택
document.getElementByTagName( "요소 명" ) - 요소의 이름 이용
document.formName.inputName - 폼 요소에 name 속성 이용
인접 관계 선택자 [ 직접 선택자를 사용해 선택해 온 문서 객체를 기준으로 가까이에 있는 요소 ]
parentNode - 선택한 요소의 부모 요소
childNodes - 선택한 요소의 모든 자식 요소
firstChild - 첫 번째 자식 요소
previousSibling - 선택한 요소 이전에 형제들의 요소
nextSibling - 선택한 요소 다음에 형제들의 요소
폼 요소 선택자
회원가입 등과 같이 사용자로부터 값을 입력받을 때 해당 값의 유효성을 검사하기
위해서는 해당 요소를 선택하고 속성을 제어할 수 있어야 한다.
폼 요소 선택 방식
입력 요소 선택 자
document.getElementById("id 속성명") : ID 값으로 선택
document.폼 이름.입력 요소 이름 : 폼 요소 이름으로 선택
예 ] document. 폼 이름[FR]. select.option [index] : - select에서 index번째 옵션 선택
폼 요소의 주요 속성..
- value : 입력 요소의 값을 설정하거나 반환
- disabled : 입력 요소의 disabled 속성을 설정하거나, 현재 상태 값을 가져옴.
- defaultValue : 초기에 입력한 값.
- selected : select 태그에 선택 값이 있는지의 유무 반환 , true/false
- checked ; 체크박스 또는 라디오 버튼 체크 상태를 반환, true / false