JavaScript-勉強会 - オチャメモ

はじめに

自分もなんとなくjavascripを扱ってきたくちで、そろそろjavascriptを本格的にやろうかなと。 この資料も昨日やっつけでつくったものなのでつっこみどころも多いです。

javascriptってなに？

• 名前について
  • java とはまったく関係ない。
  • nestscape者がjavaのブームにのっただけ。
  • もともとはLivescriptという名前。
  • 現在はECMAScriptという名称で標準化されている。
• 簡単に始められる！
• メモ帳とブラウザでできる！

  javascript:alert("aaa")
  

• 軽く見られがちだけど実は奥が深い！
• ライブラリ
  • 現在多くのライブラリが普及しているが、文法がなんだかそれぞれによって違う。
  • 普及してるのはPrototype.jsというライブラリ。このソースの中に多くのクラスが含まれている。とりあえずソースを読むのが一番理解を深めるらしい。
  • でもソース読むにしても基本がわからないと！
  • 基本的なことを理解してないとモヤモヤ感がなくならず、なんとなく使うことになる。
  • そこでこの本！→]

関数の作り方

これだけです。

function hoge() {
  alert('hello!')
} 
hoge(); // 'hello!'

無名関数というのもあります。

var hoge = function () {
  alert('hello!')
};
hoge(); // 'hello!'
var fuga = hoge;
huga(); // 'hello!'

変数

いきなり代入。これはグローバル変数となる。

hoge = 0;

ローカルは？

x = 0;
function hoge() {
  var x = 1; // varを宣言
  alert(x); // 1
}
alert(x); // 0

上書き注意！

x = 0;
function hoge() {
  x = 1;
  alert(x); // 1
}
alert(x); //  1が表示。

varを宣言しないと、グローバル変数とみなされる。

クラス定義はどうする？

コンストラクタを定義すればよい。コンストラクタとは関数定義のこと。

function Hoge(){};

で、これをnewしたらHogeオブジェクトのできあがり

var hoge = new Hoge();

フィールドを定義したい場合は以下のようにthisをつけて代入すればよい

var Hoge = function(){
  this.field1 = 0;
  this.field2 = 'hoge';
};

メソッドはこんな感じ。

var Hoge = function(){
  this.field1 = 0;
  this.mehod = function() {alert('fugaga!');}
};

↑でもこれだとメモリ効率が悪いよ。そこでプロトタイプ

Hoge.prototyep.method =  function() {alert('fugaga!');}

クラスメソッドは？

Hoge.classMethod = function() {alert('classMethod!');}

クラス変数は？

Hoge.classProperty = 'HOGE';

で最終的にはこうなる。

var Hoge = function(){
  this.field1 = 0;
  this.field2 = 'hoge';
}
Hoge.prototyep.method =  function() {alert('fugaga!');}
Hoge.classMethod = function() {alert('classMethod!');}
Hoge.classProperty = 'HOGE';

このようにjavascriptでの定義は、最初にまとめて定義するのではなく、実行しながらプロパティを増やしていき、少しづつ肉付けしながら定義する。
いうなれば、雪だるまを転がしながらどんどん機能を追加していくような感じ。

プロトタイプってなに？

• 雛形となるオブジェクトインスタンスのこと。
• ようするにプロトタイプとはjavaでいうインスタンス（多分）。
  -プロトタイプベースオブジェクト指向とはつまりインスタンスベースクラス指向のこと。
  -javaのようにクラスの雛形をもとに静的にクラスを生成するのではなく、インスタンスをベースにクラスを量産するというイメージ。
  

プロトタイプの仕組み（プロトタイプチェーン）

1. コンストラクトした時点では、prototypeは通常、ただの空オブジェクト。
2. まずオブジェクト自身のプロパティから、該当のプロパティ名を探索
3. なかった場合、オブジェクトのprototypeオブジェクトのプロパティの中から該当する名前のプロパティを探す。
4. それでもなければ、そのプロトタイプオブジェクトのprototypeから探索する。
5. 最終的になにもプロパティを持たないprototypeになるまでこれを繰り返す。
6. 見つからなければ、そこで代入になる。参照だったらundefinedのエラーになる
7. これがプロトタイプチェーン。
   この仕組みを利用してクラスの継承が行われるのだけど、ちょっと複雑なので今回は割愛。

実はなんでもハッシュ

javascriptのオブジェクトはハッシュ（連想配列）で表現できる

image.width;
image.height;
image.draw();

これらのプロパティは、実は以下のようにアクセスできる！

image;
image;
image();

だから、こんな定義＆呼び出しもできる。

var image = {width:100, height:100, disp:function(){alert("width:"+this.width)}};

実は、javascriptのオブジェクトとは連想配列なんです。

var o = new Object; 

これは下のように定義できるのです。なるほど！

var o = {};

ツールの紹介

alertで昔ながらのprintfデバッグでもいいけど、下記ツールを使ったほうが断然効率いいですよ。

• FireFox
  • FireBug

    「firefox firebug」で検索
    

  • WebDeveloper

    「firefox webdeveloper」で検索
    

• IE

  「InternetExplorer Developer」で検索