Personal tools
You are here: Home 原稿・資料 ワークス、アリエル共同勉強会 非開発者向けJavaScriptトレーニング
Document Actions

非開発者向けJavaScriptトレーニング

JavaScriptのコードを書かれたまま、素直に読むことが目標です。プログラミング経験無しの人を前堤にしています。 アリエル社内の一部の有志のみ参加の勉強会資料です。

JavaScriptトレーニング

JavaScriptトレーニングとは

  • 比喩で理解するJavaScript
  • 脳年令40才以下向けイメージトレーニング
  • コードを書かれたまま、素直に読むことが目標

用意するもの

  • Emacs
  • Firefox + Firebug

変数

  • 変数は「名前」と「手」を持つ

「手」にできること

  • 手のひらに数字を書く
  • 手で「何か」をつかむ

# 両者は排他

変数の手に数字を書く

var x = 1;

変数 x の「手」に数字 1 を書く

x;

変数 x の「手」の数字 1 を表示

変数の手に数字を書く(2)

var y = x;

変数 y の「手のひら」に変数 x の「手のひらの数字」1 を書く

y;

変数 x の「手」の数字 1 を表示

変数の手に数字を書く(3)

var y = x + 1;

変数 y の「手のひら」に、変数 x の「手のひらの数字」1 に1を加算した数字を書く

y;

変数 x の「手」の数字 2 を表示

代入

  • '=' は代入

等しいは ==

# cf. ===

代入の左と右

  • 代入'='の左と右では、変数の動きが違う
  • 右: 手の数字を読む
  • 左: 手に数字を書く

代入は右から読む

var x = x + 1;

読み方ルール

  • 右から読む
  • 右は手の値を読む
  • 左は手に値を書く

=> xの手の値は 2 になる

左でなければ右

x;

これも右のルール。つまり手の値を読みます。

以下、暗黙に「右」とみなします。

# 左を意識する必要があるのは、関数の仮引数ぐらい。後は基本的に右扱い。

変数の手が何かをつかむ(2)

「何か」とは?

  • 最初から用意されているもの
  • 自分で作るもの

のいずれか。

当面、最初から用意されているものだけ考えます

最初から用意されているもの

厳密には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;

変数は色々でてきても、つかまれる「何か」は増えも減りもしていないことに注意してください。

(唐突ですが)関数

関数はミニプログラムのようなもの。

function plus(x,y) {
  return x + y;
}
plus(3,4);

関数をつかむ手

x = plus;
x(1,2);
x = function(x,y) { return x + y; }
x(1,2);

関数をつかむ手(2)

window.plus = function (x,y) {
                return x + y;
              };

関数本体の「何か」を変数window.plusの手がつかんでいるイメージ。

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(3)

e.innerHTML;
e.innerHTML = 'foo';

前者は右、後者は左であることに注意。

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)};

宿題

ゲーム作成


Copyright(C) 2001 - 2006 Ariel Networks, Inc. All rights reserved.