まずは始めてみよう

• 準備するもの
• 「Hello world!!」と書いてみよう
• 時刻を表示してみよう
• 動く時計を表示してみよう

準備するもの

JavaScript を始めるのに特別なソフトは必要ありません。通常の HTML ファイルと同様、テキストエディタとブラウザがあれば、JavaScript を体感することができます。

「Hello world!!」と書いてみよう

alert(...) は、メッセージをダイアログとして表示します。

<script>
alert("Hello world!!");
</script>

下記の例では、innerHTML を用いて、id="t1" で指定した箇所にメッセージを表示します。

<div id="t1"></div>
<script>
document.getElementById("t1").innerHTML = "Hello world!!";
</script>

下記の例では、デバッグ用の JavaScript コンソールにメッセージを表示します。デバッグ用コンソールは、Windows の場合は [F12] キー、Mac の場合は [Command]+[Option]+i キーを押して、[Console] または [コンソール] タブを開いてください。

<script>
console.log("Hello world!!");
</script>

時刻を表示してみよう

「Hello World!!」だけであれば、JavaScript を使わなくても HTML で書いたほうが楽ですが、次の例では、現在の時刻を表示します。時刻という、表示の度に変化する情報が表示されます。

<div id="d1"></div>
<script>
document.getElementById("d1").innerHTML = new Date().toLocaleString();
</script>

動く時計を表示してみよう

時刻を表示しただけではまだ物足りないですね。一度表示したら、更新するまで表示が変わりません。下記のようににすると、1秒おきに勝手に変化させることができます。

<div id="d2">&nbsp;</div>
<script>
setInterval(function() {
  document.getElementById("d2").innerHTML = new Date().toLocaleString();
}, 1000);
</script>

---

---