第 6 日 / 1 時限目・じゃまにならない JavaScript if 文の条件式にオプジェクトを入れたオプジェクト検知を使わずに、「第 3 日」に出てき た try - catch() 文による例外処理 ( 65 ページ ) を使っても同じことができます。 window. onload = function ( ) { showP ( this . fO て (var var try { 土 d menulinks . onclick = function( ) { く menulinks . length; 土 + + ) ( "menu links “ ) . getE lementsByTagNatne ( "a" ) ー document . getE 1 ementBy 工 d 土 f は ) { て e セて n false; 119 場合だけコードが実行されるようにする。 ト・メソッドを使う場合は、 if 文でオブジェクト検知を行い、オブジェクトを検知した CDOM メソッドなど、ブラウザによっては実装されていない可能性のあるオブジェク の宣言を書き換える。 ecss をスクリプトで操作している場合、 JavaSc 「 iPt が使えない環境を考慮して CSS されるようにする。 0 oad イベントハンドラとして記述し、 HTML 文書の読み込みが完了した時点で実行 て無名関数の形で宣言する。さらに、イベントハンドラの宣言自体を、 windows. 0 イベントハンドラを JavaSc 「 ipt 内で設定するには、イベントハンドラをメソッドとし やすくなる。 OJavaSc 「 ipt と CSS は別ファイルにすると HTML が見やすくなり、メンテナンスもし まとめ 数の割り当てが中止されます。 工ラーイベントが発生し、 return false ; の文が実行されて 0 ⅲ oad イベントハンドラへの関 プラウザが document. getElementById 0 などの DOM メソッドに対応していない場合、 て et てれ false; } catch ( e ) { llnOne ー TagName("p") [ 土 ] . style . display document . getE 1ementById( “ s セ 0 て Y “ ) . getElementsBY

く /head> く bodY> くゎカウンタ変数く / h ゎ <button> クリックく / b セ tO れ > く /b0dY> </html> のように変えると、 onload ( ) 関数のローカル変数である counte 「および trueF se がその関数の中にネストされた関数リテラルの中で使われ、さらにその関数がグロー バルスコープにあるドキュメントオブジェクトの onc ⅱ ck プロバティに結びつけられ たおかげで、 onload ( ) 関数の実行が終了した後も、ネストされた関数がグローバル スコープで実行待ちの状態になっているため、 onload ( ) のローカルスコープが消え ずに残り、その結果 2 つのローカル変数もメモリ上に残り続けることになります。図 にすると、次のようになります。 【クローシャを利用したローカル変数の保持】 グローバルスコープ 関数 A ローカル変数 x 関数 B 関数 B オブジェクト オブジェクト 関数 A の実行時に、関数 B がグ ローバルスコープにあるオプジ ェクトなどに結び付けられる 関数 A の実行終了後も、関数 B は関数 A の実行コンテクストを 持ったまま ( ローカル変数も保 持したまま ) 実行を待つ JavaSc 「 ipt の関数は定義されたときの実行コンテクスト ( スコープ ) を持ち続け るため、このようなことが可能になります。また、このローカル変数はグローバルコ ンテクストからはアクセスできないため、名前空間の衝突によって勝手に書き換えら まとめ れる心配もありません。 13 ローバルコンテクストで実行することができる。 た関数をグローバルオブジェクトに割り当てると、ローカルスコープを保持したままグ CJavaSc ⅱ pt の関数はクロージャであるという性質を利用して、他の関数にネストされ 化するとプログラムがわかりやすくなり、グローバル変数を減らすこともできる。 同じようなコンセプトを持つ関数を 1 つのオブジェクトの下にメソッドとしてグループ う方法がある。 数をオブジェクトのメソッドにしたり、イベントハンドラに無名関数を割り当てるとい グローバルスコープの汚染を回避するには、グローバル変数を使わないこと以外に、関

第 2 日 / 2 時限目・オプジェクト 使えは、 JavaSc 「 ipt でも簡単にクラス継承が行えるようになります。詳しくは「第 9 ットが薄れてしまいます。ところが「第 9 日」で紹介する JavaSc 「 ipt ライブラリを まねることはできますが、コードが煩雑になり、効率性というクラス継承本来のメリ JavaSc 「 ipt でも p 「 ototype をコピーするなどして、プログラム的にクラス継承を うことによってプログラムの重複部分を省き、効率的なプログラミングができます。 テイだけを差分としてそれそれのクラスで定義することを言います。クラス継承を行 ロバティをそれぞれのクラス ( サブクラス ) が継承し、共通でないメソッドやプロバ が継承したように ( プロトタイプ継承と言います ) 、スーバークラスのメソッド・プ JavaScript でコンストラクタの p 「 ototype のメソッド・プロバティをオブジェクト ィがあるときに、重複した共通部分を別のクラス ( スーバークラス ) として作り、 の機能がありません。クラス継承とは、 2 つのクラスに共通するメソッド・プロバテ ただし、 JavaSc 「 ipt では他の多くのオブジェクト指向言語と違って、「クラス継承」 クラスの定義であると言っても間違いではありません。 ティのひな形・設計図のことです。その意味では、 JavaScript のコンストラクタは オブジェクト指向言語における「クラス」とは、オブジェクトのメソッドとプロバ わないことにしました。 いる意味でのクラスの概念がないため、本書では「クラス」という用語をなるべく使 が使われることがあります。しかし、 JavaScript では Java や Ruby などで使われて JavaSc 「 ipt の本などでときどき、「 Date クラス」や「 Math クラス」といった言葉 プロトタイプ継承とクラス継承 0 オブジェクトは、 JavaSc 「 ipt の最も基本的な構成要素。 まとめ 日」を参照してください。 クタの prototype プロバティを参照している。 持つ。この p 「 ototype プロバティは、そのオブジェクトを作る際に使われたコンストラ ・すべてのオブジェクトは、自動的に p 「 ototype というオブジェクトをプロバティとして を指す。 タやリテラルの中では this というキーワードを使って、これから作られるインスタンス 0 実際にメモリ上に作られた具体的なオブジェクトをインスタンスと呼ぶ。コンストラク 使った方法とがある。 ・オブジェクトを生成するにはオブジェクトリテラルを使った方法と、コンストラクタを

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 を返す

4.01 あるいは XHTMLI. 0 以降に準拠した HTML を書くことが必須になります。 具体的には、 XHTML 1.0 の場合であれば、次の例のように必ず HTML のヘッダ部分に DOCTYPE 宣言をし、Ⅱ TML タグは小文字で書き、またタグは必ず閉じるようにしてく ださい。 く ! DOCTYPE HTML PUBL 工 C “ - / /W3C/ /DTD XHTML 1.0 TransitionaI//EN" "http / / ー . w3 . org/TR/xhtmII/DTD/ 、 ht011- t = 000 土 t 土 0001. dtd:> く tml >anlns="http: / / ー . w3 .0 て g / 1999 / ⅶ tml “ zanl:lang="ja" lang=nja"> <head> <meta name="Content—Type" content="text/html ー charset=utf—8" / 〉 く script type=l'text/javascript"> a 1 ert ( “ He 1 10 ′ wo て 1 d ! “ ) ー </script> JavaSc 「 ipt のコード く t 土 tle 〉 10 日でおぼえるご avasc て土 pt 入門教室く / ti セ le > く /head> <b0dY> くわ 10 日でおぼえる JavaScript 入門教室く /hl> く /bodY> </html> 三 ( 省略 ) JavaScript のコードはこのように、 head 部分に script タグで囲んで書くか、あるいはコ ード部分だけ外部ファイルにして ( 拡張子は js ) 、 head 部州こは く sc て土 p セ type="text/javascript'l s て c = ” el 10W0 て ld. ” > く /script> のように src = 以下で js ファイルを指定します。同じコードを複数のページで使うときに は外部ファイルの形にすれば、コードを修正するときに 1 つひとつの HTML ファイルを 修正しなくて済むのでメンテナンスが楽になります。また、 1 つの HTML ファイルだけ でしか使わない場合でも、最近は HTML は文書の構造記述だけに特化して、スタイルシ ート (CSS) および JavaScript を外部ファイルに分離するというスタイルが推奨されるよ うになってきました。 この例では、文字コードは UTF -8 ( ユニコード ) を使っています。 Ajax プログラミン グでは、 UTF -8 でコードを書くと文字化けなどのトラブルが回避できるため、なるべく UTF -8 を使うようにしてください。お使いのエデイタが、文字コード設定や、あるいは 保存するときのオプションとして UTF-8 を指定できるようになっていれば可能です。

0 ⑨ 0 ② 0 JavaScript で計算をする 67 1 時限目数値と文字列 2 時限目数値の計算 68 76 CSS と JavaScript 1 時限目 CSS とは 2 時限目 HTML 要素の表示 / 非表示の切り替え 3 時限目 HTML 要素の大きさを変える 85 6 8 4 8 9 0 JavaScript プログラミングの新しいスタイル 1 時限目じゃまにならない JavaSc 「 ipt 2 時限目オブジェクト指向 JavaSc 「 ipt 1 09 ・・・ 1 1 0 ・・・ 1 20 総合制作 I 1 時限目簡単なデータベース 2 時限目プルダウンメニュー形式のフォトアルバム 1 35 ・・ 1 36 ・・ 148 Ajax の基本 1 57 1 時限目 Ajax のしくみ 2 時限目簡単な Ajax ・・ 1 58 ・ 1 64

著者紹介 ◎ 岡田克司 おかだかっし ・落丁・乱丁はお取り替えいたしますので、 03-5362-3705 までこ連絡くだ ずに、いかなる方法においても無断で複写、複製することを禁じます。 フトウェアおよびプログラムを含む ) 、株式会社翔泳社から文書による許諾を得 ・本書は著作権上の保護を受けています。本書の一部または全部について ( ソ ◎ 2008 KATSUSHI OKADA 印刷・製本日経印刷株式会社 (http://www.shoeisha. CO. jp/) 発行所株式会社翔泳社 発行人佐々木幹夫 著者岡田克司 2008 年 2 月 4 日初版第 1 刷発行 新 Jav Scri t 入 5 教室 1 日でおほえる DTP オペレーション有限会社テクスト ブックデザイン株式会社アレフ・ゼロ ( 宇田俊彦 / 鈴木住枝 ) http://www.shoeisha.com/book/hp/IOdays/ にて訂正内容をお知らせいたします。こ利用ください。 ドや本文の誤記などで訂正が発生した場合には、下記ホームページ 本書の内容確認には十分気を付けていますが、万一プログラムコー 「 1 0 日でおぼえる」のホームページ (2001 年 ) 、「逆引き JavaSc 「 ipt 」 ( 2003 年 ) ( いずれも工学社 ) など。 およびウクレレ演奏、写真、チェス、天体観測など。沖縄小林流空手 ] 級。主な著書に「基礎からの JavaSc 「 ipt 」 最近興味のあるテーマは集合知・データマイニングなど。趣味は旅行、オペラ鑑賞、映画鑑賞、三線 ( さんしん ) (SAS 、 RATS 、 Stata 、 Gauss) をはじめ、 SQL 、 PHP 、 VisuaI Basic 、 Java 、 C + + 、 VBA 、 RubY など。 サイトを作りはじめ、趣味が高じて独学で JavaSc 「 ipt を習得。プログラミング経験は専門の統計プログラミング 攻分野は計量経済学・国際経済学 ) 。現在アメリカ・カリフォルニア州べイエリア在住。 1 995 年から趣味で Web 愛知県生まれ。東京外国語大学卒業。大手銀行勤務を経てミシガン州立大学大学院へ留学 ( 経済学 Ph. D 課程 : 専 さい。 ・本書の内容に関するお問い合わせについては、 ンに従った方法でお願いします。 ー SBN978-4-7981-1434-7 オ : 書 ii / ヾ ージ記載のガイドライ P 「 inted in Japan

第 10 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP ワンポイント・アドバイス シフト』 S など、 UTF-8 以外で書かれた日本語文字列がバラメータの値に含まれて いる場合は、 URL として送る前に JavaScript の encodeURI ( ) 関数を使ってエンコ ードする必要があります。ただし、前記の例のように半角アルファベットや数字など アスキー文字だけからなる場合は、エンコードの必要はありません。 でした。しかし、次に紹介する JSONP の登場によって、 JavaScript だけを使って Web サ ングを知らない一般個人がホームページで使うには Web サービスはハードルが高いもの サイドプログラムの実行環境がなければ Web サービスを使うことができず、プログラミ てきました。したがって、サーバーサイドプログラミングの知識があり、かっサーバー プロキシ (proxy) を経由させることによってこの制限を乗り越えるという方法が取られ XMLHttpRequest のクロスドメイン制限があるため、間にサーバーサイドプログラムで ます。 Aj ax で動的に Web サービスを使う場合は、「第 8 日」にもふれたように サービスにリクエストを送り、返されたデータを HTML 形式に変えてプラウザへと送り 静的な Web サイトで Web サービスを使う場合は、サーバーサイドプログラムから Web JSONP とは ービスを利用することができるようになりました。 XMLHttpRequest のクロスドメイン制限の不便さを回避して、 Web サービスを利用す るための方法として考え出されたのが JSONP というデータ形式です。 JSONP という名前 からも想像できるように、これは基本的に JSON 形式のデータであり、 JSON と違うのは、 JSONP では JSON データを引数として入れた関数そのものをデータにしているという点 です。 【 JSONP の例】 cal lback( { “工 tem" : "Author": " 岡田克司“ } ) JSONP は、ダイナミック script タグと組み合わせて使われます。ダイナミック script タ グとは、 JavaScript プログラムで動的に script タグを生成する手法のことです。 script タ グの src 属性では、 HTML 文書が置いてあるサーバーとは別のサーバーにあるスクリプ トプログラムでも読み込むことができます。これを利用して、 src 属性の中に JSONP を返 す Web サービス API のリクエスト URL を書いて script タグを生成すると、サーバーから 返ってきた JSONP 形式の関数が自動的に実行されます。また、ダイナミックに script タ グを生成することにより、ページ遷移をすることなしに JavaScript 関数を JSON データの 引数とともに読み込んで実行することができるため、 XMLHttpRequest オプジェクトを 使ったのと同じように非同期処理が行えるというわけです。 JSONP ではあらかじめ渡す関数名が決まっている場合もあれば、自分で関数名を決め " 10 日でおほえる avasc て ip セ入門教室 " ー JSONP は、 JavaScr : ー ipt Object Notation ー ー with Padding の略で す。

6 JavaScript ライプラリの利用 このサンプルプログラムでは Ajax の基本的な仕組みを理解するために、自分で JavaScript のコードを書いて XMLHttpRequest オプジェクトを操作しました XMLHttpRequest オプジェクトの操作が、いかに煩雑であるかがわかったことと思いま す。「第 9 日」で取り上げる各種 JavaScript ライプラリでは、この Ajax プログラミングの 面倒な部分をライプラリ側で行ってくれ、プログラミングの煩わしさを軽減してくれる Ajax 専用のメソッドが用意されています。「第 9 日」「第 10 日」では、 JavaScript ライプラ リを使った Ajax のサンプルを紹介します。 ータを読み込む方法もあります。これについては、「第 IO 日」に取り上けます。 隠しフレームを使う以外にも、ダイナミック sc 「 ipt タグを使って JSON 形式のデ CSS で非表示 ( dis ay プロバティを none にする ) にするという方法もあります。 一般的です。また、フレームの代わりにインラインフレーム (iframe 要素 ) を使い、 ってきた結果を表示されているほうのフレームに表示する、などの使い方をするのが 隠しフレームに読み込むファイルの中のフォームをスクリプトを使って操作し、返 うにするものです。 にし、さらにフレームのリサイズを禁止 (noresize) することによって表示しないよ ムはこのうちどちらか 1 つのフレームの幅 ( または高さ ) をゼロにして枠の太さを O 画面の上下または左右に別々の HTML ファイルを読み込むものですが、隠しフレー 広まる以前に使われていたのが、「隠しフレーム」を使う方法です。フレームは通常、 XMLHttpRequest を使う以外にも、非同期処理を行う方法があります。 Ajax が 隠しフレームを使った非同期処理 まとめ を使って JavaSc 「 ipt のコードとして評価した上で、変数に渡して処理する。 こ ) JSON データは「 esponseText に文字列として格納されているため、 eval ( ) 関数など タを記述したものである。 CJSON は、 JavaSc 「 ipt の配列リテラルまたはオブジェクトリテラルと同じ書式でデー 周 ax でデータをやり取りする場合は、 XML または JSON 形式が使われることが多い。