단비의 코딩 공부 blog

[Vanilla JS]study 6일차 - 객체와 기본내장객체 본문

javascript&jquery

[Vanilla JS]study 6일차 - 객체와 기본내장객체

황굽달 2022. 12. 9. 08:22

1. 객체 선언

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //객체선언
        //속성 : 객체가 가지고 있는 고유한 특성을 기술하는 것
        //메서드 : 객체에 주는 명령 혹은 동작
        var cat = {
            name : '야옹이', //속성 : 데이터가 함수가 아닌 것
            type : '코리안 숏헤어',
            age : 2,
            cry : function(){ // method : 데이터가 함수인것
                alert('야옹야옹');
            }
        }
        
        //객체 전체 호출
        alert(cat); //데이터를 호출하지는 않음

        //속성호출 : 객체명.속성명
        alert(cat.name);

        //메서드 호출 : 객체명.메서드명();
        cat.cry();

        /*
            var img = {
                src : '이미지경로',
                alt : '대체 텍스트'
            }

            var 객체명 = {
                키명 : 값,
                키명 : 값,
                키명 : 값
            }
        */
    </script>
</head>
<body>
    <img src="이미지경로" alt="대체텍스트">
</body>
</html>

2. this 키워드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //객체선언
        var car = {
            name : '캐스퍼',
            color : ['white','red','navy','gray'],
            oil : '가솔린',
            mileage : 14,
            start : function(x){
                //this : 객체가 자신의 코드블록{} 내부에서 자신을 호출할 때 사용하는 키워드
                if(x == 'on'){
                    alert(this.name + ' 시동이 켜졌습니다.');
                }else if(x == 'off'){
                    alert(this.name + ' 시동이 꺼졌습니다.');
                }
            }
        }
        
        car.start('on');
    </script>
</head>
<body>
    
</body>
</html>

3. this 키워드2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        function coffee(menu){
            alert(menu + '메뉴를 주문하셨습니다.');
        }
    </script>
</head>
<body>
    <input type="button" value="아메리카노" onclick="coffee(this.value)">
    <input type="button" value="카페라떼" onclick="coffee(this.value)">
    <input type="button" value="바닐라라떼" onclick="coffee(this.value)">
    <input type="button" value="카라멜라떼" onclick="coffee(this.value)">
</body>
</html>

4. 생성자 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //생성자함수 : [객체]를 생성할 때 사용하는 함수
        //            객체의 설계도
        //사용이유 : 여러 개의 통일된 속성을 가지는 객체를 생성하기 위해 사용
        //코드 수를 많이 줄여 메모리 절감
        
        /*
            - 선언 문법
            function 생성자함수명(){
                this.속성명 = 값;
                this.메서드 = function(){ }
            }
            - 생성자함수명은 대문자로 시작하는것이 관례
            - 함수와 구분짓기 위해서 그렇게 작성

            - 호출 문법
            var 변수명 = new 생성자함수명();
            - new : 생성자 함수를 사용해서 새로운 객체를 새로운 인스턴스로 생성
        */

        //차동차에 대한 설계도 작성
        function Mini(model, color, mileage){
            this.model = model;
            this.color = color;
            this.mileage = mileage;
            this.starting = function(x){
                if(x == 'on'){
                    alert(this.color + '인 ' + this.model + '(이)가 시동이 켜졌습니다.');
                }else if(x == 'off'){
                    alert(this.color + '인 ' + this.model + '(이)가 시동이 꺼졌습니다.');
                }
            };
        }

        //인스턴스 - 객체생성
        var mini01 = new Mini('mini 3door','빨간색',15);
        var mini02 = new Mini('mini 컨버터블','연두색',17);
        var mini03 = new Mini('mini 컨드리맨','회색',13);

        mini01.starting('on');
        mini02.starting('on');
        mini03.starting('on');
    </script>
</head>
<body>
   
</body>
</html>

5. 프로토타입

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //Prototype : 같은 속성과 메서드가 메모리를 잡아먹지 않기 위해 나온 것
        //생성자함수는 코드블록 { }의 속성과 메서드를 인스턴스가 공유
        //복사된 객체만큼 계속 코드를 읽어서 메모리를 많이 차지
        

        //차동차에 대한 설계도 작성
        function Mini(model, color, mileage){
            this.model = model;
            this.color = color;
            this.mileage = mileage;
        };

        //프로토타입 생성
        Mini.prototype.starting = function starting(x){
            if(x == 'on'){
                alert(this.color + '인 ' + this.model + '(이)가 시동이 켜졌습니다.');
            }else if(x == 'off'){
                alert(this.color + '인 ' + this.model + '(이)가 시동이 꺼졌습니다.');
            }
        };

        //인스턴스 - 객체생성
        var mini01 = new Mini('mini 3door','빨간색',15);
        var mini02 = new Mini('mini 컨버터블','연두색',17);
        var mini03 = new Mini('mini 컨드리맨','회색',13);

        mini01.starting('on');
        mini02.starting('on');
        mini03.starting('on');
    </script>
</head>
<body>
   
</body>
</html>

