ヒントを補足を追加

hayashi · hayashi · commit 1b1c6ab3f713 · 2015-10-28T17:33:34.000+09:00
diff --git a/public/stage1/tests.js b/public/stage1/tests.js
@@ -11,6 +11,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // このステージでは DOM 要素の取得を学びます。
       // 'change me!' を document.getElementById(elementId) に
       // 書き換え、ブラウザをリロードしてみてください。
+      // 補足: document.getElementById ... id属性で要素を取得します
       var elementId = 'firebrick';
       var element = 'change me!';
 
@@ -40,6 +41,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
+      // ヒント: document.getElementsByClassName ... class属性で要素を取得する（戻り値は配列）
       var elementClassName = 'mediumseagreen';
       var elements = 'change me!';
 
@@ -69,6 +71,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
+      // ヒント: document.getElementsByTagName ... タグ名で要素を取得する（戻り値は配列）
       var elementTagName = 'blockquote';
       var elements = 'change me!';
 
@@ -122,7 +125,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // 'change me!' を書き換えてください。
       var elements = 'change me!';
-
+      
       expect(elements).to.have.length(2);
       expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
       expect(elements[1]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
@@ -152,6 +155,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       //
       // 'change me!' を document.querySelector('#firebrick') に
       // 書き換えてください。
+      // 補足 document.querySelector ... セレクタで要素を取得する
       var element = 'change me!';
 
       expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
@@ -205,6 +209,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
+      // ヒント: '[属性名=値]' というセレクタがある（例: [type=text] ... type属性がtextの要素を取得する
       var element = 'change me!';
 
       expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
@@ -220,6 +225,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       //
       // 'change me!' を '.js-training:nth-child(2) li'
       // に書き換えてください。
+      // :nth-child(2) ... 2番目の要素を取得する
       var selector = 'change me!';
 
       var element = document.querySelector(selector);
@@ -245,6 +251,8 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
+      // 補足: 少し難しいので、この問題は飛ばしてしまってもかまいません。
+      // ヒント: 最後の要素を得る :last-child
       var selector = 'change me!';
 
       var element = document.querySelector(selector);
@@ -265,6 +273,8 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // 基本的な使い方は document.querySelectorAll と同じです。
       //
       // 'change me!' を $('#brown') に書き換えてください。
+      // 補足: jQueryで取得した要素はDOMのAPIで取得した要素とは別物です。それを区別するために、
+      //      jQueryで取得した要素を格納する変数名の先頭には ""$（ダラー）"" を付ける風習があります
       var $element = 'change me!';
 
       expect($element).to.be.instanceof(jQuery);
diff --git a/public/stage2/tests.js b/public/stage2/tests.js
@@ -11,8 +11,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // var element = document.getElementById('firebrick');
       // element.textContent = element.textContent + element.textContent;
+      // 補足: 取得した要素が含むテキストは element.textContent に格納されています。
       var element = 'change me!';
-
+      
 
       expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
       expect(element).to.have.deep.property(
@@ -24,6 +25,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
+      // var element = 'change me!';
       var element = 'change me!';
 
 
@@ -40,8 +42,12 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
+      // ヒント: 要素のスタイルを変更するには element.style をいじります
+      //        例えばフォントサイズを変更する場合CSS風にかくと element { font-size: 10px; } ですが、
+      //        element.style の編集では element.style.fontSize = "10px"; のように書きます。
+      // ヒント: CSSでの背景色のプロパティ名: background-color
       var element = 'change me!';
-
+      
 
       expect(element).to.have.property(
         secret('pynffAnzr'), secret('zrqvhzfrnterra'));
@@ -58,6 +64,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
+      // ヒント: CSSで透明度を70%に変更するには element { opacity: 0.3; } と書きます
       var element = 'change me!';
 
 
@@ -76,6 +83,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
+      // ヒント: CSSで要素を10度回転させるには element { transform: rotate(10deg); } と書きます
       var element = 'change me!';
 
 
@@ -97,7 +105,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
       // 使う方法を使ってください。
-      var element = 'change me!';
+      // ヒント: 要素の位置を相対的に移動させるには position プロパティを指定する必要があります。
 
 
       expect(element).to.have.deep.property(
@@ -127,6 +135,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // var $element = $('#brown');
       // $element.text($element.text() + $element.text());
+      // 補足: jQueryで取得した要素はDOMのAPIで取得した要素とは別物です。それを区別するために、
+      //      jQueryで取得した要素を格納する変数名の先頭には ""$（ダラー）"" を付ける風習があります
       var $element = 'change me!';
 
 
diff --git a/public/stage3/tests.js b/public/stage3/tests.js
@@ -33,6 +33,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     it('3 番の要素の左右の幽霊要素をすべて除去する', function() {
 
       // ここにコードを記述してください。
+      // ヒント: document.getElementsByClassName()で取得した配列内の要素を削除すると、取得した配列からも要素が消えることに注意
 
 
       var darkorange = document.querySelector('.mediumseagreen');
@@ -45,6 +46,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
       elementToAdd.textContent = '\uD83D\uDC2C';
 
       // 上の elementToAdd を追加するコードをここに記述してください。
+      // ヒント: 要素を最後に追加する関数: element.appendChild(""追加したい要素"")
 
 
       var turquoise = document.querySelector('.turquoise');
@@ -60,6 +62,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを
       // ここに記述してください。
+      // ヒント: 要素を最初に追加する関数: element.insertBefore(""追加したい要素"", element.firstChild)
+      // 補足: element.firstChild ... 要素内の最初の子要素への参照
 
 
       var blockquote = document.querySelector('blockquote');
@@ -104,6 +108,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     it('8 番の要素の左右の幽霊要素をすべて除去する', function() {
 
       // ここにコードを記述してください。
+      // ヒント: $elements.remove() もできる
 
 
       var $limegreen = $('.limegreen');
@@ -115,6 +120,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
       var $elementToAdd = $('<span>\uD83D\uDC2C</span>');
 
       // 上の $elementToAdd を追加するコードをここに記述してください。
+      // ヒント: 要素を最後に追加する関数: $element.append(""追加したい要素"")
 
 
       var $mediumturquoise = $('.mediumturquoise');
@@ -127,6 +133,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
       var $elementToAdd = $('<span>\uD83D\uDC1F</span>');
 
       // 上の $elementToAdd を追加するコードをここに記述してください。
+      // ヒント: 要素を最初に追加する関数: $element.prepend(""追加したい要素"")
 
 
       var $p = $('p');
diff --git a/public/stage4/tests.js b/public/stage4/tests.js
@@ -51,6 +51,7 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
     it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() {
 
       // ここにコードを記述してください。
+      // ヒント: 現在の角度を変数にとっておけば・・・
 
 
       var mediumseagreen = document.querySelector('.mediumseagreen');
@@ -67,6 +68,8 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
     it('4 番の要素を入力された角度に回転できる', function() {
 
       // ここにコードを記述してください。
+      // ヒント: $(this)とすることでイベントの対象になっている要素を取得できます。
+      // ヒント: input要素の入力値は「input.value」で取得できます（jQueryでは「$element.val()」）
 
 
       var turquoise = document.querySelector('.turquoise');
@@ -92,6 +95,7 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
       //
       // なお、expect(steelblue).to.be.null は上記のテストの要件を満たして
       // いないので、正解ではありません。
+      // ヒント: この時点で読み込まれていないDOM要素は操作できないことに注意
 
       var steelblue = document.querySelector('.steelblue');
       expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
