JavaScript 08. 객체_ 2

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

  객체를 배열에 담으면 반복문을 통해 객체에 접근할 수 있음 

<button onclick="test1()">실행확인</button>
    <div id="area1" class="area"></div>

    <script>
        function test1(){
            const student0 = {name:"김말똥",java:100,oracle:90,html:90,css:60};
            const student1 = {name:"홍길동",java:60,oracle:100,html:80,css:70};
            const student2 = {name:"강개순",java:70,oracle:80,html:100,css:50};
            const student3 = {name:"김말순",java:100,oracle:60,html:80,css:90};

            const students = [];  // 빈 배열을 생성 후 객체 담기 

            students.push(student0);
            students.push(student1);
            students.push(student2);
            students.push(student3);

            console.log(students);
            console.log(students[0]);
            console.log(students[0].name); //==(students[0]["name"]);

            //객체명.속성명 = 새로운값 ;

            for(let 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);

            const divEl = document.getElementById("area1");
            for(let i in students){
                divEl.innerHTML += "이름 : " + students[i].name
                                 + ", 총점 : "+ students[i].getSum()
                                 + ", 평균 : "+ students[i].getAvg() + "<br>";
            }
        }
    </script>

---

생성자 함수 

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

<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.java + this.oracle + this.html + this.css+ this.javascript;
            }
            this.getAvg = function(){
                return this.getSum()/5 ;
            }
        }

    </script>

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

    <script>
        function test2(){
            const student0 = {name:"강개순",java:100,oracle:60,html:80,css:50,javascript:50}
            const student1 = new Student("홍길동",100,70,80,90,80);
            const student2 = new Student("김말똥",80,90,100,50,70);
            
            const students = [student0,student1,student2];

            console.log(students);

            for(let i in students){
                document.getElementById("area2").innerHTML += "이름 : "+ students[i].name + "<br>" ;
                                                            
            }
        }
    </script>

---

Date 내장 객체 

 new Date() : 현재 시스템 날짜, 시간에 대한 정보 
 new Date(년, 월(인덱스) , 일,시, 분, 초, ms )  : 입력한 날짜를 출력

1s == 1000ms
1m == 60s == 60*1000ms/
1h == 60m == 60*60s == 60*60*100ms
1d == 24h == 24*60m == 24*60*60s == 24*60*60*1000ms

 <button onclick="test3();">실행확인</button>
    <div id="area3" class="area"></div>

    <script>
        function test3(){
            const divEl = document.querySelector("#area3");

            //2022년 12월 25일로 세팅 
            const date2 = new Date(2022,12-1,25); //월-1 (인덱스)
            // 시간까지 지정
            const date3 = new Date(2022,11,25,17,00,30)
            // 밀리세컨초까지 
            // 1s == 1000ms
            // 5s == 5000ms
            const date4 = new Date(2022,11,25,17,00,30,5000);

            divEl.innerHTML += "Date() : " + date1 + "<br>";
            divEl.innerHTML += "Date(년,월,일) : "+ date2 + "<br>"
            divEl.innerHTML += "Date(년,월,일,시,분,초) : "+ date3 + "<br>"
            divEl.innerHTML += "Date(년,월,일,시,분,초,ms) : " + date4 + "<br>"

            divEl.innerHTML += "년도 : " + date1.getFullYear() + "<br>"
            divEl.innerHTML += "월 : " +(date1.getMonth()+1) + "<br>"
            divEl.innerHTML += "일 : " + date1.getDate() + "<br>";
            divEl.innerHTML += "요일 : "+ date1.getDay()+"<br>"
            //시 : getHours() / 분 : getMinutes() / 초 : getSeconds()

            //현재 날짜부터 종강날짜(23.3.27)까지 남은 일수 
            const end = new Date(2023,3-1,27); //종강일
            const now = new Date(); //현재날짜

            divEl.innerHTML += (end-now);
            // 현재 날짜부터 종강날짜까지 몇 밀리세컨초가 남았는지 알려주고 있음 
      
            const dday = (end-now) / (24*60*60*1000); 

            alert("종강일까지 "+ Math.round(dday)+"일 남았습니다.");
         }
    </script>

>> 년도 getFullYear() / 월 getMonth() / 일 getDate() / 요일 getDay()/ 시getHours() / 분 getMinutes() / 초 getSeconds()