【HTML CSS#11】HTMLとJavaScriptをつなげる基本

ブログ

こんにちは！Ryuseiです。
今回は、HTMLとJavaScriptの基本的なつなげ方、動かし方について学んだことをまとめていきます！
HTMLで作った要素にJavaScriptで動きをつけられるようになると、サイト作りが一気に楽しくなるので、しっかりと覚えていきたいと思います

目次
  1. HTMLの要素をJavaScriptで操作する方法
  2. 表示内容を変えるには .textContent を使う！
  3. 現在時刻を取得する方法
  4. 一定時間ごとに繰り返す処理
  5. 数字を「0埋め」で見た目を整える
  6. ボタンと処理をつなげる（イベント処理）
  7. 見た目はCSSで整える
  8. 学んだこと＆感想
  9. 困ったときの検索ワード例

HTMLの要素をJavaScriptで操作する方法

まず、HTMLで作った要素をJavaScriptから操作するには、document.getElementById("id名") を使います
たとえば、タイマーの部分を取得したい場合はこんな感じです。

document.getElementById("timer")

これでHTMLの<div id="timer">とかの部分を取れるようになります

表示内容を変えるには .textContent を使う！

HTMLの中身を書き換えるには .textContent が便利です！
たとえば、timer の中の文字を「Hello!」に変えたいときは、

timer.textContent = "Hello!"

と書くだけでOK！
これで、JavaScriptからHTMLの表示を自由に変えられます✨

現在時刻を取得する方法

「今の時間」を取得したいときは、new Date() を使います！
さらに .getHours()、.getMinutes()、.getSeconds() を組み合わせると、時・分・秒をそれぞれ取れます。

一定時間ごとに繰り返す処理

1秒ごとにカウントアップしたりするには、setInterval(関数, ミリ秒) を使います！
たとえば、1秒ごとなら

setInterval(func, 1000)

これで、指定した関数が1秒ごとに実行されるようになります！

数字を「0埋め」で見た目を整える

時計表示で「1分3秒」より「01:03」としたいときは、次のような「0埋め」関数を作ると便利！

function zeroFill(num) {
  return ('0' + num).slice(-2);
}

これで zeroFill(3) とすると "03" になります！
表示をきれいに整えるときに大活躍です✨

ボタンと処理をつなげる（イベント処理）

ボタンをクリックしたときに関数を動かすには、addEventListener を使います！
たとえば「スタートボタン」を押したら start 関数を動かす場合は

document.getElementById("start").addEventListener("click", start);

これでボタンがクリックされたときに start 関数が動くようになります！

⚠️注意点として、スタートボタンを何回も押すと処理が重複してしまう場合があるので、
「すでに動いているなら何もしない」チェックも大事です！

if (intervalId !== null) return;

見た目はCSSで整える

タイマーの「中身」はJavaScriptで作るけど、見た目のデザインはCSSで整えます！
CSSは <head> 内に以下のように書いて読み込みます

<link rel="stylesheet" href="style.css">

学んだこと＆感想


動かして ➔ 動かない ➔ 直す、の繰り返しが成長のカギだなと思いました。
完璧じゃなくても、少しずつ「自分で動かせた！」が大事だと思ったのでこれからも地道に勉強と制作を続けていきたいと思います。

困ったときの検索ワード例

やりたいこと検索ワード例
0埋めしたいJavaScript 0埋め
一定時間ごとに処理したいJavaScript setInterval 使い方
ボタンを押したときに関数を動かしたいJavaScript ボタン クリック イベント

次回は、学んだことを使って、もっと色々な動きをページに加えていきます。

これから自分で書いたコードやサイトの様子も載せていくので楽しみにしていてください。
また進捗を書いていきます！