JAVA SCRIPT 3차시 - 객체

'use strict';

var student = {

                        name : "홍길동",

                        kor : 90,

                        eng : 80,

                        mat : 70

        };

        

        var output = "";

        output += "이름 : " + student.name + " 총점 : " +(student.kor + student.eng+student.mat);

        console.log(output);

 

-->더간단하게 사용하기

        var output = "";

        with(student){

                output += "이름 : " + student.name + " 총점 : " +(kor + eng+ mat);

                console.log(output);

        }

 

--toString메소드를 만들어서 객체목록 출력

student.toString = function(){ //스트링(객체) : 객체를 문자열 형태로 표현한 String을 반환

                var output ="";

                for(var key in this){ //student의 속성을 하나하나씩 key에 담음

                        if(key != 'toString'){

                                output += key + '\t' + this[key] + '\n';        

                        }

                }

                return output;

        }

        console.log(student.toString());

        

        delete (student.mat); //mat객체속성 삭제

        console.log(student.toString());//우리의 toString이 아닌 object의 toString호출됨

 

**사람 한명에 대한 객체를 생성할때는 리터럴 속성으로 객체생성하는 것이 좋음

**하지만 다양한 사람이 나오면 생성자속성을 이용해서 객체를 생성해야 함.

 

--생성자객체(여러객체를 생성하기 위해)

//생성자함수를 이용한 객체 생성

        function grade(kor, eng, mat) {

                this.kor = kor;//grade의 속성 property가 됨

                this.eng = eng;

                this.mat = mat;

        }

        

        function student(name,grade) {

                this.name = name;

                this.grade = grade;

                this.getSum = function() {

                        return this.grade.kor + this.grade.eng + this.grade.mat;

                }

                this.getAverage = function() {

                        return this.getSum()/3; //this = student객체

                }

                this.toString = function() {

                         return this.name + '\t' + this.grade.kor+'\t'+this.grade.eng

                                        +'\t'+this.grade.mat +'\t'+this.getSum()+'\t'+this.getAverage();

                                }

                }

        var students = [];

        students.push(new student("홍길동", new grade(90,80,70)));

        students.push(new student("박길동", new grade(50,60,70)));

        for(var i in students){

                document.write(students[i].toString()+"<br>");

        }

 

홍길동 90 80 70 240 80

박길동 50 60 70 180 60

 

**prototype

function student(name, kor, eng, mat){//각 객체마다 prototype을 가지고 있다

                this.name = name;

                this.kor = kor;

                this.eng = eng;

                this.mat = mat;

        }

        

        student.prototype = {

                        getSum : function() {

                                return this.kor + this.eng + this.mat;

                        },

                        getAverage : function() {

                                return this.getSum()/3; //this = student객체

                        },

                        toString : function() {

                                 return this.name + '\t' + this.kor+'\t'+this.eng

                                        +'\t'+this.mat +'\t'+this.getSum()+'\t'+this.getAverage();

                                }

        }

        

        var students = [];

        students.push(new student("홍길동",90,80,70));

        students.push(new student("박길동",50,60,70));

        for(var i in students){

                document.write(students[i].toString()+"<br>");

        }

홍길동 90 80 70 240 80

박길동 50 60 70 180 60

 

 

**상속(inherit)        

        function Person(name){ //person생성자

                this.name = name;

        }

        Person.prototype.setName = function(name) {

                this.name = name;

        }

        

        Person.prototype.getName = function() {

                return this.name;

        }

        

        function Student(name){

                

        }

        var you = new Person("홍길동"); //객체생성

 

        Student.prototype = you;//student가 person을 상속받음

        var me = new Student("박길동"); 

        me.setName("조길동");

        console.log(me.getName());

 

 

**캡슐화(ENCAPSULATION) -> JA - inherit -(7-13, 7-21)

        function student(name, kor, eng, mat){

            var name = name;

            this.setName = function(n){

                name = n;

            }

         }

 

7-13

  // 생성자 함수를 선언합니다.

        function Rectangle(w, h) {

            // 변수를 선언합니다.

            var width = w;

            var height = h;

            // 메서드를 선언합니다.

            this.getWidth = function () { return width; };

            this.getHeight = function () { return height; };

            this.setWidth = function (w) {

                width = w;

            };

            this.setHeight = function (h) {

                height = h;

            };

        }

        Rectangle.prototype.getArea = function () {

            return this.width * this.height;

        };

        // 변수를 선언합니다.

        var rectangle = new Rectangle(5, 7);

        rectangle.width = -2;

        // 출력합니다.

        alert('AREA: ' + rectangle.getArea());

 

