Microsoft Word - no03.doc

Size: px

Start display at page:

Download "Microsoft Word - no03.doc"

とらふみおおはし
4 years ago
Views:

1 3 文書 HTML 文書そのものもオブジェクトとして扱います今まで使ってきましたが document.write( ) も document オブジェクトのメソッドです HTML 文書を表すオブジェクトは次のような関係になりますこれらのオブジェクトのモデルを DOM(Document Object Model) といいます Window ブラウザのウインドウ管理 location 現在表示されている URL 情報 history ブラウザの表示履歴 navigator ブラウザ情報 screen モニター画面情報 document HTML 文書 images <img> タグのコレクション applets <applet> タグのコレクション links <a href="??"> で定義されたリンクのコレクション anchors <a name="??"> で定義されたアンカーのコレクション forms <form> タグのコレクション elements <form> タグ内の要素のコレクション options 要素のオプションのコレクション document 以下のオブジェクトは W3C で規定された DOM1 の HTMDocument を実装したものですそれに対し他のオブジェクトは W3C が制定する前に実装されていた DOM0( 便宜上このように呼びますが正式名称ではありません ) のオブジェクトに分かれます 3.1 window オブジェクト ex10.html <title>window オブジェクト </title> <h1>window オブジェクト </h1> window.self: ウインドウ自身 <br> window.name: ウインドウの名前 <br> window.status: ステータスバーに表示する内容 <h2> メソッド </h2> window.alert(msg): アラートウインドウの表示 <br> window.confirm(msg): 確認ウインドウの表示 <br> window.open([url, name, style]): 新しいウインドウを開く <br> close(): ウインドウを閉じる <br> window.alert(" 注意 "); var w = window.open(" window.confirm(" 閉じます "); w.close(); 8

2 3.2 location オブジェクト ex11.html <title>location オブジェクト </title> <h1>location オブジェクト </h1> document.write("location.hash = ", location.hash, "<br>"); document.write("location.href = ", location.href, "<br>"); document.write("location.hostname = ", location.hostname, "<br>"); document.write("location.host = ", location.host, "<br>"); document.write("location.port = ", location.port, "<br>"); document.write("location.pathname = ", location.pathname, "<br>"); 3.3 history オブジェクト ex12.html <title>history オブジェクト </title> <h1>history オブジェクト </h1> history.length: 保存されている履歴の数 <br> <h2> メソッド </h2> history.back(): 一つ戻る <br> history.forward(): 一つ進む <br> history.go(n): n 番目に進む (n が負ならば戻る )<br> window.alert(" 戻ります "); history.back(); 3.4 navigator オブジェクト ex13.html 9

3 10 <title>navigator オブジェクト </title> <h1>navigator オブジェクト </h1> document.write("navigator.appcodename = ", navigator.appcodename, "<br>"); document.write("navigator.appname = ", navigator.appname, "<br>"); document.write("navigator.appversion = ", navigator.appversion, "<br>"); document.write("navigator.useragent = ", navigator.useragent, "<br>"); document.write("navigator.platform = ", navigator.platform, "<br>"); 3.5 screen オブジェクト ex14.html <title>screen オブジェクト </title> <h1>screen オブジェクト </h1> document.write("screen.width = ", screen.width, "<br>"); document.write("screen.height = ", screen.height, "<br>"); document.write("screen.colordepth = ", screen.colordepth, "<br>"); 3.6 document オブジェクト ex15.html <title>document オブジェクト </title> <h1>document オブジェクト </h1> document.write("document.title = ", document.title, "<br>"); document.write("document.url = ", document.url, "<br>"); document.write("document.domain = ", document.domain, "<br>"); document.write("document.referrer = ", document.referrer, "<br>"); document.body: <body> タグのオブジェクト <br> document.images: <image> タグのオブジェクトのコレクション <br> document.applets: <applet> タグのオブジェクトのコレクション <br> document.links: <a href="??"> タグのオブジェクトのコレクション <br> document.anchors: <a name="??"> タグのオブジェクトのコレクション <br> document.forms: <form> タグのオブジェクトのコレクション <br>

4 <h2> メソッド </h2> document.open(url): 開く <br> document.close(): 閉じる <br> document.write(...): 表示する <br> document.writeln(...): 表示する ( 改行ありただし <pre> タグ内でないと意味がない )<br> document.getelementbyid(id): id による要素の検索 <br> document.getelementbyname(name): name による要素の検索 ( 結果は配列 )<br> <h2> サンプル文書 </h2> <div id="sample" name="sample"> <font id="n1" name="n1">1 行目 </font><br> <font id="n1" name="n1">2 行目 </font><br> <font id="n1" name="n1">3 行目 </font><br> <font id="n1" name="n1">4 行目 </font><br> </div> window.alert(" 文字の色大きさが変わります "); var n1 = document.getelementbyid("n1"); n1.color="blue"; n1 = document.getelementsbyname("n1"); for(i = 0; i < n1.length; i++) { n1[i].size= i + 3; } window.alert("0 行目と 5 行目が増えます "); var s = document.getelementbyid("sample"); var n5 = document.createelement("font"); var t5 = document.createtextnode("5 行目 "); n5.size = 7; n5.color = "red"; n5.appendchild(t5); var n0 = document.createelement("font"); var t0 = document.createtextnode("0 行目 "); var br = document.createelement("br"); n0.appendchild(t0); s.insertbefore(n0, n1[0]); s.insertbefore(br, n1[0]); s.appendchild(n5); window.alert("5 行目を変更します "); var t6 = document.createtextnode(" おわり "); n5.replacechild(t6, t5); window.alert("0 行目を削除します "); s.removechild(n0); ここでは DOM のメソッドを利用して HTML 文書の部分を編集していますこのように HTML の文書を Object としてとらえたものが DOM ということですタグの中に入っているものをノード (node) と言いますこのノードをそれぞれオブジェクトとしてとらえるわけです例えば上にあげている <font id="n1" name="n1">1 行目 </font> の部分が一つのオブジェクトになりますここで使われている <font> タグですがこのタグは属性として size や color を持ちますこれがそのままプロパティとして存在しますまたタグの中にあるテキストである 1 11

5 行目の部分がこのノードの子ノードとなります子ノードはもとのノードの childnodes にコレクションとして入っていますまたこの <font> タグは上位の <div> タグの中にありますこれは親ノードになり parentnode に入っています HTML 文書を変更するのはこの node の関係を編集するということです ex15.html のように createlement(" タグ ") や createtextnode(" テキスト ") でノードを作成したあとに編集したいノードに対して appendchild(new) や insertbefore(new, node), replacechild(new, old) で追加置換をしたり removechild(node) で削除したりしますこの様にノードのプロパティを変更したりノードの変更をすることで JavaScript は HTML 文書を動的に編集することができることになりますもう一つの例としてタグの属性を変更するプログラムをあげます一つの HTML 文書にタグは一つしかありませんので document.body で参照できます ex16.html <title>body の変更 </title> <h1>body の変更 </h1> <h2> サンプル文書 </h2> <a href=" 大学のホームページ </a><br> <a href=" 学科のホームページ </a><br> <a href=" 講義資料のページ </a><br> window.alert(" リンク文字色を変えます "); document.body.link="red"; document.body.alink="white"; document.body.vlink="pink"; window.alert(" 全体の文字色を変えます "); document.body.text="yellow"; window.alert(" 背景色を変えます "); document.body.bgcolor="blue"; 3.1 運勢くじのページを作成した ex17.html <title> 運勢くじ </title> <h1 align="center"> 運勢くじ </h1> <div align="center"> きょうの運勢は <font name="fnode" id="fnode" size="7"></font> です var now=new Date(); var x = now.gettime(); 12

6 var txt, color = "black"; switch (x % 13) { case 0: case 1: txt = " 大吉 "; color = "red"; case 2: case 3: txt = " 吉 "; case 4: case 5: txt = " 中吉 "; case 6: case 7: txt = " 小吉 "; case 8: case 9: txt = " 末吉 "; case 10: case 11: txt = " 凶 "; case 12: txt = " 大凶 "; color = "blue"; } var fnode = document.getelementbyid("fnode"); var result = document.createtextnode(txt); fnode.color=color; fnode.appendchild(result); これだけでは面白くないので吉や凶などと独立に今日のラッキーも表示するプログラムを作して追加せよ 13

Microsoft Word - no04.doc

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