どうも！LSSです！！
今回は、JavaScriptをちょっとやってみたい人向けに、
「なるべく簡単なコードでちょっと遊べる」
ものとして「おみくじ」を作り、その解説をしてみたいと思います^^
おみくじ
コード
<div id="gamen"></div>
<script>
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
function gamen_w(){
a=Math.floor(Math.random()*kuji.length);
gamen.innerHTML=kuji[a];
}
</script>
<a href="#" onclick="gamen_w();return false;">おみくじを引く</a>
※コード中、gamen、kuji、gamen_wは任意の名前です。好きに変更してOK^^
コード詳細解説
<div id="gamen"></div>
おみくじの結果を表示する「場所」を用意しています。
<div>タグは「特に意味をもたないタグ」で、こういう時に使うのに便利ですｗ
id="gamen" として、gamenというidをつけておく事で、スクリプトから指定して操作できるようにだけしています。
kuji=["大吉","吉","末吉","凶","大凶"];
kuji という名前の配列変数を宣言しています。
kuji=[ ];
で、kujiは「配列変数」になります。
変数を箱に例えるなら、配列変数は「複数の段があるタンス」のようなものです。
注意点は「0から始まる」事ですね。
で、
kuji=["大吉","吉","末吉","凶","大凶"];
のように書くと、JavaScriptはkujiという名前のタンスを用意してくれた上に、下の段から順に、データを格納してくれます。
この場合、
kuji[0]には 大吉 という文字列が、
kuji[1]には 吉 という文字列が、
kuji[2]には 末吉 という文字列が、
kuji[3]には 凶 という文字列が、
kuji[4]には 大凶 という文字列が
しまい込まれる事になります^^
なお、
kuji=["大吉","吉","末吉","凶","大凶"];
のように書いても、コードのように
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
と改行を入れてもかまいません。
function gamen_w(){
gamen_w という名前の関数を用意しています。
function gamen_w(){
a=Math.floor(Math.random()*kuji.length);
gamen.innerHTML=kuji[a];
}
中に２行のコードを含む、gamen_wという関数ですが、この「用意しています」の段階では中身は実行されません。
「関数が呼び出された時に実行する」内容を用意しています。
a=Math.floor(Math.random()*kuji.length);
aという変数に、数値を代入（セット）しています。
内容はというと、
Math.random() ←0以上1未満のランダムな数が出てきます。0～0.9999999…の範囲内での数値になります。
kuji.length ←配列変数「kuji」の要素数（タンスで例えると段がいくつあるか）を返します。今回は 5 という事になります。
これを、*（アスタリスク記号ですが、JavaScriptでは掛け算になります）している、
Math.random()*kuji.lengthは、0～4.999999…の範囲内でランダムな数値を返す事になります^^
そしてそれを、
Math.floor( ) で包んでいます。
Math.floor()は「与えられた数値を超えない最大の整数を返す」関数で、カンタンにいうと（正の数の場合は）「小数点以下切り捨て」します。
説明が長くなりますたが、要するに
a=Math.floor(Math.random()*kuji.length);
を実行すると、変数 a に0か1か2か3か4のどれかが入る、というコードになります^^
gamen.innerHTML=kuji[a];
ここで、gamenというidをつけた<div>タグの中身を書き換えています。
例えばランダムで選ばれた a の値が 2 だった時、kuji[2]の値（タンスの例でいうと、一番下が0なので下から３段目の中身）を出してきて、<div>の中に入れます。
今回の例では kiji[2] は 末吉 なので、
<div id="gamen"></div>
だった部分が
<div id="gamen">末吉</div>
に変化します^^
<a href="#" onclick="gamen_w();return false;">おみくじを引く</a>
クリックした時に「gamen_w();」と、用意していただけだった関数 gamen_w を呼び出し、実行します。
あとの return false; は、onclick内の処理が終わった後で<a>タグ本来のジャンプ動作をキャンセルするために書いています。
実行の流れ
ブラウザさんの立場にたって（？）流れを書いていきます。
<div id="gamen"></div>
<script>
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
function gamen_w(){
a=Math.floor(Math.random()*kuji.length);
gamen.innerHTML=kuji[a];
}
</script>
<a href="#" onclick="gamen_w();return false;">おみくじを引く</a>
ブラウザでこれが書かれたページ（記事）を開いた時、上から順に読み込まれます。
<script>タグがあると、そこから</script>タグまでの間に書かれているのはJavaScriptのコードなんだな、と ブラウザさん は判断する事になります。
kuji=[
"大吉",
"吉",
"末吉",
"凶",
"大凶"
];
とあるので、ブラウザさんはメモリ上に「配列変数 kuji」を用意し、その中に５つの文字列をしまい込みます。
次に、
function gamen_w(){
a=Math.floor(Math.random()*kuji.length);
gamen.innerHTML=kuji[a];
}
というのがありますが、ここではブラウザさんは gamen_w という関数を「用意するだけ」します。
「あとでやる」って感じですねｗ
次に</script>があるので、JavaScriptとしての仕事は一旦、終わりになります。
あとは、
<a href="#" onclick="gamen_w();return false;">おみくじを引く</a>
で「おみくじを引く」というリンクを画面に表示して、ブラウザさんの仕事は一旦休憩ですね^^
記事を見た人がこの「おみくじを引く」というリンクをクリックした時、
onclick="gamen_w();return false;"
と書かれているので、休憩していたブラウザさんは仕事を再開します。
gamen_w()は…そんな名前の関数用意していたなぁ、と、ブラウザさんは思い出し、そこで初めてgamen_wの内容の実行に取り掛かります。
a=Math.floor(Math.random()*kuji.length);
で、運命の抽選を行い、
gamen.innerHTML=kuji[a];
で、抽選番号に従った結果を、画面に書き出します。
コピペで使用する際の改変ポイント
簡単なコードでも、詳しく（？）書くと、ながったらしくなってしまいますね^^;
もし単純にコードをコピペして使いたいって人がいた場合のために、簡単に改変できるポイントを書いておきます。
"大吉",
"吉",
"末吉",
"凶",
"大凶"
↑この部分ですね。
"" で挟んだ言葉の内容を書き換える事で、出てくる結果を好きな言葉に変更する事ができます。
""の後ろに , （カンマ）をつけて、次の言葉との区切りにします。
（なので最後だけつけません）
言葉の数は、増やしても減らしてもOK！
あとは…
<a href="#" onclick="gamen_w();return false;">おみくじを引く</a>
ここの言葉も好きに書き換えてOKです。
診断メーカーっぽい事が手軽にできますねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
