
ミミウサ
JavaScript 初心者ですが、勉強中です。
setTimeout()コマンドというのがありますが、
なんで”out”なんですか?
ひとつ簡単なサンプルを作ってみたら、setTimeout()コマンドの動きが理解できました。
ボタンを押して2秒後にアラートを表示するJavaScriptの例を使って、setTimeout()コマンドの使い方を学んでみましょう。
JavaScriptサンプル「2秒後にアラートを表示する」
setTimeout()コマンドを学ぶために作成するサンプルは、完成すると次のように動作します。
ボタンを押して2秒後に「ご飯ですよ」のアラートボックスが表示されるものです。
ちょっとしたタイマーです。
このソースコードは以下に掲載しています。
setTimeout()コマンドとは
setTimeout(処理内容, 時間)
で、指定時間後に一度だけ処理を実行します。
時間は処理を実行するまでの時間で、ミリ秒(例:1秒=1000ミリ秒)単位で指定します。
setTimeoutは「設定(set)した時間(time)が過ぎたとき(out)の処理内容」というように考えると理解しやすいですね。
”out”は設定した時間(setTime)から外れた時の”out”なのですね!
サンプル「2秒後にアラートを表示する」のソースコード
ソースコードと解説は以下のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<script type="text/javascript">
function execute(){
alert ("It's time for lunch! ご飯ですよ");
//指定時間後の実行内容。ここではAlertを表示。
}
function exec_timeout(){
setTimeout("execute();", 2000);
//2000ミリ秒=2秒後に、execute()のfunctionを実行する。
}
</script>
</head>
<body>
<h1>Timer</h1>
<form action="#">
<input type="button" value="Press this button 押して" onclick="exec_timeout();" >
//このボタンがclickされたらexec_timeout()を実行する。
</form>
</body>
</html>まとめ
setTimeout()コマンドの使い方を学べる、ボタンを押して2秒後にアラートを表示するJavaScriptのサンプルとコードをご紹介してきました。
簡単な作例を作っていくのが一番、コマンドを理解するのに役立ちそうです。
