狼読

 

[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>

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

Click Here

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

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

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

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

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

Click Here

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

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/03/12

[css]背景色を真ん中のところできっちり2色にして背景をツートンカラーにしてみよう

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読