付録A いろいろな機能

最終課題へ向けて、知っていると便利な機能を紹介します。

タイマーによる繰り返し

練習問題06-10でタイマーイベントによる実行をやりましたが、一回だけでなく一定時間ごとに繰り返しイベントを起こすことができます。

インターバルタイマーは、人間がボタンを押す代わりに定期的にJavaScript関数を呼び出してくれます。設定する時は次のようにします。

  • 変数 = setInterval(呼び出す関数, 呼び出す間隔);

「呼び出す関数」はHTMLでonclick=の後ろに書くのと同じように書きます。「呼び出す間隔」はミリ秒単位の数値を書きます。「変数」にはタイマーの番号が保存されます。この番号はタイマーを停止する時に必要です。

タイマーを停止する時は次のようにします。

  • clearInterval(タイマー番号);

サンプルプログラムは次のようになります。画像ファイルpicture.jpgと同じディレクトリに置いてください。

  • interval.html
  • interval.js

setIntervalのカッコの中の「呼び出す関数」は、関数名だけを書くこともできます。上の例だと6行目を次のように書いても同じです。
timerId = setInterval(change, 100);

乱数

数学的な式は、何回計算しても同じ答になります。しかしコンピュータのプログラムでは、計算するたびに違う結果になって欲しい時があります。例えば、ゲームで敵の動き方を計算する時、いつも同じ動きをするよりも実行するたびに違う動き方をする方が面白くなります。

まったくでたらめに数を並べたものを乱数と言います。JavaScriptでは、Math.random()という関数で乱数(に見える数)を計算してくれます。WebコンソールでMath.random()を実行すると何か数が表示されますが、これは実行するたびに違う数になります。

グー、チョキ、パーをデタラメに表示するサンプルプログラムは次のようになります。

  • random.html
  • random.css
  • random.js

配列と乱数

グー、チョキ、パーは3通りでしたが、もっとたくさんのデータがある場合はif文で場合分けするのは面倒です。そのような場合は、配列にデータを記憶させておき、乱数でその中から1個取り出すようにすると便利です。

Math.random()が計算するのは0以上1未満の小数です。配列の要素をデタラメに取り出したい場合は整数の乱数が必要ですが、その場合は切り捨て関数Math.floor()を使って整数に直します。例えば、0から9までの整数の乱数を計算するには次のようにします。

  • Math.floor(Math.random()*10)

占いをするサンプルプログラムは次のようになります。占いの文章をsentenceという配列に記憶させ、その何番目の文を使うかということを、0から文の個数-1までの乱数で決めます。

  • fortune.html
  • fortune.css
  • fortune.js