📌 window 객체
- 브라우저 창 자체를 나타내는 객체
- window 객체는 자바스크립트의 최상위 객체이며 DOM, BOM으로 분류된다.
DOM(Document Object Model) : document
BOM(Browser Object Model) : location, history, screen, navigator
* window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다.
그래서 window라는 객체 호출부를 생략할 수 있다.
ex) window.alert() == alert()
➰ window.setTimeout(함수,지연시간(ms))
→ 일정 시간 뒤 호출할 수 있는 함수
document.getElementById("btn1").addEventListener("click",function(){
setTimeout(function(){
alert("3초후 출력 확인!")
},3000 );
})
! 알럿창을 3초 뒤에 확인할 수 있다.➰currentTime( ) : 현재 시간을 화면에 출력
let interval;;//setInterval를 저장하기 위한 전역 변수
//setInterval(함수,지연시간(ms))
function clockFn(){
const clock = document.getElementById("clock");
clock.innerHTML = currentTime();//현재 시간을 화면에 출력
/* 지연시간(1초)마다 반복(첫 반복도 지연 시간 후에 시작)
페이지가 로딩 후 1초 후 부터 반복 (지연 -> 함수 -> 지연 -> 함수)
*/
interval = setInterval(function(){
clock.innerHTML=currentTime();
},1000);
}
➰ clearInterval(변수);
→ clearInterval(변수)로 반복 중단
📌 자바스크립트 객체
자바스크립트의 객체는 {} 내에 Key:Value 가 모여있는 형태로 작성된다.(Map 형식)
(참고) 자바스크립트 객체 모양의 문자열
== JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)
-> "{ K:V , K:V , K:V }"
📌 자바스크립트 객체 생성 방법
1. {} : 객체 리터럴 표기법을 이용한 생성
2. 생성자 + new 생성자()를 이용한 생성
⭐ 자바 스크립트 객체의 key는 무조건 string! "key" 'key' key 작성해도 string으로 인식 한다. ⭐
🔊 { } : 객체 리터럴 표기법을 이용한 생성
HTML 코드
<button id="btn1">객체생성1</button>
<div class="area" id="div1"></div>
RS 코드
document.getElementById("btn1").addEventListener("click",function(){
const div1 = document.getElementById("div1");
const product = {
//속성
"pName":"텀블러",
'brand':"스타벅스",
color : ["white","black",sliver"],
price : 3500
//메소드(기능) -> 사용하고 싶으면 호출 해야함!
mix : function(){
console.log("섞기 시작합니다.")
}
결과 출력
-> 자바스크립트 객체용 향상된 for문!
-> 객체 내부에 작성된 key를 순서대로 하나씩 꺼내옴
for(let item in product){
div1.innerHTML = product[key]
}
메소드 호출
product.mix();
🔊 생성자 + new 생성자()를 이용한 생성
같은 형태의 객체가 다수 필요한 경우 사용하면 좋음! 코드 길이 감소! 재사용성이 증가!
html 코드
<button id="btn2">객체 생성2(생성자함수)</button>
생성자 함수 작성
funciton Student(name,grade,ban){
//속성
this.name = name;
this.grade = grade;
this.ban = ban;
→ 해석 : 생성되는 객체 **에 매개변수 ** 대입
//기능(메소드)
this.intro = function(){
console.log(grade+ "학년" + ban + "반" + name + "입니다.");
};
}
생성자 함수 호출
document.getElementById("btn2").addEventListener("click",function(){
const std1 = new Student("홍길동",3,1);
const std2 = new Student("홍서동",2,7);
const std3 = new Student("홍북동",1,9);
console.log(std1.grade); // 3
console.log(std2); // Student {name: '홍서동', grade: 2, ban: 7, intro: ƒ}
std1.intro(); //3학년1반홍길동입니다.
}
