Javascript object

객체지향 프로그래밍 OOP ( object orientied programing )

• 내장객체 : 자바스크립트에서 미리 만들어 놓은 객체
• 사용자 정의 객체 : 프로그래머가 임의로 만들어 사용하는 객체
• 객체는 속성과(property) 과 메소드(method())를 가지고 있다. 접근방법 '.' ( dot 연산자 ),[]
  • ex) 객체명.속성=값;   객체명['속성']=값;
• 객체에 생성된 메소드에서 객체의 속성을 사용할 때는 꼭 this. 속성을 사용한다

※ 객체

• 속성 ( property) - 특정 능력을 가지고있는 변수/배열
  
  • ex) 키,이름,나이...
• 메소드() == 함수() 
  
  • ex) 뛰기 걷기 공격 - 행동
•  사용법
  • ex) 변수.속성 = 값;  , 메소드(값);     => 함수 호출문 사용

객체의 생성과 선언

var 객체명 = {
	속성1 : 값,
    속성2 : 값,
    속성3 : 값,
    메소드1 : function(매개변수){
    	//처리할 코드;
    },
    메소드2 : function(매개변수1, 매개변수2 ....){
    	//처리할 코드;
        retrun 값;
    }
}

ex) 객체 예시

var grade = {
    name: '최순실',
    kor: 15, 
    math: 30,
    eng: 8, 
    sci: 18,
    hap:0,
    avg:0,
    input:function(){
        this.name=prompt('이름을 입력하시오','');
        this.kor=Number(prompt('국어점수를 입력하시오',''));
        this.math=Number(prompt('수학점수를 입력하시오',''));
        this.eng=Number(prompt('영어점수를 입력하시오',''));
        this.sci=Number(prompt('과학점수를 입력하시오',''));
    }, 
    result_hap: function () {
        this.hap=this.kor + this.math + this.eng + this.sci;
        console.log(this.name + '의 과목 총점은 ' + this.hap + '점고, 평균은 '+(this.hap/4) +'점입니다');
    },
    result_avg: function (){
        this.avg = this.hap/4;
        console.log('\n'+'평균은 '+this.avg+' 점 입니다.');
    }
};
grade.input();
grade.result_hap();
grade.result_avg();

with 문

'객체'. 을 생략할 수 있다.

ex)

with(객체명){
	속성1=값;
    속성2=값;
    메소드();
}

var output ='';
    var student = {
        이름:'연하진',
        국어:92,
        수학:98,
        영어:96,
        과학:98
    };

    with(student){
        output +='이름:' + 이름 + '\n';
        output +='국어:' + 국어 + '\n';
        output +='수학:' + 수학 + '\n';
        output +='영어:' + 영어 + '\n';
        output +='과학:' + 과학 + '\n';
        output +='총점:' + (국어 + 수학 + 영어 + 과학);
    };

    console.log(output);

객체 + with 문 놀이동산 예제 수정

var play = {
            age : 0,
            code : '',
            pay : 0,
            dis : 0,
            name : '',
            total :0,

            input : function(){
                this.age = Number(prompt('나이를 입력하세요',''));
                this.code = prompt('입장 코드를 입력하세요(주간개장:A, 야간개장:B)','');
            },

            process : function(){
            with(this){
                if(age>=1 && age<=3){
                    dis=0.1;
                }else if(age>=4 && age<=12){
                    dis=0.5;
                }else if(age>=13 && age<=19){
                    dis=0.7;
                }else{
                    dis=1;
                }
                
                if(code=='A' || code=='a'){
                pay=30000;
                name = '주간';
                }else if(code=='B' || code=='b'){
                    pay=20000;
                    name='야간'
                }

                total=pay*dis
                
                }
            },
            
            output : function(){
            with(this){
             console.log('당신의 나이는'+age+'살이고,'+ name +'개장을 선택하였으며, 총 비용은' + total +'원 입니다.')
              }       
            }
        }
        with(play){
        play.input();
        play.process();
        play.output();
        }

다양한 객체 생성 방법 ( 배열 생성방법과 유사하다)

1.
var hotel = {};

2.
var hotel = new Object();

3.
var hotel = {
	//변수 입력
}

객체 배열 == json type

• 여러개의 객체를 처리할 수 있는 배열
• 형식

var person = [
            {name : '최순실', age : 60, gender : 'F', add:'청송교도소'},
            {name : '이순신', age : 1500, gender : 'M', add:'서울시 종로구'},
            {name : '서인국', age : 30, gender : 'M', add:'인천'}
        ];
        console.log(person[0].name);

• 형식2 ( 반복문으로 객체배열 불러오기 )

var person = [
            {name : '최순실', age : 60, gender : 'F', add:'청송교도소'},
            {name : '이순신', age : 1500, gender : 'M', add:'서울시 종로구'},
            {name : '서인국', age : 30, gender : 'M', add:'인천'}
        ];
        
        for(var i=0; i<person.length; i++){
            console.log(person[i].name, person[i].age, person[i].gender)
        }

내장객체

• javascript에서 미리 만들어 놓은 객체

1.Number 객체

• 숫자면 == Number객체
• 숫자.toFixed() 메소드 => 소숫점 두번째 자리에서 반올림 하여 첫번째 자리 숫자 까지 처리
• Number.parseInt(123.124123) => 정수만 취하는 메소드
• Number.isInteger(123.124123) => 매개변수에 정수가 들어오면 true 정수가 아닌 수가 들어오면 false
• 예시

var number = Number(prompt('정수입력',''));
       
console.log(parseInt(number));
console.log(Number.isInteger(number));

if(Number.isInteger(number)){
console.log('정수입니다.');
}else{
console.log('정수가 아닙니다.');
}

2. String 객체

