Javaスクリプトの文

  1. スクリプトの書式


    1. Scriptタグを利用する

      Javaスクリプトは html に SCRIPT タグを用いてに組み込みます。
          <script type="text/javascript"><!-- 　スクリプト //--></SCRIPT>
      　<!　>タグは本来注釈のタグです、<SCRIPT> 機能が有効でないブラウザの場合、無視されます。
      以下はホームページに1行（"Hello World!!"）を表示する JavaScript の例です。document.write()　はページに文字列を出力します。
      <html>
<head>
  <title>サンプル</title>
</head>
<body>
 hello<BR>
 <script type="text/javascript">
 <!--
   document.write("Hello World from Script!!");
  //-->
 </script>
</body>
</html>
</html>

      このファイルを hello.htm として保存し、ブラウザで開くと次のように表示されます。このスクリプトはこちらから実行できます。


      <script type="text/javascript"> .. </SCRIPT> の部分で出力された 文字列が、そのまま html の文字列としてブラウザで実行されます。文字列に html のタグが含まれていれば、そのまま　タグ として解釈されます。したがって、javascript で計算した結果を html で表示したり、<table>タグとして作成された文字列を 表 として表示することができます。

  2. 変数、式、配列

    1. 変数、式

      　var　で変数を定義し、式で変数を利用して計算できます。C言語とことなり、変数に型はありません。次の例は、変数 box を定義し、100を加えます。変数の値は、document.write( ) で表示できます。左辺が文字の場合、　+ は足し算でなく、文字列の接続をする演算になります。 
      　var box=200;
　box=box+100；
　document.write("box=" + box);

    2. 繰り返し

      　繰り返しは、C言語とどうよう、for( ) や while( )　を利用します。以下は、「今日も雨」を5回表示します。<BR>はhtmlにおける改行を行うタグです。document.write( ) では変数 i の値を表示し、続けて文字列を表示しています。出力した文字列は、ブラウザで 表示されます。
      <html>
<head>
  <title>繰り返し</title>
</head>
<body>
 hello<BR>
 <script type="text/javascript">
 <!--
   var i;
   for(i=0;i<5;i++){
      document.write(i," 今日も雨<BR>");
   }
  //-->
 </script>
</body>
</html>
</html>



    3. エラーの場合

      　C言語では、記述形式にエラーがあるとコンパイル時にエラーが出ますが、スクリプトの場合直接実行するためコンパイルエラーは出ません。異常な記述の場合、そこで、処理を停止しエラーメッセージも出ません。
      　たとえば、for( ) 文で、　;  を , にすると、何も表示が出ません。また、変数宣言を忘れてもエラーにはなりませんが、たとえば、i0 と io を間違えて使用しても、別の変数として処理されます。
      　IEでエラーを表示するには、ツール＞詳細設定＞ブラウズ項目で　「スクリプトエラーごとに通知を表示する」をチェックします。

    4. 配列

      　配列の宣言は、 new Array(サイズ) で、配列を生成します。 var data = new Array(10); では data[0],..data[9] の配列が利用できます。最初の繰り返しで、data[]に値を設定します。次の繰り返しで、data[]の値をすべて加算します。
      <html>
<head>
  <title>繰り返し</title>
</head>
<body>
 <h3>配列<BR><BR></h3>
 <script type="text/javascript">
 <!--
   var sum;
   var i;
   var data = new Array(10);
   for(i=0;i<10;i++){
      data[i]=i;
   }
    sum=0;
    for(i=0;i<10;i++){
      sum = sum + data[i];
   }
   document.write("合計"+sum+"<BR>");
  //-->
 </script>
</body>
</html>
</html>

      　これをブラウザで実行すると、以下のように表示されます。配列のサイズは　配列名.length で取得できます。

      　配列でない場所をアクセスすると、 NaN（Not a Number）の値が表示されます。

    5. 配列の初期値

      配列の初期値は次のように設定します。
      var data = new Array(5, 2, 3,23,12);
var name = new Array("美智子", "知世", "彩香");
      また、 特定の記号で区切られた文字列をよみ、それを区切り記号で分割(split)して、配列に読み込むこともできます。以下はForm入力のtext1の , で区切られた文字列を読み、各値を配列 ary に読み込みます。
      var ary, sztmp;
sztmp = form.text1.value;
ary = sztmp.split(",");
      逆に、配列を join で一つの文字列につなぐこともできます。

  3. 関数


    1. 関数の定義

      　関数は、<head>部につぎの形式で定義します。引数の意味は、C言語の関数と同じです。
       function 関数名（引数の並び ）
      　関数定義は、html の<head>部に定義することができます。
      　関数は、仮引数 value の値を元に計算し、return 式　を実行すると終了します。式 の値を関数の値とします。次の例は、10000以上の値には3%、そうでないとき 5% を加える関数：tax です。
      　関数を実行するには、実引数を指定して、
      　　関数名（実引数）
      とします。これを関数の「呼び出し」といいます。呼び出すと、実引数の値(pr)を関数の仮引数(value)に代入してから、関数の本体を実行します。通常関数は、<head>部に記述します。<body>部で関数を呼び出すことで、実行します。関数について詳しくは、C言語の関数を参照してください。
      <html>
<head>
  <title>imageSize</title>

 <script language="JavaScript">
 <!--
   function tax(value)
   {
     if( value > 10000) {
       return value*1.03;
     }
     else{
      return value*1.05;
     }
   }
  //-->
 </script>
</head>
 
<body>
 <h3>function<BR><BR></h3>
 <script type="text/javascript">
 <!--
   var pr;
    pr=20000;
   document.write(pr,"の税込み価格は "+tax(pr)+"<br>");
   pr=10000;
   document.write(pr,"の税込み価格は "+tax(pr)+"<br>");
  //-->
 </script>
 
</body>
</html>

      実行例

    2. 数学関数

      　数学関数は Math.abs(-10) のように、Math. を付けて引用します。Math.PI でπの値が引用できるほか、C言語と同じ名前で、数学関数が利用できます。