寺子屋未満

4月23日（月）に開催されたHead First JavaScript読書会 05に参加しました。
04は旅の疲れからお休みし、1回あけての参加。
毎回進むページ数は多いのですが、本自体がとても読みやすいので、追いつくことができました。よかった。

今回は「関数」です。
Javascriptの関数は、知れば知るほど奥が深いのですが、この本ではその導入編を扱っています。

スクリプトから関数へ

ただのコード行を関数にしようとするとき、最初は結構つまづいたなあと思い出しました。

コードから関数を抽出できない、というのには色々段階があると思います。

• そもそも、何をする処理なのかわかっていない
• コードを理解していない

という、「もっとがんばりましょう」という段階。

• 重複や同じ処理をしている、というのが見えない
• 処理をかたまりに分けて考えることができない

という、「がんばりましょう」という段階。
読書会の時にも話をしたのですが、この段階の時に大事になるのは「IN/OUT」を意識することじゃないかな、と思います。
何かをもらって、何かを返す。
もらうもの、返すものの値が違っても種類が同じであれば同じ働きをしている -> 関数として抜き出すことができる！ と形が見えやすくなってくると思います。

ここを乗り越えて感覚をつかめてきたら、その先の成長曲線は一気に上がるのではないかなー。

関数定義の方法いろいろ

次のコードはどちらも関数を定義しています。
＜functionで定義＞

hoge(); // ---(1)
function hoge() {
  alert('hoge');
}

＜変数に無名関数を代入＞

huga(); // ---(2)
var huga = function(){
  alert('hoge');
}

どちらも関数なのですが、定義されるタイミングが異なります。
なので(1)は実行できるけど、(2)はエラーになる（関数の巻き上げ）。
あと、無名関数として定義しておく（huga) と他の変数で参照できたりできる。
読書会で出てきたよい例示を忘れてしまいました・・・・ここ苦手。

コールバック関数

Ajax関連のコールバックは後半で出でくるのでここは主にwindowのイベント処理の話。
イベントハンドラを使うか、windowsオブジェクトのイベントに関数参照をさせるか、どっちをよく使うか、という話をしました。
＜jsファイル＞

var changeHoge = function{ alser('change!');}
window.getElemntById('huga').onclick = changeHoge

＜htmlファイル＞

<button id='huga' onclick='changeHoge()'>

これは、こっちであるべき、というよりは作っているプロダクトによって適した方があるのではないかなーと思いました。
あとはどのイベントか。onloadなどであればjsファイルに書いてあってもいいけど、onclickなどはhtmlソースから追えた方が便利かなと思いました。

こんな感じで初学者向けの本ですが突然深い話をしたりしています。
家で復習をする時に、読書会で出てきたサンプルコードを参照したいのでPCを持参しようと思うのですが、本が重すぎて実行に至っていません。

次回も楽しみです。