Microsoft Word - no04.doc

Size: px

Start display at page:

Download "Microsoft Word - no04.doc"

せぴあひろなが
5 years ago
Views:

1 3.2 HTML 文書関連のオブジェクト HTML 文書を表すオブジェクトは次のような関係になりますこれらのオブジェクトのモデルを DOM(Document Object Model) といいます document 以下のオブジェクトは W3C で規定された DOM1 の HTMDocument を実装したものです window ブラウザのウインドウ管理 location 現在表示されている URL 情報 history ブラウザの表示履歴 navigator ブラウザ情報 screen モニター画面情報 document HTML 文書 images <img> タグの配列 applets <applet> タグの配列 links <a href="??"> で定義されたリンクの配列 anchors <a name="??"> で定義されたアンカーの配列 forms <form> タグの配列 elements <form> タグ内の要素の配列 options 要素のオプションの配列それに対し他のオブジェクトは W3C が制定する前に実装されていた DOM0( 便宜上このように呼びますが正式名称ではありません ) のオブジェクトに分かれます 3.3 window オブジェクト ex11.html <title>window オブジェクト </title> <h1>window オブジェクト </h1> window.self: ウインドウ自身 <br> window.name: ウインドウの名前 <br> window.status: ステータスバーに表示する内容 window.alert(msg): アラートウインドウの表示 <br> window.confirm(msg): 確認ウインドウの表示 <br> window.open([url, name, style]): 新しいウインドウを開く <br> window.moveto(x, y): 移動する ( 絶対指定 )<br> window.moveby(x, y): 移動する ( 相対指定 )<br> window.resizeto(x, y): 大きさ変更 ( 絶対指定 )<br> window.resizeby(x, y): 大きさ変更 ( 相対指定 )<br> window.status = "Web プログラミング III の講義です "; window.alert(" 大きさ横 600, 縦 600 に変更します "); window.resizeto(600, 600); 11

2 window.alert(" 横の大きさ +100, 縦の大きさ -100"); window.resizeby(100, -100); window.alert("100, 100 に動きます "); window.moveto(100, 100); window.alert(" 右に 100, 上に 100 に動きます "); window.moveby(100, -100); var msg = window.prompt(" 何か文字を入れてください ",""); window.alert(msg); var w = window.open(" window.confirm(" 閉じます "); w.close(); 練習問題 3.2 Number( 文字列 ) とすることで文字列として入力された数字を数値に変換することができますこれと window.prompt メソッドを用いて 1 から入力された値までの階乗の値を表示するプログラムを作成しなさい例えば 10 が入力された時にはつぎのような値が表示されればよい 1!=1 2!=2 3!=6 4!=24 5!=120 6!=720 7!=5040 8!= != != location オブジェクト ex12.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>"); 12

3 3.5 history オブジェクト ex13.html <title>history オブジェクト </title> <h1>history オブジェクト </h1> history.length: 保存されている履歴の数 <br> history.back(): 一つ戻る <br> history.forward(): 一つ進む <br> history.go(n): n 番目に進む (n が負ならば戻る )<br> window.alert(" 戻ります "); history.back(); 3.6 navigator オブジェクト ex14.html <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>"); 13

4 3.7 screen オブジェクト ex15.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.8 document オブジェクトまずはノードを扱わない部分だけを説明します ex16.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.open(url): 開く <br> document.close(): 閉じる <br> document.write(...): 表示する <br> document.writeln(...): 表示する ( 改行ありただし <pre> タグ内でないと意味がない )<br> 3.7 ノード関連のプロパティノード関連のメソッドをまとめていきます親子ノード関連のプロパティを表 3.1 にまとめましたノードオブジェクトをどのように指定するのでしょうかそのために使われるの document のメソッドを表 3.2 にまとめました各タグには name 属性で名前を付けたり id 属性で id をつけることができますのでこれをもとに検索するのです一部の古いブラウザの仕様のため id 属性と name 属性は同じものにしておくのが無難です 14

5 表 3.1 親子ノード関連のノードのプロパティプロパティ内容 parentnode 親ノード childnodes 子ノードの配列 firstchild 最初の子ノード lastchild 最後の子ノード previoussibling 自分と同じレベルの一つ前のノード nextsibling 自分と同じレベルの一つ前のノード表 3.2 ノード検索の document のメソッドメソッド内容 getelementbyid(id) id で検索戻り値は最初に見つかった1つ getelementsbyname(name) 名前で検索戻り値は配列 getelementsbytagname(tag) タグの名前で検索戻り値は配列では一つ例をあげます上にあげた文書構造を頭に入れて結果を見てみましょう今回は getelementbyid メソッドを利用して <div> タグのノードを一つだけを手に入れました ex17.html <title ももたろさん </title> <h1> ももたろさん </h1> <div name=momo" id="momo"> ももたろさんももたろさん <br> おこしにつけたきびだんご <br> ひとつわたしにくださいな <br> </div> 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>"); 練習問題 3.3 自分で HTML を書き直して構造を確認しなさい 15

Microsoft Word - no03.doc

Microsoft Word - no03.doc 3 文書 HTML 文書そのものもオブジェクトとして扱います今まで使ってきましたが document.write( ) も document オブジェクトのメソッドです HTML 文書を表すオブジェクトは次のような関係になりますこれらのオブジェクトのモデルを DOM(Document Object Model) といいます Window ブラウザのウインドウ管理 location 現在表示されている