第 1 日 / 1 時限目・ H 0 , world! 保存した 1 - 1 . htm を、ブラウザで開きます。 1 - 1 . htm をダウンロードして、エデイタで開きます。 テンプレートファイルを開く プログラムを作成する 屯 HTML 工テイタ HyperEdit- [ 1-1 上 tm よ 新 ) ァイル ( 月編集 ( E ) HTML(H) 登録 9 グ ( A ) ツ ( T) 表示 ( Ⅶワインドス明ア ( り イト目にに国◎回図回囲曲曲・・物① = ′ド B B / 第 0 畿第 ! DCH3 Y E H TM L18LIC xhtml l-transitional.dtd"> ↓ TD XHTML に 0 ransi い on 引 htt p : www . 響 .0 r N R Khtml 1 D D く html 引 ns : " http : / / 槻響・響 3 ・ 0 「 g / 1999 ム ht 引 " xml :lang: ja" lang="ja"» く head> ↓ く meta http-equiv:"Content-Type" content="text/html ;charset:utf-8" / > ↓ ください。 コードを記述する く / h いし↓ く /body>W く h 1 >He Ⅱ 0 , wo r 屋 ! く /h 1 〉↓ く bOdy 〉↓ く / head 〉↓ く t i tl e>He Ⅱ 0 , wo d ! くハ i いの↓ く /script> ↓ く script typez"text/javascript"> ↓ 次ページの「ソースコードの記述」を見ながらコードを書いて、保存して HTML 工テイタ HyperEdit- [ 1-1. h ー 新イル ( F ) 編隻 ( E ) HTML(H) 登録・ ( A ) T ) 表示 (V) アンドス切ア ( ? ) www ・ w3 ・ 0 rg R xht m Ⅱ D TD ht い : W C TD XH TML 1 . D T ran 引 t i on 引 E N く !DOCTYPE HTML PUBLIC 、トにに国◎回ロ目曲囲囲・・① ′ F B / 第 0 言 ? く t i tl e>He Ⅱ 0 , worl d ! く /t i い e> ↓ く /SC r i p t > ↓ ale rt ("He Ⅱ 0 , wo rl d ! ) , ↓ function hello() { / / 関を義↓ く script type="text/javascr i pt"> ↓ <meta http-equi v : " 新 n レ n ト T 2 " content:"text/htm l;charset:utf-8" / > ↓ く head> ↓ く html ns:"http://www ・ w3 ・ 0 「 g / 1999 な htm に xml: lang: ja" ng : 勹 a"> ↓ xhtmll-transitional . d い” > ↓ く / h 朝に↓ く /body> ↓ く bu tt on onc ⅱ ck:"he Ⅱ 0 ( ) ; " 〉こをクリック </butt on 〉↓ く h l>He Ⅱ 0 , 書 0 d ! く /h い↓ く body 〉↓ ↓ く /head 〉↓ ブラウザで動作を確認する ・・ Hello, wodd! - Mo Firefox File Edit View H to de!. に io. Hello, world! こをク丿ック 800kE TooIs HeIp 3

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 ページ

④各種ライプラリの充実 JavaScript は拡張性が高く、フレキシプルなプログラミング言語で、 Web プログラミ ングにおいてさまざまな機能を提供できますが、複雑なことをやろうとするとコードも 複雑になり、コーディング・デバッギングに時間がかかります。そこで、よく使われる コードを汎用関数の形にしてパッケージ化し、プログラムの中から呼び出して使えるよ うなライプラリが提供されるようになってきました。 JavaScript の言語としての機能で 足りないものを補完するための関数や、ユーザーインターフェースを提供するもの、 Ajax や DOM の操作を簡単にするためのものなど、さまざまなものが公開されています。 いずれも外部ファイルの形で提供されており、 script タグを使ってライプラリを組み込 んでから使います。 中でも普及率が高く、よく使われているのは Prototype (http://www.prototypejs.0「g/) Scriptaculous (http://sc 「 ipt. aCUlO.us/) の 2 つです。また、この他にも DOjO (http://dojotoolkit.0 「 g/) MochiKit (http://mochikit.com/) RiCO (http://openrico.0「g/) m00. fx (http://moofx.mad4miIk.net/) jQuery (http://jquery.com/) M00T00 (http://mootools.net/) Yahoo! UI (http://developer.yahOO.com/yui/) なども人気があります。これらをすべて詳細に解説しようと思ったらとても 1 冊の本に は収まらないので、本書では「第 9 日」で Prototype と Dojo 、 jQuery の一部を参考程度に 取り上げるだけにします。興味のある方は、オンラインのドキュメンテーションや解説 サイトなどを参照してください。 ⑤プロフェッショナルな JavaScript JavaScript が登場してから 20 開年代初頭頃までは、 JavaScript を使ってよく作られたの は個人ページでのさまざまなトリック的な仕掛けでした。文字が踊ったり、マウスカー ソルをアニメーション画像が追いかけたり、ページが遷移するときにさまざまなフェー ドアウトの仕方をしたりするのを見たことがある方も多いと思います。これ自体、ユー ザーにとって害がなければ個人の趣味としてとやかく言う問題ではありませんが、必要 性という点でははなはだ疑問のあるものが多く存在しました。 最近の傾向としては、 JavaScript を装飾的に使うよ勺も、 Web ページ・ Web アプリケ ーション本来の目的であるユーザーへの情報提供や商品の販売、ユーザーから入力され

テンプレートファイルは 第 5 日 / 1 時限目・ CSS とは 「コ template こちら く g src="5_cat_and_squirrel . 加産 " 引に " 猫とリス " ⅵ d [ h ニ・ ' 200 " h 酊 gh に勹 50 " わ↓ ・このレッスンのキーワード CSS float bO 「 de 「 C60 「 background marg 旧 padding プログラムを作成する テンプレートファイルを開く 5-1 . htm と 5 cat_and_squirrel.jpg をダウンロードし、 5-1 . htm をエデ ルイル ( F ) 第集 ( E ) HTML(H) 登録タア ( A ) ナルの表示 ) 第ンドス W ) HTML 工テイタ HyperEdit- -1 ・ h ー イタで開きます。 の一′ド第 / 、ト住にに試◎図回囲囲囲 H ML U L xhtml ト t 「 an 引い on 引 . dtd"> ↓ ransi ona 第 0 は ? ・ w3 ・ org TR ⅶいⅡ h は 0 : 鬥・・物 く html 引 ns : ” http : / ん . 響 3.0 「 g / 1999 / xh 朝に xml :lang:"ja" ng : 勹 a' ↓ く head> ↓ く meta http-equiv:"Content-Type" 00nt2 : 資 t / h を引 ; cha 僑 : u い一 8 ”わ↓ が庭にや。てきたリスと遣通し、↓ く d i わ 4 く hl>ßS と JavaScript く /hl> ↓ く body> ↓ く /head>J くいいの S と JavaS 師 ip いハ i い e > ↓ く / 幻の↓ く style type : 气日 xt な・・ ) ↓ ↓ コードを記述する 「ソースコードの記述」を参考にして、 CSS のコードを書き込みます。 第 HTM [ 工デイタ HyperEdit- に -1. h ] ファイ ) 編第 ( E ) HTML(H) 登録タク - ( A ) ナ 1 ) 表示 ( y ) アンドワ ( の一′ド B 第 / 4 トをにに試◎図国囲曲翻 ransl ー 0n3 xhtml ト tran 引い on 引 . dtd"> ↓ つ ( 、新 ア ( り を p: 書響響 3 . 0 「 R xh Ⅱ く html 区引 ns : ” h い p : / / ”響・響 3 ・ 0 / 円 39 / xh いに xml : ng : 勹 n 勹 a わ↓ く head> ↓ く neta h を tp 一日 iv : ・・ Con - T ? " con nt : " い / h いに cha 「氈に減 f -8 " / 滬 く st 幻 2 type: ー e / css ” > ↓ 臼 0 : lef い↓ margin-right: le 第い d i v { ↓ background: #fff : ↓ padding: 0 .5e 新↓ margin: 5px; ↓ bO 「 d 師 - bOt い lpx solid 加圓 : ” 0 { ↓ 臼 0 : r i ght い background : Ⅱ ght grey い width: 2 圓 px い height : 150P 石↓ border: lpx SOI i d 加圓 ; ↓ font-size: a Ⅱい く / st 幻の↓ ( いい S と JavaSc r i 誠くハ i いの↓ く /head> ↓ く body> ↓ く hl>ßS と JavaScript く /hl> ↓ く d i わ↓ く img c : ・・ 5 ーこ一 and ー squi 「「引・ jpg" alt が庭にやってきたリスと道通し、↓ : " 猫とリス " 響 idth : ” 200 ” h 曲に″ 150 " / 〉↓

10 最初に Web サービスおよび JSONP について簡単に解説したあと、 フォームに入力された郵便番号を使って他のサーバーから住所データを 日 取得し、フォームの住所入力欄を自動で補完するプログラムを作ります 今回のサンプルプログラムでは、「第 9 日」に学習した P 「 ototype を使 用します Web サービスとは 第 1 時限目 Web サービスとはごく大ざっぱに言えば、 HTTP プロトコルを使って他のプ ログラムとの間でデータのやりとりをするプログラムのことです。 Web サービス を利用するのに使われる API を、 Web サービス API または単に Web API と呼びま す。 Web サービスでやりとりされるデータの形式は XML が主流でしたが、最近 では JSON 形式のものも増えています。 有料のものや、企業が業務用にデータをやりとりする Web サービスもあります が、地図情報を提供する Google マップをはじめとして無料で一般に公開されてい る Web サービスも多く、その数は年々増えています。公開 web サービスで提供さ れている情報は、地図情報からサーチェンジン、辞書検索、さまざまな商品情報 検索、住所検索、レストラン情報検索、旅行サービス検索、書籍検索など多岐に わたっており、 Amazon や楽天市場など、アフィリエイトと組み合わせて使える ものもあります。 Web サービス API は、外部からのリクエストを受け入れ、それに対してデータ を返すための仕組みです。リクエストには HTTP GET メソッド (POST メソッド を使うものや HTTP 以外のプロトコルを使うものもある ) を使って、それぞれの Web サービス API で決められたパラメータの値を送り、サーバーからはそれに対 して XML や JSON 形式のデータを返す、というパターンが一般的です。 GET メソッドでパラメータを送信する場合は、 Web サービスのプログラム名 の後に ? を付け、それに続いて「パラメータ名 = 値」の形で、それぞれのパラメー タを & でつなげたものを送ります。パラメータの値は URI として使える文字コー ドでなければいけませんが、 UTF -8 コードはそのまま送れるため、 UTF -8 を使っ た Web ページからリクエストを送信する場合はエンコードをする必要はありま せん。 【総合制作Ⅱ①】 住所入力の自動補完 サービスと OØOZQ 【リクエスト URL の例】 http : //ー.yoshimeux.com/pj / ostal SO れ p. ashx? Posta1Code = 1600006 & Ca1 lback=cb 210

第 6 日 / 2 時限目・オプシェクト指向 JavaScript く form> キ昊氏く土 np Ⅱ t type="text" 土 d = " 0 。 size="15" 華氏く土れ p t type="text" id="f" s 土 ze = " 15 " / > 度 ( ) く input type="button" val 収 e = " 言十算する“ id="calc" / 〉 く /form> く /b0dY> く /html> 4-2. htm からの変更点は、すべての関数を無名関数にし、スクリプト全体を w ⅲ dow. onload イベントハンドラの中に入れることによってグローバル変数を排除した 点と、テキストボックスに onfocus イベントハンドラを設定して、入力のためにテキスト ボックスをクリックすると、もう一方のテキストボックスの値を空にし、「計算する」ポ タンの onclick イベントハンドラを書き換えるという点です。 この onc ⅱ ck イベントハンドラの書き換えはプログラム実行時に必要に応じて行われ、 どちらのテキストボックスに値を入力したかによってボタンをクリックしたときに異な る関数が実行されることになります。これがポリモーフィズムです。 POINT ワンポイント・アドバイス 2 時限目のサンプルプログラムでは無名関数を使うことにより、グローバルスコー プの汚染を回避しました。一方、 1 時限目のサンプルプログラムでは showP ( ) とい う関数だけがグローバルスコープに残っています。このような場合でも裏技として、 関数はそのままにしてグローバルスコープを汚さないようにする方法があります。 「第 2 日」の関数の項目で学んだ、関数リテラルをそのまま実行する方法です。 6-1 .js のプログラム全体を関数リテラルの中に入れ、 (function() { function showp ( index) { 三 ( 省略 ) という形にするだけです。見た目は余りスマートではないですが、グローバルスコー プの汚染は回避できます。この場合、関数はすべて大きな関数リテラルのスコープか らしか実行できないため、イベントハンドラの定義もサンプルのように、すべてプロ グラム内で行う必要があります。 このように関数の中で定義された関数を「ネストされた関数」と呼びます。ネスト された関数をイベントハンドラなどグローバルスコープのオブジェクトや変数に割り 当てると、元のスコープを保ったまま実行することができます。 JavaScript の関数 が、実行コードとそのコードが実行されるスコープの両方を備え持っという「クロー ジャ」と呼ばれる性質を利用したテクニックです。詳しくは、次ページのコラムを参 照してください。

第 2 日 / 3 時限目・関数 オブジェクトは基本的に無名 alert(" 「れ cl 」として宣言された関数です。“ ) , function funcl() { じことを違った書き方で書いていると言ってもいいでしよう。実験として に、メモリ上の別の場所に作り出された関数を参照させているだけです。どちらも同 で実際に行われているのはいずれも関数名として指定した識別子を名前に持つ変数 JavaScript ではオブジェクト ( 関数・配列を含む ) は基本的に無名であり、ここ f れ C2 funcl ー ー“たたの文字列 " ・ func 1 / / ncl の値を変数 fu れ c2 に代入 / / ncl に文字列を代入 / / f ncl という関数はもうないため、呼び出すとエラー funcl ( になる / / もともとれ c 1 として宣言された関数が実行される func 2 ( というコードを実行してみると、 function キーワードで宣言した関数名は単に関数 を参照している変数名でしかなかったことがわかります。 関数を実行するのではなく、データとして扱う場合は 0 を付けすに、 は関数もデータ ( オプジェクト ) の 1 つであり、変数から変数へと渡すことができます。 という書き方をします。この 0 は、関数を実行するという意味の記号です。 JavaScript で ale てセ ( “ He ーー 0 ′ wo て ld ! “ ) ー f れ ct 土 0 れ = he110 ( ) { var a = e110 ー のように書きます。 / / 実行するのではなくテータとして関数を扱う 関数に外からデータを渡して、そのデータを処理させる場合があります。この外から 関数に渡すデータを、引数 ( ひきすう ) と呼びます。引数は関数を呼び出すときに、関数 の識別子 ( 関数名 ) に続けて書く 0 の中に書きます。引数が 2 個以上あるときは、コンマ で区切ります。引数は、プリミテイプ型・複合型のどちらでも取ることができます。ま た、引数はリテラル形式で渡したり、変数の形で渡したりする場合もあります。 引数を使う関数を定義するときには、引数が入るべき場所に仮引数と呼ばれる変数を 書き、コードの中でもその仮引数を使います。実際にこの関数が実行されるときには引 数として渡された値が、仮引数に置き換えられて代入されて実行されます。仮引数はロ ーカル変数の一種ですが、関数定義の構文上から 0 内で書かれた時点で宣言されたもの と見なされるため、 var を付けて宣言する必要はありません。 引数は関数の中では自動的に arguments という配列変数に格納されるため、配列の要 素として参照することができます。たとえば、 a , b , c という 3 つの引数があった場合、関数 : 「ローカル変数」につい一 ーては、次の「変数のスー ーコープ」のところで説・ 明します。 39

第 6 日 / 1 時限目・じゃまにならない JavaSc 「 ipt 新 ) ァイル ( F ) 編隻 ( E ) HTML(H) 登録タグ ( A ) ト T ) 表示襾アンドワ ( 鴪ア ( り 第町 ML 工デイタ HyperEdit ヨ 5-2. h ] 「第 5 日」に作成した 5-2. htm を、エデイタで開きます。 ファイルを開く プログラムを書き換える つに墨宿 、国にに国マ◎図曰囲曲曲 ー′ F B 選 / は言 ? く !DOCTY HTML PI 旧 L xhtml l-transitional . dtd"> ↓ 響” . 響 3 .0 「 TR ⅶい一 ransit ional http: N く html x 引 ns : " h い p : / / 響” . 響 3.0 「 g / 1939 / xh いド ' xml :lang:"ja" langz"ja"> ↓ く head> ↓ く meta content="text/html ;charset:utf-8' ・ / 〉↓ く s い尾 type="text/css'> ↓ #st 0 ry p い border: sol id lpx # 0 圓 ; ↓ padd i ng : 1 em ; ↓ background: ivory; ↓ #story p ・ hidden { ↓ d i sp ー ay : none ; ↓ く / st ⅵの↓ ーく script type: text/javascript"> ↓ function showP(index) { ↓ document ・ getEIementById("story") ; ↓ var storydiv ー storydiv ・ getElements8yTagName("p"); ↓ var para for (var i 0 ; i く para ・ lengt h ; i + + ) { ↓ "block"; ↓ 引氈い para[i] ・ style . display く /SC r i pt 〉↓ ↓ く title 〉 CSS と JavaScript く /title> ↓ く /head> ↓ ↓ <body> ↓ く hl>CS*JavaScript く /hl> ↓ none on 引 ick:"showP(O);return f 引 ; " > その 1 く / a > ・く a href: <a href= " > その 2 く / a > ・く a href:' on 引 ick:"showP(2) ; return f 引 se ; " > その 3 く / a 〉↓ く div id="story"> ↓ く p 〉↓ ( 1 ) 猫が庭にやってきたリスと遁遇し、↓ コードを書き換える on 引 ick:"showP(l ) ;return false; ↓ ↓ よび 6-1 . js として別ファイルにして保存して、書き換えます。 6-1 . htm に変えて保存します。また、 CSS と JavaScript を、 6-1 . css お 「ソースコードの記述」を参考にしてコードを書き換えて、ファイル名を HTML 工テイタ HyperEdit- 1. ht 司 つ 0 、言にに国◎回図回囲囲囲・・① ー′ F B 第 / 第は言 ? イルの編集 ( E ) HTML(H) 登録タグ ( A ) ツ 0 ) 表示アンドスア ( り !D03TYP HTM 凵 C 3C DT XH L 1 . Transitional EN ht い : xhtmli-transitional . dtd"> ↓ く html xml ns : " http : ″響” .w3.org/1939/xh いド ' xml: lang="ja" lang:"ja"> ↓ く head 〉↓ く meta http-equiv:"Content-Type" content:"text/html;charset:utf-8" / 〉↓ 響 . W3 .0 「 g く script type:"text/javascript" src:"6-l.js"> く /script> ↓ <l ink rel:"stylesheet" type:"text/css" href="6-I.css" / 〉↓ xhtmll DTD ↓ く titIe>CSS と JavaScript く /title> ↓ く /head> ↓ く body 〉↓ く hl >CSS4JavaScript</h1>• く div : menu links"> く a h 「日 f : ”如 " id : " 2 ・・〉の 3 く / å : , く / di の↓ く div id:'story"> ↓ id ぎ℃ " > その 1 く / a > ・く a href="#l" id : " 10 その 2 く / a 〉・く a href 111

第 1 日 / 2 時限目・日付と時間 , 知りたい人はここをクリックく /span> ↓ 1 -2. htm をダウンロードして、エデイタで開きます。 テンプレートファイルを開く プログラムを作成する ファイ L•( 月編集 HTML(H) 登録タク ' ( A ) ートル ( T) 表示ーア沙つ ( 切明アの 電 HTML 工デイタ HyperEdit- -2 ′ F B 第 / 竺 6 は言 ? イト国にに国◎回図目囲囲囲・① Y H ML PU8L 3C DT XHTML 1 .0 Transi 田 n xhtmll-transitional . dtd"> ↓ く meta http-equiv:"Content-Type" content:"text/html ; ch 計氈に ut ト 8 " / > ↓ く head> ↓ く html x 引 ns : " ht い : / / ”響 . w3 ・ 0 「 g / 1999 / xhtm に xml : lang="ja" lang:"ja"> ↓ 印 M ーエデイタ HyperEdit- -2. htmj す。 コードを記述する く /html> ↓ く / body 〉↓ く hl 〉今、向時 ? く / hl > ↓ く body 〉↓ ↓ く /head> ↓ く t i t 尾 > 今、何時 ? くハ i t 尾 > ↓ く /script> ↓ く script type="text/javascript"> ↓ W W 響 . 豊 .0 r g K tml 1 TD 次ページの「ソースコードの記述」を見ながらコードを書いて、保存しま 新 ) ァイル旧。編集旧 HTML(H) 登録タグ ( A ) ナ月一表示アンドう ) = ′ F B 第 / 、ト国にに国◎回図曰囲囲囲 つ ( 、茎 彗 !DOCTYPE HT L IJ L xhtmll-transitional.dtd"> ↓ X ML 1 . ロ Transi iona\ 感ア ( の www ・ w . 0 「 TR xhtmll DTD t t p : 第は ? く html s ニ ' ' htt 卩 ://www ・ w3 ・ org/1939/)<html" メ m に lang="ja" lang="ja"> ↓ <head> ↓ く meta http-equiv="Content-Type" con : 負 t / ht 引 ;charset:utf-8" / 〉↓ く scr ipt type:"text/javascript"> ↓ var what t i 冊 : f unct i on ( ) { ↓ : new Date(); / / no 響という変数を宣言すると同時に Date オブジェクトを代入して初期化↓ var nOW now ・ getFullYear(); ↓ var year : now ・ getMonth() + 1 ; ↓ var month n0響・ getDate(); ↓ Var day now ・ getHours(); ↓ var hh now . getMinutes(); ↓ var msg : " 現在 " + year + " 年 " 十 month + ”月 " + day + 日 msg + : hh + " 時 " + mm + " 分です。 " ; ↓ document ・ getEIementById("cl ick_here") ・ innerHTML ー msg; ↓ く新 t 引〉↓ く /body> ↓ く span id= ・引 ick_here" on 引 ick:"whatt ime() ・ く hl 〉今、呵時 ? く / hl > ↓ く bOdY> ↓ く /head>8 く t i tl の今、何時 ? くハ i いの↓ く /script> ↓ ↓ ; ↓ ブラウサで動作を確認する 保存した 1 -2. htm を、ブラウザで開きます。 ま向時を一社加 w 引戒さな蜘 0 。挙 k 。内 k \ D - k に叩均 " 。 1 ¥ 1 ー 2 ー黼。は・・ htm マ与 LiveSearch ☆。 , 一員今、何時 ? 今、何時 ? 現在 287 年 12 月 17 日 7 時 58 分です。 ” , ッペス印“ 0 ツーノ地 ) マ 11

第 1 0 日 / 1 時限目・住所入力の自動補完 ~ Web サービスと JSONP 10-1 . htm と 1 0-I . js 、 prototype.js をダウンロードし、 1 0- l.js をエデ テンプレートファイルを開く プログラムを作成する 屯 HT Ⅶ工デイタ HyperEdit- 0- l.j - : 3 第篳 , イタで開きます。 つに茎 ′ F B B / 第は 翻万イル ( F ) 編集 ( E ) HTML(H) 登録タ牙し 10 ) 表示 (V) ワインドワ世 0 ア ( ? ) : f unct i on ( ) { ↓ Wi ndOW . ↓ unct ion call bac json 4 ト国にに上国◎回図目囲囲曲 「ソースコードの記述」を参考にして、スクリプトを書き込みます。 コードを記述する ) ァイ月編集 HTML(H) 登録タグ ( A ) , ナル ( T) 表示 ( の謝ンドス明アの 屯 HTML 工テイタ Hy 正 d にヨ 10-1 - ま第 : = ' 10-1 . htm を、ブラウザで開きます。 ブラウサで動作を確認する $$("head") [ 0 ] ・ appendChiId(scripteIem) ; ↓ ↓ sc r i pt e 尾第・ t ype "text/javascript"; SC r i pt e ー em . S rc 十 : "?PostalCode=" + $f("pcode" + "&Callback:callback"; ↓ SC r i pt 引 em ・ s rc http://www ・ yoshimeux ・ com/pj ostalJsonp ・ ashx"; ↓ var scriptelem document . createElement ("script") ; ↓ $("pcode") ・ onblur : function() { ↓ window. onload : function() { ↓ ↓ ↓ data ・ town; ↓ $ ( なレ t " ) . value . value : data ・ c i t y ; ↓ $ ()c i t y" . va ー ue data ・ pref; ↓ $("pref" var data : json ・ postalStruct; ↓ っ 0 墨 return false; ↓ alert(json ・ errorMessage); ↓ if !json ・ successes) { ↓ i f ! j son ) r et u rn f 引氈 ; ↓ unc lOn callback json 、国にに国◎回図囲曲囲・・ = ロ′ F 第 / 第 0 は言 ・住所の目動補完 - M 。ゴ firefox 住所の自動補完 ◆の , , 0 朝、全 ~ 、」 file///l , ロ , 。。 9 厄気 ファイル・ 0 一編集ー表示 (Y) 履歴 ~ ・に池・ブッケマークツルヘルプせ 郵便番号 : 都道府県 : 区市町村 : 町名・番地 : ( 例 : 000000 の 213