古くからあるエラー処理の方法としてwindow.onerrorを利用するものがあります。これはonerrorイベントハンドラでエラー発生時の処理を記述するものです。戻り値をtrueにするとエラー処理が行われたとみなされエラーは発生しなくなります。呼び出される関数には3つの情報が渡されます。最初がエラーメッセージ、2番目がエラーを起こしたファイルのURL、3番目がエラーが発生した行です。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>window.onerrorを使う</title>
<script type="text/javascript"><!--
window.onerror = function(arg1,arg2,arg3)
{
alert("エラー発生 ■エラー内容："+arg1+", ■エラーファイル："+arg2+", ■エラー行："+arg3);
return true;
}
function refObj()
{
document.getElementById("mainContents").innerHTML = "NG...";
}
// --></script>
</head>
<body>
<h1>window.onerrorを使う</h1>
<form>
<input type="button" value="存在しない要素を参照する" onClick="refObj()">
</form>
</body>
</html>
このスクリプトが期待通り動作するのはInternet ExplorerとFirefoxのみです。Safari 2やOperaではwindow.onerrorの処理は無視されエラーが発生してしまいます。また、エラーメッセージやエラー行数に関してもInternet ExplorerとFirefoxでは内容が異なります（行数もカウント位置が違うため互換性がない）。
そこで、エラー処理に関してはC++/Java言語などでもおなじみのtry...catchを利用します。これはエラーが発生すると思われる箇所をtry{ }で囲み、そこで発生したエラーをcatchで捕捉しエラー処理を行うものです。catchにはエラー情報が渡されますが、渡された内容はブラウザによって異なるため互換性はありません。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>try...catchを使う</title>
<script type="text/javascript"><!--
function refObj()
{
try {
document.getElementById("mainContents").innerHTML = "NG...";
}catch(e){
alert("エラーです。"+e);
}
}
// --></script>
</head>
<body>
<h1>try...catchを使う</h1>
<form>
<input type="button" value="存在しない要素を参照する" onClick="refObj()">
</form>
</body>
</html>
try...catchは以下のように入れ子（ネスト）にすることもできます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>try...catchを使う</title>
<script type="text/javascript"><!--
function refObj()
{
try {
document.getElementById("mainIndex").innerHTML = "目次";
try {
document.getElementById("mainContents").innerHTML = "準備中";
}catch(e){
alert("エラーです(2)。"+e);
}
}catch(e){
alert("エラーです。"+e);
}
}
// --></script>
</head>
<body>
<h1>try...catchを使う</h1>
<form>
<input type="button" value="存在しない要素を参照する" onClick="refObj()">
</form>
<div id="mainIndex"></div>
</body>
</html>
ここまでのサンプルはエラーが発生したら処理を行うようになっていますが、もしエラーが発生しても何の処理も行わなくてもよい場合には以下のようにcatch(e){}としておきます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>未定義のプロパティを参照する</title>
<script type="text/javascript"><!--
function refObjProp()
{
try {
a = document.getElementById("mainContents").sample;
alert(a);
}catch(e){}
}
// --></script>
</head>
<body>
<h1>未定義のプロパティを参照する</h1>
<form>
<input type="button" value="存在しないプロパティを参照する" onClick="refObjProp()">
</form>
</body>
</html>
エラー処理命令は他にもfinallyやthrowも用意されています。これらは必要に応じて利用すればよいでしょう。
この章ではクライアイント側の技術的な部分について説明しました。これまでは自分のサーバーを利用して通信を行いましたが、次の章ではYahooなど他のサイトの情報を利用する方法について説明します。
[
第六章 1:Yahoo検索結果を表示するへ]
[
目次へ]
(2006.1.17)