Webブラウザに関連する主要オブジェクト

Web ブラウザで Web ページコンテンツを JavaScript で操作するには，いくつかのブラウザおよび HTML 文書コンテンツを扱うAPIが必要となる。

ここでは https://www.w3.org/TR/html5/Overview.html を基準に対話的Webアプリケーションを作成するのに必要なものについて説明する。

aaa

イベント処理

ブラウザ上の特定要素でユーザが起こす働きかけに反応してある処理を起こすことができる。

イベント処理の例

たとえば HTML 文書中の特定のdiv要素をクリックするとダイアログを表示するものは以下のように書ける。

<div onclick="alert('Hi');">
<p>ああああ</p>
</div>

この例は HTML の全要素共通属性である onclick に JavaScript 文を適用したものである。このように特定の働きかけに対しての動作を定義して進めることを イベント処理 といい，イベントに呼応して動く部分のことを イベントハンドラ という。

ブラウザ共通で有用なイベントについて列挙する。

イベント名
`click`	クリック
`contextmenu`	右クリック(タブレットでは長タップ)
`dblclick`	ダブルクリック
`mousedown`	マウスボタン押下
`mouseenter`	マウスが入ったとき
`mouseleave`	マウスが出たきたとき
`mousemove`	マウスが動いたとき
`mouseout`	(子孫要素を含め)マウスが出たとき
`mouseover`	(子孫要素を含め)マウスが入ったとき
`mouseup`	押されていたボタンが離されたとき
`keypress`	キーがタイプされたとき
`keydown`	キーが押下されたとき
`keyup`	押されていたキーが離されたとき

JavaScript からのリスナ登録

前述のイベント処理例では HTML の属性値への代入でハンドラ登録したが JavaScript レベルで済ます方法を示す。あるイベント発生を監視し続け，発生したときになんらかのハンドラを呼ぶような結びつきを作るのが addEventListener 関数である。

イベントに対してハンドラを結びつける手順はいくらでも考えられるが，基本的には以下のとおりである。

HTML文書:	イベント処理を行ないたい要素に印を付けておく (id属性などを利用する)
JavaScript プログラム:	要素を探し出し `addEventListener` する

addEventListener 関数は，イベント捕捉可能なある要素 e に対して以下のように利用する。

e.addEventListener(監視イベント, リスナ[, useCapture]);

通常，特定の要素 e で捕捉されるイベントはその親要素にも伝わる。 body 要素から要素 e までに到達するまでのすべての要素には同じイベントが伝わるが、その複数の要素に同じイベントに対するイベントリスナが登録してあったとすると、より子孫側の要素に登録されたリスナから先に呼ばれる。これを先祖側から、に変えたいときは第3引数 useCapture に falseでない値を指定する。

参考: イベントフロー

JavaScript プログラムを head 要素内で読み込ませる場合は，その場では HTML 文書の要素は読み込み完了していないことに注意する必要がある。たとえば以下のように body 要素読み込み完了時に発生する load イベントのイベントリスナで、その他全ての必要なイベントリスナ登録を行なうとよい。

function someClickHandler() {
  alert("Yeaaaah!");
}
window.addEventListener("load", function() {
  var e = document.getElementById("foo");
  e.addEventListener("click", someClickHandler, false);
}, false);

DOMContentLoaded イベント

document オブジェクトに対して発せられるイベントとして DOMContentLoaded イベントがある。これは、全てのHTML文書の DOM 構築が終わったときに発せられるので、文書中の特定の要素に対して働きかける JavaScript プログラムを書くときに以下のように用いる。

document.addEventListener("DOMContentLoaded", 関数, false)

処理の初期化などを行なう関数 を登録することで、全ての文書要素が揃った直後に処理を進められる。

ユーザダイアログ

既に使用している alert 関数のように、ユーザに注意を促す簡素なウィンドウを使用する対話処理がいくつか用意されている。

alert
引数に指定した文字列を表示する警告ダイアログを表示する。

OKボタンを押すと消える。ボタンを押すまでは先に進まないので乱用すると使い勝手が著しく下がることに注意する。

この段落をクリック
confirm
引数に指定した文字列を表示し、OK か Cancel か選ばせるダイアログを表示する。

ユーザが OK を選ぶと true が返されるので分岐処理に利用できる。
```
function confirm_test() {
  var p_confirm = document.getElementById('confirm');
  if (confirm("進みますか")) {
    p_confirm.innerHTML = "進みます!";
  } else {
    p_confirm.innerHTML = "やめます...";
  }
}
```
上記のような関数を実行すると、id="confirm" の属性を持つ要素の本文がOKかキャンセルかによって書き換わる。

この段落をクリック
prompt
テキスト入力を促すダイアログを表示する。
```
prompt(プロンプト, 初期値)
```
プロンプトに指定した文字列を案内文として示し、入力窓に 初期値 を入れた状態のダイアログが現れる。入力された文字列が返される。
```
function prompt_test() {
  var p = document.getElementById('prompt');
  var ini = '名なし';
  var name = prompt("お名前は", ini);
  if (name == '' || name == ini) {
    p.innerHTML = "教えてくれないなんて水臭いなあ...";
  } else {
    p.innerHTML = "こんにちは "  + name + " さん!";
  }
}
```
この段落をクリック

Timer

setTimeout

setTimeout 関数を用いると一定時間経過後に自動的にある処理を行なわせることができる。

window.setTimeout(関数, ミリ秒[, 引数₁, 引数₂, ...]);

返却値としてタイマーIDが返される。この値は予定された処理を中止したい場合に必要になるので保存しておく。中止する場合は clearTimeout 関数にタイマーIDを与える。

ここを押すとスタート。再クリックで停止。

countdown.js

// 例: 変数の隠蔽化
var count = 10, tmID, infobox = document.getElementById("timeout");
function countDown() {
  if (--count == 0) {
    infobox.innerHTML = "ぼかーん";
  } else {
    infobox.innerHTML = count + "秒前";
    tmID = setTimeout(countDown, 1000);
  }
}
function startCountDown() {
  tmID = setTimeout(countDown, 1000);
  infobox.removeEventListener("click", startCountDown, false);
  infobox.addEventListener("click", stopCountDown, false);
}
function stopCountDown() {
  clearTimeout(tmID);
  infobox.innerHTML = "停めました。";
  infobox.removeEventListener("click", stopCountDown, false);
}
infobox.addEventListener("click", startCountDown, false);

setInterval

setInterval 関数は、一定時間ごとに繰り返し実行すべき関数を登録できる。 setTimeout は一度だけだが、これは clearInterval 関数で停めるまで何度でも呼び出す。

Navigator

グローバルに参照できる navigator オブジェクトを通してユーザのブラウザに関する情報が得られる。

function nav() {
  x = ['appCodeName', 'appName', 'appVersion', 'platform', 'product',
       'userAgent', 'language'];
  var i, s = '';
  for (var j=0; j < x.length; j++) {
    i = x[j];
    s += (s>'' ? "\n" : '') + i + '=' + navigator[i];
  }
  document.getElementById("navInfo").textContent = s;
}

ここをクリックで navigatore オブジェクト一覧表示

nav2()★★★★★★

window
document
navigator
location