JavaScriptでボタンを設置させる方法【初心者向け】

プログラミング初心者向けに、JavaScriptで「ボタンを設置する方法」を解説した記事です。コードを変えるだけで簡単にボタンを設置することができるので、ぜひ試してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

初心者でも簡単に使えるJavaScriptのコードを紹介する記事です。

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

クリックできるボタンは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。

 

20160620

 

ボタンってマウスでクリックするとへこんだりする要素のことですよね?

 

20163020-2

 

そうそう。でも、ボタン特有のものがあるよね。

 

20160620

 

ボタンを押したら、プログラミングの何かの処理が動作するような感じですか?

 

20163020-2

 

その通り!ボタンってけっこう重要なんだよね。ボタンを表示させる方法を見てみよう!

 

ボタンを表示させる方法

まずはテキストで通常通りに書いていきます。

<img src=”images/ducks.jpg” alt=”あひる”>
<p>あひる5個セット</p>
<p>800円</p>
<p>購入する</p>

元データ

 

こここから「購入する」ボタンを作成していきます。

 

ボタンにするには、

<input type=”submit” value=”購入する”>

と入れるだけです。

ここで「購入する」の文字を変えれば、その文字を使ったボタンになります。

 

適用するとこうなります。

<img src=”images/ducks.jpg” alt=”あひる”>
<p>あひる5個セット</p>
<p>800円</p>
<input type=”submit” value=”購入する” >

ボタン設置

簡単にできましたね。

設置したボタンをクリックすると、ポップアップウィンドウが表示される表現を加えることもできるのであわせて試しても良いでしょう。

 

誰でも簡単にできるので、ぜひ自分でもやってみてください!

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

20160620

 

input要素のtypeをsubmitにすればいいんですね。valueの値がボタンに表示される文字列になるんですよね?

 

20163020-2

 

そうそう。その他にも、buttonタグを使う方法があるんだ。buttonタグのtypeをsubmitにすればOK。後は、buttonタグを閉じて、間にボタンに表示させたい文字列を書くんだ。

 

20160620

 

フォームのボタンを作るのにも種類があるんですねー。

 

20163020-2

 

主にプログラムを利用した時に違いが出てくるんだ。気にせず簡単に覚えておくだけで問題ないよ。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。