2014-11-20
2014-11-20
random関数
乱数
- ランダムな数列
- 予測できない数列
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>乱数</title> </head> <body> <h1>乱数</h1> <script> var num = Math.random(); document.write(num); </script> </body> </html>
乱数の発生
<script> var num = Math.floor( Math.random()); document.write(num); </script>
この場合、小数点以下を切り捨てているので、すべて「0」が表示されます。
ランダムな「整数」を生成する
rnd = Math.floor(Math.random() * (max + 1));
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> var max = 10; var num; for(var i=0; i < max; i++){ num = Math.floor(Math.random() * (max + 1)); document.write(num + '<br>'); } </script> </body> </html>
画像のランダム表示
- 「img0~img4」画像を準備する
- 「img1~」の場合は、((Math.random()*numOfImg)+1)となる
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>イメージをランダムに表示する</title> <style> body { text-align: center; } </style> </head> <body> <h1>今日のイメージ</h1> <script> var numOfImg = 3; var num = Math.floor(Math.random() * numOfImg + 1); document.write('<img src="img/img' + num + '.jpg">'); </script> </body> </html>
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>おみくじ</title> </head> <body> <h1>あなたの今日の運勢</h1> <script> //配列imagesにイメージファイルのパスを入れておく var images = newArray(4); images[0] = '0.jpg'; images[1] = '1.jpg'; images[2] = '2.jpg'; images[3] = '3.jpg'; var num = Math.floor(Math.random() * 4); document.write('<p><img src="img/' + images[num] + '"></p>'); </script> </body> </html>
DOMとダイナミックHTML
- ドキュメント内の任意の要素にアクセスする仕組みのことを「Document Object Model」と呼びます
- DOMは、W3Cという標準化団体で規定された仕組みで、JavaScriptにはDOMを操作するメソッドが用意されています
- DOMを利用してHTML内の要素を動的に変更することを「ダイナミックHTML(DHTML)」と呼びます
《おみくじプログラム》
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>DOMによるおみくじ</title> <style> body, div, h1, h2, h3, h4 { margin: 0; padding: 0; } body { font-size: 16px; text-align: center; background-color: #FFF; padding-top: 50px; } #myArea { background: #F0F0F0; margin: 0 auto; width: 600px; line-height: 120px; } #myArea h1 { font-size: 36px; color: #390; } #myArea h1.today { color: #000; } #myArea h4 { color: #F00; } </style> </head> <body> <h1>今日の運勢</h1> <form> <p> <inputtype="button"value="占う"onclick="unsei();"> </p> </form> <divid="myArea"> <h1class="today">今日はどんな運勢でしょう?</h1> </div> <script> var kuji = newArray(4); kuji[0] = '<h1>大吉</h1>'; kuji[1] = '<h2>中吉</h2>'; kuji[2] = '<h3>小吉</h3>'; kuji[3] = '<h4>凶</h4>'; function unsei(){ var myArea = document.getElementById('myArea'); var num = Math.floor(kuji.length * Math.random()); myArea.innerHTML = kuji[num]; } </script> </body> </html>
- 要素数が4の配列「kuji」を生成する
- 各要素におみくじのテキストを代入する
- 「unsei」関数を定義する
- ID名「myArea」のdiv要素におみくじを表示する
- フォーム内「占う」ボタンに、onclickイベントハンドラを追加
- クリックされると定義した「unsei」関数を呼び出す
《実行結果》
DOM操作のメソッド
HTMLドキュメントの階層構造
- DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます
- この階層構造を「DOMツリー」と呼びます
- DOMツリー内の個々の要素を「ノード」と呼びます
ノードを取得する getElementByIdメソッド
- プログラムで目的のノードを取り出す
- 引数には、HTMLにはタグで設定したid属性を指定します(HTMLタグにあらかじめid属性を指定しておく必要があります)
ノードにHTMLを設定する innerHTMLプロパティ
- DOMの各ノードは、innerHTMLというプロパティが用意されています
- 「innerHTML」は日本語にすると「内部」ですが、文字通りノードの内部のHTMLを表します
- innerHTMLの値を変更することにより、ノードのHTMLを動的に変更できます
《例》
var myArea = document.getElementById('myArea'); myArea.innerHTML = '<h2>中見出し</h2>';
unsei関数
function unsei(){ var myArea = document.getElementById('myArea'); var num = Math.floor(kuji.length * Math.random()); myArea.innerHTML = kuji[num]; }
- getElementByIdメソッドを使用してIDが「myArea」のノードを取得し、変数myAreaに格納します
- 0から「要素数 -1」までの整数をランダムに生成して、変数numに格納します
- この変数は、配列「kuji」の添字として使用します
- innerHTMLプロパティに配列kujiの要素を代入して、表示されるメッセージを更新しています
まとめ
- DOMを使用すると、HTMLの任意の要素にアクセスできる
- 指定したIDのノードを取り出す getElementByIdメソッド
- ノードのHTMLを変更する innerHTMLプロパティ