Canvasを使うためのJavaScript入門

ボタンクリックでランダムな数字を出す

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントにボタンを加え、そのクリックによりランダムな数字を表示します。ランダムな数値は、Math.random()関数で求めます。
講師:
05:16

字幕

次にご紹介するのは ランダムな数値を計算する関数です そして そのランダムな数値を計算する 関数から求めた結果を ボタンクリックで警告ダイアログを表示して そこに出してみたいと思います ランダムな数値を計算するのは Math.random 関数です この関数は 0 以上 1 未満の ランダムな小数値を教えてくれます 数値を計算して値を教えてくれることを 数値を返すという言い方をします これもまたプログラミングの用語です 早速 Math.random 関数を html ドキュメントの script 要素に書いていきます Math.random 関数の 返された値を変数に入れることにしましょう randomNumber とします 変数名です そして Math.random とりあえずは alert メソッドを使って 変数の値を警告ダイアログに 表示してみることにしましょう できるだけ変数名などは コピーを使った方が失敗がありません では早速 確認をしてみます 「ファイル」メニューの 「ブラウザでプレビュー」です 警告ダイアログボックスに ランダムな小数値が表示されました この小数値の桁数は概ね 小数点以下15~16桁です では OK ボタンをクリックして閉じます html ドキュメントの body 要素に ボタンを加えたいと思います ボタンは button 要素で加えます そして単純なボタンの場合には type 属性を button とします 更にボタンはクリックしたら 何か実行したいですね それは onclick 属性に JavaScript のステートメントを設定します そして ボタンに表示したいラベル 名前を書いて script のタグを閉じます html ドキュメントに ボタンを加えます その前に script 要素に書いた alert メソッドは削除しましょう ボタンをクリックしたら 警告ダイアログを出したいからです では button 要素です button で type 属性は button でした そして onclick 属性ですね ここに alert を書きます 閉じたらラベルを入れて button のタグを閉じます そして alert メソッドの中には 変数の値を出したいので 変数をコピーします ではこれでドキュメントを保存して 確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です ドキュメントにボタンが表示されました 「ランダム数」という ラベルが書いてあります ランダムな数字は まだでてきません このボタンをクリックしますと 警告ダイアログが開いて ランダムな小数値が表示されました OK ボタンで閉じますが その前にこの数字の そうですね 下3桁 244 をちょっと覚えておきましょう OK ボタンで閉じます またクリックすれば まだランダムな数字がでてきます 但し 下3桁 244 全部いちいち確認しませんが つまり何回押しても 同じランダムな数字がでてくるわけです この理由は script 要素を 確認してみる必要があります この html ドキュメントでは まず body 要素に button 要素で ボタンを加えました そして script 要素の中で Math.random 関数を使って ランダムな小数値を変数に入れています そしてボタンには onclick 属性を定めましたので ボタンをクリックするたびに alert メソッド つまり警告ダイアログが表示されて 変数の値が表示されます alert メソッドは クリックするたびに実行されます けれども Math.random 関数は script 要素が読み込まれた時に 一度 変数に値を放り込んだきり 二度と実行されることがありません そのため変数値はいつまでたっても変わらず alert 警告ボックスは何度でもでますけれど でてくる値が変わらない ということになったわけです ボタンをクリックするたびに ランダムな数字を変更するには もう少し手の込んだ script を書く必要があります まずここまでは Math.random 関数で ランダムな数値を出す方法 それから button 要素を追加して ボタンをクリックするたびに script を実行する方法でした

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。