----------------清潮文庫--------------------------------
js追記リファレンス
枚方圏内・著
清潮社
--------------------------------------------------------
初めに
JavaScriptの入門書を一通り読み、理解した方を対象と
した、javascriptリファレンス。変数の扱い方や、少しト
リッキーだけど覚えておくと便利な技とかを書くものでは
なく、全くの初心者向けに書かれた一般の入門書では書か
れていないようなコードをオムニバス方式に書いていく、
『JavaScript入門書を読んだ直後に読むと得した気分にな
れる耳学問書』になっていると思う。
枚方圏内
--------------------------------------------------------
1.ファイル入出力
PC上のファイルを操作するコード。ただし、ウイルス性が
高い為、ほとんどのブラウザでは動かずローカルのみで動
く。WSHやHTAで有用。
function Write(fname,Buf){
var fso=new ActiveXObject("Scripting.FileSystemObject");
var FILE=fso.OpenTextFile(fname,2,true);
FILE.Write(Buf);
FILE.Close();
}
function Read(fname){
var fso=new ActiveXObject("Scripting.FileSystemObject");
var FILE=fso.OpenTextFile(fname);
var Buf=FILE.ReadAll();
FILE.Close();
return Buf;
}
Write()関数は第一引数にファイル名(アドレス)としてfname、
第二引数に書き込む文字列としてBufを取る。
fso.OpenTextFile()
が実際にファイルを開く関数。第二引数に数値を取り、
2の時、新規書き込みモード、
8の時、追加書き込みモードでfnameを開く。
FILE.Write()で文字列をファイルに書き込む。
新規書き込みモード(2)なら、既にファイルに書かれた文章を
消した上で書き込まれるので注意。
ファイルが存在しない時、書き込む際に新たにその名前のファイル
を作るかはfso.OpenTextFile()の第三引数で決まる。trueを入れて
おけば、自動的に作成される。
Read()関数は引数にファイル名(アドレス)としてfnameを取る。
単に読む場合OpenTextFile()の引数はfnameだけでよい。
FILE.ReadAll()でファイルの中身が返ってき、Read()はそれを
returnしている。
--------------------------------------------------------
2.クッキー
a1=value1;
a2=value2;
といういくつかの変数名と変数値をクッキーに保存できる。
"a1=value1;a2=value2;expires=Mon,31-Dec-2009 24:00:00"
という書式(cookie書式と呼ぶ)に直し
document.cookie
に代入すればよい。
変数は一つでも三つ以上でも、同じように;で区切り並べれば
よい。ただし変数値が2バイト文字列の場合はescape()しクオ
ーテンション(")で囲まずにvalueとして並べる。
文字列でない単なる数値や1バイト文字列はescape()しても、
変化はしないので機械的にすべての値をescape()しても問題
はない。
読み込むにはやはり
document.cookie
を参照する。expires以降は必要なければ削り、基本的には
indexOf()で必要な値を切り出し、unescape()する。もし2
バイト文字列が無いと分かっているなら、expires以降を
削った後、変数を宣言してeval()すると早い。
--------------------------------------------------------
3.非同期でサーバ通信
任意のhttpアドレスにデータ通信を要求する。例えば
"http://google.co.jp/"に送信すると、webブラウザでその
アドレスにアクセスし、ページ読み込み後、webブラウザの
メニューで[表示]->[ソース]で見ることができるソースを
入手できる。
今回はこれを非同期で行う。つまり相手サーバの返答に
タイミングを合わせる必要がない。次章の「同期でサーバ
通信」も参考にしていただきたい。
ただし、セキュリティの問題から、自分のサーバとは別
のサーバにアクセス(クロスドメインという)をしようとす
ると、アクセスが拒否される。通常は自分と同じサーバに
アクセスするため、非同期の必要性がわからない。
var xml=new XMLHttpRequest();//注意
xml.open("GET","http://google.co.jp/",true);
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status=200)
xml.responseText;
}
xml.send(null);
古いブラウザやIEだとXMLHttpRequestが使えない場合が
ある。そのときは
var xml=new ActiveXObject("Microsoft.XMLHttp");
でいけるはず。
xml.open("GET","http://google.co.jp/",true);
の第一引数はGET送信であることを示す。データを送信したい
時は"POST"を引数にして、POST送信をする。またxml.send()
に送信するデータを持たせる。
第三引数のtrueは「同期」を意味する。
xml.onreadystatechangeは相手サーバからの返答を待つイベント。
次章の同期通信ではこれが要らない。イベントが起こったら
xml.responseTextに返答が入っているので処理する。
--------------------------------------------------------
4.同期でサーバ通信
var xml=new XMLHttpRequest();
xml.open("GET","http://google.co.jp/",false);
xml.send(null);
xml.responseText;
短いっ。
--------------------------------------------------------
5.メソッドの作成
var Car={
model:"March",
price:2000,
run:function(){alert("run関数")}
};
Carがメソッド。
model="March"といった、変数をいくつか上のような書き方(=の代
わりに:で結合、変数同士は,で区切る)にして、{}で囲んだものを
Carに代入する。
Car.modelで"March"に、Car.priceで2000にアクセスできる。
Car.runでfunction(){alert(・・・)}にアクセスできるのだが、
それよりもCar.run()でその関数を実行できるところが素晴らしい。
(そういえば、Math.sin()とかString.toSource()とかって・・・)
--------------------------------------------------------
●関数リテラル
xを引き、x+2を返す関数fの書き方には3つある。
//関数宣言
function f(x){
return x+2;
}
//関数式
f=function(x){
return x+2;
}
//Functionコンストラクタ
f=new Function("x","return x+2;");
それぞれの特徴として
関数宣言はおそらくもっとも一般的な関数の書き方で、唯一
「関数を記述するよりも前の行でその関数を呼び出す」ことが
できるコード。
関数式は無名関数annoymous()を作ってから、fに代入する形。
敢えて使う必要はないが、知らず知らずに使ってることはよくある。
window.onload=f1;とか。
Functionコンストラクタは使う必要ナシ。""の中を一つ一つ
解析され、そして全体として関数にしてそれをfに代入するため
「遅い」。
--------------------------------------------------------
6.クラスオブジェクトの作成とprototype
var Car=function(){};
Car.prototype={model:"March"};
関数Carを作ると、Car.prototypeというものが生じる。この中
に前章のメソッドを代入する。題名の「オブジェクト」というの
は、このCarを指しているのではなく、コードはまだ続く
var mycar=new Car();
new演算子によってCar.prototypeを複製して、それをmycarに代
入する。mycarにCar.prototypeを受け継いだ、という。mycarはCar
クラスのオブジェクトである。
mycar.modelで"March"が参照できる。mycarは形式(prototype)と
して.modelを持ち、mycar.modelは初期値(prototype)として"March"
を持つ。この「感じ」が大事。
mycar.model="Skyline";//値を変える
mycar.price=3200;//新たに.priceという要素を加え、値を入れた
も可能である。
Carは何もしない関数であったが、意味を持たせることができる。
Car2=function(t){this.model=t;};
//ここでthisはCarを指し、.modelはCar.prototypeの中で記述する
必要はない。
mycar=new Car2("BMW");
で、mycar.modelが"BMW"であるオブジェクトmycarを作成できる。
ただし、mycar.prototypeの中でmode:"March"としてあれば
"March"が初期値であることに変わりない。(次の●に続く)
さて、Carはオブジェクトであるから、作成の時点で、valueOf()、
toString()関数がある。valueOfはそのオブジェクトのプリミティブ
な数値を返し、toStringは数値では無く文字列に変換したものを返す。
(ちなみにalert(Car)で表示されたものはCar.toString()で返っ
てきた文字列である)
プリミティブな数値とあるが、Firefox3では
Cat.valueOfもCat.toStringも共に"[object Object]"であった。誰も
使わないだろうね。
prototypeでクラスを定義する際に、
Car.prototype.toString=function(){return this.price;};
と上書きすることもできる。
--------------------------------------------------------
●delete演算子
deleteはオブジェクトの任意の要素値を消す。もしprototypeに
よって初期値が指定されているなら、その初期値になる。
前章の例で言うと
mycar.modelは初期値(Car.prototype)で"March"であるが
その後、
mycar.model="Skyline";
としたり、関数Car2()により、同様にmycar.modelの値を変更し
た時、
delete mycar.model
で、mycar.modelが"March"に戻る。
--------------------------------------------------------
●typeof演算子
変数やオブジェクトの型を返す。
a=2;
alert(typeof a);