2014-11-20

2014-11-20

random関数Add Star

 

 

乱数

  • ランダムな数列
  • 予測できない数列

<!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>

乱数の発生

  • 「random()」は、「0以上1未満の乱数を生成する」メソッド
  • 「floor()」は、「小数点以下を切り捨てる」メソッド

<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>

 

f:id:web-javascript:20130601220450j:image

 


  1. 素数が4の配列「kuji」を生成する
  2. 各要素におみくじのテキストを代入する
  3. 「unsei」関数を定義する
  4. ID名「myArea」のdiv要素におみくじを表示する
  5. フォーム内「占う」ボタンに、onclickイベントハンドラを追加
  6. クリックされると定義した「unsei」関数を呼び出す


《実行結果》

 

f:id:web-javascript:20130601221520j:image

 


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];
}

  1. getElementByIdメソッドを使用してIDが「myArea」のノードを取得し、変数myAreaに格納します
  2. 0から「要素数 -1」までの整数をランダムに生成して、変数numに格納します
  3. この変数は、配列「kuji」の添字として使用します
  4. innerHTMLプロパティに配列kujiの要素を代入して、表示されるメッセージを更新しています


まとめ

  • DOMを使用すると、HTMLの任意の要素にアクセスできる
  • 指定したIDのノードを取り出す getElementByIdメソッド
  • ノードのHTMLを変更する innerHTMLプロパティ