JavaScriptによるクライアントサイドプログラミング

CとJavaScriptの違い


JavaScriptの実行の仕方

 Web ページを制御する JavaScript のコードは HTML コードの中に埋め込みます.その HTML コードをファイル(拡張子は .html か .htm)に記述し,それを web ブラウザで開くことで,JavaScript のコードを実行することができます.

 次に示すのは,HTML コードへ JavaScript へ埋め込む一方法です.HTML コードがすべて読み込まれると,関数 main が実行されるので,最初に実行したいコードを関数 main に書きます.その他に関数を定義したい場合は<!--と-->の間に書きます.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function main()
{
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="main()">
</BODY>
</HTML>

 JavaScript はオブジェクト指向言語です.しかし,基本的にはオブジェクト指向であることを意識しなくてもプログラムが書けます.意識しない状態では C 言語に非常に近くなります.たとえば,次のコードは,複数人の点数を入力させ,合計点と平均点を表示するプログラムです.C 言語を知っていれば,ほとんど理解できるはずです.ここでは,C 言語と JavaScript との違いで特徴的な部分を説明します.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function getsum( pt, n )
{
  var i, sum=0;
  for( i = 0 ; i < n ; i++ ) sum += pt[i];
  return sum;
}
function getave( pt, n )
{
  var i;
  if( n > 0 ) return getsum( pt, n ) / n;
}
function main()
{
  var i, num, point;

  num = parseInt( prompt( '人数を入力してください', '' ) );
  if( num > 0 )
  {
    point = new Array( num );
    for( i = 0 ; i < num ; i++ )
    {
      point[i] = parseInt( prompt( (i+1)+'人目の点数を入力してください', '0' ) );
    }

    document.write( num, '人の点数の合計は', getsum( point, num ), '点です<BR>' );
    document.write( num, '人の点数の平均点は', getave( point, num ), '点です<BR>' );
  }
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="main()">
</BODY>
</HTML>

変数

 変数を使うときには,C と同じように宣言を行います.一度に複数の宣言もできますし,初期化も同時に行えます.

var a;
var b,c;
var d = 0;

ただし,JavaScript には見かけ上の概念が存在しません.そのため,同じ変数に数値を入れることも文字列を入れることもできます.(見かけ上と書いたのは,変数にしまわれるのはオブジェクトであり,プログラマはオブジェクトの種類を気にしなくてもコードを書くことができます)

var a;
a = 10;
a = '文字列';

 文字列を数値に変換するときには parseInt や parseFloat を使います.また,文字列が要求されるところに数値を書くと,自動的に文字列に変換されます.

a = parseInt( '10' );     // a には数値10が入ります.
b = parseFloat( '10.1' ); // b には数値10.1が入ります.
c = 10 + '10';            // c には文字列'1010'が入ります.

文字列

 JavaScript では文字列はオブジェクトを利用して実装されているので,配列で扱う必要ありません.既に変数のところで例を示していますが,変数に直接文字列を代入することができます.正確に言うと,String オブジェクトを変数に代入しており,次の二つの文はまったく同じ意味です.

var a = '文字列';
var a = new String( '文字列' );

 また,JavaScript で文字列リテラルを書くときには,ダブルクォーテーションだけでなく,シングルクォーテーションで囲むことも認められています.

var a = 'シングルクォーテーションで囲むときは"を入れられる';
var a = "ダブルクォーテーションで囲むときは'を入れられる";

 文字列の文字数を知りたいときや,指定した部分を抜き出したい場合は String オブジェクトのプロパティやメソッドを利用します.プロパティとはオブジェクトの属性を表す変数のようなもの,メソッドとはオブジェクトになんらかの処理を行う関数のようなものと思ってもらえればよいと思います.

 たとえば,文字列の文字数を知りたいときは,

var str = 'abcdefg';
var len = str.length;

とプロパティ length にアクセスすれば,文字列 str の長さ 7 が変数 len に格納されます.また,

var str = 'abcdefg';
var sub = str.substring( 2, 4 );

とメソッド substring を利用すると,文字列 str の(2+1=3)文字目から4文字目までの'cd'が,文字列 sub に格納されます.


配列

 JavaScript では配列もオブジェクト(Array)で実装されています.配列を使いたいときには,次のようなコードを書きます.

var a;
a = new Array( 5 );  // a は要素数 5 の配列
a[1] = 10;           // a の第二要素に 10 を代入

また,次のように要素への代入を同時に行うこともできます.

a = new Array( 'もも', 'りんご', 'なし' );

既に生成してある配列に,いっぺんに値を代入するときは次のように書くことができます.

a = new Array( 3 );
a = ['もも', 'りんご', 'なし'];

 JavaScript では,C 言語と同様に厳密な多次元配列はなく,たとえば二次元配列(2行5列)を使いたいときには次のように,配列の配列を生成します.

a = new Array( 2 );
a[0] = new Array( 5 );
a[1] = new Array( 5 );
a[1][3] = 'ここは2行4列';

 また,JavaScript には連想配列と呼ぶ C 言語には全くない文法があります.正確に言うと配列ではないのですが,配列のような記述方法なので配列という言葉が用いられています.

var shouhinkakaku = { 'りんご':100, 'みかん':50, 'もも':200, 'ぶどう':250 };
document.write( shouhinkakaku['りんご'] );

というコードは 100 が表示されます.つまり,配列の添え字に文字列が使えるということです.連想配列を使いこなすと,便利なことが多いので,このような使い方があるということを覚えておくとよいでしょう.


条件式(真偽値)

 JavaScript では条件式の真偽は Boolean オブジェクトとして返され,その値は true か false です.たとえば,

var a = 5 > 3;

が実行されると a には true が格納されます.


表示

 JavaScript では HTML コードを吐き出すことで画面(正確にはブラウザ上)に表示を行うことができます.たとえば,単純に

document.write( 'Hello' );

を実行すると,ブラウザに Hello と表示することができます.ただし,ブラウザで表示しているコード自体を書き換えるので,前に表示されているものはすべて消されてしまうことに注意してください.HTML コードを吐き出しているということは,タグも書けるということです.

document.write( '<HTML><BODY>' );
document.write( '<FONT COLOR="RED">Hello</FONT><BR>' );
document.write( '</BODY></HTML>' );

次のようにして変数に格納されている値を表示することもできます.複数の値を一つの文で表示したいときには,カンマで区切ります.

var a = 10;
document.write( 'a に格納されているのは', a, 'です' );

入力

 JavaScript ではダイアログを表示して文字列を入力させることができます.次のコードは,入力された文字列を画面に表示するプログラムです.

function main()
{
  var str;
  str = prompt( '文字列を入力してください', '' );
  document.write( '<HTML><BODY>' );
  document.write( str );
  document.write( '</BODY></HTML>' );
}