初心者たぬき画面でいきなり警告のポップアップが出てくる時があるけど、あれってどうやって実装するポン？
今回は、JavaScript入門ということで、表示されているボタンを押したらアラートが出現するコードについて解説していこうと思います。
JavaScriptで実装と聞くと、特にWeb制作初心者は「作るの難しいんじゃない？…」と思うかもしれませんが、実は結構簡単に作れるので、これからjsを始める人もよかったら見ていってくださいね！
アラートとは？
アラートとは、何かのアクションをトリガーにして表示される、注意を引くためのポップアップのことです。
この記事を見ている人の中にも、上のような表示を一度は見たことがあるのではないでしょうか？
このような表示がアラートです。
今回は、このアラートを実装する方法を解説していきますよ！
アラートを表示させる方法は、alert();
アラートを表示させる方法は結構簡単で、JavaScriptの関数の中に
alert();
を入れるだけです。
例えば、ボタンを押したら「こんにちは！」と表示させるには
alert( ‘こんにちは！’ );
と入力します。
「本当に中断してよろしいですか？」と表示させるには
alert( ‘本当に中断してよろしいですか？’ );
と入力するだけです。
簡単ですね！
アラートを表示させるには、alert();
よくあるのは、今回のように「『ボタンを押したら』アラートが出現する」仕様ですが
「ボタンを押したら」→「ボタンをクリックしたら」
なので、クリックイベントというものを使用します。
どのようなJavaScriptの関数の中に記述をするのかは、この後解説しますが
このalert();というメソッド、実は
window.alert();
という「オブジェクト+メソッド」の形を取っています。
しかし、windowは略すことができるので、alert();だけ残っているんですね。
ボタンが押されたらアラートが表示されるようにするには、addEventListenerを使う
ボタンが押されたらアラートが表示されるようにするには
addEventListener
という関数を利用します。
もっと細かく言うと、クリックされるボタンの要素を取得してきて、その要素に対してaddEventListenerでイベントを付与します。
今回は、ボタンが押すことがトリガーとなってアラートを表示させるのでクリックイベントというものを利用しますが、addEventListenerはクリックイベントの他にも
・画面をスクロールさせたら
・画面のロードが終わったら
という感じで、いくつものトリガーを設定することができます。
では、今回の「クリックされるボタンの要素を取得してきて、その要素に対してaddEventListenerでイベントを付与する」流れを具体的に見ていきましょう。
①クリックされるボタンの要素を取得する
まずは、クリックされるボタンの要素を取得します。
ボタンの要素を取得するのは
・getElementById
・getElementsByClassName
・querySlector(All)
などがありますが、今回はidを取ってきたいので、getElementByIdを使用します。
ですが、getElementByIdのようなイベントは、オブジェクトの後ろに 「.」（ドット） を繋げて書く必要があります。
今回はHTMLの要素を取得するので、documentオブジェクトを使用します。
ということで
document.getElementById(‘button’)
とすることで、id=buttonが付与されているボタンの要素を取得できました。
②取得した要素に対し、addEventListenerでイベントを付与する
①で取得した要素に、クリックした際にアラートを表示させるというイベントを起こしたいので
document.getElementById('button').addEventListener( 'click', funtion() {
alert('こんにちは！');
});とすれば、ボタンを押した際に、「こんにちは！」と書かれたアラートが出せるというわけです。
functionは関数のことで
function () {};
という形で使うことが多いですが、アロー関数というものに書き換えることもできます。
アロー関数とは、その名の通り矢印が使われている関数のことで
() => {};
と表されます。
つまり、先ほどのコードは
document.getElementById('button').addEventListener( 'click', () => {
alert('こんにちは！');
});とも書けるということです。
別の形でアラート表示のコードを書いてみよう！
document.getElementById('button').addEventListener( 'click', funtion() {
alert('こんにちは！');
});先ほど紹介した上のコードでも、もちろんアラートは動作しますが
少し別の書き方を紹介します。
と言っても、そんなに難しくありません。
getElementById を定数に定義してからaddEventListener を使用するやり方です。
まずは、constを利用してgetElementById を定義します。
constとは、定数を定義する際に利用しますが、1回代入した値は別の値に置き換えることができない特徴があります。
今回は、アラートを表示されるトリガーがボタンを押すことなので、分かりやすくbuttonという定数を作っていきます。
const button = getElementById('button')あとは、このbuttonに対してaddEventListener を設定するだけ。
button.addEventListener( 'click', funtion() {
alert('こんにちは！');
});ということで、全てを記述すると以下のようになります。
const button = getElementById('button')
button.addEventListener( 'click', funtion() {
alert('こんにちは！');
});実際にアラートを実装してみよう！
addEventListener の使い方がわかったところで、実際に実装していきましょう。
今回は、「送信取消」というボタンを押したら「本当に中断してよろしいですか？（入力した内容はリセットされます）」というアラートを出してみたいと思います。
お問い合わせフォームなどを入力し、確認画面で送信を取り消す際のアラートを想定しています。
コードはこちら。
See the Pen アラート表示（やっぱり止める） by わい (@y_programing) on CodePen.
addEventListenerなど、今回解説した内容をそのまま使っており、テキストを変えているだけなので
実装しやすいと思います。
ちなみに、以下の2つは僕がオリジナルで考えたものですが、こんな感じのちょっとふざけた感じのも出すことができますw
絶対押すなよボタン
See the Pen アラート実装①（絶対に押すなよボタン） by わい (@y_programing) on CodePen.
邪魔するなら帰ってやボタン
See the Pen アラート実装②（邪魔するなら帰ってや〜！ボタン） by わい (@y_programing) on CodePen.
まあ、テキスト部分を変えただけなんですけどねw
あなたも、自分だけのオリジナルボタンを作ってみてください！w
ちなみに、「邪魔するなら帰ってやボタン」を作った際に母親に見せにいったら
アラート表示時の上の方に表示される「このページの内容」というのは読めたのですが
その下の、肝心の「邪魔するなら帰ってや〜！」部分が老眼でしばらく見えなかったらしく、笑いが起こるまでに時間がかかりましたw
最後に
いかがでしたでしょうか？実際にアラートボタンを表示することはできましたか？
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
わい記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれないよ！
＼ 最新情報をチェック ／
コメント