JavaScript 初心者が JS の未来を見据えつつ、
基礎をひととおり身に付けるための資料です。
この研修では Google Chrome を利用します。
上のリンクから Chrome をインストールしてください。
Node.js も利用しています。
こちらも上のリンクからインストールしてください。
JavaScriptTraining の学習履歴を残すために、
JavaScriptTraining リポジトリを fork します。
画面右上にある fork ボタンを押してください。
ここからはターミナル上での操作になります。
リポジトリの URL をコピーし、下のコマンドを
ターミナルで実行してください。
git clone コピーしたURL
下のコマンドをターミナルで実行してください。
cd JavaScriptTraining
npm run setup
下のコマンドをターミナルで実行してください。
なお、トレーニング中はこのコマンドを
終了しないでください。
npm run serve
ブラウザから http://localhost:8000 へ
アクセスしてください。
トレーニングの一覧が表示されていれば完了です。
JavaScript はウェブの言語です。
ウェブページにある特定の要素を
操作する手段として始まりましたが、
途方もなく成長しました。(JavaScript パターン, O'Reilly)
クラスというものがなく、
第一級オブジェクトである関数が
多くの仕事に使われます。(JavaScript パターン, O'Reilly)
Java や PHP が追加しはじめた
クロージャーや無名関数といった
機能は、JavaScript 開発者が
楽しんできた機能であり、
あるのが当然だと思われていました。(JavaScript パターン, O'Reilly)
['Foo', 'Bar', 'Buz'].forEach(function(name) {
console.log('hello ' + name);
});（クロージャーはトレーニングで扱います）
- Web ブラウザ
- Node.js, io.js
-
Web ページに独自の動きをつけたいとき
（一部は CSS でできます）
-
ページ遷移なしにサーバーと通信したいとき
-
パフォーマンスチューニング
-
フロントエンドエコシステム使いたいとき
（タスクランナーとかパッケージマネージャ）
- アニメーションの例: Si digital
- インタラクションの例: Vim.js
- Web API の例: Google Map
Chrome で http://localhost:8000 を開きます。
Web ページの適当な場所で
右クリック > 要素の検証
または
- Mac の人： ⌘ + ⌥ + i
- Windows の人：Ctrl + Shift + i
開発ツールを選択し、Esc キーを
数回おしてみてください。
すると、下に Console が出てきます。
この Console から、JavaScript を
実行することができます。
試しに alert('Foo'); と実行してみてください。
アラートポップアップが表示されます。
1 + 1 や 'Foo' + 'Bar' なども実行できますね。
変数代入・参照もできますね。
var foo = 'bar';
foo;ブラウザオブジェクトもいじってみましょう。
document.title = 'あなたとjava 今すぐダウンロード';Chrome のタブ名が書き変わりました。
ページを再読み込みしてみてください。
これまでの変更はすべてリセットされます。
（つまり、この方法で本番リリースは
できないということですね！）
-
スクリプト読み込みパターン（推奨）
<script src="foo.js"></script>
-
インラインパターン
<script>alert('inline!');</script>
-
インラインイベントハンドラーパターン
<img src="buz.png" onerror="alert('onerror!')">
-
ブックマークレットパターン
<a href="javascript: alert('bookmarklet!')"></a>
意図した DOM 要素を取得するトレーニング
Web ページは HTML のタグによって
構成されています。
この 3D ビューを見ると、複数の HTML タグから Web ページが構成されていることがよくわかります。
この HTML タグは下のような木構造をとっています。
実際に、mixi-inc/JavaScriptTraining を開き、
開発コンソールのElement タブに表示されている
構造を確認してみてください。
DOM (Document Object Model) は、この HTML のタグを
JavaScript の世界で操作することができる API です。
JavaScript の世界にもってこられた HTML タグは、
DOM 要素と呼ばれています。
HTML のタグを JavaScript 側で操作するためには
HTML のタグを HTML 文書から取り出し、
JavaScript の世界へと取ってこなければなりません。
このステージでは、HTML から DOM 要素を
取得するという操作について学びます。
HTML タグには、目印となるいくつかの情報が
付属しています。たとえば、下の div タグには
ID 属性が付属しています。
<div id="foo">foo</div>JavaScript はこの目印を DOM API に渡すことで、
DOM 要素を取得することができます。
var div = document.getElementById('foo');他にも CSS クラスやタグ名、
<div class="foo">foo</div>その他の属性から、DOM 要素を取得することが
できます。
<a href="foo">foo</a>また、目印の指定の仕方のひとつに、
CSS セレクタがあります。
たとえば、foo という ID のついたタグであれば、
<div id="foo">foo</div>var div = document.querySelector('#foo');というように、ID の先頭に ID セレクタ #
をつけることで、取得したい DOM 要素を指示します。
この方法の利点は、複雑な目印を使って DOM 要素を
取得することができるということでしょう。
下の HTML の bar を包む div タグにあたる
DOM 要素を取得する場合、
<div class="foo">
<div>foo</div>
<div>bar</div>
</div>var div = document.querySelector('.foo div:last-child');というように、CSS クラスセレクタ .foo に
該当する要素の子要素を子孫セレクタ (スペース) で
取得し、このうち、CSS 疑似セレクタ :last-child に
マッチするものを取得するという操作になります。
CSS セレクタについては、MDN のCSS リファレンス が 参考になります。
下のテストが green になるように、
public/stage1/tests.js を
修正してください。
意図通りに DOM 要素のスタイルを変更するトレーニング
下のテストが green になるように、
public/stage2/tests.js を
修正してください。
意図通りに DOM の構造を変更するトレーニング
下のテストが green になるように、
public/stage3/tests.js を
修正してください。
意図通りに DOM イベントを利用するトレーニング
下のテストが green になるように、
public/stage4/tests.js を
修正してください。
意図通りにサーバーと通信するトレーニング
下のテストが green になるように、
public/stage5/tests.js を
修正してください。
意図通りにモジュールを実装するトレーニング
下のテストが green になるように、
public/stage6/tests.js を
修正してください。
よくあるイディオムを読み書きするトレーニング
下のテストが green になるように、
public/stage6/tests.js を
修正してください。