JavaScript サイトちゃん動いてね

用語・定義

このページで用いる用語について、予めのお断わり。

JS
JavaScriptの略。ちなみに、汎用ブログラミング言語の「Java」とは、全く別物ですので、混同のなきよう。
ソースコード
プログラムで処理する内容を記述したテキストのこと。C言語やJavaなどでは、このソースコードに「コンパイル」と呼ばれる処理を加えることで、「バイナリ・コード」に変換された上で、実行される。

JavaScriptをやってみるには

JavaScriptは、クライアント・サイド(ブラウサ上)で、実行されるプログラム言語ですので、HTMLやCSS同様、テキストエディタとブラウザさえあれば、すぐに学習を始めることが出来ます。

Windowsを利用されている方は、標準で「メモ帳」がありますが、Webコンテンツを扱う際には、「文字コード」の問題が付きまといますので、「文字コード」を変更できる機能がついた、「Terapad」や「EmEditor」など、定番のフリーウェアを入手して御利用になることをお薦めします。(インストール作業については割愛します)

また、JSは、ブラウザ毎に動作が一定でないことも多いので、IEのみならず、Firefoxでのテストも出きるよう、インストールしておく方が、先々何かと役に立つこともあります。

JSの基本ルール

  1. 「<script type="text/javascript">」と「</script>」の間(スクリプト要素内)にソースコード(処理内容)を記述する。
  2. script要素は、head要素かbody要素の中に記述する。
  3. 複数箇所に分けて書いても良い。
  4. ソースコードは、HTMLファイル内ではなく、CSSのように外部ファイルに記述することも出来る。

外部ファイルを用いる場合

  1. HTMLとは別のファイルに、処理内容を記述し、「ファイル名.js」として保存する。
  2. HTML側のhead要素内に、「<script type="text/javascript" src="外部ファイル名"></script>」と記述する。
  3. 原則として、HTMLファイルと、外部jsファイルは、同じ文字コードを利用して保存する。
  4. 外部ファイルに処理を記述する場合は、scriptタグは記述せず、処理部分だけを記述すれば良い。
  5. この記述法を用いると、複数のHTMLファイルから同じJSの処理を使いまわすことが出きる。
  6. 一般に公開されている、多くのAjaxライブラリもこの記述法を用いて導入することが出来る。

JSのオブジェクト指向

オブジェクト指向とは、従来個別に扱われていた「命令」と「データ」を一つの「部品(オブジェクト)」として扱うことで、再利用性・メンテナンス性を高めた、プログラム手法です。

JSでは、比較的簡単な文法で、このオブジェクト指向プログラミングを実現しています。(一般にオブジェクト指向言語は文法が厳格で難解とされている)

オブジェクト・ツリー

JSは、基本的に「ブラウザの動作」と、ブラウザが現在読み込んでいる「Webコンテンツ」を処理の対象としていて、それらを「Window」を頂点とする階層的なツリー構造で管理しています。

オブジェクト・ツリーの概念図

Windowオブジェクトが、子オブジェクトとしてDocumentオブジェクトを持ち、更にDocumentオブジェクトは、その子オブジェクトとしてImageオブジェクトやFormオブジェクトを持っている、という状態です。

オブジェクトの階層をたどって目的のオブジェクトを指定するためには、「.(ドット)」を使って、「親.子.孫」のように連結して表現します。常に先頭となる「window」は省略可能ですので、例えば「window.document.images」とする場合は、「document.images」と省略してよいことになっています。

