サンプルで学ぶJavaScript入門

JavaScript を始めるのに特別なソフトは必要ありません。通常の HTML ファイルと同様、準備するものはたったの3つです。「パソコン」、「テキストエディタ」、「ブラウザ」。本書では、断らない限り Windows 版を基本に紹介していきます。Macintosh の場合は若干サポート状況が異なる場合がありますのでご了承ください。

■ 「Hello World!!」と書いてみよう

テキストエディタで、下記の HTML ソースを入力して、保存して、ブラウザで表示してみましょう。

<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!!");
// -->
</script>
</body>
</html>

ブラウザの画面に「Hello World!!」と表示されましたね。パチパチ。やりました。これであなたも立派な JavaScript プログラマーです。

■ 時刻を表示してみよう

「Hello World!!」だけだったら、JavaScript を使わなくても HTML で書いたほうが楽ですね。では、こんなのはどうでしょう。そのページを開いた時の時刻を表示します。

<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
dd = new Date();
document.write(dd.toLocaleString());
// -->
</script>
</body>
</html>

ページを更新する度に時刻が変わります。更新は、Internet Explorer の場合、[表示]-[最新の情報に更新] を実行するか、ツールバーの [更新] ボタンを押すか、ファンクションキーの [F5] キーを押してください。

時刻という、表示の度に変化する情報が表示されます。これが、HTML にはできない JavaScript の技です。

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

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

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
<!--
function jikoku() {
    dd = new Date();
    document.F1.T1.value = dd.toLocaleString();
    window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">
<form name="F1" action="#">
<input type="text" name="T1" size=50>
</form>
</body>
</html>

ずいぶんと JavaScript プログラマーっぽくなってきました。

まずは始めてみよう

■ 準備するもの

■ 「Hello World!!」と書いてみよう

■ 時刻を表示してみよう

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