・このレッスンのキーワード フィルタ appndT0 ( ) attr ( ) text ( ) html() empty ( ) $ (document) . ready ( ) click ( ) $. getJSON ( ) $. each ( ) jQue 「 Y を使ってプログラムを作る テンプレートファイルを開く 9 -3. htm と 9 -3. js と jque Ⅳ . js をダウンロードし、 9-3. js をエデイタで開 きます。 屯 HTML 工テイタ HyperEdit- [ 9-3 第 ; 瞽鴛 ファイル旧編集 ( E ) HTML(H) 登録・ ( A ) トル ( T ) 表示凹ワインドスア ( り = ロ′ F 習 B / にに 国マ◎回図目曲囲 OCument ・ ready unct ion 彗 ↓ コードを記述する 「ソースコードの記述」を参考にして、 9 -3. js にスクリプトを書き込みま す。 屯 HTML 工テイタ HyperEdit ・卩 ? ー新ファイ日編集 ( 印 HTNIL(H) 登録タア ( A ) ル 0 ) 表示アンドス w ) 贋ア ( り 第竺 0 = ロ′ F 魅 / 、ト国にに試◎回図曲 document . 「 ea y unction $('#getdata") . click(function() い $ ・ getJSON(v funct ion(data),åol utputdiv") . len (h) { ↓ $("#outputdiv" ・ empty(); ↓ } 引 se { ↓ $(" く div/>") ・ attr("id"'"outputdiv") ・ appendTo("bodY"); ↓ $(" く table/>") . attr("border","l") . att r("id","kekka") ・ appendTo("#outputdiv" ・′く capt ion/>") . text に取り込んだデータつ・ appendTo ("#kekka' " く t r > く th 〉名前く / th 〉く th 〉イ主所くハ h 〉く / t r>") ・ appendTo ("#kekka" ; ↓ $ ・ each(data, function(){l $ ( " く tr / 〉 " ) . ht 引 (" く td>" + this ・ namae + " く /td><td>" + this ・ address + ”くハ d ゾ ) . appendTo("#kekka") ; ↓ re t u rn f a ー se ; ↓ っ 0 ↓ 200
Prot0type を使ったクラス継承 「第 2 日」 2 時限目のコラムで、クラス継承について触れました。 Prototype では Class. create ( ) メソッドを使い、 JavaSc 「 ipt でのクラス継承をシミュレートする 機能があります。 ここでは、 Cat と Dog という 2 つのクラスを例として、共通部分を Anim 引という スーバークラスから継承する方法を説明します。まず、 Cat も Dog も同じ name とい うプロバティと、 say() というメソッドを持っているとします。クラス継承をせずに て et てれ“ワンワンと鳴く“ say: function( ) { name ー this . れ a.me 土れ土 t 土 al 土 ze : function(narne) var Dog = Class . create( { ニャーと鳴く“ return say: function( ) { れ ame ー this . れ a.lne initialize: function(name) var Cat = C1ass . create({ 2 つのクラスを定義すると、 スーバークラスとして Anim を定義し、それを Cat と Dog が継承する場合は以下 と思います。 のようにします。クラスの定義で重複部分が多く、無駄なことをしているのがわかる var コ Ody = new Dog ( “ンヨアイー“ ) ー ginta new cat いギン太“ インスタンスを生成するには、クラス名をコンストラクタとして使い、 でプロバティを定義します。 this . フ。ロハ。ティ名 の形式で受け取ります。コンストラクタの定義の中では、通常の場合と同じく、 メソッド名 : 関数 ティ名でコンストラクタを受け取り、メソッドも同様に となります。 CIass ℃「 eate ( ) の引数はオブジェクト形式で、 initialize というプロバ initialize: function(name) C1ass . create({ var Anima 1 のようになります。
第 2 日 / 1 時限目・変数と配列 複合型とは、 1 つの変数に 2 つ以上の値を格納できるタイプのデータ型です。オプジェ クト型 (object) 、配列型 (array) 、関数型 (function) があります。複合型のデータをメ モリ上に生成するときには、 new というキーワードに続けてコンストラクタを呼び出す か、リテラルを使います。オプジェクト型のコンストラクタは Object 0 、配列型のコン ストラクタは Array 0 、関数型のコンストラクタは Function 0 ですが、オプジェクトには Object 0 以外にも Date 0 など複数のビルトインオプジェクトのコンストラクタがあり、 さらにプログラマが自分で定義してオプジェクトを作ることもできます。関数はコンス トラクタを使って定義することはまれで、普通は「第 1 日」で見たように 、 function とし、 うキーワードに続けて関数名を付けて定義するか、関数リテラルを使います。これら複 合型についてはこの先、それぞれ個別に取り上げます。 【複合型データの生成法】 オブジェクト型 配列型 関数型 データ型 new Object ( ) ( あるいは その他のコンストラクタ ) new Ar 「 ay ( ) new Function ( ) コンストラクタを使う方法 リテラルを使う方法 { プロバティ : 値・・ , メンツド . function ( ) { … function ( ) {. 」 変数への値の代入 3 プリミテイプ型の最大の特徴は、それぞれの値が独立していることです。言い方を変 ます。 変数に値を格納することを、「代入する」と言います。代入には、 = 記号を使い 別のものです。そのため、変数 b を操作して b の値を変えても変数 a の値は変わりません 新しくメモリ上にコピーされた値 ( データ ) であり、もともと a が持っていたデータとは に a の値を渡した場合、 b にも同じ 18 という数値が代入されますが、 b に代入されるのは 得ないということです。たとえば、 a という変数に 18 という数値を代入し、 b という変数 えれば、メモリ上にある 1 つの値を 2 つ以上の変数が同時に持っ ( 参照する ) ことはあり ( 次ページの図版参照 ) 。 10 0 ー b + = 50 ー / / a の値を b に代入 / / b の値に 50 を加える alert()a の値は“ + a + “、 b の値は“ + b); これに対して、複合型データの場合は変数から変数へ値を代入した場合、実際に渡さ れる値は元のデータの参照値 ( メモリ上のアドレス ) だけで、 2 つの変数が指し示すもの はメモリ上にある 1 つのデータです。したがって、片方の変数を操作してデータの値を変 えた場合、もう 1 つの変数の中身も変わることになります ( 次ページの図版参照 ) 。
ここでは関数の仕組みや性質について、少し詳しく学びます。引数と 仮引数の関係や、戻り値がある関数とない関数の違い、変数のスコープ などは非常に重要なので、ここでしつかりと理解しておいてください。 ・このレッスンのキーワード 関数リテラル 引数 戻り値 return 仮引数 変数のスコープ グローバル変数 ローカル変数 スコープチェーン 名前空間 関数の生成 第 日 【変数・配列・オブジェクト・関数 3 】 時限目 関数 関数を定義するときは一般に、 function というキーワードを先頭にして function 関数名 ( ) { 実行されるコード と書くか、あるいは変数に関数リテラルを代入する形で var 関数名 = function() { 実行されるコード のように書くのが一般的です。前者を、特に関数の宣言と呼びます。また、関数リ テラルのことを名前のない関数という意味で無名関数と呼ぶ場合もあります。 引数と戻り値 関数を実行する際には、 関数名 ( ) 38
く ! DOCTYPE HTML PUBLIC “ - / /W3C/ /DTD XHTML 1.0 TransitionaI//EN'I "http: / / ー . w3.org/TR/xhtm11/DTD/ xhtmll-transitional . dtd"> く tml >anlns="http: / / . w3 .0 て g / 1999 / xhtml “ zanl:lang='l)al' lang="ja"> く head> く meta http—equiv="Content—Type" content="text/htmI;charset=utf—8" / 〉 <script type="text/javascript"> window. onload = f れ ct 土 0 れ ( ) { var ce ISiUS = document . getE1ementBy 工 d ( ) ー var fahrenheit = document . getE1ementBy 工 d ( “ ) ー var calc = document . getElementBy 工 d ( ) ー function( ) { Ce1SiUS . onfocus fahrenheit . value calc . onclick = function() { if(celsius . value (Number(ce1sius . va1ue)*9/5 + (2) . toFixed(O); fahrenheit . value isNaN(Number(ce1sius . value) ) ) return false; fahrenheit . onfocus Ce1SiUS . function ( ) { calc . onclick = function() { if ( fahrenheit . value 32 ) * 5 / 9 ) . toFixed ( 0 ) ー ( (Number(fahrenheit . value) - isNaN(Number(fahrenheit . value) ) ) return false; く b0dY> く /head> く t 土 tle > 温度換算フォームく / t 土 tle > </script> 130 く /P> 摂氏・華氏いずれかの温度を入力してください : く P 〉 く hl > 温度換算フォームく / hl 〉
ソースコードの記述 【 9-1 js 】 ( 書き換えた後 : 濃い青字の部分を書き加えてください ) function requestData ( ) { new Ajax. Request("8—2. txt'l method : "get “′ onSuccess: function(d) { try { var dataset = d. responseText . evaIJSON ( ) ー } catch ( e ) { a 1 ert ( e ) ー return false; "<table border= ー 1 ー〉く caption > 取り込 var 0 毯セ put んだデータく / caption > ”く t 〉名前く / t れ〉く th > イ主戸万く / セ h>' output + = fO て (var 0 ー土く dataset . length; 土 + + ) { OUtput + = ”く t て > く td > “十 dataset . れ amae 十 ”く / セ d > く td 0 tp セ + = dataset[i] . address 十”く / t て > ”ー “く / tab 1 e > " output + = if($("dboutput")) { $ ( ” dboutput ” ) . innerHTML } e 1 se ( var outputdiv = document . createElement ( “ d 土 v ” outputdiv. id "dboutput “ー $$ ( "body" ) [ 0 ] . appendChi ld (outputdiv) ー $ ( "dboutput “ ) . innerHTML = output ー 182 ale てセ ( " データが見つかりませんでした。 onFaiIure: function( ) {
第 8 日 / 2 時限目・簡単な Ajax プログラムを作成する 8-2. htm 、 8-2. txt 、 8-2.js をダウンロードし、 8-2. js をエデイタで開き テンプレートファイルを開く ます。 屯 HTML 工テイタ HyperEdit - 2 剃。を = 学を物物 イル ( F ) 編集 ( E ) HTML(H) 登録タグ ( ) ツ - ル ( T ) 表示 (V) ア ) ドワ ) つ ( 、茎彗 funct ion requestData 、ト国・にに コードを記述する ↓ 国マ◎回ロ曰囲曲囲 ア ( り 第ロロ 「ソースコードの記述」を参考にして、スクリプトを書き込みます。 = 屯 HTM ュテイタ HyperEdit.,-4.jsl ・黶 新ファイル旧編集 ( 印 HTML(H) 登録タグ ( A ) ツ - ル 0 ) 表示ワインドワ ( つぐ第阜 三に国◎回ロ曰囲曲 unction requestData ア ( り 登回一 は言竺 ? if(window. ActiveX0bject) { ↓ try { ↓ var xmIHttp catch(e) { ↓ var xmIHttp new Act iveXObject ("Msxm12. XMLHTTP") ; ↓ new Act iveX0bject ("Microsoft . XMLHTTP") ; ↓ } else i f (window. XMLHttpRequest) { ↓ var xm lHttp - new XMLHttpRequest ( ) : ↓ ↓ xmlHttp . open("GET" " 8-2 . txt つ ; ↓ xmlHttp . onreadystatechange : function() い if((xmlHttp.readyState : 4 ) & & (xmlHttp.status ー : 2 圓 ) ) い eval (xmIHttp ・ responseText ) ; ↓ var dataset "<table border='l ' 〉く caption > 取り込んだデータくな aption 〉 ; ↓ var output output + : " く th 〉名前く / th > く th 〉仼所く / th 〉 " い for(var i 0; i く dataset ・ iength; i + + ) { ↓ output + : " く tr> く td>" + dataset[i] ・ namae + " く /td> く td>"; ↓ output + : dataset[i] ・ address + " くハ r 〉 " ; ↓ output + : " くハ ab 尾 > " ; ↓ } else if((xmIHttp . readyState : 4 ) & & (xmlHttp ・ status found f a 尾 8 ; ↓ var output : " データが見つかりませんでした。 } 引 se { ↓ var output : " データ取得中 ' if (document ・ getEIement8YId("dboutput")) { ↓ : 4D4 ) ) { ↓ : document . getEIement8Yld("dboutput")u var outputdiv outputdiv . innerHTML : } 引 se { ↓ document . createElement("div"); ↓ var outputdiv "dboutput"); ↓ outputdiv . setAttribute("id" document ・ getEIements8YTagName("bodY")[0] . appendChild(outputdiv); ↓ outputdiv . innerHTML : output; ↓ xmlHttp . send(null); ↓
第 6 日 / 1 時限目・じゃまにならない JavaScript 【 6-1. css 】 ( 不要部分を削除した後 ) #story p { border: S01 土 d 10X # 000 ー padding : lem; background : ivory; 【 6-1. js 】 ( 濃い青字の部分を書き加えてください ) function sh0WP ( index) { if ( ! document. getE1ementBy 工 d Ⅱ ! document . getE IementsByTagNaxne) return fal se; var storydiv = document . getEIementById ( "story" ) ー stO て yd 土マ . getE1ementsByTagName ( ) ー para 0 ー i<para. length; 土 + + ) { fO て (var 土 index ) { if ( 土 "block"; e 1 se { window. 0 れ 1 oad . style . display . style . display function( ) { if ( ! document. getEIementById Ⅱ ! document. getE1ements ByTagName ) て e セⅡて n fa 1 se ー menulinks [ 土 ] . onclick = function( ) { i<menulinks . length; 土 + + ) ( "menu 1 inks “ ) . getElementsByTagName ( "a" ) ー document . getE 1 ementBy 工 d ShOWP (this . (d) ー fO て (var 土 return false; if は ) { / / i の値が 1 以上の場合に true になる document . getE1ementBy 工 d ( “ s セ 0 て y ” ) . getEIementsByTagName("pII) [ 土 ] . style . display 115
ソースコードの記述 【 10-1 js 】 ( 濃い青字の部分を書き込んでください ) function callback(json) { if(!json) return false; if(!json. successes) { alert (json. errorMessage) ー return false; var data = json. postaIStruct; $ ("pref") . value = data. pref; $("city") . value = data . city; ( "streetll ) . value = data . town; w 土れ dow. onload = function ( ) { function( ) { $("pcode") . onblu て scriptelem. src "http: //www.yoshimeux. com/pj / / / sc て土 pt 要素を生成 var scriptelem = document . createElement ( l'script" ) ー "&Ca ー lback=ca 1 lback" ー "?Posta1Code= scriptelem. src 十 = ostal こ SO れ p. as x ” 214 く /script> く script type="text/javascript" s て c = ”て OtOt e . コ s"> html; charset=utf-8 “ / 〉 く meta http—equiv="Content—Type" content= "text/ く head> く tml 1 れ s = “ ttp : / / . w3.0 て g / 1999 / x tm い一 1 : lang= xhtmll-transitional . dtd"> Transitiona1//EN" "http: //ー . w3.org/TR/xhtm11/DTD/ く ! DOCTYPE HTML PUBL 工 C “ - / /W3C/ /DTD XHTML 1.0 【 10-1. htm 】 ( 変更する必要はありません ) / / sc p セ要素を head 内に追加 $$("head") [ 0 ] . appendChi1d(scripte1em) ー scriptelem. type "text/)avascriptll ー
this . れ arne name ー say: function( ) { て et Ⅱてれ“と鳴く“ var Cat = C1ass . create ( 土 mal を { say: function ( $super) { return マ a て Dog = C1ass . create(Anima1, { say: function ( $super) { return ”ワンワン“ + $ super ( ) ー 第 9 日 / 1 時限目・ Prototype オーバーライド / / say ( ) メソッドの オーバーライド / / say ( ) メソッドの クラスを継承する場合、この例のように CIass. c 「 eate ( ) メソッドの第 1 引数でス ーバークラス名を指定します。 ここでは、 Cat クラスおよび Dog クラスの共通部分を Anim 引クラスから継承し、 名前だけ共通で動作の異なるメソッドをそれぞれのクラスで定義し直しています。ス ーバークラスから継承したメソッドをサブクラスで書き換えることを、「オーバーラ イド」と呼びます。メソッドをオーバーライドするときは、関数の引数で $ supe 「を 渡すと、 $supe 「 () でスーバークラスのオーバーライドされるメソッドを呼び出して 使うことができます。 【クラス継承の概念】 クラス継承しない場合 クラス継承をする場合 AnimaI クラス Cat クラス 共通部分 Dog クラス 継承 Cat クラス 継承 Dog クラス P 「 ototype のクラス継承についてさらに詳しく知りたい方は、公式ページにある 「 Defining classes and inhe 「 itance 」という記事をこ覧ください。 avasc 「 ipt の次期バ : ージョンである Java ー Sc 「 ipt 2.0 では、言語 : 本体の機能としてクラ : ス継承ができるように一 ーなる予定です。 : です。 ー class-inheritance ・ typejs. 0 「 g/learn/ : ー http://www.P「0t0 ー : URL は ー and inheritance 」の 「 Defining classes :