【JS】ブラウザを自在に操る(ブラウザオブジェクト)〜JavaScript本格入門 Chapter6〜

ここからはブラウザ環境以外では利用できないため注意。

イベントが発生したら処理を行うーイベントドリブンモデルー

クライアントサイドJavaScriptとイベントドリブンモデルを理解する

イベントドリブンモデルとは
ブラウザ上でページ読み込み完了、テキスト変更された、クリックされたなど、イベントに応じて実行するコードを記述することを呼ぶ。

イベントとイベントハンドラを関連づける

まずは三つの定義をする
・どの要素で発生した
・どのイベントを
・どのイベントハンドラに関連づけるのか

主なイベントハンドラ
abort,load,unload,click....

■注意点
1.イベント名は全て小文字
window.onloadなどにする
Loadとかはだめ。

2.プロパティとして設定するのは関数オブジェクト
あくまで関数オブジェクトで、関数呼び出しではない。
たとえばwindow.onload = init;は正しいが、
window.onload = init();はダメ。

3.個別要素のイベントハンドラはonloadイベントハンドラの配下に
onloadイベントの配下にgetElementByIdを書かないと読み込み前に呼ぼうとするためエラーになる。

イベント挙動キャンセル


とすると右クリックは無効化される。
ただしJavaScriptをオフにされたりすると普通に効くので完璧ではない。

ブラウザオブジェクトの基本

最上位にwindowオブジェクト
次にdocument,locationオブジェクトなど
document配下にforms,anchors,imagesオブジェクト
forms配下にelements
elements配下にButton,CheckBoxなどがある

Windowオブジェクト

警告ダイアログ
alert('xxxxxx');

確認ダイアログ



OK→true
キャンセル→false
このconfirmメソッドのキャンセルはあくまでfalseを返すだけだが、
上述の通りイベントハンドラでfalseになるとイベントキャンセルされる。

入力ダイアログ
ユーザに対して入力ダイアログ表示し、入力された文字列はpromptメソッドの戻り値として受け取る。
var input = window.prompt('文字列を入力してください','山田');
window.alert('input');

サブウィンドウを生成する openメソッド

chromeでも新規ウィンドウで開く。タブじゃない。

<script>
var subwin;

function winOpen(){
  subwin = window.open('./string.html','sample',
  'width=600,height=300,scrollbars=yes,location=yes');
}
</script>
<input type="button" value="open" onclick="winOpen()"/>

オプション
width   ウィンドウ幅
location  アドレスバー表示するかどうか yes|no
scrollbars スクロールバー表示有無
resizable  リサイズ可能かどうか
toolbar   ツールバー表示有無
status   ステータスバー表示有無
menubar  メニューバー表示有無

なおこの場合subwin変数はグローバルにしているため、
サブウィンドウの操作(閉じたり、書き込んだり)も可能。
記述方法
subwin.opener.document.fm.〜 親ウィンドウを参照
subwin.document.fm.〜 サブウィンドウを参照

タイマー機能実装 setInterval / setTimeout

setInterval

var timer;

timer = window.setInterval(
    function(){
        var dat = new Date();
        document.getElementById('result').innerHTML = dat.toLocaleTimeString();
    },
    1000
);
</script>

<input type="button" value="停止" onclick="clearInterval(timer)" />
<div id="result"></div>

clearInterval
clearTimeout
意味そのままでクリアできる。


ウィンドウサイズ、スクロール位置操作

moveBy(x,y) ウィンドウ位置を移動(相対座標)
moveTo(x,y) ウィンドウ位置を移動(絶対座標)
scrollBy(x,y) ウィンドウ内容をスクロール(相対座標)
scrollTo(x,y) ウィンドウ内容をスクロール(絶対座標)

フォーム要素にアクセスする

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;
}


ここから先はあまり有用そうじゃないので省略する