ウェブブラウザでのJavescriptの動作確認

Question

JSの勉強をはじめたばかりで初心者質問で恐縮ですが、
次のようなif文の動作確認をしたい場合
Firefoxブラウザ（DeveloperEdition）で変数score中身をかえることでその後の挙動をみることは可能でしょうか？

score = 80
if (score===100){
    console.log('perfect')
}else if(score >= 90){
    console.log('great')
}else if(score>= 50){
    console.log('good')
}else {
    console.log('you need to study hard')
}

Answer 1

F12 キー（または Ctrl+Shift+I）で開発者ツールが使えます。
そのコンソールタブに好きにコードを打ち込めば実行は容易です。

参考: 開発ツール | MDN

---

コードを関数化してしまうと再利用しやすいです。

function f(score) {
    if (score===100){
        console.log('perfect')
    }else if(score >= 90){
        console.log('great')
    }else if(score>= 50){
        console.log('good')
    }else {
        console.log('you need to study hard')
    }
}

f(80);

ここで f(90) などと入力して実行すれば

score = 90
if (score===100){
    console.log('perfect')
}else if(score >= 90){
  ...

と入力して実行したのと同等の結果を得られます。

Comments

[chgrios]

コンソールタブの存在は知っているのですが、読み込んだHTMLに付属しているJavascript内の変数の値を任意のものに変えるということをしたいのですが、、、

[htsign]

本文に追記しました。

Answer 2

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#score').addEventListener('input',e=>{
    const view=document.querySelector('#view');
    var n;
    const score = !isNaN(n=e.target.value)?parseInt(n):-1;
    let txt="";
    if (score===100){
      txt='perfect';
    }else if(score >= 90){
      txt='great';
    }else if(score>= 50){
      txt='good';
    }else if(score>= 0){
      txt='you need to study hard';
    }
    view.textContent=txt;
  });
});
</script>
score:<input type="text" id="score"><br>
<div id="view"></div>