2023.08.24 / Step 10 [클래스] - 코딩 36 일차

클래스2_개념01_클래스내부함수.html

 

<script>

    /*

        [개념] 클래스 내부 함수

            [1] 클래스 내부 함수 정의 = 메서드

                함수명(매개변수) { 내용 }

                [예시]

                    setData(num, name, kor, math) {

                        // 실행할 내용

                    }

            [2] 클래스 내부 함수에서는 클래스 내부 변수들도 사용할 수 있다.

                단, 사용할 때 변수 앞에 this.을 붙여야 한다.

            [3] 클래스 내부의 함수를 메서드(=인스턴스 함수)라고 부른다.

    */

    // 클래스 정의

    class Student {

        num = 0;

        name = "";

        kor = 0;

        math = 0;

       

            setData(a, b, c, d){

            this.num = a;

            this.name = b;

            this.kor = c;

            this.math = d;

        }

            printData(){

            document.write(this.num + " " + this.name + " " + this.kor + " " + this.math + "<br>");

            }

    }

    // 클래스 생성

    let st1 = new Student();

    st1.num = 1001;

    st1.name = "이만수";

    st1.kor = 20;

    st1.math = 50;

    let st2 = new Student();

    st2.num = 1002;

    st2.name = "김철수";

    st2.kor = 40;

    st2.math = 60;

    /*

        클래스를 사용하면 전반적으로

        코드가 정리되어관리할 수 있다.

    */

    let st3 = new Student();

    st3.setData(1003, "오소정", 50, 90);

    st3.printData();

</script>

 

 

---

클래스2_개념02_클래스와배열.html

 

<script>

    /*

        클래스의 데이터는 단일 데이터이므로 보통 배열과 함께 사용한다.

        아래 함수들도 다음단원에서 또 다른 클래스로 구현한다.

    */

    class student {

        num = 0;

        name = "";

        kor = 0;

        math = 0;

        setdata (a, b, c, d){

            this.num = a;

            this.name = b;

            this.kor = c;

            this.math = d;

        }

        printdata(){

            document.write(this.num + " " + this.name + " " + this.kor + " " + this.math + "<br>");

        }

    }

    function getdata (data){

    let rsList = [];

    let token = data.split(",");

    for(let i = 0; i < token.length; i++){

        let temp = token[i].split("/");

        let st = new student;

        let n = Number(temp[0]);

        let y = temp[1];

        let p = Number(temp[2]);

        let d = Number(temp[3]);

        st.setdata(n, y, p, d); //변수명 붙여주기

        rsList.push(st);

    }

    return rsList;

    }

    function printresult (arr){

        for(let i = 0; i < arr.length; i++){

            arr[i].printdata();

        }

    }

    let data = "1001/김철수/100/20,1002/이영수/90/40,1003/오민수/20/50";

    let rs = getdata(data);

    printresult(rs);

   

</script>

 

 

---

클래스2_개념03_클래스와매니저.html

 

<script>

    /*

        [1] 대부분의 클래스는 보통 데이터를 담당하는 클래스와

            그 데이터를 배열로 관리하는 매니저 클래스 두개가 세트로 작용한다.

        [2] 여기서 매니저는 임의로 정한 이름으로

            원하는 이름으로 변경해도 된다. (Service, Cotroller 등등 )

    */

    class student {

        number = 0;

        name = "";

        kor = 0;

        math = 0;

        setdata(a, b, c, d){

            this.number = a;

            this.name = b;

            this.kor = c;

            this.math = d;

        }

        printdata(){

            document.write(this.number + " " + this.name + " " + this.kor + " " + this.math + "<br>");

        }

    }

    class Manager {

        rsList = [];

        splitdata(arr){

        let token1 = arr.split(",");

        for(let i = 0; i < token1.length; i++){

            let token2 = token1[i].split("/");

            let temp = new student;

            let a = Number(token2[0]);

            let b = token2[1];

            let c = Number(token2[2]);

            let d = Number(token2[3]);

            temp.setdata(a, b, c, d);

            this.rsList.push(temp);

        }

        }

        printarr(){

            for(let i = 0; i < this.rsList.length; i++){

                this.rsList[i].printdata();

            }

        }

    }

    let strdata1 = "1001/김철수/100/20,1002/이영수/90/40,1003/오민수/20/50";

    let controller = new Manager();

    controller.splitdata(strdata1);

    controller.printarr();

   

</script>

 

 

---

클래스2_문제01_연습문제1.html

 

<script>

    class Test {

        ex01() {

            let total = 0;

            let num = 1;

            for(let i = 0; i < 5; i++){

                total += num;

                num++;

            }

            document.write("1부터 5까지의 합 = " + total + "<br>");

        }

        ex02() {

           let arr = [];

            let r1 = Math.floor(Math.random() * 100) + 1;

           let r2 = Math.floor(Math.random() * 100) + 1;

           let r3 = Math.floor(Math.random() * 100) + 1;

            arr.push(r1);

            arr.push(r2);

            arr.push(r3);

            let max = 0;

            let maxid = 0;

            for(let i = 0; i < arr.length; i++){

            if(max < arr[i]){

                max = arr[i];

                maxid = i;

            }

            }

            document.write(arr + " 에서 최대값 = " + arr[maxid] + "<br>");

        }

    }

    let t = new Test();

    /*

        [문제1] 1부터 5까지의 합을 출력하는 메서드를 구현하시오.

        [정답1] 1부터 5까지의 합 = 15

    */

    t.ex01();

    /*

        [문제2] 1부터 100사이의 랜덤 숫자 3개를 저장해

                        최대값을 출력해주는 메서드를 구현하시오.

        [예시2] 68, 5, 95 에서 최대값 = 95

    */

    t.ex02();

