まずは始めてみよう

[up] [prev] [next]

準備するもの

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

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

テキストエディタで、下記の HTML ソースを入力して、保存して、ブラウザで表示してみてください。ブラウザの画面に「Hello world!!」と表示されます。<script>~</script> の間に JavaScript のプログラムを記述します。document.write(...) は、現在のドキュメントに ... を書き込むことを意味します。

HTML
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
document.write("Hello world!!");
</script>
</body>
</html>

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

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

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

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

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

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

時刻を表示してみよう

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

HTML
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
dd = new Date();
document.write(dd.toLocaleString());
</script>
</body>
</html>
表示

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

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

HTML
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
<script>
window.onload = function() {
  window.setInterval(function() {
    var dd = new Date();
    document.getElementById("T1").innerHTML = dd.toLocaleString();
  }, 1000);
}
</script>
</head>
<body>
<div id="T1"></div>
</body>
</html>
表示

[up] [prev] [next]
Copyright (C) 1996-2017 杜甫々
改訂版初版:2001年5月20日、最終更新:2017年12月10日
http://www.tohoho-web.com/js/start.htm