[49일 차] : JavaScript (5)

서하루·2022년 12월 21일

(5) JavaScript 공부기록

목록 보기

5/6

window 객체 (BOM, DOM)
window 객체의 timer 관련 메소드
이벤트(Event)

1. window 객체

window 객체는 자바스크립트에서의 최상위 객체이며 BOM, DOM으로 나뉜다.
-BOM(Broswer Object Model) : location, screen, navigator, history 객체
-DOM(Document Object Model) : document 객체

📌 [window.] open("url", "창이름", "창의특성);

window.open("url", "창이름", "창의특성");

url : 새 창에서 열고자 하는 url 주소
창이름 : target, 같은게 이미 열려있을 경우, 열린 창이 새로고침 됨
창의특성 : 새 창의 너비, 높이 주소창여부, 툴바여부, 등 새 창의 특성 지정

창의 특성
width : 창의 너비 px
height :창의 높이 px
resizable : 창 크기 조절 가능 여부
location : 주소창 여부
menubar : 메뉴바여부
scrollbars : 스크롤바여부
status : 상태표시줄여부
toolbar : 도구모음 여부
==> yes | no

2. BOM(Broswer Object Model)

💡location 객체 : 브라우저 주소창과 관련된 객체

다른 링크로 이동할 수 있는 a 태그는 애초에 클릭시 요청할 url을 작성해둘 수 있는 href 속성을 제공한다. 하지만 button, div 등 에서는 href를 사용하지 못한다. 그러므로 location 객체를 사용해야 한다.

location.href="url"
loation.assign('url')
location.replace('url') => 뒤로가기 불가

* 새로고침
location.href=location.href ==> 새로고침 시 맨 위로 올라감
location.reload(); ==> 현재위치에서 새로고침 됨

3. DOM(Document Object Model)

HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것으로, 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공한다.

노드 : 요소와 같은말 / 태그를 구조화하였을 때, 각각의 태그를 의미함

💡요소노드(Element Node) : 태그 그 자체만을 의미
💡텍스트노드(Text Node) : 태그 내 기록되는 내용

텍스트노드가 존재하는 요소(시작태그+종료태그) : h태그, li태그, p태그 ,a태그

텍스트노드가 존재하지 않는 요소(시작태그만) : input, img

3-1 노드 생성과 관련된 메소드

텍스트노드가 존재하는 노드 생성 (시작태그 + 종료태그)

- TextNode객체 생성 : document.createTextNode(문구)
- 노드 결합 : 객체명.appendChild(node)

텍스트노드가 존재하지 않는 노드 생성 (시작태그만 존재)

요소노드 생성 : document.createElement(태그명)

4. window 객체 timer 관련 메소드

💡 [window.]setTimeout(함수, 일정시간ms) : 내가 제시한 일정 시간 이후 해당 함수를 !단 한번만! 실행

1) newWindow 변수에 새로 열린 창의 window 객체 반환
2) alert로 새로 열린 창에 알람창 뜨게 하기
3) setTimeout(function(){
	newWindow.close(); // 3초 후에 창 닫힘
}, 3000)

💡 [window.]setInterval(함수, 일정시간ms) : 내가 지정한 일정시간마다 !매번! 함수 실행

1) let count = 1 로 변수 작성
2) setIntervla(function(){
	divEl.innerHTML = count++
}, 1000)

=> 1초마다 숫자 카운팅

----------------------

1) today 변수에 현재 시간 저장 new Date();
2) hour, min, sec도 변수에 저장
3) 조건식으로 시,분,초가 한자리일 경우 앞에 0 붙이는 조건문 작성
4) 출력하면 시간 카운팅

5.이벤트(Event)

이벤트 모델 종류

💡(1). 고전 이벤트 모델 (=기본이벤트모델)

특정 요소객체를 가지고 와서 해당 요소의 이벤트 속성에 접근한 후, 이벤트 핸들러를 연결하는 방식

1) div 요소객체 가져오기 divEl
2) btn1이 클릭될 때, btn1이 클릭됐습니다 출력
document.getElementById("btn1").onclick = function(){
divEl.innerHTML += "btn1이 클릭됐습니다."};

* 이벤트 제거 시 속성값에 null 넣어주기
document.getElementById("btn1").onclick = null;

💡(2). 인라인 이벤트 모델

요소 내부에 직접적으로 이벤트 속성을 제시하여 실행할 내용을 정의하는 방식, script 태그에 있는 함수를 호출하는 방식 선호함

💡(3). 표준 이벤트 모델

w3c에서 공식적으로 지정한 이벤트 모델, 한 번에 여러개 이벤트 핸들러 설정 가능함 addEventListener

⭐⭐6. 현재 이벤트가 발생한 해당 요소객체에 접근하는 방법

1. 고전이벤트방식

1) btn4 버튼 클릭시 함수 실행
2) 요소 객체 접근하고자 한다면
console.log(e.target) = console.log(window.event.target) = cosole.log(document.getElementById("btn4") = console.log(this);

3) 속성도 바꿀 수 있음
- 클릭시 이름 바꾸기 : [this. = e.target = window.event.target]. innerHTML = "수정할 문구"

- 스타일 바꾸기 :[this. = e.target = window.event.target]. style .바꿀 스타일요소

2. 표준이벤트방식