どうも、ひろです。
今回は、以前宇宙のホームページ制作でも作成した押しボタンをAIの力を借りて作りました。
実は、本当はJavascriptで電卓を作成しようとしたのですが、「理屈がなんとなく分かる？かな」くらいでブログに上げるには今の私の力では無理だと判断。
なので、Javascriptをはじめに使うであろう『押しボタン』をおさらいを含めてJavascriptで作成しました。
ぜひ、ご覧になってください。
押しボタンをJavascriptで作成
AIに「Javascriptで押しボタンを作りたいです」と頼み実行しました。
※1
という画像がWeb上に現れました。
ボタンを押してみると
※2
この様な画面が出てきました。
ちなみに、今回AIさんが書いてくれたコードです。
HTMLの中にJavascriptが入っています。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ボタン練習</title>
</head>
<body><button id=”myButton”>押してね</button>
<script>
// ボタンを取得
const button = document.getElementById(“myButton”);// ボタンが押された時の処理
button.addEventListener(“click”, function() {
alert(“ボタンが押されました！”);
});
</script></body>
</html>
Javascriptの役割
ここで、Javascriptのコードを説明する前にまずHTML上で
<button id=“myButton”>押してね</button>
のコードを書きます。
このコードには<button>というタグがあり、このタグを書くことによってボタンが作られます。
その後のコードには、idに“myButton”という名前があります。
私的にいうと、この名前がJavascriptのコードが入った言わばファイル名になります。
土台を作ったところで次からはJavascriptの説明に入ります。
まずは、
const button = document.getElementById(“myButton”);
HTML上に『myButton』という名前で作った「押してね」というボタンがあるので、その『myButton』を探してくださいと言う意味だそうです。
次に、
button.addEventListener(“click”, function() {alert(“ボタンが押されました！”);});
clickは押した時、function()は変数が変わる。
つまり、ボタンを押したら指定した変数に変わりますよという意味になります。
今回は、alertがfunction()の行き先になるので、ボタンを押したらalertに書かれているボタンが押されましたに変更されたということです。
結果、実行すると※1の様なボタンが現れ、※１を押すと※２のような画面が現れることになります。
今回の学び
const button = document.getElementById(“myButton”);のコードで
Javascriptが使える様になる。
button.addEventListener(“click”, function() {alert(“ボタンが押されました！”);});のコードで
ボタンを押した時の反応が変わる。
Javascriptは、HTML上で活躍できる。
※今現在の私の考えになります。
が今回、学びになりました。
button.addEventListenerの他にも色々なコードがあるので、もう少し知識がついたら勉強していきたいと思っています。
終わりに
私はこれまで「HTML、CSS」に触れることが多かったのですが、ホームページ上に動きをつけるまでいかなかったため、Javascriptに触れることがあまりありませんでした。
ですが、今回学んでみて、やっぱりJavascriptを学んでホームページに動きをつけられる様になりたいなと感じました。
ただ、始めの方にも書いた通り、初心者の登竜門である電卓を作るのに苦戦しているので、まだまだ勉強は必要だとも感じました。
次回は、HTMLとCSSのおさらいをやっていきたいきます。
え、今更と思う方もいらっしゃると思いますが、やりたいと思います。
理由は、あくまでこのブログは私が学んだことを思い出すツールなので、HTMLやCSSの基礎がどこにもないのは私的にしっくりこないからです。
また、これからWebデザインを始めたいと思う方が見ていただいた時にも、あったほうが良いと思うので。
そういう同士が増えていったら嬉しいと思うし、同士が見て学べる様なブログにもしたいと思うので頑張りたいと思います。
ご覧いただきありがとうございました。
