【JavaScript授業十五日目】ブラウザオブジェクト(続き)
◆遅延処理
window.setTimeout ( 処理 , 遅延時間 ) ;
window.setTimeout ( function ( ) {
一定時間経過後の処理
} , 遅延時間 ) ;
・setTimeoutが関数をつかんでいて、遅延時間後に離すイメージ。
・関数名を書かないのは、何度も使うわけではないから。書いても問題なく動くが必要がない。
おさらい問題
・問題1
確認ダイアログ画面を表示すること
確認ダイアログ画面の文字は「Yahooを表示しますか？」とする
「OK」が押されたらYahooのトップページを表示「キャンセル」が押されたら
リンク先に飛ばず現在表示画面のままにする
●HTML
●JS
function check() {
var res = window.confirm("Yahooを表示しますか？");
return res; ←「true」か「false」でかえってくる
}
別解
●HTML
・HTMLのみで完結する
リンクを使用しない方法」
●JS
var res = window.confirm("Yahooを表示しますか？");
if (res) {
}
・if ( ) のカッコの中は「true」or「false」で判断しているので
「res == true」は必要なく「res」のみでOK
・問題2
画面表示3秒後にブラウザに「今日は〇月〇日です」と表示すること
日付が変わっても表示できるようにする
●JS
var today = new Date();
var month = today.getMonth() + 1;
var date = today.getDate();
window.setTimeout(function () {
document.getElementById("date").innerHTML =
"今日は" + month + "月" + date + "日です"
}, 3000);
・問題3
画面表示10秒後に非表示になっている画像を表示させること
●HTML
<img id="img" src="img/e_01.gif" style="display:none;">
●JS
window.setTimeout(function () {
document.getElementById("img").setAttribute("style", "display:block;");
}, 10000);
別解
window.setTimeout(function () {
document.getElementById("img").style.display ="block";
}, 10000);
・画像は置換インライン要素（幅と高さ指定可能インライン要素）
"block" → ブロックレベル要素として表示
"inline" → インライン要素として表示
"inline-block" → 置換インライン要素として表示
"none" → 非表示
・表示されたので問題はないが、"inline-block"のほうが正しい
ブラウザオブジェクト
ウインドウのサイズ確認方法
windowオブジェクトのプロパティ
console.log(window.innerWidth);
console.log(window.innerHeight);
●window.setInterval
・一定時間経過後に繰り返し処理
・window.setInterval(関数、ミリ秒数);
・戻り値：clearInterval(処理停止)用のID用
var timerID2; 処理停止用のID番号を管理
timerID2 = window.setInterval(function () {
console.log('処理しました２');
}, 3000);
第1引数：繰り返し呼び出す関数
第2引数：一定時間経過後の処理
console.log('timerID2:' + timerID2);
function stop2() {
console.log('stop2実行');
window.clearInterval(timerID2);
}
●途中で止めるとき（つまり一回目で止めればsetTimeout()と同じことできる）
var timerID2;
var i = 0;
timerID2 = window.setInterval(function () {
console.log('処理しました２');
i++;
if (i == 5) {
console.log('stop2実行');
window.clearInterval(timerID2);
}
}, 3000);
●名前ルーレット
繰り返し処理停止用の値
var timerID1;
関数内のif文の条件で使用する値
名前ルーレットの開始・停止に使用
true：名前ルーレット開始
false：名前ルーレット停止
var flag = true;
配列の部屋番号の値
var num = 0;
関数定義
function toggle() {
名前ルーレットを回す処理
if (flag) {
console.log('start');
二回目ボタン押した時にelseに分岐するように「false」にする
flag = false;
「スタート」から「決定」に変更
名前ルーレットを回転開始
timerID1 = window.setInterval(function () {
var nameList = [
'田中', //0
'佐藤', //1
'鈴木', //2
];
配列の部屋番号を1増やす
num++;
条件：配列の部屋数とnumの値が等しい
処理：numに0を代入
指定できる配列部屋番号を超えたら0に戻して
存在しない部屋を参照しないようにする
if (num == nameList.length) {
num = 0;
}
console.log(num);
document.getElementById('display1').innerHTML = nameList[num];
}, 50);
console.log('timerID1:' + timerID1);
}
名前ルーレットを止める処理
else {
console.log('stop');
ボタンの文字を「決定」から「スタート」
ルーレット止める
window.clearInterval(timerID1);
ルーレット開始できるように「true」に戻す
flag = true;
}
}
●ID属性で指定した要素の属性を変更
var num = 0; //配列の部屋番号
window.setInterval(function () {
var imgList = [
['img/a004.jpg', '墨つぼ'],
];
num++;
if (num == imgList.length) {
num = 0;
}
console.log(num);
document.getElementById('change').src = imgList[num][0];
document.getElementById('change').alt = imgList[num][1];
}, 1000);
●スクロールメソッド
●HTML
