http://w.atwiki.jp/0x0b/ 0x0b ja 2014-05-22T15:21:26+09:00 1400739686 https://w.atwiki.jp/0x0b/pages/1.html ※左のメニュー内のリンク先 " 砂場 " のみ編集権限の許可を出しています 　@wikiのページ編集の練習用に使ってください #javascript(){ <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-1131416-5"); pageTracker._trackPageview(); </script> } #memo() 意見、要望ございましたらコメントに書き込みの方、お願いします - SGML, HTML, XML, CSS, ECMAscript, DOM, API, etc... 仕様漁ってたらキリがないな -- 名無しさん (2011-08-18 18:22:53) #comment() #co() { **@wikiへようこそ -ウィキはみんなで気軽にホームページ編集できるツールです。 -このページは自由に編集することができます。 -メールで送られてきたパスワードを用いてログインすることで、各種変更（サイト名、トップページ、メンバー管理、サイドページ、デザイン、ページ管理、等）することができます **まずはこちらをご覧ください。 -[[@wikiの基本操作>http://atwiki.jp/guide/category2.html]] -[[用途別のオススメ機能紹介>http://atwiki.jp/guide/category22.html]] -[[@wikiの設定/管理>http://atwiki.jp/guide/category6.html]] **分からないことは？ -[[@wiki ご利用ガイド>http://atwiki.jp/guide/]] -[[よくある質問>http://atwiki.jp/guide/category1.html]] -[[無料で会員登録できるSNS内の@wiki助け合いコミュニティ>http://sns.atfb.jp/view_community2.php?no=112]] -[[@wiki更新情報>http://www1.atwiki.jp/guide/pages/264.html]] -[[@wikiへのお問合せフォーム>http://atwiki.jp/helpdesk]] 等をご活用ください **@wiki助け合いコミュニティの掲示板スレッド一覧 #atfb_bbs_list(112) **その他お勧めサービスについて -[[大容量１Ｇ、PHP/CGI、MySQL、FTPが使える無料ホームページは@PAGES>>http://atpages.jp/]] -[[無料ブログ作成は@WORDをご利用ください>>http://atword.jp/]] -[[2ch型の無料掲示板は@chsをご利用ください>>http://atchs.jp/]] -[[フォーラム型の無料掲示板は@bbをご利用ください>>http://atbb.jp/]] -[[お絵かき掲示板は@paintをご利用ください>>http://atpaint.jp/]] -[[その他の無料掲示板は@bbsをご利用ください>>http://atbbs.jp/]] -[[無料ソーシャルプロフィールサービス @flabo(アットフラボ)>>http://sns.atfb.jp]] **おすすめ機能 -[[気になるニュースをチェック>http://atwiki.jp/guide/17_174_ja.html]] -[[関連するブログ一覧を表示>http://atwiki.jp/guide/17_161_ja.html]] **その他にもいろいろな機能満載！！ -[[@wikiプラグイン>http://atwiki.jp/guide/category17.html]] -[[@wiki便利ツール>http://atwiki.jp/guide/category32.html]] -[[@wiki構文>http://atwiki.jp/guide/category16.html]] -[[@wikiプラグイン一覧>http://www1.atwiki.jp/guide/pages/264.html]] **バグ・不具合を見つけたら？ 要望がある場合は？ お手数ですが、メールでお問い合わせください。 } 2014-05-22T15:21:26+09:00 1400739686 https://w.atwiki.jp/0x0b/pages/102.html #contents *リファレンス プログラミング経験(C、 Visual Basicなどの言語)があれば役に立ちますが、必須ではない JavaScriptという言語は、幅広い環境（ブラウザ、サーバーサイドスクリプトなど）で使われることが意図されている このリファレンスは、ほとんどの部分で、環境に依存せず、ウェブブラウザ環境をターゲットにしていない デモンストレーションの目的で、println 関数を使用 この関数は、JavaScript の一部ではないので、環境ごとに、与えた値を表示する関数として独自に定義する必要がある 例：ウェブブラウザでは、println 関数は以下のように定義されるでしょう。: function println(string) { window.alert(string); } 他の環境で、同等の関数を独自に定義することは、読者のために課題として残しておきます 文書の約束事 このリファレンスには、文書中の主題の適切なもしくは共通な利用法を具体的に説明するための構文の説明の部分があります。これらの部分では、文字通りそのままであることを表すすべてのテキストリテラルは 3 点リーダを除いてイタリックにはなっていません。イタリックの単語はユーザ定義の名前や 文 (statements) を表します。角括弧 ([ および ]) で囲まれた部分 はオプションです。コンマで区切られ、3 点リーダ (...) を含む一連の並びは、それが一覧であり、最初の項目を除いた項目のすべてがオプションであることを示します (例： "param1, param2, ..., paramN" では param1 のみが必須)。 JavaScript の歴史 Mozilla ベースのブラウザの最近のバージョンは、JavaScript のより新しいバージョンをサポートしています。以下の表は、Mozilla べースブラウザ の異なるバージョンでサポートされる JavaScript のバージョンを一覧にしています。 最低でも JavaScript 1.5 をサポートしないブラウザは、今日ではとても珍しくなっています。JavaScript 1.5 が紹介されたのは、1999 年にさかのぼります。歴史的な情報に興味があるならば、Wikipedia の HTTP Status: InternalError(500) (click for details) の記事を参考にしてください。 |JavaScript (SpiderMonkey) のバージョン|ブラウザのリリースバージョン|Gecko のバージョン| |JavaScript 1.5|Navigator 6.0, Mozilla Application Suite, Firefox 1.0|Gecko 0.6x-1.7| |JavaScript 1.6|Firefox 1.5|Gecko 1.8| |JavaScript 1.7|Firefox 2|Gecko 1.8.1| |JavaScript 1.8|Firefox 3|Gecko 1.9| JavaScript の情報の所在 コア言語機能 (そのほとんどの部分は純粋な ECMAScript) についての JavaScript の文書としては以下のものがあります。 Core JavaScript 1.5 ガイド Core JavaScript 1.5 リファレンス 初めて JavaScript に触れる方は ガイド から読み始めるのがよいでしょう。基本的なところをしっかり理解している方は リファレンス を利用し、個々のオブジェクトや言語コンストラクタについてのより詳しい情報を得ることができます。 **グローバルオブジェクト Global ObjectsEDITWATCH 目次 標準グローバルオブジェクト（カテゴリ別） コンストラクタ エラー 非コンストラクタ関数 その他 標準グローバルオブジェクト（アルファベット順） タグ ファイル ページ通知 オフ この章では JavaScript のオブジェクトの全てを、それらのメソッドやプロパティと共に文書化しています。 ここでの「グローバル・オブジェクト (global objects) 」という言葉をグローバルオブジェクト (global object) と混同しないでください。ここでは、グローバルスコープ中のオブジェクトのことをグローバル・オブジェクトと言っています。グローバルオブジェクト自身はグローバルスコープ中での this によってアクセスすることができます。実際のところ、グローバルスコープはグローバルオブジェクト（継承されたプロパティがあればそれらも含む）のプロパティから成り立っています。 標準グローバルオブジェクト（カテゴリ別） コンストラクタ Boolean Number String Array Object Function RegExp Date (このカテゴリでの他のものと文字通り同じではありません) エラー Error EvalError RangeError ReferenceError SyntaxError TypeError URIError 非コンストラクタ関数 decodeURI decodeURIComponent encodeURI encodeURIComponent eval isFinite isNaN parseFloat parseInt その他 Infinity Math NaN undefined 標準グローバルオブジェクト（アルファベット順） Array Boolean Date decodeURI decodeURIComponent encodeURI encodeURIComponent eval Error EvalError Function Infinity isFinite isNaN Math NaN Number Object parseFloat parseInt RangeError ReferenceError RegExp String SyntaxError TypeError undefined URIError グローバルスコープ中の他のオブジェクトは、ユーザースクリプトによって作られるか、ホストアプリケーションによって提供されます。Gecko ベースのブラウザで利用可能なホストオブジェクトは Gecko DOM Reference で文書化されています。 DOM とコア JavaScript との違いに関する詳しい情報は、文書 The DOM and JavaScript をご覧ください。 **関数 arguments **文 この章は JavaScript のすべての文 (statements) を説明しています。JavaScript の文は適切な構文のもと使われるキーワードから成ります。1 つの文が複数行にわたることもあります。それぞれの文がセミコロンで分けられていれば、1 行に複数の文が現れることもあります。 |文|説明| |ブロック|ブロック文は 0 個以上の文をグループ化するのに使われます。ブロックは中括弧 (波括弧) の組で区切られます| |break|現在のループ、switch、またはラベル文を終了し、プログラムの制御を、終了した文の次の文へと移します| |const|読み取り専用の名前付き定数を宣言します| |continue|現在のループ、またはラベル付きループの現在反復中の文の実行を終了し、そのループの実行を、その次の反復を用いて継続します| |do...while|指定された文を、テスト条件が false に評価されるまで実行するループを作成します。条件は文を実行した後に評価されます。結果として、指定された文は少なくとも 1 回は実行されます| |export|署名付きスクリプトが、ほかの署名付きまたは署名なしスクリプトに、プロパティ、関数、およびオブジェクトを提供することを可能にします。この機能は ECMA-262 第 3 版には含まれていません| |for|丸括弧で囲まれ、セミコロンにより分けられた、3 つの省略可能な式で構成されるループを作成します。式の後にはループの中で実行される文が続きます| |for...in|指定された変数を、オブジェクトの全プロパティに対して任意の順序で反復します。異なるそれぞれのプロパティに対し、指定された文が実行されます| |for each...in|指定された変数を、オブジェクトの全プロパティの値に対して反復します。異なるそれぞれのプロパティに対し、指定された文が実行されます| |function|指定されたパラメータで関数を宣言します| |if...else|指定された条件が true なら文を実行します。条件が false なら、もう一方の文を実行することがあります| |import|スクリプトが、プロパティ、関数、およびオブジェクトを、その情報をエクスポートした署名付きスクリプトからインポートすることを可能にします| |label|文に、break または continue 文を使って参照できる識別子を与えます| |let|局所変数を宣言します。任意で値を代入して初期化できます| |return|関数により返される値を指定します| |switch|式を評価し、その式の値が case のラベルと一致するなら、その case に関連付けられた文を実行します| |throw|ユーザー定義の例外を投げます| |try|試みる文のブロックを印付け、例外が投げられるのなら、対処を指定します| |var|変数を宣言し、任意でそれをある値に初期化します| |while|テスト条件が true に評価される間、指定された文を実行するループを作成します。条件は文を実行する前に評価されます。 with 文に対するスコープチェーンを拡張します| **算術演算子 (+, -, *, /, %, ++, --, unary -) 算術演算子は、数値（リテラル、変数の両方）を演算対象とみなし、単一の数値を返します。 代入演算子 (=, +=, -=, *=, /=, >>=, <<=, >>>=, &=, |=, ^=) 代入演算子は、右オペランドの値を左オペランドに代入します。 ビット演算子 (&, |, ^, ~, <<, >>, >>>) ビット演算子は、演算対象を 32 ビットの（0 と 1 の）ビットの並びとして扱い、標準的な JavaScript の数値を返します。 比較演算子 (==, !=, ===, !==, >, >=, <, <=) 比較演算子は、演算対象を比較し、比較が真であるかどうかを基準とした論理値を返します。 論理演算子 (&&, ||, !) 論理演算子は、基本的に真偽（論理）値とともに用いられます。そのときは、真偽値を返します。 文字列演算子 (+ and +=) 文字列演算子は、2 つの文字列の値を結合し、2 つの文字列を組み合わせた別の文字列を返します。 メンバー演算子 (object.property and object["property"]) メンバー演算子は、オブジェクトのメソッド、または、プロパティへのアクセスを提供します。 特殊演算子 他のカテゴリには入らない特殊な演算子です。 条件演算子 (condition ? ifTrue : ifFalse) 条件演算子は、条件の論理値を基にして、2つの値のうちの 1 つ を返します。 コンマ演算子 (,) コンマ演算子は、複数の式を単一の文で評価し、その最後の式の結果を返します。 delete 演算子 (delete) delete 演算子は、オブジェクトを削除します。 function 演算子 (function) function 演算子は、関数を定義します。 get 演算子 (get) get 演算子は、ゲッタにプロパティを定義します。 in 演算子 (in) in 演算子は、オブジェクトが指定したプロパティを持っているどうかを判別します。 instanceof 演算子 (instanceof) instanceof 演算子は、オブジェクトが他のオブジェクトのインスタンスかどうかを判別します。 let 演算子 (let) let 演算子は、その式でのみ有効である変数に値を一時的に代入します。 new 演算子 (new) new 演算子は、コンストラクタのインスタンスを生成します。 set 演算子 (set) set 演算子は、セッタにプロパティを定義します。 this 演算子 (this) this 演算子は、実行コンテキストを参照します。 typeof 演算子 (typeof) typeof 演算子は、指定したオブジェクトの型を判別します。 void 演算子 (void) void 演算子は、式の戻り値を捨てます。 yield 演算子 (yield) yield 演算子は、ジュネレータにおいてそのジュネレータのイテレータによって返されるものを決定します。 ***演算子の優先順位 演算子の優先順位は、演算子が評価される順番を定義します 概要 演算子の優先順位は、演算子が評価される順番を決定します。より高い優先順位の演算子は最初に評価されます。 よくある例: 3 + 4 * 5 // 23 を返す 乗算演算子 ("*") は加算演算子 ("+") より高い優先順位を持つので、最初に評価されます。 結合性 結合性は、同じ優先順位の演算子を処理する順番を決定します。例えば、次のような式を考えてみましょう。 a OP b OP c 左結合性 (左から右) とはこれを (a OP b) OP c というように処理するという意味であり、対して右結合性 (右から左) はこれを a OP (b OP c) というように解釈するという意味です。代入演算子は右結合性なので、あなたは、 a = b = 5; と書くことで、a と b が値 5 を得るという期待通りの結果を得ることができます。これは代入演算子が代入した値を返すためです。まず b に 5 がセットされます。そして a に b の値がセットされるのです。 表 以下の表は優先順位の最も高いもの (1) から最も低いもの (17) の順に並べられています。 |優先順位|演算子の種類|結合性|個々の演算子| |1|メンバ|左から右|. []| ||new|右から左|new| |2|関数呼び出し|左から右|()| |3|インクリメント|n/a|++| ||デクリメント|n/a|--| |4|論理 NOT|右から左|!| ||ビットごとの NOT|右から左|~| ||単項の +|右から左|+| ||符号反転|右から左|-| ||typeof|右から左|typeof| ||void|右から左|void| ||delete|右から左|delete| |5|乗算|左から右|*| ||除算|左から右|/| ||モジュロ|左から右|%| |6|加算|左から右|+| ||減算|左から右|-| |7|ビットシフト|左から右|<< >> >>>| |8|大小関係|左から右|< <= > >=| ||in|左から右|in| ||instanceof|左から右|instanceof| |9|同値関係|左から右|== != === !==| |10|ビットごとの AND|左から右|&| |11|ビットごとの XOR|左から右|^| |12|ビットごとの OR|左から右|｜| |13|論理 AND|左から右|&&| |14|論理 OR|左から右|｜｜| |15|条件|右から左|?:| |16|代入|右から左|= += -= *= /= %=&br()<<= >>= >>>=&br()&= ^= |=| |17|コンマ|左から右|,| **コメント コードコメント (// と /* */) 概要 スクリプトの挙動を説明するための作者によるメモ。コメントはインタプリタには無視されます |>|コメント| |実装されたバージョン:|JavaScript 1.0, NES2.0| |ECMA バージョン:|ECMA-262| 構文 // コメント内容 /* 複数行のコメント内容 */ 説明 JavaScript は Java 形式のコメントをサポートしています。 1 行だけのコメントは 2 重のスラッシュ (//) から始まります。 複数行にまたがるコメントは /* から始まり */ で終わります。複数行コメントは入れ子にさせることができません。 例 例: 1 行コメント // これは 1 行コメント var intAge = 37; // これはもう 1 つのコメント 例: 複数行コメント /* これは複数行コメント。 どんな長さでもかまわず、書きたいことを何でもここに書ける。 ただし他の複数行コメントは含められない。 */ **E4X (拡張) グローバル文: 標準 XML 名前空間 グローバル関数: isXMLName() グローバルコンストラクタ: Namespace() QName() XML() XMLList() **予約語 Reserved WordsEDITWATCH 目次 ヘッダーがありません タグ ファイル ページ通知 オフ 以下は予約語であり、変数、関数、メソッド、あるいはオブジェクトの識別子として用いることはできません。以下は ECMAScript の仕様で既存のキーワードとして予約されているものです。 break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 以下は ECMAScript の仕様で将来のキーワードとして予約されているものです。 abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile ECMA-262 では仕様となっていませんが、const、export、import は Mozilla では実装されているので注意してください。 さらに、null は Null リテラル として ECMAScript の仕様で予約されており、true と false は Boolean リテラルとして ECMAScript の仕様で予約されています。 **非推奨の機能EDITWATCH 目次 RegExp オブジェクトのプロパティ RegExp メソッド エスケープシーケンス タグ ファイル ページ通知 オフ この付録リストは、JavaScript 1.5 では非推奨の機能です。 RegExp オブジェクトのプロパティ 以下のプロパティは非推奨です。 |プロパティ|説明| |$1, ..., $9|（もしあれば）括弧で囲まれた部分文字列にマッチします| |$_|input プロパティを参照してください。| |$*|multiline プロパティを参照してください| |$&|lastMatch プロパティを参照してください| |$+|lastParen プロパティを参照してください| |$`|leftContext プロパティを参照してください| |$'|rightContext プロパティを参照してください| |input|正規表現がマッチする対象となる文字列| |lastMatch|最後にマッチした文字| |lastParen|（もしあれば）最後に括弧で囲まれた部分文字列のマッチ| |leftContext|一番最近のマッチに先行する部分文字列| |rightContext|一番最近のマッチの後に続く部分文字列| 以下は、 現在、RegExp インスタンスのプロパティであり、もはや、RegExp オブジェクトのプロパティではありません。 |プロパティ|説明| |global|対象文字列で可能なマッチ全てに対して正規表現をテストするか、それとも、最初のマッチに対してのみテストするどうかのフラグ| |ignoreCase|文字列でのマッチを適用する際に、大文字と小文字の違いを無視するかどうかのフラグ| |lastIndex|次のマッチが始まる位置| |multiline|複数行に渡って文字列を検索するかどうかのフラグ| |source|パターンのテキスト| RegExp メソッド compile メソッドは、非推奨です。 valueOf メソッドは、もはや RegExp で限定されません。Object.valueOf を使用してください。 エスケープシーケンス 文字列及び正規表現リテラル内での、8 進表現のエスケープシーケンス（\ に続く、1つ、2つ、もしくは、3つの 8 進表現の数字) は非推奨です。 escape 及び unescape 関数は非推奨です。 特殊文字のためのエスケープシーケンスをエンコードかデコードするためには、encodeURI、encodeURIComponent、decodeURI もしくは、 decodeURIComponent を使用してください。 2011-09-28T20:12:48+09:00 1317208368 https://w.atwiki.jp/0x0b/pages/101.html [[Mozilla Javascript>js_about_07]]の続き #contents **LiveConnect 概要 LiveConnect とは、既存の Java インフラを使い、JavaScript に Java のクラスのメソッドを呼び出す機能やその逆の機能を設ける API の名前です。 ***ラッパの使用 JavaScript において、ラッパとは元の言語のオブジェクトをくるんだ、ターゲットとする言語のデータ型のオブジェクトのことです。JavaScript でプログラミングするときは、ラッパオブジェクトを用いることで Java のオブジェクトのメソッドやフィールドにアクセスすることができます。つまり、ラッパのメソッドを呼び出したりプロパティにアクセスすることで Java のオブジェクトについて呼び出すことになるのです。Java 側では JavaScript のオブジェクトはクラス netscape.javascript.JSObject のインスタンスでラップされ、Java に渡されます。 JavaScript のオブジェクトが Java に送られる際、ランタイムエンジンは JSObject 型の Java ラッパを生成します。一方 JSObject が Java から JavaScript に送られるときは、ランタイムエンジンはそのラップを解き、その元々の JavaScript のオブジェクトの種類にします。JSObject クラスには JavaScript のメソッドを呼び出したり JavaScript のプロパティをテストするためのインタフェースが備わっています。 ***JavaScript から Java への通信 Java のパッケージやクラスを参照したり、Java のオブジェクトや配列を扱ったりするときには、特別な LiveConnect オブジェクトを使用します。JavaScript から Java へのアクセスはすべてこれらのオブジェクトを用いて行われます。それらのオブジェクトについて以下の表で簡単にまとめます。 |オブジェクト|説明| |JavaArray|ラップされた Java の配列。JavaScript コード内からアクセスされる| |JavaClass|Java のクラスへの JavaScript からの参照| |JavaObject|ラップされた Java のオブジェクト。JavaScript コード内からアクセスされる| |JavaPackage|Java のパッケージへの JavaScript からの参照| 表：LiveConnect オブジェクト 注意：Java は強く型付けされた言語であり、JavaScript は弱く型付けされた言語であるため、LiveConnect を使用する際はもう一方の言語のために JavaScript ランタイムエンジンが引数の値を適当なデータ型に変換します。詳細は データ型の変換 をご覧ください。 ある意味で LiveConnect オブジェクトの存在は透過的です。かなり直観的に Java とやりとりできるからです。例えば、次のように Java の String オブジェクトを作成し、new 演算子を Java のコンストラクタとともに用いてそのオブジェクトを JavaScript の変数 myString に代入することができます。 var myString = new java.lang.String("Hello world") この例では、変数 myString は JavaObject になります。Java の String オブジェクトのインスタンスを保持しているためです。JavaObject として、myString は java.lang.String およびそのスーパークラスである java.lang.Object のパブリックなインスタンスメソッドにアクセスできます。これらの Java のメソッドは JavaScript から JavaObject のメソッドとして使用できます。また、それは次のようにしてを呼び出すことができます。 myString.length() // 11 を返す JavaClass オブジェクトの静的メンバは直接呼び出すことができます。 alert(java.lang.Integer.MAX_VALUE); // 2147483647 というアラート Packages オブジェクト Java のクラスが java、sun あるいは netscape パッケージのいずれの一部でもない場合は、Packages オブジェクトを用いてそれにアクセスします。例えば、Redwood 社が、実装したさまざまな Java のクラスを格納するための redwood という名前の Java パッケージを使用することを想定します。redwood の HelloWorld クラスのインスタンスを作成するには、次のようにそのクラスのコンストラクタにアクセスします。 var red = new Packages.redwood.HelloWorld() デフォルトパッケージのクラス（すなわち明示的にはパッケージに名前を付けていないクラス）にアクセスすることもできます。例えば、HelloWorld クラスが直接 CLASSPATH に入っており、パッケージには入っていない場合、次のようにしてそれにアクセスできます。 var red = new Packages.HelloWorld() LiveConnect の java、sun および netscape オブジェクトはよく使用される Java のパッケージであるために、短縮記法が備わっています。例えば次のように使用できます。 var myString = new java.lang.String("Hello world") これは次のものを省略したものです。 var myString = new Packages.java.lang.String("Hello world") Java の配列の使用 Java のメソッドで配列を作成し、JavaScript からその配列を参照するときは JavaArray を使用します。例えば、次のコードは int 型の 10 個の要素を持つ JavaArray x を作成します。 x = java.lang.reflect.Array.newInstance(java.lang.Integer, 10) JavaScript の Array オブジェクトのように、JavaArray にはその配列の要素数を返す length プロパティがあります。Array.length とは異なり、JavaArray.length は読み取り専用のプロパティです。Java の配列は作成時に要素数が固定されるためです。 パッケージおよびクラスの参照 JavaScript から Java のパッケージやクラスへの簡単な参照では JavaPackage や JavaClass オブジェクトが作成されます。先の Redwood 社についての例では、例えば Packages.redwood という参照が JavaPackage オブジェクトです。同様に java.lang.String のような参照は JavaClass オブジェクトです。 ほとんどの場合は JavaPackage および JavaClass オブジェクトについて気にする必要はありません。ただ Java のパッケージやクラスを使うだけのことであり、LiveConnect がこれらオブジェクトを透過的に生成するからです。 JavaScript 1.3 以前では JavaClass オブジェクトをパラメータとして Java のメソッドに渡す際に自動的には java.lang.Class のインスタンスに変換されません。そのため、java.lang.Class のインスタンスのラッパを作成しなければなりません。次の例では、forName メソッドがラッパオブジェクトである theClass を生成します。そしてそれを newInstance メソッドに渡し、配列を生成します。 // JavaScript 1.3 theClass = java.lang.Class.forName("java.lang.String") theArray = java.lang.reflect.Array.newInstance(theClass, 5) JavaScript 1.4 以降では次の例のように JavaClass オブジェクトをメソッドに直接渡すことができます。 // JavaScript 1.4 theArray = java.lang.reflect.Array.newInstance(java.lang.String, 5) char 型の引数 JavaScript 1.4 以降では char 型の引数を必要とする Java のメソッドに 1 文字の文字列を渡すことができます。例えば、次のようにして文字列 "H" を Character コンストラクタに渡すことができます。 c = new java.lang.Character("H") JavaScript 1.3 以前では、このようなメソッドにはその文字の Unicode 値に対応する整数を渡さなければなりません。例えば、次のコードも "H" という値を変数 c に代入するものです。 c = new java.lang.Character(72) JavaScript での Java の例外処理 Java のコードが実行時に失敗すると例外を投げます。JavaScript のコードが Java のデータメンバまたはメソッドにアクセスし、失敗すると、Java の例外が JavaScript に渡されます。それを処理できるようにするためです。JavaScript 1.4 からは try...catch 文でこの例外を受け取ることができます。 例えば、Java の forName メソッドを使用して Java のクラス名を theClass という変数に代入するとします。forName メソッドに渡す値が Java のクラス名に評価できなければそのメソッドは例外を投げます。次のようにして、例外を処理できるように forName 代入文を try ブロック内に置きます。 function getClass(javaClassName) { try { var theClass = java.lang.Class.forName(javaClassName); } catch (e) { return ("The Java exception is " + e); } return theClass } この例では、javaClassName が "java.lang.String" のような正当なクラス名に評価されると代入が成功します。javaClassName が "String" のような不正なクラス名に評価されると getClass 関数が例外を受け取り、次のようなものを返します。 The Java exception is java.lang.ClassNotFoundException: String 例外の型に基づいて特別な処理をするには instanceof 演算子を使用します。 try { // ... } catch (e) { if (e instanceof java.io.FileNotFound) { // FileNotFound についての処理 } else { throw e; } } JavaScript の例外についての詳細情報は 例外処理文 を参照してください。 ***Packages オブジェクト ***Java to JavaScript Communication Java で JavaScript のオブジェクトを使用したい場合は、その Java ファイルに netscape.javascript パッケージをインポートしなければなりません。このパッケージは次のクラスを定義しています。 netscape.javascript.JSObject：Java のコードから JavaScript のメソッドやプロパティにアクセスできるようにする。 netscape.javascript.JSException：Java のコードで JavaScript のエラーを処理できるようにする。 これらのクラスについての詳細は コア JavaScript リファレンス をご覧ください。 LiveConnect クラスの場所の特定 古いバージョンの Netscape ブラウザではこれらのクラスがブラウザに同梱されていました。JavaScript 1.2 からはこれらのクラスは .jar ファイルに格納されています。それより古いバージョンの JavaScript では、これらのクラスは .zip ファイルに格納されています。例えば Windows NT 向けの Netscape Navigator 4 では、クラスは Navigator ディレクトリ直下の Program\Java\Classes ディレクトリ内の java40.jar ファイルに格納されています。 より最近ではクラスは Sun の Java ランタイムに同梱されています。はじめはランタイムパッケージの "jre/lib" ディレクトリ内の "jaws.jar" ファイルに入っていましたが (JRE 1.3)、その後同じ場所の "[[plugin]].jar" に移っています（JRE 1.4 以降）。 JDK での LiveConnect クラスの使用 LiveConnect クラスにアクセスするには、次のどちらかの方法で JDK コンパイラの CLASSPATH に .jar または .zip ファイルを配置します。 CLASSPATH 環境変数を作成し、.jar または .zip ファイルのパスと名前を指定する。 コンパイル時に -classpath コマンドラインパラメータを用いて .jar または .zip ファイルの場所を指定する。 Windows NT では、コントロールパネルのシステムアイコンをダブルクリックし、CLASSPATH という名前のユーザ環境変数を作成し、それに次のような値を設定することで環境変数を指定できます。 C:\Program Files\Java\jre1.4.1\lib\plugin.jar CLASSPATH についての詳細は Sun の JDK に関する資料をご覧ください。 注意：Java は強く型付けされた言語であり、JavaScript は弱く型付けされた言語であるため、LiveConnect を使用する際はもう一方の言語のために JavaScript ランタイムエンジンが引数の値を適当なデータ型に変換します。詳細は データ型の変換 をご覧ください。 ***Java の配列の使用 ***パッケージおよびクラスの参照 ***char 型の引数 ***JavaScript での Java の例外処理 ***Java から JavaScript への通信 ***LiveConnect クラスの使用 すべての JavaScript のオブジェクトは、Java コード内では netscape.javascript.JSObject のインスタンスとして現れます。Java コード内でメソッドを呼び出すときに、その引数として JavaScript のオブジェクトを渡すことができます。そうするためにはそのメソッドの対応する仮パラメータを JSObject 型に定義しなければなりません。 さらに、Java コード内で JavaScript のオブジェクトを使用するたびに、netscape.javascript.JSException 型の例外を処理する try...catch 文の内側でその JavaScript のオブジェクトを呼び出すようにしてください。こうすることで JSException 型の例外として Java に現れる、JavaScript コードの実行におけるエラーを Java コードで処理できるようになります。 JSObject を用いた JavaScript へのアクセス 例えば、JavaDog という Java のクラスを使用するとします。次のコードで示すように、JavaDog コンストラクタは JavaScript のオブジェクトである jsDog を引数としてとります。このオブジェクトは JSObject 型として定義されています。 import netscape.javascript.*; public class JavaDog { public String dogBreed; public String dogColor; public String dogSex; // クラスコンストラクタの定義 public JavaDog(JSObject jsDog) { // ここで try...catch を使用して JSExceptions を処理できるようにする this.dogBreed = (String)jsDog.getMember("breed"); this.dogColor = (String)jsDog.getMember("color"); this.dogSex = (String)jsDog.getMember("sex"); } } JSObject の getMember メソッドは JavaScript のオブジェクトのプロパティにアクセスするために使用するものです。この例では JavaScript のプロパティである jsDog.breed の値を Java のデータメンバである JavaDog.dogBreed に代入するために getMember を使用しています。 注意：より現実的な例では try...catch 文の内側で getMember を呼び出し、JSException 型のエラーを処理できるようにします。詳細は Java での JavaScript の例外処理を参照してください。 getMember の動作をさらに知るために、JavaScript の Dog オブジェクトを作成し、その定義を見てみます。 function Dog(breed,color,sex) { this.breed = breed this.color = color this.sex = sex } Dog の JavaScript のインスタンスである gabby は次のようにして作ることができます。 gabby = new Dog("lab","chocolate","female") gabby.color を評価すると、それが "chocolate" という値を持っていることがわかります。ここで次のように gabby オブジェクトをコンストラクタに渡し、JavaScript コードで JavaDog のインスタンスを作成することにします。 javaDog = new Packages.JavaDog(gabby) javaDog.dogColor を評価すると、それも "chocolate" という値を持っていることがわかります。これは Java のコンストラクタ内の getMember メソッドが gabby.color の値を dogColor に代入するからです。 Java での JavaScript の例外処理 実行時に Java からの JavaScript コードの呼び出しに失敗すると、例外が投げられます。Java から JavaScript コードを呼び出すときに try...catch 文でこの例外を受け取ることができます。JavaScript の例外は netscape.javascript.JSException のインスタンスとして Java コードから扱えます。 JSException は JavaScript が投げるあらゆる種類の例外に対する Java のラッパです。JSObject のインスタンスが JavaScript のオブジェクトのラッパであるのと同じようなものです。Java で JavaScript コードを評価するときは JSException を使用してください。 Java で JavaScript コードを評価する際、次の状況でランタイムエラーが生じます。 JavaScript コードが評価されない。JavaScript のコンパイルエラーまたは実行時に生じる他のエラーによる。JavaScript インタプリタは JSException のインスタンスに変換されるエラーメッセージを生成する。 Java はうまく JavaScript コードを評価しても、JavaScript コードが処理方法が定かでない throw 文を実行する。JavaScript は JSException のインスタンスとしてラップされる例外を投げる。Java でこの例外のラップを解くには JSException の getWrappedException メソッドを使用する。 例えば、Java のオブジェクトである eTest に渡す文字列 jsCode をそのオブジェクトが評価するとします。次のようなエラー処理を実装することで、評価が原因のどちらの種類のランタイムエラーにも対応できます。 import netscape.javascript.JSObject; import netscape.javascript.JSException; public class eTest { public static Object doit(JSObject obj, String jsCode) { try { obj.eval(jsCode); } catch (JSException e) { if (e.getWrappedException()==null) return e; return e.getWrappedException(); } return null; } } この例では、渡された文字列 jsCode を try ブロック内のコードが評価しようとします。文字列 "myFunction()" を jsCode の値として渡すとします。myFunction が JavaScript の関数として定義されていない場合、JavaScript インタプリタは jsCode を評価できません。インタプリタはエラーメッセージを生成し、Java のハンドラがそのメッセージを受け取り、doit メソッドは netscape.javascript.JSException のインスタンスを返します。 しかし、次のように myFunction が JavaScript で定義されているとします。 function myFunction() { try { if (theCondition == true) { return "Everything's ok"; } else { throw "JavaScript error occurred" ; } } catch (e) { if (canHandle == true) { handleIt(); } else { throw e; } } } theCondition が false だと関数は例外を投げます。その例外は JavaScript コードで受け取られ、さらに canHandle が true の場合に JavaScript はそれを処理します。canHandle が false ならばその例外が再び投げられ、Java のハンドラがそれを受け取り、doit メソッドが次の Java の文字列を返します。 JavaScript error occurred JavaScript の例外についての詳細情報は 例外処理文 を参照してください。 後方互換性 JavaScript 1.3 以前のバージョンでは、JSException クラスにはオプション的な文字列引数をとる 3 つのパブリックなコンストラクタがありました。この文字列引数は詳細なメッセージやその例外に対する他の情報を指定するものです。getWrappedException メソッドは使用できませんでした。 次のような try...catch 文を使用することで JavaScript 1.3 以前のバージョンで LiveConnect の例外を処理できます。 try { global.eval("foo.bar = 999;"); } catch (Exception e) { if (e instanceof JSException) { jsCodeFailed()"; } else { otherCodeFailed(); } } この例では foo が定義されていないと eval 文が失敗します。try ブロックの eval 文が JSException を投げると catch ブロックが jsCodeFailed メソッドを実行します。try ブロックがそれ以外のエラーを投げると otherCodeFailed メソッドが実行されます。 ***データ型変換 Java は強く型付けされた言語であり、JavaScript は弱く型付けされた言語であるため、LiveConnect を使用する際はもう一方の言語のために JavaScript ランタイムエンジンが引数の値を適当なデータ型に変換します。この変換について以下のセクションで説明します。 JavaScript から Java への変換 Java から JavaScript への変換 ***JavaScript から Java への変換 JavaScript から Java のメソッドを呼び出し、それにパラメータを渡す際、渡すパラメータのデータ型は以下のセクションで説明するルールに従って変換されます。 数値 真偽値 文字列 undefined 値 null 値 JavaArray および JavaObject オブジェクト JavaClass オブジェクト その他の JavaScript のオブジェクト netscape.javascript.JSObject のメソッドの戻り値は常に java.lang.Object のインスタンスに変換されます。このような戻り値の変換ルールもここで説明します。 例えば JSObject.eval が JavaScript の数値を返すのであれば、この数値を java.lang.Object のインスタンスに変換するルールは 数値 に記載されています。 数値 Java のメソッドに JavaScript の数値型をパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |double|そのままの値が丸められたり絶対値や符号が損なわれたりすることなく Java に渡される。&br()NaN は NaN に変換される| |java.lang.Double&br()java.lang.Object|java.lang.Double の新しいインスタンスが作成され、そのままの値が丸められたり絶対値や符号が損なわれたりすることなく Java に渡される| |float|値は浮動小数点数に丸められる。&br()大きすぎまたは小さすぎて表現できない値は正の無限大または負の無限大に丸められる。&br()NaN は NaN に変換される| |byte&br()char&br()int&br()long&br()short|値は負の無限大方向に丸められる。&br()大きすぎまたは小さすぎて表現できない値はランタイムエラーとなる。NaN は変換されずにランタイムエラーとなる| |java.lang.String|値は文字列に変換される。&br()237 は "237" になる| |boolean|0 および NaN は false に変換される。&br()その他の値は true に変換される| java.lang.String のインスタンスをパラメータに想定した Java のメソッドに JavaScript の数値をパラメータとして渡すと、その数値は文字列に変換されます。equals() メソッドを使用するとこの変換結果と他の文字列を比較することができます。 真偽値 Java のメソッドに JavaScript の真偽値型をパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |boolean|すべての値は Java の対応するものに直接変換される| |java.lang.Boolean&br()java.lang.Object|java.lang.Boolean の新しいインスタンスが作成される。各パラメータについて新しいインスタンスが作成される。同一のプリミティブ値を持つ 1 つのインスタンスではない| |java.lang.String|値は文字列に変換される。&br()true は "true" になる。&br()false は "false" になる| |byte&br()char&br()double&br()float&br()int&br()long&br()short|true は 1 になる。&br()false は 0 になる| java.lang.String のインスタンスをパラメータに想定した Java のメソッドに JavaScript の真偽値をパラメータとして渡すと、その真偽値は文字列に変換されます。== 演算子を使用するとこの変換結果と他の文字列を比較することができます。 文字列 Java のメソッドに JavaScript の文字列型をパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |java.lang.String&br()java.lang.Object|JavaScript 1.4:&br()JavaScript の文字列は Unicode 値を持つ java.lang.String のインスタンスに変換される。&br()JavaScript 1.3 以前:&br()A JavaScript の文字列は ASCII 値を持つ java.lang.String のインスタンスに変換される| |byte&br()double&br()float&br()int&br()long&br()short|すべての値は ECMA-262 に記載された数値に変換される。 JavaScript の文字列は ECMA-262 に記載されたルールに従って数値に変換される| |char|JavaScript 1.4:&br()1 文字の文字列は Unicode 文字に変換される。&br()他のすべての値は数値に変換される。&br()JavaScript 1.3 以前:&br()すべての値は数値に変換される| |boolean|空文字列は false になる。&br()他のすべての値は true になる| undefined 値 Java のメソッドに JavaScript の undefined 値をパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |lava.lang.String&br()java.lang.Object|値はその値が文字列 "undefined" である java.lang.String のインスタンスに変換される| |boolean|値は false になる| |double|float 値は NaN になる| |byte&br()char&br()int&br()long&br()short|値は 0 になる。| undefined 値の変換は JavaScript 1.3 以降でのみ可能です。それより古いバージョンでは undefined 値がサポートされていません。 java.lang.String のインスタンスをパラメータに想定した Java のメソッドに JavaScript の undefined 値をパラメータとして渡すと、その undefined 値は文字列に変換されます。== 演算子を使用するとこの変換結果と他の文字列を比較することができます。 null 値 Java のメソッドに JavaScript の null 値をパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |あらゆるクラス&br()あらゆるインタフェースの種類|値は null になる| |byte&br()char&br()double&br()float&br()int&br()long&br()short|値は 0 になる| |boolean|値は false になる| JavaArray および JavaObject オブジェクト ほとんどの場合、Java のメソッドに JavaScript の JavaArray または JavaObject オブジェクトをパラメータとして渡すと、Java は単にそのオブジェクトのラップを解きます。そうでない場合にはJava は次の表で示すルールに従ってそのオブジェクトを別のデータ型に変換します。 |Java のパラメータ型|変換ルール| |ラップが解かれたオブジェクトと代入互換性のある、あらゆるインタフェースまたはクラス|オブジェクトのラップが解かれる| |java.lang.String|オブジェクトのラップが解かれ、ラップが解かれた Java のオブジェクトの toString メソッドが呼び出され、java.lang.String の新しいインスタンスが返される| |byte&br()char&br()double&br()float&br()int&br()long&br()short|オブジェクトのラップが解かれ、次の状況のどちらかが起こる。&brラップが解かれた Java のオブジェクトに doubleValue メソッドがあれば、JavaArray または JavaObject がこのメソッドが返す値に変換される。&br()ラップが解かれた Java のオブジェクトに doubleValue メソッドがなければエラーが生じる| |boolean|JavaScript 1.3 以降ではオブジェクトのラップが解かれ、次の状況のどちらかが起こる。&br()オブジェクトが null ならば false に変換される。&br()オブジェクトがそれ以外の値ならば true に変換される&br()JavaScript 1.2 以前ではオブジェクトのラップが解かれ、次の状況のどちらかが起こる&br()ラップが解かれたオブジェクトに booleanValue メソッドがあれば、ソースオブジェクトが戻り値に変換される。&br()オブジェクトに booleanValue メソッドがなければ変換に失敗する| ラップが解かれたオブジェクトが Java のパラメータ型のインスタンスであれば、インタフェースまたはクラスがラップが解かれたオブジェクトと代入互換性があるということです。つまり、次の文は必ず true を返します。 unwrappedObject instanceof parameterType JavaClass オブジェクト Java のメソッドに JavaScript の JavaClass オブジェクトをパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |java.lang.Class|オブジェクトのラップが解かれる。| |netscape.javascript.JSObject&br()java.lang.Object|JavaClass オブジェクトが netscape.javascript.JSObject の新しいインスタンス内にラップされる| |java.lang.String|オブジェクトのラップが解かれ、ラップが解かれた Java のオブジェクトの toString メソッドが呼び出され、java.lang.String の新しいインスタンスが返される| |boolean|JavaScript 1.3 以降ではオブジェクトのラップが解かれ、次の状況のどちらかが起こる。&br()オブジェクトが null ならば false に変換される。&br()オブジェクトがそれ以外の値ならば true に変換される。&br()JavaScript 1.2 以前ではオブジェクトのラップが解かれ、次の状況のどちらかが起こる。&br()ラップが解かれたオブジェクトに booleanValue メソッドがあれば、ソースオブジェクトが戻り値に変換される。&br()オブジェクトに booleanValue メソッドがなければ変換に失敗する。| その他の JavaScript のオブジェクト Java のメソッドに JavaScript のその他のオブジェクトをパラメータとして渡すと、Java は次の表で示すルールに従ってその値を変換します。 |Java のパラメータ型|変換ルール| |netscape.javascript.JSObject&br()java.lang.Object|オブジェクトが netscape.javascript.JSObject の新しいインスタンス内にラップされる| |java.lang.String|オブジェクトのラップが解かれ、ラップが解かれたオブジェクトの toString メソッドが呼び出され、java.lang.String の新しいインスタンスが返される| |byte&br()char&br()double&br()float&br()int&br()long&br()short|オブジェクトが ECMA-262 に記載された ToPrimitive 演算子の論理を使用した値に変換される。この演算子で使用される PreferredType ヒントは Number| |boolean|JavaScript 1.3 以降ではオブジェクトのラップが解かれ、次の状況のどちらかが起こる。&br()オブジェクトが null ならば false に変換される。&br()オブジェクトがそれ以外の値ならば true に変換される。&br()JavaScript 1.2 以前ではオブジェクトのラップが解かれ、次の状況のどちらかが起こる。&br()ラップが解かれたオブジェクトに booleanValue メソッドがあれば、ソースオブジェクトが戻り値に変換される。&br()オブジェクトに booleanValue メソッドがなければ変換に失敗する。| ***Java から JavaScript への変換 Java から JavaScript への変換 Java から JavaScript に渡された値は次のように変換されます。 -Java の byte、char、short、int、long、float および double は JavaScript の数値に変換される。 -Java の boolean は JavaScript の真偽値に変換される。 クラス netscape.javascript.JSObject のオブジェクトは元の JavaScript のオブジェクトに変換される。 -Java の配列は JavaScript の擬似的な Array オブジェクトに変換される。このオブジェクトは JavaScript の Array オブジェクトと全く同じような挙動をとる。つまり、arrayName[index]（index は整数）という構文でそれにアクセスでき、その長さを arrayName.length で決定できる。 -Java のそれ以外のクラスのオブジェクトは JavaScript のラッパに変換される。このラッパを通じて Java のオブジェクトのメソッドやフィールドにアクセスすることができる。 --このラッパから文字列への変換では元のオブジェクト上で toString メソッドが呼び出される。 数値への変換では、可能であれば doubleValue メソッドが呼び出され、そうでなければ失敗する。 --JavaScript 1.3 以降の真偽値への変換では、そのオブジェクトが null であれば false を、そうでなければ true を返す。 --JavaScript 1.2 以前の真偽値への変換では、可能であれば booleanValue メソッドが呼び出され、そうでなければ失敗する。 --java.lang.Double および java.lang.Integer のインスタンスは JavaScript の数値ではなく JavaScript のオブジェクトに変換されることに注意してください。同様に、java.lang.String のインスタンスも JavaScript の文字列ではなく JavaScript のオブジェクトに変換されます。 Java の String オブジェクトは JavaScript のラッパにも対応しています。JavaScript の文字列を必要とする JavaScript のメソッドを呼び出し、それにこのラッパを渡すとエラーになります。そうではなく、次のようにラッパに空文字列を付加することでそのラッパを JavaScript の文字列に変換してください。 var JavaString = JavaObj.methodThatReturnsAString(); var JavaScriptString = JavaString + ""; **E4X(ECMAScript for XML) を用いた XML 処理 JavaScript 1.6 で導入 JavaScript 1.6 で初めて導入された E4X により、JavaScript 言語にネイティブ XML オブジェクトが導入され、さらに XML 文書リテラルを JavaScript コードに埋め込むための構文も追加されています。 E4X の完全な定義は Ecma-357 仕様 でなされています。この章では実用的な概要を示します。完全なリファレンスではありません。 ***互換性の問題 <script> 要素のサポートがブラウザの間で広く普及する前は、JavaScript をページに埋め込むときに HTML コメントタグで囲むことで、<script> を知らないブラウザが JavaScript コードをそのまま表示してしまうのを防ぐということが一般的でした。この慣習はもう不要ですが、古いコードでは残っていることがあります。後方互換性のため、E4X はコメントや CDATA セクションを無視するのがデフォルトの動作です。e4x=1 引数を <script> タグに加えることでこの制限を無効にできます。 <script type="text/javascript;e4x=1"> ... </script> ***XML オブジェクトの作成 E4X には XML オブジェクトを作成する方法が 2 つあります。1 つ目は XML コンストラクタに文字列を渡す方法です。 var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>'); 2 つ目はスクリプトに XML を XML リテラルとして直接埋め込むことです。 var languages = <languages type="dynamic"> <lang>JavaScript</lang> <lang>Python</lang> </languages>; どちらの場合も結果として得られるオブジェクトは E4X XML オブジェクトです。これには内部データにアクセスしたりそれを変更したりするための便利な構文が備わっています。 XML オブジェクトは通常の JavaScript オブジェクトのように見え、そのような挙動をとりますが、その 2 つは同じものではありません。E4X では E4X XML オブジェクトにおいてのみ動作する新たな構文が導入されています。その構文は JavaScript プログラマにとって取っつきやすいように設計されていますが、E4X では XML からネイティブ JavaScript オブジェクトへの直接のマッピングが用意されていません。そう見えるだけです。 ***属性の操作 上記の例を実行すると変数 languages は XML 文書の <languages> に対応する XML オブジェクトへの参照となります。このノードには type という 1 つの属性があり、それにアクセスしたり、それを変更したりする方法はいくつもあります。 alert(languages.@type); // "dynamic" というアラート languages.@type = "agile"; alert(languages.@type); // "agile" というアラート alert(languages.toString()); /* アラート： <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages> */ ***XML オブジェクトの操作 XML オブジェクトにはその中身を検査したり変更するためのメソッドがたくさん用意されています。それらは JavaScript の通常のドットや [] という記法をサポートしていますが、オブジェクトのプロパティにアクセスするのではなく、E4X ではその要素の子にアクセスするための演算子として定義されています。 var person = <person> <name>Bob Smith</name> <likes> <os>Linux</os> <browser>Firefox</browser> <language>JavaScript</language> <language>Python</language> </likes> </person>; alert(person.name); // Bob Smith alert(person['name']); // Bob Smith alert(person.likes.browser); // Firefox alert(person['likes'].browser); // Firefox 複数の要素がマッチするようなものにアクセスすると XMLList が返されます。 alert(person.likes.language.length()); // 2 DOM と同様に * を使うことですべての子ノードにアクセスすることができます。 alert(person.likes.*.length()); // 4 . 演算子は与えられたノードの直接の子にアクセスしますが、.. 演算子はネストの深さにかかわらずすべての子にアクセスします。 alert(person..*.length()); // 11 この場合、length() メソッドは 11 を返します。結果として得られる XMLList には要素とテキストノードがともに含まれるためです。 XML 要素を表すオブジェクトには便利なメソッドがたくさん用意されています。そのうちのいくつかを以下に示します。 alert(person.name.text()) // Bob Smith var [[xml]] = person.toXMLString(); // XML からなる文字列 var personCopy = person.copy(); // XML オブジェクトのディープコピー var child = person.child(1); // 2 番目の子ノード：この場合は <likes> 要素 ***XMLLists の操作 XML オブジェクトに加えて、E4X では XMLList オブジェクトが導入されています。XMLList は XML オブジェクトの順序付きの集まりを表します。例えば、要素のリストです。上記の例に続き、次のようにすると <lang> 要素の XMLList にアクセスすることができます。 var langs = languages.lang; XMLList には格納している要素数を知るための length() メソッドがあります。 alert(languages.lang.length()); JavaScript の配列とは違い、length はプロパティではなくメソッドであり、必ず length() として呼び出さなければならないことに注意してください。 次のようにしてマッチする要素について繰り返すことができます。 for (var i = 0; i < languages.lang.length(); i++) { alert(languages.lang[i].toString()); } ここでは配列のアイテムに順にアクセスするときと全く同じ構文を使っています。このように通常の配列に似ているにもかかわらず、XMLList は forEach のような Array のメソッドをサポートしていません。また、Array.forEach() のような Array のジェネリックスも XMLList オブジェクトとは互換性がありません。 JavaScript 1.6 で JavaScript の E4X サポートの一部として導入された for each...in 文 を使うこともできます。 for each (var lang in languages.lang) { alert(lang); } for each...in は通常の JavaScript のオブジェクトについて使うと、そのオブジェクトに含まれる値（キーではなく）に対して繰り返すこともできます。for...in と同様、配列について使用するのは 全く推奨できません。 整形式の XML を文書を作らずとも、次のような XML リテラル構文を用いて XMLList を作ることができます。 var xmllist = <> <lang>JavaScript</lang> <lang>Python</lang> </>; += 演算子を使うと文書内の XMLList に要素を新たに追加することができます。 languages.lang += <lang>Ruby</lang>; 通常の DOM メソッドで返されるノードリストとは異なり、XMLList は静的であり、DOM 内の変更が自動的には反映されません。既存の XML オブジェクトのサブセットとして XMLList を作成し、その後オリジナルの XML を変更した場合、XMLList にはその変更が反映されません。最新の状態にするには作り直す必要があります。 var languages = <languages> <lang>JavaScript</lang> <lang>Python</lang> </languages>; var lang = languages.lang; alert(lang.length()); // 2 というアラート languages.lang += <lang>Ruby</lang>; alert(lang.length()); // やはり 2 というアラート lang = languages.lang; // XMLList を作り直す alert(lang.length()); // 3 というアラート ***検索とフィルタ E4X には特定の基準にマッチする文書内のノードを選択するための特別な演算子が用意されています。このようなフィルタ演算は丸括弧で囲んだ式で指定します。 var [[html]] = <html> <p id="p1">First paragraph</p> <p id="p2">Second paragraph</p> </html>; alert(html.p.(@id == "p1")); // "First paragraph" というアラート 式の手前のパスにマッチするノード（この場合は p 要素）は式が評価される前にスコープチェーンに追加されます。with 文 を使ってノードが指定されているかのような動作です。 したがって、フィルタは現在の要素内の単一ノードの値に対しても実行することができます。 var people = <people> <person> <name>Bob</name> <age>32</age> </person> <person> <name>Joe</name> <age>46</age> </person> </people>; alert(people.person.(name == "Joe").age); // 46 というアラート フィルタ式に JavaScript 関数を使うこともできます。 function over40(i) { return i > 40; } alert(people.person.(over40(parseInt(age))).name); // Joe というアラート ***名前空間の処理 E4X は名前空間を考慮しています。ノードや属性を表すあらゆる XML オブジェクトには QName オブジェクトを返す name() メソッドがあり、名前空間要素を簡単に検査することができます。 var [[xhtml]] = <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Embedded SVG demo</title> </head> <body> <h1>Embedded SVG demo</h1> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="20" stroke="orange" stroke-width="2px" fill="yellow" /> </svg> </body> </html>; alert(xhtml.name().localName); // "html" というアラート alert(xhtml.name().uri); // "http://www.w3.org/1999/xhtml" というアラート 名前空間内にある要素にアクセスするには、まずその名前空間についての URI を格納した Namespace オブジェクトを作ります。 var svgns = new Namespace('http://www.w3.org/2000/svg'); すると、通常の要素指定子の代わりに namespace::localName の形式で E4X クエリに使用することができます。 var svg = xhtml..svgns::svg; alert(svg); // 文書の <svg> 部分が表示される 2011-09-21T20:23:40+09:00 1316604220 https://w.atwiki.jp/0x0b/pages/100.html [[Mozilla JavaScript>js_about_06]]の続き #contents **Working with Arrays ***Creating an array ***Working with array elements ***Understanding length ***Iterating over arrays ***Array methods ***Working with Array-like objects ***Two-Dimensional Arrays ***Array comprehensions **Iterators and Generators ***Iterators ***Defining custom iterators ***Generators: a better way to build Iterators ***Advanced generators ***Generator expressions **オブジェクトモデルの詳細 ***クラスベース言語とプロトタイプベース言語 Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。 クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。 一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。 JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。 ***クラスの定義 クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。 JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。 ***サブクラスと継承 クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。 JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。 ***プロパティの追加と削除 クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。 ***違いの概要 次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。 |クラスベース (Java)|プロトタイプベース (JavaScript)| |クラスとインスタンスは異なる実体である。|すべてのオブジェクトはインスタンスである。| |クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。|コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。| |new 演算子を用いて単一のオブジェクトを作成する。|同じ。| |既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。|コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。| |クラスチェーンに従ってプロパティを継承する。|プロトタイプチェーンに従ってプロパティを継承する。| |クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。|コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。| ***従業員の例 この章の残りは次の図で示す従業員の階層を使用していきます。 これの例では以下のオブジェクトを使用しています。 Employee はプロパティ name（デフォルトの値は空文字列）および dept（デフォルトの値は "general"）を持つ。 Manager は Employee をベースとしている。これは reports プロパティ（デフォルトの値は空の配列、その値として Employee オブジェクトの配列を持たせる）を追加する。 WorkerBee も Employee をベースとしている。これは projects プロパティ（デフォルトの値は空の配列、その値として文字列の配列を持たせる）を追加する。 SalesPerson は WorkerBee をベースとしている。これは quota プロパティ（デフォルトの値は 100）を追加する。さらに dept プロパティを "sales" という値で上書きする。これは販売員は全員同じ部署に所属していることを示す。 Engineer は WorkerBee をベースとしている。これは machine プロパティ（デフォルトの値は空文字列）を追加し、さらに dept プロパティを "engineering" という値で上書きする。 残りの例： -階層の作成 -オブジェクトのプロパティ --プロパティの継承 --プロパティの追加 -より柔軟なコンストラクタ ***階層の作成 Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。 このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。 実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは より柔軟なコンストラクタ を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。 Employee オブジェクトの定義 以下に示すように、Java と JavaScript の Employee の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。 JavaScript Java function Employee () { this.name = ""; this.dept = "general"; } public class Employee { public String name; public String dept; public Employee () { this.name = ""; this.dept = "general"; } } Manager および WorkerBee の定義では、継承の連鎖において上である次のオブジェクトの指定方法に違いがあります。JavaScript では原型的なインスタンスをコンストラクタ関数の prototype プロパティとして追加します。コンストラクタを定義した後ならいつでもそれをすることができます。Java ではクラス定義内でスーパークラスを指定します。クラス定義の外部でスーパークラスを変更することはできません。 JavaScript Java function Manager () { this.reports = []; } Manager.prototype = new Employee; function WorkerBee () { this.projects = []; } WorkerBee.prototype = new Employee; public class Manager extends Employee { public Employee[] reports; public Manager () { this.reports = new Employee[0]; } } public class WorkerBee extends Employee { public String[] projects; public WorkerBee () { this.projects = new String[0]; } } Engineer および SalesPerson の定義は、WorkerBee の子孫、それゆえに Employee の子孫であるオブジェクトを作成します。これらの種類のオブジェクトは連鎖において上にある全オブジェクトのプロパティを持ちます。さらに、これらの定義は dept プロパティの継承された値をこれらのオブジェクト固有の新しい値で上書きします。 JavaScript Java function SalesPerson () { this.dept = "sales"; this.quota = 100; } SalesPerson.prototype = new WorkerBee; function Engineer () { this.dept = "engineering"; this.machine = ""; } Engineer.prototype = new WorkerBee; public class SalesPerson extends WorkerBee { public double quota; public SalesPerson () { this.dept = "sales"; this.quota = 100.0; } } public class Engineer extends WorkerBee { public String machine; public Engineer () { this.dept = "engineering"; this.machine = ""; } } これらの定義を使用して、そのプロパティのデフォルト値を取得するこれらのオブジェクトのインスタンスを作成することができます。図 8.3 ではこれらの JavaScript の定義を使用して新しいオブジェクトを作成する方法を示しています。また、新しいオブジェクトに対するプロパティの値も示しています。 注意：インスタンスという用語はクラスベース言語においてはある特定の技術的な意味を持っています。これらの言語では、インスタンスとはクラスの個々のメンバであり、クラスとは根本的に異なるものです。JavaScript では「インスタンス」はこの技術的な意味を持っていません。なぜならば JavaScript にはクラスとインスタンスとの間のこの違いがないからです。しかしながら、JavaScript について話す際に、「インスタンス」をある特定のコンストラクタ関数を用いて作成したオブジェクトを意味する言葉として正式ではない形で使用することがあります。例えば、jane は Engineer のインスタンスであると砕けた言い方をすることもできます。同様に、親、子、祖先、そして子孫という用語は JavaScript において正式な意味を持ちませんが、プロトタイプチェーンにおいて上や下にあるオブジェクトについて言及する際にそれらを正式ではない形で使用してもかまいません。 図：単純な定義を用いたオブジェクトの作成 ***オブジェクトのプロパティ このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。 プロパティの継承 プロパティの追加 ***プロパティの継承 次の文を用いて（階層の作成 で示したように）mark オブジェクトを WorkerBee として作成するとします。 mark = new WorkerBee; JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを this キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に projects プロパティの値をセットします。さらに、内部的な __proto__ プロパティの値として WorkerBee.prototype の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）__proto__ プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 mark にそのオブジェクトをセットします。 このプロセスでは mark がプロトタイプチェーンから継承するプロパティとして明示的には mark オブジェクトに値（ローカルの値）を格納しません。プロパティの値を使用するとき、JavaScript はまずその値がそのオブジェクトに存在しているかどうかを確認します。存在している場合はその値が返されます。値がローカルには存在していない場合、JavaScript はプロトタイプチェーンを確認します（__proto__ プロパティを使用）。プロトタイプチェーン内のオブジェクトがそのプロパティの値を持っている場合、その値が返されます。そのようなプロパティが見つからない場合は JavaScript はそのオブジェクトにはそのプロパティがないと報告します。このようにして、mark オブジェクトには次のようなプロパティと値が入ることになります。 mark.name = ""; mark.dept = "general"; mark.projects = []; mark オブジェクトは mark.__proto__ の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは プロパティの継承、再び にて議論します。 これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして mark に固有の情報を与えます。 mark.name = "Doe, Mark"; mark.dept = "admin"; mark.projects = ["navigator"]; ***プロパティの追加 JavaScript では実行時にどんなオブジェクトにもプロパティを追加することができます。コンストラクタ関数で与えられるプロパティだけを使う必要はありません。ある 1 つのオブジェクト固有のプロパティを追加するには、次のようにしてオブジェクトに値を代入します。 mark.bonus = 3000; すると、mark オブジェクトには bonus プロパティができます。しかし、他のどの WorkerBee にもこのプロパティは存在しません。 あるコンストラクタ関数に対するプロトタイプとして使用されているオブジェクトに新しいプロパティを追加する場合、プロトタイプからプロパティを継承する全オブジェクトへそのプロパティを追加することになります。例えば、次の文を使用すると specialty プロパティをすべての従業員に対して追加することができます。 Employee.prototype.specialty = "none"; JavaScript がこの文を実行するとすぐに mark オブジェクトも "none" という値を持つ specialty プロパティを持つようになります。次の図ではこのプロパティを Employee プロトタイプに追加し、さらに Engineer プロトタイプに対するそれを上書きしたときの効果を示します。 図 ：プロパティの追加 ***より柔軟なコンストラクタ これまでに見てきたコンストラクタ関数はインスタンス作成時にプロパティの値を指定することができませんでした。Java でのようにコンストラクタに引数を与えてインスタンスのプロパティの値を初期化することができます。次の図でそれを実現する 1 つの方法を示します。 図：コンストラクタでのプロパティの指定、その 1 次の表では Java および JavaScript でのこれらのオブジェクトの定義を示します。 JavaScript Java function Employee (name, dept) { this.name = name || ""; this.dept = dept || "general"; } public class Employee { public String name; public String dept; public Employee () { this("", "general"); } public Employee (String name) { this(name, "general"); } public Employee (String name, String dept) { this.name = name; this.dept = dept; } } function WorkerBee (projs) { this.projects = projs || []; } WorkerBee.prototype = new Employee; public class WorkerBee extends Employee { public String[] projects; public WorkerBee () { this(new String[0]); } public WorkerBee (String[] projs) { this.projects = projs; } } function Engineer (mach) { this.dept = "engineering"; this.machine = mach || ""; } Engineer.prototype = new WorkerBee; public class Engineer extends WorkerBee { public String machine; public WorkerBee () { this.dept = "engineering"; this.machine = ""; } public WorkerBee (String mach) { this.dept = "engineering"; this.machine = mach; } } これらの JavaScript の定義ではデフォルト値をセットするのに特殊なイディオムを使用しています。 this.name = name || ""; JavaScript の論理 OR 演算子 (||) はその最初の引数を評価します。その引数が true に変換できる場合、演算子はそれを返します。そうでない場合は第 2 の引数の値を返します。したがって、このコードは name が name プロパティに使用できる値であるかをテストします。そうであれば this.name にその値をセットします。そうでなければ this.name に空文字列をセットします。簡単のため、この章ではこのイディオムを使用します。しかしながら、一目見ただけでは不可解に思えるかもしれません。これは数値や真偽値の引数では期待どおりに動作しない可能性がありますので注意してください。これは 0（ゼロ）でも false でもデフォルト値が選択されるようになるからです。そのため、この場合では以下のより煩わしいイディオムを使用する必要が出てきます。このイディオムはすべてのデータ型で望みどおりに動作します。 this.authorized = typeof(authorized) !== 'undefined' ? authorized : true; これらの定義を用いると、オブジェクトのインスタンスを作成するときに局所的に定義されたプロパティに対する値を指定することができます。図 8.5 で示したように、次の文を使用すると新しい Engineer を作成できます。 jane = new Engineer("belau"); すると Jane のプロパティは次のようになります。 jane.name == ""; jane.dept == "engineering"; jane.projects == []; jane.machine == "belau" これらの定義を用いると name のような継承されたプロパティに対する初期値を指定することはできないので気をつけてください。JavaScript の継承されたプロパティに対する初期値を指定したいのであれば、コンストラクタ関数にさらにコードを追加する必要があります。 これまではコンストラクタ関数は汎用オブジェクトを生成し、その後に新しいオブジェクトに対するローカルプロパティと値を定義していました。プロトタイプチェーンにおいて上位のオブジェクトに対するコンストラクタ関数を直接呼び出すことで、コンストラクタにさらにプロパティを追加させることができます。次の図ではこれらの新しい定義を示します。 図 ：コンストラクタでのプロパティの指定、その 2 これらの定義の 1 つを詳しく見ていきましょう。これは Engineer コンストラクタの新しい定義です。 function Engineer (name, projs, mach) { this.base = WorkerBee; this.base(name, "engineering", projs); this.machine = mach || ""; } 次のようにして新しい Engineer オブジェクトを作成するとします。 jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); JavaScript は次のステップに従います。 1.new 演算子が汎用オブジェクトを生成し、その __proto__ プロパティに Engineer.prototype をセットする。 2.new 演算子が Engineer コンストラクタに新しいオブジェクトを this キーワードの値として渡す。 3.コンストラクタがそのオブジェクトに対する base という新しいプロパティを生成し、WorkerBee コンストラクタの値を base プロパティ代入する。このことで WorkerBee コンストラクタは Engineer オブジェクトのメソッドとなる。 base というプロパティ名は特殊なものではありません。正当なプロパティ名であれば何でも使用できます。base は単にその意図をイメージさせるのに十分だからです。 4.コンストラクタが base メソッドを呼び出す。その引数として、コンストラクタに渡された引数のうちの 2 つ（"Doe, Jane" および ["navigator", "javascript"]）とさらに "engineering" という文字列を渡す。コンストラクタで "engineering" を明示的に使用することで、すべての Engineer オブジェクトが継承された dept プロパティに対して同じ値を持つようにし、この値が Employee から継承した値を上書きするようになる。 5.base は Engineer のメソッドであるため、base の呼び出し元の内部では JavaScript は this キーワードをステップ 1 で作成したオブジェクトに結びつける。したがって、WorkerBee 関数は順に "Doe, Jane" および ["navigator", "javascript"] という引数を Employee コンストラクタ関数に渡す。Employee コンストラクタ関数から戻ると、WorkerBee 関数は残りの引数を使用して projects プロパティをセットする。 6.base メソッドから戻ると、Engineer コンストラクタがオブジェクトの machine プロパティを "belau" で初期化する。 7.コンストラクタから戻ると、JavaScript は新しいオブジェクトを jane という変数に代入する。 Engineer コンストラクタの内部から WorkerBee コンストラクタを呼び出すと、Engineer オブジェクトに対して適切に継承をセットアップしたことになるのではないかと思うかもしれません。実際にはそうではありません。WorkerBee コンストラクタを呼び出すことで、呼び出された全コンストラクタ関数で指定されているプロパティを持った Engineer オブジェクトができるのが確実になります。しかし、後からプロパティを Employee または WorkerBee プロトタイプに追加する場合、そういったプロパティは Engineer オブジェクトに継承されません。例えば、次の文があるとします。 function Engineer (name, projs, mach) { this.base = WorkerBee; this.base(name, "engineering", projs); this.machine = mach || ""; } jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); Employee.prototype.specialty = "none"; jane オブジェクトは specialty プロパティを継承しません。動的な継承を確実にするにはやはりプロトタイプを明示的にセットアップする必要があります。代わりに次の文を使用するとします。 function Engineer (name, projs, mach) { this.base = WorkerBee; this.base(name, "engineering", projs); this.machine = mach || ""; } Engineer.prototype = new WorkerBee; jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); Employee.prototype.specialty = "none"; すると、jane オブジェクトの specialty プロパティの値は "none" になります。 もう 1 つの継承方法は .call/.apply メソッドを使うことです。以下のものは同等です。 function Engineer (name, projs, mach) { this.base = WorkerBee; this.base(name, "engineering", projs); this.machine = mach || ""; } function Engineer (name, projs, mach) { WorkerBee.call(this, name, "engineering", projs); this.machine = mach || ""; } JavaScript の .call メソッドを使うことで実装がよりきれいになります。".base" が全く必要ないからです。 ***プロパティの継承、再び これまでのセクションでは JavaScript のコンストラクタとプロトタイプが階層と継承をどのように実現しているかを説明してきました。このセクションでは、これまでの議論では必ずしも明白ではなかった細かい部分について議論していきます。 ローカル値と継承値 インスタンス関係の決定 コンストラクタにおけるグローバル情報 多重継承のようなもの ***ローカル値と継承値 オブジェクトのプロパティにアクセスすると、この章で先に説明したように JavaScript は次のステップを実行します。 1.その値がローカルに存在するかを確かめる。存在している場合はその値を返す。 2.値がローカルには存在していない場合、プロトタイプチェーンを確認する（__proto__ プロパティを使用）。 3.プロトタイプチェーン内のオブジェクトが指定したプロパティの値を持っている場合、その値を返す。 4.そのようなプロパティが見つからなければ、そのオブジェクトにそのプロパティは存在しない。 このステップの結果はそれまでにどのようにオブジェクトを定義してきたかによります。元の例では次の定義を用いました。 function Employee () { this.name = ""; this.dept = "general"; } function WorkerBee () { this.projects = []; } WorkerBee.prototype = new Employee; この定義を前提とし、次の文を用いて WorkerBee のインスタンスとして amy を作成するとします。 amy = new WorkerBee; amy オブジェクトにはローカルプロパティが 1 つあります。それは projects です。name および dept プロパティの値は amy にとってはローカルではないため、amy オブジェクトの __proto__ プロパティから取得されます。その結果、amy には次のプロパティ値が存在することになります。 amy.name == ""; amy.dept == "general"; amy.projects == []; ここで、Employee に結びつけられたプロトタイプの name プロパティの値を変えるとします。 Employee.prototype.name = "Unknown" 一見、Employee の全インスタンスに新しい値が反映されるように思われます。しかしそうはなりません。 Employee オブジェクトのどんなインスタンスを作成しても、そのインスタンスは name プロパティに対するローカル値（空文字列）を持つことになります。新しい Employee オブジェクトを作成して WorkerBee プロトタイプをセットすると、WorkerBee.prototype は name プロパティに対するローカル値を持つということです。そのため、JavaScript が amy オブジェクト（WorkerBee のインスタンス）の name プロパティを探すと、JavaScript はそのプロパティに対するローカル値を WorkerBee.prototype 内で発見します。そして Employee.prototype へのチェーンの検索を停止します。 実行時にオブジェクトのプロパティの値を変更し、新しい値がそのオブジェクトのすべての子孫に継承されるようにしたい場合は、そのオブジェクトのコンストラクタ関数内でそのプロパティを定義してはいけません。その代わりにコンストラクタ関数に結びつけられたプロトタイプにそれを追加します。例えば、先のコードを次のように変更するとします。 function Employee () { this.dept = "general"; } Employee.prototype.name = ""; function WorkerBee () { this.projects = []; } WorkerBee.prototype = new Employee; amy = new WorkerBee; Employee.prototype.name = "Unknown"; この場合は amy の name プロパティは "Unknown" になります。 この例が示すように、オブジェクトのプロパティにデフォルト値を持たせ、実行時にデフォルト値を変更できるようにしたいのであれば、コンストラクタ関数自体の中ではなく、そのコンストラクタのプロトタイプでプロパティをセットするようにしてください。 ***インスタンス関係の決定 あるオブジェクトについて、プロトタイプチェーンにどんなオブジェクトがあるかを知りたい場面があるかもしれません。そうすることでこのオブジェクトはどのオブジェクトからプロパティを継承しているのかがわかります。 JavaScript 1.4 からは instanceof 演算子が導入され、プロトタイプチェーンをテストできるようになりました。この演算子は下で示す instanceOf 関数と全く同じように動作します。 プロパティの継承 で議論したように、コンストラクタ関数とともに new 演算子を用いて新しいオブジェクトを作成するとき、JavaScript は新しいオブジェクトの __proto__ プロパティにコンストラクタ関数の prototype プロパティの値をセットします。これを使用するとプロトタイプチェーンをテストすることができます。 例えば、既に示してある一連の定義を用います。プロトタイプもきちんとセットされているものとします。次のようにして __proto__ オブジェクトを作成します。 chris = new Engineer("Pigman, Chris", ["jsd"], "fiji"); このオブジェクトについて、以下の文はすべて true になります。 chris.__proto__ == Engineer.prototype; chris.__proto__.__proto__ == WorkerBee.prototype; chris.__proto__.__proto__.__proto__ == Employee.prototype; chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; ここで次のような instanceOf 関数を書いてみます。 function instanceOf(object, constructor) { while (object != null) { if (object == constructor.prototype) return true; object = object.__proto__; } return false; } この定義を用いると、以下の式はすべて true になります。 instanceOf (chris, Engineer) instanceOf (chris, WorkerBee) instanceOf (chris, Employee) instanceOf (chris, Object) しかし次の式は false になります。 instanceOf (chris, SalesPerson) ***コンストラクタにおけるグローバル情報 コンストラクタを作成する際、コンストラクタ内でグローバル情報をセットする場合は注意が必要です。例えば、一意的な ID をそれぞれの新しい従業員情報に自動的に代入したいとします。そこで以下のように Employee を定義します。 var idCounter = 1; function Employee (name, dept) { this.name = name || ""; this.dept = dept || "general"; this.id = idCounter++; } この定義を用いると、新しい Employee を作成するときに、コンストラクタに次の ID が順々に代入され、グローバル ID カウンタがインクリメントされます。その結果、以下の文を続けると victoria.id は 1 になり harry.id は 2 になります。 victoria = new Employee("Pigbert, Victoria", "pubs") harry = new Employee("Tschopik, Harry", "sales") 一見これは申し分なさそうです。しかし、idCounter はどんな用途であろうと Employee オブジェクトが作成されるたびにインクリメントされます。この章で示した Employee の階層全体を作成すると、Employee コンストラクタはプロトタイプをセットアップするたびに呼び出されます。次のコードを想定します。 var idCounter = 1; function Employee (name, dept) { this.name = name || ""; this.dept = dept || "general"; this.id = idCounter++; } function Manager (name, dept, reports) {...} Manager.prototype = new Employee; function WorkerBee (name, dept, projs) {...} WorkerBee.prototype = new Employee; function Engineer (name, projs, mach) {...} Engineer.prototype = new WorkerBee; function SalesPerson (name, projs, quota) {...} SalesPerson.prototype = new WorkerBee; mac = new Engineer("Wood, Mac"); さらに、ここでは省かれている定義に base プロパティがあり、その定義がプロトタイプチェーンにおいて上位のコンストラクタを呼び出すとします。この場合、mac オブジェクトが作成されるまでに mac.id が 5 になります。 カウンタが余計にインクリメントされることが問題になるかならないかは、そのアプリケーション次第です。このカウンタの正確な値が必要であれば、代わりに次のコンストラクタを使うという 1 つの解決策が考えられます。 function Employee (name, dept) { this.name = name || ""; this.dept = dept || "general"; if (name) this.id = idCounter++; } プロトタイプとして使用するために Employee のインスタンスを作成するときはコンストラクタに引数を与えてはいけません。このコンストラクタの定義では、引数を渡さないときはコンストラクタが値を id に代入せず、カウンタを更新することもありません。そのため、Employee が id に値を代入するようにするときは従業員の名前を指定する必要があります。この例では mac.id は 1 になります。 ***多重継承のようなもの オブジェクト指向言語の中には多重継承を許容するものもあります。つまり、オブジェクトは無関係な親オブジェクトからプロパティと値を継承できるということです。JavaScript は多重継承をサポートしていません。 実行時のプロパティ値の継承は、JavaScript が値を見つけようとオブジェクトのプロトタイプチェーンをサーチすることで行われます。オブジェクトに結びつけられたプロトタイプは 1 つであるため、JavaScript は複数のプロトタイプチェーンから動的に継承することはできません。 JavaScript ではコンストラクタ関数がその中で複数の別のコンストラクタ関数を呼び出すようにすることができます。これによって多重継承のようなものが実現できます。例えば以下の文があるとします。 function Hobbyist (hobby) { this.hobby = hobby || "scuba"; } function Engineer (name, projs, mach, hobby) { this.base1 = WorkerBee; this.base1(name, "engineering", projs); this.base2 = Hobbyist; this.base2(hobby); this.machine = mach || ""; } Engineer.prototype = new WorkerBee; dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo") さらに、WorkerBee の定義はこの章で先に使用したものであるとします。この場合 dennis オブジェクトにはこれらのプロパティが存在します。 dennis.name == "Doe, Dennis" dennis.dept == "engineering" dennis.projects == ["collabra"] dennis.machine == "hugo" dennis.hobby == "scuba" dennis は Hobbyist コンストラクタから hobby プロパティを取得しているのです。ここで Hobbyist コンストラクタのプロトタイプにプロパティを追加してみます。 Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"] こうしても dennis オブジェクトはこの新しいプロパティを継承しません。 2011-09-21T20:16:32+09:00 1316603792 https://w.atwiki.jp/0x0b/pages/99.html [[Mozilla Javascript>js_about05]]の続き #contents ***定義済みコアオブジェクト このセクションではコア JavaScript の定義済みオブジェクトについて説明します。 Array オブジェクト Boolean オブジェクト Date オブジェクト Function オブジェクト Math オブジェクト Number オブジェクト RegExp オブジェクト String オブジェクト ***Array オブジェクト JavaScript には配列を表す明確なデータ型というものはありません。しかし、定義済みの Array オブジェクトとそのメソッドを使用することで、アプリケーションで配列を扱うことができます。Array オブジェクトにはさまざまな方法で配列を操作するメソッドがあります。例えば、配列の要素をつなぎ合わせたり、逆転したり、ソートしたりするものがあります。また、配列の長さを決定するプロパティや、正規表現とともに使用するプロパティもあります。 配列とは、その個々の値を名前やインデックスで参照する順序集合です。例えば、その従業員番号でインデックス付けした、従業員の名前からなる emp という配列を作ることができます。すると、emp[1] は従業員番号 1 を、emp[2] は従業員番号 2 を、というように指すようになります。 配列の作成 Array オブジェクトは次のようにして作成します。 1. arrayObjectName = new Array(element0, element1, ..., elementN) 2. arrayObjectName = new Array(arrayLength) arrayObjectName は新しいオブジェクト名または既存のオブジェクトのプロパティ名です。Array のプロパティやメソッドを用いるときは arrayObjectName は既存の Array オブジェクトの名前または既存のオブジェクトのプロパティ名です。 element0, element1, ..., elementN は配列の要素の値からなるリストです。この形式で指定する際に、配列はその要素として指定した値で初期化されます。また、配列の length プロパティに引数の個数がセットされます。 arrayLength は配列の初期状態の長さです。次のコードは 5 つの要素を持つ配列を作成します。 billingMethod = new Array(5) 配列リテラルも Array オブジェクトです。例えば次のリテラルは Array オブジェクトです。配列リテラルの詳細については 配列リテラル をご覧ください。 coffees = ["French Roast", "Columbian", "Kona"] 配列要素の格納 値を要素に代入することで配列要素を格納することができます。 emp[1] = "Casey Jones" emp[2] = "Phil Lesh" emp[3] = "August West" 配列作成時に要素を格納することもできます。 myArray = new Array("Hello", myVar, 3.14159) 配列要素の参照 要素の順番を表す数を用いて配列の要素を参照することができます。例えば、次の配列を定義したとします。 myArray = new Array("Wind","Rain","Fire") すると、その配列の最初の要素は myArray[0] として、第 2 の要素は myArray[1] として参照できるようになります。 要素のインデックスはゼロ (0) から始まりますが、配列の長さ（例：myArray.length）はその配列の要素数を直接表します。 Array のメソッド Array オブジェクトには以下のメソッドがあります。 concat は 2 つの配列を結合し、新しい配列を返す。 myArray = new Array("1","2","3") myArray = myArray.concat("a", "b", "c"); // myArray は ["1", "2", "3", "a", "b", "c"] となる join(deliminator = ",") は配列の全要素を結合し、文字列にする。 myArray = new Array("Wind","Rain","Fire") list = myArray.join(" - "); // list は "Wind - Rain - Fire" となる pop は配列から最後の要素を取り除き、その要素を返す。 myArray = new Array("1", "2", "3"); last=myArray.pop(); // MyArray は ["1", "2"] となり、last = "3" となる push は 1 つ以上の要素を配列の最後に追加し、追加された最後の要素を返す。 myArray = new Array("1", "2"); myArray.push("3"); // MyArray は ["1", "2", "3"] となる reverse は配列の要素を逆順に並び替える。最初の配列要素は最後に、最後のものは最初に来る。 myArray = new Array ("1", "2", "3"); myArray.reverse(); // 配列を並び替え、myArray = [ "3", "2", "1" ] となる shift は配列から最初の要素を取り除き、その要素を返す。 myArray = new Array ("1", "2", "3"); first=myArray.shift(); // MyArray は ["2", "3"] となり、first は "1" となる slice (start_index, upto_index) は配列の一部分を抽出し、新しい配列を返す。 myArray = new Array ("a", "b", "c", "d", "e"); myArray = myArray.slice(1,4); //インデックス 1 からスタートし、インデックス 4 までの全要素を抽出し、[ "b", "c", "d" ] を返す。 splice(index, count_to_remove, addelement1, addelement2, ...) は配列に要素を追加し、かつ/または配列から要素を取り除く。 myArray = new Array ("1", "2", "3", "4", "5"); myArray.splice(1,3,"a","b","c", "d"); // MyArray は ["1", "a", "b", "c", "d", "5"] となる // このコードはインデックス 1（"2" があるところ）からスタートし、そこの 3 要素を取り除き、その場所に連続した要素をすべて挿入する sort は配列の要素をソートする。 myArray = new Array("Wind","Rain","Fire") myArray.sort(); // 配列をソートし、myArrray = [ "Fire", "Rain", "Wind" ] となる sort は配列の内容をどうソートするかを決定するコールバック関数をとることもできます。関数は 2 つの値を比較し、3 つの値のうちの 1 つの値を返します。 ソートシステムにとって a が b より小さい場合、-1（または任意の負数）を返す ソートシステムにとって a が b より大きい場合、1（または任意の正数）を返す a と b が等価と見なされる場合、0 を返す 例えば、次のコードは配列の最後の文字についてサポートします。 var sortFn = function(a,b){ if (a[a.length - 1] < b[b.length - 1]) return -1; if (a[a.length - 1] > b[b.length - 1]) return 1; if (a[a.length - 1] == b[b.length - 1]) return 0; } myArray.sort(sortFn); // 配列をソートし、myArray = ["Wind","Fire","Rain"] となる unshift は 1 つ以上の要素を配列の先頭に追加し、その配列の新しい長さを返す。 2 次元配列 次のコードは 2 次元配列を作成します。 a = new Array(4) for (i=0; i < 4; i++) { a[i] = new Array(4) for (j=0; j < 4; j++) { a[i][j] = "["+i+","+j+"]" } } この例では次の行を持つ配列が作成されます。 0 行目：[0,0][0,1][0,2][0,3] 1 行目：[1,0][1,1][1,2][1,3] 2 行目：[2,0][2,1][2,2][2,3] 3 行目：[3,0][3,1][3,2][3,3] 配列と正規表現 配列が正規表現と文字列との間のマッチ結果であるとき、その配列はそのマッチについての情報を持つプロパティと要素を返します。配列は RegExp.exec、String.match、String.split の戻り値です。正規表現とともに配列を使用することに関する情報は、第 4 章の 正規表現 をご覧ください。 ***Boolean オブジェクト Boolean オブジェクトはプリミティブな真偽値型のラッパです。Boolean オブジェクトを作成するには次のような構文を使用します。 booleanObjectName = new Boolean(value) プリミティブな真偽値の true と false を Boolean オブジェクトの true や false という値と混同しないでください。undefined や、null、0、NaN、空文字列のどれでもない値を持つどんなオブジェクトも、そして false という値を持つ Boolean オブジェクトも、条件文に通されると true に評価されます。詳しくは if...else 文 を参照してください。 ***Date オブジェクト JavaScript には日付を表すデータ型がありません。しかしながら、Date オブジェクトとそのメソッドを使用することで、アプリケーションで日付と時刻を扱うことができます。Date オブジェクトには日付をセット、取得、操作するためのメソッドがたくさんあります。プロパティは一切ありません。 JavaScript は Java と同じように日付を扱います。2 つの言語には共通する日付に関するメソッドが多くあります。また、両言語ともに日付を 1970 年 1 月 1 日 00:00:00 からのミリ秒数として保持します。 Date オブジェクトの範囲は 1970 年 1 月 1 日 (UTC) を基準に -100,000,000 日から 100,000,000 日です。 Date オブジェクトは次のようにして作成します。 dateObjectName = new Date([parameters]) ここで dateObjectName は作成する Date オブジェクトの名前です。すなわち、新しいオブジェクトの名前か、既存のオブジェクトのプロパティ名です。 上記の構文で、parameters は次のどの形式で指定してもかまいません。 引数なし：今日の日付と時刻を作成する。例えば、today = new Date()。 次の形式 "月 日, 年 時:分:秒" で日付を表した文字列。例えば、Xmas95 = new Date("December 25, 1995 13:30:00")。時、分、または秒を省略するとその値はゼロにセットされる。 年、月、日を表す整数値のセット。例えば、Xmas95 = new Date(1995,11,25)。 年、月、日、時、分、秒を表す整数値のセット。例えば、Xmas95 = new Date(1995,11,25,9,30,0)。 JavaScript 1.2 以前 Date オブジェクトは次のように振る舞います。 1970 年より前の日付は許されない。 JavaScript はプラットフォーム特有の日付の便宜や挙動に依存する。つまり、Date オブジェクトの挙動はプラットフォームごとに異なる。 Date オブジェクトのメソッド Date オブジェクトの日付や時刻を扱うメソッドは、大まかに次のカテゴリに分けることができます。 "set" メソッド：日付や時刻の値を Date オブジェクトにセットする。 "get" メソッド：Date オブジェクトから日付や時刻の値を取得する。 "to" メソッド：Date オブジェクトから文字列の値を返す。 parse および UTC メソッド：Date 文字列をパースする。 "get" および "set" メソッドを用いることで、秒、分、時、日にち、曜日、月、年を別々に取得したりセットしたりすることができます。曜日を返す getDay メソッドというものがありますが、これに対応する setDay メソッドというものはありません。なぜならば、曜日は自動的にセットされるからです。これらのメソッドはこれらの値を表すのに整数を用います。 秒および分：0 から 59 時：0 から 23 曜日：0（日曜）から 6（土曜） 日にち：1 から 31 月：0（1 月）から 11（12 月） 年：1900 年から数えた年 例えば、次の日付を定義したとします。 Xmas95 = new Date("December 25, 1995") すると、Xmas95.getMonth() は 11 を返し、Xmas95.getFullYear() は 1995 を返します。 getTime メソッドや setTime メソッドは日付を比較するのに便利です。getTime メソッドは 1970 年 1 月 1 日 00:00:00 からのミリ秒数を返します。 例えば、次のコードはその年の残りの日数を表示します。 today = new Date() endYear = new Date(1995,11,31,23,59,59,999) // 日と月をセット endYear.setFullYear(today.getFullYear()) // 今年が何年かをセット msPerDay = 24 * 60 * 60 * 1000 // 1 日のミリ秒数をセット daysLeft = (endYear.getTime() - today.getTime()) / msPerDay daysLeft = Math.round(daysLeft) // その年の残り日数を返す この例では今日の日付を保持する today という名前の Date オブジェクトを作成します。そして endYear という名前の Date オブジェクトを作成し、その年が何年かという値をセットします。さらに、1 日のミリ秒数を用いて今日と endYear の間の日数を算出します。これには getTime を使用し、さらに全体の日数に丸めます。 parse メソッドは、日付を表す文字列から既存の Date オブジェクトに値を代入するのに便利です。例えば、次のコードは parse と setTime を用いて日付の値を IPOdate オブジェクトに代入します。 IPOdate = new Date() IPOdate.setTime(Date.parse("Aug 9, 1995")) Date オブジェクトの使用例 次の例では、関数 JSClock() はデジタル時計のような形式で時刻を返します。 function JSClock() { var time = new Date() var hour = time.getHours() var minute = time.getMinutes() var second = time.getSeconds() var temp = "" + ((hour > 12) ? hour - 12 : hour) if (hour == 0) temp = "12"; temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second temp += (hour >= 12) ? " P.M." : " A.M." return temp } JSClock 関数はまず time という新しい Date オブジェクトを作成します。引数は与えられないため、現在の日付と時刻から time が作成されます。そして getHours、getMinutes および getSeconds メソッドを呼び出し、現在の時間、分、秒の値を hour、minute、second にそれぞれ代入します。 その次の 4 つの文はその時刻を元に文字列の値を構築します。最初の文は変数 temp を作成し、それに条件式を用いて値を代入します。hour が 12 よりも大きい場合は (hour - 12) を、それ以外の場合は単純に hour をそれぞれ代入します。ただし hour が 0 の場合は 12 とします。 その次の文は minute の値を temp に付け加えます。minute の値が 10 より小さい場合、条件式は区切りのコロンと分の先頭のゼロを追加し、そうでない場合は区切りのコロンだけを追加します。そして同様にして秒の値を temp に付け加えます。 最後に、条件式は hour が 12 以上の場合は "PM" を、そうでない場合は "AM" をそれぞれ temp に付け加えます。 ***Function オブジェクト 定義済みの Function オブジェクトは、関数としてコンパイルさせたい JavaScript コードの文字列を指定します。 Function オブジェクトを作成するには次のようにします。 functionObjectName = new Function ([arg1, arg2, ... argn], functionBody) functionObjectName は変数名または既存のオブジェクトのプロパティ名です。オブジェクトに小文字のイベントハンドラ名を続けて、window.onerror のようにして指定することもできます。 arg1, arg2, ... argn は関数が仮引数名として使用する引数です。それぞれが JavaScript の識別子として妥当な文字列である必要があります。例えば、"x" や "theForm" などです。 functionBody は関数の本体としてコンパイルさせたい JavaScript コードを表す文字列です。 Function オブジェクトはそれが使用されるたびに評価されます。これは関数を宣言し、それをコード内で呼び出す方法よりも非効率的です。宣言された関数はコンパイルされるからです。 ここで説明した関数の定義方法に加えて、function 文と関数式を用いることもできます。詳しくは コア JavaScript 1.5 リファレンス を参照してください。 次のコードは関数を変数 setBGColor に代入します。この関数は開いている文書の背景色をセットします。 var setBGColor = new Function("document.bgColor='antiquewhite'") Function オブジェクトを呼び出すには、それがあたかも関数であるかのように変数名を指定すればいいのです。次のコードは setBGColor 変数で指定された関数を実行します。 var colorChoice="antiquewhite" if (colorChoice=="antiquewhite") {setBGColor()} 次のどちらかの方法を使用することでイベントハンドラに関数を代入することができます。 1. document.form1.colorButton.onclick=setBGColor 2. <INPUT NAME="colorButton" TYPE="button" VALUE="Change background color" onClick="setBGColor()"> 上記の変数 setBGColor を作成することは次の関数を宣言することと同じようなことです。 function setBGColor() { document.bgColor='antiquewhite' } 関数を変数に代入することは関数を宣言することと似ていますが、異なる点もあります。 var setBGColor = new Function("...") のようにして関数を変数に代入すると、setBGColor は new Function() を用いて作成した関数への参照がその値であるような変数になります。 function setBGColor() {...} のようにして関数を作成すると、setBGColor は変数ではなく関数の名前になります。 関数を関数の中に入れ子にすることができます。内側の関数は外側の関数に対してプライベートになります。 内側の関数には外側の関数の文からしかアクセスできません。 内側の関数は外側の関数の引数や変数を使用できます。外側の関数は内側の関数の引数や変数を使用できません。 ***Math オブジェクト 定義済みの Math オブジェクトには数学的な定数や関数を実現するプロパティやメソッドがあります。例えば、Math オブジェクトの PI プロパティは円周率の値 (3.141...) を表します。これはアプリケーションでは次のように使用します。 Math.PI 同様に、標準的な数学関数が Math のメソッドになっています。これは三角関数、対数関数、指数関数などがあります。例えば、三角関数のサインを使用したい場合は次のように書きます。 Math.sin(1.56) Math の三角関数のメソッドはすべてラジアンの引数をとります。 次の表で Math オブジェクトのメソッドを簡単に説明します。 |メソッド|説明| |abs|絶対値| |sin, cos, tan|標準的な三角関数。引数はラジアン| |acos, asin, atan, atan2|逆三角関数。ラジアンの値を返す| |exp, log|指数関数と自然対数。底は e| |ceil|引数以上の整数のうち、最小のものを返す| |floor|引数以下の整数のうち、最大のものを返す| |min, max|2 つの引数のうち、大きいもの、小さいものをそれぞれ返す| |pow|累乗。第 1 引数は底、第 2 引数は指数| |random|0 から 1 までの乱数を返す| |round|引数を直近の整数に丸める| |sqrt|平方根| 他の多くのオブジェクトとは異なり、決して自分用の Math オブジェクトを作成してはいけません。常に定義済みの Math オブジェクトを使用してください。 ***Number オブジェクト Number には、最大値、非数、無限大といった数値定数を表すプロパティがあります。これらのプロパティの値を変更することはできません。これらは次のように使用します。 biggestNum = Number.MAX_VALUE smallestNum = Number.MIN_VALUE infiniteNum = Number.POSITIVE_INFINITY negInfiniteNum = Number.NEGATIVE_INFINITY notANum = Number.NaN 常に上記のようにして定義済みの Number オブジェクトのプロパティを参照します。自分で作成した Number オブジェクトのプロパティとして参照するのではありません。 次の表では Number オブジェクトのプロパティについて簡単に説明します。 |プロパティ|説明| |MAX_VALUE|最大の表現可能な値| |MIN_VALUE|最小の表現可能な値| |NaN|特殊な "not a number"（非数）の値| |NEGATIVE_INFINITY|特殊な負の無限大。オーバフロー時に返される| |POSITIVE_INFINITY|特殊な正の無限大。オーバフロー時に返される| Number のプロトタイプは Number オブジェクトから情報を様々な形で取り出すメソッドを備えています。次の表では Number.prototype のメソッドについて簡単に説明します。 |メソッド|説明| |toExponential|数値を指数表示の文字列にして返す| |toFixed|数値を固定小数点表示の文字列にして返す| |toPrecision|数値を指定した精度の固定小数点表示の文字列にして返す| |toSource|指定した Number オブジェクトをオブジェクトリテラルにして返す。この値を利用して新しいオブジェクトを作成できる。Object.toSource メソッドを上書きする| |toString|指定したオブジェクトを文字列にして返す。Object.toString メソッドを上書きする| |valueOf|指定したオブジェクトのプリミティブ値を返す。Object.valueOf メソッドを上書きする| ***RegExp オブジェクト RegExp オブジェクトを用いることで正規表現が使用できるようになります。これは第 4 章の 正規表現 で説明しています ***String オブジェクト String オブジェクトにはプロパティが 1 つあります。それは length で、これは文字列中の文字の数を表します。例えば、次のコードは x に 13 という値を代入します。"Hello, World!" は 13 文字だからです。 mystring = "Hello, World!" x = mystring.length String オブジェクトには 2 種類のメソッドがあります。これは、substring や toUpperCase のような、その文字列そのものを変形させたものを返すものと、bold や link のような、その文字列を HTML として整形したものを返すものです。 例えば先の例を流用すると、mystring.toUpperCase() も "hello, world!".toUpperCase() も、"HELLO, WORLD!" という文字列を返します。 substring メソッドは 2 つの引数をとり、その 2 つの引数の間の文字列のサブセットを返します。先の例を流用すると、mystring.substring(4, 9) は "o, Wo" という文字列を返します。詳しくは コア JavaScript リファレンス の String オブジェクトの substring メソッドを参照してください。 String には自動的に HTML に整形するメソッドも多くあります。これは太字のテキストを生成する bold や、ハイパーリンクを生成する link などがあります。例えば、link メソッドを用いてある架空の URL へのハイパーリンクを作成するには次のようにします。 mystring.link("http://www.helloworld.com") 次の表で String オブジェクトのメソッドについて簡単に説明します。 |メソッド|説明| |anchor HTML の名前付きアンカを作成する。 |big, blink, bold, fixed, italics, small, strike, sub, sup HTML の整形済み文字列を作成する。 |charAt, charCodeAt 文字列中の指定した位置の文字または文字コードを返す。 |indexOf, lastIndexOf|文字列中の指定した部分文字列の位置や指定した部分文字列の最後の位置をそれぞれ返す| |link|HTML のハイパーリンクを作成する| |concat|2 つの文字列を連結し、新しい文字列を返す| |fromCharCode|指定した Unicode 値の連続から文字列を構成する。これは String クラスのメソッドであり、String インスタンスのものではない| |split|String オブジェクトを文字列の配列に分配する。文字列を部分文字列に分割することで行う。 |slice|文字列から一部分を抽出し、新しい文字列を返す。 |substring, substr|文字列の指定したサブセットを返す。開始および終了のインデックス、または開始のインデックスおよび長さのいずれかを指定する| |match, replace, search|正規表現を取り扱う| |toLowerCase, toUpperCase|文字列をすべて小文字に、またはすべて大文字にしてそれぞれ返す| 文字列リテラルは String オブジェクトとは別物 String オブジェクトは文字列のプリミティブデータ型のラッパです。文字列リテラルと String オブジェクトを混同してはいけません。例えば、次のコードでは文字列リテラルの s1 と String オブジェクトの s2 を作成します。 s1 = "foo" // 文字列リテラルの値を作成 s2 = new String("foo") // String オブジェクトを作成 文字列リテラルの値でなら、String オブジェクトのどんなメソッドでも呼び出すことができます。JavaScript が自動的に文字列リテラルを一時的な String オブジェクトに変換し、メソッドを呼び出し、その一時的な String オブジェクトを破棄するのです。String.length プロパティを文字列リテラルで使うこともできます。 特に String オブジェクトを使う必要がない場合は文字列リテラルを使うようにしてください。String オブジェクトは直観的ではない挙動をとることがあるからです。次の例をご覧ください。 s1 = "2 + 2" // 文字列リテラルの値を作成 s2 = new String("2 + 2")// String オブジェクトを作成 eval(s1) // 数値 4 を返す eval(s2) // 文字列 "2 + 2" を返す 2011-09-21T15:08:38+09:00 1316585318 https://w.atwiki.jp/0x0b/pages/98.html [[Mozilla JavaScript>js_about_04]]の続き #contents **関数 ***関数の定義(Defining Functions) 関数の定義は以下の関数のキーワードからなります。 関数の名前。 その関数への引数のリスト。丸括弧でくくり、コンマで区切る。 その関数を定義する JavaScript の文。波括弧 {} でくくる。関数内の文はそのアプリケーション内で定義された他の関数を呼び出すことができる。 簡単な例 例えば、次のコードは square という名前の簡単な関数を定義します。 function square(number) { return number * number; } 関数 square は引数を 1 つとり、その名前は number です。この関数は、その引数の 2 乗を返すように指示する 1 つの文からなります。return 文は関数が返す値を指定します。 return number * number プリミティブなパラメータは値渡しで関数に渡されます。つまり、その値は関数に渡されますが、その関数がそのパラメータの値を変更しても、この変更はグローバル（のパラメータの値）や関数の呼び出し元（のパラメータの値）には影響を与えません。 オブジェクト（すなわち 非プリミティブ値、例えば配列やユーザ定義オブジェクトなど）をパラメータとして渡すと、そのオブジェクトへの参照が関数に渡されます。つまり、その関数がそのオブジェクトのプロパティを変更した場合、その変更はその関数外でも有効です。次の例をご覧ください。 function myFunc(theObject) { theObject.make="Toyota"; } var mycar = {make:"Honda", model:"Accord", year:1998}; var x=mycar.make; // Honda を返す myFunc(mycar); var y=mycar.make; // Toyota を返す（プロパティがその関数で変更されている） 新（複写した）オブジェクトのパラメータに代入しても、呼び出し元には影響がないことに注意してください。 function myFunc(theObject) { theObject = {make:"Ford", model:"Focus", year:2006}; } var mycar = {make:"Honda", model:"Accord", year:1998}; var x=mycar.make; // Honda を返す myFunc(mycar); var y=mycar.make; // やはり Honda を返す 条件付きの関数定義 ある条件に基づいて関数を定義することもできます。例えば、次の関数の定義をご覧ください。 if (num == 0) { function myFunc(theObject) { theObject.make="Toyota" } } 変数 num が 0 に等しい場合のみ myFunc という関数が定義されます。num が 0 に等しくない場合はその関数は定義されず、その関数を実行しようとしても失敗します。 関数式 関数は式の中で定義することもできます。これは関数式と言います。一般的にこのような関数は無名です。名前を付けなくてもいいのです。例えば、関数 square は次のように定義できます。 var square = function(number) {return number * number}; この方法はある関数を別の関数の引数として渡すときに便利です。次の例では map 関数を定義し、第 1 パラメータとして無名関数を指定して呼び出します。 function map(f,a) { var result=new Array; for (var i = 0; i != a.length; i++) result[i] = f(a[i]); return result; } 次の呼び出し map(function(x) {return x * x * x}, [0, 1, 2, 5, 10]); は、[0, 1, 8, 125, 1000] を返します。 関連項目 ここで述べた関数の定義に加え、Function オブジェクト を定義することもできます。 メソッドとは、あるオブジェクトに結びつけられた関数です。オブジェクトやメソッドについては 第 8 章：オブジェクトの使用 でさらに知ることができます。 ***関数の呼び出し(Calling Functions) 関数を定義してもその関数は自動的に実行されるわけではありません。関数を定義するということは単に関数に名前を付け、その関数が呼び出されたときに何をするかを指定することです。関数の呼び出しとは、実際には指定したパラメータを用いて指定した動作を実行するということです。例えば、関数 square を定義した場合、次のようにしてそれを呼び出すことができます。 square(5) この文は 5 という引数とともに関数を呼び出します。関数はその関数の文を実行し、25 という値を返します。 関数の引数は文字列や数値に限られているということはありません。オブジェクト全体を関数に渡すこともできます。show_props 関数（オブジェクトとプロパティ で定義）はオブジェクトを引数にとる関数の例です。 関数は再帰的にすることもできます。つまりある関数がその関数自身を呼び出すこともできるということです。例えば、ここに階乗を計算する関数を示します。 function factorial(n) { if ((n == 0) || (n == 1)) return 1; else { var result = (n * factorial(n-1) ); return result; } } 1 から 5 までの階乗の計算は次のようになります。 a=factorial(1); // 1 を返す b=factorial(2); // 2 を返す c=factorial(3); // 6 を返す d=factorial(4); // 24 を返す e=factorial(5); // 120 を返す ***argumentオブジェクトの仕様(Using the arguments object) 関数の引数は配列のようなオブジェクトで管理されます。関数内では、次のようにして渡された引数を指すことができます。 arguments[i] ここで i は引数の順序を表す数を指します。これは 0 から始まります。関数に渡された第 1 引数は arguments[0] となります。引数のトータルの数は arguments.length で示されます。 arguments オブジェクトを使用すると、宣言時の仮引数の数よりも多くの引数を使って関数を呼び出すことができます。これはその関数に渡す引数の数が前もってわかっていない場合に役立ちます。arguments.length を使用することで実際にその関数に渡された引数の数を特定することができます。また、arguments オブジェクトを使用することで各引数を扱うことができます。 例えば、複数の文字列を連結する関数を考えます。この関数の仮引数は、連結するアイテムを区切るのに用いる文字列のみです。この関数は次のように定義されています。 function myConcat(separator) { var result = ""; // リストを初期化する // 引数について繰り返し for (var i = 1; i < arguments.length; i++) { result += arguments[i] + separator; } return result; } この関数に引数をいくつも渡すことができます。そして各引数を文字列のリストに連結します。 // "red, orange, blue, " を返す myConcat(", ", "red", "orange", "blue"); // "elephant; giraffe; lion; cheetah; " を返す myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // "sage. basil. oregano. pepper. parsley. " を返す myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); さらなる情報については、コア JavaScript リファレンスの Function オブジェクト をご覧ください。 JavaScript 1.3 以前のバージョン arguments オブジェクトは Function オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。 functionName.arguments[i] ***定義済み関数(Predefined Functions) JavaScript にはトップレベルの定義済み関数がいくつかあります。 -eval -isFinite -isNaN -parseInt と parseFloat -Number と String -encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能） ***eval 関数 eval 関数は JavaScript のコードの文字列を特定のオブジェクトを参照することなく評価します。eval の構文は次のとおりです。 eval(expr) ここで expr は評価される文字列です。 文字列が式を表している場合は eval はその式を評価します。また、1 つ以上の JavaScript の文を表している場合は eval はその式を実行します。eval のコードのスコープは呼び出し元コードのスコープと同じです。演算式を評価するために eval を呼び出さないでください。JavaScript は自動的に演算式を評価します。 ***isFinite 関数 isFinite 関数は引数を評価し、その引数が有限数であるかどうかを決定します。isFinite の構文は次のとおりです。 isFinite(number) ここで number は評価する数値です。 引数が NaN、正の無限大、または負の無限大である場合、このメソッドは false を返し、そうでない場合は true を返します。 次のコードはクライアントの入力をチェックし、それが有限数であるかどうかを決定します。 if(isFinite(ClientInput)) { /* 適当な処理 */ } ***isNaN 関数 isNaN 関数は引数を評価し、その引数が "NaN"（not a number; 非数）であるかどうかを決定します。isNaN の構文は次のとおりです。 isNaN(testValue) ここで testValue は評価したい値です。 parseFloat および parseInt 関数は非数値を評価したときに "NaN" を返します。isNaN は "NaN" が渡された場合は true を、そうでない場合は false をそれぞれ返します。 次のコードは floatValue を評価し、それが数値であるかを決定し、その結果に応じてプロシージャを呼び出します。 floatValue=parseFloat(toFloat) if (isNaN(floatValue)) { notFloat() } else { isFloat() } ***parseInt および parseFloat 関数 2 つの「パース」関数、parseInt および parseFloat は、引数に文字列が与えられたときに数値を返します。 parseFloat の構文は次のとおりです。 parseFloat(str) parseFloat はその引数である str という文字列をパースし、浮動小数点数を返そうとします。符号（+ または -）、数字 (0-9)、小数点、または指数以外の文字に出くわすと、そこまでの値を返し、その文字とその後に続くすべての文字を無視します。最初の文字が数に変換できない場合は "NaN"（not a number; 非数）を返します。 parseInt の構文は次のとおりです。 parseInt(str [, radix]) parseInt はその第 1 引数である str という文字列をパースし、指定した radix（基数）の整数を返そうとします。radix はオプション的な第 2 引数です。例えば、10 という基数では 10 進数に変換し、8 では 8 進数、16 では 16 進数というように変換します。10 より大きな基数ではアルファベットで 9 より大きい数を表します。例えば 16 進数（基数 16）では A から F が使用されます。 parseInt は指定した基数での数値ではない文字に出くわすと、その文字とその後に続くすべての文字を無視し、それまでにパースした整数の値を返します。最初の文字が指定した基数の数に変換できない場合は "NaN" を返します。parseInt 関数は文字列を切り捨てて整数の値にします。 ***Number および String 関数 Number および String 関数はオブジェクトを数値や文字列に変換します。これらの関数の構文は以下のとおりです。 Number(objRef) String(objRef) ここで objRef はオブジェクト参照を表します。 次の例では Date オブジェクトを理解できる文字列に変換します。 D = new Date (430054663215) // 次の文字列が返される // "Thu Aug 18 04:37:43 GMT-0700 (Pacific Daylight Time) 1983" x = String(D) ***escape および unescape 関数 escape および unescape 関数は文字列をエンコードしたりデコードしたりします。escape 関数は ISO Latin 文字セットで表された引数の 16 進エンコーディングを返します。unescape は指定した 16 進エンコーディングの値に対する ASCII 文字列を返します。 これらの関数の構文は以下のとおりです。 escape(string) unescape(string) これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。 escape および unescape 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では encodeURI、decodeURI、encodeURIComponent および decodeURIComponent を使用してください。 ***クロージャの使用 JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。 objectName.propertyName オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、myCar という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに make、model、year という名前のプロパティをそれぞれ作成することができます。 myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; 配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして myCar オブジェクトのプロパティにアクセスすることができます。 myCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969; この手の配列は連想配列として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。 function show_props(obj, obj_name) { var result = ""; for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "\n"; return result; } 関数 show_props(myCar, "myCar") を呼び出すと以下の結果が返されます。 myCar.make = Ford myCar.model = Mustang myCar.year = 1969 **オブジェクトの使用 ***オブジェクトとプロパティ JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。 objectName.propertyName オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、myCar という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに make、model、year という名前のプロパティをそれぞれ作成することができます。 myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; 配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして myCar オブジェクトのプロパティにアクセスすることができます。 myCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969; この手の配列は連想配列として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。 function show_props(obj, obj_name) { var result = ""; for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "\n"; return result; } 関数 show_props(myCar, "myCar") を呼び出すと以下の結果が返されます。 myCar.make = Ford myCar.model = Mustang myCar.year = 1969 ***新しいオブジェクトの作成 JavaScript には多くの定義済みオブジェクトがあります。さらに、自分でオブジェクトを作り出すことができます。JavaScript 1.2 以降では、オブジェクト初期化子を用いてオブジェクトを作成できます。もう 1 つの方法として、まずコンストラクタ関数を作成し、それからその関数と new 演算子を用いてオブジェクトのインスタンスを作成することもできます。 オブジェクト初期化子の使用 コンストラクタ関数の使用 オブジェクトのプロパティのインデックス付け あるオブジェクトの種類に対するプロパティの定義 メソッドの定義 this を用いたオブジェクト参照 ゲッタとセッタの定義 プロパティの削除 ***オブジェクト初期化子の使用 コンストラクタ関数を使用してオブジェクトを作成する方法だけではなく、オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子を使うことはリテラル表示を用いてオブジェクトを作成するということです。「オブジェクト初期化子」は C++ でも同じ意味で使用されている用語です。 オブジェクト初期化子を使用したオブジェクトの構文は次のとおりです。 var obj = { property_1: value_1, // property_# は識別子でもよい 2: value_2, // あるいは数値でもよい ..., "property_n": value_n }; // あるいは文字列でもよい ここで、obj は新しいオブジェクトの名前を、各 property_i は識別子（名前、数値、文字列リテラルのいずれか）を、各 value_i はその値を property_i に代入する式をそれぞれ表しています。obj および代入部分はなくてもかまいません。このオブジェクトを別の場所で参照する必要がないのであれば変数に代入する必要はありません。（文が期待されているところにオブジェクトリテラルを置く場合、リテラルを丸括弧で囲み、ブロック文と間違われないようにする必要があるかもしれません。） トップレベルのスクリプトでオブジェクト初期化子を使用してオブジェクトを作成した場合、JavaScript はオブジェクトリテラルを含む式を評価するたびにそのオブジェクトを解釈します。さらに、関数内で使用された初期化子はその関数が呼び出されるたびに作成されます。 次の文は、式 cond が true の場合かつその場合に限り、あるオブジェクトを作成し、それを変数 x に代入します。 if (cond) x = {hi:"there"}; 次の例は 3 つのプロパティを持つ myHonda を作成します。engine プロパティは自らもプロパティを持つオブジェクトでもあることに注意してください。 myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}}; オブジェクト初期化子を使用して配列を作成することもできます。配列リテラル を参照してください。 JavaScript 1.1 以前ではオブジェクト初期化子を使用することはできません。コンストラクタ関数を使用するか、他のオブジェクトが備えているそのような用途の関数を使用しないとオブジェクトを作成できません。コンストラクタ関数の使用 をご覧ください。 ***コンストラクタ関数の使用 もう 1 つの方法として、次の 2 つのステップでオブジェクトを作成することができます。 コンストラクタ関数を書くことでオブジェクトの種類を定義する。 new を用いてそのオブジェクトのインスタンスを作成する。 オブジェクトの種類を定義するために、その名前、プロパティ、メソッドを定義する関数を作成する必要があります。例えば、車についてのオブジェクトの種類を作成したいとします。そしてこの種類のオブジェクトに car という名前を付け、make、model、および year というプロパティを持たせたいとします。こうするためには次のような関数を書きます。 function car(make, model, year) { this.make = make; this.model = model; this.year = year; } 関数に渡された値に基づいてオブジェクトのプロパティに値を代入するために this を使用しています。 すると、次のようにして mycar というオブジェクトを作成することができるようになります。 mycar = new car("Eagle", "Talon TSi", 1993); この文は mycar を作成し、そのプロパティ用に指定した値を代入します。その結果、mycar.make の値は "Eagle" という文字列、mycar.year は 1993 という整数というようになります。 new を呼び出すことで car オブジェクトをいくらでも作ることができます。 kenscar = new car("Nissan", "300ZX", 1992); vpgscar = new car("Mazda", "Miata", 1990); それ自身別のオブジェクトであるというようなプロパティを持つオブジェクトを作ることができます。例えば、次のように person というオブジェクトを定義するとします。 function person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } そして、次のように 2 つの新しい person オブジェクトのインスタンスを作成します。 rand = new person("Rand McKinnon", 33, "M"); ken = new person("Ken Jones", 39, "M"); 次のようにして、car の定義を書き換えて、person オブジェクトをとる owner プロパティを持たせることができます。 function car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; } 新しいオブジェクトのインスタンスを作成するために、次のようにします。 car1 = new car("Eagle", "Talon TSi", 1993, rand); car2 = new car("Nissan", "300ZX", 1992, ken); 新しいオブジェクトの作成時に文字列リテラルや整数値を渡す代わりに、上記の文ではオブジェクト rand および ken を所有者を表す引数として渡しています。car2 の所有者の名前を知りたい場合は次のプロパティにアクセスすることで可能になります。 car2.owner.name 以前に定義したオブジェクトにいつでもプロパティを追加できることに注意してください。例えば次の文 car1.color = "black" はプロパティ color を car1 に追加し、それに "black" という値を代入します。しかしながら、この方法では他のどのオブジェクトにも影響を与えません。同じ種類の全オブジェクトに新しいプロパティを追加するには、そのプロパティを car というオブジェクトの種類の定義に追加する必要があります。 ***オブジェクトのプロパティのインデックス付け JavaScript 1.0 では、オブジェクトのプロパティを、そのプロパティ名や順序のインデックスで参照できます。しかしながら、JavaScript 1.1 以降では、最初にプロパティをその名前で定義すると、常にその名前で参照しなければならず、また、最初にプロパティをインデックスで定義すると、常にそのインデックスで参照しなければなりません。 先の Car というオブジェクトの種類の例のようにコンストラクタ関数を用いてオブジェクトとそのプロパティを作成したとき、また、それぞれのプロパティを明示的に定義したとき（例：myCar.color = "red"）に、これは適用されます。そのため、myCar[5] = "25 mpg" のように、最初にインデックスを用いてオブジェクトのプロパティを定義した場合、myCar[5] のようにそのプロパティを後から参照できるようになります。 このルールの例外は、forms 配列のように HTML から反映されたオブジェクトです。これらの配列内のオブジェクトは、その順番を表す数（文書内のどこにあるかに基づく）か、またはその名前（定義されている場合）のどちらかで常に参照できます。例えば、文書内の 2 番目の <FORM> タグが "myForm" という NAME 属性を持っている場合、document.forms[1] や document.forms["myForm"] や document.myForm とすることでそのフォームを参照できます。 ***あるオブジェクトの種類に対するプロパティの定義 prototype プロパティを用いて、定義済みのオブジェクトの種類にプロパティを追加することができます。この方法では、指定した種類のすべてのオブジェクトで共有されるプロパティを定義することになります。そのオブジェクトのあるインスタンス 1 つだけということではありません。次のコードは color プロパティを car という種類の全オブジェクトに追加し、値をオブジェクト car1 の color プロパティに代入します。 car.prototype.color=null; car1.color="black"; 詳しくは コア JavaScript リファレンス 内の Function オブジェクトの prototype プロパティ を参照してください。 ***メソッドの定義 メソッドとはあるオブジェクトに結びつけられた関数のことです。メソッドは、通常の関数の定義と同じ方法で定義します。既存のオブジェクトに関数を結びつけるには次の構文を使用します。 object.methodname = function_name ここで、object は既存のオブジェクトを、methodname はメソッドに割り当てる名前を、function_name は関数の名前をそれぞれ表しています。 すると、次のようにしてオブジェクトのコンテキストでそのメソッドを呼び出すことができます。 object.methodname(params); オブジェクトのコンストラクタ関数にメソッドの定義を含めることで、あるオブジェクトの種類についてのメソッドを定義することができます。例えば、以前に定義した car オブジェクトのプロパティを整形して表示する関数を定義します。 function displayCar() { var result = "A Beautiful " + this.year + " " + this.make + " " + this.model; pretty_print(result); } pretty_print は水平方向の罫線と文字列を表示する関数です。this を使用してそのメソッドを抱えているオブジェクトを参照しています。 次の文 this.displayCar = displayCar; をオブジェクトの定義に加えることで、この関数を car のメソッドにすることができます。そうすると、car の完全な定義は次のようになります。 function car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; this.displayCar = displayCar; } すると、次のようにして各オブジェクトについて displayCar メソッドを呼び出すことができます。 car1.displayCar() car2.displayCar() ***this を用いたオブジェクト参照 JavaScript にはカレントオブジェクトを参照するメソッド内で使用できる特殊なキーワード、this があります。例えば、あるオブジェクトの value プロパティの妥当性を確認する validate という関数があるとします。関数にはそのオブジェクトと、上限および下限の値を渡します。 function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) alert("Invalid Value!"); } 各フォーム要素の onchange イベントハンドラにおいて validate を呼び出します。this を使うことで [[form]] 要素を渡すことができます。次の例をご覧ください。 <input type="text" name="age" size="3" onChange="validate(this, 18, 99)"> 一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。 form プロパティと組み合わせることで、this はカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onclick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。 <form name="myForm"> <p><label>Form name:<input type="text" name="text1" value="Beluga"></label> <p><input name="button1" type="button" value="Show Form Name" onclick="this.form.text1.value=this.form.name"> </p> </form> ***ゲッタとセッタの定義 ゲッタはある特定のプロパティの値を取得するメソッドのことです。セッタはある特定のプロパティの値をセットするメソッドです。どの定義済みコアオブジェクトでも、また、新しいプロパティの追加をサポートしているユーザ定義オブジェクトでゲッタとセッタを定義することができます。ゲッタとセッタの定義にはオブジェクトリテラル構文を使用します。 以下の JS シェルセッションでは、ユーザ定義オブジェクト o についてゲッタとセッタがどう機能するかを説明します。JS シェル とは JavaScript コードをバッチモードで、またはインタラクティブにテストすることができる、開発者向けのアプリケーションのことです。 o オブジェクトのプロパティは以下のとおりです。 o.a - 数値 o.b - o.a に 1 を加えて返すゲッタ o.c - o.a の値にその値の 1/2 の値をセットするセッタ js> o = new Object; [object Object] js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}}; [object Object] js> o.a 7 js> o.b 8 js> o.c = 50 js> o.a 25 js> この JavaScript シェルセッションは、ゲッタとセッタは Date プロトタイプを拡張して定義済み Date クラスの全インスタンスに year プロパティを追加する様子を表しています。Date クラスの既存の getFullYear および setFullYear メソッドを使用して year プロパティのゲッタとセッタをサポートします。 これらの文は year プロパティに対するゲッタとセッタを定義します。 js> var d = Date.prototype; js> d.__defineGetter__("year", function() { return this.getFullYear(); }); js> d.__defineSetter__("year", function(y) { this.setFullYear(y); }); これらの文は Date オブジェクトでゲッタとセッタを使用しています。 js> var now = new Date; js> print(now.year); 2000 js> now.year=2001; 987617605170 js> print(now); Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 JavaScript 1.5 の開発期間中に getter = や setter = といった式を使用して新しいゲッタやセッタを既存のオブジェクトで定義するようになっていた時期がありました。この構文は現在は廃止予定であり、現行の JS 1.5 エンジンでは警告を発します。また、将来的には構文エラーになります。使用を避けるようにしてください 概要 原則的にゲッタとセッタは次のどちらかに属します。 オブジェクト初期化子 を用いて定義されたもの ゲッタやセッタを追加するメソッドを用いてオブジェクトに後から追加されたもの オブジェクト初期化子 を用いてゲッタやセッタを定義する際に必ずする必要があることは、ゲッタメソッドの先頭に get を、セッタメソッドの先頭に set をそれぞれ付けることです。セッタメソッドはパラメータ（セットする新しい値）を 1 つだけ受け取るようにしますが、もちろん、ゲッタメソッドはパラメータを受け取るようにしてはいけません。 o = { a:7, get b() { return this.a+1; }, set c(x) { this.a = x/2; } }; ゲッタもセッタも、__defineGetter__ および __defineSetter__ という 2 つの特別なメソッドを用いて、オブジェクト作成後にいつでもそのオブジェクトに追加することができます。両メソッドの第 1 パラメータにはそのゲッタやセッタの名前を文字列という形式で指定します。第 2 パラメータにはゲッタやセッタとして呼び出す関数を指定します。例として前の例の別バージョンを以下に示します。 o.__defineGetter__("b", function() { return this.a+1; }); o.__defineSetter__("c", function(x) { this.a = x/2; }); 2 つの形式のうちどちらを選択するかはあなたのプログラミングスタイルおよび目の前の課題次第です。プロトタイプの定義時に既にオブジェクト初期化子を使用しているのであれば、最初の形式を選択するのがよいでしょう。この形式はよりコンパクトかつ自然です。しかしながら、ゲッタやセッタを後から追加する必要がある場合、プロトタイプや特定のオブジェクトを書いていないため、第 2 の形式しか使用できません。第 2 の形式は JavaScript の動的性質をおそらく最もよく表しています。しかし、コードが読みにくく、また理解しにくくなることがあります。 Firefox 3.0 より前のバージョンではゲッタとセッタが DOM 要素に対してサポートされていません。古いバージョンの Firefox では例外を投げることなく失敗します。そのときに例外が必要であれば、HTMLElement のプロトタイプを変更し (HTMLElement.prototype.__define[SG]etter__)、例外を投げるようにして回避してください。 Firefox 3.0 では、定義済みのプロパティでゲッタとセッタを定義すると例外が投げられます。そのプロパティは事前に削除しておく必要があります。これは古いバージョンの Firefox には当てはまりません。 ***プロパティの削除 delete 演算子を用いることでプロパティを除去することができます。次のコードでプロパティの除去方法を示します。 // 新しいオブジェクト myobj を作成。2 つのプロパティ、a および b を持つ。 myobj = new Object; myobj.a = 5; myobj.b = 12; // a プロパティを除去。myobj には b プロパティだけが残っている。 delete myobj.a; delete を使用することでグローバル変数を削除することもできます。ただし、これは var キーワードを使用せずにその変数を宣言した場合のみです。 g = 17; delete g; さらなる情報については delete をご覧ください。 2011-09-21T15:07:18+09:00 1316585238 https://w.atwiki.jp/0x0b/pages/97.html [[Mozilla JavaScript>js_about_03]]の続き #contents **文 ***ブロック文(Block Statement) ブロック文は文をグループ化するのに用います。ブロックは波括弧のペアで区切ります。 { statement_1 statement_2 . . . statement_n } 例 ブロック文は一般に制御フロー文（例：if、for、while）で用いられます。 while (x < 10) { x++; } ここでは { x++; } がブロック文です。 重要：JavaScript にはブロックスコープがありません。ブロックを用いて導入された変数のスコープは、そのブロックがある関数やスクリプトになります。変数をセットする影響はそのブロックを越えて持続されます。つまり、ブロック文はスコープを持ち込まないということです。独立したブロックも構文的には正しいのですが、C や Java のブロックで果たされるような機能を期待しているのであれば、そのような機能は果たされないため、JavaScript で独立したブロックを使う必要はありません。 var x = 1; { var x = 2; } alert(x); // 2 を出力 ブロック内の var x 文はブロック前の var x 文と同じスコープ内であるため、この例では 2 が出力されます。C や Java では相当のコードは 1 を出力します。 ***条件文(Conditional Statements) 条件文は指定した条件が true ならば実行されるコマンドのセットです。JavaScript は if...else と switch の 2 つの条件文をサポートしています。 if...else 文 ある論理条件が true ならばある文を実行したいというときには if 文を使用してください。オプション的な else 節を使用すると、条件が false の場合にある文を実行することができます。if 文は次のように使用します。 if (condition) statement_1 [else statement_2] condition には true か false に評価される式が入ります。condition が true に評価された場合は statement_1 が実行され、そうでない場合は statement_2 が実行されます。statement_1 と statement_2 はどんな文でもかまいません。if 文をさらに入れ子にすることもできます。 次のように else if を使用して文を重ねることで複数の条件を順々にテストさせることができます。 if (condition) statement_1 [else if (condition_2) statement_2] ... [else if (condition_n_1) statement_n_1] [else statement_n] 複数の文を実行させるには、ブロック文 ({ ... }) を使用してその文をグループ化してください。一般に常にブロック文を使用するのが優れた方法です。特に if 文を入れ子にしたコードでは有効です。 if (condition) { statements_1 } else { statements_2 } 条件式では単純な代入は使わないようにしてください。コードをちらっと見たときに、代入を等価条件と見間違えるおそれがあるためです。例えば次のようなコードは使用しないでください。 if (x = y) { /* 正しいことをする */ } 条件式で代入を使う必要がある場合に一般的な方法として代入式をさらに括弧でくくるというものがあります。 if ((x = y)) { /* 正しいことをする */ } プリミティブな真偽値の true と false を Boolean オブジェクトの true や false という値と混同しないでください。undefined や、null、0、NaN、空文字列 ("") でないどんな値も、そして false という値を持つ Boolean オブジェクトを含むどんなオブジェクトも、条件文に通されると true に評価されます。 var b = new Boolean(false); if (b) // この条件は true に評価される 例 次の例では、関数 checkData は Text オブジェクトに含まれている文字数が 3 の場合に true を返し、そうでない場合はアラートを表示して false を返します。 function checkData() { if (document.form1.threeChar.value.length == 3) { return true; } else { alert("Enter exactly three characters. " + document.form1.threeChar.value + " is not valid."); return false; } } switch 文 switch 文を使うと、プログラムは式を実行し、式の値を case ラベルにマッチさせます。マッチすると、プログラムは結びつけられた文を実行します。switch 文は次のように使用します。 switch (expression) { case label_1: statements_1 [break;] case label_2: statements_2 [break;] ... default: statements_def [break;] } プログラムはまず式の値にマッチしたラベルを持つ case 節を探します。そしてコントロールをその節に移し、結びつけられた文を実行します。マッチしたラベルがない場合、プログラムはオプション的な default 節を探し、あった場合はその節にコントロールを移し、結びつけられた文を実行します。default 節がなかった場合、プログラムは switch 文の後に続く文を実行し続けます。慣例により、default 節は最後の節にします。しかしそうしなければいけないわけではありません。 各 case 節に結びつけられたオプション的な break 文は、一度マッチした文を実行したら switch から抜け、switch に続く文を実行し続けることを確実にするものです。break を省略した場合、その switch 文における次の文を実行し続けます。 例 次の例では、fruittype が "Bananas" に評価された場合、"Bananas" という場合にマッチし、それに結びつけられた文が実行されます。break に出くわすとプログラムは switch から抜け、switch の後に続く文を実行します。break を省略すると "Cherries" という場合の文も実行されます。 switch (fruittype) { case "Oranges": document.write("Oranges are $0.59 a pound.<br>"); break; case "Apples": document.write("Apples are $0.32 a pound.<br>"); break; case "Bananas": document.write("Bananas are $0.48 a pound.<br>"); break; case "Cherries": document.write("Cherries are $3.00 a pound.<br>"); break; case "Mangoes": case "Papayas": document.write("Mangoes and papayas are $2.79 a pound.<br>"); break; default: document.write("Sorry, we are out of " + fruittype + ".<br>"); } document.write("Is there anything else you'd like?<br>"); ***ループ文(Loop Statements) ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、break および continue 文をループ文の中で使うことができます。 さらに for...in 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。オブジェクト操作文 をご覧ください。 ループ文は以下のとおりです。 -for 文 -do...while 文 -while 文 -label 文 -break 文 -continue 文 ***for文 for ループは指定した条件が false に評価されるまで繰り返します。JavaScript の for ループは Java や C の for ループに似ています。for 文は次のように使用します。 for ([initialExpression]; [condition]; [incrementExpression]) statement for ループを実行すると以下のことが起こります。 1.初期化式 initialExpression があれば実行されます。この式は通常、1 つかそれ以上のループカウンタを初期化しますが、構文的にはある程度複雑な式も指定できます。また、この式は変数を宣言することもできます。 2.condition 式が評価されます。condition の値が true であればループ文が実行されます。condition が false の場合は for ループは終了します。condition 式が完全に省略されている場合、条件は true であると仮定されます。 3.statement が実行されます。複数の式を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。 4.更新式 incrementExpression があれば実行されます。そしてコントロールがステップ 2 に戻ります。 例 次の関数には、スクローリングリスト（複数選択できる Select オブジェクト）で選択されたオプションの数を数える for 文が含まれています。for 文では変数 i が宣言され、それが 0 に初期化されています。i が Select オブジェクトのオプションの個数より小さいかをチェックし、続く if 文を実行し、ループが 1 回りしたら i を 1 だけ増加させます。 <script type="text/javascript">//<![CDATA[ function howMany(selectObject) { var numberSelected = 0; for (var i = 0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected) numberSelected++; } return numberSelected; } //]]></script> <[[form]] name="selectForm"> <p> <strong>Choose some music types, then click the button below:</strong> <br/> <select name="musicTypes" multiple="multiple"> <option selected="selected">R&B</option> <option>Jazz</option> <option>Blues</option> <option>New Age</option> <option>Classical</option> <option>Opera</option> </select> </p> <p> <input type="button" value="How many are selected?" onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/> </p> </form> ***do...while 文 do...while 文は指定した条件が false に評価されるまで繰り返します。do...while 文は次のように使用します。 do statement while (condition); statement は条件がチェックされる前に一度実行されます。複数の文を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。condition が true の場合、その文が再び実行されます。毎回実行された後に条件がチェックされます。条件が false ときは実行が停止され、コントロールが do...while の後に続く文に渡されます。 例 次の例では do ループは最低 1 回は反復され、i が 5 より小さくなくなるまで反復されます。 do { i += 1; document.write(i); } while (i < 5); ***while 文 while 文は、指定した条件が true に評価される限り文を実行します。while 文は次のように使用します。 while (condition) statement 条件が false になるとループ内の statement の実行が停止し、ループの後に続く文にコントロールが渡されます。 ループの statement を実行する前に条件がテストされます。条件が true を返すと statement が実行され、再び条件がテストされます。条件が false を返すと、実行が停止され、while の後に続く文にコントロールが渡されます。 複数の文を実行するにはブロック文 ({ ... }) を用いて文をグループ化してください。 例 1 次の while ループでは n が 3 より小さい限り反復されます。 n = 0; x = 0; while (n < 3) { n++; x += n; } それぞれの反復で、ループは n をインクリメントし、その値を x に加えています。その結果、x と n は次の値をとります。 第 1 段階終了後：n = 1、x = 1 第 2 段階終了後：n = 2、x = 3 第 3 段階終了後：n = 3、x = 6 第 3 段階が完了すると条件 n < 3 が true ではなくなっているため、ループは終了します。 例 2 無限ループは避けてください。ループの条件が最終的には false になることを確認してください。そうしないとループが終了しなくなります。次の while ループ内の文は永久に実行されます。条件が決して false にならないためです。 while (true) { alert("Hello, world"); } ***label 文 label を使うと、そのプログラムのどこからでも参照できる、識別子を持った文を作ることができます。例えば、ラベルを使用してあるループに名前を付けると、break 文や continue 文を使用してプログラムがループを脱出するべきかそのまま実行を継続するべきかを示すことができます。 label 文は次のように使用します。 label : statement label の値は予約語でなければどんな JavaScript の識別子でも使用できます。ラベルを用いて名前を付ける statement はどんな文でも結構です。 例 この例では markLoop というラベルを用いて while ループに名前を付けています。 markLoop: while (theMark == true) doSomething(); } ***break 文 break 文 break 文は loop 文や switch 文、label 文から抜け出すために使用します。 break にラベルを使用しないと、最も内側にある while や do-while、for、switch から抜け、続く文にコントロールを移します。 break にラベルを使用すると、指定されたラベルの付いた文から抜けます。 break 文は次のように使用します。 break; break label; １番目の形式の構文は最も内側のループもしくは switch から抜けます。２番目の形式の構文は指定した label 文から抜けます。 例 次の例は、その値が theValue である要素のインデックスが見つかるまで、配列の要素について繰り返します。 for (i = 0; i < a.length; i++) { if (a[i] == theValue) break; } ***continue 文 continue 文は while 文、do-while 文、for 文、label 文をリスタートさせるために用います。 ラベルを用いずに continue を使用した場合、現在繰り返している最も内側にある while 文 do-while 文、for 文を終了し、次の反復の実行に移ります。break 文とは異なり、continue はループ全体の実行を終了しません。while ループでは条件比較部分に戻ります。for ループではインクリメントの式に移ります。 ラベルを用いて continue を使用した場合、label で指定されたループ文に移ります。 continue 文は次のように使用します。 continue continue label 例 1 次の例では、i の値が 3 のときに実行される continue 文を用いた while ループを示します。こうすることで n は順に 1、3、7、12 という値をとります。 i = 0; n = 0; while (i < 5) { i++; if (i == 3) continue; n += i; } 例 2 checkiandj というラベルの付いた文の中に checkj というラベルの付いた文があります。continue に出くわすと、プログラムは checkj の現在の反復を終了し、次の反復を始めます。continue に出くわすたびに、条件が false になるまで checkj を繰り返します。false が返されると checkiandj 文の残りを完了し、条件が false を返すまで checkiandj を繰り返します。false が返されると checkiandj に続く文が実行されます。 continue が checkiandj というラベルを持っているとプログラムは checkiandj 文の最初から続けます。 checkiandj : while (i < 4) { document.write(i + "<br/>"); i += 1; checkj : while (j > 4) { document.write(j + "<br/>"); j -= 1; if ((j % 2) == 0) continue checkj; document.write(j + " is odd.<br/>"); } document.write("i = " + i + "<br/>"); document.write("j = " + j + "<br/>"); } ***オブジェクト操作文(Object Manipulation Statements) JavaScript はオブジェクトの操作に for...in、for each...in および with 文を使用します。 for...in 文 for...in 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。for...in 文は次のように使用します。 for (variable in object) { statements } 例 次の関数は、あるオブジェクトとそのオブジェクトの名前を引数にとります。そしてそのオブジェクトの全プロパティに対して反復し、プロパティ名とその値のリストにした文字列を返します。 function dump_props(obj, obj_name) { var result = ""; for (var i in obj) { result += obj_name + "." + i + " = " + obj[i] + "<br>"; } result += "<hr>"; return result; } make および model というプロパティを持つ car というオブジェクトでは次のような結果が得られます。 car.make = Ford car.model = Mustang 配列 Array の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、for...in 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると for...in 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の for ループを使用したほうがいいでしょう。 for each...in 文 for each...in は JavaScript 1.6 で導入されるループ文です。これは for...in に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。 with 文 with 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。 with 文は次のように使用します。 with (object) { statements } 例 次の with 文では Math オブジェクトがデフォルトのオブジェクトに指定されています。with 文内の文は PI プロパティや cos および sin メソッドを参照していますが、オブジェクトは指定していません。JavaScript はこれらの参照は Math オブジェクトへのものであると想定します。 var a, x, y; var r = 10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI/2); } 注意：with 文を使うことでプログラムをより簡潔にすることができますが、with の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。Core JavaScript 1.5 Reference:Statements:with を参照してください。 ***コメント コメントはスクリプトの挙動を説明するメモに用います。コメントはインタプリタには無視されます。JavaScript は Java および C++ 形式のコメントをサポートしています。 1 行だけのコメントは 2 重のスラッシュ (//) から始まる。 複数行にまたがるコメントは /* から始まり */ で終わる。 例 以下に 2 つのコメントの例を示します。 // これは 1 行コメント。 /* これは複数行コメント。どんな長さでもかまわない。 書きたいことを何でもここに書ける。 */ ***例外処理文(Exception Handling Statements) throw 文を使用すると例外を投げることができます。また、try...catch 文を使用すると例外を処理することができます。 try...catch 文を使用して Java の例外を処理することもできます。この情報については JavaScript での Java の例外の処理 および Java と JavaScript との通信 をご覧ください。 throw 文 try...catch 文 例外の種類 JavaScript ではほとんどどんなオブジェクトでも投げることができます。とは言っても、必ずしもすべての投げられたオブジェクトが同等に作られているわけではありません。数値や文字列をエラーとして投げる方法はよく用いられますが、特にこの用途のために作られている例外の種類のうちのどれかを使用したほうがより効率的であることがよくあります。 ECMAScript の例外 -Error -EvalError -RangeError -ReferenceError -SyntaxError -TypeError -URIError DOM の例外 -DOMException -EventException -RangeException -... (?) -nsIXPCException (XPConnect) ***throw 文 throw 文は例外を投げるために使用します。例外を投げるときは、投げたい値からなる式を指定してください。 throw expression; 特定の型の式だけではなく、あらゆる式を投げることができます。下記のコードは様々な型の例外を投げています。 throw "Error2"; throw 42; throw true; throw {toString: function() { return "I'm an object!"; } }; 注意：例外を投げる際にオブジェクトを指定することができます。すると、catch ブロックでそのオブジェクトのプロパティを参照できるようになります。次の例では UserException という種類の myUserException というオブジェクトを作ります。また、このオブジェクトを throw 文で使用します。 // UserException という種類のオブジェクトを作成 function UserException (message) { this.message=message; this.name="UserException"; } // 文字列として使用されるとき（例：エラーコンソール上）に // 例外を整形する UserException.prototype.toString = function () { return this.name + ': "' + this.message + '"'; } // そのオブジェクトの種類のインスタンスを作成し、それを投げる throw new UserException("Value too high"); ***try...catch 文 try...catch 文はテストしたい文のブロックを指定し、さらに投げられるであろう例外に対する 1 つ以上の対処方法を指定します。例外が投げられると try...catch 文がそれを受け取ります。 try...catch 文は 1 つの try ブロックと 0 個以上の catch ブロックからなります。前者は 1 つ以上の文からなります。後者は try ブロックで例外が投げられた場合にどうするかを指定する文からなります。すなわち、成功させたい try ブロックと、失敗した場合にコントロールを渡す catch ブロックからなります。try ブロック内（もしくは try ブロック内から呼び出された関数内）のいずれかの文が例外を投げた場合、コントロールはすぐに catch ブロックに移ります。try ブロックで例外が投げられなかった場合は catch ブロックは飛ばされます。finally ブロックは try および catch ブロックが実行された後に実行されます。ただし try...catch 文の後に続く文より先に実行されます。 次の例では try...catch 文を使用しています。この例では渡された値に基づいて配列から月の名前を取り出す関数を呼び出します。値に対応する月の数字 (1-12) がなかったら、InvalidMonthNo という値を持つ例外が投げられ、catch ブロックの中の文は monthName という変数に unknown という値をセットします。 function getMonthName (mo) { mo=mo-1; // 月の数字を配列のインデックスに合わせる (1=Jan, 12=Dec) var months=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul", "Aug","Sep","Oct","Nov","Dec"); if (months[mo] != null) { return months[mo] } else { throw "InvalidMonthNo" } } try { // テストする文 monthName=getMonthName(myMonth) // 関数は例外を投げることがある } catch (e) { monthName="unknown" logMyErrors(e) // 例外オブジェクトをエラー処理部分に渡す } catch ブロック 単一の catch ブロックを使用すると、try ブロックで生じうるすべての例外を扱うことができます。また、扱う例外の種類によって catch ブロックをそれぞれに分けることもできます。 単一の catch ブロック try ブロックで投げられるいかなる例外にも対応したエラー処理コードを実行するには、try...catch 文で catch を 1 つ使用してください。 単一の catch ブロックは次のように使用します。 catch (catchID) { statements } catch ブロックは、throw 文で指定された値を持つ識別子（上記の構文における catchID）を指定します。この識別子を使用することで投げられた例外についての情報を得ることができます。JavaScript は catch ブロックに入るときにこの識別子を作成します。識別子は catch ブロックにいる間だけ持続します。つまり、catch ブロックの実行が終了するとその識別子はもう使えなくなります。 例えば、次のコードは例外を投げます。例外が生じるとコントロールが catch ブロックに移ります。 try { throw "myException" // 例外を生成 } catch (e) { // どんな例外も扱う文 logMyErrors(e) // 例外オブジェクトをエラー処理部分に渡す } 複数の catch ブロック 1 つの try 文に対して、複数の条件についての catch ブロックを使うことができます。そして、そのそれぞれがそれぞれの種類の例外を担当します。この場合、そのブロックで指定されている例外が投げられたときだけ、適切な条件の catch ブロックに入ることになります。すべての未指定の例外のために、すべての例外に対応した catch ブロックをその文の最後の catch ブロックとしてオプション的に設けることもできます。 例えば、次の関数は 3 つの別の関数（どこかで定義済み）を呼び出します。この関数はその引数が妥当であるかを確かめます。妥当性確認関数が確認対象の構成要素が妥当でないと決定した場合、その関数は 0 を返し、該当する例外を呼び出し元に投げさせます。 function getCustInfo(name, id, email) { var n, i, e; if (!validate_name(name)) throw "InvalidNameException" else n = name; if (!validate_id(id)) throw "InvalidIdException" else i = id; if (!validate_email(email)) throw "InvalidEmailException" else e = email; cust = (n + " " + i + " " + e); return (cust); } おのおのの条件の catch ブロックは適当な例外処理部分にコントロールを渡します。 try { // 関数は 3 つの例外を投げうる getCustInfo("Lee", 1234, "lee@netscape.com") } catch (e if e == "InvalidNameException") { // 不正な名前に対しての処理部分を呼び出す bad_name_handler(e) } catch (e if e == "InvalidIdException") { // 不正な ID に対しての処理部分を呼び出す bad_id_handler(e) } catch (e if e == "InvalidEmailException") { // 不正なメールアドレスに対しての処理部分を呼び出す bad_email_handler(e) } catch (e){ // 何が起きるかはわからないが、そのログをとる logError(e) } finally ブロック finally ブロックは、try および catch ブロックの実行が終わった後に実行される文からなります。ただし try...catch 文の後に続く文より前に実行されます。finally ブロックは例外が投げられても投げられなくても実行されます。例外が投げられた場合、finally ブロック内の文はたとえ例外処理をする catch ブロックがなくても実行されます。 finally ブロックを使用することで、例外発生時に適切にスクリプトを停止させることができます。例えば、スクリプトで使用していたリソースを解放する必要があるかもしれません。次の例ではファイルを開き、そのファイルを使用する文を実行します（サーバサイド JavaScript ではファイルにアクセスできます）。ファイルを開いている間に例外が投げられると、スクリプトが停止する前に finally ブロックがそのファイルを閉じます。 openMyFile(); try { writeMyFile(theData); // エラーを投げる可能性がある }catch(e){ handleError(e); // エラーを受け取り、それを処理する }finally { closeMyFile(); // 常にリソースを閉じる } try...catch 文のネスト 1 つ以上の try...catch 文を入れ子にすることができます。内側の try...catch 文に catch ブロックがない場合、囲んでいる try...catch 文の catch ブロックがマッチしているか確認されます。 2011-09-21T14:34:32+09:00 1316583272 https://w.atwiki.jp/0x0b/pages/96.html [[mozillaJavascript>js_about_02]]から続き #contents **正規表現の作成(Creating a Regular Expression) 正規表現の作成 正規表現は 2 つの方法で作ることができます。 -正規表現リテラルを使用する。 re = /ab+c/; 正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよりよいパフォーマンスが得られます。 -RegExp オブジェクトのコンストラクタ関数を呼び出す。 re = new RegExp("ab+c"); コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている場合や、パターンがわからない場合、ユーザが入力するなど、別のソースからパターンを取得する場合はコンストラクタ関数を使用してください。 ***正規表現パターンを書く(RegExp Pattern) 正規表現パターンは、/abc/ のような単純な文字、または /ab*c/ や /Chapter (\d+)\.\d*/ のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは 括弧で囲まれた部分文字列のマッチの使用 を参照してください。 単純なパターンの使用 単純なパターンは、直接マッチしている部分を見つけたい文字で構成されます。例えば、/abc/ というパターンは、実際に 'abc' という文字が一緒にその順で存在しているときにだけ、文字列中の文字の組み合わせにマッチします。"Hi, do you know your abc's?" や "The latest airplane designs evolved from slabcraft." といった文字列でのマッチは成功します。どちらの場合でも 'abc' という部分文字列にマッチします。"Grab crab" という文字列では 'abc' という部分文字列が含まれていないためマッチしません。 特殊文字の使用 1 つ以上の b を見つけたり、ホワイトスペースを見つけたりといった直接マッチより高度なマッチの検索では、パターンに特殊文字を使用します。例えば /ab*c/ というパターンでは 1 つの 'a' とその後ろに続く 0 個以上の 'b'（* は直前のアイテムの 0 回以上の出現を意味する）とそのすぐ後ろに続く 'c' からなる文字の組み合わせにマッチします。"cbbabbbbcdebc" という文字列ではこのパターンは 'abbbbc' という部分文字列にマッチします。 以下の表で正規表現で使用できる特殊文字とその意味を詳しく説明します。 |文字|意味| |\|次のうちのどちらか&br()通常は文字どおり扱われる文字に対して、次の文字は特殊であり、文字どおりに解釈すべきではないと指示する。例えば、/b/ は 'b' という文字にマッチする。b の前にバックスラッシュを置き、/\b/ とすると、その文字は単語の区切りにマッチすることを意味する特殊文字になる。&br()通常は特殊文字として扱われる文字に対して、次の文字は特殊ではなく、文字どおりに解釈すべきであると指示する。例えば、* は直前のアイテムの 0 回以上の出現にマッチさせることを意味する特殊文字である。つまり、例えば /a*/ は a の 0 文字以上の a へのマッチを意味する。* という文字そのものにマッチさせるには、その直前にバックスラッシュを置く。例えば、/a\*/ は 'a*' にマッチする| |^|入力の先頭にマッチする。複数行フラグが true にセットされている場合は、改行文字直後にもマッチする。 例えば、/^A/ は "an A" の 'A' にはマッチしないが、"An A" の最初の 'A' にはマッチする| |$|入力の末尾にマッチする。複数行フラグが true にセットされている場合は、改行文字直前にもマッチする。 例えば、/t$/ は "eater" の 't' にはマッチしないが、"eat" の 't' にはマッチする| |*|直前の文字の 0 回以上の繰り返しにマッチする。 例えば、/bo*/ は "A ghost booooed" の 'boooo' や "A bird warbled" の 'b' にはマッチするが、"A goat grunted" ではマッチしない| |+|直前の文字の 1 回以上の繰り返しにマッチする。{1,} と同等。 例えば、/a+/ は "candy" の 'a' や、"caaaaaaandy" のすべての a にマッチする| |?|直前の文字の 0 回か 1 回の繰り返しにマッチする。&br()例えば、/e?le?/ は "angel" の 'el' や "angle" の 'le' にマッチする。*、+、?、{} といった量指定子の直後に使用した場合、その量指定子をスキップ優先（最小回数にマッチ）にする。&br()これはデフォルトとは逆であり、デフォルトは繰り返し優先（最大回数にマッチ）。例えば、/\d+/ は非グローバルで "123abc" の "123" にマッチするが、/\d+?/ の場合、"1" だけにマッチする。&br()先読み表現内でも使用できるが、これはこの表の x(?=y) および x(?!y) にて説明| |.|小数点は改行文字以外のどの 1 文字にもマッチする。 例えば、/.n/ は "nay, an apple is on the tree" の 'an' や 'on' にはマッチするが、'nay' にはマッチしない| |(x)|'x' にマッチし、マッチしたものを記憶しておく。これはキャプチャする括弧と呼ぶ。 例えば、/(foo)/ は "foo bar" の 'foo' にマッチし、これを記憶する。マッチした部分文字列は結果として生成される配列の要素 [1], ..., [n] から参照できる| |(?:x)|'x' にマッチするが、マッチしたものは記憶しない。これはキャプチャしない括弧と呼ぶ。マッチした部分文字列は先程のような配列の要素 [1], ..., [n] から参照することはできない| |x(?=y)|'x' に 'y' が続く場合のみ 'x' にマッチする。例えば、 /Jack(?=Sprat)/ は 'Jack' の後ろに 'Sprat' が続く場合のみ 'Jack' にマッチする。/Jack(?=Sprat｜Frost)/ は 'Jack' の後ろに 'Sprat' または 'Frost' が続く場合のみ 'Jack' にマッチする。しかしながら、'Sprat' も 'Frost' もマッチの結果には現れない| |x(?!y)|'x' に 'y' が続かない場合のみ 'x' にマッチする。例えば、/\d+(?!\.)/ はある数に小数点が続かない場合のみその数にマッチする。正規表現 /\d+(?!\.)/.exec("3.141") は 141 にはマッチするが 3.141 にはマッチしない| |x｜y|'x' または 'y' にマッチする。 例えば、/green｜red/ は "green apple" の "green' や "red apple" の 'red' にマッチする| |{n}|n には正の整数が入る。直前の文字がちょうど n 回出現するものにマッチする。 例えば、/a{2}/ は "candy" の 'a' にはマッチしないが、"caandy" の すべての a にマッチする。また、"caaandy" の最初の 2 つの a にマッチする| |{n,}|n には正の整数が入る。直前の文字が少なくとも n 回出現するものにマッチする。 例えば、/a{2,}/ は "candy" の 'a' にはマッチしないが、"caandy" や "caaaaaaandy" の すべての a にマッチする| |{n,m}|n および m には正の整数が入る。直前の文字が少なくとも n 回、多くとも m 回出現するものにマッチする。 例えば、/a{1,3}/ は "cndy" ではマッチせず、"candy" の 'a'、"caandy" の最初の 2 つの a、"caaaaaaandy" の最初の 3 つの a にマッチする。"caaaaaaandy" では元の文字列に a が 4 つ以上あるが、マッチするのは "aaa" であることに注意| |[xyz]|文字の集合。囲まれた文字のどれにでもマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、[abcd] は [a-d] と同じ。これは "brisket" の 'b' や "city" の 'c' にマッチする| |[^xyz]|文字の集合の否定または補集合。角括弧で囲まれていないものにマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、[^abc] は [^a-c] と同じ。これは "brisket" の 'r' や "chop" の 'h' にマッチする| |[\b]|後退にマッチする。（\b と混同してはならない。）| |\b|スペースや改行文字のような単語の区切りにマッチする。（[\b] と混同してはならない。） 例えば、/\bn\w/ は "noonday" の 'no' にマッチする。また、/\wy\b/ は "possibly yesterday" の 'ly' にマッチする| |\B|単語の区切り以外の文字にマッチする。 例えば、/\w\Bn/ は "noonday" の 'on' にマッチする。また、/y\B\w/ は "possibly yesterday" の 'ye' にマッチする| |\cX|X には制御文字が入る。文字列中の制御文字にマッチする。 例えば、/\cM/ は文字列中の control-M にマッチする| |\d|数字にマッチする。[0-9] と同等。 例えば、/\d/ や /[0-9]/ は "B2 is the suite number" の '2' にマッチする| |\D|数字以外の文字にマッチする。[^0-9] と同等。 例えば、/\D/ や /[^0-9]/ は "B2 is the suite number" の 'B' にマッチする| |\f|改ページにマッチする| |\n|改行にマッチする| |\r|復帰にマッチする| |\s|スペース、タブ、改ページ、改行を含む、1 つのホワイトスペース文字にマッチする。[ \f\n\r\t\v\u00A0\u2028\u2029] と同等。 例えば、/\s\w*/ は "foo bar" の ' bar' にマッチする| |\S|ホワイトスペース以外の 1 文字にマッチする。[^ \f\n\r\t\v\u00A0\u2028\u2029] と同等。 例えば、/\S\w*/ は "foo bar" の 'foo' にマッチする| |\t|タブにマッチする| |\v|垂直タブにマッチする| |\w|アンダースコアを含むどの英数字にもマッチする。[A-Za-z0-9_] と同等。 例えば、/\w/ は "apple" の 'a' や "$5.28" の '5' や "3D" の '3' にマッチする| |\W|前述以外の文字にマッチする。[^A-Za-z0-9_] と同等。 例えば、/\W/ や /[^$A-Za-z0-9_]/ は "50%" の '%' にマッチする| |\n|n には正の整数が入る。その正規表現の n 番目の括弧の部分にマッチする最後の部分文字列への後方参照（左括弧をカウントする）。 例えば、/apple(,)\sorange\1/ は "apple, orange, cherry, peach" の 'apple, orange,' にマッチする| |\0|NUL 文字にマッチする。この後ろに他の数字を続けてはならない| |\xhh|hh（2 桁の 16 進数）というコードを持つ文字にマッチする。| |\uhhhh|hhhh（4 桁の 16 進数）というコードを持つ文字にマッチする。| 括弧の使用 正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては 括弧で囲まれた部分文字列のマッチの使用 で説明しています。 例えば、/Chapter (\d+)\.\d*/ というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。 このパターンは "Open Chapter 4.3, paragraph 6" という文字列で見つかり、'4' が記憶されます。このパターンは "Chapter 3 and 4" では見つかりません。この文字列は '3' の後ろにピリオドがないためです。 マッチした部分を記憶させることなく部分文字列にマッチさせたい場合は、その括弧においてパターンの前に ?: を付けてください。例えば、(?:\d+) は 1 文字以上の数字にマッチしますが、マッチした文字は記憶されません。 ***正規表現の使用 正規表現は、RegExp の [[test]] および exec メソッド、String の match、replace、search および split とともに使用します。これらのメソッドの詳細は コア JavaScript リファレンス にて説明しています。 |メソッド|説明| |exec|ある文字列でのマッチの検索を実行する RegExp のメソッド。情報の配列を返す| |test|ある文字列でのマッチをテストする RegExp のメソッド。true または false を返す| |match|ある文字列でのマッチの検索を実行する String のメソッド。情報の配列を返す。マッチしなかった場合には null を返す| |search|ある文字列でのマッチをテストする String のメソッド。マッチのインデックスを返す。検索に失敗した場合は -1 を返す| |replace|ある文字列でのマッチの検索を実行し、マッチした部分文字列を別の部分文字列に置換する String のメソッド| |split|正規表現または固定文字列を用いてある文字列を分割し、部分文字列の配列にする String のメソッド| あるパターンが文字列に存在するかを知りたいときは test または search メソッドを使用してください。もっと情報が必要な場合（ただし実行が遅くなる）は exec または match メソッドを使用してください。exec や match を使用し、マッチが成功した場合は、これらのメソッドは配列を返し、結びつけられた正規表現オブジェクトと定義済み正規表現オブジェクト RegExp のプロパティを更新します。マッチが失敗すると exec メソッドは null（false に変換される）を返します。 次の例では、exec メソッドを使用して、文字列でマッチを見つけます。 <SCRIPT type="text/javascript"> myRe = /d(b+)d/g; myArray = myRe.exec("cdbbdbsbz"); </SCRIPT> 正規表現のプロパティにアクセスする必要がない場合は、myArray を作成するという別の方法を使用してください。 <SCRIPT type="text/javascript"> myArray = /d(b+)d/g.exec("cdbbdbsbz"); </SCRIPT> ある文字列から正規表現を組み立てたい場合はさらに別の方法を使用してください。 <SCRIPT type="text/javascript"> myRe = new RegExp ("d(b+)d", "g"); myArray = myRe.exec("cdbbdbsbz"); </SCRIPT> これらのスクリプトではマッチは成功し、配列を返し、次の表で示されたプロパティが更新されます。 |オブジェクト|プロパティまたはインデックス|説明|この例の場合| |myArray||マッチした文字列と、すべての記憶された部分文字列|["dbbd", "bb"]| ||index|入力の文字列でのマッチの 0 から始まるインデックス|1| ||input|元の文字列|"cdbbdbsbz"| ||[0]|最後のマッチした文字列|"dbbd"| |myRe|lastIndex|次のマッチが始まるインデックス（このプロパティは g オプションを用いた正規表現でのみセットされる。フラグを用いた高度な検索 にて説明する。）|5| ||source|パターンのテキスト。正規表現の実行時ではなく作成時に更新される|"d(b+)d"| この例の 2 つ目の形式で示したように、オブジェクト初期化子を使用して、それを変数に代入することなく作った正規表現を使うことができます。しかしながら、この方法では出現するたびに新しい正規表現として作成されます。このため、変数に代入しないこの形式を使用する場合は、その正規表現のプロパティに後からアクセスすることはできません。例えば、次のようなスクリプトを使用するとします。 <SCRIPT type="text/javascript"> myRe = /d(b+)d/g; myArray = myRe.exec("cdbbdbsbz"); document.writeln("The value of lastIndex is " + myRe.lastIndex); </SCRIPT> このスクリプトは次のように出力します。 The value of lastIndex is 5 しかし、このスクリプトの場合は <SCRIPT type="text/javascript"> myArray = /d(b+)d/g.exec("cdbbdbsbz"); document.writeln("The value of lastIndex is " + /d(b+)d/g.lastIndex); </SCRIPT> 次のように出力します。 The value of lastIndex is 0 この 2 つの文で出てくる /d(b+)d/g は別の正規表現オブジェクトであり、そのためにそれぞれの lastIndex プロパティの値は異なるのです。オブジェクト初期化子を用いて作成した正規表現のプロパティにアクセスする必要がある場合は、まずそれを変数に代入するようにしてください。 -括弧で囲まれた部分文字列のマッチの使用 -フラグを用いた高度な検索 -正規表現の例 ***括弧で囲まれた部分文字列のマッチの使用(Using Parenthesized Substring Matches) 正規表現パターンに括弧を含めることで、対応するサブマッチが記憶されます。例えば、/a(b)c/ は 'abc' という文字列にマッチし、'b' が記憶されます。この括弧で囲まれた部分文字列のマッチは、配列の要素 [1], ..., [n] を使用して呼び戻すことができます。 括弧で囲まれた部分文字列は何個でも使用できます。返された配列にはその見つかったものすべてが存在します。以下の例では括弧で囲まれた部分文字列の使用法を説明します。 例 1 次のスクリプトでは replace メソッドを使用して文字列中の単語を入れ替えます。置き換えるテキストについては、スクリプトは $1 と $2 を使用して、最初とその次の括弧で囲まれた部分文字列のマッチを示しています。 <script type="text/javascript"> re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$2, $1"); document.write(newstr); </script> これは "Smith, John" を出力します。 例 2 注意：getInfo 関数では Firefox 以外のほとんどのブラウザでは動作しない () という省略記法を使用して exec メソッドが呼び出されます。 <[[html]]> <script type="text/javascript"> function getInfo(field){ var a = /(\w+)\s(\d+)/(field.value); window.alert(a[1] + ", your age is " + a[2]); } </script> Enter your first name and your age, and then press Enter. <[[form]]> <input type="text" name="NameAge" onchange="getInfo(this);"> </form> </html> ***フラグを用いた高度な検索(Advanced Searching With Flags) 正規表現には、グローバルな検索や大文字・小文字を区別しない検索を可能にする 4 つのオプション的なフラグがあります。グローバルサーチをさせるには g フラグを使用してください。大文字・小文字を区別しない検索をさせるには i フラグを使用してください。複数行の検索をさせるには m フラグを使用してください。マッチを対象文字列における現在の位置から開始する "sticky" 検索を行うには、y フラグを使用してください。これらのフラグは離して使用することもまとめて使用することもできます。順番は問いません。また、正規表現の一部として含めることもできます Firefox 3 における注記 y フラグのサポートは Firefox 3 で追加されました。マッチが対象文字列における現在位置で成功しない場合、y フラグは失敗します。 フラグを正規表現に含めるには次のようにしてください。 re = /pattern/flags re = new RegExp("pattern", ["flags"]) フラグは正規表現の不可分の一部です。後から加えたり取り除いたりはできません。 例えば、re = /\w+\s/g は 1 つ以上の文字とそれに続くスペースを探す正規表現を作成します。また、これは文字列全体を通してこの組み合わせを探します。 <script type="text/javascript"> re = /\w+\s/g; str = "fee fi fo fum"; myArray = str.match(re); document.write(myArray); </script> この例では ["fee ", "fi ", "fo "] が表示されます。また、この例では次の行 re = /\w+\s/g; を次の行 re = new RegExp("\\w+\\s", "g"); に置き換えることができます。得られる結果は同じです。 m フラグは複数行の入力文字列を複数の行として扱うようにしているのに用います。m フラグを使用した場合、^ および $ は、文字列全体の先頭または末尾ではなく、入力文字列のどの行の先頭または末尾にもマッチします ***正規表現の例 以下の例では正規表現の使用法をいくつか示します。 入力文字列の順序変更 次の例では、正規表現の構造と string.split() および string.replace() の使用法を示します。空白、タブ、1 つのセミコロンで分割された名前（ファーストネームが先）からなる、簡単に整形された入力文字列をきれいにします。最終的に名前の順序を逆転し（ラストネームが先）、リストをソートします。 <script type="text/javascript"> // 名前の文字列は複数のスペースやタブを含む。 // また、ファーストネームとラストネームの間に複数のスペーがあることもある var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; var output = new Array( "---------- Original String<br><br>", names + "<br><br>"); // 2 つの正規表現パターンと、格納用の配列を用意する。 // 文字列を配列の要素に分割する。 // パターン：ホワイトスペースが存在しうる・セミコロン・ホワイトスペースが存在しうる var pattern = /\s*;\s*/; // 上記のパターンで文字列を断片に分割し、 // nameList という配列に断片を格納する。 var nameList = names.split(pattern); // 新パターン：1 つ以上の文字・1 つ以上のスペース・1 つ以上の文字 // 括弧を用いてパターンの断片を記憶する。 // 記憶しておいた断片は後から参照される。 var pattern = /(\w+)\s+(\w+)/; // 処理された名前を格納する新しい配列。 var bySurnameList = new Array(); // 名前の配列を表示し、新しい配列にコンマ区切りの名前を // ラストネーム、ファーストネームの順で格納する。 // replace メソッドはパターンにマッチしたものを除去し、 // 記憶しておいた文字列に置き換える。 //「2 番目の記憶しておいた断片とその後に続くコンマとスペース、 // さらにその後に続く 1 番目の記憶しておいた断片」 // // 変数 $1 および $2 は、パターンにマッチさせた際に // 記憶しておいた断片を参照する output.push("---------- After Split by Regular Expression<br>"); var i, len; for (i = 0, len = nameList.length; i < len; i++) { output.push(nameList[i] + "<br>"); bySurnameList[i] = nameList[i].replace(pattern, "$2, $1") } // 新しい配列を表示する。 output.push("---------- Names Reversed<br>"); for (i = 0, len = bySurnameList.length; i < len; i++) { output.push(bySurnameList[i] + "<br>") } // ラストネームについてソートし、ソートした配列を表示する。 bySurnameList.sort(); output.push("---------- Sorted<br>"); for (i = 0, len = bySurnameList.length; i < len; i++) { output.push(bySurnameList[i] + "<br>") } output.push("---------- End<br>"); document.write(output.join("\n")); </script> 特殊文字を用いた入力の確認 次の例では、ユーザが電話番号を入力します。ユーザが Enter を押すと、スクリプトがその番号の妥当性を確認します。その番号が妥当である（正規表現で指定した文字の連続にマッチしている）場合、スクリプトはユーザへの感謝のメッセージをウィンドウに表示し、その番号を確認します。番号が妥当でない場合は、その電話番号が妥当でないということをユーザに知らせるメッセージをウィンドウに表示します。 正規表現は、0 または 1 つの左括弧 \(?、それに続く 3 つの数字 \d{3}、それに続く 0 または 1 つの右括弧 \)?、それに続き、見つかった場合は記憶しておく 1 つのダッシュ、スラッシュ、または小数点 ([-\/\.])、それに続く 3 つの数字 \d{3}、それに続く記憶しておいた 1 つのダッシュ、スラッシュ、または小数点のマッチ \1、それに続く 4 つの数字 \d{4} を探します。 ユーザが Enter を押したときに発動する Change イベントは RegExp.input の値をセットします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/; function testInfo(phoneInput) { var OK = re.exec(phoneInput.value); if (!OK) { window.alert(RegExp.input + " isn't a phone number with area code!"); } else { window.alert("Thanks, your phone number is " + OK[0]); } } </script> </head> <body> <p>Enter your phone number (with area code) and then press Enter.</p> <form action=""> <input name="phone" onchange="testInfo(this);"> </form> </body> </html> 2011-09-20T21:38:26+09:00 1316522306 https://w.atwiki.jp/0x0b/pages/95.html [[mozilla JavaScript>js_about_01]]の続き #contents **式(Expressions) リテラル、変数、演算子、そして単一の値に評価する式からなる有効なセットです この値には数値、文字列、論理値が使用できます 概念的に、式は 2 つの種類 ある値を変数に代入するものと、単純にある値を持つもの 例えば、x = 7 という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では代入演算子を用います。一方、3 + 4 という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に演算子と呼ばれます。 JavaScript には以下の種類の式があります。 算術式：数値に評価する。例えば 3.14159。（一般に 算術演算子 を使用） 文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に 文字列演算子 を使用） 論理式：true または false に評価する。（よく 論理演算子 を用いる) オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については 特殊演算子 を参照） ***演算子(Operators) JavaScript は以下の種類の演算子を使うことができます。このセクションでは演算子について説明します。また、演算子の優先順位にも触れます。 代入演算子 比較演算子 算術演算子 ビット演算子 論理演算子 文字列演算子 特殊演算子 JavaScript には単項演算子も 2 項演算子もあります。さらには唯一の特殊な 3 項演算子である条件演算子があります。2 項演算子では、演算子の前後に 1 つずつ、計 2 つのオペランドが必要です。 operand1 operator operand2 例えば 3+4 や x*y。 単項演算子では、演算子の前か後ろどちらかに 1 つのオペランドが必要です。 operator operand または operand operator 例えば x++ や ++x。 演算子の優先順位 演算子の優先順位が高い順 |は｜ |演算子の種類|個々の演算子| |メンバ|. []| |インスタンスの呼び出し/作成|() new| |否定/インクリメント|! ~ - + ++ -- typeof void delete| |乗算/除算|* / %| |加算/減算|+ -| |ビットシフト|<< >> >>>| |関係|< <= > >= in instanceof| |等価|== != === !==| |ビットごとのand|&| |ビットごとのxor|^| |ビットごとの or|｜| |論理積|&&| |論理和|｜｜| |条件|?:| |代入|= += -= *= /= %= <<= >>= >>>= &= ^= ｜=| |コンマ|,| ***代入演算子(Assignment Operators) 代入演算子は、右のオペランドの値に基づいた値を左のオペランドに代入します。基本的な代入演算子はイコール (=) ですが、これは右のオペランドの値を左のオペランドに代入します。すなわち、x = y では y の値を x に代入します。 他の代入演算子は標準的な演算をするための短縮表記があります。次の表でそれを示します。 短縮表記した演算子 意味 |x += y|x = x + y| |x -= y|x = x - y| |x *= y|x = x * y| |x /= y|x = x / y| |x %= y|x = x % y| |x <<= y|x = x << y| |x >>= y|x = x >> y| |x >>>= y|x = x >>> y| |x &= y|x = x & y| |x ^= y|x = x ^ y| |x ｜= y|x = x｜y| ***比較演算子(Comparison Operators) 比較演算子は、オペランドを比較し、比較結果に基づいた論理値を返します。オペランドには数値、文字列、論理値、オブジェクトが使用できます。文字列は、Unicode 値を用いて標準的な辞書順に基づいて比較されます。ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします（このルールの唯一の例外は === および !== であり、これらは厳密に等値か否かを判断し、等値性をチェックする前にオペランドを適合する型に変換するということはありません）。これは一般に数値の比較が実行されることになります。次の表では比較演算子について説明します。次のコードで考えます。 var var1 = 3, var2 = 4; |演算子|説明|true を返す例| |等しい (==)|オペランドが等しい場合に true を返す|3 == var1&br()"3" == var1&br()3 == '3'| |等しくない (!=)|オペランドが等しくない場合に true を返す|var1 != 4&br()var2 != "3"| |厳密に等しい (===)|オペランドが等しく、かつ同じ型である場合に true を返す|3 === var1| |厳密には等しくない (!==)|オペランドが等しくなく、かつ/または同じ型でない場合に true を返す|var1 !== "3"&br()3 !== '3'| |より大きい (>)|左のオペランドが右のオペランドよりも大きい場合に true を返す|var2 > var1&br()"12" > 2| |以上 (>=)|左のオペランドが右のオペランド以上である場合に true を返す|var2 >= var1&br()var1 >= 3| |より小さい (<)|左のオペランドが右のオペランドよりも小さい場合に true を返す|var1 < var2&br()"12" < "2"| 以下 (<=)|左のオペランドが右のオペランド以下である場合に true を返す|var1 <= var2&br()var2 <= 5| ***算術演算子(Arithmetic Operators) 算術演算子は、そのオペランドに数値（リテラルか変数）をとり、1 つの数値を返します。標準的な算術演算子は、加算 (+)、減算 (-)、乗算 (*)、除算 (/) です。これらの演算子は他のほとんどのプログラミング言語と同じように機能しますが、そのときの数値は、浮動小数点数として扱われます（0 で除算した結果は、NaN になることにも注意してください）。 1 / 2 // JavaScript では 0.5 を返す 1 / 2 // Java では 0 を返す（どちらの数も浮動小数点数として明記されていない） 1.0 / 2.0 // JavaScript でも Java でも 0.5 を返す さらに、JavaScript では以下の表で示された算術演算子も使用できます。 |演算子|説明|例| |%（モジュロ）|2 項演算子。2 つのオペランドで除算したときの整数の余りを返す|12 % 5 は 2 を返す。| |++（インクリメント）|単項演算子。オペランドに 1 を加える。前置演算子 (++x) を使った場合、オペランドに 1 を加えた後にその値を返す。後置演算子 (x++) を使った場合、オペランドに 1 を加える前にその値を返す。|x が 3 のとき、++x は x に 4 をセットし、4 を返す。一方、x++ は x に 4 をセットし、3 を返す。| |--（デクリメント）|単項演算子。オペランドから 1 を引く。戻り値はインクリメント演算子のものと同様。|x が 3 のとき、--x は x に 2 をセットし、2 を返す。一方、x-- は x に 2 をセットし、3 を返す。| |-（符号反転）|単項演算子。オペランドの符号を反転してその値を返す|x が 3 のとき、-x は -3 を返す| ***ビット演算子(Bitwise Operators) ビット演算子ではそのオペランドを 10 進数や 16 進数や 8 進数ではなく、32 ビットの集合（0 と 1）として扱います。例えば、10 進数の 9 の 2 進表現は 1001 です。ビット演算子はこのように 2 進表現にした上で演算を行いますが、標準の JavaScript の数値を返します。 次の表で JavaScript のビット演算子について説明します。 |演算子|使用法|説明| |ビットごとの AND|a & b|オペランドの対応するビットがともに 1 である各ビットについて 1 を返す| |ビットごとの OR|a｜b|オペランドの対応するビットがどちらかまたはともに 1 である各ビットについて 1 を返す| |ビットごとの XOR|a ^ b|オペランドの対応するビットがどちらか一方のみ 1 である各ビットについて 1 を返す| |ビットごとの NOT|～ a|オペランドの各ビットを反転する| |左シフト|a << b|2 進表現の a を b ビット分だけ左にシフトする。右から 0 を詰める| |符号を維持した右シフト|a >> b|2 進表現の a を b ビット分だけ右にシフトする。溢れたビットは破棄する| |0 埋め右シフト|a >>> b|2 進表現の a を b ビット分だけ右にシフトする。溢れたビットは破棄し、左から 0 を詰める| ビットごとの論理演算子 概念的にビットごとの論理演算子は以下のように機能します。 オペランドは 32 ビット整数に変換され、ビット列（0 と 1）として表現される。 第 1 のオペランドの各ビットは第 2 のオペランドの対応するビットと対にされる。第 1 ビットと第 1 ビット、第 2 ビットと第 2 ビット、というように対にされる。 演算子は各ビットのペアに適用され、結果はビットごとに組み立てられる。 例えば、9 の 2 進表現は 1001 で、15 の 2 進表現は 1111 です。ここで、ビット演算子がこれらの値に対して適用されたときの結果は以下のようになります。 15 & 9 の結果は 9 (1111 & 1001 = 1001) 15 | 9 の結果は 15 (1111 | 1001 = 1111) 15 ^ 9 の結果は 6 (1111 ^ 1001 = 0110) ビットシフト演算子 ビットシフト演算子は 2 つのオペランドをとります。第 1 のオペランドはシフトされる数を指定し、第 2 のオペランドは、第 1 のオペランドをシフトさせるビット数を指定します。シフト演算の方向は使用する演算子によって決まります。 シフト演算子はそのオペランドを 32 ビット整数に変換し、左のオペランドと同じ型の結果を返します。 シフト演算子は次の表のとおりです |演算子|説明|例| |<<（左シフト）|第 1 オペランドを指定したビット数分だけ左にシフトする。左に溢れたビットは破棄される。0 のビットを右から詰める|9<<2 の結果は 36 となる。1001 を 2 ビット左にシフトすると 100100 となり、これは 36 であるため| |>>（符号を維持した右シフト）|第 1 オペランドを指定したビット数分だけ右にシフトする。右に溢れたビットは破棄される。左端のビットのコピーを左から詰める|9>>2 の結果は 2 となる。1001 を 2 ビット右にシフトすると 10 となり、これは 2 であるため。同様に、-9>>2 の結果は符号が維持されるために -3 となる| |>>>（0 埋め右シフト）|第 1 オペランドを指定したビット数分だけ右にシフトする。右に溢れたビットは破棄される。0 のビットを左から詰める|19>>>2 の結果は 4 となる。10011 を 2 ビット右にシフトすると 100 になり、これは 4 であるため。非負数では 0 埋め右シフトと符号を維持した右シフトは同じ結果になる| ***論理演算子(Logical Operators) 論理演算子では基本的に真偽（論理）値を用います。そのような値があると真偽値を返します。しかし、&& および || 演算子は実際には指定されたオペランドの一方の値を返します。そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。論理演算子について次の表で説明します。 |演算子|使用法|説明| |&&|expr1 && expr2|（論理 AND）expr1 を false と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、両オペランドが true の場合は && は true を返し、そうでない場合は false を返す| |｜｜|expr1｜｜expr2|（論理 OR）expr1 を true と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、どちらかのオペランドが true の場合は｜｜は true を返し、両方とも false の場合は false を返す| |!|!expr|（論理 NOT）オペランドを true と見ることができる場合は false を返す。そうでない場合は true を返す| false と見ることができる式とは、null、0、空文字列 ("")、または undefined に評価される式のことです。 以下のコードで &&（論理 AND）演算子の例を示します。 a1=true && true // t && t は true を返す a2=true && false // t && f は false を返す a3=false && true // f && t は false を返す a4=false && (3 == 4) // f && f は false を返す a5="Cat" && "Dog" // t && t は Dog を返す a6=false && "Cat" // f && t は false を返す a7="Cat" && false // t && f は false を返す 以下のコードで ||（論理 OR）演算子の例を示します。 o1=true || true // t || t は true を返す o2=false || true // f || t は true を返す o3=true || false // t || f は true を返す o4=false || (3 == 4) // f || f は false を返す o5="Cat" || "Dog" // t || t は Cat を返す o6=false || "Cat" // f || t は Cat を返す o7="Cat" || false // t || f は Cat を返す 以下のコードで !（論理 NOT）演算子の例を示します。 n1=!true // !t は false を返す n2=!false // !f は true を返す n3=!"Cat" // !t は false を返す ショートサーキット評価 論理式は左から右に評価されるため、以下のルールを用いることで「ショートサーキット」評価ができるようになっています。 false && anything は false にショートサーキット評価する。 true ｜｜ anything は true ショートサーキット評価する。 論理のルールはこれらの評価が常に正確であることを保証しています。上記の式の anything の部分は評価されないため、何らかの副作用が生じないように注意してください ***文字列演算子(String Operators) 比較演算子は文字列に使用できますが、これに加えて 2 つの文字列を結合する結合演算子 (+) も使用できます。これは 2 つのオペランドの文字列を結合した文字列を返します。例えば、"my " + "string" は "my string" という文字列を返します。 短縮表記した代入演算子 += も文字列の結合に使用できます。例えば、変数 mystring に "alpha" という値が格納されているとき、式 mystring += "bet" の評価結果は "alphabet" となり、この値を mystring に代入します。 ***特殊演算子(Special Operators) JavaScript は以下の特殊演算子があります。 -条件演算子 -コンマ演算子 -delete -in -instanceof -new -this -typeof -void 条件演算子 条件演算子は JavaScript では唯一の 3 つのオペランドをとる演算子です。演算子は条件に基づいて 2 つの値のうち、1 つを選択します。構文は次のとおりです。 condition ? val1 : val2 condition が true の場合、演算子は val1 の値を選択します。そうでない場合は val2 の値を選択します。標準的な演算子が使用できる場所でならどこででも条件演算子を使用することができます。 例えば、 status = (age >= 18) ? "adult" : "minor" この文では、age が 18 以上の場合 "adult" という値を変数 status に代入します。そうでない場合は "minor" という値を status に代入します。 コンマ演算子 コンマ演算子 (,) は単に両方のオペランドを評価し、第 2 のオペランドの値を返します。この演算子は主に for ループ内で使用されます。このことでループのたびに複数の変数を更新できるようになります。 例えば、a が一辺が 10 要素の 2 次元配列のとき、以下のコードではコンマ演算子を用いることで 2 変数を同時にインクリメントしています。このコードでは配列の対角成分の値を出力します。 for (var i=0, j=9; i <= 9; i++, j--) document.writeln("a["+i+"]["+j+"]= " + a[i][j]) delete delete 演算子はオブジェクトやオブジェクトのプロパティ、配列の指定されたインデックスの要素を削除します。構文は以下のとおりです。 delete objectName delete objectName.property delete objectName[index] delete property // with 文内でのみ有効 ここで、objectName はオブジェクトの名前を、property は既存のプロパティを、index は配列の要素の位置を表す整数をそれぞれ表しています。 4 番目の形式は with 文内でのみ有効で、これはあるオブジェクトからプロパティを削除します。 delete 演算子を使うことで暗黙的に宣言された変数を削除することができますが、var 文を用いて宣言された変数は削除できません。 delete 演算子が成功すると、そのプロパティや要素には undefined がセットされます。また、演算が可能な場合は delete 演算子は true を返します。演算が不可能な場合は false を返します。 x=42 var y= 43 myobj=new Number() myobj.h=4 // プロパティ h を作成 delete x // true を返す（暗黙的に宣言されているならば削除可能） delete y // false を返す（var 付きで宣言されているなら削除不可能） delete Math.PI // false を返す（定義済みプロパティは削除不可能） delete myobj.h // true を返す（ユーザ定義プロパティは削除可能） delete myobj // true を返す（暗黙的に宣言されているならば削除可能） 配列要素の削除 配列要素を削除したとき、配列の長さには影響を及ぼしません。例えば a[3] を削除したとき、a[4] は依然 a[4] のままで、a[3] は undefined になります。 delete 演算子で配列要素を除去すると、もうその要素はその配列からなくなります。次の例では tree[3] は delete によって除去されます。 trees=new Array("redwood","bay","cedar","oak","maple") delete trees[3] if (3 in trees) { // ここは実行されない } 配列要素は存在させたいが、値は未定義にしたいという場合は、delete 演算子の代わりに undefined キーワードを使用してください。次の例では trees[3] には undefined という値が代入されますが、その配列要素は存在したままになります。 trees=new Array("redwood","bay","cedar","oak","maple") trees[3]=undefined if (3 in trees) { // ここは実行される } in in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。構文は以下のとおりです。 propNameOrNumber in objectName ここで、propNameOrNumber はプロパティ名か配列のインデックスを表す文字列式または数値式を、objectName はオブジェクトの名前をそれぞれ表しています。 次の例では in 演算子の使用法を示します。 // 配列 trees=new Array("redwood","bay","cedar","oak","maple") 0 in trees // true を返す 3 in trees // true を返す 6 in trees // false を返す "bay" in trees // false を返す（インデックスの指す値ではなく、 // インデックスの数字を指定しなければならない） "length" in trees // true を返す（length は Array のプロパティ） // 定義済みオブジェクト "PI" in Math // true を返す myString=new String("coral") "length" in myString // true を返す // ユーザ定義オブジェクト mycar = {make:"Honda",model:"Accord",year:1998} "make" in mycar // true を返す "model" in mycar // true を返す instanceof instanceof 演算子は、指定されたオブジェクトが指定されたオブジェクトの種類である場合に true を返します。構文は次のとおりです。 objectName instanceof objectType ここで、objectName は objectType と比較するオブジェクトの名前を、objectType は Date や Array のようなオブジェクトの種類をそれぞれ表しています。 実行時にオブジェクトの種類を確認する必要があるときは instanceof を使用してください。例えば、例外を受け取るとき、投げられた例外の種類によって別々の例外を扱うコードに分岐させることができます。 例えば、次のコードでは instanceof を使用することで theDay が Date オブジェクトであるかどうかを決定しています。theDay は Date オブジェクトなので if 文の中の文は実行されます。 theDay=new Date(1995, 12, 17) if (theDay instanceof Date) { // 実行される文 } new new 演算子は、ユーザ定義オブジェクトや、Array、Boolean、Date、Function、Image、Number、Object、Option、RegExp、String といった定義済みオブジェクトのインスタンスを作成するのに使用します。サーバでは DbPool、Lock、File、SendMail といったオブジェクトも使用できます。new の使用法は以下のとおりです。 objectName = new objectType ( param1 [,param2] ...[,paramN] ) オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子の使用 にて説明しています。 詳しくはコア JavaScript リファレンスの new 演算子 のページを参照してください。 this this キーワードを使うことでカレントオブジェクトを参照することができます。一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。使用法は以下のとおりです。 this[.propertyName] 例 1 あるオブジェクトの value プロパティの妥当性を確認する validate という関数を想定します。関数にはそのオブジェクトと、上限および下限の値を渡します。 function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) alert("Invalid Value!") } 各フォーム要素の onChange イベントハンドラにおいて validate を呼び出します。this を使うことでフォーム要素を渡すことができます。次の例をご覧ください。 <B>Enter a number between 18 and 99:</B> <INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)"> 例 2 [[form]] プロパティと組み合わせると this でカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onClick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。 <FORM NAME="myForm"> Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> <P> <INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" onClick="this.form.text1.value=this.form.name"> </FORM> typeof typeof 演算子は次の方法のうち、どちらかの方法で使用します。 1. typeof operand 2. typeof (operand) typeof 演算子は、未評価のオペランドの型を指す文字列を返します。operand は返される型を調べる対象となる文字列、変数、キーワード、オブジェクトです。括弧はあってもなくてもかまいません。 以下の変数を定義することを想定します。 var myFun = new Function("5+2") var shape="round" var size=1 var today=new Date() typeof 演算子はこれらの変数に対して以下の結果を返します。 typeof myFun is function typeof shape is string typeof size is number typeof today is object typeof dontExist is undefined true や null というキーワードに対して、typeof 演算子は以下の結果を返します。 typeof true is boolean typeof null is object 数値や文字列に対して、typeof 演算子は以下の結果を返します。 typeof 62 is number typeof 'Hello world' is string プロパティ値に対して、typeof 演算子はプロパティ値の型を返します。 typeof document.lastModified is string typeof window.length is number typeof Math.LN2 is number メソッドや関数に対して、typeof 演算子は以下の結果を返します。 typeof blur is function typeof eval is function typeof parseInt is function typeof shape.split is function 定義済みオブジェクトに対して、typeof 演算子は以下の結果を返します。 typeof Date is function typeof Function is function typeof Math is function typeof Option is function typeof String is function void void 演算子は次の方法のうち、どちらかの方法で使用します。 1. void (expression) 2. void expression void 演算子は値を返さずに評価する式を指定します。expression は評価する JavaScript の式です。式の周りの括弧はあってもなくてもかまいませんが、使用したほうが見た目はいいです。 void 演算子を使用することで式をハイパーテキストリンクとして指定することができます。式は評価されますが、開いている文書の代わりに読み込まれるということはありません。 以下のコードはユーザがクリックしても何も起こらないハイパーテキストリンクを作成します。ユーザがリンクをクリックすると void(0) は undefined に評価され、JavaScript としては影響を及ぼしません。 <A HREF="javascript:void(0)">Click here to do nothing</A> 以下のコードはユーザがクリックするとフォームが送信されるハイパーテキストリンクを作成します。 <A HREF="javascript:void(document.form.submit())"> Click here to submit</A> 2011-09-17T23:23:30+09:00 1316269410 https://w.atwiki.jp/0x0b/pages/92.html JavaScript #contents *Mozilla, Netscape 動的型付け 大文字・小文字を区別する **このガイドについて ***JavaScript の各バージョンにおける新機能 ***読者が知っておくべきこと ***JavaScript のバージョン ***JavaScript の情報の所在 ***JavaScript を学ぶ上での Tips ***文書の約束事 JavaScript 概要 ***JavaScript とは何か ***JavaScript と Java ***JavaScript と ECMAScript 仕様 ***JavaScript のバージョンと ECMAScript の版との関係 ***JavaScript の文書と ECMAScript の仕様書 ***JavaScript と ECMAScript の用語 **型・値 (引数ゼロ) 引数なしの Number コンストラクタは +0 を返し 引数なしの String コンストラクタは ""（空文字列）を返す 認識する値の型 Number(整数・実数区別なし), Boolean(true/false), String プリミティブ値 null, underfined 型の変換 var answer = 42; answer = "Thanks for all the fish..."; 代入時エラーメッセージなし 数値を文字列に変換 x = "The answer is " + 42 // "The answer is 42" を返す y = 42 + " is the answer" // "42 is the answer" を返す 数値同士だと変換しない "37" - 7 // 30 を返す "37" + 7 // "377" を返す **変数 アプリケーションで値を識別する名前 ***識別子 １文字目はアルファベット(a-z, A-Z) or アンダースコア (_) orドル記号 ($) 続く文字は＋数字 (0-9) も使える 1.5では\uXXXX 形式の Unicode エスケープシーケンスが使える exam) Number_hits や temp99 や _name ***変数宣言 -var というキーワードを使う。 exam) var x = 42 //この構文は ローカル変数およびグローバル変数どちらの宣言にも使用可能 -単に値を代入する exam) x = 42 //いつでも グローバル変数 を宣言できるが、厳格な JavaScript 警告 (strict JavaScript warning) が発生する ※非推奨 ***変数の評価 var文を初期化せずに宣言された変数は undefined の値をとる 未宣言の変数にアクセスしようとすると、ReferenceError 例外が投げられます var a; print("a の値は " + a); // "a の値は undefined" を出力 print("b の値は " + b); // ReferenceError 例外を投げる undefined を使うと変数に値が入っているかどうかを確かめられます 変数 input には値が代入されておらず、if 文での評価結果は true です。 exam) var input; if(input === undefined){ doThis(); } else { doThat(); } undefined は真偽値コンテキストで使用されると false として振る舞う myArray の要素が未定義であるために関数 myFunction が実行されます。 exam) var myArray = new Array(); if (!myArray[0]) myFunction(); null 変数を評価すると、数値コンテキストにおいては null 値は 0 、真偽値コンテキストでは false として振る舞う exam) var n = null; print(n * 32); // prints 0 ***変数のスコープ グローバル(大域)変数 変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになる ローカル(局所)変数 変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できない Javascript には ブロック文 のスコープがない。むしろ、そのブロックを内包しているコードに対して局所化される condition が false のとき、例外を投げずに 0 が出力されます。 exam) if (condition) { var x = 5; } print(x ? x : 0); JavaScript の変数に関する独特なこととして、後に宣言される変数を例外を発生させることなく参照できるというのも挙げられます exam) print(x === undefined); // "true" を出力 var x = 3; ***グローバル変数 実際にはグローバルオブジェクトのプロパティのこと ウェブページではグローバルオブジェクトは window です。 そのため、window.variable という構文を使うことでグローバル変数をセットしたり、グローバル変数にアクセスしたりすることができます したがって、あるウィンドウやフレームで宣言したグローバル変数に、そのウィンドウやフレームの名前を指定すれば別のウィンドウやフレームからアクセスできます。例えば、phoneNumber という変数を FRAMESET 文書内で宣言すると、子フレームから parent.phoneNumber としてこの変数を参照することができます **定数 const キーワードを使い読み取り専用の名前付き定数を作ることができる 定数識別子の構文は変数識別子のそれと同じ 識別子 １文字目はアルファベット(a-z, A-Z)、アンダースコア(_) 続く文字はアルファベット、アンダースコア、数字が使える exam) const prefix = '212'; 定数は代入によって値を変えたり、スクリプト実行中に再宣言したりすることはできません。 定数のスコープルールは、const キーワードがグローバル定数でさえも常に必須であることを除いて、変数のそれと同じです const キーワードを省略すると、その識別子は変数を表すと見なされます 同一スコープ内で、関数や変数と同じ名前の定数を宣言することはできません exam) // この場合、エラーが発生 function f() {}; const f = 5; // この場合もエラーが発生 function f() { const g = 5; var g; // 文 } **リテラル JavaScriptでは値を表すのにリテラルを使う リテラルは固定された値で変数ではない あなたがスクリプト中に直接記述する値のこと リテラルの種類 -&anchor(arr){配列リテラル} -&anchor(bln){真偽値リテラル} -&anchor(int){整数} -&anchor(flt){浮動小数点リテラル} -&anchor(obj){オブジェクトリテラル} -&anchor(str){文字列リテラル} ***&aname(arr,option=nolink){配列リテラル} 配列リテラルとは、ゼロ個以上の式のリスト 各々の式が配列の要素を表しており、角括弧 ([]) で括られているもののこと 配列リテラルを使って配列を作ると、その配列は指定された値で要素を初期化され、配列の長さは指定された引数の個数にセットされます 例では、3 つの要素を持ち、長さが 3 の coffees という配列を作ります exam) var coffees = ["French Roast", "Colombian", "Kona"]; 注意 配列リテラルはオブジェクト初期化子の一種です オブジェクト初期化子の使用 を参照してください トップレベルのスクリプト内でリテラルを用いて配列を作った場合、JavaScript は配列リテラルを含む式を評価するたびに配列を解釈します さらに関数内で使用されたリテラルは関数が呼び出されるたびに生成されます。 配列リテラルも Array オブジェクト 配列リテラルでの余計なコンマ 配列リテラルではすべての要素を指定する必要はありません 立て続けに 2 つのコンマを置くと、未指定の要素のための空間を持った配列が生成されます 次の例では fish という配列を作ります。 exam) var fish = ["Lion", , "Angel"]; この配列は値を持つ 2 つの要素と 1 つの空の要素を持っています(fish[0] は "Lion"、fish[1] は undefined、fish[2] は "Angel") 要素のリストの最後にコンマを付けた場合、そのコンマは無視されます 次の例では配列の長さは 3 myList[3] は存在しません リストの他のすべてのコンマは新しい要素を示します exam) var myList = ['home', , 'school', ]; 次の例では配列の長さは 4 myList[0] と myList[2] が抜けています exam) var myList = [ , 'home', , 'school']; 次の例では配列の長さは 4 myList[1] と myList[3] が抜けています 最後のコンマのみが無視されます exam) var myList = ['home', , 'school', , ]; ***&aname(bln,option=nolink){真偽値リテラル} 真偽値型は true と false、2 つのリテラル値がある プリミティブな真偽値の trueとfalse を Boolean オブジェクトの true や false という値と混同してはいけません Boolean オブジェクトはプリミティブな真偽値型のラッパです Booleanオブジェクト ***&aname(int,option=nolink){整数リテラル} 整数は10 進数、16 進数、8 進数で表現可能 |10 進整数リテラル|先頭の 0（ゼロ）を除いた、数字の連続からなります| |8進数|整数リテラルが先頭の 0（ゼロ）で 0 から 7 までの数字のみからなります| |16真数|先頭の 0x（または 0X）で0 から 9までの数字と a から f および A から F のアルファベットからなります| 8 進整数リテラルは廃止予定 ECMA-262 第 3 版から除かれている JavaScript 1.5 では後方互換のためにサポートしている 整数リテラルの例 exam) 0、117、-345（10 進数） 015、0001、-077（8 進数） 0x1123、0x00111、-0xF1A7（16 進数） ***&aname(flt,option=nolink){浮動小数点リテラル} 浮動小数点リテラルは少なくとも 1 つの数字と、小数点もしくは "e"（または "E"）からなる必要がある 浮動小数点の構成 -整数部（先頭に "+" や "-" の符号を付けてもよい） -小数点 (".") -小数部 -指数部 -指数部 "e" または "E" の後に整数が続く形です 浮動小数点リテラルの例 exam) 3.1415、-3.1E12、.1e12、2E-12 より簡潔に書けば、 次の形式です [digits][.digits][(E|e)[(+|-)]digits] exam) 3.14 2345.789 .3333333333333333333 ***&aname(obj,option=nolink){オブジェクトリテラル} ゼロ個以上のプロパティ名とそれに結びつけられた値のペアのリスト 波括弧 ({}) でくくられているもの 注意 オブジェクトリテラルを文の最初に使わないようにしてください { がブロックの始まりと解釈され、エラーを引き起こしたり、予期せぬ動作をしたりすることになります オブジェクトリテラルの例を示す car オブジェクトの最初の要素は myCar プロパティを定義します 2 番目の要素の getCar プロパティは関数を呼び出します (CarTypes("Honda")) 3 番目の要素の special プロパティは既存の変数を使用します (Sales) exam) var Sales = "Toyota"; function CarTypes(name) { if (name == "Honda") return name; else return "Sorry, we don't sell " + name + "."; } var car = { myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales }; document.write(car.myCar); // Saturn document.write(car.getCar); // Honda document.write(car.special); // Toyota さらに、数値リテラルや文字列リテラルをプロパティ名に使用したり、オブジェクトをネストさせたりできます 例ではこれらのオプションを使用しています exam) var car = { manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda" }; document.write(car.manyCars.b); // Jeep document.write(car[7]); // Mazda 以下のことに注意してください var foo = {a: "alpha", 2: "two"}; document.write(foo.a); // alpha document.write(foo[2]); // two //document.write(foo.2); // Error: missing ) after argument list //document.write(foo[a]); // Error: a is not defined document.write(foo["a"]); // alpha document.write(foo["2"]); // two ***&aname(str,option=nolink){文字列リテラル} ゼロ個以上の文字を二重引用符 (") または単一引用符 (') でくくったもの 注意 文字列は同じ種類の引用符でくくってください つまり、どちらも単一引用符にするか、またはどちらも二重引用符にするかということです 文字列リテラルの例 "blah" 'blah' "1234" "one line \n another line" "John's cat" 文字列リテラルの値でなら、String オブジェクトのどんなメソッドでも呼び出すことができる JavaScript が自動的に文字列リテラルを一時的な String オブジェクトに変換し、メソッドを呼び出し、その一時的な String オブジェクトを破棄する String.length プロパティを文字列リテラルで使うこともできる "John's cat".length 特に String オブジェクトを使う必要がない場合は文字列リテラルを使うようにしてください String オブジェクト 文字列での特殊文字の使用 普通の文字に加えて、文字列では特殊文字も使える 例をご覧ください。 exam) "one line \n another line" JavaScript の文字列で使用できる特殊文字の表を示す |文字|意味| |\b|後退| |\f|改ページ| |\n|改行| |\r|復帰| |\t|タブ| |\v|垂直タブ| |\'|アポストロフィまたは単一引用符| |\"|二重引用符| |\\|バックスラッシュ (\)| |\XXX|0～377 までの 3 桁の 8 進数 XXX で指定された Latin-1 エンコーディングの文字。例：\251 は著作権記号を示す。| |\xXX|00～FF までの 2 桁の 16 進数 XX で指定された Latin-1 エンコーディングの文字。例：\xA9 は著作権記号を示す| |\uXXXX|4 桁の 16 進数 XXXX で指定された Unicode 文字。例：\u00A9 は著作権記号を示す。Unicode エスケープシーケンス | 文字のエスケープ 特殊文字の表に載っていない文字の直前にバックスラッシュを付けても無視されますが、この使用法は廃止予定であり、使用を避けるべきです バックスラッシュを直前に付けることで引用符を文字列に挿入できます。これを「引用符をエスケープする」と言う exam) var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; document.write(quote); この結果は次のようになります。 exam) He read "The Cremation of Sam McGee" by R.W. Service. 文字列にバックスラッシュそのものを挿入するときはバックスラッシュをエスケープする必要があります 例：ある文字列に c:\temp というファイルパスを代入するとき exam) var home = "c:\\temp"; //代替方法はないのか 文字参照と数値参照 |記号|文字参照|>|>|数値参照| |~|~|10進数|8進数|16進数| |'|&rsquo;|&;|&;|&;| |"|&quot;|&;|&;|&;| |<|<|&;|&;|&;| |\>|\>|&;|&;|&;| |&|&|&;|&;|&;| |半角スペース|&nbsp;|&;|&;|&;| **Unicode Unicode は主要な文字言語の交換や表示を目指したユニバーサルな文字コードの標準です。これは南北アメリカ、ヨーロッパ、中東、アフリカ、インド、アジア、太平洋地域の言語、さらに歴史的な文字や技術記号をカバーしています。Unicode は多言語テキストの交換、処理、表示を可能にします。一般的な技術記号や数学記号も扱えます。国ごとの文字の標準の違いなど、多言語処理に関する国際化問題を解消することが期待されています。しかしながら、今のところは現代の文字と古い文字がすべてサポートされているわけではありません。 Unicode 文字セットはすべての有名なエンコーディングに使用できます。Unicode は ASCII (American Standard Code for Information Interchange) 文字セットをモデルとしています。これは各文字に対して数値と名前を割り当てています。文字エンコーディングはその文字の識別情報およびその数値（コードの位置）、さらにこの値のビット表示を指します。16 ビットの数値（コード値）は 16 進数とその頭に U を付けたもので定義されます。例えば、U+0041 は A を表します。この値に対する固有の名前は LATIN CAPITAL LETTER A です。 JavaScript 1.3 より前のバージョンでは Unicode はサポートされていません。 ***Unicode の ASCII や ISO との互換性 Unicode は ISO/IEC 10646-1; 1993 と完全互換です。これは ISO 10646 のサブセットです。 いくつかのエンコーディングの標準（UTF-8、UTF-16、ISO UCS-2 を含む）は Unicode を実際のビットとして物理的に表現するのに使用されます。 Unicode の UTF-8 エンコーディングは ASCII 文字と互換性があり、多くのプログラムでサポートされています。最初の 128 の Unicode 文字は ASCII 文字に対応しており、同じバイト値をとります。Unicode 文字の U+0020 から U+007E までは ASCII 文字の 0x20 から 0x7E と同等です。ASCII はラテンアルファベットをサポートしており、7 ビット文字セットを使用しますが、UTF-8 は各文字について 1 オクテットから 4 オクテットを使用します（「オクテット」は 1 バイト、すなわち 8 ビット）。これによって何百万もの文字を表現できます。別のエンコーディング標準である UTF-16 は Unicode 文字を表現するのに 2 オクテットを使用します。エスケープシーケンスによって UTF-16 は Unicode の範囲全体を 4 オクテットで表現できるようになります。ISO UCS-2 (Universal Character Set) は 2 オクテットを使用します。 JavaScript および Navigator は UTF-8/Unicode をサポートしているため、非ラテン文字、国際文字、地域化された文字そして特殊な技術記号を JavaScript プログラムで使用できます。Unicode は多言語テキストをエンコードする標準の方法を提供します。Unicode の UTF-8 エンコーディングは ASCII と互換性があるため、ASCII 文字をプログラムで使用することもきます。また、非 ASCII の Unicode 文字を JavaScript のコメント、文字列リテラル、識別子、および正規表現で使用することもできます。 ***Unicode エスケープシーケンス 文字列リテラル、正規表現、識別子において Unicode エスケープシーケンスを使用することができます。エスケープシーケンスは ASCII 文字 6 文字からなります。それは \u と 4 桁の 16 進数です。例えば \u00A9 は著作権記号を表しています。JavaScript ではどの Unicode エスケープシーケンスも 1 つの文字として解釈されます。 次のコードは著作権記号と "Netscape Communications" という文字列を返します。 x="\u00A9 Netscape Communications" よく使用される特殊文字とその Unicode 値 |カテゴリ|Unicode 値|名前|フォーマット名| |ホワイトスペースの値|\u0009|タブ|<TAB>| ||\u000B|垂直タブ|<VT>| ||\u000C|改ページ|<FF>| ||\u0020|スペース|<SP>| |行終端の値|\u000A|改行|<LF>| ||\u000D|復帰|<CR>| |付加的な Unicode エスケープシーケンスの値|\u0008|後退|<BS>| ||\u0009|水平タブ|<HT>| ||\u0022|二重引用符|"| ||\u0027|単一引用符|'| ||\u005C|バックスラッシュ|\| JavaScript での Unicode エスケープシーケンスの使用方法は Java のそれとは異なります。JavaScript では、エスケープシーケンスは最初から特殊文字として解釈されるということはありません。例えば、文字列中の行終端のエスケープシーケンスは、関数がそれを解釈する前にその文字列を打ち切るということはありません。どのエスケープシーケンスがコメントで使用されたとしても JavaScript はそれを無視します。Java では、1 行コメント内でエスケープシーケンスが使用された場合、それを Unicode 文字として解釈します。文字列リテラルでは Java コンパイラは最初からエスケープシーケンスを解釈します。例えば、行終端のエスケープ文字（例：\u000A）を Java で使用すると文字列リテラルを打ち切ります。また Java では行終端が文字列リテラル内では許されていないために、これはエラーが発生します。文字列リテラルで改行を表したい場合は \n を使用しなければなりません。JavaScript ではエスケープシーケンスでも \n と同じように機能します。 ***JavaScript ファイルにおける Unicode 文字 以前のバージョンの Gecko では、XUL から読み込まれる JavaScript ファイルは Latin-1 文字エンコーディングが前提とされていました。Gecko 1.8 からは文字エンコーディングは XUL ファイルのエンコーディングから推測されます。詳しくは XUL JavaScript における国際文字 を参照してください。 ***Unicode を用いた文字の表示 Netscape といったクライアントが Unicode をサポートしている必要があります。さらに適当な Unicode フォントもそのクライアントで使用できなくてはならず、またクライアントのプラットフォームが Unicode をサポートしていなければなりません。Unicode フォントが Unicode を全部は表示できないということがよくあります。Windows 95 など、Unicode を部分的にサポートしているというプラットフォームもあります。 非 ASCII 文字の入力を受け取るには、クライアントが入力を Unicode として送信する必要があります。標準的な拡張キーボードを使用すると、Unicode でサポートされている付加的な文字をクライアントが簡単には入力できなくなります。Unicode 文字を入力する唯一の方法が Unicode エスケープシーケンスを使用することという場合がたまにあります。 Unicode の詳細な情報については Unicode Home Page や The Unicode Standard, Version 2.0（出版元：Addison-Wesley、1996 年）をご覧ください。 2011-09-17T21:21:04+09:00 1316262064