ブログのブログ
・ブログ村で1位を取ってる割にアクセス数が伸びない。
でも、順位は1位をキープしている。なぜだ？
・ブログ村で1位を取ってる割にアクセス数が伸びない。
でも、順位は1位をキープしている。なぜだ？
WEBブラウザのイベントの処理について
【開発環境】
OS；Window10
Webブラウザ：Google Chrome
テキストエディタ：Brackets
--イベントリスナーを理解しょう--
【イベントリスナーと、イベントハンドラ】
DOMレベル2から、一つのイベントに対して複数のコールバック関数を登録する事が出来るイベントリスナーという機能が用意された。これにより、イベントハンドラのように、コールバック関数を2つ書くと、先に登録した関数が上書きされる事が無くなる。
【リスナーの登録】
イベントに対してリスナー関数を登録するには、エレメントオブジェクトのaddEventListener(イベント名、リスナー関数、useCapture)メソッドを使う
・例文
・実行結果
【リスナーの取り消し】
登録済みのリスナー関数をエレメントオブジェクトから取り除くには、removeEventListener()メソッドを使う。
例文
myBtn.removeEventListener("click", clickListener1, false);
【イベントフローを理解しよう】
イベントフロー→発生したイベントは、DOMツリーのトップから下位の階層へ進み（キャプチャリングファーズ）、イベントが発生したオブジェクトに到達すると、再び上位の階層に進む事（パブリックファーズ）
・パブリックファーズの動作確認（イベント発生箇所→上へ）
実行結果
・キャプチャリングファーズの動作確認（イベント発生箇所→下へ）
実行結果
・イベントの伝搬を停止するには
stopPropagation()メソッドを使う
実行結果
奇跡
Javascriptの超入門編の続きを書こうと、ブログを書こうとしたら、ブログランキンが1位になっていた。
・ブログ村
・自分のブログ
なんで、こうなったのか？誰かに解説してもらいたいｗｗｗ
Javascriptの超入門編の続きを書こうと、ブログを書こうとしたら、ブログランキンが1位になっていた。
・ブログ村
・自分のブログ
なんで、こうなったのか？誰かに解説してもらいたいｗｗｗ
--xreaに引っ越し成功--
Yahoo!ジオシティーズサービス終了に伴って、レンタルサーバーxreaへ引っ越すすることに成ったが、
下記の設定を間違って、なかなか出来なかった
④FTPアカウントをヤフーのIDに置き換えるのを忘れた。
それ以外はOK
表示
新たなアドレス→http://daijyoukiyonotabi.g1.xrea.com/index.html
ダタし、
IE11で、互換表示に設定しないと変に表示される。
フォルダーとファイルは下記のように成る。
net2ftpファイルマネージャを見ると、サブフォルダーもcssも自動で無事に移設されていた。
後は、サイト設定の機能を覚えるだけ
Webブラウザのイベント処理1
【開発環境】
OS；Window10
Webブラウザ：Google Chrome
テキストエディタ：Brackets
---イベント処理の基礎知識---
【イベントと、イベントハンドラ】
イベントとは→ユーザがボタンをクリックしたり、テキストボックスに文字を入れて【Enter】キーをおした時に、ブラウザから送出されるメッセージのようなものです。
イベントハンドラ→発生したイベントを捕まえて、それに対して何らかの処理を行うプログラムの事。
・イベント処理の3つの方法
1）HTMLタグの属性で設定する
2）エレメントオブジェクトのプロパティとして設定する
3）イベントリスナーで設定する
◆HTMLタグの属性で処理を設定する
ア）ボタンのクリックを捕まえる
・ボタンの設定
＜input type="button" value="クリックして" id="myBtn"
・イベントハンドラの設定
onclick="alert('クリックされました'); console.log('クリックされました')"＞
「クリック」ボタンをクリックする→アラートダイアログ表示
イ）イベントハンドラを関数に！
例文
同じ結果に成る
ウ）イベントが発生したエレメントを調べる→「this」を使う。
・例文
省略
＜body＞
＜input type="button" value="クリックして" id="myBtn" onclick="clickHandler(this)"＞
＜script＞
function clickHandler(el) {
alert(el.id + "がクリックされました");
}
＜/script＞
＜/body＞
実行
・「クリック」ボタンをを押すと、アラートダイアログが表示される
◆オブジェクトのプロパティとしてイベントハンドラを設定する
ア）onclickプロパティにコールバック関数を登録
例えば、「myBtn」ボタンを設け、それがクリックされた時に呼び出されるイベントハンドラの関数を登録するには、下記のようにする。
書式
myBtn.onclick = 関数;
例文
var myBtn = document.getElementById("myBtn");→ドキュメント要素を取得している
myBtn.onclick = clickHandler;→関数を登録している
実行する
◆コールバック関数を無名関数にする
無名関数→一度しか呼ばない関数
例文
実行
◆イベントハンドラを削除する
プロパティに代入した後に、イベントハンドラを削除することができる。
element.onclick = null;
◆イベントハンドラとして使用するプロパティ
◆onloadイベントハンドラ
HTMLドキュメントの読み込みが完了したときのイベントを呼び込む、イベントハンドラ
例文
実行
・onloadはheadエレメントにプログラムを記述する時に必要
headエレメントに書くと、エラーになり、動作しない。
なぜなら、すべてのエレメントが読み込まれてないからである。
改造後→windowのonloadイベンドハンドラに処理を記述すれば良い。そうすることで、HTMLドキメントのロード完了待ってから処理を実行できる。
表示
