4. 객체에서의 메소드 속성
: 객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다
ex) 객체 var dog { name : "복실이", kind : "비글", eat : 함수(){} };
=> 객체안에 속한 eat이 함수면 이를 메소드라고 함.
<button onclick="test4();">실행확인</button>
<div class="small" id="area4"></div>
<script>
function test4(){
var area4 = document.getElementById("area4");
var name = "김민국";
var dog = {
name : "복실이",
kind : "비글",
eat : function(food){ // dog라는 객체에 eat의 메소드!라고 함
// area4.innerHTML += "eat 메소드가 호출되었습니다. <br>";
// area4.innerHTML += food; // food라는 곳에 변수 내용 담겠다.
// xx 종류인 xxx가 xxx을 먹고있어요. 라는 내용 출력하고 싶음.
// 해당 메소드내에서 해당 객체의 속성을 호출하고자 한다면 this.붙여서 제시해야 됨
// => .this를 붙이지 않으면 메스도 밖의 변수에서 값을 찾게되므로,
// 밑에 함수를 보면 kind, name이 객체 밖에 존재하지 않으므로 못찾음.
area4.innerHTML += this.kind + "종류인" + this.name +
"가" + food + "을 먹고 있어요. <br>"
}
};
dog.eat("사과"); // dog라는 객체에 eat이라는 속성에 접근하면 function(food)로 호출됨!
}
</script>
5. in과 with 키워드
- in : 객체 내부에 해당 속성이 있는지 확인해주는 키워드
- out : 객체명을 생략할 수 있음 즉, 코드를 간결하게 줄여줄 수 있는 키워드
6. 객체의 속성 추가 및 제거
7. 객체 배열을 사용한 다량의 데이터 관리
객체 배열에 속성 추가하기
: 일일이 넣지 말고 반복문으로 넣기!
<button onclick="test1();">실행확인</button>
<div class="area" id="area1"></div>
<script>
function test1(){
var student0 = {name:"김민국", java:100, oracle:90, html:90, css:70};
var student1 = {name:"김말똥", java:90, oracle:80, html:60, css:70};
var student2 = {name:"김춘추", java:90, oracle:90, html:90, css:40};
var student3 = {name:"김유신", java:100, oracle:70, html:80, css:100};
var student4 = {name:"김좌근", java:70, oracle:80, html:80, css:100};
var students = [student0, student1, student2, student3, student4];
// console.log(students);
// console.log(students.length);
// console.log(students[0]);
// 객체 배열에 속성 추가하고싶으면
// students[0].javascript = ; 일일이 하나씩 이렇게 인덱스 넣고, 내용넣고 넘넘 힘듬
// 반복문 활용하기 for in 문
for(var i in students){
students[i].javascript = 100;
students[i].getSum = function(){
return this.java + this.oracle + this.html + this.css + this.javascript
};
students[i].getAvg = function(){
return this.getSum() / 5;
};
}
console.log(students);
var area1 = document.getElementById("area1");
for(var i in students){
area1.innerHTML += "이름 : " + students[i].name
+ ", 총점 : " + students[i].getSum()
+ ", 평균 : " + students[i].getAvg() + "<br>";
}
}
</script>8. 생성자 함수
: new 키워드를 사용해서 객체를 생성할 수 있는 함수를 의미(함수명 제시시 첫글자를 대문자로)
일반 속성 정의, 메소드 속성 정의
<button onclick="test2();">실행확인</button>
<div class="area" id="area2"></div>
<script>
function test2(){
var student0 = new Student("김민국", 80, 70, 90, 100, 100);
var student1 = new Student("김춘추", 90, 80, 80, 80, 100);
var students = [student0, student1];
var area2 = document.getElementById("area2");
for(var i in students){
area2.innerHTML += students[i];
}
var myPhone = new Cellphone("아이폰 zero", 130);
console.log(myPhone);
// instanceof 연산자
// 해당 객체가 해당 생성자 함수로 생성된 객체일 경우 true 아니면 false반환
console.log(myPhone instanceof Cellphone);
console.log(myPhone instanceof Student);
}
function Cellphone(pName, price){
this.pName = pName;
this.price = price;
}
function Student(name, java, oracle, html, css, javascript){
// 일반 속성 정의
this.name = name;
this.java = java;
this.oracle = oracle;
this.html = html;
this.css = css;
this.javascript = javascript;
// 메소드 속성 정의
this.getSum = function(){
return this.java + this.oracle + this.html + this.css + this.javascript;
}
this.getAvg = function(){
return getSum() / 5;
}
this.toString = function(){
return "이름 : " + this.name + ", 총점 : " + this.getSum() + ", 평균 : " + this.getAvg();
}
}
</script>9. 내장객체
1) Number 객체
<button onclick="test1();">실행확인</button>
<div class="small" id="area1"></div>
<script>
function test1(){
var num1 = new Number(123.456789); // Integer
var num2 = 123; // Int
var area1 = document.getElementById("area1");
area1.innerHTML += "num1 : " + num1 + ", 자료형 : " + typeof(num1) + "<br>";
area1.innerHTML += "num2 : " + num2 + ", 자료형 : " + typeof(num2) + "<br>";
// 반올림 처리 : Math.round(숫자) => 반올림된 결과 number타입(자릿수)
// 반올림 처리 : 숫자.toFixed(자릿수) => 반올림된 결과 string타입(자릿수)
area1.innerHTML += "num1.toFixed(1) : " + num1.toFixed(1) + "<br>";
area1.innerHTML += "num2.toFixed(4) : " + num2.toFixed(4) + "<br>";
// 빈 자리는 0으로 채움
}
</script>2) String 객체
: String 객체의 메소드는 크게 기본 메소드와 HTML과 관련된 메소드로 구분됨
=> 기본 메소드는 이전에 했으므로 HTML 관련 메소드!
2)-(1) 객체.bold() : 굵게
2)-(2) 객체.small() : 작게
2)-(3) 객체.strike() : 취소선
2)-(4) 객체.italics() : 기울임
2)-(5) 객체.fontcolor("색상")
2)-(6) 객체.fontsize(사이즈)
2)-(7) 객체.link(url주소)
....
3) Date 객체
: Date(년, 월, 일, 시, 분, 초, 밀리세컨)
Date객체 제공하는 메소드
- 객체.getFullYear() : 년도 가져오기
- 객체.getMonth() + 1 : 월 가져오기(1월은 0, 2월은 1 그래서 원하는 "달(월)"을 가져오고 싶으면 +1 해주기)
- 객체.getDate(), getDay(), getHours(), getMinutes(), getSeconds()...
D-day 구하기
: 2021년 7월 22일 까지 남은 일 수 D-day
<script>
var end = new Date(2021, 7-1, 22); //종강날짜
var now = new Date(); //현재날짜
console.log(end-now);
// 현재 날짜부터 종강날짜까지 몇 밀리세컨초 남았는지 알려주고 있음
/*
1s == 1000ms
1m == 60s == 60*1000ms
1h == 60m == 60*60s == 60*60*1000ms
1d == 24h == 24*60m == 24*60*60s == 24*60*60*1000ms
*/
// var dday = end - now; // ms 단위
// var dday = (end-now)/1000; // s단위
// var dday = (end-now)/1000/60; // m단위
// var dday = (end-now)/1000/60/60; // h단위
var dday = (end-now)/1000/60/60/24; // day단위
alert(Math.floor(dday) + "일 남았습니다");
}
</script>10. window 객체
: Window객체는 자바스크립트 상의 최상위 객체이며 크게 BOM과 DOM으로 나눈다
- BOM : Browser Object Model
: location, screen, navigator, history 객체 - DOM : Document Object Model
: document 객체
1) window 객체
: window.open("url", "창 이름", "창의 특성")
(1) url : 열고자 하는 url 주소
(2) 창 이름
: 창이름이 같은게 이미 열려있을 경우 새로이 열려지지 않고 이미 열려있는데서 새로고침
(3) 창의 특성
: 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등(브라우저마다 다름)
=> px
width : 창의 너비
height : 창의 높이
=> yes || no
location : 주소창 -> IE적용, opera적용
menubar : 메뉴바 -> IE적용
scrollbars : 스크롤바 -> IE적용
status : 상태표시줄 -> IE적용
toolbar : 도구모음 -> IE적용
resizable : 창 크기 조절 기능 여부
공통 : 주소창 수정 안됨, toolbar 없음, 상태표시줄 없음, 메뉴바없음
크롬 : 스크롤바 있음, resizable 가능
IE : 스크롤바 없음, resizable 불가능2) window 객체의 timer 관련 메소드
(1) window.setTimeout(함수, ms) => 제시한 일정시간 후에 해당 함수 " 단 한번 " 실행
var newWindow = window.open(); // 새로 열린 창의 window객체를 반환
newWindow.alert("안녕");
setTimeout(function(){
newWindow.close();
}, 3000);(2) window.setInterval(함수, ms)
: 제시한 일정 간격마다 "매번 함수 실행"
setInterval(function(){
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
area1.innerHTML = hour + " : " + min + " : " + sec;
}, 1000);
} 
새싹개발자