Skip to content
This repository was archived by the owner on Jun 20, 2023. It is now read-only.

[WIP] stage1 JavaScriptTraining #27

Closed
wants to merge 5 commits into from
Closed

[WIP] stage1 JavaScriptTraining #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33f0fe1
ref #55 DOM インターフェイス編
thori0908 Apr 30, 2015
5a3a964
ref #55 開発ツール編
thori0908 Apr 30, 2015
2cd4973
ref #55 cssセレクタ編
thori0908 Apr 30, 2015
22bc69f
ref #55 stage1 jQuery編
thori0908 May 1, 2015
10d597a
ref #55 応用 CSS セレクタ編
thori0908 May 1, 2015
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gulp/serve.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,6 @@ var serve = function() {
};


serve.PORT = 8000;
serve.PORT = 3001;

module.exports = serve;
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) li:nth-child(2)';

var element = document.querySelector(selector);
expect(selector).to.not.have.string('#');
Expand All @@ -245,14 +245,14 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {

// 'change me!' を書き換えてください。
var selector = 'change me!';
var selector = '[data-js-training="darkorchid"]';

var element = document.querySelector(selector);
expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/);
expect(selector).to.not.have.string(':nth-child');
expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
secret('qnexbepuvq'));
});
});
});


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 Down
2 changes: 1 addition & 1 deletion server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ app.get('/api/friends/:username([\\w.-]+)', function(req, res) {


var PORT = process.env.PORT;
var HOSTNAME = 'localhost';
var HOSTNAME = '0.0.0.0';

var server = require('http').createServer(app);
server.listen(PORT, HOSTNAME, function () {
Expand Down