JavaScriptのDOM操作で行うアラート表示をまとめてみた #JavaScript

１．htmlで下記のコードを記述

index.html

    <a href="Javascript:window.alert('OK')">アラート</a>

２．ブラウザで「アラート」をクリックすると、下記のようにアラート表示されます。

１．任意のidを指定する

index.html

  <button id="alertbtn">ボタン１</button>

２．jsファイルでfunctionのコードを記述

app.js

window.onload = function(){
  document.getElementById('alertbtn').onclick = function(){
    window.alert('ボタン１が押されました');
  }
}

window.onload
↑ページがロードされたら function(){} の中の処理を実行します。

getElementById()
↑idプロパティが指定された文字列にアクセスします。この場合は、 index.htmlに記述されたidの値である"alertbtn" にアクセスしています。

.onclick
↑index.htmlの「ボタン１」がクリックされたときの動作を定義します。

「ボタン１」押すと、結果は下図のようになります。

上記の操作を踏まえた上でイベントハンドラを用いて記述すると、
簡潔なコードになります。

1.htmlファイルでDOMイベントを記述

index.html

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

2.jsファイルでアラートメッセージを記述

app.js

function btn_click(){
  window.alert('ボタン２がクリックされました');
}

結果