7-21

  class Rectangle {

            constructor(width, height) {

                this._width = width;

                this._height = height;

            }

            // width의 게터와 세터

            get width() {

                return this._width;

            }

            set width(input) {

                this._height = input;

            }

            // height의 게터와 세터

            get height() {

                return this._height;

            }

            set height(input) {

                this._width = input

            }

            getArea() {

                return this._width * this._height;

            }

        }

        const rectangle = new Rectangle(100, 200);

        //rectangle.width = 200;

        document.write(rectangle.width +"<br>");

        document.write(rectangle.getArea());

**내장객체

//자바스크립트 내장객체

        var arr1 = [];//배열 생성

        

        arr1[0] = "준성";

        arr1[1] = "지은";

        arr1[2] = "태완";

        

        var arr2 = new Array(3);

        

        arr2[0] = "형준";

        arr2[1] = "나은";

        arr2[2] = "아윤";

        var arr3 = new Array("령경","승희","영기");

        

        //배열 -> 문자열

        document.write(arr1.toString()+ "<br>");//,기준

        document.write(arr1.join(" ")+ "<br>");//공백 기준

        

        //배열 추가

        var arr4 = arr3.concat(arr2);

        document.write(arr4.toString()+ "<br>");

        

        

        //배열 부분추출

        //령경,승희,영기,형준,나은,아윤

        var arr5 = arr4.slice(1,4);//승희, 영기, 형준

        document.write(arr5.toString()+ "<br>");

        

        

        //배열 부분 삭제 splice(인덱스, 갯수)

        //령경,승희,영기,형준,나은,아윤

        var arr6 = arr4.splice(1, 2);//arr6 : 지워진 사람이 저장됨

        document.write(arr4.toString()+ "<br>");//arr4 : 삭제하고 남은 사람들

        

        //령경,형준,나은,아윤

        var arr7 = arr4.sort();//오름차순

        document.write(arr7.toString()+ "<br>");

        

        var array = [23,11,98,3,4,65,87,3];

        

        //내림차순 정렬

        array.sort(function(a, b) {

                if(a<b){

                        return 1;//자리바꾸기

                }else if(a>b){

                        return -1;

                }else {

                        return 0;

                }

        })

        document.write(array.toString()+ "<br>");

 

 

--이미지예제(innerObject - mission)

        var arr = [];

        for(var i=0;i<7;i++){

                arr[i] = "../images/pic" + (i+1)+".jpg";

        }

        

        window.onload = function() { //이미지 객체

                var img = document.getElementById("img");

        //0~6 : 난수발생

                var n = Math.floor(Math.random()*7);//소숫점 제거

                img.src = arr[n];

        }

        

        

</script>

</head>

<body>

        <img id = "img" src= "">

 

 

--아이디/이메일 예제(innerObject-i exam04)

function checkId() {

                     var id = document.fmt.id.value;

                     var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

                     var result = 0;

                     for(var i=0;i<id.length;i++){

                               result = str.indexOf(id.charAt(i))//찾지못하면 -1

                                         if(result == -1){

                                                   break;

                                         }

                     }

                                         if(result == -1){

                                                   alert('적적한 아이디 형식이 아닙니다.');

                                         }

                               }         

                     

          

          function checkEmail(){

                     var email = document.fmt.email.value;

                     var result = email.indexOf('@');

                     if(result == -1){

                               alert('적절한 이메일 형식이 아닙니다.');

                     }

                     return false;

          }

          

          

          function check() {

                     checkId();

                     checkEmail();

          }

 

 

---타이머 예제(innerObject-i_exam03)

var timeId;

        var running = false;

        function show() {

 

                var now = new Date();

                var hour = now.getHours();

                var minute = now.getMinutes();

                var seconds = now.getSeconds();

                var timeValue = hour+"시" + minute + "분" +seconds+"초";

                

                document.fmt.display.value = timeValue;

                timeId = setTimeout("show()",1000); //show함수를 1초간격으로 재생

        }

        

        function startClock() {

                if(running){

                        return;

                }

                show();

                running = true;

        }

        

        function stopClock() {

                if(running){

                        clearTimeout(timeId);

                        running = false;

                }

                

        }

        

