diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..ce337a15 Binary files /dev/null and b/.DS_Store differ diff --git a/gulp/.DS_Store b/gulp/.DS_Store new file mode 100644 index 00000000..ed1c15f2 Binary files /dev/null and b/gulp/.DS_Store differ diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 00000000..27a68a9e Binary files /dev/null and b/public/.DS_Store differ diff --git a/public/common/.DS_Store b/public/common/.DS_Store new file mode 100644 index 00000000..5f95c3f2 Binary files /dev/null and b/public/common/.DS_Store differ diff --git a/public/stage1/.DS_Store b/public/stage1/.DS_Store new file mode 100644 index 00000000..bacdc644 Binary files /dev/null and b/public/stage1/.DS_Store differ diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 46f1ed45..bceccf2c 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()); @@ -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')); @@ -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')); @@ -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) li: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:last-of-type li:last-of-type'; var element = document.querySelector(selector); expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/); @@ -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 = $('.js-training:last-of-type li:last-of-type'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(1); @@ -334,7 +334,7 @@ describe('ステージ1(意図した DOM 要素を取得できるようにな it('動いている寿司要素を取得する', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = $('x-flying-sushi-monster')[0]; expect(element).to.have.deep.property( secret('grkgPbagrag'), '\uD83C\uDF63'); diff --git a/public/stage2/tests.js b/public/stage2/tests.js index b430dfdc..a6dae13f 100644 --- a/public/stage2/tests.js +++ b/public/stage2/tests.js @@ -9,9 +9,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 +23,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,8 +40,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; - + var element = document.querySelector('.mediumseagreen'); + element.style.backgroundColor = 'limegreen'; expect(element).to.have.property( secret('pynffAnzr'), secret('zrqvhzfrnterra')); @@ -58,7 +58,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.querySelector('.turquoise'); + element.style.opacity = '0.5'; expect(element).to.have.property( @@ -76,7 +77,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.querySelector('blockquote'); + element.style.transform = 'rotate(10deg)'; expect(element).to.have.property( @@ -97,7 +99,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( @@ -125,9 +129,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); @@ -140,8 +143,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); expect($element).to.have.id(secret('qnexbenatr')); @@ -156,7 +159,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; + var $element = $('.limegreen'); + $element.css('background-color', 'mediumseagreen'); expect($element).to.be.instanceof(jQuery); @@ -173,8 +177,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; - + var $element = $('.mediumturquoise'); + $element.css('opacity', '0.5'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.class(secret('zrqvhzghedhbvfr')); @@ -186,8 +190,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; - + var $element = $('p'); + $element.css({transform: 'rotate(10deg)'}); expect($element).to.be.instanceof(jQuery); @@ -205,7 +209,9 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス // // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を // 使う方法を使ってください。 - var $element = 'change me!'; + var $element = $("[data-js-training='darkorchid']"); + $element.css('top', '-20px'); + $element.css('position', 'relative'); expect($element).to.be.instanceof(jQuery); diff --git a/public/stage3/tests.js b/public/stage3/tests.js index fa3cb6f2..e593c116 100644 --- a/public/stage3/tests.js +++ b/public/stage3/tests.js @@ -8,9 +8,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,7 +22,9 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で it('2 番の要素からインベーダー要素を除去する', function() { // ここにコードを記述してください。 - + var element = document.querySelector('#chocolate'); + var ghost = document.querySelector('.chocolate-space-invader'); + element.removeChild(ghost); var darkorange = document.getElementById('chocolate'); expect(darkorange.childNodes.length).to.equal(1); @@ -33,6 +35,10 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で it('3 番の要素の左右の幽霊要素をすべて除去する', function() { // ここにコードを記述してください。 + var element = document.querySelector('.mediumseagreen'); + var ghost = document.querySelectorAll('.mediumseagreen-ghosts'); + element.removeChild(ghost[0]); + element.removeChild(ghost[1]); var darkorange = document.querySelector('.mediumseagreen'); @@ -45,6 +51,8 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で elementToAdd.textContent = '\uD83D\uDC2C'; // 上の elementToAdd を追加するコードをここに記述してください。 + var element = document.querySelector('.turquoise'); + element.appendChild(elementToAdd); var turquoise = document.querySelector('.turquoise'); @@ -60,6 +68,8 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で // 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを // ここに記述してください。 + var element = document.querySelector('blockquote'); + element.insertBefore(elementToAdd, element.firstChild); var blockquote = document.querySelector('blockquote'); @@ -78,7 +88,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で // jQuery でも同じことをおこなってみましょう。 // ここに以下のコードを記述してください。 // - // $('.brown-ghost').remove(); + $('.brown-ghost').remove(); var $brown = $('#brown'); @@ -90,6 +100,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で it('7 番の要素からインベーダー要素を除去する', function() { // ここにコードを記述してください。 + $('.darkorange-space-invader').remove(); var $darkorange = $('#darkorange'); @@ -104,6 +115,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で it('8 番の要素の左右の幽霊要素をすべて除去する', function() { // ここにコードを記述してください。 + $('.limegreen-ghosts').remove(); var $limegreen = $('.limegreen'); @@ -115,6 +127,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で var $elementToAdd = $('\uD83D\uDC2C'); // 上の $elementToAdd を追加するコードをここに記述してください。 + $('.mediumturquoise').append($elementToAdd); var $mediumturquoise = $('.mediumturquoise'); @@ -127,6 +140,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で var $elementToAdd = $('\uD83D\uDC1F'); // 上の $elementToAdd を追加するコードをここに記述してください。 + $('p').prepend($elementToAdd); var $p = $('p'); diff --git a/public/stage4/tests.js b/public/stage4/tests.js index 599536b6..921d6e28 100644 --- a/public/stage4/tests.js +++ b/public/stage4/tests.js @@ -17,10 +17,10 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun // // jQuery 版: // - // $('#firebrick').on('click', function(event) { - // var $target = $(event.target); - // $target.text(Number($target.text()) + 1); - // }); + $('#firebrick').on('click', function(event) { + var $target = $(event.target); + $target.text(Number($target.text()) + 1); + }); // // ここに上記のどちらかのコードを記述してください。 @@ -37,7 +37,10 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun it('2 番の要素の click イベントで要素内の数字を 1 ずつ小さくできる', function() { // ここにコードを記述してください。 - + $('#chocolate').on('click', function(event) { + var $target = $(event.target); + $target.text(Number($target.text()) - 1); + }); var chocolate = document.getElementById('chocolate'); chocolate.dispatchEvent(createClickEvent()); @@ -51,7 +54,13 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() { // ここにコードを記述してください。 + var value = 0; + $('.mediumseagreen').on('click', function(event) { + var $target = $(event.target); + value += 10; + $target.css({transform: 'rotate(' + value + 'deg)'}); + }); var mediumseagreen = document.querySelector('.mediumseagreen'); mediumseagreen.dispatchEvent(createClickEvent()); @@ -67,6 +76,12 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun it('4 番の要素を入力された角度に回転できる', function() { // ここにコードを記述してください。 + var $element = $('.turquoise'); + + $('input').change(function() { + var value = parseInt($('input').val()); + $element.css({transform: 'rotate(' + value + 'deg)'}); + }); var turquoise = document.querySelector('.turquoise'); @@ -92,10 +107,11 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun // // なお、expect(steelblue).to.be.null は上記のテストの要件を満たして // いないので、正解ではありません。 - - var steelblue = document.querySelector('.steelblue'); - expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33'); - done(); + $('.steelblue').ready(function(){ + var steelblue = document.querySelector('.steelblue'); + expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33'); + done(); + }); }); }); }); diff --git a/public/stage5/.DS_Store b/public/stage5/.DS_Store new file mode 100644 index 00000000..6f5fc6a8 Binary files /dev/null and b/public/stage5/.DS_Store differ diff --git a/public/stage5/tests.js b/public/stage5/tests.js index 568548d3..4d788f0f 100644 --- a/public/stage5/tests.js +++ b/public/stage5/tests.js @@ -9,10 +9,10 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', // // ここに下記のコードを記述してください。 // - // promise.then(function(msg) { - // expect(msg).to.equal('resolved!'); - // testDone(); - // }); + promise.then(function(msg) { + expect(msg).to.equal('resolved!'); + testDone(); + }); }); @@ -26,7 +26,10 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', // testDone(); // ここにコードを記述してください。 - + promise.catch(function(msg) { + expect(msg).to.equal('rejected!'); + testDone(); + }); }); @@ -38,7 +41,7 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', var promise3 = createWaitPromise(messageFragments[2], 30); // 作成した promise を promise 変数に代入してください。 - var promise = 'change me!'; + var promise = Promise.all([promise1, promise2, promise3]); return expect(promise).to.eventually.deep.equal(messageFragments); @@ -52,7 +55,7 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', var promise3 = createWaitPromise(messageFragments[2], 30); // 作成した promise を promise 変数に代入してください。 - var promise = 'change me!'; + var promise = Promise.race([promise1, promise2, promise3]); return expect(promise).to.eventually.equal(messageFragments[1]); @@ -69,9 +72,9 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', // // ここに下記のコードを記述してください。 // - // var promisedFriends = fetch(api + username).then(function(res) { - // return res.json(); - // }); + var promisedFriends = fetch(api + username).then(function(res) { + return res.json(); + }); return expect(promisedFriends).to.eventually.have.length(1) @@ -84,7 +87,9 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', var username = 'Shen'; // 作成した promise を promisedFriends 変数に代入してください。 - var promisedFriends = 'change me!'; + var promisedFriends = fetch(api + username).then(function(res) { + return res.json(); + }) return expect(promisedFriends).to.eventually.have.length(2) @@ -96,8 +101,30 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', var api = '/api/friends/'; var username = 'Shen'; + // 分からなかったので解答参考につくりました。(理解につとめたい) + + // 友人の配列を取得 + function getFriends(usernameToFetch) { + return fetch(api + usernameToFetch).then(function(res) { + return res.json(); + }); + } + + // 配列を平たく + function flatMap(arrayToFlat) { + return arrayToFlat.reduce(function(flatArray, array) { + return flatArray.concat(array); //生成した新しい配列 + }, []); + } + // 作成した promise を promisedFriends 変数に代入してください。 - var promisedFriends = 'change me!'; + var promisedFriends = getFriends(username) + .then(function(friends) { + return Promise.all(friends.map(getFriends)); + }) + .then(function(friendsArray) { + return flatMap(friendsArray); + }); return expect(promisedFriends).to.eventually.have.length(1) @@ -127,7 +154,9 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', it('Github の mixi-inc の organization の情報を取得できる', function() { // 作成した promise を mixiOrg 変数に代入してください。 - var mixiOrg = 'change me!'; + var mixiOrg = fetch('https://api.github.com/orgs/mixi-inc').then(function(res) { + return res.json(); + }); return expect(mixiOrg).to.eventually.have.property('id', 1089312); @@ -140,7 +169,9 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', var repository = 'mixi-inc/JavaScriptTraining'; // 作成した promise を mixiRepo 変数に代入してください。 - var mixiRepo = 'change me!'; + var mixiRepo = fetch('https://api.github.com/repos/' + repository).then(function(res) { + return res.json(); + }); return expect(mixiRepo).to.eventually.have.property('full_name', repository); @@ -153,10 +184,37 @@ describe('ステージ5(意図通りに非同期処理を利用できる)', it('Github API を使って、VimL、Emacs Lisp でスターが最も多いプロダクト名を' + 'それぞれ 1 つずつ取得できる', function() { var languages = [ 'VimL', '"Emacs Lisp"' ]; - var mostPopularRepos = 'change me!'; // 作成した promise を mostPopularRepos 変数に代入してください。 + // 分からなかったので解答参考につくりました。(理解につとめたい) + + //オブジェクトから、query stringを作る + function buildQueryString(queryMap) { + return Object.keys(queryMap).map(function(key){ + return encodeURIComponent(key) + '=' + encodeURIComponent(queryMap[key]); + }).join('&'); + } + + //指定された言語で最もスターがおおいリポジトリ名を返す + function searchMostPopulerRepoByLanguage(lang) { + var queryString = buildQueryString({ + q: 'language:' + lang, + sort: 'stars' + }); + + return fetch('https://api.github.com/search/repositories?' + queryString) + .then(function(response) { + return response.json(); + }) + .then(function(result) { + return result.items[0].full_name; + }); + } + + + var mostPopularRepos = Promise.all( + languages.map(searchMostPopulerRepoByLanguage)); return expect(mostPopularRepos).to.eventually.have.length(2) .and.satisfy(function(names) { diff --git a/public/stage6/index.html b/public/stage6/index.html index 6b8f5810..1aef501b 100644 --- a/public/stage6/index.html +++ b/public/stage6/index.html @@ -9,6 +9,7 @@ + サンプルパッケージ @@ -19,6 +20,8 @@ + + + +
    +
    +
    + + + + + +
    +
    +
    +

    + + +
    商品名価格個数
    diff --git a/public/stage6/tests.js b/public/stage6/tests.js index 12920d31..5c003230 100644 --- a/public/stage6/tests.js +++ b/public/stage6/tests.js @@ -5,8 +5,58 @@ describe('ステージ6(意図通りにモジュールを書ける)', functi // ボタンはサービスです。 // 自由に使ってください。 - var qualityOfYourAppliation = undefined; + + var qualityOfYourAppliation = true; expect(qualityOfYourAppliation).to.be.ok; }); }); + +var sum =0; +var itemlist = ["りんご", "みかん", "もも"]; +var pricelist = {"りんご":500, "みかん":300, "もも":200}; + +function add() { + var itm = myform.items.value; + var num = myform.num.value; + + var table = document.getElementById("table"); + + var tr = document.createElement("tr"); + + var td = document.createElement("td"); + var txt = document.createTextNode(itm); + td.appendChild(txt); + tr.appendChild(td); + + var td = document.createElement("td"); + var txt = document.createTextNode(pricelist[itm]); + td.appendChild(txt); + tr.appendChild(td); + + var td = document.createElement("td"); + var txt = document.createTextNode(num); + td.appendChild(txt); + tr.appendChild(td); + + var subtotal = pricelist[itm]*num; + sum = sum + subtotal; + var td = document.createElement("td"); + var txt = document.createTextNode(subtotal); + td.appendChild(txt); + tr.appendChild(td); + + table.appendChild(tr); +} + +function clearData() { + var table = document.getElementById("table"); + for(var i=table.childNodes.length-1; i>1; i--) { + table.removeChild(table.childNodes[i]); + } + sum = 0; +} + +function sumAlert() { + window.alert("合計:" + sum + "円"); +} \ No newline at end of file diff --git a/public/stage7/tests.js b/public/stage7/tests.js index 3a72ba58..0872ca77 100644 --- a/public/stage7/tests.js +++ b/public/stage7/tests.js @@ -14,39 +14,39 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func it('1回目の値がわかる', function() { - expect(counter()).to.equal(/* ここに値を書き込んでください */); + expect(counter()).to.equal(0); }); it('2回目の値がわかる', function() { - expect(counter()).to.equal(/* ここに値を書き込んでください */); + expect(counter()).to.equal(1); }); it('3回目の値がわかる', function() { - expect(counter()).to.equal(/* ここに値を書き込んでください */); + expect(counter()).to.equal(2); }); }); describe('ショートサーキット演算', function() { it("true && 'default' の結果がわかる", function() { - expect(true && 'default').to.equal(/* ここに値を書き込んでください */); + expect(true && 'default').to.equal('default'); }); it("false || 'default' の結果がわかる", function() { - expect(false || 'default').to.equal(/* ここに値を書き込んでください */); + expect(false || 'default').to.equal('default'); }); it("0 || 'default' の結果がわかる", function() { - expect(0 || 'default').to.equal(/* ここに値を書き込んでください */); + expect(0 || 'default').to.equal('default'); }); it("{} || 'default' の結果がわかる", function() { - expect({} || 'default').to.deep.equal(/* ここに値を書き込んでください */); + expect({} || 'default').to.deep.equal({}); }); @@ -55,7 +55,7 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func return arg || { foo: 'foo' }; }; - expect(func({ foo: 'bar' })).to.deep.equal(/* ここに値を書き込んでください */); + expect(func({ foo: 'bar' })).to.deep.equal({ foo: 'bar' }); }); @@ -64,7 +64,7 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func return arg || { foo: 'foo' }; }; - expect(func()).to.deep.equal(/* ここに値を書き込んでください */); + expect(func()).to.deep.equal({ foo: 'foo' }); }); }); @@ -76,7 +76,7 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func num = 1; })(); - expect(num).to.equal(/* ここに値を書き込んでください */); + expect(num).to.equal(1); }); @@ -87,7 +87,7 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func num = 1; }, 0); - expect(num).to.equal(/* ここに値を書き込んでください */); + expect(num).to.equal(0); }); @@ -97,22 +97,22 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func it('!!truthy の結果がわかる', function() { - expect(!!truthy).to.equal(/* ここに値を書き込んでください */); + expect(!!truthy).to.equal(true); }); it('!!falsey の結果がわかる', function() { - expect(!!falsey).to.equal(/* ここに値を書き込んでください */); + expect(!!falsey).to.equal(false); }); it('Boolean(truthy) の結果がわかる', function() { - expect(Boolean(truthy)).to.equal(/* ここに値を書き込んでください */); + expect(Boolean(truthy)).to.equal(true); }); it('Boolean(falsey) の結果がわかる', function() { - expect(Boolean(falsey)).to.equal(/* ここに値を書き込んでください */); + expect(Boolean(falsey)).to.equal(false); }); }); @@ -137,71 +137,71 @@ describe('ステージ7(よくあるJSのイディオムを読める)', func it('parent.grandParent の値がわかる', function() { - expect(parent.grandParent).to.equal(/* ここに値を書き込んでください */); + expect(parent.grandParent).to.equal(true); }); it('parent.child の値がわかる', function() { - expect(parent.child).to.equal(/* ここに値を書き込んでください */); + expect(parent.child).to.equal(undefined); }); it('child.grandParent の値がわかる', function() { - expect(child.grandParent).to.equal(/* ここに値を書き込んでください */); + expect(child.grandParent).to.equal(true); }); it('child.parent の値がわかる', function() { - expect(child.parent).to.equal(/* ここに値を書き込んでください */); + expect(child.parent).to.equal(true); }); }); }); -describe.skip('あなたの闇のJS力', function() { +describe('あなたの闇のJS力', function() { // .skip を外せば始められます describe('ゆるふわ == 演算子', function() { it("'10' == 10 の振る舞いがわかる", function() { expect('10' == 10) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it('null == undefined の振る舞いがわかる', function() { expect(null == undefined) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it('null == false の振る舞いがわかる', function() { expect(null == false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('true == 1 の振る舞いがわかる', function() { expect(true == 1) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it('true == 10 の振る舞いがわかる', function() { expect(true == 10) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('[0, 1] == 0 の振る舞いがわかる', function() { expect([0, 1] == 0) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('[1] == 1 の振る舞いがわかる', function() { expect([1] == 1) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); }); @@ -209,72 +209,72 @@ describe.skip('あなたの闇のJS力', function() { describe('意図しない truthy/falsey', function() { it('Boolean(false) が truthy/falsey のどちらなのかわかる', function() { expect(Boolean(false) ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('Boolean(0) が truthy/falsey のどちらなのかわかる', function() { expect(Boolean(0) ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('new Boolean(0) が truthy/falsey のどちらなのかわかる', function() { expect(new Boolean(0) ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it("'abc' が truthy/falsey のどちらなのかわかる", function() { expect('abc' ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it("'' が truthy/falsey のどちらなのかわかる", function() { expect('' ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('String(0) が truthy/falsey のどちらなのかわかる', function() { expect(String(0) ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it("String('') が truthy/falsey のどちらなのかわかる", function() { expect(String('') ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(false); }); it('new String(0) が truthy/falsey のどちらなのかわかる', function() { expect(new String(0) ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); it("new String('') が truthy/falsey のどちらなのかわかる", function() { expect(new String('') ? true : false) - .to.equal(/* ここに値を書き込んでください */); + .to.equal(true); }); }); describe('読めないキャスト万歳!', function() { it("10 + '' の値がわかる", function() { - expect(10 + '').to.equal(/* ここに値を書き込んでください */); + expect(10 + '').to.equal('10'); }); it("+'10' の値がわかる", function() { - expect(+'10').to.equal(/* ここに値を書き込んでください */); + expect(+'10').to.equal(10); }); it("'10.1'|0 の値がわかる", function() { - expect('10.1'|0).to.equal(/* ここに値を書き込んでください */); + expect('10.1'|0).to.equal(10); }); @@ -282,51 +282,51 @@ describe.skip('あなたの闇のJS力', function() { var obj = { length: 2, 0: 'foo', 1: 'bar' }; expect(Array.prototype.slice.call(obj)) - .to.deep.equal(/* ここに値を書き込んでください */); + .to.deep.equal(['foo', 'bar']); }); it('+(new Date()) の型がわかる', function() { expect(typeof +(new Date())) - .to.equal(/* ここに値を書き込んでください */); + .to.equal('number'); }); it('(new Date()) + 0 の型がわかる', function() { expect(typeof ((new Date()) + 0)) - .to.equal(/* ここに値を書き込んでください */); + .to.equal('string'); }); }); describe('ダブルスタンダード Array コンストラクタ', function() { it('Array(3) が作成する配列の長さがわかる', function() { - expect(Array(3)).to.have.length(/* ここに値を書き込んでください */); + expect(Array(3)).to.have.length(3); }); it('Array(3) が作成する配列の0番目の要素がわかる', function() { - expect(Array(3)[0]).to.equal(/* ここに値を書き込んでください */); + expect(Array(3)[0]).to.equal(undefined); }); it('Array(3) が作成する配列がわかる', function() { - expect(Array(3)).to.deep.equal(/* ここに値を書き込んでください */); + expect(Array(3)).to.deep.equal([, , ]); }); it('Array(1, 2, 3) が作成する配列の長さがわかる', function() { - expect(Array(1, 2, 3)).to.have.length(/* ここに値を書き込んでください */); + expect(Array(1, 2, 3)).to.have.length(3); }); it('Array(1, 2, 3) が作成する配列の0番目の要素がわかる', function() { - expect(Array(1, 2, 3)[0]).to.equal(/* ここに値を書き込んでください */); + expect(Array(1, 2, 3)[0]).to.equal(1); }); it('Array(1, 2, 3) が作成する配列がわかる', function() { - expect(Array(1, 2, 3)).to.deep.equal(/* ここに値を書き込んでください */); + expect(Array(1, 2, 3)).to.deep.equal([1, 2, 3]); }); }); @@ -336,7 +336,7 @@ describe.skip('あなたの闇のJS力', function() { var obj = { foo: 'bar' }; with (obj) { - expect(foo).to.equal(/* ここに値を書き込んでください */); + expect(foo).to.equal('bar'); } }); @@ -345,7 +345,7 @@ describe.skip('あなたの闇のJS力', function() { var obj = { 'foo': 'bar', 'undefined': 'bar' }; with (obj) { - expect(foo === undefined).to.equal(/* ここに値を書き込んでください */); + expect(foo === undefined).to.equal(true); } }); @@ -354,7 +354,7 @@ describe.skip('あなたの闇のJS力', function() { var obj = { 'foo': 'bar', 'null': 'bar' }; with (obj) { - expect(foo === null).to.equal(/* ここに値を書き込んでください */); + expect(foo === null).to.equal(false); } }); }); @@ -362,35 +362,35 @@ describe.skip('あなたの闇のJS力', function() { describe('JavaScript のゆるふわ型判定', function() { it('typeof 0 の結果がわかる', function() { - expect(typeof 0).to.equal(/* ここに値を書き込んでください */); + expect(typeof 0).to.equal('number'); }); it('typeof true の結果がわかる', function() { - expect(typeof true).to.equal(/* ここに値を書き込んでください */); + expect(typeof true).to.equal('boolean'); }); it("typeof 'string' の結果がわかる", function() { - expect(typeof 'string').to.equal(/* ここに値を書き込んでください */); + expect(typeof 'string').to.equal('string'); }); it('typeof function() {} の結果がわかる', function() { - expect(typeof function() {}).to.equal(/* ここに値を書き込んでください */); + expect(typeof function() {}).to.equal('function'); }); it('typeof {} の結果がわかる', function() { - expect(typeof {}).to.equal(/* ここに値を書き込んでください */); + expect(typeof {}).to.equal('object'); }); it('typeof [] の結果がわかる', function() { - expect(typeof []).to.equal(/* ここに値を書き込んでください */); + expect(typeof []).to.equal('object'); }); it('typeof undefined の結果がわかる', function() { - expect(typeof undefined).to.equal(/* ここに値を書き込んでください */); + expect(typeof undefined).to.equal('undefined'); }); it('typeof null の結果がわかる', function() { - expect(typeof null).to.equal(/* ここに値を書き込んでください */); + expect(typeof null).to.equal('object'); }); }); }); diff --git a/server/.DS_Store b/server/.DS_Store new file mode 100644 index 00000000..a0b6b3f5 Binary files /dev/null and b/server/.DS_Store differ diff --git a/server/response/.DS_Store b/server/response/.DS_Store new file mode 100644 index 00000000..8f0f907e Binary files /dev/null and b/server/response/.DS_Store differ