220701 - 자바스크립트 - 객체 생성, 객체의 배열화, 내장 객체

※ 함수 (js)

함수 = 객체

속성이 함수 => 메서드

 

 

객체 생성

• 객체 리터럴 : 중괄호 내에 1개 이상의 프로퍼티 기술해 객체 생성

•  

    <script>
        var book = {
            title:'어린왕자',
            pages:65,
            price:15000,
            author: "생텍쥐페리"
        };
        document.write("<h2>**신간 도서 정보**</h2>");
        for (var i in book){    
            document.write(i+" : "+book[i]+"<br>");
        }
    </script>

 

//

**신간 도서 정보**
title : 어린왕자
pages : 65
price : 15000
author : 생텍쥐페리

 

 

• 매개변수 O

    <script>
        var person = {
            name: '김철수',
            age: 26,
            eat: function (food){  //메서드
                document.write(this.name+"가 "+food+"을(를) 먹습니다");  

                //객체 안에서는 객체명 대신 this 사용 가능
            },
            address: '서울시 강동구'
        };
        person.eat("짜장면");
        document.write("<br>"+person.name +"의 현재 나이는 "+person.age+"입니다");
    </script>

//

김철수가 짜장면을(를) 먹습니다
김철수의 현재 나이는 26입니다

 

 

• 리턴값 O

        var person = {
            name: '김철수',
            age: 26,
            eat: function (food){
                return this.name+"가 "+food+"을(를) 먹습니다";  
            },
            address: '서울시 강동구'
        };
        var result = person.eat('비빔밥');
        document.write(result);
        document.write("<br>");
        document.write("<br>"+person.name +"의 현재 나이는 "+person.age+"입니다");

//

김철수가 비빔밥을(를) 먹습니다

김철수의 현재 나이는 26입니다

 

 

※ with문
: 특정 객체 반복 사용할 시 객체명 생략하고 속성이름만 입력해도 속성값 출력 가능

 

ex.
with(객체명){
속성이름}

 

 

• 문제 : 속성 각각 출력 후 총점, 평균 구하기

        var student = {
            이름:'홍길동',
            국어:90, 영어:70,
            수학:88, 과학:78
        };

=>

    <script>
        var student = {
            이름:'홍길동',
            국어:90, 영어:70,
            수학:88, 과학:78
        };
        document.write("<h2>"+student.이름+"의 성적표</h2>");
        document.write("국어 : "+student.국어+"<br>");
        document.write("수학 : "+student.수학+"<br>");
        document.write("영어 : "+student.영어+"<br>");
        document.write("과학 : "+student.과학+"<br>");
    </script>


    <script>
        var student = {
            이름:'홍길동',
            국어:90, 영어:70,
            수학:88, 과학:78
        };
        with(student){   
            document.write("<h2>"+이름+"의 성적표</h2>");
            document.write("국어 : "+국어+"<br>");
            document.write("수학 : "+수학+"<br>");
            document.write("영어 : "+영어+"<br>");
            document.write("과학 : "+과학+"<br>");
            var sum=국어+영어+수학+과학;
            var avg=sum/4;
            document.write("총점 : "+sum+"<br>");
            document.write("평균 : "+avg);
        }
    </script>

 

 

• 빈 객체 생성 후 속성 추가 (동적 생성) 

•    

 <script>
        var student={}; //빈 객체 생성
        student.이름='홍길동';
        student.취미='악기';
        student.특기='프로그래밍';
        student.장래희망='풀스택개발자';
        //toString : 객체를 문자열 형태로 반환하는 대표적 메소드 
        //Object 최상위객체에 속함 -> 모든 자바스크립트 객체는 toString 상속 가능
        student.toString=function(){
            var output ="";
            for (var key in this){
                output+=key +" : "+this[key] + "<br>";
            }
            return output;
        };
        document.write(student.toString());
    </script>

//

