Skip to content

javascript training #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
f-naoki wants to merge 4 commits into
base: feature/javascript
Choose a base branch
from
Open

javascript training #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e05b0ed
getElementById ByClassName
f-naoki Sep 27, 2016
2dc7448
stage1
f-naoki Oct 1, 2016
5cbda91
stage2
f-naoki Oct 1, 2016
a33572b
stage3
f-naoki Oct 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions public/stage1/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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());
Expand All @@ -93,7 +93,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
// すると、開発ツール上で <li id="brown">... が選択されます。
// このことから、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'));
});
Expand All @@ -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'));
});
Expand All @@ -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'));
Expand All @@ -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'));
Expand All @@ -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'));
Expand All @@ -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'));

Expand All @@ -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'));

Expand All @@ -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'));
});
Expand All @@ -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'));
Expand All @@ -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'));
});
Expand All @@ -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'));
Expand All @@ -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('#');
Expand All @@ -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('#');
Expand All @@ -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*[~\|\^\$\*]?=/);
Expand All @@ -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'));
Expand All @@ -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'));
Expand All @@ -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'));
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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');
Expand Down
34 changes: 21 additions & 13 deletions public/stage2/tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand All @@ -24,8 +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'));
expect(element).to.have.deep.property(
Expand All @@ -40,7 +41,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(
Expand All @@ -58,7 +60,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(
Expand All @@ -76,7 +79,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(
Expand All @@ -97,7 +101,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
//
// なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
// 使う方法を使ってください。
var element = 'change me!';
var element = document.querySelector('[data-js-training="blueviolet"]');
element.style.position = 'relative';
element.style.top = '-20px';


expect(element).to.have.deep.property(
Expand Down Expand Up @@ -127,7 +133,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);
Expand All @@ -140,7 +147,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);
Expand All @@ -156,7 +164,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス

// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
var $element = 'change me!';
var $element = $('.limegreen').css('background-color', 'mediumseagreen');


expect($element).to.be.instanceof(jQuery);
Expand All @@ -173,7 +181,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス

// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
var $element = 'change me!';
var $element = $('.mediumturquoise').css('opacity', '0.5');


expect($element).to.be.instanceof(jQuery);
Expand All @@ -186,7 +194,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス

// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
var $element = 'change me!';
var $element = $('p').css('transform', 'rotate(10deg)');


expect($element).to.be.instanceof(jQuery);
Expand All @@ -205,7 +213,7 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
//
// なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
// 使う方法を使ってください。
var $element = 'change me!';
var $element = $('[data-js-training="darkorchid"]').css({'position':'relative' , 'top':'-20px'});


expect($element).to.be.instanceof(jQuery);
Expand Down
Loading