次の現場でjavascriptを使うことになったので、少しでも触れるようになっておこうと勉強し始めました。
手始めに、よくある「おみくじ」アプリを作ってみます
アプリと言えるほど大層なものではなく、ただweb上で表示するだけですが笑
#htmlコード(index.html)
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
</head>
<body>
<h1>簡単おみくじ</h1>
<input type="button" id="getResult" value="ボタンを押すとおみくじが引けるよ">
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
javascriptを適用したい場所にscriptを差し込んでやると、そこに反映してくれるようです。
でもcssと同様で、headに書くのが一般的なのかな？とも。
これは今後勉強していって気づけばいいですね。
#javascriptコード(script.js)
let omikuji = {
items: ["大吉", "吉", "中吉", "小吉", "末吉", "凶"],
getResult: function() {
let results = this.items;
return results[Math.floor(Math.random() * results.length)]
}
}
//console.log(omikuji.getResult())
let getResult = document.getElementById("getResult");
let result = document.getElementById("result");
getResult.addEventListener("click", function() {
let done = omikuji.getResult();
switch (done) {
case "大吉":
result.innerHTML = "おめでとう！結果は「" + done + "」でした";
break;
default:
result.innerHTML = "結果は「" + done + "」でした";
}
})
変数の宣言、条件分岐、関数の作成、HTMLの操作を取り入れました。
基礎的な事は豊富に学べたかなと思います。
#変数の宣言
javascriptではletで変数を宣言する必要があるようです。
pythonでは宣言なしで使えたので、少し煩わしさがあります。
なお、定数を使用する際はconstで宣言するみたいです。
事前に宣言する分、管理しやすいのがメリットですね。
#条件分岐
他の言語でもあるif文でも良かったのですが、より簡単にまとめられるswitch文を今回は使いました。
「if hoge = hogehoge」と書くより、caseで結果だけ書く方が楽ですね。
ここでは、それぞれのcaseでbreakを書くことが注意です。
仮に下に書いたcaseにも該当すると、下が優先されてしまうからです。
caseに該当しない処理はdefaultで書いてあげます
#関数
関数はfunctionで定義してあげます。
またitems: []のように関数内で変数を宣言する際は、
let 変数名 = ではなく変数名: になるのも注意です。
Math.floor()は、整数に直してくれます
Math.random()は、0-1内でランダム数字を作ります。
#HTMLの操作
HTML側の操作をできるのがjavascriptの醍醐味です。
今回はたくさんある操作の中で、3つ使ってみました。
document.getElementById(htmlのid)
これはhtmlで宣言したidをとってこれます。
つまり該当のid箇所に操作を加えることができます。
addEventListener(“ユーザー動作”, 操作)
ユーザーの動作を引き金として、次の操作を実行できます。
今回は”ユーザー動作”にclickを入れました。
これはユーザーが画面クリックした時を、起点にしたいがためです。
innerHTML
HTML側に文章を渡すことができます。
html表記がそのまま使えるのでかなり便利ですね。
#実行結果はこうなります
以上です!