6. 생성자함수 (응용문제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //학생들의 국어, 영어, 수학점수를 통해 평균을 구하시오.
        //단, 생성자함수를 통해 메모리를 절감하시오.

        //생성자함수 - 학생 한명의 평균 점수를 구하는 설계도 작성
        //매개변수 : 이름, 국어, 영어, 수학
        function Score(name, kor, eng, math){
            this.name = name;
            this.kor = kor;
            this.eng = eng;
            this.math = math;
        };
        
        //평균을 구하는 메서드를 메모리 절감을 위해서 프로토타입으로 생성
        Score.prototype.avg = function avg(){
            return '학생 이름 : ' + this.name + '<br>' + '평균 : ' + ((this.kor + this.eng + this.math) / 3) + '점<br>' + '=============================<br>';
            // alert('학생 이름 : ' + this.name + '\n평균 : ' + ((this.kor + this.eng + this.math) / 3) + '점')
        };
    
        //인스턴스 - 객체생성
        var student01 = new Score('홍길동',90,80,75);
        var student02 = new Score('김영희',80,90,60);
        var student03 = new Score('이철수',100,70,80);
    
        document.write(student01.avg());
        document.write(student02.avg());
        document.write(student03.avg());

    </script>
</head>
<body>
   
</body>
</html>

7. String 객체 선언

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //String : 문자열 객체
        //모든 객체는 속성과 메서드를 갖고 있음

        //1. 생성자함수식 객체 생성 - 인스턴스 생성
        var str01 = new String('안녕하세요.'); //object

        //2. 변수식 문자열 생성 - 이 방식을 선호
        var str02 = '안녕하세요.'; //string

        alert(str01);
        alert(str02);

        //tyoeof(데이터) : 데이터유형을 반환
        alert(typeof(str01));
        alert(typeof(str02));
    </script>
</head>
<body>
   
</body>
</html>

8. String 객체 속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //string객체의 속성
        //length : 글자수를 반환하는 속성

        var str = '안녕하세요.';

        alert(str.length);
    </script>
</head>
<body>
   
</body>
</html>

9. String 객체 속성 (응용문제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //사용자에게 ID를 입력받아, 8~12글자면, [사용할 수 있는 아이디입니다.] / 그렇지 않으면 [8~12글자로 다시 입력하세요.]라는 경고창을 띄우시오.

        var userId = prompt('아이디를 입력해주세요', '8~12글자');

        if(userId.length >= 8 && userId.length <= 12){
            alert('사용할 수 있는 아이디입니다.');
        }else{
            alert('8~12글자로 다시 입력해주세요.');
        }
    </script>
</head>
<body>
   
</body>
</html>

10. String 객체 메서드1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //속성 : 객체명.속성명
        //메서드명 : 객체명.메서드명()

        //charAt(인덱스번호) : 글자의 인덱스번호에 해당하는 한개 글자 반환

        var str = '안녕하세요.';

        alert(str.charAt(2));

        
    </script>
</head>
<body>
   
</body>
</html>

11. String 객체 메서드 (응용문제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //사용자에게 주민번호 뒷자리 7자리를 입력받아, 첫 글자가 1혹은 3이면 남자 / 2혹은 4면 여자 / 나머지는 [잘못입력하셨습니다.]
        var afterNum = prompt('주민번호 뒷자리 7개를 입력해주세요','입력');

        var f = afterNum.charAt(0);

        if(f == 1 || f == 3){
            alert('남자');
        }else if(f == 2 || f == 4){
            alert('여자');
        }else{
            alert('잘못입력하셨습니다.');
        }
    </script>
</head>
<body>

</body>
</html>

12. String 메서드2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //substr(인덱스번호, 글자수) : 문자열에서 인덱스번호부터 글자수까지 반환하는 매서드

        var str = '안녕하세요';

        alert(str.substr(0,2)) 
        alert(str.substr(2,3)) 
    </script>
</head>
<body>

</body>
</html>

13. String 메서드2 (응용문제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //사용자에게 주민번호 앞자리와 뒷자리를 입력받아, 뒷자리의 첫글자가 1혹은 2면 생년월일을 [생일 : 1990년 12월 12일], 3혹은 4면 [생일 : 2010 12월 12일]로 출력되게 하시오. //단, 1~4사이 숫자가 아니면 [잘못 입력하셨습니다.] 라고 경고창을 반환하시오.

        var beforeNum = prompt('주민번호 앞자리를 입력해주세요', '6입력');
        var afterNum = prompt('주민번호 뒷자리를 입력해주세요', '7입력');
        var f = afterNum.charAt(0);
        var y = beforeNum.substr(0,2);
        var m = beforeNum.substr(2,2);
        var d = beforeNum.substr(4,2);

        var yearNum;

        if(f == 1 || f == 2){
            yearNum = 19;
            alert('생일 : ' + yearNum + y + '년' + m + '월' + d + '일');
        }else if(f == 3 || f == 4){
            yearNum = 20;
            alert('생일 : ' + yearNum + y + '년' + m + '월' + d + '일');
        }else{
            alert('잘못 입력하셨습니다.');
        }
       
    </script>
</head>
<body>

</body>
</html>

14. String 객체 메서드2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
       //toUpperCase() : 문자열을 대문자로 변경
       //toLowerCase() : 문자열을 소문자로 변경

       var coupon = prompt('쿠폰번호를 입력하세요', '8자리 입력');

       alert('쿠폰번호 : ' + coupon.toUpperCase());
       alert('쿠폰번호 : ' + coupon.toLowerCase());
    </script>
</head>
<body>

</body>
</html>

15. Number 객체 선언

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //생성자 함수식 객체생성
        var num01 = new Number(100);

        //변수식 생성 - 이 방식을 더 선호
        var num02 = 100;

        alert(typeof(num01)); //object
        alert(typeof(num02)); //number

        //Number객체의 속성
        //1. MAX_VALUE : 자바스크립트 최대 숫자
        //2. MIN_VALUE : 자바스크립트 최소 숫자
        //3. NaN : 숫자로 나타낼 수 없는 것
        //4. POSITIVE_INFINITY : 양수의 무한대
        //5. NEGATIVE_INFINITY : 음수의 무한대
    </script>
</head>
<body>

</body>
</html>

16. Number 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        var left = prompt('좌변입력','정수입력');
        var right = prompt('우변입력','정수입력');
        
        //Number(문자열) : 숫자데이터 유형으로 변경
        //String(숫자) : 문자데이터 유형으로 변경
        alert('결과 : ' + (Number(left) + Number(right)));
    </script>
</head>
<body>

</body>
</html>

17. Number 객체메서드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //toFixed(자릿수) : 소수 자릿수를 지정하는 메서드

        var num = 62.125564;

        alert(num.toFixed(2)); //소수점 둘째자리까지만 표시
    </script>
</head>
<body>

</body>
</html>

18. Math 객체 속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //Math객체는 기본 내장 객체 중 유일하게 새롭게 인스턴스를 생성하지 않음
        //속성과 메서드만 가져다 사용

        alert(Math.PI); //원주율
    </script>
</head>
<body>

</body>
</html>

19. Math 객체 메서드 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //정수로 변환하는 메서드

        var num = 77.7777;

        alert(Math.ceil(num)); // 올림
        alert(Math.round(num)); // 반올림
        alert(Math.floor(num)); // 내림
    </script>
</head>
<body>

</body>
</html>

20. Math 객체 메서드 2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //랜덤한 숫자 반환 - 0~1사이 실수 반환
        alert(Math.random());        
    </script>
</head>
<body>

</body>
</html>

21. Array 객체 선언

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //생성자함수 객체 생성
        var arr01 = new Array(10,20,30);

        //변수식
        var arr02 = [10,20,30];
    </script>
</head>
<body>

</body>
</html>

22. Array 객체 속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        var arr01 = new Array(10,20,30);

        //lenght : 배열 값의 개수를 반환하는 속성
        alert(arr01.length);
    </script>
</head>
<body>

</body>
</html>

23.  Array 객체 메서드 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //데이터 추가 메서드
        //1. push(값) : 배열의 마지막에 값을 추가
        //2. unshift(값) : 배열의 첫번째에 값을 추가
        
        var test = [20,30,40];
        
        console.log(test);

        test.push(50);
        
        console.log(test);

        test.unshift(10);

        console.log(test);

    </script>
</head>
<body>

</body>
</html>

24.  Array 객체 메서드 2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //데이터 삭제메서드
        //1. pop() : 마지막 값을 삭제하고 반환
        //2. shuft() : 첫번째 값을 삭제하고 반환

        var test = [10,20,30,40,50];

        console.log(test);

        test.pop();

        console.log(test);

        test.shift();

        console.log(test);
    </script>
</head>
<body>

</body>
</html>

25.  Array 객체 메서드 3

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 객체</title>
    <script>
        //sort() : 오름차순으로 정렬
        //reverse() : 내림차순으로 정렬

        
        //1. 문자정렬
        var fruit = ['사과','배','바나나','오렌지','망고'];

        console.log(fruit);

        fruit.sort();

        console.log(fruit); //오름차순

        fruit.reverse();

        console.log(fruit); //반전


        //2. 숫자정렬
        var nums = [7, 11, 33, 4, 21];

        nums.sort();

        console.log(nums);

        //숫자 오름차순
        nums.sort(function(a,b){
            return a - b;
        });
        console.log(nums);

        //숫자 내림차순
        nums.sort(function(a,b){
            return b - a;
        });
        console.log(nums);
    </script>
</head>
<body>

</body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 7일차 - 기본내장객체 로또생성하기  (0) 2023.01.11
[jquery]버튼 클릭 시 텍스트 크기 조절  (0) 2022.12.23
[javascript]날짜 지정 event (로또 회차)  (0) 2022.12.07
[Vanilla JS]study 5일차 - 함수  (0) 2022.12.07
[javascript]TweenMax.js로 마우스 커서 애니메이션 만들기  (0) 2022.11.29
'javascript&jquery' Related Articles more