【JavaScript入門】alert・confirmでダイアログを表示する方法

JavaScript入門】alert・confirmでダイアログを表示する方法

Webサイトを閲覧しているときに、ポップアップが表示されたことはないでしょうか。エラーのお知らせ、Yes/Noの選択など、ポップアップにはいくつかのパターンがあり、確認ボタンを押して閉じることができます。
このようなポップアップはダイアログと呼ばれ、重要な情報を伝える手段として欠かせません。今回はalertとconfirmでダイアログを表示する方法についてご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

ダイアログとは

ダイアログとは

「ダイアログ」とはダイアログボックスの略で、PCやモバイル端末を操作しているときに開くウィンドウのことです。

ECサイトで「この内容で送信してもよろしいですか?」「必要な項目が入力されていません」「入力項目に誤りがあります」など、ユーザーに確認をしたり、注意を喚起したりするためのポップアップがダイアログに該当します。

複数のウィンドウが開いていても、ダイアログは一番手前に表示され、ユーザーに大切な情報を伝えます。このダイアログの表示にはJavaScriptが用いられています。
このようにJavaScriptは、Webページの骨組みの中でHTMLでは対応できない部分をサポートしているのです。

JavaScriptの「alert」

JavaScriptの「alert」

ECサイトで個人情報を入力・送信する際、入力内容に不備があった場合に表示されるダイアログをalert(警告)ダイアログと呼びます。alertダイアログの場合、ユーザーは「正しい内容を入力してください」というダイアログのOKボタンを押し、正しい内容を入力します。

上記のことをプログラムで実現してみましょう。JavaScriptのコードをHTMLファイル内に直接記述する方法と外部から読み込む方法がありますが、ここでは前者を採用します。

以下のプログラムをメモ帳などに貼り付けて保存し(ファイルの拡張子は.html)、ブラウザで開いてみてください。なお、<body>と</body>の間に書かれている部分がJavaScriptのコードです。

<html>
<head>
<title>Sample</title>
</head>
<body>
<script type="text/javascript">
window.alert("正しい内容を入力してください。");
</script>
</body>
</html>

JavaScriptの「confirm」

JavaScriptの「confirm」

confirm(確認)ダイアログは、例えば、Web上のマップでATMを探すとき、「現在の位置情報を送信してもよろしいですか?」というメッセージとともに、OKボタンとキャンセルボタンを表示するダイアログです。複数のボタンを表示し、押下するボタンによって実行する処理を変えることができます。

前述したalertダイアログのプログラムにおいて、<script>から</script >までの部分を以下のプログラムで置き換えて保存し、ブラウザで開いてみましょう。「この入力内容でよろしいですか?」と質問され、OKボタン押下時とキャンセルボタン押下時で違うメッセージが表示されます。

<script type="text/javascript">
var answer = confirm("この入力内容でよろしいですか?");
if(answer) {
window.alert("この入力内容で登録します。");
}else{
window.alert("キャンセルボタンが押されました。");
}
</script>

おわりに

今回ご紹介したalertとconfirmは、多くのWebサイトで使われる機能です。JavaScriptには他にも便利な機能があるため、興味を持たれた方はスクールで学んでみることをおすすめします。
インターネット・アカデミーでは、JavaScriptを基礎から応用まで実践的に学べる講座をご用意しています。ご興味のある方はぜひ無料体験レッスンにお越しください。

関連講座

JavaScript講座 プログラマー入門コース

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム