コードの流れは以下のようになります。
１．ファイルの読み込み
最初に<body onload="loaded()">からloaded()関数を
経由してMyObject()のコンストラクタが呼び出されます。
２．コンストラクタ
コンストラクタではcreateElement('div')で<div>タグが
生成され、classNameで.myCSSのスタイルが指定され
ます。
３．スタイル
.myCSのスタイルでは四角の色、高さと幅などが指定され
ています。
４．イベント登録
addEventListenerでマウスのボタンが押された時のイベ
ントをフックしてハンドラとしてmyHandler()関数を非同
期で呼び出します。
５．メンバ登録
オブジェクト自身を自分のメンバとして登録します。
６．オブジェクト生成
最後にappendChildでオブジェクトを生成します。
最初に<body onload="loaded()">からloaded()関数を
経由してMyObject()のコンストラクタが呼び出されます。
２．コンストラクタ
コンストラクタではcreateElement('div')で<div>タグが
生成され、classNameで.myCSSのスタイルが指定され
ます。
３．スタイル
.myCSのスタイルでは四角の色、高さと幅などが指定され
ています。
４．イベント登録
addEventListenerでマウスのボタンが押された時のイベ
ントをフックしてハンドラとしてmyHandler()関数を非同
期で呼び出します。
５．メンバ登録
オブジェクト自身を自分のメンバとして登録します。
６．オブジェクト生成
最後にappendChildでオブジェクトを生成します。
以上が起動時の動作ですが、その後に四角の上でマウスのボタンが押されると以下のようになります。
７．ハンドラ関数myHandlerが起動します。
８．座標などを表示します。
８．座標などを表示します。
さて、最初からもう少し詳しく見ていきましょう。オリジナルsticky-notesでは少々違和感のある起動コードが書かれていますが、１では分かりやすくするために良く知られた方法にしています。
２．は６とともに、<div>タグをcreateElement()で生成し、スタイル シートや各種の属性など宣言してappendChild()で生成しています。この方法はJavaScriptから<div>や<table>などのタグをJavaScriptで生成する方法としてあちらこちらのサイトで紹介されてますので、特に問題はないと思います。
３．は画面の好きなところに四角を描く方法です。種明かしされれば「ナンダ」という気が…（笑）ただし、leftとtopは絶対位置で指定しますので、position: absolute;で絶対位置を指定し忘れると四角が左上の隅に張り付いてしまいます。もちろん、この失敗をしたので気付きました（笑）
４．これが難問です。５と７、８とも絡んで理解を阻んでいます。・・・と言う事で項目をあらためましょう。iptで生成する方法としてあちらこちらのサイトで紹介されてますので、特に問題はないと思います。
３．は画面の好きなところに四角を描く方法です。種明かしされれば「ナンダ」という気が…（笑）ただし、leftとtopは絶対位置で指定しますので、position: absolute;で絶対位置を指定し忘れると四角が左上の隅に張り付いてしまいます。もちろん、この失敗をしたので気付きました（笑）
４．これが難問です。５と７、８とも絡んで理解を阻んでいます。・・・と言う事で項目をあらためましょう。
<pre> <next>
0 件のコメント:
コメントを投稿