負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
setTimeout() 書式・説明

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

指定されたミリ秒後にし指定された処理を1度だけ実行します。戻り値としてタイマー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()を1秒毎に実行


関数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」を使う主なメリット3つは次のとおりです。

関数のメリット
1・ プログラム中に何度も出てくるコードが1つにまとまる
2・ 使い方は関数名を呼びだすだけ
3・ 何度でも同じ動作

↓↓↓

関数を使うと、コードが大幅に短くなります!
さらに、プログラムの修正やメンテナンスが簡単になります!





関数を作成する(宣言する)

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



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

<script type="text/javascript">
<!--

function kansu(a,b,c) {

n = a + b + c;
alert(n);

}

kansu(10,20,30);


// -->
</script>



kansu()という関数を作る。
引数はa,b,cの3つ。

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

sincos-sankakkei

point1 直角三角形の状態

斜辺の長さ … 1
角度 … 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.01020cm2の三角形があり、その面積を小数点第二位まで四捨五入する手順

手順1) 面積を×100します

121.01020 * 100 = 12101.20

手順2) 手順1の値を四捨五入します

Math.round(12101.20) = 12101

手順3) 手順2の値を÷100します。

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)まで四捨五入。

ダイアログに四捨五入した面積を表示。




| ホーム |

カレンダー

02 | 2008/03 | 06
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。