動かしてみる

まずはJavaScriptによるプログラムをどのように作成するか、 そしてそのプログラムをどのように動かすかを学習する。 JavaScriptプログラムの動作する形態はいくつか存在する。

本講の目的はWeb地図と連動して動くものを作成することであるから、 1番目のブラウザ上で動く形態での利用を想定して説明を進める。

Hello, world!

とにかく動かすための簡単な例として、「Hello, world!」を出すものを作ってみる。手順は以下のとおりである。

  1. hello.html ファイルを作成し、HTMLとJavaScriptプログラムを記述する。
  2. ブラウザで

ファイル名は何でもよいが、ここでは hello.html とした。

hello.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello!</title>
</head>
<body>
<h1>はろーわーるど</h1>
<script type="text/javascript" charset="utf-8">
<!--
// その1: HTML本文中に出力する
document.write("Hello, world!(1)");
// その2: ブラウザコンソールに出力する
console.log("Hello, world!(2)");
// その3: 警告ウィンドウに出力する
alert("Hello, world!(3)");
// -->
</script>

</body>
</html>

<script> から </script> までの部分が JavaScript 文である。

実際に hello.html を開いてみると以下のことが分かる。

以降プログラムを作成する作業の中では、 デバッグに必要な情報を見える場所に出力したくなる状況がある。 手軽なものとしては alert() が使えるが、 大量の出力に向かないため、console.log() を利用する。

js ファイルの分離

ある程度まとまった量の JavaScript プログラムになる場合は、HTML ファイルと JavaScript のソース(js)ファイルを分けて書く方が見透しやすい。 この場合 script 要素の src 属性にjsファイル名を指定する。たとえば上記 hello.html であれば script 要素を以下のようにする。

<script type="text/javascript" src="hello.js" charset="utf-8">
</script>

そして JavaScript プログラム部分を hello.js に記述する。

コンソール上の処理系

ブラウザ上ではなくコマンドラインから直接 JavaScript 文やプログラムファイルを実行できる処理系がいくつかある。 そのひとつが Rhino である。 RhinoはJava言語によるJavaScript言語の実装であり、 JavaのクラスがJavaScriptから利用できるのが特徴である。 

#!/usr/bin/env js
s = "Hello, world!";
for (var i=0; i<s.length; i++) {
  print(s.substr(0, i+1));
}

Java言語のクラスを使うには、Javaでのクラス名の前に java.lang を付加する。たとえば System.out.println() をRhinoから利用するには java.System.out.println() とするだけでよい。

端末上で実行できるものをコンソールプログラムという。 Rhinoで有用な入出力関数を示す。

→ 目次