JavaScriptでポップアップウィンドウを表示させる方法【初心者向け】
プログラミング初心者向けに、JavaScriptで「ポップアップウィンドウを表示する方法」を解説した記事です。今回は、設置したボタンをクリックするとアラートとして表示させる方法について解説しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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講座)を開催しています。プログラミングの初心者でも受講可能です。

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)