◆20200818 授業メモ おさらい問題の答え合わせ・windowオブジェクト
本日の授業内容
〇代表的なwindowオブジェクト
window.alert('表示させる言葉')
okボタンのみのダイアログ画面を表示
戻り値はなし
window.confirm('表示させる言葉')
「ok」「キャンセル」ボタンのダイアログ画面を表示
戻り値：「ok」→true「キャンセル」→false
window.prompt('表示させる言葉')
１行入力欄ありのダイアログ画面を表示
戻り値：ユーザ入力値
〇window.setTimeout(処理, 秒数);
一定時間経過後の特定の処理をする
・ 第一引数：一定時間経過後に実行する処理
関数名の後に（）を記述しない
関数オブジェクトのアドレスを指定
※（）をつけてしまうと即関数呼び出しになってしまう
・第二引数：遅延させる時間をミリ秒指定
戻り値：キャンセル用のID番号
〇setTimeoutメソッドを用いた演習問題
以下板書
〇おさらい問題(array, string, function)の答え合わせ
〇windowオブジェクト
・windowインスタンスの代表的なメソッド
１５章 window_dialog.jsより
console.log(window.alert('警告ダイアログ'));
// okボタンのみのダイアログ画面
// 戻り値はなし
console.log(window.confirm('確認ダイアログ'));
// 「ok」「キャンセル」ボタンのダイアログ画面
// 戻り値：「ok」→true「キャンセル」→false
console.log(window.prompt('プロンプト'));
// １行入力欄ありのダイアログ画面
// 戻り値：ユーザ入力値
・setTimeoutのはたらき
１５章 window_settimeout.jsより
// test関数定義
// 一定時間経過後に呼び出される処理
function test(num) {
console.log('処理しました１');
}
var timerID1;
// ボタンから呼び出される関数定義
function start1() {
timerID1 = window.setTimeout(test, 3000);
// 3000（ミリ秒）＝3秒後
// setTimeoutメソッド
// 一定時間経過後の特定の処理をする
// 第一引数：一定時間経過後に実行する処理
関数名の後に（）を記述しない
関数オブジェクトのアドレスを指定
※（）をつけてしまうと即関数呼び出しになってしまう
// 第二引数：遅延させる時間をミリ秒指定
// 戻り値：キャンセル用のID番号
console.log('timerID1:' + timerID1);
}
function stop1() {
console.log('stop1実行');
window.clearTimeout(timerID1);
}
// clearTimeoutメソッド
// 第一引数：停止させる処理のID番号
// ※setTimeoutメソッド実行時
var timerID2;
// ボタンから呼び出される関数定義
function start2() {
timerID2 = window.setTimeout(function () {
console.log('処理しました２');
}, 3000);
// 第一引数：一定時間経過後の処理を登録
// 無名関数で指定
console.log('timerID2:' + timerID2);
}
function stop2() {
console.log('stop2実行');
window.clearTimeout(timerID2);
}
// 補足
// 関数は変数（プロパティ）内に入っている
// 関数オブジェクトである
console.log('補足');
var lesson = function () {
console.log('関数を変数に代入')
}
lesson();
// 問題
// ５秒後に自分の名前コンソールに表示させること
// 無名関数を使用する？
// window.setTimeout(function () { console.log('ゆーほ'); }, 5000);
// ↑window.を省略しても動く
setTimeout(function () { console.log('ゆーほ'); }, 5000);
〇応用をきかせてこんなこともできる
function start1() {
console.log('start1実行');
document.getElementById('display1').innerHTML = '占い中・・・';
window.setTimeout(function () {
var kujiList = [
'大吉',
'吉',
'末吉',
'凶',
];
var result = Math.floor(Math.random() * kujiList.length);
console.log(result);
document.getElementById('display1').innerHTML = kujiList[result];
}, 3000);
}
// 占いボタンを押して３秒後に占いの結果を表示
// 待機時間中は占い中・・・と表示される
// 第一引数が長いパターン
