javascript javascript ボタン

javascriptでボタンをクリックしたらアラートが表示されるコード

投稿日:2019年8月5日 更新日:

Pocket

どうも、チャーさんです。

 

あなたはjavascriptでボタンをクリックしたら、

アラートが表示される方法とコードを、

探していますか?

 

 

この記事では、ボタンクリックで、

アラートが表示される方法とコード、

それからコードと動く仕組みの解説をしてます。

 

なので、この記事を読めば、

あなたはjavascriptでボタンクリック時の、

アラートを好きに表示させれるようになるでしょう。

 

 

ということで、アラートを表示させたい場合、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

javascriptでボタンクリックのアラートを表示するコードは以下です。

 

はい、ということでまずは結論からいきます。

 

javascriptを使って、ボタンをクリックした時に、

アラートを表示させるなら、以下のコードで可能です。

 

 

コード

<body>
 <button>ここを押すとアラートが表示されます</button>

<script>
 let button = document.querySelector(‘button’);
 button.addEventListener(‘click’,function(){
  alert(‘あなた、ボタンをクリックしましたね。’);
 });
</script>

</body>

 

さてそれでは、コードを紹介したので、

これを実際にファイルに記入して、

実行したものを紹介します。

 

javascriptボタンアラート

 

はい、ちゃんとアラートが表示されてますね。

 

ちなみに上記のコードをこちらの記事にも、

埋め込んでますので、よかったら試しにクリックしてみてください。

 

画像のようなアラートがでます。

 

 

このように、javascriptで上記のような、

コードを記入すれば、ボタンをクリックした時に、

アラートを表示させることが可能です。

 

ではここからは、仕組みについて解説しておきます。

 

javascriptのボタンアラート仕組み解説

 

<script>
 let button = document.querySelector(‘button’);
 button.addEventListener(‘click’,function(){
  alert(‘あなた、ボタンをクリックしましたね。’);
 });
</script>

 

javascriptの記述は上記ですが、

これを説明します。

 

 

まずjavascriptでボタンをクリックした時に、

アラートを表示するためには、

 

addEventListener()という関数を使って、

ボタンにイベントを追加する必要があります。

 

 

addEventListenerとは?

 

で、このaddEventListenerはなんや?

 

という疑問があると思いますので、平たくいうと、

OOした時に、OOという処理を行う、

というのを設定できる関数です。

 

 

今回は、ボタンをクリックした時に、

アラートを表示させたいので、

そういった記述をしたものが以下になるわけです。

 

button.addEventListener(‘click’,function(){
  alert(‘あなた、ボタンをクリックしましたね。’);
 });

 

 

で、上記のコードのaddEventListenerの()内の、

引数に設定してある部分をみてください。

 

()の中に’click’,function()と書いてますね。

 

addEventListenerの()内に’click’とかくと、

クリックされた時に、という設定をすることができます。

 

 

で、次の引数をみてください。

function(){記述内容}

と書いてますね。

 

この2番目の引数にfunctionとかくと、

clickされた時に、functionを実行する設定できます。

 

 

なのでここのコード

button.addEventListener(‘click’,function(){
  alert(‘あなた、ボタンをクリックしましたね。’);
 });

 

では、’click’の次にfunctionと書いてるので、

clickされた時に、functionの中括弧の内容を、

実行するようにという、意味になります。

 

アラート表示できるalert()とは?

 

でfunctionの中括弧の中身である、alert()は、

ブラウザの画面の上にポップアップを開いてくれる、

関数でして、()の中に書いた文章が表示されます。

 

ということで、addEventListenerを設定してやることで、

クリックした時に、アラートが表示できます。

 

 

クリック対象を設定しましょう

 

で、こちらのaddEventListenerですが、

「どれに」たいしてつけるというのを、

決める必要があります。

 

どれにというのは、今回クリックされた時に、

とaddEventListenerを使い設定しましたが、

「どれが」クリックされた時にという意味です。

 

 

今回ボタンがクリックされたらにしたいので、

上記の「どれに」に、ボタンを指定したいわけです。

 

そこを指定してるのが、

