js-training/index.html at main · lisarnjs/js-training · 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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="ko">

<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>JS Training</title>
    <link rel="stylesheet" href="./test.css" />
    <link rel="stylesheet" href="./main.scss" />
    <script defer src="./main.js"></script>
</head>

<body>
    <header>
        <h1>JS Training - Kwon Eunseo</h1>
        <ul>
            <li class="first-week">1주차</li>
            <li class="second-week">2주차</li>
            <li class="third-week">3주차</li>
            <li class="fourth-week">4주차</li>
        </ul>
    </header>


    <section class="section__first-week">

        <div class="question">
            <h2>for문</h2>
            <div class="question--container">
                <h3>나의 질문</h3>
                <p>한변의 길이가 sqLine인 정사각형이 있다.<br>
                    정사각형의 둘레의 합이 21 이하인 sqLine의 값을 모두 출력하라.</p>
                <strong>정사각형 둘레 길이 공식 = sqLine * 4</strong>
                <p>단, sqLine은 소수 첫번째 자리의 숫자이며, 0.1부터 시작하여 반복시마다 0.1씩 늘어난다.</p>
                <button onclick="for__me()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원1 질문</h3>
                <p>새해를 맞아 정동진으로 출동한 똑소리<br>
                    고생 끝에 해돋이를 보고 난 후 피곤한 몸을 이끌며 그는 근처 칼국수집으로 향하는데...<br>
                    주린 배를 채우고 영수증을 확인한 똑소리</p>
                <strong>똑소리가 받은 영수증을 짝수 순으로 출력해 주세요.</strong>
                <pre>
                    const receipt = [
                        {
                        name: '칼국수',
                        cost: 10000
                        },
                        {
                        name: '해물칼국수',
                        cost: 14000
                        },
                        {
                        name: '왕만두',
                        cost: 6000
                        },
                        {
                        name: '소주',
                        cost: 4000
                        },
                        {
                        name: '맥주',
                        cost: 5000
                        }
                    ];
                    </pre>
                    <button onclick="for__mem1()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원2 질문</h3>
                <p>길동이는 자동차를 구매하기 위해 차량별 연비와 가격을 5개씩 조사하여 각각 목록을 만들었습니다.</p>
                <strong>연비 목록 : [23.1, 21.5, 20.1, 19.5, 18.5]<br></strong>
                <strong>가격 목록 : [3600, 3200, 4000, 2900, 5000]</strong>
                <p>길동이는 연비가 19 이상이면서 가격이 3500(만원) 미만인 차량을 구입하고 싶습니다.<br>
                    길동이가 살 수 있는 차량의 연비와 가격을 '{0} 번째 차량 - 연비 : {0} km/l / 가격 : {0} 만원' 으로 모두 출력해주세요.</p>
                <button onclick="for__mem2()">정답 (콘솔창 확인)</button>
            </div>
        </div>


        <div class="question">
            <h2>for in문</h2>
            <div class="question--container">
                <h3>나의 질문</h3>
                <p>다음 객체에서 데이터 타입이 숫자인 것만 출력하세요.</p>
                <pre>
                        const obj = {
                            name: "lisa",
                            age: 21,
                            height: 100,
                            city: "seoul",
                            phone: 12345,
                            puppy: "yomi"
                        }
                </pre>
                <button onclick="forIn__me()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원1 질문</h3>
                <p>정부에서는 한국으로 출장을 온 어벤져스의 일부 명단을 받았다.</p>
                <strong>어벤져스 멤버들의 평균 연령을 구해라.</strong>
                <pre>
                        const avengers = [
                            {
                                name: 'IronMan',
                                age: 43
                            },
                            {
                                name: 'Hulk',
                                age: 46
                            },
                            {
                                name: 'Hawkeye',
                                age: 37
                            },
                            {
                                name: 'SpiderMan',
                                age: 21
                            },
                            {
                                name: 'Thor',
                                age: 100
                            },
                            {
                                name: 'BlackWidow',
                                age: 47
                            }
                        ];
                    </pre>
                    <button onclick="forIn__mem1()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원2 질문</h3>
                <p>철수는 자신의 체질량 지수(BMI)를 알고 싶습니다.</p>
                <p>자신의 몸무게(kg)와 신장(cm)을 이용하여 체질량 지수를 계산하고
                    몸무게와 신장, 그리고 체질량 지수를 모두 출력해주세요.</p>
                <strong>체질량 = 자신의 몸무게(kg) / 키의 제곱(m)</strong>
                <ul>
                    <li>몸무게, 신장, 체질량 지수를 객체 하나의 속성들로 설정합니다.</li>
                    <li>몸무게, 신장은 처음에 초기화합니다. (for - in를 사용해서 설정도 가능합니다.</li>
                    <li>체질량은 계산 후 값을 할당하고, for - in 문을 통해 모두 출력해주세요.</li>
                    <li>출력 형식은 자유롭게 해주세요.</li>
                    <li>체질량 결과값은 간단히 정수로 하거나 소수 둘째자리까지 등 자유롭게 구해주세요.</li>
                </ul>
                <button onclick="forIn__mem2()">정답 (콘솔창 확인)</button>
            </div>
        </div>
    </section>

    <section class="section__second-week">
        <div class="question">
            <h2>for of문</h2>
            <div class="question--container">
                <h3>나의 질문</h3>
                <p>다음 문장에서 찾고 싶은 알파벳을 입력 후 입력한 알파벳의 개수를 세고 콘솔창에 출력하시오.</p>
                <strong>let sentence = "Rome is not built in a day"</strong>
                <p>[ 출력 예시 ]</p>
                <span>입력한 알파벳 : b 일 경우 // b의 개수 : 1<br/></span>
                <button onclick="forOf__me()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원1 문제</h3>
                <p>새해를 맞이해서 다이어트를 결심했지만 갑자기 입이 심심해진 똑소리<br/>
                문득 만 원 이상 구매 시 사용할 수 있는 20% 할인 쿠폰이 있다는 걸 깨닫게 되고..<br/>
                이성을 잃고 간식을 엄청 구매하게 되었는데...</p>
                <strong>똑소리가 구매한 간식들의 총 가격을 구해주세요.</strong>
                <pre>
                    const snackBag = [
                        { name: "썬칩", price: 2500 },
                        { name: "자가비", price: 1500 },
                        { name: "쵸코송이", price: 1000 },
                        { name: "칸쵸", price: 1700 },
                        { name: "쫀득 초코칩", price: 2500 },
                        { name: "코카콜라", price: 1800 }
                    ];
                </pre>
                <button onclick="forOf__mem1()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원2 문제</h3>
                <strong>문제</strong>
                <ul>
                    <li>- 학생 5명이 있는 어떤 학급에선 랜덤을 번호를 추첨하여 주번을 뽑는다.</li>
                    <li>- 추첨된 번호와 학생의 번호가 일치할 경우 이번달 주번이 된다.</li>
                    <li>- for of문을 통해 학급 배열 객체를 순회하면서 랜덤 수와 학생의 번호를 비교해라.</li>
                    <li>- 랜덤 수와 학생 번호가 일치할 경우 주번이 된 학생 이름이나 번호 등을 자유롭게 출력하라.</li>
                    <li>- 관련 데이터 초기화는 자유롭게 진행해주세요.<br />
                    (직접 or js 문법이나 내장객체 활용)</li>
                </ul>
                <button onclick="forOf__mem2()">정답 (콘솔창 확인)</button>
            </div>
        </div>

        <div class="question">
            <h2>forEach()</h2>
            <div class="question--container">
                <h3>나의 질문</h3>
                <p>다음 배열에서 홀수끼리의 합, 짝수끼리의 합을 구하시오.<br/>
                (배열 안의 숫자는 자유롭게 바꿔도 됩니다.)</p>
                <strong>const numbers = [12, 13, 21, 4, 51, 62, 48];</strong>
                <p>[ 출력 예시 ]</p>
                <span>홀수 : 홀수끼리의 합 / 짝수 : 짝수끼리의 합<br/></span>
                <button onclick="forEach__me()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원1 문제</h3>
                <strong>다음 은행 고객 명단 중에서 VIP 고객의 이름만 출력해주세요.</strong>
                <pre>
                    const list = [
                        { name: "호빵맨", gender: "male", type: "vip" },
                        { name: "식빵맨", gender: "female", type: "normal" },
                        { name: "세균맨", gender: "male", type: "vip" },
                        { name: "치즈맨", gender: "male", type: "normal" },
                        { name: "카레맨", gender: "female", type: "vip" },
                        { name: "원펀맨", gender: "male", type: "normal" },
                        { name: "후래쉬맨", gender: "female", type: "normal" },
                        { name: "매가맨", gender: "male", type: "vip" },
                        { name: "백터맨", gender: "female", type: "normal" },
                    ];
                </pre>
                <button onclick="forEach__mem1()">정답 (콘솔창 확인)</button>
            </div>
            <div class="question--container">
                <h3>팀원2 문제</h3>
                <ul>
                    <li>- 1~100까지 숫자가 담긴 배열이 있다.</li>
                    <li>- 배열의 인덱스가 홀수이면서 배열 요소가 5의 배수인 경우에만 해당 요소의 값과 인덱스를 출력해라.</li>
                    <li>- 출력 형식은 <strong>[Value : {0}, Index: {0}]</strong>이다.</li>
                    <li>- 배열 초기화는 각자 자유롭게 설정해주세요.</li>
                </ul>
                <button onclick="forEach__mem2()">정답 (콘솔창 확인)</button>
            </div>
        </div>
    </section>
    <!-- <section>2주차</section>

    <section>3주차</section>

    <section>4주차</section> -->

</body>

</html>