地面からのJS:基礎

25844 ワード
javascript テキストリンク

既存ドキュメントへのJSの追加


ちょうどHTMLと多分CSSさえ学んだと想像してください.あなたはこの甘い静的文書を得ました、しかし、あなたはそれに若干のふるまいを加えたいです.それはJSが来るところです.
次のクロックを作成しましょう
<!doctype html>
<html lang=en>
<title>clock example</title>
<meta charset=utf-8>
<style>
:root {
  font-size: 10vw;
  font-family: Verdana, Arial, sans-serif;
}
.clock {
  font-weight: bold;
  color: #ddd;
  display: inline;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.5rem;
  white-space: nowrap;
  background: #333;
  padding: 0.25rem;
}
</style>
<span class="clock">
  <span class="hours">19</span>:<span class="minutes">27</span>:<span class="seconds">33</span>
</span>
これは以下のようになります.

あまりにも卑しい!
ので、このことは1日1回だけになります.
若干のJSでダイナミックにしましょう.
これは短くて簡単なデモで、スクリプト自体をページ自体に追加します.
より複雑なもののために、それ自身のファイルでスクリプトを置くほうがよいです.
私は非常に簡素化(まだ有効な)HTMLを使用して以来、我々は<script> ドキュメントの末尾にタグを付けます.
インサイド<script> タグ、現在の時刻が必要です.
現在の時刻を取得するには、JavaScriptのDate オブジェクト.
const time = new Date()

時間の取得


偉大な、今私たちは現在の時間があります.
時間、分、秒が必要です.
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()
より多くのDate オブジェクトチェックdoc page for JS's Date object
今、我々は我々が我々の時計を更新するために必要とするすべてを持ちます.
我々<script> ドキュメントの最後のタグは次のようになります.
const time = new Date()
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()

HTML要素の更新


今、我々は時計のHTMLを更新することができます.
そのためには、更新するHTML要素を取得する必要があります.
これはdocument.querySelector , 以下のように:
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')
これらのクラスがこのドキュメントでユニークであるので、我々はクラス(ドット)セレクタで要素を取り出すためにそれらを使用できます.変数hoursElement , minutesElement , and secondsElement 今すぐ私たちのHTMLの3つの要素を参照するので、スクリプトからそれらを更新することができます.
詳細についてはdocument.querySelector 参照doc page for document.querySelector
それで、現在、我々は時計の値とページの時計要素を持ちます.
スクリプトは次のようになります.
const time = new Date()
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

HTML要素の更新


現在、現在の時刻に要素値を設定できます.この設定は、innerText を返します.Date このようにオブジェクトインスタンスは以下のようになります:
hoursElement.innerText = hours
minutesElement.innerText = minutes
seconds Element.innerText = seconds
完全なスクリプトは次のようになります.
const time = new Date()
const hours = time.getHours()
const minutes = time.getMinutes()
const seconds = time.getSeconds()
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

hoursElement.innerText = hours
minutesElement.innerText = minutes
secondsElement.innerText = seconds
これを実行すると、クロックが19 : 27 : 33を表示していないことに気づくかもしれません.私たちの時計が更新されている!

時刻の更新


これは一度だけ起こることに気づくかもしれません.これは、一度だけクロックを更新するコードを書いたので、これは完璧な意味になります.我々はそれを更新し続ける場合は、我々はそれを更新する必要があります毎秒、私たちの時計の最小時間単位.
同じようなコードを複数回実行するには、最善の関数を作成します.
ご存知でしょう、
function() {
  // do stuff
}
今、我々はすべてのコードを機能にジャムすることができました、しかし、我々は同じ要素を更新するだけであるだけです.したがって、以下のようにして関数の外部から要素を探すことができます.
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = hours
  minutesElement.innerText = minutes
  secondsElement.innerText = seconds
}
JSの関数コンテキストでは関数の右側にアクセスできますので、関数の右側の変数にアクセスできますので、一度だけ要素を調べる必要があります.
関数を持っているので、こうする必要があります.
updateClock()
関数についての詳細はdoc page for Function
スクリプト全体は、次のようになります.
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = hours
  minutesElement.innerText = minutes
  secondsElement.innerText = seconds
}

updateClock()
あなたがこれを走らせるならば、時計は更新しなければなりません、しかし、まだ一度だけ.
我々は、この関数を毎秒楽しみにする必要があります.私たちはJSの組み込みを使用することができますsetInterval 機能
const timeout = setInterval(updateClock, 1000)
これはupdateClock 毎秒毎秒( 1000ミリ秒)を行う.不定期は非常に長い時間ですので、我々はsetInterval 関数は、タイムアウトを停止したい場合に参照として使用します.
私たちの全体のスクリプトは、現在このように見えて、我々が望む方法を機能させなければなりません:
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = hours
  minutesElement.innerText = minutes
  secondsElement.innerText = seconds
}

const timeout = setInterval(updateClock, 1000)

ゼロ：パッド番号


今、私たちが働く時計を持っているとき、あなたは私が私たちの時計を変形させている10の下のどんな数に関してでも、いらいらするかもしれません.彼らは数字であり、それらがprefixされていないので、それは意味をなします.私たちはzeropad 機能
function zeropad(number) {
  return number < 10 ? `0${number}` : number
}
この関数は10を下回ったらチェックします.もしあれば、0と数の文字列を返します.そうでない場合は、元の数値を返します.
この関数をスクリプトに追加するだけで、数字の上でのintextの設定を呼び出します.その全体は以下のようになります.
const hoursElement = document.querySelector('.hours')
const minutesElement = document.querySelector('.minutes')
const secondsElement = document.querySelector('.seconds')

function updateClock() {
  const time = new Date()
  const hours = time.getHours()
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

  hoursElement.innerText = zeropad(hours)
  minutesElement.innerText = zeropad(minutes)
  secondsElement.innerText = zeropad(seconds)
}

function zeropad(number) {
  return number < 10 ? `0${number}` : number
}

const timeout = setInterval(updateClock, 1000)
私たちの時計が正しく更新されているときに数字が10以下に落ちるジャンプしないでください.
既存のHTMLドキュメントにJSコードを追加し、JSコードからドキュメントを操作し、関数を記述し、機能を繰り返します.
滞在するか、または発生しない可能性があります死時計の更新をお楽しみください.
JavaScriptコードに基づいて各ブラウザのトップページとコレクションへの互換性を実現
JavaScriptでネストしたオブジェクト/配列を平坦化する