第 7 日 / 1 時限目・簡単なデータベース 解説 0 サンプルの概要 という文が出てきます。最初の this はこのメソッドを呼び出しているオプジェクト ( 検索 dataset . kensaku(this . f0「 . key. value) ー 検索ボタンのイベントハンドラの中に this.form コラムや正規表現の本を参考にしてください。 詳しく知りたい方は「第 4 日」 1 時限目のコラム ( 70 ページ ) 、本日「第 7 日」 155 ページの ると住所が 1 文字以上のもの、すなわちすべてのデータが出てきます。正規表現について 正規表現では任意の 1 文字を「」 ( ピリオド ) で表します。したがって、「 . 」だけで検索す を付けることによって、文字列の先頭にあるものだけに限定することができます。また、 都」で検索をすると、「東京都」ではじまる住所だけが検索に引っかかります。最初に「 ^ 」 たとえば「東京都」で検索をすると「京都府東京都市」も出てきてしまいますが、「 ^ 東京 ここでの検索は、普通の文字列以外にも正規表現を使った検索を行うこともできます。 ます。 マッチした文字列が見つかった場合、 true の値を返し、そうでなければ false の値を返し RegExp オプジェクトの exec() メソッドは、引数として渡した文字列の中に正規表現に ル形式ではなく、 RegExp 0 コンストラクタを使って変数にするのが適しています。 このプログラムのように、ユーザーが入力した文字列を正規表現にするには、リテラ 現リテラルになります。 1 時限目のコラムに書いたように、パターンの前後にスラッシュ ( / ) を付けると正規表 り事で、さまざまなプログラミング言語に実装されています。 JavaScript では、「第 4 日」 規表現に変換しています。正規表現とは、文字列のパターンを表すための標準的な決ま このプログラム中、検索文字列を RegExp0 コンストラクタに引数で渡して、正 正規表現と RegExp 0 コンストラクタ ラとして宣言しています。 をオプジェクトのメソッドにしたり、無名関数にして、プログラム内でイベントハンド このプログラムで使われているグローバル変数は dataset 、 1 つのみです。あとは関数 に表示します。 マッチするかどうかを調べ、マッチした場合、出力用のテープルに追加していき、最後 次に dataset に kensaku() メソッドを定義し、入力された検索ワードがデータの住所に ます。 の各要素に push() メソッドを使って、オプジェクトリテラル形式でデータを代入してい ど今までに習ったことばかりです。まず冒頭で空の配列変数 dataset を宣言した後、配列 これまでのサンプルプログラムよりも長めのプログラムですが、内容はほとん
new String( "abc") ー a String オプジェクトの文字列データを参照するには、 vaIueOf0 メソッドを使います。 / / "abc" を返す a. va 1ueOf ( ) ー 正規表現を使った文字列操作 ( 1 ) JavaSc 「 ipt では、 Perl や PHP などと同じように、正規表現を使ったバターン・マ ッチングを行うことができます。正規表現とは、文字列のバターンをある決まりに従 って表したもので、さまざまなプログラミング言語やワープロなどのアプリケーショ ンソフトに実装されています。ただし言語やアプリケーションによって一部の表現が サポートされていなかったりするなど、若干の違いがあります。 正規表現は JavaScript では RegExp オブジェクトとして扱われ、リテラル形式で は前後に / ( スラッシュ ) を付けます。 var pattern = / d * . ?*d/ ー / / 正規表現をリテラル形式で変数に代入 この例で、リテラル形式ではなくコンストラクタを使って日 egExp オブジェクトを 生成するには、 new RegExp ( “ d * . ? d “ ) ー var pattern のように、正規表現を文字列として ( スラッシュを前後に付けるのではなく、引用符 を付ける ) コンストラクタに渡します。このとき、正規表現中に含まれる¥という記 号は文字列の中ではエスケープ文字として特殊な意味を持っため、さらにその前に¥ を付ける必要があります。 最も単純な正規表現は、文字列そのものです。これはその文字列に完全に一致する ものだけを探すときに使います。 var pattern = /JavaScript/ ー / / " avasc て ip いという文字列をバターンとして指定 一般的には、文字列の一部をワイルドカード ( どの文字でもいい、あるいはどんな 数字でもいい、など ) として指定したり、また繰り返しの回数 ( O 回以上・ 1 回以上 など ) ・テキスト全体の中での位置を指定したりします。 【任意の文字を表す正規表現】 任意の文字 任意の AS 引文字 ( アルファベットまたは数字 ) 任意の ASCII 文字以外の文字 任意のユニコードの空白 ( ホワイトスペース ) 任意のユニコードのホワイトスペース以外の文字 任意の半角数字 任意の半角数字以外の文字 意第
第 7 日 / 2 時限目・プルダウンメニュー形式のフォトアルバム 正規表現を使った文字列操作 ( 2 ) 1 時限目のサンプルプログラムで正規表現を使ったついでに、「第 4 日」のコラム に続いて、 JavaSc 「 ipt で正規表現を使った文字列操作を解説します。ここでは、 St 「 ing オブジェクトの search ( ) メソッドと「 eplace ( ) メソッドの使い方を学びま す。いずれも文字列 ( 変数 ) 、または String オブジェクトから呼び出します。 search ( ) メソッド search ( ) メソッドは正規表現を引数に取り、文字列中に正規表現にマッチするバ ターンがあれば、最初にマッチしたバターンの先頭の位置 ( インデックス ) を返しま す。マッチするバターンが見つからなかった場合は一 1 を返します。 【例】 / / 0 を返す "abcde" ・ search(/abc/) ー / / 2 を返す "abcde" . search(/cd/) ー 「第 4 日」のコラム ( 73 ページ ) では、文字列中に正規表現にマッチするものが複数 ある場合、正規表現のあとに g (global) というフラグを付ければ、 match ( ) メソッ ドが配列形式でマッチした文字列を返すと書きました。 search ( ) メソッドは、最初 にマッチした文字列のインデックス番号だけを返すメソッドで、 g フラグを付けても 付けなくても同じはたらきをします。 フラグには、 g の他に i と m があります。 【正規表現のフラグ】 意・ すべてのマッチする文字列を探す アルファベットの大文字と小文字を区別しない ^ または $ を含むバターンについて、複数行にわたるテキスト の中で各行の先頭・末尾からマッチする文字列を探す デフォルトでは正規表現は大文字と小文字の区別をします (case sensitive) が、 i というフラグを付けることによって大文字小文字に関係なくマッチするバターンを 探します。 【例】 "JavaScript'F 技集の URL は「 http : //javascript. maxux ・ com/」 / / URL の中の「 javascript 」 です " . search( /javascriPt/ の先頭の位置 26 を返す " avasc て ip セ′ト技集の UR もは「 http : //javascript ・ maxux ・ com/」 です。 / / 文字列の先頭にある . search(/javascript/i) ー 「 JavaScript 」の位置 0 を返す
1 つのバターンの中で、部分的に選択肢を使いたい場合は ( ) とを組み合わせ、 / / 2 0 07 または 2 0 0 8 / 200 ( 7 恒 ) / のようにします。 ? や ( ) 、 [ ] 、¥、 / といった、正規表現で特別なはたらきをする文字をメタ文字と言 います。メタ文字自体をマッチング文字として使いたい場合は、メタ文字の前にエス ケープ文字¥を付けてメタ文字として解釈されることを回避 ( 工スケープ ) します。 たとえば、 の最初と最後の / は正規表現のはじまりと終わりを表すメタ文字ですが、最後から 2 番目の / は前にエスケープ文字である¥が付いているため、 / という文字自体を表し ます。したがって、上の表現は「 ( ロ内の ) 任意の ASC Ⅱ文字またはピリオド (. ) ま たはスラッシュ ( / ) が 1 回以上 ( + ) 」という意味になり、 www.google.com/intl/ ja / や ma ⅱ.yah00.com などの文字列がマッチします。 文字列から正規表現のバターンを探すには、 RegExp オブジェクトの exec ( ) メソ ッド、または St 「 ing オブジェクトの match ( ) メソッドを使います。 exec ( ) メソッドの戻り値は配列形式で、マッチする文字列が見つかった場合、以 下の値をプロバティ・要素として含みます。マッチする文字列が見つからなかった場 合は nu Ⅱの値を返します。 index input 【例】 戻り値 文字列中、最初にバターンに一致した部分の先頭のインデックス 番号 exec ( ) メソッドの引数として与えた文字列 マッチした文字列 て 1 "JavaScript 小技集の URL は S セて http : //javascript.maxux.com/て、す var re su 1 t = て 1 . exec ( s t て ) ー / / exec ( ) メソッドの戻り値を変数に代入 / / http : //javascript ・ maxux. com/ re su 1 t [ 0 ] ー result. input; / / "JavaScript/Jx 技集の URL は http://javascript.maxux.com/です。 result . index; / / 18 文字列データを数値データに変換するには Number() を使います。これは次項で取り 上げる Number オプジェクトのコンストラクタですが、引数に半角数字だけの文字列を 与え、 new キーワードを使わずに実行するとプリミテイプ型の数値を返します。与えた 引数に数字以外のものが含まれていた場合は、 NaN ( 数字ではない (not a number) とい う意味のキーワード ) を返します。 72
第 4 日 / 1 時限目・数値と文字列 プリミテイプ型の文字列変数と String オプジェクト変数は使えるメソッドやプロバテ イが同じで、一見違いがないように思われます。しかし、 if 文の条件式として変数を使う ときには異なる振るまいをすることがあり、注意が必要です。文字列として空の文字列 ( " ) を持っ場合、プリミテイプ文字列の変数であれば false として評価されますが、前述 したように存在するオプジェクト変数をプール式として評価した場合、その値がどんな ものであれ true として評価されます。 いくつかの文字のうちどれか 1 つ、という正規表現はロを使います。 / / R 、てのうちどれか 1 つ / / a 、 b 、 c のうちどれか 1 つ 最初と最後の文字をハイフン (-) でつなげます。 また、アルファベットや数字のように連続しているものをまとめて指定する場合は、 / / a から z までのどれか 1 文字 逆にいくつかの文字を除く任意の 1 文字を表すには、ロの中の文字の先頭に ^ を付 / / A から z までのどれか 1 文字または 0 から 9 までの数字のどれか 1 文字 /[Aabc]/ / い 0 - 9 ] / となります。 け、 / / a 、 b 、 c 以外の任意の 1 文字 / / 数字以外の任意の 1 文字 D と同じ ) 【文字の繰り返しを表す正規表現 ( 繰り返す文字のすぐ後に付ける ) 】 {n,m} 【例】 /https?/ O 回または 1 回 1 回以上 O 回以上 n 回ちょうど n 回以上 n 回以上 m 回以下 / / http または https 複数の文字を 1 つの単位として扱うには、 ( ) を使います。たとえば / ( ー . ) ?yahoo. com/ は、 www.yah00.com または yah00.com がマッチします。 また、 2 つのバターンのうちいずれか 1 つ、という選択肢を表すには : という記号 を使います。 /abc ldef/ / / abc または def
1 時限目で説明したように、正規表現の先頭に ^ という記号を付けると、文字列の 先頭にあるバターンだけを探します。同様に、 $ という記号は文字列の末尾のバター ンだけを探します。複数行にわたる ( 改行コード¥ n を含む ) 文字列の中から ^ や $ を 含むバターンを探す場合、文字列全体の先頭または末尾だけを見ますが、 m というフ ラグを付けると、改行コードで区切られている各行の先頭・末尾も検索対象にするよ うになります。 【例】 。「 10 日でおほえる avasc て土 pt 入門教室」翔泳社。 . search()A 翔 泳社 / / / -1 を返す 。「 10 日でおほえる avasc て土 pt 入門教室」翔泳社。 . sea て c ( 翔 泳社 / m / / 25 を返す replace ( ) 初にマッチした文字列だけを置換しますが、正規表現の最後に g フラグを付ければマ を返し、マッチしなかった場合は元の文字列をそのまま返します。デフォルトでは最 換える文字列を受け取ります。また、マッチした場合、戻り値として置換後の文字列 ( ) メソッドを使います。 replace ( ) メソッドは第 1 引数で正規表現、第 2 引数で置き 文字列中、バターンにマッチした文字列を別の文字列に置き換えるには、「 eplace ッチする文字列すべてを置き換えます。 【例】 "abcde" . replace(/abc/, "abcde" . てeP1aCe(/123/′ 応用例としては、たとえば HTML 中に nxyz"); / / “ zde " を返す / / “ cde “を返す く P id="greeting">{ ユーサー名 } さん、こんにちは。く / P 〉 き換える必要がある場合、正規表現を使うと比較的簡単に書き換えることができます。 と書き換えることができます。この他にも、プログラム実行中にテキストの一部を書 く p id="greeting"> 中山さん、こんにちは。く /P> という文を実行することによって、 . て eplace ( / { ユーザー名 } ん se てれ ame document . getE 1ementBy 工 d ( “ greeting" ) . innerHTML 場ロ、 にログインをして、 username という変数に「中山」というユーザー名が入れられた という記述があったとします。サーバーサイドプログラムを使ってこの Web ページ
第 4 日 / 1 時限目・数値と文字列 同じことを St 「 ing オブジェクトの match ( ) メソッドで行う場合は、次のようにな ります。 exec ( ) メソッドとは逆に、文字列変数からメソッドを呼び出し、引数に正 規表現を渡します。 exec ( ) メソッドとは異なり、 match ( ) メソッドの戻り値には index や input といったプロバティは付きません。 var Ⅱて 1 "JavaScript 小技集の URL は Str http : //javascript.maxux.com/です reSU re su 1 t [ 0 ] ー st て . ma セ c れ ( て 1 ) ー / / http: //javascript . maxux. com/ この 2 つの例では、入力テキスト中に正規表現にマッチする文字列が 2 個以上ある 場合でも、最初にマッチした文字列があればそこでストップしてしまいます。マッチ する文字列すべてを取り出すには、まず正規表現の終了を表す / のあとに g (global) というフラグを付けます。 var yearstring = / d + 年 / g ー match ( ) メソッドを使う場合は、戻り値の配列に見つかった文字列が順に渡され ます。 “ 2000 年にはシドニーで、 2004 年にはアテネでオリンピ var Str ックが開かれ、 var resu 1 t result; str. match (yearString) ー / / い 2000 年“ 2004 年“ ] exec ( ) を使う場合は、 wh ⅱ e 文を使ってループする必要があり、コードが少し長 くなるため、ここでは説明を省略します。 POINT ワンポイント・アドバイス 1 0 進数で数字を扱う場合には必ず第 2 引数で「 1 0 」を与えるか、 Number ( ) を使う ℃ 1 " ) 、基数を指定しないと pa 「 s 引 nt ( ) では 8 進数として処理されてしまうため、 進数であれば IO ) を指定することができます。文字列の先頭に O が付く場合 ( 例 一方、 pa 「 selnt() では、オプションで第 2 引数として基数 ( 2 進数であれば 2 、 10 数値を返します。 Numbe 「 ( " 2008 年 " ) は NaN を返しますが、 pa 「 selnt ( " 2008 年 " ) は 2008 という ていても数字部分だけを数値として変換してくれるという違いがあります。たとえば、 parselnt ( ) や parseFloat ( ) は 1 6 進数や、数字の後にスペース以外の文字が含まれ ス以外の文字コードが含まれている場合は数値として変換してくれないのに対して、 Number ( ) に渡すことができるのは 1 0 進数形式の数値のみで、前後に半角スペー ようにしてください。 【例】 parse 工 nt(“010“) a て se 工れ t ( “ 08 “ ) / / 8 進数の 10 → 10 進数の 8 になってしまう / / 8 進数では 8 は使われないため、 0 として解釈される / / 10 進数の 8 になる pa て se 工れ t ( “ 08 “′ 10 )
索引 1 60 ] 60 144 74 Mic 「 osoft.XMLHTTP 58 MochiKit 58 moo. fX 1 61 . 1 74 M00T00 69 Msxm12. XMLHTTP 1 4 , 144 MySQL NaN NEGATIVE INFINITY 1 79 Netflix 20 new 175 nextSibIing 28 nodeValue ] 98 no- 「 epeat 203 null Numbe 「 ( ) 1 99 Numbe 「オブジェクト 208 208 147 , Object ( ) 1 6 ] , 2 い , 2 1 7 onabo 「 t onb 旧「 64 onchange onclick 27 , ] 53 onclick プロバティ 90, ] ] 6 25 ondblclick one 「「 0 「 onfocus ] 55 onkeydown 9 1 , 96 onkeyp 「 ess 97 onkeyup 72 onload 80 onmousedown 33 , 80 onmousemove 80 onmouseout 33 , 80 onmouseove 「 80 onmouseup 80 on 「 eadystatechange 80 on 「 eset on 「 eslze 33 , 8 1 onselect 80 onsubmit 80 onunload 田 open ( ) option 要素 33 , 80 80 padding pa 「 entNode pa 「 seFIoat ( ) 33 , 81 80 pa 「 selnt ( ) 80 pop ( ) 8 1 POSITIVE INFINITY 33 p 「 epend ( ) 旧 EE754 形式 230 if-else 文 230 if 文 1 95 if 「 ame 要素 1 94 46 indexOf ( ) ix, 46 inne 「 HTML insertBefo 「 e ( ) isNaN ( ) 196 JavaSc 「 ipt 2. O 2 い , 21 6 javasc 「 ipt: 33 JavaSc 「 ipt ライブラリ join ( ) 1 70 jQue 「 y ] 86 33 jQue 「 y ( ) 72 jQue 「 Y IJI jQuery. ajax ( ) jQuery. getJSON ( ) xiv, 20 JSON 64 JSONP 93 lastChild 231 103 length 23 link 要素 lowe ℃ amelCase 50 m ( 正規表現のフラグ ) 1 7 ma 「 gln 1 8 ma 「 gin-top 48 match ( ) Math. abs ( ) Math ℃ eil ( ) 48 , 1 02 1 7 Math. cos ( ) 1 7 Math. E 1 7 Math. exp ( ) 1 7 Math. 利00 「 ( ) 1 8 Math. LN 1 0 1 7 Math. LN2 Math.Iog ( ) ] 58 Math. LOGI OE ] 62 Math. LOG2E Math. max (a,b) 36 Math. min (a,b) Math. PI 91 , 108 Math. 「 andom ( ) 206 刈 Math. 「 ound ( ) 65 Math. sin ( ) Math. sqrt ( ) XIII Math. SQRTI 2 1 58 Math. SQRT2 Math. tan ( ) Math オプジェクト 155 dOjO. iO. sc 「 ipt dOjO. iO. sc 「 ipt. get ( ) dOjO. que 「 Y ( ) dOjO. 「 equi 「 e ( ) DOM API DOM スクリプティング Edito 「 else if 文 em encodeURl ( ) E 「「 o 「オブジェクト eva ば ) evalJSON ( ) Event オブジェクト exec ( ) Fi 「 ebug fi 「 stChild fixed float fO 「 -in 文 fo 「文 Function ( ) g ( 正規表現のフラグ ) getAtt 「 ibute ( ) getDate ( ) getDay ( ) get 曰 ementById ( ) get 曰 ementsByTagName ( ) getFuIlYea 「 ( ) getHou 「 s ( ) getMinutes ( ) getMonth ( ) getUTCDay ( ) getUTCFuIlYea 「 ( ) GET メソッド GoogIe マップ hasOwnP 「 ope 「 ty ( ) height html() HTML5 HTML DOM API HTML 工デイタ HTTP プロトコル 2 4 2 5 4 9 3 8 2 4 7 7 6 1 6 4 9 5 7 7 CD 8 広 ) 3 0 3 8 9 2 8 6 8 8 4 8 8 8 6 8 8 8 8 8 1 9 9 9 9 9 0 2 ( 0 5 0 0 6 L.O 8 2 8 8 8 8 8 8 6 4 4 4 7 4 7 9 6 7 7 2 7 0 2 9 i ( 正規表現のフラグ )
索引 文字列リテラル 戻り値 ユーザー定義オブジェクト 郵便番号検索 JSONP 173 , 216 , 230 25 ユ二コード 22 , 25 97 要素 29 要素ノード 予約語 9 1 ライブラリ→ JavaSc 「 ipt ライブラリ 158 175 楽天ウエプサービス 32 227 145 リテラル 22 リレーショナルデータベース 204 ] 44 22 22 例外 74 例外処理 レコード ⅱ 8 連想配列 1 99 7 ローカル変数 95 論理演算子 37 論理式 9 1 80 6 実行文 じゃまにならない JavaSc 「 ipt 条件式 数値型 数値リテラル スーパークラス スコープ スコープチェーン スタイルシート ステートメント ひ 引数 ピクセル 正規表現 70, 143 , 1 55 正規表現リテラル 非同期処理 1 43 9 1 ビルトインオブジェクト セレクタ 言 (CSS) 宣言 ( 変数 ) フィールド フィルタ 50 ブール型 フォーム 複合型 ダイナミック HTML 46 浮動小数点 ブラウザ検知 ダイナミック sc 「 ipt タグ ] 6 1, 2 1 1 23 プラグイン (jQue 「 y) 代入 プリミティフ型 多態性 1 29 プロキシ プロック プロック要素 1 63 プロトタイプ継承 プロバティ (CSS) プロバティ ( オブジェクト ) ] 3 , 47 文 データ型 変数 データベース ] 36 , 144 テーブル 145 テキストノード 80 ポイント テキストボックス ボックスモデル ポリモーフィズム 同一ドメイン制限 同一文書内リンク 無名関数 同期処理 158 ドキュメントオブジェクト 32 トップレベル メソッド メタ文字 名前空間 名前の競合 文字コード モジュール ネストされた関数 文字列型 1 31 22 , 68 40 6 ノード 58 22 バース 22 配列 37 配列型 41 配列リテラル 42 ハック 86 ハッシュ の は ゆ す 32 2 1 6 XII よ 5 6 4 2 4 2 ら せ り そノた れ 5 5 5 2 6 6 4 3 2 9 2 ろ ちッっ一て 2 2 4 8 2 9 3 ほ 1 4 9 1 95 ] 29 と む め 38 80 72 な 43 も ね 1 88 22
第 7 日 / 1 時限目・簡単なデータベース POINT ワンポイント・アドバイス データの再利用性や加工のしやすさを考えれば、サーバー上のデータベースにデー タを保存するのが理想的です。しかし、データ数がそれほど多くなく、データの構造 も簡単な場合は、 XML や「第 8 日」で取り上げる JSON の形で、サーバーサイドプロ グラムから直接サーバー上に保存するという選択肢もあります。 perl や Ruby 、 PHP など代表的なサーバーサイドスクリプト言語は、 XML や JSON の形でデータを読み 込んだり書き込んだりすることができます。 【 XML データの例】 く ? 1 ve て s 工 0 れ = “ 1.0 “ encoding="utf—8" ? > く items> く土 tem 〉くれ amae > 青田一代く / れ amae > く add て ess 〉東京都北区西ヶ原 123 ー 456 く / add て ess > く / 土 tem 〉 く em><namae 〉今泉ニ郎く / namae 〉く add て ess > 京都府東京都市本町 123 -456 く / add て ess 〉く / 土セ em 〉 く土 tem > く namae 〉上原三津子く / れ amae > く add て ess 〉大阪市浪速区恵比 須東 123 ー 456 く / add て ess > く / 土 tem > “青田一代 % “今泉ニ郎 % </items> 【 JSON データの例】 {"item" : {"namae" 原 123 ー 456 “ } ′ 本町 123 -456 ′ 恵比須東 123 ー 456 “ } } "item": {"namae": “上原 "address": “東京都北区西ケ “ : “京都府東京都市 naddress 三津子 % "address" : “大阪市浪速区 この 2 つの例はどちらも同じデータを XML 、 JSON という異なる形式で記述した ものです。コンピュータ同士でテキスト形式のデータをやりとりする際、 XML が広く 使われてきましたが、最近ではよりコンバクトな JSON が好まれる傾向にあります。 「第 8 日」にも説明しますが、 JSON 形式は JavaSc 「 ipt のオブジェクトリテラル形式 でデータ構造を記述しているため、 JavaSc ⅱ pt で扱う際には形式を変換することな くそのままプログラムの中で使うことができ、効率的です。 まとめ 0 ユーザーがフォームで入力した文字列を正規表現として使う場合、 RegExp ( ) コンスト ラクタを使って日 egExp オブジェクト変数を作る。 0 フォーム内の要素から、その要素が含まれるフォームオブジェクトを参照するには fo 「 m プロバティを使う。また、フォームオブジェクトからその子ノードである要素の name 属性をプロバティに使って子ノードを参照できる。 147