カウントボタンを作ってみる - 猫と遊ぶ　見習いプログラマーの備忘録

昨日、書き忘れてしまったけれど、

HTMLの次はなんだ？ということで、

今はJavaScriptを勉強しております。

前にちらっと触ったことがあったんだけれど、
その時はまだ理解が深くなかったかな。
APIキーとか埋め込んだ覚えがある。

だからきちんとやるのははじめてなのよ。
色んなこと勉強しているし、
今はサーバー構築というインフラ関係やってるから、
そろそろブログのタイトル変えようかな(笑)
よし、決めた。　変更ー！✊笑
きっとこれからここに訪れる人は気付くだろう、タイトルが変わっていることに。フフ

さあ今回は、実は昨日書く予定だった「カウントボタン」を作ってみたよ。
（あのね、I didn't have enough time to write about JS..... 急に英語wそして合ってるかわかんないw）

で、カウントボタン作ってみたら…おもしろいね！
名前のとおり、クリックする度に増えるんだもん！

その仕組みがこちら。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>カウントボタンを作ってみた</title>
</head>

<body>

  <input type="button" id="cntBtn" value="押すたびに数字がふえるよ 0" onclick="onBtn()">
  <script>
    //onclickの処理を関数化する
    var count = 0;
    var btn = document.getElementById("cntBtn");
    function onBtn() {
      count++;
      btn.value = "Let's click!" + count;
    }
  </script>

</body>

</html>

ある参考書を参考にしているのだが、
私は思った。
このソースコードに出てくる「getElementById」という長ったらしいネーミングは短くできないのかと。
そう思って、「getElementById」を「getBtnId」とかにしてみた。
そしたら、「押すたびに数字がふえるよ 0」のボタンが表示されるだけで、
クリックしてもしても何も変わらなかったのだ。
まさかのこの長ったらしい「getElementById」にちゃんと意味があったなんて…

調べてみた。
「getElementById」とは？
ヒット！
www.sejuku.net

がっつり「【JavaScript入門】」って書いてあるぅぅぅ
あ、はい。入門者です。ええ。
私はてっきり参考文献の人が勝手に作った関数かと勘違い。
まずこの時点で関数であるという説明文を読み飛ばしていたという失態が判明。
「勝手に作った関数？は？それ変数とまちがえてんじゃね？」
そういうツッコミ入りそうだわ～(；´Д｀)
はい、すいません、まだまだ見習いな者でして…

てか自分でコード内のコメントで「関数化する」って書いてあるし!!

…夏ですね。でももう立秋は迎えましたね。
夏の疲れとか言ってらんないっすね…（遠い目）

そして！
上のプログラムをさっそくブラウザに表示してみた！

こんな感じになりましたとさ。

f:id:msm20-chocolateee:20180815180602p:plain