【JS】ブラウザを自在に操る（ブラウザオブジェクト）〜JavaScript本格入門 Chapter6〜
ここからはブラウザ環境以外では利用できないため注意。
イベントが発生したら処理を行うーイベントドリブンモデルー
クライアントサイドJavaScriptとイベントドリブンモデルを理解する
イベントドリブンモデルとは
ブラウザ上でページ読み込み完了、テキスト変更された、クリックされたなど、イベントに応じて実行するコードを記述することを呼ぶ。
イベントとイベントハンドラを関連づける
まずは三つの定義をする
・どの要素で発生した
・どのイベントを
・どのイベントハンドラに関連づけるのか
主なイベントハンドラ
abort,load,unload,click....
■注意点
1.イベント名は全て小文字
window.onloadなどにする
Loadとかはだめ。
2.プロパティとして設定するのは関数オブジェクト
あくまで関数オブジェクトで、関数呼び出しではない。
たとえばwindow.onload = init;は正しいが、
window.onload = init();はダメ。
3.個別要素のイベントハンドラはonloadイベントハンドラの配下に
onloadイベントの配下にgetElementByIdを書かないと読み込み前に呼ぼうとするためエラーになる。
ブラウザオブジェクトの基本
最上位にwindowオブジェクト
次にdocument,locationオブジェクトなど
document配下にforms,anchors,imagesオブジェクト
forms配下にelements
elements配下にButton,CheckBoxなどがある
Windowオブジェクト
警告ダイアログ
alert('xxxxxx');
確認ダイアログ
フォーム要素にアクセスする
function process(){ var name = document.fm.name.value; //formのテキストボックスのnameというname属性にアクセス } </script> <form name="fm" onsubmit="return process()"> <input type="text" name="name">
フォーム要素を順番処理する場合
function process(){ for(var i = 0; i < document.fm.elements.length; i++){ result += document.fm.elements[i].name + '¥n'; } } </script> <form name="fm" onsubmit="return process()"> <input type="text" name="name1"> <input type="text" name="name2"> <input type="text" name="name3"> <input type="submit" value="送信">
フォーム要素共通プロパティ、メソッド
form 要素が属するフォーム要素を取得
disabled 要素入力/選択を禁止するか
name 要素名
type 要素の種類text,button,radioなど
value 要素の値（selectは利用不可）
focus() 要素にフォーカスをセット
blur() 要素からフォーカスを外す
例 formプロパティ
function process(f){ window.alert('こんにちは' + f.name.value); } </script> <form> <input type="text" name="name"> <input type="button" value="送信" onclick="process(this.form)">
このようにthisを使うようにすると名前に依存しないし、短いコードになるため推奨。
例 disabledプロパティ
チェックボックスをオンにした時だけ後のラジオボタンを有効にする
function process(){ var fmt = document.fm.fmt; //ラジオボタンをループ。チェックボックスが非チェックならラジオボタン無効化。 for(var i = 0; i < fmt.length; i++){ fmt[i].disabled = !document.fm.need.checked; } } </script> <form name="fm"> メルマガ希望：<input type="checkbox" name="need" value="1" checked="checked" onclick="process()"> <input type="radio" name="fmt" value="plain">プレーン形式 <input type="radio" name="fmt" value="html">HTML形式
この他サブミット時にサブミットボタン無効にして二重送信防止にも利用可能。
テキスト系要素操作
テキストボックス、パスワード入力ボックス、テキストエリア が対象。
例
サブミット時に年齢の欄が数値でない場合、
入力値をデフォルトに戻し、テキスト選択状態かつフォーカスにする
function chk(){ var q = document.fm.old; //チェック if(q.value != null && q.value != ""){ if(isNaN(q.value)){ //数値でない場合 window.alert("数値で入力してください"); q.value = q.defaultValue; //defaultにもどす q.focus(); //フォーカスセット q.select(); //テキスト選択状態にする return false; // onsubmitイベントのキャンセル } } } </script> <form name="fm" method="POST" onsubmit="return chk()"> 年齢: <input type="text" name="old" value="20"> <input type="submit" value="送信">
ラジオボタン、チェックボック操作
テキストよりもやや複雑になる。
すなわち
1.同名要素は配列になる
2.チェック状態を示すのはcheckedプロパティ
→valueプロパティは選択の有無に関わらず指定の値を返すので、選択状態は確認できない
例
function show(){ var result = []; var f = document.fm.food; for(var i = 0; i < f.length; i++){ if(f[i].checked){ result.push(f[i].value); } } } <form name="fm" method="POST" onsubmit="return show()"> 好きな食べ物： <input type="checkbox" name="food" value="ラーメン"> <input type="checkbox" name="food" value="餃子"> <input type="checkbox" name="food" value="焼肉"> <input type="submit" value="送信">
なお、ラジオボタンの場合はループで見つかったらbreakしてあげると無駄がなくて良い。
※どうせラジオの場合はチェックが一つしかできないので。
選択ボックス、リストボックス操作
選択状態はselectedとなる。
通常は1選択のみだが、複数選択させる場合は
alert(document.fm.food.value);
例 複数の場合optionsをつけたうえで、valueにする
function show(){ var result = []; var f = document.fm.food; for(var i = 0; i < f.options.length; i++){ if(f.options[i].selected){ result += f.options[i].value + ','; } } return result; }
ここから先はあまり有用そうじゃないので省略する
