JavaScript を始めるのに特別なソフトは必要ありません。通常の HTML ファイルと同様、テキストエディタとブラウザがあれば、JavaScript を体感することができます。
テキストエディタで、下記の HTML ソースを入力して、保存して、ブラウザで表示してみてください。ブラウザの画面に「Hello world!!」と表示されます。<script>～</script> の間に JavaScript のプログラムを記述します。document.write(...) は、現在のドキュメントに ... を書き込むことを意味します。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
document.write("Hello world!!");
</script>
</body>
</html>
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 で書いたほうが楽ですが、次の例では、現在の時刻を表示します。時刻という、表示の度に変化する情報が表示されます。
<!DOCTYPE html> <html> <head> <title>サンプル</title> </head> <body> <script> dd = new Date(); document.write(dd.toLocaleString()); </script> </body> </html>
時刻を表示しただけではまだ物足りないですね。一度表示したら、更新するまで表示が変わりません。下記のようなページにすると、1秒おきに勝手に変化させることができます。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
<script>
window.onload = function() {
setInterval(function() {
var dd = new Date();
document.getElementById("T1").innerHTML = dd.toLocaleString();
}, 1000);
}
</script>
</head>
<body>
<div id="T1"></div>
</body>
</html>