From 79ac6aecf210b836df7e0b2dfac6f53bd42686d7 Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 13:37:26 +0900 Subject: [PATCH 1/9] =?UTF-8?q?DOM=E3=82=A4=E3=83=B3=E3=82=BF=E3=83=BC?= =?UTF-8?q?=E3=83=95=E3=82=A7=E3=83=BC=E3=82=B9=E7=B7=A8=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/stage1/tests.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 46f1ed45..1ff208bf 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -12,7 +12,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を document.getElementById(elementId) に // 書き換え、ブラウザをリロードしてみてください。 var elementId = 'firebrick'; - var element = 'change me!'; + var element = document.getElementById(elementId); expect(element).to.be.instanceof(HTMLElement); expect(element).to.have.property('id', elementId); @@ -27,7 +27,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementId = 'chocolate'; - var element = 'change me!'; + var element = document.getElementById(elementId); expect(element).to.be.instanceof(HTMLElement); expect(element).to.have.property('id', elementId); @@ -41,7 +41,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementClassName = 'mediumseagreen'; - var elements = 'change me!'; + var elements = document.getElementsByClassName(elementClassName); expect(elements).to.have.length(1); expect(elements[0]).to.have.property('className', elementClassName); @@ -55,7 +55,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementClassName = 'turquoise'; - var elements = 'change me!'; + var elements = document.getElementsByClassName(elementClassName); expect(elements).to.have.length(2); expect(elements[0]).to.have.property('className', elementClassName); @@ -70,7 +70,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementTagName = 'blockquote'; - var elements = 'change me!'; + var elements = document.getElementsByTagName(elementTagName); expect(elements).to.have.length(1); expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase()); From 991fbc1c8b8b6ee3322d1e7e7c3b6e98163e44cb Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 13:52:52 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=E9=96=8B=E7=99=BA=E3=83=84=E3=83=BC?= =?UTF-8?q?=E3=83=AB=E7=B7=A8=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/stage1/tests.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 1ff208bf..92c9e646 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -93,7 +93,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // すると、開発ツール上で
  • ... が選択されます。 // このことから、7 番の赤色の要素の ID は brown だということがわかります。 // では、'change me!' を document.getElementById('brown') に書き換えてみましょう。 - var element = 'change me!'; + var element = document.getElementById('brown'); expect(element).to.have.property(secret('vq'), secret('oebja')); }); @@ -102,7 +102,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('8 番の橙色の要素が1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.getElementById('darkorange'); expect(element).to.have.property(secret('vq'), secret('qnexbenatr')); }); @@ -111,7 +111,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('9 番の緑色の要素が1つ取得できる', function() { // 'change me!' を書き換えてください。 - var elements = 'change me!'; + var elements = document.getElementsByClassName('limegreen'); expect(elements).to.have.length(1); expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('yvzrterra')); @@ -121,7 +121,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('10 番の水色の要素が2つ取得できる', function() { // 'change me!' を書き換えてください。 - var elements = 'change me!'; + var elements = document.getElementsByClassName('mediumturquoise'); expect(elements).to.have.length(2); expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr')); @@ -135,7 +135,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // // なお、11 番の青色の要素は li 要素ではありません！ // よくみると、色がついているのはさらに内側の要素のようです。 - var elements = 'change me!'; + var elements = document.getElementsByTagName('p'); expect(elements).to.have.length(1); expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C')); From 2f5f3bbb743560212979f4d26dad3c236c21f018 Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 14:01:16 +0900 Subject: [PATCH 3/9] =?UTF-8?q?=E5=9F=BA=E6=9C=ACCSS=E3=82=BB=E3=83=AC?= =?UTF-8?q?=E3=82=AF=E3=82=BF=E7=B7=A8=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/stage1/tests.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 92c9e646..441945cd 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -152,7 +152,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // // 'change me!' を document.querySelector('#firebrick') に // 書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('#firebrick'); expect(element).to.have.property(secret('vq'), secret('sveroevpx')); @@ -164,7 +164,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('#chocolate'); expect(element).to.have.property(secret('vq'), secret('pubpbyngr')); @@ -176,7 +176,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('.mediumseagreen'); expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra')); }); @@ -185,7 +185,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() { // 'change me!' を書き換えてください。 - var elements = 'change me!'; + var elements = document.querySelectorAll('.turquoise'); expect(elements).to.have.length(2); expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr')); @@ -196,7 +196,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('5 番の青色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('blockquote'); expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR')); }); @@ -205,7 +205,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('[data-js-training=blueviolet]'); expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg')); From 63574af67c1c0619baabae33eca5a3e66cea3b3b Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 14:10:44 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=E5=BF=9C=E7=94=A8=E3=82=BB=E3=83=AC?= =?UTF-8?q?=E3=82=AF=E3=82=BF=E7=B7=A8=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 最後の12番の問題が、よくわかっていない --- public/stage1/tests.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 441945cd..108d45bd 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -220,7 +220,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // // 'change me!' を '.js-training:nth-child(2) li' // に書き換えてください。 - var selector = 'change me!'; + var selector = '.js-training:nth-child(2) li'; var element = document.querySelector(selector); expect(selector).to.not.have.string('#'); @@ -231,7 +231,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() { // 'change me!' を書き換えてください。 - var selector = 'change me!'; + var selector = '.js-training:nth-child(2) :nth-child(2)'; var element = document.querySelector(selector); expect(selector).to.not.have.string('#'); @@ -245,7 +245,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() { // 'change me!' を書き換えてください。 - var selector = 'change me!'; + var selector = '.js-training + .js-training > :last-child'; var element = document.querySelector(selector); expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/); From fcf932d0a9a69069b240a746eddda3f2bcf8ea33 Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 14:15:33 +0900 Subject: [PATCH 5/9] =?UTF-8?q?jQuery=E7=B7=A8=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/stage1/tests.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 108d45bd..a337e407 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -265,7 +265,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 基本的な使い方は document.querySelectorAll と同じです。 // // 'change me!' を $('#brown') に書き換えてください。 - var $element = 'change me!'; + var $element = $('#brown'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.id(secret('oebja')); @@ -275,7 +275,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $('#darkorange'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.id(secret('qnexbenatr')); @@ -288,7 +288,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $('.limegreen'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.class(secret('yvzrterra')); @@ -298,7 +298,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('10 番の水色の要素を jQuery を使って2つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $('.mediumturquoise'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(2); @@ -309,7 +309,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('11 番の青色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $('p'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(1); @@ -320,7 +320,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $('[data-js-training=darkorchid]'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(1); From 68fdde8783fd981ea6af3f6624db9b33c21cf2a8 Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 14:21:00 +0900 Subject: [PATCH 6/9] catch sushi monster MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 答え見た --- public/stage1/tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index a337e407..230bc07e 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -334,7 +334,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('動いている寿司要素を取得する', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('x-flying-sushi-monster'); expect(element).to.have.deep.property( secret('grkgPbagrag'), '\uD83C\uDF63'); From 28fe018582e181a5f216569a75dae06831735521 Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 15:01:52 +0900 Subject: [PATCH 7/9] =?UTF-8?q?DOM=E3=82=A4=E3=83=B3=E3=82=BF=E3=83=BC?= =?UTF-8?q?=E3=83=95=E3=82=A7=E3=83=BC=E3=82=B9=E7=B7=A8=20all=20green?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/stage2/tests.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/public/stage2/tests.js b/public/stage2/tests.js index b430dfdc..26ce5a3f 100644 --- a/public/stage2/tests.js +++ b/public/stage2/tests.js @@ -11,7 +11,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // var element = document.getElementById('firebrick'); // element.textContent = element.textContent + element.textContent; - var element = 'change me!'; + var element = document.getElementById('firebrick'); + element.textContent = element.textContent + element.textContent; expect(element).to.have.property(secret('vq'), secret('sveroevpx')); @@ -24,7 +25,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.getElementById('chocolate'); + element.textContent = element.textContent + element.textContent; expect(element).to.have.property(secret('vq'), secret('pubpbyngr')); @@ -40,7 +42,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.getElementsByClassName('mediumseagreen')[0]; + element.style.backgroundColor = 'limegreen'; expect(element).to.have.property( @@ -58,7 +61,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.getElementsByClassName('turquoise')[0]; + element.style.opacity = 0.5; expect(element).to.have.property( @@ -76,7 +80,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.getElementsByTagName('blockquote')[0]; + element.style.transform = 'rotate(10deg)'; expect(element).to.have.property( @@ -97,7 +102,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を // 使う方法を使ってください。 - var element = 'change me!'; + var element = document.querySelector('[data-js-training=blueviolet]'); + element.style.top = '-20px'; + element.style.position = 'relative'; expect(element).to.have.deep.property( From a4e1c6a6f32d158b051917ad6831eec9ee2b2fd4 Mon Sep 17 00:00:00 2001 From: U-MA Date: Mon, 21 Dec 2015 15:23:39 +0900 Subject: [PATCH 8/9] almost green --- public/stage2/tests.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/public/stage2/tests.js b/public/stage2/tests.js index 26ce5a3f..7fb4209a 100644 --- a/public/stage2/tests.js +++ b/public/stage2/tests.js @@ -134,7 +134,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // var $element = $('#brown'); // $element.text($element.text() + $element.text()); - var $element = 'change me!'; + var $element = $('#brown'); + $element.text($element.text() + $element.text()); expect($element).to.be.instanceof(jQuery); @@ -147,7 +148,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; + var $element = $('#darkorange'); + $element.text($element.text() + $element.text()); expect($element).to.be.instanceof(jQuery); @@ -163,7 +165,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; + var $element = $('.limegreen').css({ backgroundColor: 'mediumseagreen' }); expect($element).to.be.instanceof(jQuery); @@ -180,7 +182,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; + var $element = $('.mediumturquoise').css({ opacity: 0.5 }); expect($element).to.be.instanceof(jQuery); @@ -193,7 +195,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; + var $element = $('p').css({ transform: 'rotate(10deg)' }); expect($element).to.be.instanceof(jQuery); @@ -212,7 +214,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を // 使う方法を使ってください。 - var $element = 'change me!'; + var $element = $('[data-js-training=darkorchid]').css({ top: '-20px', position: 'relative' }); expect($element).to.be.instanceof(jQuery); From 103feab19bbcdce37af25c76d83a0b8a9a5be0a1 Mon Sep 17 00:00:00 2001 From: U-MA Date: Tue, 22 Dec 2015 00:06:45 +0900 Subject: [PATCH 9/9] Stage 3 all green --- public/stage3/tests.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/public/stage3/tests.js b/public/stage3/tests.js index fa3cb6f2..d6f55dbe 100644 --- a/public/stage3/tests.js +++ b/public/stage3/tests.js @@ -11,6 +11,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で // var element = document.querySelector('#firebrick'); // var ghost = document.querySelector('.firebrick-ghost'); // element.removeChild(ghost); + var element = document.querySelector('#firebrick'); + var ghost = document.querySelector('.firebrick-ghost'); + element.removeChild(ghost); var firebrick = document.getElementById('firebrick'); @@ -22,6 +25,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('2 番の要素からインベーダー要素を除去する', function() { // ここにコードを記述してください。 + var element = document.querySelector('#chocolate'); + var invader = document.querySelector('.chocolate-space-invader'); + element.removeChild(invader); var darkorange = document.getElementById('chocolate'); @@ -33,6 +39,10 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('3 番の要素の左右の幽霊要素をすべて除去する', function() { // ここにコードを記述してください。 + var element = document.querySelector('.mediumseagreen'); + var ghosts = document.querySelectorAll('.mediumseagreen-ghosts'); + element.removeChild(ghosts[0]); + element.removeChild(ghosts[1]); var darkorange = document.querySelector('.mediumseagreen'); @@ -45,6 +55,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で elementToAdd.textContent = '\uD83D\uDC2C'; // 上の elementToAdd を追加するコードをここに記述してください。 + var element = document.querySelector('.turquoise'); + element.appendChild(elementToAdd); var turquoise = document.querySelector('.turquoise'); @@ -60,6 +72,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で // 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを // ここに記述してください。 + var element = document.querySelector('blockquote'); + element.insertBefore(elementToAdd, element.firstChild); var blockquote = document.querySelector('blockquote'); @@ -79,6 +93,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で // ここに以下のコードを記述してください。 // // $('.brown-ghost').remove(); + $('.brown-ghost').remove(); var $brown = $('#brown'); @@ -90,6 +105,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('7 番の要素からインベーダー要素を除去する', function() { // ここにコードを記述してください。 + $('.darkorange-space-invader').remove(); var $darkorange = $('#darkorange'); @@ -104,6 +120,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('8 番の要素の左右の幽霊要素をすべて除去する', function() { // ここにコードを記述してください。 + $('.limegreen-ghosts').remove(); var $limegreen = $('.limegreen'); @@ -115,6 +132,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で var $elementToAdd = $('\uD83D\uDC2C'); // 上の $elementToAdd を追加するコードをここに記述してください。 + $('.mediumturquoise').append($elementToAdd); var $mediumturquoise = $('.mediumturquoise'); @@ -127,6 +145,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で var $elementToAdd = $('\uD83D\uDC1F'); // 上の $elementToAdd を追加するコードをここに記述してください。 + $('p').prepend($elementToAdd); var $p = $('p');