2. オブジェクト ( もう一度 ) 値をいくつかまとめたものを C 言語では構造体と呼んでいました 構造体は複数の値を含んだものでした これに対して JavaScript では オブジェクト (Object) という物を使います オブジェクトは 値 ( プロパティ ) と動作 ( メソッド ) を持ちます これはオブジェクト指向プログラミングと言われるもの特徴です オブジェクトにアクセスすることでプロパティの変更や動作を実行できます プロパティはオブジェクトの属性を表すもので C 言語で言えば変数と考えるとわかりやすいでしょう それに対して メソッドはオブジェクトに何らかの動作をさせるものですから C 言語で言えば関数と考えればいいのです 構造体と同様にプロパティとメソッドにアクセスするには ".( ピリオド )" を使います object. プロパティ object. メソッド ( 引数...) オブジェクトには2 種類あって クラスオブジェクトと言われるものを直接使うタイプと クラスのオブジェクトを作成して そのオブジェクトを使うタイプです 大文字で始まっているのがクラスオブジェクトを意味します 2.1 であげた Math オブジェクトがクラスオブジェクトです したがって 全てのプロパティとメソッドを使うのは Math.??? や Math.???() という形でした Math は数学関係の計算ですから プロパティの値はいつも同じで メソッドも同じ動きをするだけになります それに対し 2.2 や 2.3 であげた Date オブジェクトや String オブジェクトは オブジェクトを作成して使うタイプです オブジェクトごとにプロパティの値は異なり それに応じたメソッドの戻り値がそのオブジェクトを作成するキーワードが new なのです 例えば now = new Date(); // 現在の時間でオブジェクトを作成 x = now.gettime(); // now のメソッドの呼出し target = new Date(2008, 9, 30, 12, 25); // 日付時刻を設定してでオブジェクトを作成 y = target.gettime(); // target のメソッドの呼出し という形で オブジェクトを作成して利用するという手順になります もちろん now と target は別のオブジェクトですから その中のプロパティは異なりますし メソッドの結果も異なります このようにオブジェクトを作成して利用するのが基本です しかし システムが標準で用意しているオブジェクトもあります それが document や window などのオブジェクトです document は現在表示している HTML 文書を意味するオブジェクト winodw はブラウザの表示しているウインドウを表すオブジェクトです これらのオブジェクトはシステムが最初から用意しているので オブジェクトを作成しなくても プロパティやメソッドを使うことができます これらのオブジェクトを使うことでプログラムをするのが JavaScript のスタイルです 3
3 文書 ( もう一度 ) 3.7 文書構造 HTML 文書を構造によって分けることを考えます ex30.html <body bgcolor="#ffffff"> ここで この HTML ファイルを分解してオブジェクトとして格納します ex30.html <title> ももたろさん <BODY> BGCOLOR="#ffffff" <H1> ももたろさん ( n) <div> name="momo" id="momo" ( n) ももたろさんももたろさん <br> ( n) おこしにつけたきびだんご <br> ( n) ひとつわたしにくださいな <br> ( n) ( n) このような文書の構造を考えます タグの間に他のタグや値であるテキストが入るという形式です それぞれのタグが一つの ノード にあたります それぞれのタグを指定するときに追加して書く部分がプロパティということになります 例えば body タグでは プロパティ bgcolor の値を #ffffff に設定しているということになります もちろん 他に link や vlink などのプロパティもありますが 指定しなかったということは標準のままにするという意味になります JavaScript のプログラムでプロパティの値を変更すれば 表示が変えることが可能です それぞれのタグは内部に別のタグやテキストを持っています これを子ノードと言います もちろん 子ノードは複数存在することがあります これに対し そのタグやテキストを含んでいる上位のタグの部分を親ノードと言います これは唯一に決まります この関係は そのノードオブジェクトのプロパティとして参照できます これらの関連のプロパティを表 3.1 にまとめました 4
表 3.1 親子ノード関連のノードのプロパティ プロパティ 内容 parentnode 親ノード childnodes 子ノードの配列 firstchild 最初の子ノード lastchild 最後の子ノード previoussibling 自分と同じレベルの一つ前のノード nextsibling 自分と同じレベルの一つ前のノード 表 3.2 ノード検索の document のメソッドメソッド内容 getelementbyid(id) id で検索戻り値は最初に見つかった1つ getelementsbyname(name) 名前で検索戻り値は配列 getelementsbytagname(tag) タグの名前で検索戻り値は配列 ではそのようなノードオブジェクトをどのように指定するのでしょうか そのために使われるの document のメソッドを表 にまとめました 各タグには name 属性で名前を付けたり id 属性で id をつけることができますので これをもとに検索するのです 一部の古いブラウザの仕様のため id 属性と name 属性は同じものにしておくのが無難です では一つ例をあげます 上にあげた文書構造を頭に入れて結果を見てみましょう ex31.html <title ももたろさん </title> <div name=momo" id="momo"> var momo = document.getelementbyid("momo"); document.write("momo は " + momo + "<BR>"); document.write("momo には " + momo.childnodes.length + " 個の子ノードがあります <br>"); for(i = 0; i < momo.childnodes.length; i++) { document.write(momo.childnodes[i] + "<BR>"); document.write("momo の親ノードは " + momo.parentnode + "<BR>"); document.write("momo の前のノードは " + momo.previoussibling + "<BR>"); document.write("momo の次のノードは " + momo.nextsibling + "<BR>"); 今回は getelementbyid メソッドを利用して <div> タグのノードを一つだけを手に入れました 5
3.8 ノードの作成と操作このような形でノードオブジェクトにアクセスできるようになりましたから 次はノードを作成する方法です ノードを作成するための document のメソッドを表 にまとめました ノードを作成しただけでは 文書の文書構造に入ってきませんから ノード操作を行うことになります ノードを操作するためのノードのメソッドを表 にまとめました 表 3.3 ノード作成の document のメソッド メソッド 内容 createelement(tag) タグのノードを作成する createtextnode(str) テキストノードを作成する clonenode(node) ノードを複製する 表 3.4 ノード操作のメソッド メソッド 内容 appendchild(new) 最後の子ノードの後ろに new を追加する insertbefore(new, node) 子ノード node の前に new を挿入する removechild(node) 子ノードから node を削除する replacechild(new, old) 子ノード old を new で置き換える まずは追加と削除の例です ex32.html var i = 0; function textappend() { var momo = document.getelementbyid("momo"); var txt = document.createtextnode(" それでは " + (++i) + " 個あげましょう "); var br = document.createelement("br"); momo.appendchild(txt); momo.appendchild(br); <input type="button" value=" 追加 " onclick="textappend()"> 6
次に変更の例です 変更するには元になるものが必要なので最初に作っておきます ex33.html var i = 0; function textreplace() { var dango = document.getelementbyid("dango"); var txt = document.createtextnode(" それでは " + (++i) + " 個あげましょう "); var first = dango.firstchild; dango.replacechild(txt, first); <input type="button" value=" 置換 " onclick="textreplace()"> <span name="dango" id="dango"> あげない </span><br> ノードのタイプの判別やそのノードの内容も調べることができます ex34.html <title ももたろさん </title> function space(n) { sp = ""; for(i = 0; i < n; i++) { sp += " "; return sp; function dispnode(obj, node, level) { var i; str = space(level); if(node.nodetype == 1) { str += "<" + node.tagname + "> n"; obj.appendchild(document.createtextnode(str)); for(i = 0; i < node.childnodes.length; i++) { dispnode(obj, node.childnodes[i], level + 1); else if(node.nodetype == 3) { str += '"' + node.textcontent.replace(" n"," n") + '" n'; obj.appendchild(document.createtextnode(str)); 7
function disp() { var momo = document.getelementbyid("momo"); var show = document.getelementbyid("show"); dispnode(show, momo, 0); <input type="button" value=" 表示 " onclick="disp()"> <pre name="show" id="show"> </pre> nodetype プロパティでノードの種類がわかります これを使って 文書の構造を表示するプログラムです ここでは pre タグの中を書き換えていますから 改行はそのまま表示されます 練習問題 3.2 ものたろさんの歌詞を逆順に変更するプログラムを作成しなさい ex35.html var i = 0; function textreverse() { <input type="button" value=" 変更 " onclick="textreverse()"> 練習問題 3.3(ex36.html) ボタンを押すとものたろさんの歌詞が2 番に変わるようにプログラムを作成しなさい あげましょうあげましょう いまからおにのせいばつに ついてくるならあげましょう 8