• 문자면 == String 객체
• 문자열.length => 문자열의 길이를 계산하는 property
• 태그에 관련된 메소드

var string = 'JavaScript';
        var output = '';
        output += 'anchor: ' + string.anchor() + '<br/>';
        output += 'big: ' + string.big() + '<br/>';
        output += 'blink: ' + string.blink() + '<br/>';
        output += 'bold: ' + string.bold() + '<br/>';
        output += 'fixed: ' + string.fixed() + '<br/>';
        output += 'string: ' + string.fontcolor('Red') + '<br/>';
        output += 'fontsize: ' + string.fontsize(15) + '<br/>';
        output += 'italics: ' + string.italics() + '<br/>';
        output += 'link: ' + string.link('http://hanb.co.kr') + '<br/>';
        output += 'small: ' + string.small() + '<br/>';
        output += 'strike: ' + string.strike() + '<br/>';
        output += 'sub: ' + string.sub() + '<br/>';
        output += 'sup: ' + string.sup() + '<br/>';

        document.write(output);

var str = '안녕하세요! String 객체입니다.';
        // 0 1 2 3 4567  모든 string에는 고유 index 번호가 존재한다 ex) 안 == 1, 녕 ==2...

console.log('문자열의길이:'+str.length); // 해당 문자열의 총 길이를 값으로 받는다
console.log('spqjsWoanswk'+str.charAt(3)); // 해당 index번호에 위치한 문자를 값으로 받는다
console.log('S의 아스키코드값'+str.charCodeAt(7)); // 키보드를 컨트롤할 수 있다, 아스키코드 : 10진수 코드값
console.log('문자열추가'+str.concat('GOOD')); // 문자열 뒤에 문자열을 추가
console.log('해당문자의 index번호'+str.indexOf('!')); // 인덱스 번호를 가장 앞에서부터 찾는다
console.log('해당문자의 index번호'+str.lastIndexOf('!')); // 인덱스 번호를 가장 뒤에서부터 찾는다
console.log('String 문자열이 있으면:'+str.match('String')); // 해당 문자열을 찾아 존재하는지 확인한다 값: String
console.log('String을 STRING으로 변경'+str.replace('String','STRING')); // 해당 문자열을 찾아 교체
console.log('(안녕)과 일치하는 문자열의 위치:'+str.search('안녕')); //해당 문자열을 찾아 존재하는지 확인 값: 문자열의 index 번호
console.log('0번째부터 6글자 리턴:'+str.slice(0,6)); // 0~6번째 문자 끊어오기
console.log('0번째부터 6글자 리턴:'+str.substr(7,6)); // 7번째 문자부터 그 뒤 7번째 글자까지 끊어오기 
var a = str.split('!'); // 해당 문자를 기준으로 앞과 뒤로 문자열을 나누어준다 ( 배열로 호출 가능 )
console.log('0번:'+a[0] , '1번'+a[1]); // ex) 위 예제 사용
console.log('abcdefg'.toUpperCase()); // 문자 대문자로 변경
console.log('ABCDEFG'.toLowerCase()); // 문자 소문자로 변경

Array 객체

• 배열명.length 속성 => 방의 개수
• 배열명.sort(); => 정렬
• push(); => 마지막방 개수를 늘리면서 값 대입( 추가 )
• pop(); => 마지막방 제거

Date 객체

현재 위치의 실시간 시간을 가져올 수 있는 객체

var date = new Date();

console.log('년:'+date.getFullYear()); // 년도
console.log('월:'+(date.getMonth()+1)); // 월 (0~11)
console.log('일:'+date.getDate()); // 요일 ( 1~6 -> 월~토 / 0 == 일요일 )
console.log('요일:'+date.getDay()); // 날짜

        var a=''; //getDay(); 를 이용해 한 주 나타내기
        switch(date.getDay()){
            case 0 : a = '일요일'; break;
            case 1 : a = '월요일'; break;
            case 2 : a = '화요일'; break;
            case 3 : a = '수요일'; break;
            case 4 : a = '목요일'; break;
            case 5 : a = '금요일'; break;
            case 6 : a = '토요일'; break;
        }
        console.log('오늘은:'+a);
        
console.log('시:'+date.getHours()); // 시간
console.log('분:'+date.getMinutes()); // 분
console.log('초:'+date.getSeconds()); // 초

Math 객체

• 수학적 연산/계산을 처리해주는 객체

    console.log(Math.abs(-800));//절대값
    console.log(Math.sqrt(100));//제곱근
    console.log(Math.floor(78.458));//소수점 이하 내림
    console.log(Math.max(-800,400,30));//최대값
    console.log(Math.cos(0));//코사인
    console.log(Math.sin(45));//사인
    console.log(Math.tan(90));//탄젠트
    console.log(Math.pow(10,2));//10*10
    
    console.log(Math.random());
    console.log(Math.random()*10);//0~1 사이의 난수
    console.log(Math.floor(Math.random()*10));

Math 객체 + if 문 for 문 + sort 객체 사용 로또 추첨 게임 ( 중복 검사 알고리즘 )

    var lotto = new Array();
    
    for(var i=0; i<6; i++){
        lotto[i] = Math.floor(Math.random()*45)+1;
        for(var j=0; j<i; j++){
            if(lotto[i]==lotto[j]){
                i--;
                break;
            }
        }
    }

    lotto.sort(function (left, right){
        return left - right
    })
    
    alert(lotto);

Audio 객체

<script>
    var audio = new Audio('./bass.mp3');
</script>

</head>
<body>
    <button onclick="audio.play()">PLAY</button>
    <button onclick="audio.pause()">PAUSE</button>
    <input type="number" onchange="audio.currentTime=this.value"/>
    <input type="number" onchange="audio.volume=this.value" min="0" max="1" step="0.1">
</body>