あーりーです。
JavaScriptで遊んでいます。
今回のテーマは「ボタン」です。
「ボタン」をポチッと押すと、何かが起こる…
っていうことがJavaScriptでできれば、いろいろ楽しそうですよね。
というわけで、
今回は「ボタン」を使って、何かカンタンなことをやってみようと思います。
onclick
ボタンはonclickを使って実現します。
さて。
ボタンを使って何をするかですが…
一番カンタンなのは、アラートの表示でしょうか。
おみくじ
たとえば、よくある例だと思いますが…
「おみくじ」というボタンをクリックすると、アラートで「大吉」と表示されるようにしてみます。
ボタンの作り方 その１
ボタンはこんなふうに作ります。
じゃーん。
<html>
<head>
</head>
<body>
<button onclick="alert('大吉');">おみくじ</button>
</body>
</html>
※携帯電話端末で見ると、文字が画面からはみ出しているかも知れません。指をあててスライドすると、端まで見えると思います。
実行するとどうなる？
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
画面に「おみくじ」というボタンが表示されます。
そのボタンをクリックすると、アラートで「大吉」と表示されます。
ボタンの作り方 その２
あと…
こういうやり方もあります。
<html>
<head>
</head>
<body>
<input type="button" value="おみくじ" onClick="alert('大吉');">
</body>
</html>
※こちらも、携帯電話端末で見て文字が画面からはみ出しているときは、指をあててスライドしてみてください。端まで見えると思います。
実行するとどうなる？
さっきと同じです。
画面に「おみくじ」というボタンが表示されて、それをクリックすると、アラートで「大吉」と表示されます。
宝箱
おみくじ。
うまくいきましたね。
今度は、ボタンを使って宝箱を作ってみます。
宝箱の中身
突然ですが…
あなたはファンタジーの世界の「勇者」です。
目の前に2つの宝箱があります。
どちらかには金貨が、どちらかにはモンスターが入っています。
あなたはどちらを開けますか？
金貨をゲットするか モンスターが飛び出すか
これをボタンでやってみたいと思います。
ふたつの「宝箱」ボタンをつくります。
どちらかのボタンをクリックするとアラートで「金貨」と表示され、べつの方をクリックすると「モンスター」と表示される、というものです。
2つのボタンを表示
それがこちらです。
<html>
<head>
</head>
<body>
<button onclick="alert('金貨');">宝箱</button>
<input type="button" value="宝箱" onClick="alert('モンスター');">
</body>
</html>
※携帯電話端末で見ると、文字が画面からはみ出しているかも知れません。指をあててスライドすると、端まで見えると思います。
せっかくなので、ボタンの表示のしかた2種類を、それぞれ使ってみました。
もちろん、ボタンの表示のしかたは、どちらかに統一してもOKです。
実行するとどうなる？
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
「宝箱」ボタンが2つ表示されます。
左のボタンをクリックすると、アラートで「金貨」と表示されます。
金貨ゲットです！
右のボタンをクリックすると、アラートで「モンスター」と表示されます。
モンスターが飛び出してきました！
以上が、onclickでボタンを作る方法です。
今回はこれでおしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
