Step.2(続き) おみくじを実現するJavaScriptの解説
前ページに掲載したJavaScriptソースの解説です。
サンプルをそのまま使ってみる場合は、一切修正不要です。また、スクリプト本体部分も一切修正不要です。 「おみくじ」の結果とコメントの定義部分（配列に値を代入している箇所）だけ、自由に修正して下さい。
おみくじの結果とコメント部分：
おみくじの結果とコメントは、下記のような形式で記述します。（mres配列に結果を、mcom配列にコメントを記述します。）
番号（添字）は、半角数字で0から順番に記述して下さい。例えば、下記のように記述します。（※1からではなく0から記述するのは、JavaScriptの配列が0番から始まる仕様なため。）
mres[1] = '中吉'; mcom[1] = 'よかったね！';
mres[2] = '小吉'; mcom[2] = 'まあまあだ！';
： ： ：
mres[25] = '衝撃'; mcom[25] = '大丈夫かっ!?';
サンプルのソースでは0番から4番までの5種類しか記述していませんが、個数に制限はありません。いくつでも好きなだけ追記して下さい。 ただし、番号は0番から順番に使わなければなりません。
なお、結果の文字列にもコメントの文字列にも、直接HTMLタグを含めて記述しても構いません。
mcom[0] = '<strong>おめでとう！</strong>';
上記のように、HTMLタグを含めた記述も可能です。
出現割合を偏らせるには
JavaScriptのrandomメソッドを利用して乱数を生成しているので、おみくじの結果はランダムに選ばれます。 0番のくじ（例えば大吉）と5番のくじ（例えば末吉）が出る確率は同じです。
特定のくじの出現割合を増やすには、同じ内容のくじを複数個作成します。
mres[1] = '大吉'; mcom[1] = 'おめでとう！';
mres[2] = '中吉'; mcom[2] = 'よかったね！';
上記のように記述すれば、「大吉」が出る確率は「中吉」が出る確率の2倍になります。 また、同じ「大吉」でもコメントだけ異なるものにするなどの活用もできるでしょう。
JavaScriptソース各所の解説：
修正は不要ですが、JavaScriptソースの意味について簡単に解説しておきます。すべてコピー＆ペーストで動作可能なので、読み飛ばしても構いません。
ここでは、用意した「くじ」の中から1つをランダムに選択しています。選択した結果（番号）は、変数kujiに代入されます。
◎「 Math.random() 」： 0～1未満のランダムな値(小数)を得ます。
◎「 mres.length 」： 用意した「くじ」の個数（＝mres配列の数）です。
→「Math.random() * mres.length」で、「0」以上・「くじの個数」未満のランダムな実数が得られます。
◎「 Math.floor() 」：小数点以下を切り捨て、整数にします。
■document.getElementById(kCom).innerHTML = mcom[kuji];
この2行では、おみくじを表示するために用意した領域（p要素）の内容を書き換え、表示を変化させています。
◎mres[kuji] ： くじの結果が格納されています。
◎mcom[kuji] ： くじのコメントが格納されています。
◎kRes ： くじの結果を表示するp要素のID名が格納されています。
◎kCom ： くじのコメントを表示するp要素のID名が格納されています。
getElementByIdメソッドを使って表示を変化させる要素を特定し、innerHTMLプロパティを使って内容を変化させています。 innerHTMLプロパティに文字列を代入することで、ページ内に表示されている内容を動的に変化させられます。
「ShowKuji」という関数を作成しています。この関数をボタン（input要素で作るボタン）から呼び出すことで「おみくじ」機能を実現しています。
2つの引数「kRes」と「kCom」には、それぞれ「くじの結果を表示するp要素のid名」と「くじのコメントを表示するp要素のid名」を渡します。順番を間違えないようにして下さい。
なお、ソース中に直接id名を記述せずに引数で受け取るようにしたのは、1つのスクリプトで複数のおみくじを動作させられるようにするためです。
※同一ページ内に複数のおみくじを掲載する場合、それぞれの表示用p要素に付加するID名（id属性の値）は異なるものにする必要があります。
それでは最後に、スタイルシートを用いて装飾してみましょう。
