1. window 객체
- 자바스크립트에서 제공하는 내장 객체 중 최상위 객체
- 웹브라우저의 창(browser window) 자체를 가리킨다.
- window 객체는 생략이 가능하다.
ex) window.document.write( ); → document.write( );
window 객체의 함수
- alert(), prompt(), confirm()
- open(url, target, "속성들"): 팝업창 열기
- close(): 팝업창 닫기
[1] alert()
alert를 사용하면 브라우저에 메세지 알림창을 띄운다.
구문
window.alert([message]);
예제
<script>
let message = "Hello JavaScript";
window.alert(message);
</script>
출력
[2] prompt() - string prompt ([string message], [string defaultValue])
- 문자열을 입력받을 때 사용하는 함수이다.
- 숫자를 입력받아야 하는 경우에는 입력받은 문자열을 숫자열로 변환해주어야 한다. (parseInt, parseFloat 등)
- 첫 번째 매개변수: 입력 창에 띄울 메세지
- 두 번째 매개변수: 입력 받을 부분의 디폴트 값
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[3] confirm()
- confirm을 사용하면 브라우저에 Yes or No 선택을 하라는 메시지를 띄운다.
- confirm 함수는 boolean 타입의 값(True / False)을 반환한다.
<script>
const isAdult = confirm("당신은 성인입니까?");
if(isAdult){
alert("20세 이상이군요");
} else{
alert("19세 이하군요");
}
</script>
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[4] open()
웹 브라우저에서 새 창을 여는 함수
구문
window.open(url, target, 속성들);url: 새 창에 보여질 주소
target: 새로 열릴 창의 속성
_blank: 새 창에서 열림
_parent: 부모 프레임에 열림
_self: 현재 페이지를 대체
_top: 로드된 프레임셋을 대체
속성들: 창의 크기, 스크롤여부, 리사이즈 기능 등의 속성을 지정
예제
<script>
let win = null; //팝업창을 참조할 전역변수
function openWin(){
win = window.open("http://www.google.com", "_blank",
"width:500, height=500, left=200, top=200");
//win==> 새로운 윈도우창을 참조(팝업창)
alert(win);
}
</script>
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[5] close()
웹 브라우저 창이나 탭을 닫는 함수
구문
window.close();
예제
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
2. history 객체
- 웹브라우저의 주소 기록(방문 기록) 정보를 관리하는 객체
- 웹브라우저 앞뒤로 움직일 때 사용
alert(history.length);// 현재 웹브라우저에 저장된 방문기록 갯수 확인
history.back(); // 뒤로 가기(= 이전 페이지)
history.forward(); // 앞으로 가기(= 다음 페이지)
history.go(0); // 지정된 값만큼 페이지 점프(x단계 만큼 이동) // 양수는 앞으로(다음), 음수는 뒤로(이전)
3. location 객체
- 페이지 이동과 관련된 객체
- href 속성: 웹브라우저 주소 정보 관리
- 주로 웹페이지를 이동시키거나 새로고침할 때 사용한다.
//#1. location 객체의 href 속성값을 변경하여 주소 정보 변경
// => 변경된 주소로의 새로운 요청 발생 = 변경된 주소로 페이지 이동
location.href = "http://www.naver.com"; // 네이버 홈페이지로 이동
location.href = "test.html"; // test.html 파일(페이지)로 이동
//#2. location 객체의 reload() 함수 호출하여 페이지 새로고침(F5 키와 동일)
location.reload();See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
버튼을 누르면 Google 사이트로 이동한다.
4. document 객체
- DOM(Document Object Model): 문서 객체 모델
- 웹 페이지 내의 모든 컨텐츠를 객체로 관리함
- body 태그 안의 내용을 다룸
document 객체의 속성과 함수
- getElementById, getElementsByTagName, getElementsByClassName
querySelector, querySelectorAll - title 속성: 현재 문서의 제목을 출력하거나 설정
- lastModified 속성: 현재 HTML 문서가 마지막에 저장된 시간
- write() 함수
- fgColor 속성: 글자색
- bgColor 속성: 배경색
[1] title 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document.html</title>
<script>
function changeTitle(){
document.title="changed title";
}
</script>
</head>
<body>
<h2>title 속성</h2>
<button onclick="changeTitle()">제목 바꾸기</button>
<hr>
</body>
</html>document.title = "changed title" ==> 문서의 제목을 changed title로 바꿔줘
"제목 바꾸기" 버튼을 클릭하면 documet의 제목이 "changed title"로 바뀐다.
[2] lastModified 속성
최종 수정시간(=마지막 수정시간)을 반환하는 함수로, 읽기전용이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lastModified.html</title>
<script>
function last(){
let x = document.lastModified;
document.querySelector("#result").innerHTML = x;
}
</script>
</head>
<body>
<button onclick="last()">마지막 수정시간 확인</button>
<div id="result">
</div>
</body>
</html>See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[3] write () 함수
괄호 ( ) 안에 들어있는 것을 페이지에 쓰는(출력하는) 함수
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[4] fgColor(글자색), bgColor(배경색)
현재 문서(document)의 글자색을 변경하고, 배경색을 변경해주는 속성
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.