day08

📌 javascript 객체생성 과정

<script>
        /*
            javascript 객체생성 과정
            - 빈 객체의 생성
                -> 아무런 기능이 없는 상태의 빈 객체를 생성
                이 상태가 prototype 인다.
            - 변수의 추가
            - 함수의 추가

            빈 객체 생성
            - let people = {};

            변수의 추가
            - people.name = "자바학생";
            - people.gender = "여자";
        */

        let people = {};

        // 객체안에 변수(멤버변수, 프로퍼티)
        people.name = "자바학생";
        people.gender = "여자";

        document.write("<h1>" + people.name + " 님은 "
                + people.gender + " 입니다</h1>");

    </script>

💡 결과값
people.name = 자바학생
people.gender = 여자

📌 javascript 객체생성 과정 (2)

	<script>
        let grades = {
            'abc' : 10,
            'def' : 6,
            'ghr' : 80
        };

        // document.write(grades['abc'] + "<br>");
        // document.write(grades.def + "<br>");

        for( key in grades ){
            document.write("<li>key : " + key 
                + " ,value : " + grades[key] + "</li>");
        }
        
    </script>

💡 결과값

📌 객체이름.함수이름 = fucntion(파라미터)

	<script>
        /*
            객체이름.함수이름 = fucntion(파라미터){
                .. 함수 구현 부분..
                return 값;
            };

            - 메서드 안에서 객체 자원 활용하기
            - 객체 안에 포함된 메서드에서 다른 메서드를
            호출하거나, 프로퍼티(멤버변수)를 활용하고자
            하는 경우에는 this 키워드를 사용한다.
            
            this.변수이름;
        */
        let people = {};

        people.name = "자바학생";
        people.gender = "남자";

        // 함수를 포함시키기
        people.sayName = function(){
            document.write("<h1>" + this.name + "</h1>");
        };

        people.sayGender = function(){
            document.write("<h1>" + this.gender + "</h1>");
        };

        people.saySomething = function(msg){
            document.write("<h1>" + msg + "</h1>");
        };

        people.getName = function(){
            return this.name;
        };

        people.getGender = function(){
            return this.gender;
        };

        people.sayInfo = function(){
            document.write("<h1>" + this.getName()
                + "님은 " + this.getGender() + "입니다.</h1>");
        };

        // 객체안에 메서드 호출
        people.sayName();
        people.sayGender();
        people.saySomething("Hello javascript");
        people.sayInfo();
    </script>

💡 결과값
people.sayName(); = 자바학생
people.sayGender(); = 남자
people.saySomething(msg) = // msg에 파라미터 투입할 내용 (출력할 내용)
people.saySomething("Hello javascript");
people.sayInfo(); = 자바학생님은 남자입니다.

		<script>
            // let person = {};
            // person.name = 'kjh';
            // person.introduce = function() {
            //     return 'My name is ' + this.name;
            // }

            // document.write(person.introduce());

            let person = {
                'name'      : 'kjh2',
                'introduce' :   function(){
                    return 'My name is ' + this.name;
                }
            }

            document.write(person.introduce());
        </script>

💡 결과값

📌 let person = {};

		<script>
            // let person = {};
            // person.name = 'lkh';
            // person.introduce = function() {
            //     return 'My name is ' + this.name;
            // }

            // document.write(person.introduce());

            let person = {
                'name'      : 'lkh2',
                'introduce' :   function(){
                    return 'My name is ' + this.name;
                }
            }

            document.write(person.introduce());
        </script>

💡 결과값