次の現場で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表記がそのまま使えるのでかなり便利ですね。

実行結果はこうなります

以上です!

おみくじでjavascriptを勉強