JavaScriptのオブジェクト指向 その1

ここのところいろいろバタバタしたり体調崩したりで久々の更新になってしまった(>_<)

前回こちらでPHPのオブジェクト指向について取り扱ったので、今回はJavaScriptのオブジェクト指向について簡単に説明してみます。
JavaScriptのオブジェクト指向で、最も特徴的なのはプロトタイプベースということでしょう。C++やJava、PHPやRubyなどのほとんどのオブジェクト指向言語はクラスベースなので、その辺の違いに戸惑う人は結構多いと思います(僕もそうでした)。
クラスベースのオブジェクト指向言語では最初にクラスを定義して、その中にプロパティやメソッドを定義していくのですが、JavaScriptではオブジェクトはプロパティと値の組み合わせで表現されます。値には数値(Number)、文字列(String)、論理値(Boolean)といった基本型(プリミティブ型ともいう)もしくは別のオブジェクトが入ることになります。
例えば、こんな感じです。

プロトタイプベースと聞くと「何だそりゃ?」と思うかもしれないですが、基本的にはハッシュテーブルみたいなものと考えておけばそんなに間違いはないかなと思います。
プロパティの値を確認したいときは、

とすればいいことになります。
これを見ると気がつくかもしれませんが、JavaScriptの標準で用意されているconsoleも実はオブジェクトです。これ以外にも、よく見るdocumentとかwindowなんかもオブジェクトです。なので、JavaScriptでは基本的にほとんどのものはオブジェクトとして扱うことができるのです。
オブジェクトの中身は簡単に書き換えることができます。例えば、

とすればpersonオブジェクトのageプロパティの値が37から25に変更されます。
また、新しいプロパティを追加することも同様にすぐできます。

とすれば、personオブジェクトに新たにoccupationというプロパティが定義されます。
オブジェクトのプロパティを削除するときは、deleteを使います。

とすると、homeプロパティが削除されます。削除した後にアクセスしようとすると、undefinedになります。

後、一つ重要なのは「JavaScriptでは関数もオブジェクト」ということです。
例えば、toDouble(n)という2倍の値を返す関数があったとします。
普通はこう書きます。

しかし、これをオブジェクトのように書くと、こうなります。

まだまだ説明が不十分だったり書き足りなかったりするところも多々あるけど、基本的にブログ更新はあまり時間をかけすぎないようにしているので、どこかでJavaScriptのオブジェクト指向 その2をやろうと思います。

JavaScriptによるDOM操作の基本

前回がサーバー側言語のPHPだったので、目指せ毎日更新シリーズ第2弾はフロント側言語のJavaScriptで書いてみる。

JavaScriptを使う主な目的はずばり、動的にHTMLを操作することなわけだが、その基本的なやり方を15分で書ける分でまとめてみようと思う。

HTMLをいじるにはDOMというものを扱う必要があるのだが、DOMとは何かの説明自体はこちらを見てもらうとして、では具体的になにをやるのかを簡単に説明してみる。

一番簡単な例として、あるIDを持つタグに対する入出力を考えてみる。

これを取得するには次のようにすればいい。

1つのHTMLファイルに対して同じIDを持つタグは1つしか取れないので、タグの中身がhelloに入ることになる。
このタグの中に、例えば「こんにちは」というテキストを入れたいときは、次のようにする。

他にも、

とやれば文字の色が青くなるという風に、スタイルを変えたりすることもできる。
それ以外にもdocument.getElementById(“hello”).innerHTMLにhtmlタグを入れれば取得したIDの要素の中にHTMLを入れることもできる。
後は下のようにdocument.createElementでタグを生成してそれにテキストを入れて、appencChildで取得した要素の子要素として入れることもできる。

ID以外にも、クラスとかも取得することができる。

とやれば、dogクラスを持つタグを取得できる。クラスはIDと違って複数あるので、document.getElementsByClassNameで取得した返り値は配列になることに注意。
他にも、document.getElementsByTagNameだと同じタグ名の要素を全て取得できる。

本当はjQueryを使ったりするともっと簡単にできるんだけど、それについては別の機会にやろうかと。
JavaScriptだと、DOM操作のほかにもイベント処理とかもどっかの機会に紹介しておきたいなあ。