入門編『イベント処理』
「マスター登録の術式の説明に戻る前に、これを見て欲しい」
<SCRIPT>
document.onmousedown=function(){alert("押した！");}
</SCRIPT>
魔導書は入力画面に術式を書き、説明をする。
「『onmousedown』はdocumentオブジェクトの『イベント処理』の一つで、ページに手が触れた瞬間、指定された関数が実行される」
エイダがページに触れると、画面に『押した！』が表示される。
「実行されるのは、functionの『{}』で囲んだ『alert("押した！");』と言う事？」
「そう、その通り」
「けど、以前習った関数の書き方と違うよ？」
エイダは習った書き方を入力していく。
<SCRIPT>
function pressed(){
alert("押した！");
}
</SCRIPT>
エイダのもっともな疑問に、魔導書は答える。
「以前習ったのが、関数名と一緒に定義する方法。今回のは関数名を定義しない方法で『無名関数』と呼ばれる」
「何で関数名を定義しないの？ 名前が無いと実行できないよ？」
「確かに従来のように関数名()で実行する事が出来ないが、プロパティ名()や変数名()で実行できる」
魔導書は変数名での実行を実演する。
<SCRIPT>
var ada=function(){alert("押した！");}
ada();//実行
</SCRIPT>
魔導書がページをロードすると画面に『押した！』が表示された。しかしエイダは困惑した顔のままだ。
「やっぱり、無名関数にする意味がわからない」
「名前を重複させない為かな？ 例えば私がpressed関数を書いたとしよう。不運にもエイダが同じ名前で関数を書いた場合、どっちが実行されると思う？」
<SCRIPT>
function pressed(){alert("pressed!");}//魔導書作
function pressed(){alert("押した！");}//エイダ作
pressed();//どっち？
</SCRIPT>
魔導書の問いかけに、自信を持ってエイダは答える。
「『どっち？』って限定して聞いてきてるから、両方とも実行される。魔導書さんの質問の仕方が怪し過ぎる」
エイダの答えに、魔導書の方が困惑する。
「エイダ、深読みし過ぎ。これは普通に『どっち？』と聞いている」
意地悪な質問をし過ぎたかなと、ほんの少し反省しながら魔導書は訂正する。エイダは少し考え、再び答える。
「魔導書さんのじゃなくて、私のかな？術式は上から下に実行されるから、私の関数が最後に登録されると思う」
「その通り。私の関数は上書きされ、エイダの関数が残る」
画面に『押した！』が表示された文字を見ながら、エイダは疑問を口にする。
「う〜ん、なんかモヤモヤする」
「『名前の重複を心配しないで手軽に関数を作れるので後々重宝する』で納得してもらえないかな？」
「うん、わかった」
エイダはあまり納得していないが先に進む為、提案を飲んだ。
「さてと、マスター登録の術式の説明に入ろう」
<SCRIPT>
document.onmousedown=function(event){master=event.user;}
</SCRIPT>
魔導書が説明を続ける。
「これは魔導書のページを触った瞬間、定義された無名関数が実行される。この場合event.userの値がmaster変数へ代入される」
「eventはどこから来たの？」
エイダが尋ねる。
「これはイベントが起こされた時に、自動で送られてくる引数。色々と便利な情報が入っていて、例えばユーザーがどこを触ったかが『event.x』と『event.y』のプロパティで参照できる」
<SCRIPT>
document.onmousedown=function(event){alert(event.x+","+event.y);}
</SCRIPT>
エイダが左上を触ると小さい数が、右下を触ると大きい数が表示された。エイダは面白いのか、色々な箇所に触れる。そんなエイダをしりめに、魔導書は説明を続ける。
「そして従来のjavascriptにはなかったのだが、『誰が触ったか』の情報までevent.userのプロパティで参照できるようになっていた」
エイダは手を止め、魔導書に聞き返す。
「従来のjavascript？」
「そう。私が慣れ親しんだjavascriptには、そんな機能はなかった。画面を触れた個人の情報が簡単に取得できたら、プライバシーどころじゃなくなる」
「プライバシーって？」
「人間隠しておきたい事もある。『いつ』『 どこで』『 誰が』『 何を』『 なぜ』『 どうやって』を他人に少しでも知られると嫌がる人もいるって事」
「ふ〜ん、そうなんだ」
エイダはあまり興味なさそうに返事する。
「何にせよ、event.userプロパティに入っているエイダの情報を、masterの変数に代入して登録したって事」
エイダは術式を見ながら呟くように質問する。
「『master』と『document』って変数だよね？」
「あぁ。どちらとも変数だ」
エイダは、今まで不思議に思っていたことを魔導書に尋ねる。
「何でどちらの変数も『var』で宣言されてないの？」
「あぁ、それは『グローバル変数』だからだ」
魔導書は簡潔に答える。
「うん。また新しい単語が出てきた」
エイダは『何で質問してしちゃったんだろう？』と、諦め気味に呟いた。
ーーーーーーーー ログ ーーーーーーーーーー
エイダは『イベント処理』を理解した。
エイダは『イベントの引数』を理解した。
エイダは『mousedown』イベントを覚えた。
『イベント処理』スキルがLV1になった。
エイダは『無名関数』を理解した。
『関数』スキルがLV4になった。
ーーーーーーーーーーーーーーーーーーーーーー
登場人物
エイダ・ラブレス
冒険者に憧れている９歳の普通の女の子。
覚える事が沢山あって困っている。
職業：術者 LV1
称号：初心者
スキル：『関数 LV4 up』『構文 LV1』『文字列 LV1』『コメント LV1』『算術演算子 LV1』『文字列演算子 LV2』『変数 LV2 up』『代入演算子 LV1』『オブジェクト指向 LV1』『イベント処理 lv1 new』
関数：『alert()』
HTMLタグ：『<script>』
イベント：『mousedown new』
喋る魔導書
エイダが森の奥で出会った喋る魔導書。
教えたい事が沢山あって困っている。
作者より
エイダが少しずつjavascriptを理解し始めてきてるので、最初に比べて会話がだいぶ楽になりました。
何も知らない状態からのスタートですので、一つ一つ説明するのは辛いですね。
『コンピュータ』と言っても、エイダの世界にはありませんので『魔導書』とか言ってごまかしています。
ただ９歳にしてはエイダは理路整然過ぎる気もしないでもない。まぁそれだけエイダ母が凄かったと言う事で。
間違った説明をしていないか、Googleで調べてから書くようにしています。
時間がかかり大変ですが、知らなかった事も多く、自分の知識も向上するので楽しいです。
エイダのスキルが順調に増えていってるので、後書きの方が本文より多くなってしまうんじゃないかといらぬ心配をしています。
参考にしたページ
無名関数と即時関数？
http://unitopi.com/js-function/
JS イベントまとめ
https://qiita.com/hththt/items/aefbcc6eb191588dadff
jsfiddle
押した！
https://jsfiddle.net/AkiraMeru/z8e62nuh/
変数名で実行
https://jsfiddle.net/AkiraMeru/z8e62nuh/1/
どっち？
https://jsfiddle.net/AkiraMeru/z8e62nuh/2/
クリック位置表示
https://jsfiddle.net/AkiraMeru/z8e62nuh/3/
