[js] jqueryでalertを出す方法

ブラウザの上からアラートを出す方法についてご紹介したいと思います。ブラウザの上からアラートを出すためには、javasciptを使用します。

今回は、ボタンをクリックしたらアラートがでるようなサンプルを使っていきたいと思います。

HTMLとCSSでボタンを作ろう

まずは、クリックイベントを起こすためのボタンを、HTMLとCSSで作ってみようと思います。HTMLで文字をクリックしてアラートを起こしてもいいのですが、ちょっと味気ないですよね。実際はボタンなどを使った物が多いかと思います。アラートを使うことで、警告以外にも、ちょっとした説明をテロップで出したりと幅広く利用できるかと思います。

<style>
 .click_alert{
   padding-left:1em;
   padding-right:1em;
   padding-top:0.5em;
   padding-bottom:0.5em;
   color:#fff;
   background:#000;
   border:1px solid #ccc;
   display:inline-block;
 }
</style>
<div class="click_alert">Click Here</div>

サンプルで作ったボタンの実装例

上記のようにボタンが出来上がりましたので、次はこちらのボタンをクリックできるようにしてアラートを出して見ましょう。

クリックイベントを起こしてアラートを出してみよう

上記で作ったボタンにクリックイベントを発生させてアラートを出してみようと思います。クリックしたかと判別するには、onを使用します。非常に便利ですので、覚えていってください。またアラートを出すのはそのままalertと記述するだけです。ではサンプルを作っていこうと思います。

<script>
 $(function(){
   $('.click_alert').on('click',function(){
     alert("ボタンがクリックされました");
   });
 });
</script>

クイックするとアラートがでるサンプル実装例

※クリックするとアラートが出ます。

上記のように、クリックするとアラートが発生させることができました。
click_alertをクリックしたら、次の関数を実行してください。その関数はalertですという風に記述しております。非常にシンプルですね。

まとめ

今回は、ボタンをクリックするとブラウザにアラートを出す方法をご紹介させていただきました。ちょっとした説明を入れたり、今回はクリックでしたら文字を入力欄に入力してる時にinputエリアを監視して、アラートを出したり幅広く使うことができるかと思います。