問題5:jqueryでsin,cosを使おう!
今回はsin、cosを使ってみましょう!
jqueryなどの言語の面白いところはこのように数学が使えるところだと思います。
jqueryなどの言語の面白いところはこのように数学が使えるところだと思います。
あらかじめエディタに書くコード
<input type=>number> placeholder=>ここに数値を入力>>
<p>sin<span></span>=<span></span></p>
<p>cos<span></span>=<span></span></p>
¥HTML¥
期待する画面
解答ソースコード
$(function () {
$("input").change(function () {
var angle= $(this).val(),
rad=angle*(Math.PI/180),
sin=Math.sin(rad),
cos=Math.cos(rad);
$("p").eq(0).find("span").eq(0).text(angle+"°");
$("p").eq(1).find("span").eq(0).text(angle+"°");
$("p").eq(0).find("span").eq(1).text(sin);
$("p").eq(1).find("span").eq(1).text(cos);
});
});
¥JavaScript¥
解説
まずinputが変更されたことをトリガーにします。そしてvalで数値を取得してきます。ここが今回1番大事なのですが、jqueryで使うsinやcosはradを単位としているので取得したangleをrad表記に変換します。rad表記ではπ=180度となるのでangleを180で割り、Math.PIはπ(3.14...)を表しており、これをangleにかけます。そして最後にMath.sin、Math.cosを使って処理を行い、その値を変数に代入します。今回の主目的はsin、cosをjqueryで使って値を得ることなので、残りの表示は好きなようにすればいいと思います。
ログインして解答を見る
完了にする!
活動記録をTweetする