このとき、オブジェクト名は[Document」や「Image」の様に大文字であるのに、コードを記述するときには「document」や「images」のように小文字や複数形になっている点に注意してください。

これは、親オブジェクトが子オブジェクトを呼び出す際には、必ず親が持っている「プロパティ」を経由しなければならないためで、実際に記述するのは「プロパティ名が連結されたもの」だからです。

分かり易く言うと、親は、複数いる子供それぞれに対して、一対一のホットライン(これがプロパティに該当する)を持っていて、長男一朗くん(オブジェクト)には、対一朗くん専用のホットラインを使って指示や命令を出す。次郎くん(別のオブジェクト)用にも同様に専用のホットラインがある、と考えると理解しやすいかもしれません。

話を戻しますと、「Image」はオブジェクト名、「images」は「DocumentオブジェクトからImageオブジェクトにアクセスする専用のホットライン」である、プロパティ名ということになります。

DOM(Document Object Model)

JSには、上記の「オブジェクト・ツリー」以外にも、特定のオブジェクトにアクセスする方法が用意されています。それが、id属性値やname属性値などを用いた、DOMと呼ばれる手法です。

具体的には、Documentオブジェクトが持つメソッドとして、「getElementById」「getElementsByName」「getElementsByTagName」の三種類があり、最初の「〜ById」だけは、そもそも重複の無いid属性を持つ要素のはずですから、唯一のオブジェクトだけを返してきます(もし重複があった場合には先頭のものだけを返す)。後者ふたつは、同じname属性やタグ名のもの全てを要素とする「配列」を返してくるようになっています。

DOMは、XMLとの親和性も高いために、近年はこちらが好んで利用されます。特に特定のオブジェクトを指定しやすい「getElementById」は、そのスペルからも意味がわかりやすいことも手伝って、入門者向けの書籍などでもよく紹介されています。

複数のオブジェクトを扱う配列

上記の「getElementById」は、id属性から特定のオブジェクトを直接取得するものでしたが、逆に複数ある同種のオブジェクトをまとめて処理したい場合には、それらを「配列」として取得する方法が便利です。

たとえば、「document.images[0]」を用いると、HTMLドキュメント内に記述されている全てのimg要素の中の一番目、を取得できますし、「〜images[1]」とすると2番目のimg要素を取得できます。

なので、後に扱う、制御構文の循環処理などと組み合わせると、同一種類のオブジェクトを一括処理できるようになるのです。

また、配列の中には、添字(キー)を数字以外の文字列で指定する、「連想配列」というものが存在します。別名で「ハッシュ配列」などとも呼ばれますが、JSの場合は、「name属性値をキーとした配列」で、オブジェクトを特定できます。

document.images['img_1'].width="100px";

また、name属性を直接オブジェクト名のように扱うことも出来ます。ソースコードの可読性が落ちるのが難点ですが、もっとも手軽な手法ともいえます。

[HTML]
<body>

<form name="form_1">
<textarea name="text_1"></textarea>
<input type="button" onclick="func_1()"> </form>

</body>
-------------------------------------------
[JavaScript]

function func_1(){
  document.form_1.text_1.value = 'こちらに記入';
}

メソッドとプロパティ

JSのオブジェクトは、それぞれがメソッドとプロパティをもっています。例えば「document.write()」は、Documentオブジェクトが所有する、「write()」メソッドを呼び出していて、「Documentオブジェクト内に、()内に渡す引数を書き出してくれ」という意味の命令文です。

また、「document.images[0].width="100"」としたときは、「Documentオブジェクトの子供のImageオブジェクトを配列で取得して、その中の、最初の要素(一番目に記述されたimg要素)が持つwidth属性の値に100を代入してくれ」という意味になります。

先に「親オブジェクトが子オブジェクトを呼び出すにはドット(.)で連結する」と申しましたが、メソッドも、プロパティも、ドット(.)で繋いで呼び出すのです。少々煩わしいのですが、そのような仕様になっています。

メソッド

メソッドとは、簡単に言うと、命令文、コマンドのことです。処理の対象となるオブジェクトを指定した後に、ドット(.)で繋いで記述します。

また、メソッドには必ず「()」がつきます。ここには処理を行う際に利用される値「引数」を渡すことが出来ます。処理の性質上、引数が無い場合もあります。以下は記述例です。

<body>

<script type="text/javascript">
document.write('おはようございます。');
</script>

</body>

プロパティ

プロパティも、メソッドと同様に、まずは処理対象となるオブジェクトを指定した後に、ドット(.)で連結して呼び出します。

document.getElementById('ele_id').width="100";

とした場合、id名に「ele_id」を付けたオブジェクト(HTML要素)の「width属性」を、「100」にしろ、という意味になります。つまり、プロパティは、HTML要素に付ける「属性」に対応する値だと考えてよいと思います。HTMLでは用意されていない内容もありますが、イメージとしては同じようなものと思っていてよいでしょう。


文法編

変数

変数とは、一つの値を格納できる「入れ物」に、一つの「名前」を付けたもの、だと言えます。また、その名の通り、格納する値を次々に変更することが出来ます。

なぜそのような仕組が必要なのかは、いずれ実感することになりますが、例えば、1ずつ数字を足しながら、順次複数のものを処理する場合などを御想像頂ければ、御理解頂けるかも知れません。

変数名と値の関係

また、一般的なグログラム言語では、変数の型を宣言しなければならないのですが、JSでは、自動的に設定しますので、これについては考慮する必要はありません。ただ、キャストといって、その変数を参照できる範囲を限定するか否かで、先頭に「var」を付けるかどうかが違ってくるのですが、差し当たっては付けなくても良いでしょう。

具体的には、次のように変数名を宣言し、値を代入します。

hen_1 = 'こんにちわ';

配列

配列とは、変数が「一つの名前に一つの値」であったのに対して、「一つの名前+添字に、複数の値」という関係になります。

配列名と値の関係

一般に、配列はデータベースや、一覧表形式のデータを順次処理する場合などに多用されます。JSにおいては、既に触れたように、オブジェクトを配列で取得することで、一括処理する場合などに多用されます。

for(i=0;i>=document.images.length;i++){
  document.images[i].width="200px";
}

上記の例は、変数「i」に初期状態で「0」を代入しておき、「{」から「}」のブロック内の処理を一度行うたびに、変数iに1を足していくような循環処理です。

「()」内の「document.imagaes.length」は、「images配列の要素の最大値」という意味で、要は配列の要素が無くなるまで、ということです。

つまり全体として、images配列の要素、[0]番から[最大値]までを順次取りだして、そのwidthプロパティを200pxに設定している、となります。

配列を定義するためには、次のように記述します。

comment = new Array('おはよう', 'こんちわ', 'おやすみ');

この場合は、配列名が「comment」、配列の要素が「おはよう,こんちわ, おやすみ」という文字列になります。各要素を取り出す場合には、配列名commentに添字[0]や[1]などを添えて指定します。

なお、添字は、自動的に「0」からの連番が振られます。なので、1番めの要素を指定する添字は「0」で、2番めが「1」となります。

comment = new Array;
comment[0] = 'おはよう';
comment[1] = 'こんちわ';
comment[2] = 'おやすみ';

としても同様です。こちらの記述法の方が、構造を理解しやすいかも知れませんね。どちらの記述法を用いるとしても、配列はJSの中では、やや特殊な扱いで、必ず「new」を用いて新たに生成しなければならない決まりになっています。