どんなプロパティ変数があるかはリファレンスサイトを見てください
右だから数字を読んでいます。左だったら、数字を書きます。ただし、書くことが禁止されたプロパティ変数もあります
プロパティ変数が、手のひらに数字が書かれているのか、「何か」をつかんでいるかは、プロパティ変数によります (基本的には自由ですが、最初から用意されている「何か」に関しては、あらかじめ決まっていると考えてください)

プロパティ変数が何かをつかむ

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

宿題

ゲーム作成

ありえるえりあ

Sections

Personal tools

Document Actions

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

JavaScriptトレーニング

JavaScriptトレーニングとは

用意するもの

参照サイト

変数

変数の手に数字を書く

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

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

代入

代入の左と右

代入は右から読む

左でなければ右

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

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

用意されている変数

変数の手が何かをつかむ

つかむことの意味

何かは「手」をたくさん持つ

何かは目に見えるか?

プロパティ変数と今までの変数

プロパティ変数