さて。
先日、イヌでもわかるJavaScript講座 forも使わず繰り返し表示とは？と言う記事を書いたら読者の方から反響がありましたので、そのご報告です。forも使わずに繰り返し表示がされるのはなぜか？という疑問が判明しました。
問題の箇所
問題のプログラムをJavaScriptで記述すると、こんな表示がされます（ずーっと表示すると目がちかちかすると思いますのでそこそこのところでサイトから離れてください）。
[php]
myMsg = "いらっしゃいませ こんにちは！";
myCnt = 0;
function myFunc(){
myMess = myMsg.substring( 0 , myCnt ) + "_";
myCnt = ( myCnt == myMsg.length ) ? 0 : myCnt+1;
document.getElementById( "typing" ).innerHTML = myMess;
}
setInterval( "myFunc()", 200 );
[/php]
このプログラムの内容をブログで書き起こすとこんな感じです。
1回目 _
2回目 い_
3回目 いら_
4回目 いらっ_
5回目 いらっし_
6回目 いらっしゃ_
setIntervalに注目
初心者からすると、繰り返し文でおなじみのfor文も使わずに、同じような処理が繰り返されることが不思議だったわけですが、どうやらWindowオブジェクトの1つである、setInterval()メソッドがその繰り返しの要素があるようです。
独習JavaScript 第2版
指定時間ごとに繰り返し処理するにはsetInterval()メソッドを使用します。以下のコードはクリックすると1秒ごとにテキストフィールドの値をカウントアップします。
[php]<body>
<h1>独習JavaScript</h1>
<form name="form">
<input type="text" name="output" value="0">
<input type="button" value="カウントを開始" onclick="startTimer()">
</form>
<script src="script.js"></script>
</body>
<script>
function startTimer() {
setInterval(function(){
document.form.output.value = parseInt(document.form.output.value) + 1;
}, 1000);
}
<script>
[/php]
そういえばドットインストール先生のJavaScriptレッスンでも、おっしゃってますね。setInterval がある一定時間ごとにある処理を繰り返すということが説明されています。forを使わない繰り返しについて、やっと納得いきました！
