Skip to content

Commit 1d67551

Browse files
author
Kuniwak
committed
Fix issues found by review
1 parent 32d60c2 commit 1d67551

File tree

7 files changed

+161
-134
lines changed

7 files changed

+161
-134
lines changed

‎README.md‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -536,11 +536,17 @@ CSS セレクタについては、[MDN のCSS リファレンス](https://develo
536536

537537
### ステージ2
538538

539-
DOM 要素のスタイルを変更するトレーニング
539+
DOM 要素の属性・テキストを変更する
540+
トレーニング
541+
542+
543+
544+
このステージでは、スタイルの変更や
545+
表示文字列を変更するやり方を学びます。
540546

541547

542548

543-
#### DOM 要素のスタイル
549+
#### DOM 要素の属性・テキスト
544550

545551
DOM 要素には、
546552

@@ -622,7 +628,7 @@ DOM の構造を変更するトレーニング
622628

623629
#### DOM の構造
624630

625-
このステージでは、DOM のスタイルではなく、
631+
このステージでは、DOM の属性ではなく、
626632
構造を変更するトレーニングをおこないます。
627633

628634
たとえば、書籍を検索する Web API を使って、

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1>mixi JavaScript Training</h1>
2626
</div>
2727
<ol>
2828
<li><a href="stage1">DOM 要素を取得するトレーニング</a></li>
29-
<li><a href="stage2">DOM 要素のスタイルを変更するトレーニング</a></li>
29+
<li><a href="stage2">DOM 要素の属性・テキストを変更するトレーニング</a></li>
3030
<li><a href="stage3">DOM の構造を変更するトレーニング</a></li>
3131
<li><a href="stage4">DOM イベントを利用するトレーニング</a></li>
3232
<li><a href="stage5">非同期処理を書くトレーニング</a></li>

‎public/stage1/tests.js‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
'use strict';
22

3-
describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
3+
describe('ステージ1（意図した DOM 要素を取得できるようになる）', function() {
44
describe('DOM インターフェース編', function() {
5-
it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
5+
it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function() {
66

77
// チュートリアル
88
//
9-
// 'change me!' を document.getElementById(elementId); に
10-
// 書き換えてください。
9+
// JavaScriptTraining へようこそ。
10+
//
11+
// このステージでは DOM 要素の取得を学びます。
12+
// 'change me!' を document.getElementById(elementId) に
13+
// 書き換え、ブラウザをリロードしてみてください。
1114
var elementId = 'firebrick';
1215
var element = 'change me!';
1316

1417
expect(element).to.be.instanceof(HTMLElement);
1518
expect(element).to.have.property('id', elementId);
19+
20+
// テストが green になりましたか？
21+
// では、すべてのテストが green になるように、すべてのテストを
22+
// 修正してみましょう。
1623
});
1724

1825

19-
it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function(){
26+
it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function() {
2027

2128
// 'change me!' を書き換えてください。
2229
var elementId = 'chocolate';
@@ -30,7 +37,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
3037
});
3138

3239

33-
it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function(){
40+
it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function() {
3441

3542
// 'change me!' を書き換えてください。
3643
var elementClassName = 'mediumseagreen';
@@ -44,7 +51,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
4451
});
4552

4653

47-
it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function(){
54+
it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function() {
4855

4956
// 'change me!' を書き換えてください。
5057
var elementClassName = 'turquoise';
@@ -59,7 +66,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
5966
});
6067

6168

62-
it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function(){
69+
it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function() {
6370

6471
// 'change me!' を書き換えてください。
6572
var elementTagName = 'blockquote';
@@ -75,7 +82,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
7582

7683

7784
describe('開発ツール編', function() {
78-
it('7 番の赤色の要素が1つ取得できる', function(){
85+
it('7 番の赤色の要素が1つ取得できる', function() {
7986

8087
// チュートリアル
8188
//
@@ -85,15 +92,14 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
8592
//
8693
// すると、開発ツール上で <li id="brown">... が選択されます。
8794
// このことから、7 番の赤色の要素の ID は brown だということがわかります。
88-
//
89-
// 'change me!' を document.getElementById('brown') に書き換えてください。
95+
// では、'change me!' を document.getElementById('brown') に書き換えてみましょう。
9096
var element = 'change me!';
9197

9298
expect(element).to.have.property(secret('vq'), secret('oebja'));
9399
});
94100

95101

96-
it('8 番の橙色の要素が1つ取得できる', function(){
102+
it('8 番の橙色の要素が1つ取得できる', function() {
97103

98104
// 'change me!' を書き換えてください。
99105
var element = 'change me!';
@@ -102,7 +108,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
102108
});
103109

104110

105-
it('9 番の緑色の要素が1つ取得できる', function(){
111+
it('9 番の緑色の要素が1つ取得できる', function() {
106112

107113
// 'change me!' を書き換えてください。
108114
var elements = 'change me!';
@@ -112,7 +118,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
112118
});
113119

114120

115-
it('10 番の水色の要素が2つ取得できる', function(){
121+
it('10 番の水色の要素が2つ取得できる', function() {
116122

117123
// 'change me!' を書き換えてください。
118124
var elements = 'change me!';
@@ -123,9 +129,12 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
123129
});
124130

125131

126-
it('11 番の青色の要素が1つ取得できる', function(){
132+
it('11 番の青色の要素が1つ取得できる', function() {
127133

128134
// 'change me!' を書き換えてください。
135+
//
136+
// なお、11 番の青色の要素は li 要素ではありません！
137+
// よくみると、色がついているのはさらに内側の要素のようです。
129138
var elements = 'change me!';
130139

131140
expect(elements).to.have.length(1);
@@ -135,13 +144,13 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
135144

136145

137146
describe('基本 CSS セレクタ編', function() {
138-
it('1 番の赤色の要素を querySelector を使って1つ取得できる', function(){
147+
it('1 番の赤色の要素を querySelector を使って1つ取得できる', function() {
139148

140149
// チュートリアル
141150
//
142151
// 次に、document.querySelector ファミリを使って、DOM 要素を取得します。
143152
//
144-
// 'change me!' を document.querySelector('#firebrick'); に
153+
// 'change me!' を document.querySelector('#firebrick') に
145154
// 書き換えてください。
146155
var element = 'change me!';
147156

@@ -152,7 +161,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
152161
});
153162

154163

155-
it('2 番の橙色の要素を querySelector を使って1つ取得できる', function(){
164+
it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() {
156165

157166
// 'change me!' を書き換えてください。
158167
var element = 'change me!';
@@ -164,7 +173,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
164173
});
165174

166175

167-
it('3 番の緑色の要素を querySelector を使って1つ取得できる', function(){
176+
it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() {
168177

169178
// 'change me!' を書き換えてください。
170179
var element = 'change me!';
@@ -173,7 +182,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
173182
});
174183

175184

176-
it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function(){
185+
it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() {
177186

178187
// 'change me!' を書き換えてください。
179188
var elements = 'change me!';
@@ -184,7 +193,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
184193
});
185194

186195

187-
it('5 番の青色の要素を querySelector を使って1つ取得できる', function(){
196+
it('5 番の青色の要素を querySelector を使って1つ取得できる', function() {
188197

189198
// 'change me!' を書き換えてください。
190199
var element = 'change me!';
@@ -193,7 +202,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
193202
});
194203

195204

196-
it('6 番の紫色の要素を querySelector を使って1つ取得できる', function(){
205+
it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() {
197206

198207
// 'change me!' を書き換えてください。
199208
var element = 'change me!';
@@ -205,11 +214,11 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
205214

206215

207216
describe('応用 CSS セレクタ編', function() {
208-
it('7 番の赤色の要素を ID セレクタを使わずに1つ取得できる', function(){
217+
it('7 番の赤色の要素を ID セレクタを使わずに1つ取得できる', function() {
209218

210219
// チュートリアル
211220
//
212-
// 'change me!' を '.js-training:nth-child(2) li';
221+
// 'change me!' を '.js-training:nth-child(2) li'
213222
// に書き換えてください。
214223
var selector = 'change me!';
215224

@@ -219,7 +228,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
219228
});
220229

221230

222-
it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function(){
231+
it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() {
223232

224233
// 'change me!' を書き換えてください。
225234
var selector = 'change me!';
@@ -233,7 +242,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
233242
});
234243

235244

236-
it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function(){
245+
it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {
237246

238247
// 'change me!' を書き換えてください。
239248
var selector = 'change me!';
@@ -248,7 +257,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
248257

249258

250259
describe('jQuery 編', function() {
251-
it('7 番の赤色の要素を jQuery を使って1つ取得できる', function(){
260+
it('7 番の赤色の要素を jQuery を使って1つ取得できる', function() {
252261

253262
// チュートリアル
254263
//
@@ -263,7 +272,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
263272
});
264273

265274

266-
it('8 番の橙色の要素を jQuery を使って1つ取得できる', function(){
275+
it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() {
267276

268277
// 'change me!' を書き換えてください。
269278
var $element = 'change me!';
@@ -276,7 +285,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
276285
});
277286

278287

279-
it('9 番の緑色の要素を jQuery を使って1つ取得できる', function(){
288+
it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() {
280289

281290
// 'change me!' を書き換えてください。
282291
var $element = 'change me!';
@@ -286,7 +295,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
286295
});
287296

288297

289-
it('10 番の水色の要素を jQuery を使って2つ取得できる', function(){
298+
it('10 番の水色の要素を jQuery を使って2つ取得できる', function() {
290299

291300
// 'change me!' を書き換えてください。
292301
var $element = 'change me!';
@@ -297,7 +306,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
297306
});
298307

299308

300-
it('11 番の青色の要素を jQuery を使って1つ取得できる', function(){
309+
it('11 番の青色の要素を jQuery を使って1つ取得できる', function() {
301310

302311
// 'change me!' を書き換えてください。
303312
var $element = 'change me!';
@@ -308,7 +317,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
308317
});
309318

310319

311-
it('12 番の紫色の要素を jQuery を使って1つ取得できる', function(){
320+
it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() {
312321

313322
// 'change me!' を書き換えてください。
314323
var $element = 'change me!';
@@ -321,8 +330,8 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
321330
});
322331

323332

324-
describe('エクストラステージ', function(){
325-
it('動いている寿司要素を取得する', function(){
333+
describe('エクストラステージ', function() {
334+
it('動いている寿司要素を取得する', function() {
326335

327336
// 'change me!' を書き換えてください。
328337
var element = 'change me!';

0 commit comments

Comments
 (0)