노력이 좋아서

<step44>'js_클래스'

zoaseo 2022. 5. 20. 12:14

1) 11.class.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        //객체는 연관된 속성과 메소드를 묶어서 관리
        //객체 리터럴
        let person1 = {
            name: '민영',
            age: 32,
            address: '삼산동',
            // speak: function(){
            //     console.log('금요일이에요!');
            // }
            speak() {
                console.log('금요일이에요!');
            }
        }
        console.log(person1.name);
        console.log(person1['age']);
        person1.speak();

        //생성자 함수
        function Person(name, age, address){
            //this = {}
            this.name = name;
            this.age = age;
            this.address = address;
            this.speak = function(){
                console.log('곧 있으면 점심!');
            }
            // return this;
        }
        let person2 = new Person('green','20','일산동');
        let person3 = new Person('blue','22','일산동');
        console.log(person2);
        console.log(person3);

        let person4 = {};
        person4.name = 'abc';
        person4.age = 20;
        person4.address = '달동';
        person4.speak = function(){
            console.log('안녕하세요');
        }
        console.log(person4);

        //클래스를 선언
        class Person1 {
            //생성자 함수
            constructor(name, age, address){
                //field
                this.name = name;
                this.age = age;
                this.address = address;
            }
            //method 메소드
            speak() {
                console.log('하하하하하하하');
            }
        }
        let person5 = new Person1('minmin',20,'삼산동');
        console.log(person5);
        person5.speak();
    </script>
</body>
</html>

2) 12.classstudents.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        function Student(name, age, score1, score2){
            this.name = name;
            this.age = age;
            this.score1 = score1;
            this.score2 = score2;
        }
        const students = [
            new Student('A',29,45,50),
            new Student('B',30,60,70),
            new Student('C',28,90,80),
            new Student('D',27,85,65),
            new Student('E',32,80,90),
        ];
        //클래스 구문으로 만들기
        class Student1 {
            constructor(name, age, score1, score2) {
                this.name = name;
                this.age = age;
                this.score1 = score1;
                this.score2 = score2;
            }
        }
        const students1 = [
            new Student1('A',29,45,50),
            new Student1('B',30,60,70),
            new Student1('C',28,90,80),
            new Student1('D',27,85,65),
            new Student1('E',32,80,90),
        ]
        console.log(students1);
    </script>
</body>
</html>