[JavaScript] 9. 객체 ② (객체 배열, 생성자 함수, 날짜 함수)

1. 객체 배열을 사용한 다량의 데이터 관리

 

■ 09_객체2.html

    <button onclick="test1();">확인</button>
    <div id="area1" class="area big"></div>
    
    <script>
        function test1(){

            const student0 = {name:"김고래", java:100, oracle:90, html:80, css:60};
            const student1 = {name:"이순신", java:60, oracle:100, html:100, css:50};
            const student2 = {name:"고래똥", java:70, oracle:80, html:60, css:50};
            const student3 = {name:"고래늘보", java:100, oracle:100, html:30, css:90};

            const sArr = [];
            sArr.push(student0);
            sArr.push(student1);
            sArr.push(student2);
            sArr.push(student3);

            for(let student of sArr){

                // 각 학생객체 내부에 javascript점수 추가
                // 모든 학생객체 배열에 javascript = 100 추가
                student.javascript = 100;

                // 각 학생 객체 내부에 점수 총합을 구하는 메소드 추가
                student.getSum = function() {
                    return this.html + this.css + this.javascript;
                }

                // 평균을 구하는 메소드 추가
                student.getAvg = function(){
                    return this.getSum() / 3;
                }
            }

            console.log(sArr);

            for(let student of sArr){
                with(student){
                    area1.innerHTML += `이름 : ${name}<br>`
                    area1.innerHTML += `, 총점 : ${getSum()}<br>`
                    area1.innerHTML += `, 평균 : ${getAvg()}<br>`
                }
            }
        }
    </script>

 

▶객체 배열 생성 후, push를 이용하여 객체들 추가

 

☞ 값이 추가된 것을 확인

 

 

▶ 객체 배열 내부에 모든 학생들에게 javascript 점수를 추가하고 싶다면?

for(let student of sArr){                 student.javascript = 100;                 }             }

 

☞ of를 이용하여 반복문을 돌려서 모든 학생들에게 javascript: 100 점수를 추가

 

 

▶ 모든 학생들의 html, css, javascript 총합과 평균을 구하는 메소드

for(let student of sArr){                 // 각 학생 객체 내부에 점수 총합을 구하는 메소드 추가                 student.getSum = function() {                     return this.html + this.css + this.javascript;                 }                 // 평균을 구하는 메소드 추가                 student.getAvg = function(){                     return this.getSum() / 3;                 }             }

 

 

▶ 결과 출력

for(let student of sArr){                 with(student){                     area1.innerHTML += `이름 : ${name}<br>`                     area1.innerHTML += `, 총점 : ${getSum()}<br>`                     area1.innerHTML += `, 평균 : ${getAvg()}<br>`                 }             }

 

☞ sArr의 배열을 student 배열에 값을 넣고 이 배열의 인덱스가 끝날때까지 반복문이 돌아가는데,

student 값을 하나씩 꺼내어 그 값의 이름, 총점, 평균을 출력한다.

 

---

2. 생성자 함수

: new 키워드를 사용해서 객체를 생성할 수 있는 함수를 의미 (함수명 제시시 첫글자를 대문자로)

 

 

- 방법 ① (ex5 방식)

    <button onclick="test2();">확인</button>
    <div id="area2" class="area"></div>

    <script>

        function test2(){
            const student0 = new Student('고래',100,90,80,70,60);

            console.log(student0);
            area2.innerHTML += student0;
        }

        // 생성자 함수
        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.html + this.css + this.javascript;
            }

            this.getAvg = function(){
                return this.getSum() / 3;
            }

            this.toString = function(){
                return `이름 : ${this.name}, 총점 : ${this.getSum()}, 평균 : ${this.getAvg()}<br>`;
            }
        }
    </script>

 

 

▶ 생성자 함수

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.html + this.css + this.javascript;             }             this.getAvg = function(){                 return this.getSum() / 3;             }             this.toString = function(){                 return `이름 : ${this.name}, 총점 : ${this.getSum()}, 평균 : ${this.getAvg()}<br>`;             }         }

 

 

 

- 방법 ②  (exNext방식)

    <button onclick="test2();">확인</button>
    <div id="area2" class="area"></div>

    <script>

        function test2(){

            // exNext방식
            const student1 = new Student1("고래2",50,40,33,22,11);
            console.log(student1);
        }

        // esNext방식 클래스 생성
        class Student1 {
            constructor(name, java, oracle, html, css, javascript){
                this.name = name;
                this.java = java;
                this.oracle = oracle;
                this.html = html;
                this.css = css;
                this.javascript = javascript;
            }

            getSum = () => {
                return this.html + this.css + this.javascript;
            }
        }
    </script>

 

 

 

---

3. Date 내장 객체

    <script>
        function test3(){
            const date1 = new Date(); // 현재 날짜 및 시간
            const date2 = new Date(2023, 11-1, 12);  // 월의 경우 0월부터 시작하기 때문에 -1을 지정해줘야함
            const date3 = new Date(2023, 11-1, 12, 17, 30, 30);
            const date4 = new Date(2023, 11-1, 12, 17, 30, 30, 5000);  // 밀리세컨초 // 5초 늘어났다.

            area3.innerHTML += `new Date() : ${date1}<br>`;
            area3.innerHTML += `new Date(년, 월, 일) : ${date2}<br>`;
            area3.innerHTML += `new Date(년, 월, 일, 시, 분, 초) : ${date3}<br>`;
            area3.innerHTML += `new Date(년, 월, 일, 시, 분, 초, 밀리세컨초) : ${date4}<br>`;

            // 년도만 추출시
            area3.innerHTML += `년도 : ${date1.getFullYear()}<br>`;

            // 월만 알아내고 싶은 경우
            area3.innerHTML += `월 : ${date1.getMonth()+1}<br>`;

            // 일만 알아내고 싶은 경우
            area3.innerHTML += `일 : ${date1.getDate()}<br>`;

            // 요일만 알아내고 싶다면
            area3.innerHTML += `요일 : ${date1.getDay()}<br>`; 
        }
    </script>

 

 

▶ 년도만 추출하겠다면 getFullYear()

area3.innerHTML += `년도 : ${date1.getFullYear()}<br>`;

 

 

▶ 월만 알아내고 싶다면 getMonth()

 

☞ 월의 경우 0월부터 시작하기 때문에 + 1

area3.innerHTML += `월 : ${date1.getMonth()+1}<br>`;

 

 

▶ 일만 알아내고 싶은 경우 getDate()

area3.innerHTML += `일 : ${date1.getDate()}<br>`;

 

 

▶ 요일만 알아내고 싶은 경우 getDay()

 

☞  월요일 = 1, 화요일 = 2, 수요일 = 3, ....일요일 = 6

area3.innerHTML += `요일 : ${date1.getDay()}<br>`;

 

 

 

 

 

▶ 종강일 디데이 구하기

    <script>
            // 종강일 디데이 구하기
            const endDate = new Date(2024, 3-1, 13, 18, 0, 0);
            const startDate = new Date();

            // 현재날짜부터 종강일까지의 남은 밀리세컨초가 반환
            area3.innerHTML += `종강일 디데이 : ${Math.ceil((endDate - startDate) / (1000 * 60 * 60 *24))}<br>`;
            // Math.ceil = 올림처리
        }
    </script>