----------------清潮文庫-------------------------------- 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);