Changes between Version 19 and Version 20 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jul 20, 2010, 10:14:09 AM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v19 v20  
    672672var div;
    673673
    674 // HTML の読み込みが終わったら実行されるハンドラ
     674// HTML の読み込みが終わったら実行されるイベントハンドラ
    675675window.onload = function() {
    676676  // <div> 要素を作成する
    … …  
    678678}}}
    679679
    680 <div> の生成は window.onload() メッセージハンドラ内で行います。 window.onload() は HTML 文書の読み込みが完了したときに呼び出されます。そうすると、 HTML 文書に含まれる全ての HTML 要素に DOM としてアクセスすることができます。例えば <body> 要素にも document.body プロパティとしてアクセスできるので、ここで生成した <div> 要素を、あとで
     680<div> の生成は window.onload() イベントハンドラ内で行います。 window.onload() は HTML 文書の読み込みが完了したときに呼び出されます。そうすると、 HTML 文書に含まれる全ての HTML 要素に DOM としてアクセスすることができます。例えば <body> 要素にも document.body プロパティとしてアクセスできるので、ここで生成した <div> 要素を、あとで
    681681
    682682{{{
    … …  
    686686と書いてやれば、<body> 要素内に、新たに作った <div> 要素を追加することができるのです。
    687687
    688 window.onload() メッセージハンドラより手前で、変数をいくつか定義しています。これらは、後で矩形の表示位置を変更する際に、役に立つものです。
     688window.onload() イベントハンドラより手前で、変数をいくつか定義しています。これらは、後で矩形の表示位置を変更する際に、役に立つものです。
    689689
    690690次に、この <div> 要素にスタイルを設定します。 DOM を用いる場合、 <div> 要素のスタイルは、 div.style プロパティにオブジェクトとして用意されていますので、以下のようにしてスタイルを設定してやることができます。
    … …  
    758758var div;
    759759
    760 // HTML の読み込みが終わったら実行されるハンドラ
     760// HTML の読み込みが終わったら実行されるイベントハンドラ
    761761window.onload = function() {
    762762  // <div> 要素を作成する
    … …  
    984984}}}
    985985
    986 ブラウザ依存の部分もあるので若干わかりにくくなっていますが、ハンドラメソッドに渡されるイベントオブジェクトからマウスの位置を取得し、それを元に矩形の位置を移動する、という実装になっています。これをさらに応用すると、 Web ページ内でウィンドウを表示したり、ドラッグ＆ドロップを表現したりすることができるようになり、 Web アプリケーションの幅が広がります。
     986ブラウザ依存の部分もあるので若干わかりにくくなっていますが、イベントハンドラに渡されるイベントオブジェクトからマウスの位置を取得し、それを元に矩形の位置を移動する、という実装になっています。これをさらに応用すると、 Web ページ内でウィンドウを表示したり、ドラッグ＆ドロップを表現したりすることができるようになり、 Web アプリケーションの幅が広がります。
    987987
    988988これら 2つのサンプルについては、あえて詳細な解説はつけません。じっくりとプログラム・ソースを吟味し、分からない部分はネットや各種書籍を参照して調べつつ、プログラムを改造してみたりしながら、覚えていくとよいでしょう。