44일차: 자바스크립트_브라우저 내장 객체 / 입력 양식 2021.08.13

 

목차

 <브라우저 내장 객체>

1.     Window 객체

2.     Document 객체

3.     Location 객체

4.     History 객체

5.     Navigator 객체

 <입력 양식>

6.     Form 객체

7.     Text 객체

8.     Submit 객체

9.     Checkbox 객체

10.  Radio 객체

11.  Select 객체

 

Intro

• 브라우저 내장 객체

- 브라우저에 내장된 객체이며 계층적 구조로 이루어져 있다.

 

 

1. Window 객체  <한글 6장>           

 

1) Window 객체

window 객체는 브라우저 내장 객체들의 계층 구조 중에서 가장 상위에 있는 객체로, 우리가 자바스크립트로 하는 모든 작업들이 window 객체 안에서 이뤄지게 된다.

 

• window 객체의 특성, 메소드, 이벤트 핸들러 정리

window
특성	status	브라우저 상태선에 나타날 문자열
	defaultStatus	status에 지정된 문자열이 없을 때 나타날 문자열
	self	자기 자신 객체
	parent	window 객체 간의 상위 객체
	top	window 객체 간의 최상위 객체
	frames	window 객체 안에 들어간 프레임들
	opener	open()메소드의 윈도우를 연 문서가 있는 윈도우
메소드	open()	윈도우 하나 열기
	close()	윈도우 닫기
	alert()	메시지를 전달하기 위한 대화상자
	confirm()	확인을 받기 위한 대화상자
	prompt()	사용자로부터 문자열을 입력 받기 위한 대화상자
	setTimeout()	지정된 시간동안 기다린 후 명령 실행
	clearTimeout()	setTimeout() 해제
이벤트 핸들러	onLoad	브라우저에서 문서를 읽은 후 실행할 명령 지정
	onUnload	현재 문서를 모두 지운 후 실행할 명령 지정
	onError	문서를 읽던 중 에러가 발생했을 때
	onBlur	브라우저에서 focus를 잃었을 때
	onFocus	브라우저에서 focus를 얻었을 때

 

2) window 객체의 메소드

① open()                                → ★window01.html 참고

- 윈도우의 모양은 현재 우리가 보고 있는 브라우저의 모양과 동일한 것이 나오게 된다.

- 툴바, 상태선, 스크롤바 등의 요소들은 없을 수 있다.

- 형식: open("팝업창에 실행될 문서명","윈도우 이름","옵션");

- ex) window.open("http://www.naver.com","mywin01","width=600, height=400, left=300, top=100")

 

② close()                               → ★window02.html 참고

- close()는 open() 메소드를 통해 만든 윈도우를 닫는 역할을 한다.

- close() 윈도우를 사용할 때 닫으려는 윈도우 객체를 close() 앞에 지정해야 한다.

- ex) w1.close();

 

2. Document 객체  <한글 6장>                   

 

1) Document 객체

- Document 객체는 window 객체 바로 아래에 있는 것으로 body 태그 안에 있는 내용들과 직접적으로 연결되어 있다. 하지만 body 태그가 아닌 head 안에 있는 title 태그의 정보에도 접근할 수 있으며, 문서의 변경 날짜 정보에도 접근할 수 있다.

 

2) Document 객체의 속성                      → ★document.html 참고

• bgColor: 문서의 배경색

• fgColor: 문서의 전경색

 

- ex) document.bgColor='red';                 // 배경색 설정

       document.fgColor='yellow';             // 글자색 설정

 

 

3. Location 객체  <한글 6장>           

 

1) Location 객체

- 현재 열려진 윈도우의 URL 주소에 관한 정보를 제공하는 객체로, HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용하는 객체이다.

- location 객체를 이용해서 페이지를 이동할 수 있으며 메세지 출력이 가능하다.

 

2) Location 객체의 속성과 메소드          

① href 속성                                       → ★location01.html 참고

- 현재 문서의 전체 URL 주소를 문자열로 반환한다.

- 특정 주소를 입력해서 페이지를 이동할 수 있다.

- ex) alert("페이지 이동");

       location.href="http://www.naver.com";

 

② reload()                              → ★location02.html 참고

- 브라우저 창에 현재 문서를 다시 불러오는 메소드(새로 고침 기능)

- ex) location.reload();

 

• cf.                                       → ★meta.html 참고

- html에서는 <meta> 태그로 페이지 이동이 가능하며, 시간을 설정할 수 있다. (단위 : 초)

- ex) <meta http-equiv="refresh" content="3; url=http://www.naver.com">

 

location 객체
특성	href	문서의 URL 주소
	host	URL 주소의 호스트 이름과 포트번호
	hostname	URL 주소의 호스트 이름
	protocol	프로토콜 종류
	pathname	디렉토리 위치
	port	포트 번호
	hash	표식 이름
	search	검색 엔진을 호출할 때 사용하는 형식
메소드	reload()	현재 문서를 다시 읽도록 만드는 메소드
	replace()	현재 문서를 특정 URL에 있는 문서로 바꿔주는 메소드

 

 

4. History 객체  <한글 6장>              → ★ex3_50_1.html ~ ex3_50_3.html 참고

 

1) History 객체

window 객체 바로 아래에 있는 것으로, 브라우저의 히스토리 리스트 정보를 저장해 두는 곳이다. history 객체에서 제공하는 여러 메소드들을 이용하여 방금 지나왔던 페이지로 이동할 수 있게 된다. 단, 자바스크립트를 이용하여 히스토리 리스트 속에 있는 URL 주소를 알아낼 수는 없다.

 

2) History 객체의 속성과 메소드

