Microsoft Word - no06.doc

Size: px

Start display at page:

Download "Microsoft Word - no06.doc"

たつぞうつつの
5 years ago
Views:

1 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

2 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 表 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

4 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

5 次に変更の例です変更するには元になるものが必要なので最初に作っておきます 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

6 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

Microsoft Word - no04.doc

Microsoft Word - no04.doc 3.2 HTML 文書関連のオブジェクト HTML 文書を表すオブジェクトは次のような関係になりますこれらのオブジェクトのモデルを DOM(Document Object Model) といいます document 以下のオブジェクトは W3C で規定された DOM1 の HTMDocument を実装したものです window ブラウザのウインドウ管理 location 現在表示されている URL