ウィンドウとは、、
ウィンドウオブジェクトとは何でしょうか？これは今お使いになっているブラウザを操作するためのオブジェクトです。 このオブジェクトを操作する事によってお使いのブラウザをコントロールする事が出来るようになり、ブラウザの大きさを変更できたり、更には新たにブラウザを起動してそのブラウザをコントロールする事も可能になります。 前回まではHTMLに含まれたコントロールを参照したり、それらが知らせるイベントに対する処理を考えてみましたね。
今回はちょっとステップアップ！？してウィンドウオブジェクトを使ってみましょう。
JavaScriptのダイアログ
前回まで色々動作を確認するときに alert("表示するメッセージ") といった書き方でダイアログボックスを表示させていました。 実はこの alertメソッドとはウィンドウオブジェクトが提供するメソッドになります。 省略しないで記述すると window.alert のようになります。
alert 警告ダイアログ
今まで良く使用していたこのメソッドは実は警告を表示するためのものです。現にダイアログの左側には黄色い警告マークが付いてますね。 実際は簡単にメッセージを出せるので警告表示以外にも色々な時に使用されています。
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function fnc_alert(msg){
window.alert(msg);
}
//-->
</script>
<input type=button value=" ♂ " onclick="fnc_alert('実は警告ダイアログなんです。')">
confirm 選択ダイアログ
ユーザに選択肢を選ばせたい時にオプションボタンなどで実現する事も出来ますが、ダイアログを表示してユーザに選択肢を選択させる事が出来ます。
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function fnc_confirm(){
if(window.confirm("あなたはパソオタク(？_？)")){
window.alert("やっぱりあなたはオタクですね(^ε^)/");
}else{
window.alert("嘘つきですね！！本当はオタクなのに〜(T0T)/~~~~");
}
}
//-->
</script>
<input type=button value=" ♂ " onclick="fnc_confirm()">
prompt 入力ダイアログ
このダイアログはユーザからの入力情報を取得できます。名前を入力してもらったりという事に利用されています。
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function fnc_prompt(){
var msg;
msg = window.prompt("お名前を入力して下さい。","");
window.alert("ようこそ"+msg+"さん！！");
}
//-->
</script>
<input type=button value=" ♂ " onclick="fnc_prompt()">
promptメソッドはユーザが文字列を入力した時はその入力した文字列を戻り値とします。入力しなかった場合は null(何も無い状態を表わす) を返します。このメソッドは二つの引数を持ちますが、それぞれに設定する値は以下を参照してください。
msg = window.prompt("お名前を入力して下さい。","");
 第一引数
表示されるダイアログのコメントとして表示されます。
第二引数
入力ボックスの初期値になります。今回は何も無い文字列を指定しますのでダイアログボックスのテキスト欄には何も入力されていませんでしたね。例えばこの引数を"初期値"と指定したとするとダイアログが表示された時にすでに"初期値"という文字列がテキスト欄に入っている状態で表示されます。
タイマー処理
タイマー処理とは、『 一定時間経過後この関数を起動したい 』場合や、『 ある一定間隔でこの関数を起動したい 』といった場合に使用します。一見難しそうに見える処理もウィンドウオブジェクトが提供するメソッドを使用する事で非常に簡単に実現する事が出来ます。
一定時間後に処理させる setTimeout
[ sample ]
[ source ]
<script language="JavaScript">
<!--
function timeout(){
alert("この警告は５秒後に表示されたと思います！！");
}
//-->
</script>
<input type=button value=" ♂ " onClick='setTimeout( "timeout()", 5000 )'><br><br>
第一引数に一定時間後呼出し関数を指定して第二引数に 何ミリ秒後にイベントを発生させるか指定します。
setTimeout( "timeout()", 5000 )
この例では出てきていませんがこのメソッドは戻り値としてタイマーのIDを戻します。タイマーのIDは clearTimeoutメソッドでタイマーを削除する時に使用します。
clearTimeout( タイマーID ); //タイマーを止める事が出来ます。
一定間隔で処理させる setInterval
[ sample ]
[ source ]
<script language="JavaScript">
<!--
var tmrID //タイマーID
var sec = 0;
// タイマー開始の処理
function start_interval(){
tmrID = setInterval( "interval()", 5000 );
}
// タイマー終了の処理
function stop_interval(){
clearInterval( tmrID);
}
// 時間ごとの処理
function interval(){
sec += 5 ;
alert("ボタンを押してから"+sec+"秒経過しました。");
}
//-->
</script>
<input type=button value=" ♂ " onClick='start_interval()'>
<input type=button value=" Stop " onClick='stop_interval()'><br><br>
タイマーを作成しています。第一引数に時間毎で呼び出す関数を、第二引数で何ミリ秒間隔でイベントを発生させるかを指定します。戻り値としてそのタイマーIDが返されます、これはこのタイマーを削除する時に使用します。
tmrID = setInterval( "interval()", 5000 );
五秒ごとに呼び出される関数です。
function interval()
タイマーを削除します。引数としてsetIntervalメソッドの戻り値を指定します。
clearInterval( tmrID);
ステータスバーに文字を表示する
ステータスバー(ブラウザの下にある部分)へ任意の文字を表示させる。
[ sample ]
[ source ]
<input type=button value=" 表示 " onclick="window.status = 'Sample'">
非常に簡単ですね。 windowオブジェクトの statusプロパティへ値を代入するだけです。これをマウスの動作イベントと組み合せて使用する事でリンク先の説明をステータスバーに表示するといった事も可能になります。
window.status = 'Sample'
|
home / Knave web lecture / JavaScript / 13章 JavaScriptのウィンドウ操作