を使用して簡単なカウンタを作成する

5356 ワード
webdev beginners javascript programming テキストリンク

イントロ


私は最近、私は非常に誇りに思っているFlatiron学校で私の最初のプロジェクトを完了!お気楽に.私のプロジェクトのレビューの間、私はライブコーディングタスクを与えられました.タスクは単純だった:ボタンをクリックしたときに1に追加するDOMにカウンタを追加するには.
簡単に、右の音?特にかなり大きなプロジェクトを完了した後.さて、残念ながら、それは私にリットルのトラブルを与えた.私は、解決策の一部はかなり迅速に知っていたが、それらを一緒に置くことは挑戦を証明した.
私がこの運動にどのように行ったか少しだけ感じた後、私はそのような仕事を与えられたことがどれほど重要であるかを理解しました.タスク自体は単純だったが、目に会うよりも挑戦にもっとあった.
初めて自分の思考プロセスを大声で説明しなければならなかったのは初めてで、初めて会ったことのない人の前でコーディングをしなければならなかった.
Flatironを卒業した後、私は確かに私の思考プロセスを説明しながら、人々の前でコードをする必要があります-それはすべてのプログラミングのインタビューで発生するだろう.この仕事がどんな仕事のインタビューよりもはるかに単純だったとしても、これは本当にそれが潜在的に感じるものに私の最初の進出でした.
それは素晴らしい練習であり、練習は完璧になります.
だから、今日は、私が与えられたタスクとそれを解決する方法について話しましょう.うまくいけば、必要な時にこのポストの向こうでつまずく誰かがそこにいます!

仕事


ここでは成果物です.
  • Webページにボタンを追加する
  • ページにカウンターを加える
  • ボタンをクリックすると、カウンタに1を加えます
    • 私はハードコード番号0を行使を開始する許可されました.

    作品


    そこで、どのように我々は問題を解決するために必要な手順でこれを破ることができますか?閉じるこの動画はお気に入りから削除されています
  • HTMLでボタンを作成する必要があります
  • また、HTMLのカウンターの場所を作成する必要があります
  • イベントリスナーを追加して、JavaScriptをHTMLに書き込みます
  • カウンタをトリガーするために、JS Clickイベントを必要とします
  • クリックすると、カウンタを更新します

    • HTML


    我々のインデックスで.HTMLファイルは、上記の最初の2つの項目については、はるかに詳細です以下を行うことによって開始します.
  • 私たちのHTMLの体の中で、すべての家にdivを作成する
  • ボタンを作る
  • 数を記述するためにテキストを書く
  • “counter”のIDを持つスパンを作成し、インデックス内の変数として格納することができます.jsファイル
  • 我々の出発番号0を含める
    • Note :私はここでシンプルさをカバーしていませんが、HTMLファイルでは、Boilerplate HTMLを忘れずに、JavaScriptファイルを指すようにしています.
    HTMLの手順は以下のようになります.
        <div>
      <button type="button">Click Me!</button>
      Number of Clicks: <span id="counter">0</span>
    </div>

    JavaScript


    次にJavaScript部分を追加する必要があります.これは上記の「作品」のステップ2 - 6から成ります.より詳細には、これは私たちがすることです.
  • HTMLボタンの変数を作成する
  • HTMLカウンタの変数を作成する
  • ボタンをクリックしたときに追跡できるイベントリスナーを追加し、コールバック関数を使用します.
  • 既存の数に1を加えます
    • まず、JavaScriptのHTMLからボタンを参照する必要があります.使用するquerySelector ボタンを“type”属性で検索します.それから、私のボタン変数にイベントリスナーを追加しました.const button = document.querySelector("button")次に、カウンタをクリックしたときにインクリメントできます.代わりにquerySelector , この変数を使用して保存しましょうgetElementById :const counter = document.getElementById("counter")次に、そのボタンにイベントリスナーを追加しました.button.addEventListener("click", () => clickHandler())ボタンをクリックすると、コールバック関数clickHandler これは、ボタンをクリックしたときにどのようなアクションを取るかをプログラムに伝えるコードを格納します.これはライブコーディング演習では、私がつまずいた部分です.私は非常に頻繁に、私は誤って物事を過剰に見つける.
    最初にしようとしたのは、カウンター内の番号を取ることだった innerHTML プロパティを1に追加します.
    function clickHandler() {
  counter.innerHTML + 1
  console.log(counter)
}
    ここでの問題は、私がインクリメントしようとしている数、0、実際に整数(数字)ではないということです.これを使って発見した typeof 演算子:console.log(typeof counter.innerHTML)
    私がHTMLに追加した0番が実際に文字列であることがわかります.したがって、1を追加しようとすると、データ型が一致しなかったので動作しませんでした.
    解決策は、それが一度に2つの問題を解決するため、よりエレガントです.それはクラシックを使用しますincrement operator (++) , と同時に、“0”の文字列を整数に変換します.新しい関数は次のようになります.
    function clickHandler() {
  counter.innerHTML++
}
    自分で試してみてください!
    我々がここにいる間、我々がちょうど少しこれをこれまで簡素化する方法を見ましょう.

    リファクタ


    この3行関数を1行の矢印関数にリファクタリングできます.const clickHandler = () => counter.innerHTML++優れた!これはまだ動作し、私たちのコードをトリムそれは何かを読むことを困難にしない.しかし、我々はさらに行くことができますか?
    もちろん、我々はそうすることができます.
    このように作成したイベントリスナーを覚えていますか?button.addEventListener("click", () => clickHandler())さて、私たちの機能を1行のコードに短くすることができたので、我々はちょうど進行して、イベントリスナー自体の中で直接機能の行動を実行することができます!すぐにこのアクションを実行するには、イベントリスナーを編集したときのようになります.button.addEventListener("click", () => counter.innerHTML++)

    最終製品


    今、我々は正常に我々のユーザーは、両方のHTMLとJavaScript(マイナス板)を含むコードの約10行でDOM上で対話することができます機能カウンタボタンを作成しました!
    最終的なコードが完全に見えるものを要約するために、下記を見てください!
    HTML本文
      <body>
    <div>
      <button type="button">Click Me!</button>
      Number of Clicks: <span id="counter">0</span>
    </div>
    <script src="./index.js"></script>
  </body>
    ジャバスクリプト
    const button = document.querySelector("button")
const counter = document.getElementById("counter")
button.addEventListener("click", () => counter.innerHTML++)
    GIFデモ

    私は、あなたがあなたのコーディング旅行においてこのポストに役立つと思いました、あなたがどんな質問かコメントをするならば、手を伸ばすのを自由に感じてください
    -トレヴァー
    ActivityとFragmentのリアルタイム通信
    利用可能なノードのリスト.VroのJSモジュール