button.addEventListener・・・・

の記述になるわけです。

 

addEventListenerの前を見ると、

buttonと書いてますね。

 

これでbuttonが指定されたわけです。

 

 

で、このbuttonは変数でして、

コードの最初に、

let button = document.querySelector(‘button’);

 

と変数を設定してます。

 

 

こちらは、HTMLで書いた、

<button>ここを押すとアラートが表示されます</button>

 

のボタンタグを取得しています。

 

なので、このhtmlで書いたbuttonタグが、

変数のbuttonに放り込まれ、

ボタンがクリックされたらという意味になるわけです。

 

 

ちなみに、取得というとわかりづらいですが、

javascriptでは要素を変数に指定する場合、

数あるHTMLの中から見つける(取得する)必要がありまして、

 

let button = document.querySelector(‘button’);

の部分で、addEventListenerで、

クリックされる対象(ボタン)を指定してるというイメージです。

 

 

今回はボタンをクリックしたら、

という設定なのでquerySelectorの()内に、

ボタンタグの’button’と書いてます。

 

ボタンを指定するためのquerySelectorとは?

 

ちなみにquerySelectorというのは、

HTMLの中から、querySelector()の()内に、

指定したタグを見つけて変数に放り込んでくれます。

 

これによって、button.addEventListenerが、

可能になったわけですね。

 

ということで解説を読むと、

難しかったかもしれないですが、

上記のような仕組みで動いてるので参考にしてみてください。

 

スポンサードサーチ

javascriptボタンクリックでアラートを表示の解説動画

 

*追記 解説動画もとったので、

あなたが動画で理解するタイプの場合は、

こちらもどうぞ。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

というわけで、javascriptで、

ボタンをクリックした時にアラートを、

表示させたければ、以下のコードで可能です。

 

 

<body>
 <button>ここを押すとアラートが表示されます</button>

<script>
 let button = document.querySelector(‘button’);
 button.addEventListener(‘click’,function(){
  alert(‘あなた、ボタンをクリックしましたね。’);
 });
</script>

</body>

 

 

また、alert(”)の中の文章をあなたの方で、

好きに変えれば、あなたが表示させたい文章を、

表示できます。

 

なので随時変えてもらえればという感じですね。

 

 

はい、ということで、

これであなたはjavascriptでボタンアラートの、

仕組みがわかったと思います。

 

なので、早速あなたの方でも実際に、

体験してみましょう。

 

 

まずは上記のコードを、

bodyタグの中身にコピペなりして、

記述してみてください。

 

そしてファイルを保存して、

ブラウザで再読み込みしてみましょう。

 

 

するとボタンをクリックすると、

アラートが表示されますよ。

 

で、上記のようなことをやると、

あなたが自分の力でjavascriptを、

操れるようになります。

 

 

するとあなたの作りたいものなどが、

作成できるようになるので、

ぜひやってみてください。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

-javascript, javascript ボタン


スポンサードサーチ

関連記事

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

getElementByIdの意味や使い方をわかりやすく紹介します。

  どうも、チャーさんです。   あなたはgetElementByIdの意味はなんだろう? と思ってませんか?   この記事では、getElementByIdの意味や、 …

no image

javascriptでランダムに画像を表示する方法「コードコピペOKです」

どうも、チャーさんです。   あなたはjavascriptでランダムに画像を、 表示させたいですか?     この記事ではjavascriptでランダムに画像を、 表示さ …

no image

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

どうも、チャーさんです。   あなたはjavascriptでランダムな整数を、 表示したいですか?   この記事では、javascriptでランダムな整数を、 表示するコードと、そ …

no image

二重ループをjavascriptでする方法

  どうも、チャーさん(@chaa___san)です。   あなたはjavascriptで二重ループを するにはどう書けばいいのか、 と思っていませんか?   この記事で …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

javascriptでボタンを押したら色が変更できる方法「コード例つき」

どうも、チャーさんです。   あなたはjavascriptで、ボタンを押したら、 色が変更できる方法を探していませんか?   この記事では、ボタンクリックで、 色を変更する方法、コ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。