https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/it-is-possible-to-display-an-alert-on-the-browser-with-javascript/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/it-is-possible-to-display-an-alert-on-the-browser-with-javascript/

JavaScriptでブラウザ上でアラートを表示させることができるalert()メソッドの使い方

alert()メソッドの使い方

JavaScriptでブラウザ上でアラートを表示させるにはalert()メソッドを使います。

alert()メソッドは、メッセージとOKボタンのみが表示されるブラウザに搭載されている警告ダイアログを呼び出すメソッドです。

簡易的な警告文やデータの送信前の確認のために使用されます。

メソッド

メソッド意味返り値
alert(メッセージ)警告ダイアログを表示なし
alert()メソッド

サンプルコード

サンプルコードとして、ボタンを押すと「今日の日付」を返すサンプルコードを紹介します。

Output
Pug
 button#button.mb-4 Button
 div#pushalert
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const pushAlert = document.getElementById('pushalert');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);

/** ボタンをクリックするとアラートを表示 */
function onClickAction() {
	//アラートを表示
	const dateInstance = new Date();
	window.alert(`こんにちは!今日の日付は${dateInstance.getFullYear()}年${dateInstance.getMonth() + 1}月${dateInstance.getDate()}日です。`);
}
インストラクター
コメント

コメントを残す