window 객체
- 자바스크립트에서 미지 정의하여 제공하는 내장 객체 중 최상위 객체
- 웹브라우저의 창(browser window) 자체를 가르키는 용도로 사용됨
- window 객체명은 생략이 가능함
=> ex) window.open() => open() 형태로 사용 가능
window 객체 예제
//#1. < 기본 문법 > window.open("새 창에서 접속할 URL", "창이름", "창옵션(크기, 위치 등)")
window.open("http://www.itwillbs.co.kr", "창이름", "width=300,height=300"); // 새 창 열기
window.close();// 현재 창 닫기
// window 객체의 innerHeight 와 innerWidth 속성에 접근하여 창의 가로, 세로 크기 알아내기
alert("창 높이 : " + window.innerHeight + ", 창 너비 : " + window.innerWidth);
// #2. onload()
// body 태그 내의 자바스크립트 작업들이 모두 실행된 후 onload 이벤트에 의해 실행이 됨
window.onload = function() {
alert("onload()");
}
// #2-1. body onload=""
// 위와 동일한 onload 효과
function func1(){
alert("onload()");
}
<body onload="func1()"></body> // HTML에 사용 할 것
window 하위 객체 목록
- 1. document
- 2. location, history, navigator, etc...
- 3. Object, Array, Function, etc...
location 객체
- 페이지 이동에 관련된 객체
- href 속성이 웹브라우저 주소 정보를 관리
- 대부분 웹페이지를 이동시기거나 새로고침할 때 사용
//#1. location 객체의 href 속성값을 변경하여 주소 정보 변경
// => 변경된 주소로의 새로운 요청 발생 = 변경된 주소로 페이지 이동
location.href = "http://www.naver.com"; // 네이버 홈페이지로 이동
location.href = "test.html"; // test.html 파일(페이지)로 이동
//#2. location 객체의 reload() 함수 호출하여 페이지 새로고침(F5 키와 동일)
location.reload();history 객체
- 웹브라우저의 주소 기록(=방문 기록) 정보를 관리하는 객체
- 웹브라우저 앞뒤로 움직일 때 사용
alert(history.length);// 현재 웹브라우저에 저장된 방문기록 갯수 확인
history.back(); // 뒤로 가기(= 이전 페이지)
history.forward(); // 앞으로 가기(= 다음 페이지)
history.go(0); // 지정된 값만큼 페이지 점프(x단계 만큼 이동)
// 양수는 앞으로(다음), 음수는 뒤로(이전)document 객체
- DOM(Document Object Model, 문서 객체 모델) 이라고 함
- 웹 페이지 내의 모든 컨텐츠를 객체로 관리함(수정 가능한 객체)
- 웹 페이지의 시작점 역할을 수행하며 HTML 문서 내용을 변경/생성/삭제 등 관리하는 객체
- 대부분 태그의 name이나 id로 접근해서 html문서를 수정할 때 사용
//#1. 변수
document.title = "제목 변경"; // 웹페이지 제목을 "제목 변경"으로 변경
document.bgColor = "yellow"; // 배경색을 노란색으로 변경
document.fgColor = "#0000FF"; // 폰트색을 파란색(BLUE 값을 최대치)으로 변경
//#2. 객체
// => document 객체의 body 에는 body 태그 객체가 자동으로 저장되고 관리되는데
// 현재 자바스크립트 실행 시점은 body 태그가 로딩되기 전이므로
// body 객체(HTMLBodyElement)가 생성되지 않은 상태이다.
// 따라서, null 값이 출력됨(= 객체 없음)
alert("document.body : " + document.body);
document.body.style.background = "RED"; // body 태그의 배경색을 "RED" 로 변경할 경우
//#3. getElementById("태그의id");
// 태그의 id 속성으로 접근 가능 (id값은 중복X)
// 태그의 id 속성이 "header" 인 태그에 접근하여 객체 리턴받아 변수에 저장
let header = document.getElementById("header");
header.innerHTML = "getElementById()으로 변경한 텍스트"; //innerHTML로 HTML문서 수정
// document.getElementById("header").innerHTML = ""; // 변수에 저장하지 않고 이렇게도 사용가능
<h1 id="header">testText</h1> // HTML에 사용 할 것
//#4-1. document.태그의name.속성명
// 태그의 name 속성으로 접근 가능(name 속성 값이 중복 될 경우 자동으로 배열로 변경 됨)
let myform = document.fr;
myform.action= "test.html";
myform.submit();
let myinput = document.fr.name; // form안의 또 다른 태그로는 form이름.다른tag이름 으로 접근가능
myinput.value = "100"; // value로 input값 수정
<form action="test1.html" method="get" name="fr">
<input type="text" name="name">
</form>
//#4-2. document.태그+s[index].속성명
// 태그가 중복 될 경우 자동으로 배열로 변경 되어 사용 가능해짐
let myform = document.forms[0];
myform.action= "test.html";
myform.submit();
let myinput = document.forms[0].inputs[0]; // form안의 또 다른 태그로는 form이름.다른tag이름 으로 접근가능
myinput.value = "100"; // value로 input값 수정
<form action="test1.html" method="get" name="fr">
<input type="text" name="name">
<input type="text" name="test">
</form>
<form action="test2.html" method="get" name="fr">
<input type="text" name="test">
<input type="text" name="name">
</form>
'Web > JavaScript' 카테고리의 다른 글
| JavaScript 따라하기 8일 차 | 실습_회원 가입 (0) | 2022.06.02 |
|---|---|
| JavaScript 따라하기 6일 차 | 객체 { : } (0) | 2022.05.31 |
| JavaScript 따라하기 5일 차 | 이벤트 input onclick, etc... (0) | 2022.05.31 |
| JavaScript 따라하기 4일 차 | 함수 function (0) | 2022.05.31 |
| JavaScript 따라하기 3일 차 | 배열 Array (0) | 2022.05.30 |