【ワードプレス】JavaScriptの正しい書き方は？

前回の記事でワードプレスのブログでJavaScriptを動作させてみました。

〇【ワードプレス】JavaScriptを使用してボタンをクリックするとポップアップを表示させる。

しかし、これではjavascript のコードが長くなれば、見ずらいコードになります。

そこで、HTML内にスクリプトタグを入れました。

コードが長くなっても、レイアウトが整ったコードが書けそうです。

<button onclick="name1()">クリックしてください</button>
<script>
function name1(){
alert('Hello')
}
</script>
</body>

HTMLの属性に「name1」という関数を設定して、<sctipt>タグ内に実行する処理を記述しました。

JavaScriptのコードが長くても、シンプルに書くことができそうです。

残念だけど、これではまだ不十分だよ。

上記のコードでは、「クリックしてください」のボタンにクリックされたときにスクリプトタグで設定された関数「name1()」を実行するというものです。

HTMLの属性にアクションを登録する方法は非推奨とされています。

HTMLファイル内にJavaScriptコードを記述するため、プロジェクトが大きくなってくると、コードを整理するのが困難になってきます。（略）基本的にはイベントハンドラやイベントリスナに対してアクションを追加しましょう。

独習JavaScript 新版

p462の引用

Amazon

楽天 Yahoo!

HTML内にJavaScriptのコードを書かないようにするためには以下のようにコードを記述します。

<button id="aaa">クリックしてください</button>
<script>
 function name1(){
document.getElementById("aaa").onclick = function(){
  alert("Hello");
}
</script>

HTML内の「クリックしてください」ボタンにid「aaa」を設定しておき、全てのJavaScriptは<script>タグに書いています。

これで、JavaScriptだけに集中して、開発を進めることができます。