JavaScript_STUDY/JavaScript10.html at master · CreativePersonDW/JavaScript_STUDY · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<html lang='ko'>
    <head>
        <title>객체</title>
        <style>
            .area-big{
                height:400px;
                border:1px solid black;
                background:lightgray;
            }
            .area{
                height:200px;
                border:1px solid black;
                background:lightgray;
            }
        </style>
    </head>
    <body>
        <h1>객체</h1>
        <h3>객체 선언 및 호출</h3>
        <p>객체는 키 값을 사용하여 속성을 식별한다.<br>
        중괄호 {}를 사용하여 객체를 생성하고, 속성에는 모든 자료형이 올 수 있다.</p>

        <button onclick="test1();">실행확인</button>
        <div id="area1" class="area-big"></div>
        <script>
            function test1(){
                var product = {
                    pName : "Dry Mango",
                    type : 'Pickle',
                    ingredient : ['mango', 'sugar'],
                    origin : 'Philippines'
                }

                console.log(product);

                var area1 = document.getElementById("area1");

                area1.innerHTML += "product : " + product + "<br><br>";

                area1.innerHTML += "<b>객체명['속성명']으로 접근하기<b><br>";
                area1.innerHTML += "product['pName'] : " + product['pName'] + '<br>';
                area1.innerHTML += "product['type'] : " + product['type'] + '<br>';
                area1.innerHTML += "product['ingredient'] : " + product['ingredient'] + '<br>';
                area1.innerHTML += "product['ingredient'][0] : " + product['ingredient'][0] + '<br>';
                area1.innerHTML += "product['ingredient'][1] : " + product['ingredient'][1] + '<br>';
                area1.innerHTML += "product['origin'] : " + product['origin'] + '<br>';

                area1.innerHTML += "<b>객체명.속성명으로 접근하기<b><br>";
                area1.innerHTML += "product.pName : " + product.pName + '<br>';
            }
        </script>

        <hr>

        <h3>객체의 키 식별자 테스트</h3>
        <p>객체의 키는 모든 문자열을 사용할 수 있다.<br>
            식별자로 사용할 수 없는 단어를 키로 사용한 경우에는 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.
        </p>
        <button onclick="test2();">실행확인</button>
        <div id="area2" class="area"></div>
        <script>
            function test2(){
                var objTest = {
                    'I love you' : '김용승',
                    'I hate !@#$%^()' : 'B강의장'
                }

                var area2 = document.getElementById("area2");

                console.log(objTest);

                // area2.innerHTML += 'I love you : ' + objTest.I love you + "<br>";
                // area2.innerHTML += "I hate !@#$%^() : " + objTest.'I hate !@#$%^()' + "<br>";

                area2.innerHTML += 'I love you : ' + objTest['I love you'] + "<br>";
                area2.innerHTML += "I hate !@#$%^() : " + objTest['I hate !@#$%^()'] + "<br>";
            }
        </script>

        <h3>객체의 메소드 속성</h3>
        <p>객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다.</p>
        <button onclick = "test3();">실행확인</button>
        <div id="area3" class="area"></div>
        <script>
            function test3(){
                var area3 = document.getElementById("area3");
                var dog = {
                    name : '복실이',
                    eat : function(food){
                        // 객체 내에서 자신의 속성을 호출할 때에는 반드시 써야함
                        // 개발자들이 흔히 실수 할 수 있는 부분으로
                        // 반드시 this를 명시적으로 써줘야 함
                        area3.innerHTML += this.name + '가 ' + food + '를 먹고 있네요~ 멍멍멍멍!';
                    }
                }
                dog.eat('바나나');
            }
        </script>

        <hr>

        <h3>객체와 반복문</h3>
        <p>객체의 속성을 살펴볼 때에는 단순 for문으로는 사용 불가능 하고, for in문을 사용해야 한다.</p>
        <button onclick="test4();">실행확인</button>
        <div id = "area4" class="area"></div>
        <script>
            function test4(){
                var game = {
                    title : "DIABLO3",
                    price : "35,000원",
                    language : "한국어 지원",
                    supportOS : "window 32/64",
                    service : true
                }

                var area4 = document.getElementById("area4");

                for(var key in game){
                    area4.innerHTML += key + " : " + game[key] + "<br>";
                }
                // for in문시 key(속성명)을 활용해 속성값에 접근할 때는 반드시 []를 써야 함
            }
        </script>

        <hr>

        <h3>in과 with 키워드</h3>
        <p>in : 객체 내부에 해당 속성이 있는지 확인하는 키워드<br>
        with : 코드를 줄여주는 키워드, 호출시 객체명 생략이 가능하다.</p>
        <label>이름 : </label><input type="text" id="name"><br>
        <label>국어 : </label><input type="text" id="kor"><br>
        <label>영어 : </label><input type="text" id="eng"><br>
        <label>수학 : </label><input type="text" id="math"><br>

        <button onclick = "test5();">실행확인</button>
        <div id = "area5" class = "area-big"></div>
        <script>
            function test5(){
                var name1 = document.getElementById('name').value;
                var kor1 = parseInt(document.getElementById('kor').value);
                var eng1 = parseInt(document.getElementById('eng').value);
                var math1 = parseInt(document.getElementById('math').value);

                var student = {
                    name : name1,
                    kor : kor1,
                    eng : eng1,
                    math : math1
                }

                var area5 = document.getElementById("area5");

                area5.innerHTML += "<b>in 키워드 테스트 </b><br>";

                area5.innerHTML += 'student객체에 name이라는 속성이 있는지 확인 : ' + ('name' in student) + "<br>";

                area5.innerHTML += 'student객체에 eng123이라는 속성이 있는지 확인 : ' + ('eng123' in student) + "<br>";

                area5.innerHTML += "<b>with 키워드 테스트</b><br>";

                // area5.innerHTML += "학생이름 : " + student.name + "<br>";
                // area5.innerHTML += "수학점수 : " + student.math + "<br>";
                // area5.innerHTML += "총점 : " + (student.kor + student.eng + student.math) + "<br>";
                // area5.innerHTML += "평균 : " + (student.kor + student.eng + student.math)/3 + "<br>";

                with(student){
                    area5.innerHTML += "학생이름 : " + name + "<br>";
                    area5.innerHTML += "수학점수 : " + math + "<br>";
                    area5.innerHTML += "총점 : " + (kor + eng + math) + "<br>";
                    area5.innerHTML += "평균 : " + (kor + eng + math)/3 + "<br>";
                }
            }
        </script>

        <hr>

        <h3>객체의 속성 추가와 제거</h3>
        <p>처음 객체 생성 이후 속성을 추가하거나 제거하는 것을 동적으로 속성을 추가한다 혹은 제거한다 라는 표현을 씀</p>
        <button onclick = "test6();">실행확인</button>
        <div id = "area6" class="area"></div>
        <script>
            function test6(){
                // 속이 빈 객체 생성
                var student = {};

                console.log(student);

                // 객체에 속성 추가
                student.name = '김용승';
                student.hobby = '음악감상';
                student.strength = '프로그래밍';
                student.dream = '여행작가';
                console.log(student);

                student.toString = function(){
                    var str = "";
                    for(var key in student){
                        if(key != 'toString'){
                            str+= key + " : " + student[key] + "<br>";
                        }
                    }
                    return str;
                }

                var area6 = document.getElementById("area6");
                area6.innerHTML = student.toString();
                area6.innerHTML = student;
            }
        </script>


        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>