JavaScriptでalertを使ってアラートを表示させる方法【初心者向け】

JavaScriptで【alert】を使ってアラートを表示させる方法をプログラミング初心者向けに解説した記事です。普段Webサービスを使う中で、入力などの確認をする場合によく目にするアラートはJavaScriptで実装できます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptでalertを使ってアラートを表示させる方法について解説します。

また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

アラートとは

Webサイトでユーザー情報を登録している時など、次のようなポップアップが表示されることがあるかと思います。

エラー

このように、Webサイト側からメッセージが表示される機能をアラートといいます。

 

Webページを作る上では使用頻度の高い機能なので、confirmpromptなどと合わせ是非覚えましょう。

 

大石ゆかり

田島メンター!Webページでたまに小さな警告のようなウィンドウが表示されることがあるんですが、ああいうのってJavaScriptなんですか?

田島悠介

JavaScriptだね。関数で簡単に表示できるよ。

大石ゆかり

そうなんですか。少し気になってたんですよね。

田島悠介

では、さっそくアラートを表示させる関数を見てみよう!

 

alertを使ってアラートを表示させる

JavaScriptでアラートを表示させるときは、単純に、次のようなプログラムを書きます。

alert(‘表示させたい文字列、値’);

 

では、ためしに「JavaScriptのアラート」という文字列を表示させてみましょう。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      alert('JavaScriptのアラート');
    </script>
  </body>
</html>

 

ファイルをブラウザで読み込むと、ブラウザ上には何も表示されませんが、PC画面上には次のようなポップアップが出てきます。

JavaScriptのアラート

「OK」ボタンをクリックして閉じてください。

 

JavaScriptでalertを使ってアラートを表示させる方法は以上です。

JavaScriptのwindow.openメソッドの使い方も説明しているので、合わせてご覧ください。

 

大石ゆかり

このアラート表示って迷惑なWebページとかでたくさん出てきたりしません?

田島悠介

多いね。JavaScriptではマウスの操作もできるので消せないようにすることも可能なんだ。Webページに来てくれた人に迷惑になるので、注意したいね。

大石ゆかり

その通りですね!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。