非開発者向けJavaScriptトレーニング
JavaScriptのコードを書かれたまま、素直に読むことが目標です。プログラミング経験無しの人を前堤にしています。 アリエル社内の一部の有志のみ参加の勉強会資料です。
JavaScriptトレーニング
JavaScriptトレーニングとは
- 比喩で理解するJavaScript
- 脳年令40才以下向けイメージトレーニング
- コードを書かれたまま、素直に読むことが目標
用意するもの
- Emacs
- Firefox + Firebug
代入の左と右
- 代入'='の左と右では、変数の動きが違う
- 右: 手の数字を読む
- 左: 手に数字を書く
最初から用意されているもの
厳密にはJavaScriptというプログラミング言語と実行環境は分けて考える必要があります。
が、実行環境をWebブラウザに限定します。
実行環境をWebブラウザに限定すると、最初から用意されているものは次のふたつを考えておけば事足ります。
- ウィンドウ
- ドキュメント
イメージ的には、前者がブラウザそのもの、後者がブラウザに表示されている文書(HTMLなど)です。
用意されている変数
何かをつかむには変数で参照する必要があります
JavaScript(実行環境Webブラウザ。以下、この注釈は省略)で、最初から用意されている変数はひとつだけ。 => window
変数windowの「手」は、「何か」をつかんでいます。
変数の手が何かをつかむ
var w = window;
読み方ルール
- 代入は右から読む
- 右は手がつかんでいる「何か」を読む
- 左は手に「何か」をつかませる
上の解釈
- 変数windowがつかんでいる「何か」を変数wがつかむ (変数windowもつかんだままです)
つかむことの意味
var w1 = window; var w2 = window;
3つの変数(window,w1,w2)は同じものをつかんでいます。
つかまれた「何か」は、つかまれるだけでは変化はしません(内部的な参照カウントなどは別の話)
何かは「手」をたくさん持つ
「何か」は、「手」をたくさん持ちます。
- 「手」には名前があります
- 「手」の働きは変数の「手」と同じです(手のひらに数字を書くか、何かをつかむか)
=> プロパティ変数と呼びます
何かは目に見えるか?
- 目に見えるとは限りません
- しかし、当面、目に見えるものを扱います
プロパティ変数と今までの変数
xやyなどは、実は変数windowの手がつかむ「何か」のプロパティ変数です
x; window.x; w.x;
全部同じです(今、変数wは変数windowと同じものをつかんでいるので)
単に x と書いた場合、window.xの省略です。
本当に特別な変数は window だけです(唯一のグローバル変数)
他の変数は、必ず何かのプロパティ変数です。
プロパティ変数
window.outerHeight;
「変数 window の手がつかむ何か」のプロパティ変数 outerHeight の手のひらの数字
- どんなプロパティ変数があるかはリファレンスサイトを見てください
- 右だから数字を読んでいます。左だったら、数字を書きます。ただし、書くことが禁止されたプロパティ変数もあります
- プロパティ変数が、手のひらに数字が書かれているのか、「何か」をつかんでいるかは、プロパティ変数によります (基本的には自由ですが、最初から用意されている「何か」に関しては、あらかじめ決まっていると考えてください)
プロパティ変数が何かをつかむ
window.document;
「変数windowがつかむ何か」のプロパティ変数documentがつかむ「何か」を表示
2番目の「何か」も「手」がたくさんあります。
それぞれの「手」は、手にひらに数字を書くか、「何か」をつかむかいずれかです(どちらでも無い状態もありますが、最初から用意されている「何か」に関しては、それぞれの「手」はいずれかの状態だと考えてください)
一般的に
a.b.c.d.(続く).z
の読み方
変数aの手がつかむ「何か」のプロパティ変数bの手がつかむ「何か」のプロパティ変数cの...(最後まで続く)
「a.b.c.d.(続く).z」という名前の変数ではないことに注意。
ドットの途中に
- 何もつかんでいないプロパティ変数があった場合 => エラーになります
変数は何をつかんでも自由
結局、特別なグローバル変数 window を除けば、すべてがプロパティ変数なので、以下、プロパティ変数と呼ばずに変数と呼びます。
window.document.location;
var w = window; var d = w.document; var l = d.location;
変数は色々でてきても、つかまれる「何か」は増えも減りもしていないことに注意してください。
DOM
変数window.documentがつかんでいる何かは「ブラウザに表示されている文書」
これを色々いじるのが、当面の目標です。
いじり方のルールはDOMと呼ばれます(言葉は知らなくても良いです)。
HTMLの要素
<div id="my_id">foobar</div>
DOM(2)
prototype.jsを前提とします。
var e = $('my_id');
で(HTML)id属性の値が'my_id'の要素を、変数eがつかめます。
e;
変数eのつかむ「何か」にどんなプロパティがあるかはリファレンスDOM:element参照
(プロ向け説明: 変数eのつかむ「何か」の型がDOM:element)
DOMとCSS
e.style.color = 'red';
どんなCSS属性があるかはリファレンス(http://www.w3.org/TR/CSS21/propidx.html)を参照。
形を素直に読んでください。
- 変数eの手がつかむ「何か」のプロパティ変数styleがつかむ「何か」のプロパティ変数colorが文字列'red'をつかんでいる
DOMとイベント
e.onclick = function() {alert('foo');}
要素がmouse clickされた時に呼ばれる
形を素直に読んでください。
- 変数eの手がつかむ「何か」のプロパティ変数onclickが関数をつかんでいる
DOMとCSSとイベント
function changecolor(e) {e.style.backgroundColor = 'red'; } function changecolor2(e) {e.style.backgroundColor = 'blue';} e.onclick = function() {window.setTimeout(changecolor, 3000, e)}; e.onclick = function() {window.setTimeout(changecolor2, 4000, e)}; e.onclick = function() {window.setTimeout(function () {e.style.backgroundColor = 'red';}, 3000)};
e.onclick = function() {window.setTimeout(function (my_e) {my_e.style.backgroundColor = 'blue';}, 3000, this)}; e.style.position = 'absolute'; e.onclick = function() {window.setTimeout(function (my_e) {my_e.style.left = (parseInt(my_e.style.left) + 10) + 'px';}, 1000, this)};
宿題
ゲーム作成