JavaScriptでポップアップウィンドウを表示させる方法【初心者向け】

プログラミング初心者向けに、JavaScriptで「ポップアップウィンドウを表示する方法」を解説した記事です。今回は、設置したボタンをクリックするとアラートとして表示させる方法について解説しています。

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

初心者でも簡単に使えるJavaScriptのコードを紹介する記事です。ポップアップウィンドウは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。

JavaScriptでボタンを設置したあとで、ポップアップを表示される方法を解説します。メッセージを表示することもできます。

 

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

 

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

 

大石ゆかり

田島メンター!警告みたいな感じで、小さいウィンドウが表示されるサイトって、たまにありますよね?あれってどうやってるんですか?

田島悠介

JavaScriptのアラートって関数で出来るよ!

大石ゆかり

あれってJavaScriptだったんですね。

田島悠介

簡単に書いて実行できるんだよ。では、さっそく書き方を見てみよう!

 

ポップアップウィンドウの表示方法

まずはボタンを表示させます。

<img src="images/ducks.jpg" alt="あひる">
<p>あひる5個セット</p>
<p>800円</p>
<input type="submit" value="購入する" >

ボタン設置

こここから「購入する」ボタンをクリックすしたらポップアップウィンドウが表示されるようにします。

 

ポップアップウィンドウを表示させるには、

<input type="submit" value="購入する" onClick="alert('購入しました!');">

と入れるだけです。

ここで入力した「購入しました!」という文言がアラートとしてポップアップウィンドウで表示されますので、文字を変えてもOKです。

 

適用するとこうなります。

<img src="images/ducks.jpg" alt="あひる">
<p>あひる5個セット</p>
<p>800円</p>
<input type="submit" value="購入する" onClick="alert('購入しました!');">

アラート

ボタンをクリックすると、このように表示されるようになりました。

 

今回はただクリックすると表示されるだけですので、もう少し応用した内容にもチャレンジしてみてください。

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

 

大石ゆかり

タグの中にonClickって要素があって、その中にalertって関数がありますね。

田島悠介

タグの中にJavaScriptのイベントを書いたり出来るんだよね。

大石ゆかり

イベントって何でしょうか?

田島悠介

何かが起こった時に実行される関数なんだ。今回はクリックするとalert関数が実行されるんだ。クリックイベントじゃなくても、普通にalert関数を書いても実行されるよ。

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

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