JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのwindow.alert()でアラート表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

window.alert

JavaScriptのwindow.alert()でアラート表示

JavaScriptのwindow.alert()でアラート表示

JavaScriptの window.alert() を使って、ボタンクリックでダイアログを表示します。

あまり使うことはないかもしれませんが、そんなアラート表示について解説していきます。

window.alert()

JavaAcriptの window.alert() は、表示されたダイアログを閉じる「OK」 ボタンと指定した文字列を表示させるメソッドです。

window.alert(”ここに表示する内容”);

上記のように記述します。

アラート表示は、モーダルウィンドウのような強制力の強いUIで、ユーザーは表示されたダイアログを閉じないとプログラムの他のインターフェイス部分にアクセスする事ができないので、設置するには注意が必要です。

ボタンクリックでアラート表示のサンプル

早速サンプルです。

以下のボタンクリックで、ウィンドウの上部にダイアログが表示されます。

アラート表示が出るサンプルのコード

まずはHTMLですが、クリックイベントでアラート表示を出す為、ボタンにidを振っただけの簡単な記述です。

<button id="deleteBtn1">アラートの表示ボタン</button>

そして、JavaScriptは .addEventListener() を使ってクリックをトリガーにして、window.alert() でアラート表示を行います。

document.querySelector('#deleteBtn1').addEventListener('click', () => {   
  window.alert("アラートの内容を表示\n二行目のテキスト")  
});

表示する文字列を任意のところで改行する場合、JavaScriptで改行コードの「\n」を挿入すればOKです。