DOM : Document Object Model
->HTML(웹문서, 웹페이지 ) 문서를 객체 기반으로 표현한 것
childNodes : 자식 노드 리스트
parentNode : 부모 노드
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
childNodes[index]: index 번째 노드
previousSibling : 이전 형제 노드
nextSibling : 다음 형제 노드
Node와 Element의 차이
Node : 태그, 속성 , 주석, 내용 등을 모두 노드라고 표현함.
Element : Node의 하위개념으로 요소 노드만들 가리킨다.
Element만 선택하는 방법
children: 자식 요소만 선택
parentElement : 부모 요소 선택
firstElementChild: 첫 번째 자식 요소 반환(없으면 null)
lastElementChild: 마지막 자식
자바스크립트의 객체
자바스크립트의 객체는 {}내에 Key Value가 모여있는 형태로 작성된다
(Map 형식)
{k:v , k:v , k:v}
-객체생성방법
1) {} (객체 리터럴 표기법)을 이용한 생성 방법
2) 생성자 함수 + new 연산자를 이용한 생성 방법
// {}객체 리터럴 표기법을 이용한 객체 생성
const brand ="투썸";
const product ={
pName : "텀블러",
brand : "스타벅스",
color : ["white", "black","silver"],
amount : 100,
mix : function(add){alert(add+"를 자동으로 섞어줍니다.")},
// 기능(메서드임)
information : function(){console.log(brand);},
//객체 안에서 brand를 호출하지만 객체 밖의 brand가 호출된다
information2 : function(){console.log(this.brand);}
// 객체 안의 brand는 this를 붙혀야 함
};
//생성자 함수
//1. 생성자 함수 정의
//**생성자 함수의 함수명은 반드시 대분자로 시작한다! */
function Student(name, age, java, db, html, css){
//매개변수로 전달받은 값을 생성되는 객체의 속성에 대입하기
// 여기서 this == 생성될 객체 / this.name속성에 넣고 없으면 속성 생성
this.name = name;
this.age = Number(age);
this.java = Number(java);
this.db = Number(db);
this.html = Number(html);
this.css= Number(css);
//평균 점수 반환(소수점 둘째 자리까지 표시)
this.getAvg = function(){
const sum = this.java+ this.db + this.html+ this.css
const avg = sum/4;
// 숫자.toFixed(자릿수) : 소수점 자리수를 지정하는 함수
//지정된 자릿수 밑에서 반올림처리
return avg.toFixed(2);
}//this : 현재 객체가 가지고있는 속성의 값
}
내장객체
date 객체 : 날짜 관련 객체
document.getElementById("btn1").addEventListener("click",function(){
const date1 = new Date();
//GMT
const date2 = new Date("Mon Nov 08 2021 16:33:50");
console.log(date1);
console.log(date2);
//UTC
const date3 = new Date(2021, 11,8,9,0,0);
console.log(date3);
//Date객체에서 년 월 일 시 분 초 요일 얻어오기
console.log("년도 : " + date1.getFullYear());
// 월은 0~11로 표현되므로 1 더해줘야 표현됨
console.log("월 : " + (date1.getMonth()+1));
console.log("일 : " + date1.getDate());
//일요일== 0 ~ 토요일==6
const arr =["일","월","화","수","목","금","토",];
//index로 요일 지정 가능
console.log("요일 : " + date1.getDay());
console.log("시 : " + date1.getHours() );
console.log("분 : " + date1.getMinutes() );
console.log("초 : " + date1.getSeconds());
})
windows 객체 : 브라우저 창 자체를 나타내는 객체
-window 객체는 창 자체를 나타내고 있으므로 어디서든 접근이 가능하다
-그래서 window라는 객체 호출부를 생략할 수 있다.
(window.alert() == alert())
-window.setTimeout(함수, 지연시간(ms))
지정된 지연 시간마다 함수가 반복 수행됨
-window.setInterval(함수, 지연시간)
지정된 지연 시간마다 함수가 반복 수행됨
->setInterval은 중복되서 사용될수 있기 때문에 여러번 호출되지 못하게 처리가 필요함