javascriptとhtmlのつながりについて

htmlで文字の入力欄と送信ボタンを作り、javascriptで入力された文字を基に文を作るコードを書きました。
コードは正常に作動します。疑問に思ったことは、外部ファイルに記述したjavascriptは何故、送信ボタンを押したときに作動するのでしょうか。html内でjavascriptを記述すれば作動するのはわかるのですが、外部ファイルなのにhtmlで起きたことを基にjavascriptが作動するのかがわかりません。HTMLでscriptのsrcでJavascriptの外部ファイルを指定しているからでしょうか？その場合は、Javascript→htmlだけでなく、HTML→Javascriptということも可能になるのでしょうか？

html
1<!DOCTYPE html>
2<head>
3    <meta charset="utf-8">
4    <title>test</title>
5    <link rel="stylesheet" href="stylesheet.css" >
6    <script type="text/javascript" src='./main.js'></script>
7</head>
8<body>
9    <form id="form1" action="#">
10      <input type="text" id="input-message">
11      <input type="button" onclick="showMessage()" value="送信">
12    </form>
13    <p id="output-message"></p>
14  </body>

javascript
1function showMessage() {
2    const textbox = document.getElementById("input-message");
3    const inputValue = textbox.value;
4    const output = "入力された内容は「" + inputValue + "」です。";
5    document.getElementById("output-message").innerHTML = output;
6}

行動規範の内容に同意します

回答1件

html内でjavascriptを記述すれば作動するのはわかるのですが、

同じファイル内でも、別ファイルでも同じです。
<script type="text/javascript">JavaScriptのコード</script>と、
<script type="text/javascript" src='./main.js'></script>は微妙な実行タイミング以外同じです。

投稿2021/05/16 15:54