</script>

 

 

---

클래스2_문제02_연습문제2.html

 

<script>

    class Test {

        ex01(x, y) {

            let total = 0;

           for(let i = x; i <= y; i++){

            total += i;

           }

           document.write(x + "부터 " + y + "까지의 합 = " + total + "<br>");

        }

        ex02(list) {

            let max = 0;    

            for(let i = 0; i < list.length; i++){

                if(list[i] > max){

                    max = list[i];

                }

                }

                document.write("최대값 = " + max + "<br>");

        }

        ex03(list, idx1, idx2) {

            let temp = list[idx1];

            list[idx1] = list[idx2];

            list[idx2] = temp;

        }

    }

    let t = new Test();

    /*

        [문제1] x부터 y까지의 합을 출력하는 메서드를 구현하시오.

        [정답1] 1부터 10까지의 합 = 55

    */

    let x = 1;

    let y = 10;

    t.ex01(x, y);

    /*

        [문제2] list를 전달받아 최대값을 출력하는 메서드를 구현하시오.

        [정답2] 최대값 = 100

    */

   

    let list = [87, 100, 35, 12, 46];

    t.ex02(list);

    /*

        [문제3] list와 인덱스 2개를 전달받아,

                해당 위치의 값을 교체해주는 메서드를 구현하시오.

        [정답3] 87,46,35,12,100

    */

    let idx1 = 1;

    let idx2 = 4;

    t.ex03(list, idx1, idx2);

    document.write(list);

</script>

 

 

---

클래스2_문제03_연습문제3.html

 

<script>

    class Test {

        ex01(list) {

            let count = 0;

            for(let i = 0; i < list.length; i++){

                if(list[i] % 4 == 0) count++;

            }

            return count;

        }

        ex02(list) {

            let rsList = [];

            for(let i = 0; i < list.length; i++){

                if(list[i] % 4 == 0){

                    rsList.push(list[i]);

                }

            }

            return rsList;

        }

    }

    let t = new Test();

    let list = [87, 12, 21, 56, 100];

    /*

        [문제1] 4의 배수의 개수를 리턴해주는 메서드를 구현하시오.

        [정답1] 4의 배수의 개수 = 3

    */

    let count = t.ex01(list);

    document.write("4의 배수의 개수 = " + count + "<br>");

    /*

        [문제2] 4의 배수만 리스트에 담아 리턴해주는 메서드를 구현하시오.

        [정답2] 12,56,100

    */

    let result = t.ex02(list);

    document.write(result);

</script>

 

 

---

클래스2_문제04_계산기.html

 

<script>

    /*

        [문제]

            간단한 계산기 프로그램을 구현해보시오.

        [정답]

            5 + 3 = 8

            5 - 3 = 2

            5 * 3 = 15

            5 / 3 = 1.67

    */

    class Calc {

    add(x, y){

        return x + y;

    }

    min(x, y){

        return x - y;

    }

    mul(x, y){

        return x * y;

    }

    div(x, y){

        return x / y;

    }

    showinfo(x, y){

        document.write(`${x} + ${y} = ${this.add(x, y)}<br>`)

        document.write(`${x} - ${y} = ${this.min(x, y)}<br>`)

        document.write(`${x} * ${y} = ${this.mul(x, y)}<br>`)

        if(y > 0) document.write(`${x} / ${y} = ${this.div(x, y).toFixed(2)}<br>`);

        else document.write(`0으로 나눌수 없습니다<br>`);

       

    }

    }

    //-------------------------------------------

 

    let c = new Calc();

    c.showinfo(5, 3)

   

</script>

 

 

---

클래스2_문제05_OMR카드.html

 

<script>

    /*

        [문제]

            OMR카드 예제를 클래스로 구현하시오.

                        한 문제 당 20점이다.

        [예시]

            [1, 4, 3, 5, 2]

            [1, 1, 3, 5, 1]

            [O, X, O, O, X]

            60점      

    */

    class ScoreMng {

        omr = [1, 4, 3, 5, 2];

        myanswer = [];

        count = 0;

        score = 0;

       

        setmyanswer(){

            for(let i = 0; i < 5; i++){

                this.myanswer.push(Math.floor(Math.random() * 5) + 1);

            }

        }

        checkomr(){

            for(let i = 0; i < this.omr.length; i++){

                if(this.omr[i] == this.myanswer[i]) this.count++;

            }

            this.score = this.count * 20;

        }

        printomr(arr){

            document.write(" [ ");

            for(let i = 0; i < arr.length; i++){

                document.write(arr[i] + " ");

                if(i < arr.length - 1) document.write(", ")

            }

            document.write(" ]<br>");

        }

        printresult(){

            document.write(" [ ");

            for(let i = 0; i < this.omr.length; i++){

                if(this.omr[i] == this.myanswer[i]) document.write(" O ");

                else document.write(" X ");

                if(i < this.omr.length - 1) document.write(", ");

            } document.write(" ]<br>");

            document.write(this.score + "점<br>");

        }

        run (){

            this.setmyanswer();

            this.checkomr();

            this.printomr(this.omr);

            this.printomr(this.myanswer);

            this.printresult();

        }

    }

    //-------------------------------------------

    let sm = new ScoreMng();

    sm.run();

    /*

        * 클래스 작성 순서

        1. 클래스와 변수를 작성한다.(함수는 제외)

        2. 클래스 메모리를 생성한다.    

            예) let sm = new ScoreMng()

        3. 전체 실행할 함수를 호출한다.

            예) sm.run()

        4. 클래스로 돌아가서 run함수를 작성한다.

        5. run함수 내에서 실행 순서에 따라

            추가적인 함수 및 기능을 작성한다.

    */

</script>

 

 

---