history 객체
특성	length	히스토리 리스트에 포함되어 있는 URL 주소의 개수
메소드	back()	히스토리 리스트에서 한단계 앞으로 이동
	forward()	히스토리 리스트에서 한단계 뒤로 이동
	go()	히스토리 리스트에서 임의의 위치로 이동

 

• 이전 페이지로 이동 : history.back();

                            history.go(-1);

 

• 다음 페이지로 이동 : history.forward();

                            history.go(+1);

 

5. Navigator 객체  <한글 6장>                     → ★ex3_46.html / ex3_47.html 참고

 

1) Navigator 객체

- 현재 사용 중인 웹 브라우저의 정보를 가지고 있는 객체(ex. 브라우저 공급자 및 버전 정보 등)

 

2) Navigator 객체의 속성과 메소드

navigator 객체
특성	appName	애플리케이션 이름 / 예:Netscape
	appVersion	브라우저 현재 버전 / 예:2.0 (Win16;I)
	appCodeName	브라우저 현재 코드 이름 / 예:Mozilla
	userAgent	브라우저의 현재 User Agent
	mimeTypes	브라우저에서 지원하고 있는 MIME 타입들
	plugins	현재 브라우저에 설치된 플러그인 종류
메소드	javaEnabled()	현재 브라우저에서 자바를 지원하고 있는지 체크

 

<입력 양식 객체>

6. Form 객체  <한글 7장>                 → ★form.html 참고

 

1) Form 객체

- 입력 양식을 작성하기 위해 사용되는 <form> 태그에 포함되어 있는 요소들을 처리할 때 사용하는 객체

- form 안에 포함된 입력 양식들은 elements 특성으로 접근할 수 있다.

- 각 입력 양식의 이름으로도 접근할 수도 있다.

 

• 사용법

form이름.속성

form이름.메소드

form[배열 번호].속성

form[배열 번호].메소드

 

2) Form 객체의 속성과 메소드

Form 객체
특성	action	<form> 태그의 action 속성 값
	target	<form> 태그의 target 속성 값
	method	<form> 태그의 method 속성 값
	elements	<form> 태그 안에 있는 모든 입력 양식을 배열로 저장
메소드	submit()	입력된 데이터를 서버에 보내기 위한 메소드
	reset()	입력 양식을 리셋시키는 메소드
이벤트 핸들러	onSubmit	사용자가 submit 버튼을 눌렀을 때 실행되는 이벤트 핸들러
	onReset	사용자가 reset 버튼을 눌렀을 때 실행되는 이벤트 핸들러

 

7. Text 객체  <한글 7장>                   → ★text01.html / text02.html 참고

 

1) Text 객체

- 텍스트 입력 양식을 위한 객체로, <input type="text">가 HTML 문서에 삽입되어 있을 때 생성되는 객체이다.

 

2) Text 객체의 속성과 메소드

Text 객체
특성	name	<input> 태그의 name 속성
	value	텍스트 입력 양식에 입력된 값
	type	입력 양식의 종류("textarea")
	defaultValue	<input> 태그의 value 속성
메소드	focus()	텍스트 영역 안에 커서가 들어가게 한다.
	blur()	텍스트 영역 안에 있는 커서를 밖으로 나가게 한다.
이벤트 핸들러	onfocus	텍스트 영역에 커서가 들어갔을 때 발생하는 이벤트 핸들러
	onblur	텍스트 영역에서 커서가 나갔을 때 발생하는 이벤트 핸들러
	onkeyup	입력 필드에서 키를 놓았을 때 발생하는 이벤트 핸들러

 

8. Submit 객체  <한글 7장>              → ★submit.html 참고

 

• Submit 객체

- Submit 버튼을 위한 객체로, submit 버튼은 입력 양식에 입력된 값들을 서버로 보낸다.

 - onclick 이벤트 핸들러 대신 onSubmit 이벤트 핸들러가 사용된다.

- ex) <form method="post" action="send.jsp" onSubmit="return check()">

 

9. Checkbox 객체  <한글 7장>          → ★checkbox01.html / checkbox02.html 참고

 

• Checkbox 객체

- 체크 박스 입력 양식 정보를 제어하는 객체이다.

- 체크박스는 한번에 여러 항목을 동시에 선택할 수 있다.

- checked : 체크 박스를 선택해주는 속성, 체크된 상태면 true, 아니면 false를 반환

- ex) <input type="checkbox" id="f1" checked="checked">사과       // ‘사과’ 옵션이 체크된 상태

- ex) if(f1.checked == true) s += '사과';                                      // ‘사과’ 옵션이 선택되어 있는 경우

 

10. Radio 객체  <한글 7장>              → ★radio01.html / radio02.html 참고

 

• Radio 객체

- 라디오 버튼은 체크 박스와 다르게 오직 하나의 옵션만을 선택할 때 필요한 객체이다.

- 라디오 객체는 <form> 태그 안에 정의되어야 한다.

- 라디오 버튼들의 name 값이 동일해야 하나의 그룹으로 인식된다.

 

11. Select 객체  <한글 7장>              → ★select01.html / select02.html 참고

 

1) Select 객체

select 객체는 <select> 태그와 <option> 태그로 이루어지며, 옵션 메뉴를 제공하는 컨트롤을 나타낸다.

 

2) Select 객체의 속성과 이벤트 핸들러

① size 속성

- 목록에서 한 번에 볼 수 있는 옵션 수를 나타낸다.

 

② multiple 속성

- 메뉴에서 복수의 옵션을 선택할 수 있다. 지정하지 않은 경우 하나만 선택 가능하다.

 

③onchange 이벤트 핸들러

- 리스트 박스에서 선택을 바꾸었을 때 발생하는 이벤트 핸들러

 

ex) <select id=”sel” size=3 multiple onChange=”check()”>