HTML - Java Script 基本文法

HTMLでJavascriptを使う、基本的な話です。

JavaScript自体の基本文法はこちら参照
HTMLの基本文法はこちら

ファイル構成

2通りある。
・html(.html)とjavascript(.js)を準備し、htmlからjavascriptを読みこむ。基本形。
┗test.js
┗test.html

<script src="test.js"></script>

・html内にjavascriptを記述する。短いコードならこっちでいい。
┗test.html

<script>
  function hogehoge(){
    console.log('fugafuga');
  }
</script>

ボタンをクリックしたときに関数を呼び出す。

書き方がいくつかある。
・ボタン自体に呼ぶ関数を設定する。
・ボタンにIDを付けて、該当するIDが押されたことをScript側で検知して関数を起動する。

・ボタン自体に呼ぶ関数を設定する。

<button onclick="buttonClick()">ボタン</button>

<script>
    function buttonClick(){
        alert('Click');
    }
</script>

ボタンにIDを付けて、該当するIDが押されたことをScript側で検知して関数を起動する。

<button id="button1">ボタン</button>

<script>
    function buttonClick(){
        alert('Click');
      }
     let button = document.getElementById('button1');
     button.onclick = buttonClick;
</script>

フォームの値を読みこむ・書き込む

フォームにIDをつけておき、valueで操作する。

<input id="input1"><br>
<input id="output1"><br>
<button onclick="test()">ボタン</button>

<script>

    function test(){
        let input1 = document.getElementById('input1');
        let output1 = document.getElementById('output1');

        //インプット1の値をログに出力する。
        console.log(input1.value);

        //アウトプット1のフォームに「hogehoge」をセットする。
        output1.value = "hogehoge";
    }
</script>



</script>

てみブログ

個人的な覚書用です