</script>

</head>

<body>

        <form name="fmt">

                <input type="text" name="display"><br>

                <input type="button" name="start" value="시작" onclick="startClock()">

                <input type="button" name="stop" value="종료" onclick="stopClock()">

        </form>

 

 

**정규표현식

//문자열 match(정규표현식)=> 매칭된 문자열 리턴

        var result = 'sports'.match(/sp/);

        

        if(result){ //if문 안에 값만 가지고 있어도 true출력

                alert(result);

        }

        

        //정규표현식.exec('문자열') => 매칭된 문자열 리턴

        var re = /JS/ig; //i : 소대문자 구분없이, g : 전역검사

        var str = "fdjSfdsJSj js sjle;lfkJS jsdfjkljs";

        var result = re.exec(str);

        

        while(result){

                document.write(result + "<br>");

                result = re.exec(str);

        }

        

        //퀴즈

        var str = "This is a data : August 28 2020";

        var re = /\w*\s\d+\s\d+/;

        var result =str.match(re);

        document.write(result +"<br>");

        

        

        //문자열 replace(정규표현식, 변경 문자열)

        var str = "Java-JavaScript";

        var re = /(\w+)-*(\w+)/;

        var result = str.replace(re, "$2-$1");

        document.write(result + "<br>");

        

        //퀴즈

        //SW -> 소프트웨어

        var str = "오늘 우리는 SW세상에서 살고 있다. SW가 매우 중용한 시기이다. 그래서 SW 열심히 공부해야 겠다.";

        var result = str.replace(/SW/g,"소프트웨어");

        document.write(result);

 

 

        //퀴즈

        //정상 dolsam77@nate.com

        //실패 342dolsam77@nate.com

        //실패 dolsam77nate.com

        //실패 dolsam77@nate.cocococo

        

        var str = "dolsam77@nate.cocococo";

        var re = /^\D\w+@\w+\.\w{2,3}$/ig;

        

        var result = re.test(str);

        if(result){

                alert("성공");

        }else{

                alert("실패");

        }

 

 

//계산기퀴즈(mission02)

 

var calculate = {

                        

                        

                cals : function(){

                                var opt = this.value //+,-

                                if(opt=='+'){

                                        var result = (document.fmt.f1.value)*1 + (document.fmt.f2.value)*1;

                                        return document.fmt.result.value = result;

                                }else if(opt=='-'){

                                        var result = (document.fmt.f1.value)*1 - (document.fmt.f2.value)*1;

                                        return document.fmt.result.value = result;

                                }

                        }               

        };

        

        window.onload = function(){

                var plus = document.getElementById("plus");

                var minus = document.getElementById("minus");

                

                plus.onclick= calculate.cals;

                minus.onclick= calculate.cals;

        }

</script>

</head>

<body>

        <h2>계산기</h2>

        <table border="1">

                <form name="fmt">

                        <tr>

                                <td>숫자1</td>

                                <td><input type="text" name="f1"></input></td>

                        </tr>

                        <tr>

                                <td>숫자2</td>

                                <td><input type="text" name="f2"></input></td>

                        </tr>

                        <tr>

                                <td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;

                                        <input type="button" value="+" id="plus"></input> &nbsp;&nbsp;&nbsp;&nbsp;

                                        <input type="button" value="-" id="minus"></input>

                                </td>

                        </tr>

                        <tr>

                                <td>결과</td>

                                <td><input type="text" name="result"></input></td>

                        </tr>

                </form>

        </table>

 

 

 

--프로퍼티사용

var calculate = {

                        num1 : 0,//프로퍼티

                        num2 : 0,

                        sum : 0,

                        

                cals : function(){

                                var opt = this.value //+,-

                                num1 = parseInt(document.fmt.f1.value);

                                num2 = parseInt(document.fmt.f2.value);

                                if(opt=='+'){

                                        sum = num1 + num2;

                                }else {

                                        sum = num1 - num2;

                                }

                                document.fmt.result.value = sum;

                        }               

        };

 

 

미션>>//정렬하고 1등에서 3등까지만 (배열에 남기고) 출력하시오.