- おみくじリストを作る
- 乱数を作り、おみくじの目を出す結果を毎回変化させる
- ボタンを設置する
- 関数(プログラムのセット)を使って呼び出す
JavaScriptでおみくじを作ってみよう

今回は簡単な【おみくじ】を作ってみるッピよ~

おみくじ?

神社で引く吉凶をうらなうゲームッピ!
それをJavaScriptで作るッピ~

今回は、JavaScriptで乱数、
関数・ボタンの配置を学ぶッピよ!
楽しみにしているッピ!
おみくじのプログラムコードと解説
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function Omikuji() {
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}
</script>
<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>
</body>
</html>

今回はこのコードを解説していくッピよ~
サンプルコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>

今回はこのコードを元にプログラムをつくってみるッピ!
おみくじリストをつくる

まずはおみくじリストをつくってみるッピ!

リスト配列は
let リスト名 = [“なかみ1”,”なかみ2”,];
でつくることができるッピ!

let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
今回はこんな風におみくじリストをつくってみるッピよ~
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
</script>
<!-- ここまで! -->
</body>
</html>
乱数を作ってみよう

次はプログラムのための【乱数】を作ってみるッピ
サンプルコードを用意するから、それを元に作っていくッピよ~

乱数~? ってなんだっけ・・・

乱数やランダムというのは、行動を起こすごとに結果が変わることッピネ!
おみくじやサイコロ、いろいろなゲームに使われてるものッピ!

へ~面白そう! さっそくやってみようぜ

<sprict></script>の間に
let r = Math.floor( Math.random() * omikuji.length) ;
document.write(omikuji[r]);
と記述するッピネ!
できたらファイルをダブルクリックして、ブラウザで確認するッピよ~


ページを起動したら、赤枠の中にある更新ボタンをクリックしてみるッピ。

赤枠の

かな?

そうっピ!
何回も更新してみるッピよ~!



スゲエエ 全部違う結果になった~!
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let r = Math.floor( Math.random() * omikuji.length);
document.write(omikuji[r]);
</script>
<!-- ここまで! -->
</body>
</html>

解説すると
let omikuji = [“大吉”,”吉”,”中吉”,”小吉”,”末吉”,”凶”,”大凶”];
let r = Math.floor( Math.random() * omikuji.length);
document.write(omikuji[r]);
という意味ッピ!

なんで Math.Floor 命令文をするんだよ?

それはッピネ~
この【Math.Floor】で小数点を切り捨てないと、ランダムで作った数字に小数点が加わってしまうッピ。
例えば、3.14159265358979…..みたいな感じッピ!

じゃあこの
Math.random() * omikuji.length
は? なんで omikuji.length なの?

この .length は、
文字列だったら文字数を、
数字の場合はケタ数を、
リストだったらリストの中身の個数を調べる命令文ってことッピ!

だから omikuji.length は
おみくじの中の単語数・・・
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
つまりリストの中身の個数・・・7つの数分を表しているッピ!
omikuji.length = 7 という意味ッピよ~

だから
<script>
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let r = Math.floor( Math.random() * 7);
document.write(omikuji[r]);
</script>
と直接数字を入れることでもプログラムを動かすことができるッピ~!

なるほどなぁ~!
ボタンを設置してみよう

毎回更新ボタンを押すのは、分かりにくいし面倒ッピネ~
ここはボタンを設置するッピ!

ボタン?

WEBサイトで見かけるこういうモノッピよ~
↑ 押してみてね

あ~ これがボタンか~。よく見たことある!

ボタンを設置するのはHTMLのタグッピネ!
まずは最初のサンプル文をコピーするッピヨ~!
<!-- 見えない部分 -->
<html>
<head>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<!-- ここまで! -->
</body>
</html>

ボタンを設置するにはこのタグを使うッピよ~。
<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>
今回は<script></script>ではなく、その下・・・<body></body>の中にタグを書いていくッピネ!

これは
< button onclick=”Omikuji ();” /> おみくじを引く </button>
<p id=”kekka”> </p>
という意味ッピ! Saikoro(); の部分はまだ内緒ッピヨ~

この id = “kekka” って?

【 id 】・・・
これはHTMLのタグにつける、住所のようなモノッピね~
詳しくは、HTMLやCSSの解説ページで説明するッピ!
<!-- 見えない部分 -->
<html>
<head>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>
<!-- ここまで! -->
</body>
</html>


なんか・・・押しても何も変わらないんだけど・・・??

ふふふふ! これからがプログラミングの真骨頂ッピ!
【関数】(命令文のグループ)を使って、ボタンを押したあとにプログラムを実行させることができるッピよ~!
今はまだ、ボタンを押したあとに呼び出すプログラムをセットしてないから動かないッピネ~

へ~! なんかすごそうじゃん!
やってみようぜ!

それではさっそく
【関数】を使って、プログラムのセットを作ってみるッピよ~

<head></head>の中に、ボタンを押したときに作動するプログラムを書いていくッピ!
<head>
<script>
function Omikuji() {
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let r = Math.floor( Math.random() * omikuji.length) ;
document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}
</script>
</head>
と記述していくッピ!

これは
function Omikuji { 命令文をここに書く ;}
という意味で、これこそがズバリ【関数】というッピネ!

次のコードはHTMLの書き換え…
document.getElementById(“kekka”)
.innerHTML = omikuji[r];
という感じッピネ!

なるほどなー


スゲエエエ! できたああ!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function Omikuji() {
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}
</script>
<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>
</body>
</html>
完成品のおみくじサンプル

完成品はこんな感じッピ! みんな上手くできたッピか?
全体のコードの確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function Omikuji() {
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}
</script>
<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>
</body>
</html>
- Math.random( )で乱数をつくり、Math.floor( )で小数点を切り捨てる
- <input type=”button”>タグでボタンを設置できる
- 関数を作り、ボタンの onclick を使うことで、ボタンを押してJavaScriptプログラムを動作させることができる
- document.getElementById( “id名” ).innerHTML =で、 id で指定した場所の、文字を書き換えたりタグを書き換えたりできる
- document.getElementById( “id名” ).src =で、 id で指定した場所の、画像を差し替えることができる