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 で書いたほうが楽ですが、次の例では、現在の時刻を表示します。時刻という、表示の度に変化する情報が表示されます。これが、HTML にはできない JavaScript の技です。
<!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() { window.setInterval(function() { var dd = new Date(); document.getElementById("T1").innerHTML = dd.toLocaleString(); }, 1000); } </script> </head> <body> <div id="T1"></div> </body> </html>