JavaScript의 window용 객체에 대해 알아보자
window용 객체
✔️ window 객체는 자바스크립트의 최상위 객체이며 크게 BOM과 DOM으로 나뉨
- BOM(Browser Object Model): 브라우저창을 핸들링 가능
종류: window, location, screen, navigator, history
- DOM(Document Object Model): 요소들을 핸들링 가능
종류: document
- window.open("url", "창의이름", "창의특성");
👉🏻 window.open("url", "창의이름", "창의특성");
첫 번째 매개변수: 새 창에서 열고자 하는 url 주소
두 번째 매개변수: 창의 이름, 창의 이름이 이미 같은 게 열려 있을 경우 새로이 열리지 않고 이미 열려 있는 데서 새로고침
세 번째 매개변수: 창의 특성, 새로이 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등 (브라우저마다 다름)
*창의 특성
=> px 단위
width : 창의 넓의
height : 창의 높이
=> yes / no (여부를 판단)
resizable : 창 크기 조절 가능 여부
location : 주소창을 보여 줄 건지 안 보여 줄 건지 / 주소창 수정 가능하게 할 건지 아닐 건지
menubar : 메뉴바를 보일 건지 안 보일 건지
scrollbars : 스크롤바를 보일 건지 안 보일 건지
status : 상태 표시줄을 보일 건지 안 보일 건지
toolbar : 도구 모음을 보일 건지 안 보일 건지
여러 속성을 한 번에 지정하고 싶다면 ,로 나열함
"속성명=속성값, 속성명=속성값, ..."
👉🏻 크롬: 속성이 거의 적용되지 않음
👉🏻 Internet Explorer: 모든 속성이 다 적용됨
<button onclick="test1();">네이버</button>
<script>
function test1() {
// window.open(); // 그냥 새로운 창이 뜸
// window.open("http://www.naver.com", "ㅋㅋㅋ");
// window.open("http://www.naver.com", "ㅋㅋㅋ", "width=500, height=600");
// 크롬 vs IE
// 공통점: 주소창 수정 안 됨, toolbar 없음, 상태표시줄 없음, 메뉴바 없음
// 크롬: 스크롤바 있음, resizable 가능
// IE: 스크롤바 없음, resizable 불가능
// window.open("http://www.naver.com", "ㅋㅋㅋ",
// "width=500, height=600, resizable=no, location:yes, menubar=yes, scrollbars=yes, toolbar=yes");
// 크롬: 속성이 거의 적용되지 않음
// IE: 모든 속성이 다 적용됨
window.open("http://www.naver.com", "ㅋㅋㅋ",
"width=500, height=600, resizable=no, location=no, menubar=no, scrollbars=no, toolbar=no");
}
</script>
window 객체의 timer 관련 메소드들
- window.setTimeout()
👉🏻 n초 뒤에 어떤 일을 "한 번" 수행하고 싶을 경우 사용
<button onclick="test2();">실행확인</button>
<script>
function test2() {
// 3초 후에 alert 뜨게끔
/*
window.setTimeout(function() {
alert("환영합니다~!");
}, 3000);
*/
// 3초 후에 해당 페이지가 닫히게끔
var newWindow = window.open();
// window.open 함수는 새로 열린 창의 window 객체를 반환
newWindow.alert("3초 후에 이 페이지는 닫힙니다.");
window.setTimeout(function() {
newWindow.close();
// newWindow.close();
// window.close 함수는 현재 이 브라우저 창을 닫아 주는 역할
}, 3000); // 시간을 지정하지 않으면 확인을 누르는 순간 바로 꺼짐
// setTimeout: 내가 제시한 일정 시간 후에 해당 함수를 "단 한 번"만 실행
}
</script>
- window.setInterval(함수, ms);
👉🏻 setInterval: 내가 지정한 시간 간격마다 "매번" 함수를 실행
<button onclick="test3();">실행확인</button>
<div id="area1" class="area"></div>
<script>
function test3() {
var area1 = document.getElementById("area1");
// 1초마다 ㅋ를 출력
/*
setInterval(function() {
area1.innerHTML += "ㅋ";
}, 1000);
*/
// 1초씩 카운트
/*
var count = 0;
setInterval(function() { // setInterval 앞에 window. 생략 가능
area1.innerHTML = count++;
}, 1000);
*/
// 시계 만들기 (시분초만)
setInterval(function() {
// 현재 시각을 알아내기
var now = new Date();
// 숙제: 년, 월, 일도 출력
var year = now.getFullYear();
var month = now.getMonth();
var day = now.getDay();
// 시, 분, 초만 추출
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
// area1.innerHTML = hour + " : " + min + " : " + sec + "<br>";
// 0초 => 00초로 나오게 하고 싶음
// 5분 => 05분
// 15시 => 3시
// 시간 단위에 대한 처리
if(hour > 12) { // 13, 14, 15, ...
hour -= 12; // 13 => 1
}
if(hour < 10) { // 0 ~ 9
hour = "0" + hour;
}
// 분 단위에 대한 처리
if(min < 10) { // 0 ~ 9
min = "0" + min;
}
// 초 단위에 대한 처리
if(sec < 10) { // 0 ~ 9
sec = "0" + sec;
}
area1.innerHTML = year + "년 " + month + "월 " + day + "일 <br>" + hour + " : " + min + " : " + sec + "<br>";
}, 1000);
}
</script>
BOM(Browser Object Model)
location 객체
👉🏻 브라우저 주소창과 관련된 객체
👉🏻 assign: 뒤로 가기 가능
👉🏻 replace: 뒤로 가기 불가능(history까지 건드려서 지워 버림)
👉🏻 reload 메소드 호출: 현재 페이지의 현재 위치로 새로고침(마치 새로고침이 안 된 것처럼 보이기도 함!)
<button onclick="console.log(location);">실행확인</button>
<!-- href 속성: 주소창의 내용물을 담고 있는 속성 -->
<br><br>
<a href="http://www.naver.com">네이버로 이동</a>
<!-- 굳이 a 태그가 아니더라도 url 이동을 할 수 있음 -->
<br><br>
<label onclick="location.href='http://www.naver.com';">네이버로 이동</label>
<br><br>
<!-- location 객체의 assign, replace, reload 속성의 값은 메소드 -->
<button onclick="location.assign('http://www.google.com');">구글로 이동</button>
<!-- assign: 뒤로 가기 가능 -->
<br>
<button onclick="location.replace('http://www.google.com');">구글로 이동</button>
<!-- replace: 뒤로 가기 불가능(history까지 건드려서 지워 버림) -->
<br><br>
<!-- reload 메소드: 새로고침을 해 주는 메소드 -->
<!-- 자바스크립트로 새로고침을 하는 두 가지 방법 -->
<!-- 1. 자기 자신을 호출: 페이지의 상단으로 새로고침 -->
<button onclick="location.href=location.href;">새로고침</button>
<br>
<!-- 2. reload 메소드 호출: 현재 페이지 위치로 새로고침 -->
<button onclick="location.reload();">새로고침</button>
screen 객체
👉🏻 클라이언트 컴퓨터 화면에 대한 속성값을 가지고 있는 객체 (해상도에 영향을 받음)
<button onclick="console.log(screen)">스크린 객체 확인</button>
<!-- 해상도에 따라 가로, 세로 해상도 값이 다 다르다 -->
navigator 객체
👉🏻 브라우저에 대한 정보를 가지는 객체 (브라우저 종류에 영향을 받음)
<button onclick="console.log(navigator);">navigator 객체 확인</button>
<!-- 브라우저 종류에 따라 제조사나 세팅환경 등의 값들이 다 다르다! -->
history 객체
👉🏻 이 브라우저의 열람 이력 정보를 저장하는 객체
<button onclick="console.log(history);">history 객체 확인</button>
<!-- 윈도우의 열람 이력을 통해 뒤로가기 등의 기능을 구현할 수 있음 -->
DOM(Document Object Model)
👉🏻 HTML에 있는 각각의 태그들을 노드(Node)라고 한다.
- 요소노드 (Element Node): 태그 그 자체만을 의미
- 텍스트노드 (Text Node): 태그 내에 기록되는 내용
👉🏻 텍스트노드가 존재하는 요소: 시작태그와 종료태그가 한 쌍으로 이루어져 있는 요소들
(div, a, h1, h2, ..., p, pre, ...)
👉🏻 텍스트노드가 존재하지 않는 요소: 시작태그로만 이루어져 있는 요소들
(img, input, ...)
<div>
<h2>안녕</h2>
<p>
<img>
</p>
</div>
<table>
<tr>
<td></td>
</tr>
</table>
노드 생성과 관련된 메소드
- 텍스트노드가 존재하는 노드 생성 (시작태그 + 종료태그)
👉🏻 <h3>안녕하세요</h3>
를 만들어 보고자 함
동적으로 요소 만들기
=> 처음으로 브라우저 창에 화면이 로딩되었을 때는 없던 요소가
자바스크립트 코드가 실행되는 시점에서 만들어져서 화면에 뿌려짐내용
<동적으로 요소 만드는 방법 1. "문자열"로 만드는 방법>
<button onclick="test4();">실행확인</button>
<div id="area2" class="small"></div>
<script>
function test4() {
document.getElementById("area2").innerHTML = "<h3>안녕하세요</h3>";
}
</script>
<동적으로 요소 만드는 방법 2. document 객체에서 제공하는 메소드를 통해 "요소 객체"로써 만드는 방법>
👉🏻 1) 요소 노드 생성: elementNode 이름의 객체 생성
var elementNode = document.createElement("h3"); // <h3></h3>
👉🏻 2) 텍스트 노트 생성: textNode 이름의 객체 생성
var textNode = document.createTextNode("안녕하세요"); // 안녕하세요라는 내용물 생성
👉🏻 3) 두 개의 노드를 연결: 즉, 요소노드 하위로 텍스트노트 추가
요소노드.appendChild(텍스트노드);
👉🏻 4) 부모요소.appendChild(자식요소);
document.getElementById("area2").appendChild(elementNode);
<button onclick="test4();">실행확인</button>
<div id="area2" class="small"></div>
<script>
function test4() {
// 1) 요소 노드 생성: elementNode 이름의 객체 생성
var elementNode = document.createElement("h3"); // <h3></h3>
// 잘 만들어졌는지 확인해 보기
// console.log(elementNode); // 문자열이 아닌 태그로 만들어졌음! (보라색)
// console.log("<h3></h3>"); // 일반 문자열 (검정색)
// 2) 텍스트 노트 생성: textNode 이름의 객체 생성
var textNode = document.createTextNode("안녕하세요"); // 안녕하세요라는 내용물 생성
// 잘 만들어졌는지 확인해 보기
// console.log(textNode); // "안녕하세요"
// console.log("안녕하세요"); // 안녕하세요
// 3) 두 개의 노드를 연결: 즉, 요소노드 하위로 텍스트노트 추가
// 요소노드.appendChild(텍스트노드);
elementNode.appendChild(textNode); // <h3>안녕하세요</h3>
console.log(elementNode); // <h3>안녕하세요</h3>
console.log(typeof(elementNode)); // object
document.getElementById("area2").innerHTML = elementNode /* toString() */;
// [object HTMLHeadingElement]
// innerHTML은 반드시 문자열 형태로만 넣어 줘야 함 (즉, 사용 불가)
// div 태그 요소에 출력하고 싶다면 appendChild 메소드를 이용해 요소에 요소를 또 연결해 줘야 함
// 부모요소.appendChild(자식요소);
document.getElementById("area2").appendChild(elementNode);
// h3 태그로 만들어진 안녕하세요가 출력됨!
}
</script>
- 텍스트노드가 존재하지 않는 노드 생성
👉🏻 텍스트노드가 존재하는 노드 생성의 동적 방법 2번에서 2번 과정(텍스트노드 생성)이 생략된 형태
👉🏻 1) 요소 노드 생성
var img = document.createElement("img"); // <img>
👉🏻 2) 속성 추가
img.src = "이미지주소"; // 이미지 주소, 해당 서버가 살아 있는 한 계속 쓸 수 있음
👉🏻 3) div에 출력 - 부모요소.appendChild(자식요소);
document.getElementById("area3").appendChild(img);
<button onclick="test5()">실행확인</button>
<div id="area3" class="big"></div>
<script>
function test5() {
// 텍스트노드가 존재하지 않는 <img> 태그를 이용
// 1) 요소 노드 생성
var img = document.createElement("img"); // <img>
// <img src="~~~~" width="~~" height="~~" ...>
// 2) 속성 추가
img.src = "https://naverpa-phinf.pstatic.net/MjAyMTEyMTVfMjUy/MDAxNjM5NTQwMDUxOTIw.B1TTY4Cm5_EKpIjW96jNUn5VY3ewSAMuwL0U4sXuq-4g.A5fEX14c7sX5Ysi8bcCVdGus2qvi-OsiO24uOFXvvOEg.JPEG/211215_gfa.jpg"; // 이미지 주소, 해당 서버가 살아 있는 한 계속 쓸 수 있음
img.width = "200";
img.height = "100";
console.log(img);
// 3) div에 출력
// 부모요소.appendChild(자식요소);
document.getElementById("area3").appendChild(img);
}
</script>
- 노드 삭제
👉🏻 주의할 점: 부모 요소를 정확히 짚어 줘야 함!
👉🏻 지우고자하는요소객체.remove();
<firstChild.remove() - 가장 첫 번째 자손을 지우고 뒤에 것을 당김>
<button onclick="test6();">삭제</button>
<script>
function test6() {
// div 요소 객체의 첫 번째 자손을 지우겠다 (맨 앞에 것이 지워짐)
document.getElementById("area3").firstChild.remove();
}
</script>
👉🏻 가장 앞의 이미지가 지워졌으나 뒤에 것들이 당겨져 와서 이렇게 보이는 것!
<lastChild.remove() - 가장 마지막에 생성된 자손을 지움>
<button onclick="test6();">삭제</button>
<script>
function test6() {
// div 요소 객체의 첫 번째 자손을 지우겠다 (맨 앞에 것이 지워짐)
// document.getElementById("area3").firstChild.remove();
// div 요소 객체의 맨 뒤의 자손을 지우겠다 (맨 뒤에 것이 지워짐)
document.getElementById("area3").lastChild.remove();
}
</script>