이름 : 홍길동
취미 : 악기
특기 : 프로그래밍
장래희망 : 풀스택개발자
toString : function(){ var output =""; for (var key in this){ output+=key +" : "+this[key] + "
"; } return output; }

=> toString 객체까지 출력함

 

 

• toString 수정

    <script>
        var student={}; //빈 객체 생성
        student.이름='홍길동';
        student.취미='악기';
        student.특기='프로그래밍';
        student.장래희망='풀스택개발자';

        student.toString=function(){
            var output ="";
            for (var key in this){
                if (key!='toString'){
                output+=key +" : "+this[key] + "<br>";
                }
            }
            return output;
        };
        document.write(student.toString());
    </script>

//
이름 : 홍길동
취미 : 악기
특기 : 프로그래밍
장래희망 : 풀스택개발자

 

 

• 속성 제거

    <script>
        var student={}; //빈 객체 생성
        student.이름='홍길동';
        student.취미='악기';
        student.특기='프로그래밍';
        student.장래희망='풀스택개발자';
        student.toString=function(){
            var output ="";
            for (var key in this){
                if (key!='toString'){
                output+=key +" : "+this[key] + "<br>";
                }
            }
            return output;
        };
        document.write(student.toString());
        delete(student.장래희망); //속성 제거
        document.write("==========<br>");
        document.write(student.toString());
    </script>

 

 

객체의 배열화 (배열에 객체 추가)

•  

    <script>
        var students=[]; //배열
        var student1 = {이름:'홍길동',국어:90,수학:80,영어:87}; //객체
        var student2 = {이름:'김철수',국어:33,수학:85,영어:45};

       //객체의 배열화
        students.push({이름:'홍길동',국어:90,수학:80,영어:87});  
        students.push({이름:'김철수',국어:33,수학:85,영어:45});
    </script>

 

 

•  

    <script>
        var students=[]; //배열
        var student1 = {이름:'홍길동',국어:90,수학:80,영어:87}; //객체
        var student2 = {이름:'김철수',국어:33,수학:85,영어:45};

        students.push({이름:'홍길동',국어:90,수학:80,영어:87});  //배열에 객체 넣음 = 객체의 배열화
        students.push({이름:'김철수',국어:33,수학:85,영어:45});
        students.push({이름:'박영수',국어:36,수학:95,영어:35});
        students.push({이름:'이진수',국어:53,수학:75,영어:65});

        for (var i in students){
            students[i].getSum=function(){
                return this.국어+this.영어+this.수학;
            }
            students[i].getAvg=function(){
                return this.getSum()/4;
            }
        }
        document.write("<h2>3학년 1반 성적표</h2>");
        document.write("이름 국어 수학 영어 총점 평균<br>");
        for (var i in students){
            with(students[i]){
                document.write(이름 + " "+ 국어+ " "+ 수학+" "+
                영어+" "+getSum()+" "+getAvg()+"<br>");
            }
        }
    </script>

 

 

 

내장 객체

• 수학 관련

•  

    <script>
        var num1 = Math.abs(-5);  //절대값
        var num2=Math.pow(2,3); //제곱값
        var num3=Math.sqrt(4);  //제곱근
        var num4=Math.max(35,4,46,774,325,2);
        var num5=Math.min(33,4,636,42);
        var num6=Math.ceil(2.3); //올림
        var num7=Math.floor(5.7); //내림
        var num8= Math.round(7.3); //반올림
        var num9=Math.random(); //0~1 사이의 난수(랜덤수) 리턴

        for (var i=1;i<=6;i++){
            document.write("<h1>"+Math.floor((Math.random()*45)+1)+"</h1>");
        }
    </script>

 

 

• 문제 : 난수 사용해 가위바위보 게임

    <script>
        var game=['바위','가위','보'];
        var my=prompt("가위바위보 게임(1.바위 2.가위 3.보) 숫자로 입력");
        var com=Math.floor(Math.random()*3)+1;
        document.write("<h1>나는"+game[my-1]+"를 선택했고 컴퓨터는 "
            +game[com-1]+"를 선택</h1>");
        document.write("<img src='../images/my_img_"+my+".JPG'>");
        document.write("<br>");
        document.write("<img src='../images/my_img_"+com+".JPG'>");
</script>


    <script>
        var game=['바위','가위','보'];
        var my=prompt("가위바위보 게임(1.바위 2.가위 3.보) 숫자로 입력");
        var com=Math.floor(Math.random()*3)+1;
        document.write("<h1>나는"+game[my-1]+"를 선택했고 컴퓨터는 "
            +game[com-1]+"를 선택</h1>");
        document.write("<img src='../images/my_img_"+my+".JPG'>");
        document.write("&nbsp;&nbsp; vs &nbsp;&nbsp;");
        document.write("<img src='../images/my_img_"+com+".JPG'>");
        if (my==com){
            document.write("<h2>비겼습니다</h2>");
        } else if ((my==1&&com==2)||(my==2&&com==3)||(my==3&&com==1)){
            document.write("<h2>내가 이겼습니다</h2>");
        } else{
            document.write("<h2>컴퓨터가 이겼습니다</h2>");
        }
</script>

 

 

• 기념일 계산 예제

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내장객체 응용</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            margin: auto auto;
            border: 1px solid #ccc;
            width: 500px;
            text-align: center;
        }
        .day1{
            padding: 10px;
        }
        .day1>h3{
            font-size: 1.2em;
            color: #666;
        }
        .day1 .count{
            font-family: "맑은 고딕",sans-serif;
            font-weight: bold;
            font-size: 3.5em;
            margin: 10px 10px 0 10px;
            line-height: 90px;
        }
        .bar{
            width: 100%;
            margin-top: 60px;
            padding-left: 20px;
            height: 40px;
            background-color: #747474;
            color: #fff;
            font-size: 1.2em;
            line-height: 40px;
        }
        .day2{
            width: 420px;
            margin: 20px auto;
        }
        .day2 ul{
            list-style: none;
            border-bottom: 1px dashed #ccc;
            height: 60px;
        }
        .day2 ul:last-child{
            border-bottom: none;
        }
        .day2 .item_title{
            float: left;
            width: 160px;
            font-weight: bold;
            font-size: 1.5em;
            line-height: 60px;
        }
        .day2 .item_date{
            float: left;
            margin-left: 80px;
            font-size: 1.2em;
            text-align: center;
            line-height: 60px;
        }
    </style>
    <script>
        var day=prompt("언제 처음 만났나요?","yyyy-mm-dd"); 
        var firstDay=new Date(day); 
        var now=new Date();
        var toNow=now.getTime();
        var toFirst=firstDay.getTime();
        var passedTime=toNow-toFirst;
        var passedDay=Math.round(passedTime/(24*60*60*1000));
        //밀리초 -> 일 단위 변환
        window.onload=function(){
            document.querySelector("#count").innerHTML=passedDay+"일";
            document.querySelector("#title").innerHTML+=" ("+day+")";
            calDate(100);
            calDate(200);
            calDate(365);
            calDate(1000);
        }
        function calDate(days){
            var future=toFirst+days*(24*60*60*1000);
            var someday=new Date(future);
            var year=someday.getFullYear();
            var month=someday.getMonth()+1;  
            var date=someday.getDate();
            document.querySelector('#date'+days).innerHTML=year+
            "년 "+month+"월 "+date+"일";
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="day1">
            <h3 id="title">우리 만난 지</h3>
            <p class="count" id="count">며칠?</p>
        </div>
        <div class="bar">기념일 계산</div>
        <div class="day2">
            <ul>
                <li class="item_title">100일</li>
                <li class="item_date" id="date100"></li>
            </ul>
            <ul>
                <li class="item_title">200일</li>
                <li class="item_date" id="date200"></li>
            </ul>
            <ul>
                <li class="item_title">1년</li>
                <li class="item_date" id="date365"></li>
            </ul>
            <ul>
                <li class="item_title">1000일</li>
                <li class="item_date" id="date1000"></li>
            </ul>
        </div>
    </div>
</body>