はじめてみよう。プログラミング！JavaScript！ - 数当てゲーム(HTMLとJavaScriptの紐付け)

実行するためのスクリプトを書いていきます。本来であれば以下のコードを</body>の直前に書きますが、JsBinを使う場合はJavaScriptのエリアに書くと実行できるようになります。

<script>
 // JavaScript をここに書きます
</script>

JavaScript の最初の一歩 - ウェブ開発を学ぶ | MDN

では参考サイトに沿って書いていきましょう。

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;

このコードが何をやているかというと

randomNumberには1から100までのランダムな数字を取得。そのほかのコードでは以下のようなHTMLに組み込まれているclassの名前を取得しています。class名でHTMLで取得できる入力値、指定された場所を変数、定数として取得してコードと紐付ける役割をしています。

まず入力部分です。数字を入力してボタンを押すまでのHTML。

<div class="form">
<label for="guessField">数字を入力してください: </label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="予想を入力" class="guessSubmit">
</div>

結果を反映する部分が以下となります。

<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>

まずはJavaScriptのエリアに書いたらこれでほんとに動くかちょっと試してみましょう。

let randomNumber = Math.floor(Math.random() * 100) + 1;
console.log(randomNumber)

このコードを試してみます。"console.log()"という命令で、Consoleの出力してみます。

Consoleの画面を上部のボタンを押すことで表示して"Run"を押して実行すると、

Consoleの画面に1から100までの数字がランダムに表示されます。Consoleの画面のClearを押すと画面がリセットされます。JavaScriptが実行されました。

ここで

let randomNumber、const guesses

をみてみると"let"、"const"という文字があります。これは"let"が値いろいろ変わる変数、"const"が値が変わらない定数となります。Javascriptには変数として"var"がありますが、問題が発生することがあるのであまり使わないようにすることが推奨されています。

これで入力を受けて結果を表示するHTMLとJavaScriptを実行するための変数とを関連させることができました。あとは実行する関数を作っていきます。