［やってみた］JavaScript MDN web docsチュートリアル初級

JavaScript MDN web docsにある公式チュートリアルができた（ほぼ写経）ので初のnote投稿も兼ねてアップして見ます

とその前に余談ですが、最近JavaScriptの勉強を始めました。大学院の時はRをもっぱら使っていまして、R以外ムリぽって感じだったんですが、最近就職した会社の研修でpythonの書き方を粗方学び、他の言語も色々触れないとエンジニアって仕事にならないのねと痛感したので、以前少しかじったJSを真面目に勉強しようと思います。あんまり中身がない統計系のブログもやってます（ほぼ更新してませんが・・・）。よければぜひ
http://forest-of-sheep-and-steel.hatenablog.com/

環境
　MacBook Air (13-inch, Early 2015)
　バージョン 10.12.6（16G1114）
　エディタ　Visual Studio Code

コードについては一応Githubにアップしてみました。
https://github.com/masayukeeeee/JS_training/tree/master/training_02

つまづいたところはほぼタイポ。あとはチュートリアルではjsをhtml内で完結させてたので、切り出してmain.jsから読みこませようとした際に、jsの実行順序を意識せずにチュートリアルに従って上から書いていっていたので、まだ定義していない関数を利用しようとしてたりしていてエラーが出ました。そういう部分が全然わかっていないんだなーと認識しました。とりあえずDONE！jsの部分だけここにあげます！

// number generator
var correct_number = Math.floor(Math.random() * 101);

// hints
var hints = new Array("It's too high", "It's too low", "Congratulation!!!");

// get parameters
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');

var guessCount = 1;
var resetButton;

// define function named resetGame
function resetGame() {
    guessCount = 1;

    var resetParas = document.querySelectorAll('.reultParas p');
    for (var i = 0; i < resetParas.length; i++) {
        resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);

    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();

    lastResult.style.backgroundColor = 'white';

    randomNumber = Math.floor(Math.random() * 101)
}

// define function named setGameOver
function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'New game';
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click', resetGame)
}

// compare two numbers
function compare() {
    var predict_number = Number(guessField.value)

    if (guessCount === 1) {
        guesses.textContent = 'previous numbers: ';
    }
    guesses.textContent += predict_number + ' ';

    if (correct_number < predict_number) {
        var result_status = 0;
    } else if (correct_number > predict_number) {
        var result_status = 1;
    } else {
        var result_status = 2;
    }

    lastResult.textContent = hints[result_status]

    if (result_status === 2) {
        setGameOver();
    } else if (guessCount === 10) {
        setGameOver();
    }

    guessCount++;
    guessField.value = '';
    guessField.focus();

};

// set function on button
guessSubmit.addEventListener('click', compare);