JavaScript ノート

1 ブラウザへの出力

JavaScriptは<head>領域に<meta>タグを追加記述して<script>タグの範囲内に文を記述する。

  ......
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  </head>
  <body>
   HTMLの記述
  .....
  <script type="text/javascript">
   JavaScriptの記述
  .....
  </script>
   HTMLの記述
  .....
  </body>

以下の文でブラウザへの出力ができる。文の最後には;(セミコロン)を記述する。

  document.write(...);

文字列の出力は”(ダブルクォーテーション)で囲む。変数を用いて文字列や数値も出力させることができる。 変数の宣言はvarを用いる。Javaのように型は厳格ではなく、文字列と数値の区別を意識しなくても演算を行うことができる。 数値演算は加減乗除と剰余があり、記載方法はJavaと同じである。また、+が加算および文字列の連結を意味することもJavaと同じである。 HTML文書として出力するのであれば"<p>" + ... + "</p>"のように出力文の前後にタグを入れるべきである。 また、文が1文でも<br>タグを入れることで出力を数行にすることもできる。

2 Mathオブジェクト、Stringオブジェクト、Dateオブジェクト

Javaと同様に数学関係、文字列関係、日付関係のメソッドが使える。代表的なものを以下に示す。

数学関係 文字列関係 日付関係

3 制御文と配列

for文、while文、do while文、if文、if else文、switch文など制御文はJavaと全く同じである。 拡張for文はJavaの:(コロン)をinに変えれば同じ働きをする。配列の宣言はJavaと異なり、配列名aは以下のように記述する。

  var a = new Array(..., ...,  ...);

4 イベント

要素にイベントが発生したときに一連の処理を起動させることができる。 イベントリスナーは以下の種類が代表的であり、登録したい要素のタグにイベントリスナーを属性として書き加える。 処理が短ければ...の部分に直接処理を記述してもよいが、一般的には...に関数名を指定する。

関数の定義は<head>タグ内に<script>タグとともに以下のように記述する。

  <head>
  ......
  <script type="text/javascript">
    function 関数名() {
      ......
    }
  </script>
  </head>

5 ダイアログ

JavaScriptの実行文としてダイアログを出力させることができる。以下の3種類がある。

警告ダイアログ alert("千葉県\n松戸市\n小金59");
HTML文書のレイアウトを変えることなくメッセージを出力させることができるので警告にこだわらず、様々なメッセージ出力に利用できる。

警告ダイアログ

確認ダイアログ var reply = confirm("お昼御飯は食べましたか?");
OKとキャンセル(NOの意味)の選択ができるダイアログである。OKをクリックすれば変数replyにtrueが、 キャンセルをクリックすればreplyにfalseが設定される。

確認ダイアログ

入力ダイアログ var msg = prompt("ここはどこですか?", "");
promptの第1引数がプロンプトメッセージであり、第2引数が入力デフォルト値となる。 入力したメッセージは変数msgに設定される。

入力ダイアログ

6 フォーム

ブラウザからデータを入力するための項目が以下のようにいろいろ用意されている。

テキストボックス

ラジオボタン

チェックボックス 読書音楽映画

セレクトボックス

テキストエリア

ボタン

上に示した入力項目をHTMLで記述するには以下のようにする。

  <form action="#">
  ......
  <input type="text" size="10">
  ......
  <input type="radio" name="rb" value="男" checked="checked">男
  <input type="radio" name="rb" value="女">女
  ......
  <input type="checkbox" value="1">読書
  <input type="checkbox" value="2">音楽
  <input type="checkbox" value="3">映画
  ......
  <select>
    <option>東京都</option>
    <option>埼玉県</option>
    <option>千葉県</option>
  </select>
  ......
  <textarea rows="5" cols="20"></textarea>
  ......
  <input type="button" value="クリック" onclick="f()">
  ......
  </form>

入力したデータがボタンをクリックすることによってJavaScriptで処理される。これら入力項目のタグとボタンを表すタグを<form>タグで囲む。 <form>タグはaction属性が必須であり、一般には処理するプログラムファイルのディレクトリを指定するが、プログラムを同じHTMLファイルに記述する場合は 何か適当な文字を指定しておけばよい。action="#"と記述することが多い。この場合は、ボタンをクリックすると関数f()が実行される。

7 要素の特定とそのプロパティ

フォームから送られてきたデータをJavaScriptで処理するには、まずどの要素から送られてきたデータなのかを特定しなければならない。 このためにフォームの入力項目のタグに以下のようにid属性を設定し、ファイル内で重複しないようにid名を付ける。

  <input type="text" id="txt1" size="10">

このテキストボックスから送られてきたデータはJavaScriptでは以下の文で取得できる。

  document.getElementById("txt1").value;

この文書(document)のid名がtxt1の要素を取得(getElementById("txt1"))するという意味であり、.で続けたプロパティの値を得ることができる。 このようにして取得したデータをJavaScript内でいろいろ処理することができる。 処理結果の出力はダイアログあるいはテキストボックスなどが利用される。以下の文を実行すればid名txt2のテキストボックスにJavaScriptと表示される。

  HTML部分 <input type="text" id="txt2" size="10">
  JavaScript部分 document.getElementById("txt2").value = "JavaScript";

利用するプロパティはvalueプロパティが多いが、この他にラジオボタンやチェックボックスに対するcheckedプロパティ、 セレクトボックスに対するselectedIndexプロパティなどがある。

8 スタイルの制御と要素の入替え

文書のスタイルをJavaScriptによって制御することができる。また、すでに存在するタグを別のタグに入替えることができる。 タグの特定はdocument.getElementById("...")で行う。
文書全体の背景色変更 document.bgColor
文書全体の文字色変更 document.fgColor
カーソルの形状変更 style.cursor
フォントの大きさ変更  style.fontSize
文字色変更 style.color
背景色変更 style.background
別のタグと入替え innerHTML

9 タイマー

設定した時間後にイベントが発生するタイマーと設定した時間間隔でイベントを繰り返すタイマーが利用できる。
ある時間(ミリ秒)後のイベント設定 setTimeout("イベント", 設定時間(ミリ秒));
ある時間(ミリ秒)間隔のイベント繰返し setInterval("イベント", 設定時間(ミリ秒));

10 イベントリスナーの登録

タグにイベントリスナーを直接書き込まずにJavaScriptからイベントリスナーを登録できる。 HTML文書の読み込みが完了したときにイベントリスナーの登録を実行させるため、以下のように登録のスクリプトはwindowのonloadイベントとして実行させる。 id名btnのボタンにonclickイベントリスナーが登録され、イベントは警告ダイアログの出力である。 ここで、function() {...}は関数名を持たない関数で無名関数または匿名関数と呼んでいる。

  window.onload = function() {
    document.getElementById("btn").onclick = function() {
      ......;
      ......;
      ......;
    }
  }