고래씌
[JavaScript] 10. window 객체 본문
1. windows용 객체
: window 객체는 자바스크립트의 최상위 객체이며 크게 BOM과 DOM으로 나눔
- BOM(Browser Object Model) : location, history, screen, navigator...
- DOM(Document Object Model) : document
1) window.open('url', '창이름', '특성')
▶ window.open('url', '창이름', '특성')
- 첫번째 인자값 : 새 창에서 열고자 하는 url 주소
- 두번째 인자값 : 창 이름, 창이름이 같은게 이미 열려있을 경우, 새로 열리지 않고 이미 열려있는 창에서 새로고침이 된다.
- 세번째 인자값 : 창의 특성, 새로 열릴창의 너비, 높이, 툴바, 스크롤바, 리사이즈여부 등등...(브라우저마다 작동방식 다름)
▶ 창의 특성
1) px
width = 500
height = 600
2) yes / no
resizable : 창 크기 조절가능 여부
location : 주소창이 보일건지 안보일건지 여부
menubar : 메뉴바 표시 여부
scrollbars : 스크롤바 표시 여부
status : 상태표시줄
toolbar : 도구 모음
3) 새창 열리며 네이버 창 열림
window.open('http://naver.com','네이버');
=> 같은 창이 이미 열려 있어서 확인버튼을 누르면 계속 새로고침 됨
4) 새창 열리며 열면서 크기가 지정되어 열림
window.open('http://naver.com', '네이버', 'width=500, height=600, resizable=no, location=no');
1-2. window 객체의 timer 관련 메소드
1) window.setTimeout(콜백함수, ms)
■ 10_window객체.html
<button onclick="test2();">확인</button>
<script>
function test2(){
// 확인버튼을 누르면 3초후 alert창이 뜨도록 설정
// setTimeout(function(){ // 익명함수
// alert('하이하이');
// }, 3000);
const newWindow = window.open() // 새로 열린 창의 window 객체 반환
newWindow.alert('이 페이지는 3초후에 자동으로 닫힙니다..') // 새로 열린창의 alert임
let timeFn = setTimeout(function() { // timeFn 변수에 저장
newWindow.close(); // 3초뒤 창 닫음
},3000); // 3초
clearTimeout(timeFn); // setTimeout 비워주는 함수
}
</script>
▶ setTimeout
- 내가 제시한 일정 시간 후에 해당 함수를 "딱 한번"만 실행
- 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데, 이 경우 setTimeout 사용.
- 첫번째 인자 : 실행할 코드를 담고 있는 함수를 받음
- 두번째 인자 : 지연 시간을 밀리초(ms) 단위로 받음
☞ ★지워주지 않으면 백그라운드 어딘가에 계속 실행을 하고 있기 때문에 반드시 지워줘야 한다!★
▶ clearTimeout
: setTimeout을 비워주는 함수
☞ clearTimeout를 쓰려면 꼭 변수명을 제시해줘야 한다.
■ clearTimeout을 선언하지 않았을 때
|
<script>
function test2(){
const newWindow = window.open() // 새로 열린 창의 window 객체 반환
newWindow.alert('이 페이지는 3초후에 자동으로 닫힙니다..')
let timeFn = setTimeout(function() {
newWindow.close();
},3000); // 3초
}
</script>
|
=> 3초 뒤 자동으로 창이 닫히는 것을 확인
■ clearTimeout을 선언했을 때
|
<script>
function test2(){
const newWindow = window.open() // 새로 열린 창의 window 객체 반환
newWindow.alert('이 페이지는 3초후에 자동으로 닫힙니다..') // 새로 열린창의 alert임
let timeFn = setTimeout(function() {
newWindow.close();
},3000); // 3초
clearTimeout(timeFn); // setTimeout 비워주는 함수
}
</script>
|
=> 3초가 지나도 자동으로 창이 닫히지 않는 것을 확인
2) window.setInterval(콜백함수, ms);
■ 10_window객체.html
<button onclick="test3()">확인</button>
<div id="area1" class="area"></div>
<script>
function test3(){
let count = 0;
const clock = setInterval(
function(){ // 첫번째 인자
const now = new Date(); // 현재 날짜, 월, 일, 시간 등의 정보를 가져옴
let hour = now.getHours(); // 시간 가져옴
let min = now.getMinutes(); // 분 가져옴
let second = now.getSeconds(); // 초 가져옴
count++;
if(count > 10) clearInterval(clock); // 10초가 지나면 멈춘다
if(hour > 12) {
hour -= 12; // 12시가 되면 0으로 바뀜 // 13시 -> 1시
}
if(hour < 10) {
hour = "0"+hour; // 1시 -> 01시
}
if(min < 10) {
min = "0"+min; // 1분 -> 01분
}
if(second < 10) {
second = "0"+second;
}
area1.innerHTML = `${hour}:${min}:${second}`;
}
, 1000 // 1초 // 2번째 인자
)
// setInterval : 내가 지정한 시간 간격마다 매번 함수를 실행
}
</script>
▶ setInterval
- 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데, 이경우 setInetrval 사용
- 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용
- 첫번째 인자: 실행할 코드를 담고 있는 함수를 받음.
- 두번째 인자: 반복 주기를 밀리초(ms) 단위로 받음.
▶if(count > 10) clearInterval(clock);
=> count++; 있어 1초가 증가할때마다 count가 1씩 증가하는데 count값이 10을 초과하면(10초가 지나면) 멈추도록 설정한다
|
if(count > 10) clearInterval(clock);
|
=> 10초가 지난뒤, 시간이 멈춘 것을 볼 수 있다.
2. BOM(Browser Object Model)
1) location 객체
: 브라우저 주소창과 관련된 객체
▶ a 태그는 클릭시 요청할 url을 작성할 수 있는 href 속성을 제공한다.
|
|
▶div 태그
button 태그 assign => 뒤로가기, replace => 뒤로가기가 없는 페이지 전환
▶ 새로고침
|
<button onclick="location.href = location.href">새로고침</button>
<br>
<button onclick="location.reload();">새로고침</button>
|
2) screen 객체
=> 해상도에 따라 가로, 세로, 해상도, 브라우저 위치 값 등이 다르다
3) navigator 객체
=> 브라우저에 대한 정보(제조사, 버전, 종류... 등을 가지고 있는 객체)
4) history 객체
=> 페이지 이동에 대한 기록을 저장하고 있는 객체
3. DOM(Document Object Model)
▶ HTML에 있는 각각의 태그들을 노드(Node)라고 부름
- 요소노드(Element Node) : 태그 그 자체만을 의미함
- 텍스트노드(Text Node) : 태그내에 기록되는 문자열
▶ 텍스트노드가 존재하는 요소(시작태그가 종료 태그가 한쌍으로 이루어져있는 요소)
: div, a, h1, p, pre...
▶ 텍스트노드가 존재하지 않는 요소(시작태그로만 이루어져 있는 요소)
: input, img ....
- 속성노드(attribute Node) : 태그내의 속성
- 코멘트노드(comment Node) : HTML내에 작성하는 주석
3.1 노드생성과 관련된 메소드
1) 텍스트 노드가 존재하는 노드 생성(시작태그 + 종료태그)
■ 자바스크립트를 통해 동적으로 요소를 만드는 방법
(1) innerHTML 사용
|
area2.innerHTML = '<h3>안녕하세요</hr3>';
|
(2) document에서 제공하는 메소드를 통해 요소객체로 만드는 방법
ⓐ elementNode 객체 생성
|
// document.createElement('태그명');
const h3 = document.createElement("h3"); // <h3></h3>
|
ⓑ testNode 객체 생성
|
// document.createTextNode("문구");
const textNode = document.createTextNode("안녕하세요"); // 안녕하세요
|
ⓒ 두 개의 노드를 연결(요소노드 하위로 텍스트노드 추가)
☞ 요소노드.appendChild(노드)
☞ appendChild는 node 객체만 자식 요소로 추가할 수 있음
|
h3.appendChild(textNode); // <h3>안녕하세요</h3>
h3.setAttribute('id','js')
|
☞ setAttribute 메서드는 다른 메서드와 함께 사용하여 HTML 요소의 여러 속성 값을 변경할 수도 있습니다. 예를 들어, 다음 코드는 h3태그의 id를 모두 'js'로 변경
=> console.log(h3, typeof h3);
▶ div태그 요소에 h3를 출력하고 싶다면?
|
// appendChild를 이용
area2.appendChild(h3);
|
=> 확인버튼을 클릭하면 "안녕하세요" 출력됨
2) 텍스트노드가 존재하지 않는 노드 생성(시작태그만 존재)
<button onclick="test5();">확인</button>
<div id="area3" class="big"></div>
<script>
function test5(){
const img = document.createElement('img'); // <img> //클릭하면 이미지 생성됨
img.setAttribute('src','https://iei.or.kr/resources/images/main/logo.svg');
img.width = "200";
img.height = "100";
img.onclick = function(){ // 이미지클릭하면 삭제됨
// 요소 삭제
img.remove();
}
console.log(img);
area3.appendChild(img); // 확인버튼 클릭시 이미지 생성됨
}
</script>
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 함수_구매정보 검색 실습문제 (0) | 2023.11.13 |
|---|---|
| [JavaScript] 11. 이벤트(addEventListener, mouseenter.. 등) (0) | 2023.11.13 |
| [JavaScript] 회원가입 - 실습문제3 (0) | 2023.11.10 |
| [JavaScript] 9. 객체 ② (객체 배열, 생성자 함수, 날짜 함수) (0) | 2023.11.10 |
| [JavaScript] 8. 객체 ① (객체의 선언, in과 with 키워드, 반복문, 메소드 속성, 추가 및 제거) (0) | 2023.11.10 |
