<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체 속성 추가 삭제</title>
<style>
.area {border: 1px solid;}
</style>
</head>
<body>
<h1>* 객체의 속성 추가 및 삭제</h1>
<p>
객체의 속성 중 함수 자료형인 속성들을 추가 하거나 삭제
</p>
<button onclick="test1()">실행확인</button>
<div class="area" id="area1"></div>
<script>
function test1() {
let area1 = document.getElementById('area1');
const student = {}; // 빈 객체 생성
// 객체의 속성 추가
student.name = '아무개';
student.hobby = ['게임', '독서', '운동'];
student.dream = '자바스크립트마스터';
student.age = 20;
console.log(student);
// 기준에 있는 속성이면 덮어쓰기, 없으면 추가
student.dream = '프로그래머';
console.log(student);
// 함수추가
student.toString = function() {
const str = `name : ${this.name}<br>
hobby : ${this.hobby}<br>
dream : ${this.dream}<br>
age : ${this.age}`;
return str;
}
console.log(student);
area1.innerHTML += `학생 정보 : ${student}<br>`;
// 객체 속성 제거
delete(student.age);
student.toString = function() {
const str = `name : ${this.name}<br>
hobby : ${this.hobby}<br>
dream : ${this.dream}`;
return str;
}
area1.innerHTML += `<br>age속성 삭제 후 학생 정보 :<br> ${student}<br>`;
}
</script>
<h1>객체 배열</h1>
<h3>* 객체 배열을 사용한 다량의 데이터 관리</h3>
<button onclick="test2();">실행확인</button>
<div class="area" id="area2"></div>
<script>
function test2() {
let area2 = document.getElementById('area2');
const student0 = {name:'홍길동', java:78, oracle:89, html:98, css:95};
const student1 = {name:'이고잉', java:98, oracle:77, html:88, css:95};
const student2 = {name:'우재남', java:100, oracle:89, html:78, css:85};
const student3 = {name:'채규태', java:87, oracle:100, html:68, css:95};
// const students = [student0, student1, student2, student3]; // 제일 간단한 방법
const students = [];
students.push(student0);
students.push(student1);
students.push(student2);
students.push(student3);
console.log(students);
console.log(students[0]);
console.log(students[1].name);
// 객체.속성 = 새로운값;
for(i in students) {
// 모든 학생의 java 점수가 100점으로 덮어쓰기
students[i].java = 100;
// 모든 학생의 새로운 속성(javascript) 추가
students[i].javascript = 99;
// 모든 학생의 점수의 합계 함수 추가
students[i].getSum = function() {
return this.java + this.oracle + this.html + this.css + this.javascript;
}
// 모든 학생의 점수의 평균 함수 추가
students[i].getAvg = function() {
return this.getSum() / 5;
}
}
// area2에 이름 : ???, 총점 : ???, 평균 : ???
for(i in students) {
area2.innerHTML += `이름 : ${students[i].name},<br>
총점 : ${students[i].getSum()},<br>
평균 : ${students[i].getAvg()}<br>`;
}
}
</script>
<h3>* 생성자 함수</h3>
<p>
new 키워드를 통해서 객체를 생성할 수 있는 함수(함수 제시시 첫글자는 대문자로)
</p>
<button onclick="test3();">실행확인</button>
<div class="area" id="area3"></div>
<script>
function test3() {
let area3 = document.getElementById('area3');
const student0 = new Student('홍길동', 100, 90, 70, 89);
console.log(student0);
const student1 = new Student('이고잉', 100, 90, 70, 89);
const student2 = new Student('채규태', 100, 90, 70, 89);
const students = [student0, student1, student2];
for(i in students) {
area3.innerHTML += `이름 : ${students[i].name},<br>
총점 : ${students[i].getSum()},<br>
평균 : ${students[i].getAvg()}<br>`;
}
}
function Student(name, java, oracle, html, css) {
// 일반 속성으로 정의
this.name = name;
this.java = java;
this.oracle = oracle;
this.html = html;
this.css = css;
// 메소드 정의
this.getSum = function() {
return this.java + this.oracle + this.html + this.css;
}
this.getAvg = function() {
return this.getSum() / 4;
}
}
</script>
<h1>내장 객체 : Data</h1>
<button onclick="test4();">실행확인</button>
<div class="area" id="area4"></div>
<script>
function test4() {
let area4 = document.getElementById('area4');
const date1 = new Date(); // 현재 날짜 및 시간
console.log(date1);
const date2 = new Date(2024, 7-1, 5);
console.log(date2);
const date3 = new Date(2024, 7-1, 5, 17, 26, 30);
console.log(date3);
const date4 = new Date(2024, 11-1, 25);
area4.innerHTML += `Date() : ${date1}<br>`;
area4.innerHTML += `Date(년, 월, 일) : ${date2}<br>`;
area4.innerHTML += `Date(년, 월, 일, 시, 분, 초) : ${date3}<br>`;
area4.innerHTML += `년도 : ${date1.getFullYear()}<br>`;
area4.innerHTML += `월 : ${date1.getMonth()+1}<br>`;
area4.innerHTML += `일 : ${date1.getDate()}<br>`;
area4.innerHTML += `요일 : ${date1.getDay()}<br>`;
// 현재 날짜부터 종강일(2024.11.25)까지 남은 일수 D-day
let dDay = Math.round((new Date(2024, 11-1, 25) - new Date()) / (24*60*60*1000));
area4.innerHTML += `d-day : ${dDay}`;
/*
1s == 1000ms
1m == 60s == 60*1000
1h == 60m == 60*60s == 60*60*1000
1d == 24h == 24*60m == 24*60*60s == 24*60*60*1000
*/
}
</script>
</body>
</html>