■ setTimeout() 書式・説明

タイマーID = setTimeout(処理,ミリ秒) タイマーID = window.setTimeout(処理,ミリ秒) タイマーID = フレームオブジェクト.setTimeout(処理,ミリ秒)

指定されたミリ秒後にし指定された処理を１度だけ実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearTimeout()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です timerID = setTimeout("myFunc()",1000);

---

■ setInterval() 書式・説明

タイマーID = setInterval(処理, ミリ秒) タイマーID = window.setInterval(処理, ミリ秒) タイマーID = フレームオブジェクト.setInterval(処理, ミリ秒)

指定されたミリ秒ごとに指定された処理を一定の間隔で実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearInterval()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です timerID = setInterval("myFunc()",1000);

---

リアルタイムに動く時計を作ってみよう

それでは、setIntervalを使ってリアルタイムに動く時計を作ってみましょう。
サンプルの流れは次の通りです。

ページ全体の処理 ページがロードされた瞬間に ↓ setInterval()で関数tokei()を１秒毎に実行 関数tokei()内部の処理 日時の値が入っているDateオブジェクトを生成 ↓ id = "result"を検索して、そのHTML内に日時を入れる

---

ソース

window.onload = function() { timerID = setInterval("tokei()",1000); } function tokei() { dt=new Date(); document.getElementById("result").innerHTML = dt + "<br>"; } ↓↓↓ <div id="result"></div> ↑↑↑

window.onload … ページをロードした瞬間に実行 setInterval() … 一定の間隔でタイマーを実行 new Date() … 日時情報が入ったDateオブジェクトを生成 getElementById() … id名を検索 innerHTML … HTMLタグをその中に記述できる要素 id="" … id名を指定。ここにタイマーが表示される。

関数「function」を使う主なメリット３つは次のとおりです。

関数のメリット

１・ プログラム中に何度も出てくるコードが１つにまとまる ２・ 使い方は関数名を呼びだすだけ ３・ 何度でも同じ動作 ↓↓↓ 関数を使うと、コードが大幅に短くなります！ さらに、プログラムの修正やメンテナンスが簡単になります！

---

■ 関数を作成する（宣言する）

関数を作成

function 関数名(引数) { 処理; }

■ ３つの引数を足してダイアログに表示するサンプル

<script type="text/javascript"> <!-- function kansu(a,b,c) { n = a + b + c; alert(n); } kansu(10,20,30); // --> </script>

kansu()という関数を作る。 引数はa,b,cの３つ。 a + b + c の結果を n に代入。 n をダイアログ表示 関数kansu()を実行。

■ 戻り値（return）を用いたサンプル

<script type="text/javascript"> <!-- function kansu(a,b,c) { n = a + b + c; return n; } function poppo() { jinrai = kansu(10,20,30); alert(jinrai); } poppo(); // --> </script>

kansu()という関数を作成。引数はa,b,c。 a + b + c の結果を n に代入。 戻り値を n に設定。 poppo()という関数を作成。 kansu()を実行。戻り値を jinrai に代入。 ダイアログで jinrai を表示 関数poppo()を実行。

JavaScriptには様々なオブジェクトがあります。

主なオブジェクトの一覧表

Array	配列	image	画像
Date	日付、時刻	links	リンク
document	文書	location	URL
window	ウィンドウ	Math	数学
event	イベント	navigator	ブラウザ
function	関数	Number	数値
history	履歴	String	文字列

直角三角形の幅と高さと求めてダイアログに表示します。次に面積を小数点第五位まで求めてダイアログに表示するサンプルを作っていきましょう。

point１ 直角三角形の状態

斜辺の長さ … １
角度 … 60度
幅 … x
高さ … y

---

point2 三角形の幅（x）を求める

三角形の幅は、cos(角度)で求められる。
サンプルでは三角形の角度は60度なので

x = cos(60) で三角形の幅を求められる。

三角形の幅を求める

幅（x） = Math.cos(角度);

---

point3 三角形の高さ（y）を求める

三角形の高さは、sin(角度)で求められる。
サンプルでは三角形の角度は60度なので

y = sin(60) で三角形の高さを求められる。

三角形の高さを求める

高さ（y） = Math.sin(角度);

---

point4 角度からラジアン（radian, 記号 :rad）に変換する

sin（サイン）やcos（コサイン）に角度を入れる際、角度をラジアンに変換する必要があります。ラジアンとは角度の単位の一つです。1ラジアンは(360/2π) = 約57.29578度となります。

――角度からラジアンに変換するには？

角度からラジアンに変換

ラジアン(rad) = 角度 * Math.PI / 180;

---

point5 小数点以下を四捨五入する Math.round()

小数点以下を四捨五入するには、Math.round()を使います。
習うより慣れる！それではさっそくMath.round()を使ってみましょう。。

――Math.round()で四捨五入してみよう！

Math.round()で四捨五入

kekka = Math.round(5.7); kekka2 = Math.round(5.4);

5.7を四捨五入すると6になり、5.4を四捨五入すると5になります。
上のサンプルをブラウザに書き出すと次の実行結果のように表示されます。

● 実行結果

6 5

---

point6 面積を小数点第五位（n.nnnnn）まで四捨五入する Math.round()

直角三角形の面積を小数点第五位（n.nnnnn）まで四捨五入するには、あらかじめ面積を×10000倍して小数点以下を四捨五入します。そして、その数を÷10000することで、小数点第五位まで四捨五入した数を求めることができます。

小数点第五位まで四捨五入

結果 = Math.round(面積 * 10000) / 10000;

――面積が121.01020cm²の三角形があり、その面積を小数点第二位まで四捨五入する手順

手順１） 面積を×100します

121.01020 * 100 = 12101.20

手順２） 手順１の値を四捨五入します

Math.round(12101.20) = 12101

手順３） 手順２の値を÷１００します。

12101 / 100 = 121.01

結果 三角形の面積（121.01020cm2）が小数点第二位（121.01cm2）まで四捨五入された

---

【サンプル】 三角形の幅と高さと面積を求める

それでは、実際に直角三角形の幅と高さと面積をJavaScriptで求めていきましょう。
スクリプトは次のとおりになります。

<script type="text/javascript"> <!-- kakudo = 60; rad = kakudo * Math.PI / 180; x = Math.cos(rad); y = Math.sin(rad); window.alert("幅： "+ x + "高さ： " + y); menseki = x * y / 2; window.alert("面積： "+ menseki); menseki = Math.round(menseki * 10000) / 10000; window.alert("四捨五入した面積： " + menseki); // --> </script>

変数kakudoに角度を代入。 角度からラジアンに変換。 x（三角形の幅）を計算。 y（三角形の高さ）を計算。 ダイアログに x と y の値を表示。 三角形の面積を計算して menseki に代入。 ダイアログに面積を表示。 面積を小数点第五位（n.nnnnn）まで四捨五入。 ダイアログに四捨五入した面積を表示。