FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

javascript覚え書き

■そもそものお話

javascript(以下JS)ってなんだっけ。

何ができてJAVAとどう違うんだっけ。

前にちらっとだけ勉強しかけたことがあったんだけど、光の勢いで忘れてしまった。どう

使うのかすらも覚えてないので、慌てて思い出して書き留めておくことにした。

そう、また次忘れるからね。絶対。


■端的には / CGIとの違い

HTMLにコードを打ち込むか、HTMLから呼び出して使う簡易プログラム。

ファイルの入出力をしたりだとか、時刻を取ってきたりとか、まあそういうことをブラウ

ザが解釈して、ローカルで実行するもんだと思えばいいみたい。CGIなんかがサーバ上で

実行されるのとは対照的に、JSからはサーバは見えない。

それくらいがまず抑えておいたほうがいい特徴、制限だろうか。


・例

例えば、画像を切り替えながら見たいとする。CGIなんかだったら、直接画像をリストに

して選択肢を出してやって、リクエストのあった画像をサーバから投げてやるなんてこと

もできるんだろうけど、JSはそれはできない。だから、同じことをやろうとしたらまずCGI

でJSのスクリプトファイルを作っておいて、HTMLからスクリプトを呼んでやる

必要がある。JSは、ベタで書かれている画像のアドレスをたたけるようにするだけ。

CGIだと隠ぺいできたファイルの場所なんかが、JSだと丸わかりだ。まあそういうもんと

割り切って使うのがいいんだろう。


■何ができるかな

まず関数が書ける。クラスも使える。文書をドキュメントオブジェクトとして扱って、そ

れを操作するのが得意みたいだ。オブジェクト指向の言語に、一応はなっている。


★関数

一番簡単なやつはこんな感じ。引数も取れるし返り値ももらえる。申し分ない。ただ、変

数が宣言なしで使えてしまうのが、なんだかとっても微妙な感じだ。宣言したければvar

なんとかと書けばいいんだが、うーん。

function add(x, y) {

return x + y;

}

まあ、

「javascriptの関数が変態すぎる - 俺のメモ」http://d.hatena.ne.jp/kayai/20110131

を読んでいたらどうでもいいという気分になってきた。

JSの変態性に突っ込んでいたらキリがない。

まあ、関数はなんとか使えそうだ。先に進もう。


★クラス

function toStringOfPerson() {

return (this.name + " / " + this.age);

}

function Person(name, age) {

this.name = name;

this.age = age;

this.toString = toStringOfPerson;

}

var p1 = new Person("Suzuki", 26);

document.write(p1.name + "
");

document.write(p1); // write()でtoString()が暗黙的に呼ばれる


泣きたくなってきた。なんだこれ。

どこにもクラスの文字がない。ていうか関数との違いが曖昧すぎる。


要はあれだ。

①変数はオブジェクト

②関数もオブジェクトにできる

③関数オブジェクトがプロパティを持ったらそれがクラス

④プロパティは、 this.XXX=~; の形を取る。プロパティ自体がオブジェクトであり

プロパティが変数であるか、関数であるか、別のクラスであるかは設計者の気分次第


ということなのかな。

これが件の、JSの変態性を構成している柔軟さか。


★クラスの継承

継承のやり方にすらいくつもやり方があるらしい。

勘弁してくれ。どういうつもりで作ったんだこの言語。


①プロトタイプ継承

どうやらprototypeなる特別な変数が鍵を握るようだ。注意したいのは、コンストラクタ

を書き換えているところ。どうもこれをしないと、CatクラスでAnimalクラスのコンスト

ラクタが呼ばれてしまうようだ。普通気づかないぞこんなの。

極めて気に食わない仕様だが、どうも継承といってしっくりくるのはこっちらしい。


//Animalクラス

//コンストラクタ

function Animal(name, kind){

this.name=name;

this.kind=kind;

}


//メソッド

Animal.prototype.hey=function(){

return "I'm a " + this.name;

};


Animal.prototype.toString=function(){

return "{" + this.name + " of " + this.kind +"}";

};



//Catクラス/Animalサブクラス

function Cat(name){

this.name=name;

this.kind="CAT";

}

Cat.prototype=new Animal("","");//継承にあたる

Cat.prototype.constructor=Cat;//コンストラクタは自分のを使う


//新しいメソッド

Cat.prototype.sing=function(){

return "nya-o";

};


スーパークラスのコンストラクタはしっかり呼んでやる必要がある。


②関数による継承

こっちのが分かりやすいかも。

もちろんスーパークラスのコンストラクタはしっかり呼んでやる必要がある。

継承といいつつも、クラスを変数に持っているというイメージが強い。多分そうなんじゃ

ないかな?


function Person(name, age) {

this.name = name;

this.age = age;

this.toString = function () {

return (this.name + " / " + this.age);

}

}


function Person2(name, age, email) {

this.email = email;

Person.call(this, name, age);

}


function Person3(/* ..., email */) {

this.email = arguments.pop();

Person.apply(this, arguments);

}


んで、回りまわって「俺のメモ」を読むとやっと理解できることがある。

JSにクラスは無い。プロトタイプをクラスと呼ぶことがあるだけだ。これを間違って覚え

ていると、ひどい目に合いそうだ。


■その他

覚えておくのは大きく二つ。windowと、document。

windowはブラウザを、documentは文書を指すオブジェクト。調べればここからいろんなこ

とができることが分かる。

この文章はぶっちゃけ何をしようというのではなくて、JSの概念を理解したいだけなので、

書く内容としてはここで終わりだ。

まあ、あとは細かいところでフォームをどうするだとか、イベントをもらうにはとか、色

々あるにはあるのだが、そういう部分はこっちで見ればよい。

http://www.tohoho-web.com/js/index.htm

とほほさんの所はほんとに便利だのう。
スポンサーサイト

コメントの投稿

非公開コメント

最新トラックバック

プロフィール

ハヤト

Author:ハヤト
古流柔術三段、趣味プログラミング。
鳥大好き鳥かわいいよ鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥鳥
     _,,,
   _/::o・ア <民主は
 ∈ミ;;;ノ,ノ   カスばっかりだ
    」L

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。