静岡理工科大学 菅沼ホーム JavaScript 目次 索引

JavaScript 概説

  1. JavaScript の特徴と機能
  2. 文法
    1. データ型
    2. 配列
    3. 演算子
      1. 算術演算子と代入演算子
      2. 関係演算子,等値演算子,及び,論理演算子
      3. ビット演算子とシフト演算子
      4. その他
    4. 制御文
      1. 分岐
      2. 繰り返し
      3. with
    5. 関数
    6. 新規オブジェクトの定義と利用
    7. 変数の有効範囲(スコープ)
  3. 使用方法
    1. HTML ファイル内へ記述
    2. 外部ファイルへ記述
    3. HTML 要素内へ記述

  1. JavaScript の特徴と機能

      JavaScript では,ブラウザの各部品や情報をオブジェクトとして取り扱うことができます.さらに,このオブジェクトのプロパティ(オブジェクトの持っている属性値)やメソッド(オブジェクトに対する操作を行う関数)を使用して,オブジェクトの値や処理の手順を動的に変更することが可能です.

      オブジェクトを大きく分けると,ブラウザが本来持っている部品や情報を扱うナビゲータオブジェクトと,JavaScript 独自に組み込まれたビルトインオブジェクトに分類できます.オブジェクトは,階層構造をしており,あるオブジェクトのプロパティなどを使用するときは,たとえば,window オブジェクトの下にある document オブジェクトのプロパティを参照するためには,「window.document.プロパティ名」のように,オブジェクト間の関係を表すため,「 . 」(ピリオド)で区切って記述する必要があります.ただし,1番上の window オブジェクトは省略することが出来ます.

      JavaScript の各オブジェクトの機能をまとめると以下のようになります.

    1. ナビゲータオブジェクト: ブラウザが所有している部品を取り扱うオブジェクト
      • navigator オブジェクト: ブラウザに関する情報(名前,コード,バージョン等)
      • screen オブジェクト: ディスプレイに関する情報(幅,高さなど)
      • event オブジェクト: イベントの処理
      • window オブジェクト: ウインドウの処理(ウインドウの生成,移動,サイズ変更,スクロール,タイマー等)
      • location オブジェクト: 表示 URL の制御
      • link オブジェクト: リンク情報の処理
      • history オブジェクト: 履歴情報の処理(前のページ,次のページへの移動等)
      • document オブジェクト: HTML 文書の処理
      • form オブジェクト: フォームの処理
      • image オブジェクト: イメージの処理
    2. ビルトインオブジェクト
      • Date オブジェクト: 日付や時間情報
      • Math オブジェクト: 数学関係の定数や関数
      • String オブジェクト: 文字列の操作
      • Array オブジェクト: 配列の操作
    3. トップレベル関数(ビルトイン関数): 文字列の評価,数値への変換,値か否かの判定等
    4. DOM 及び CANVAS: DOM 及び CANVAS 関係の JavaScript のプロパティとメソッド

  2. 文法

      ここでは,JavaScript の言語仕様について,項目を羅列する程度のレベルで簡単に記述していきます.その文法は,C/C++ とかなり似ていますので,適宜,「 C/C++ と Java」の関連する箇所も示しておきます.その箇所を参考にしながら読んでみてください.

    1. データ型データ型

        JavaScript では,C/C++ や Java のように,変数に対して型宣言を行う必要はありません.代入されたデータによって,自動的にその変数の型が決定されます.例えば,
      let x1 = 12345;
      let x2;
      var y1 = 12.5;
      var y1;
      z1 = 12;
      z1;
      				
      のような形で変数の使用を開始すると(変数を定義すると),それ以降,その変数を使用することが出来るように(有効に,参照可能に)なります.ブロック内( { } で囲まれた部分,関数も含む)で,let を指定して定義すると,ブロック内のその変数が定義された以降で有効になります.また,関数内で,var を指定して定義すると,関数内のその変数が定義された以降で有効になります.これらの変数をローカル変数と呼びます.関数外で定義された変数,または,let や var を付加せずに定義された変数は,グローバル変数と呼ばれ,変数が定義された以降であれば,どこからでも参照可能(有効)になります.誤りの原因となりやすいので,「グローバル変数は,関数の外で let や var を付加せずに定義する,ローカル変数は,特別の理由が無い限り,var ではなく let を付加して定義する.」といった規則を守った方が良いと思います.詳細については,変数の有効範囲(スコープ)を参照してください.

        JavaScript で使用できる型や特別な定数は以下に示す通りです.

      • 数値: 10 進整数,8 進数( 0 で始まる),16 進数( 0x で始まる),浮動小数点数を使用できます.整数と浮動小数点数は区別されず,すべて,8 バイトの浮動小数点数として表現されます.表現可能な範囲は,±1.7976931348623157×10308となります.また,整数として精度が保証されるのは,-253(-9,007,199,254,740,992) ~ 253(9,007,199,254,740,992)の範囲です.

      • 文字列: ダブルクォ-テンションマーク「 " 」,または,シングルクォ-テンションマーク「 ' 」で囲まれた文字や数字です.両者に差はなく,「"abc"」と「'abc'」は全く同じ文字列になります.また,片方を他方に組み入れることも可能であり,「"abc'efg'hij"」は,文字列「abc'efg'hij」と解釈されます(逆も可).さらに,+ 演算子によって,文字列の結合が可能です.なお,String オブジェクトとしても表現できますが,同じ内容の文字列であっても,ダブルクォ-テンションマーク等で囲まれた文字列定数と String オブジェクトは全く別のものです.

      • 論理値: truefalse の値を持ちます.

      • null: 何も設定されていないことを表します.

      • undefined: 定義されていないことを表します.

      • NaN: 数値でないことを表します.

      • Infinity: 無限であることを表します.

    2. 配列配列

        配列は,複合データ型の一種であり,複数のデータを処理する場合に利用されます.例えば,
      let x = new Array();   // 要素数は未定
      let x = new Array(100);   // 要素数が100の配列
      let x = new Array(1, 2.3, "abc");   // 初期設定も実施
      				
      の 3 行目のように宣言すれば,3 つのデータを記憶できる領域が確保され,各要素に記憶される値が 1,2.3,"abc" で初期設定されます.また,変数名と添え字を利用して,x[0],x[1],x[2] のようにして参照できます.この例に示すように,各要素は,必ずしも,同じデータ型である必要はありません.しかし,間違いの元になる可能性がありますので,配列は,同じデータ型だけで構成するようにした方が良いと思います.また,プログラムの実行時に,要素の追加,削除等を行うことが可能です.

        例えば,
      let u1 = new Array(1, "abc", 2);
      let u2 = new Array(1, "abc", 2);
      let u3 = u1;
      				
      の最初の 2 行では,同じ値で初期設定された 2 つの配列 u1,u2 を定義し,次の行において u1 を u3 に代入しています.しかし,この代入は,整数型の場合のような代入ではありません.つまり,u1 の領域及びそこに記憶されている要素をすべてコピーし,u3 に代入しているわけではありません.ここでは,u1,u2,u3 をポインタとしてとらえた方が理解しやすいと思います.つまり,2 行目の代入によって,u1 に記憶されているアドレスが u3 に記憶され,u1 と u3 が同じ領域を指しているという意味です.実際,u1 の値を変更すれば,u3 の値も変化します(逆も同様).このことを概念的に示せば以下のようになります.

        多次元の配列を扱うことも可能です.例えば,
      let v1 = new Array(2);
      v1[0] = new Array(10, 20, 30);
      v1[1] = new Array(40, 50, 60);
      let v2 = new Array(2);
      v2[0] = new Array(10, 20, 30);
      v2[1] = new Array(40, 50, 60);
      let v3 = v1;
      				
      のように,配列の要素を,さらに配列として定義すれば,2 次元の配列を定義できます.この例では,2 行 3 列の配列になります.7 行目の記述によって,v3 も,v1 と同じ 2 行 3 列の配列になります.そのイメージは,new 演算子を使用した C++ の場合と同じく,以下のようになります.

        また,
      let vp1  = v1[0];   // v1,v3 の 1 行目
      let vp2  = v1[1];   // v1,v3 の 2 行目
      				
      のように,各行を 1 次元配列として扱うことも可能です.勿論,vp1 と v1[0] は同じ場所を指していますので,例えば,vp1[1] の値を変更すれば,v1[0][1] の値も変化します(逆も同様).しかし,すべてのデータが連続した領域に確保されるとは限らないため,異なる行のデータを,連続した 1 次元配列とみなして参照することはできません.

        連想配列を使用することも可能です.連想配列は,キーと値のペアで構成され,例えば,
      let color = {'red' : '赤', 'blue' : '青'};
      				
      のように記述します.使用例とそのソースコードを下に示します.なお,write は,document オブジェクトのメソッドであり,ブラウザに「文字列」を書き出します.
      <!DOCTYPE HTML>
      <HTML>
      <HEAD>
      	<TITLE>連想配列</TITLE>
      	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      </HEAD>
      <BODY CLASS="white">
      	<H1 CLASS="center">連想配列</H1>
      	<SCRIPT TYPE="text/javascript">
      		let color = {'red' : '赤', 'blue' : '青'};
      		document.write(color['red'] + "<BR>\n");
      		document.write(color['blue'] + "<BR>\n");
      //		document.write(color[0] + "<BR>\n");   エラー
      		for (let english in color)
      			document.write("   " + english + " は " + color[english] + " です<BR>\n");
      	</SCRIPT>
      </BODY>
      </HTML>
      				

    3. 演算子

      1. 算術演算子代入演算子算術演算子と代入演算子

          整数同士の除算であっても,C/C++ のように,小数点以下が切り捨てられないことに注意してください.小数点以下を切り捨てたい場合は,Math オブジェクト内のメソッド ceilfloor などを使用してください.また,C/C++ と同様,演算と代入を同時に行う演算子,例えば,「 x += 10; 」なども使用可能です.
        + : 加算 : どちらかが文字列の場合は,文字列の結合
        - : 減算
        * : 乗算
        / : 除算 : 整数同士の割り算であっても,小数点以下が切り捨てられません.
        % : 余り : 被除数,除数は共に制限はありません.除算の結果を整数として,その余りを結果とします.
                 例えば,7.3 % 2.3 の結果は 0.4 となります( 7.3 / 2.3 の演算結果は,3 余り 0.4 ).
        = : 代入
        ++ : インクリメント演算子( 1 だけ増加)
        -- : デクリメント演算子( 1 だけ減少)
        					
      2. 関係演算子等値演算子,及び,論理演算子関係演算子,等値演算子,及び,論理演算子
        >  より大きい  a > b   式 a の値が式 b の値より大きいとき真
        <  より小さい  a < b   式 a の値が式 b の値より小さいとき真
        >= 以上     a >= b  式 a の値が式 b の値以上のとき真
        <= 以下     a <= b  式 a の値が式 b の値以下のとき真
        == 等しい     a == b  式 a の値と式 b の値が等しいとき真
        === 等しい    a === b  式 a の値と式 b の値が等しいとき真(型の変更を行わない.例えば,「 true == 1 」は真となるが,「 true === 1 」は偽となる)
        != 等しくない   a != b  式 a の値と式 b の値が等しくないとき真
        !== 等しくない  a !== b  式 a の値と式 b の値が等しくないとき真(型の変更を行わない.例えば,「 true == 1 」は真となるが,「 true === 1 」は偽となる)
        || 論理和  x || y  式 x が真か,または,式 y が真のとき真
        && 論理積  x && y  式 x が真で,かつ,式 y が真のとき真
        !  否定    ! x      式 x が偽のとき真
        					
      3. ビット演算子シフト演算子ビット演算子とシフト演算子
        | 論理和      x | y   対応するビットのいずれかが 1 のとき真.
        & 論理積      x & y   対応するビットの双方が 1 のとき真
        ^ 排他的論理和 x ^ y   対応するビットが異なるのとき真
        ~ 1の補数     ~ x      ビット毎に 1 と 0 を反転する
        << 左にシフト   x << 3  3 ビット左にシフト.x を 23 倍することに相当.
        >> 右にシフト   x >> 3  3 ビット右にシフト.x を 23 で割ることに相当.
        >>> 右にシフト  x >>> 3  3 ビット右にシフト( C++ における符号無しの整数を右シフトする場合に相当).
        					
      4. その他
        new     let obj = new Date() オブジェクトの生成
        delete  delete obj オブジェクトの削除
        typeof() typeof(x) 変数などの型
        in 数値  in obj オブジェクト内に指定した値が含まれていれば真
                     例 let a = new Array(1,2,3);
                       document.write(5 in a);
        					
    4. 制御文

      1. 分岐分岐

        • if 文
          if (論理式) {
          	文1(複数の文も可)
          }
          else {
          	文2(複数の文も可)
          }
          						
        • else if 文
          if (論理式) {
          	文1(複数の文も可)
          }
          else if (論理式) {
          	文2(複数の文も可)
          }
            ・・・
          else {
          	文n(複数の文も可)
          }
          						
        • switch 文
          switch (式) {
          	[case 定数式1 :]
          		[文1]
          	[case 定数式2 :]
          		[文2]
          	 ・・・・・
          	[default :]
          		[文n]
          }
          						
      2. 繰り返し繰り返し

        • for 文
          for (初期設定; 繰り返し条件; 後処理) {
          	文(複数の文も可)
          }
          						
        • for in 文
          for (変数名 in オブジェクト名) {
          	文(複数の文も可)
          }
          						
            使用例とそのソースコード : 使用例に見るように,オブジェクト内のメソッド及びプロパティが順番に変数に代入されます.なお,write は,document オブジェクトのメソッドであり,ブラウザに「文字列」を書き出します.
          <!DOCTYPE HTML>
          <HTML>
          <HEAD>
          	<TITLE>for in</TITLE>
          	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
          	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
          </HEAD>
          <BODY CLASS="white">
          	<H1 CLASS="center">for in の使用例</H1>
          	<SCRIPT TYPE="text/javascript">
          		for (let x in document) {
          			document.write(x + "<BR>");
          		}
          	</SCRIPT>
          </BODY>
          </HTML>
          						
        • while 文
          while (繰り返し条件) {
          	文(複数の文も可)
          }
          						
        • do while 文
          do {
          	文(複数の文も可)
          } while (繰り返し条件) ;
          						
      3. with
        with (オブジェクト名) {
        	オブジェクト内で行う処理
        }
        					
          使用例とそのソースコード : with 文の内部では,使用例に示すように,オブジェクト名を省略できます.この例では,document オブジェクトのメソッド write に対してドキュメント名を省略しています.
        <!DOCTYPE HTML>
        <HTML>
        <HEAD>
        	<TITLE>with</TITLE>
        	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
        	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
        </HEAD>
        <BODY CLASS="white">
        	<H1 CLASS="center">with の使用例</H1>
        	<SCRIPT TYPE="text/javascript">
        		document.write("with の外側<BR>");
        		with (document) {
        			write("with の内部<BR>");
        		}
        	</SCRIPT>
        </BODY>
        </HTML>
        					

    5. 関数簡単な関数),(配列の引き渡し

        関数に対する一般的記述方法は,
      function 関数名 (引数, ・・・) {
      	処理
      }
      				
      のようになります.値を返したい場合は,return 文 を使用します.なお,一般に,関数の記述は HEAD 要素内で行います. -> 使用例とそのソースコード
      01	<!DOCTYPE HTML>
      02	<HTML>
      03	<HEAD>
      04		<TITLE>関数</TITLE>
      05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      07		<SCRIPT TYPE="text/javascript">
      08			function func(a, b, c)
      09			{
      10				a   += 10;
      11				c[0] = 30;
      12				return (a + b);
      13			}
      14		</SCRIPT>
      15	</HEAD>
      16	<BODY CLASS="white">
      17		<H1 CLASS="center">関数の使用例</H1>
      18		<SCRIPT TYPE="text/javascript">
      19			let x = 1;
      20			let y = 2;
      21			let z = new Array(10, 20);
      22			document.write("x " + x + " y " + y + " z " + z[0] + " " + z[1] + "<BR>\n");
      23			let r = func(x, y, z);
      24			document.write("x " + x + " y " + y + " z " + z[0] + " " + z[1] + " r " + r + "<BR>\n");
      25		</SCRIPT>
      26	</BODY>
      27	</HTML>
      				
        引数は,その値がコピーされて関数に渡されます.上の例では,x,y の値がコピーされ,a,b に渡されます.従って,関数内において,a の値を変更( 10 行目)しても x の値は変化しません.ただし,配列(変数 z )のようなオブジェクトを引数として場合は,C/C++ におけるアドレスを引数とした場合に相当し,関数内においてオブジェクトの値を変更すれば,関数を呼んだ側におけるオブジェクトの値も変化します.

        関数も一つのオブジェクトです.従って,関数(のアドレス)を他の変数に代入すれば,その変数は関数と同じように使用できます( 22,23 行目).また,関数(のアドレス)を関数の引数としても使用可能です( 24,25 行目). -> 使用例とそのソースコード
      01	<!DOCTYPE HTML>
      02	<HTML>
      03	<HEAD>
      04		<TITLE>関数と引数</TITLE>
      05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      06	</HEAD>
      07	<BODY>
      08		<SCRIPT TYPE="text/javascript">
      09			function add(s1, s2) {
      10				let s = s1 + s2;
      11				return s;
      12			}
      13			function sub(s1, s2) {
      14				let s = s1 - s2;
      15				return s;
      16			}
      17			function add_sub(fun, s1, s2) {
      18				let s = fun(s1, s2);
      19				return s;
      20			}
      21			document.write("add(2,3) " + add(2,3) + "<BR>\n");
      22			let kasan = add;
      23			document.write("kasan(2,3) " + kasan(2,3) + "<BR>\n");
      24			document.write("add_sub(add, 2, 3) " + add_sub(add, 2, 3) + "<BR>\n");
      25			document.write("add_sub(sub, 2, 3) " + add_sub(sub, 2, 3) + "<BR>\n");
      26		</SCRIPT>
      27	</BODY>
      28	</HTML>
      				
        参考のため,C/C++ における対応するプログラムを示しておきます(関数名の引き渡し).
      #include <stdio.h>
      int add(int s1, int s2) {
      	int s = s1 + s2;
      	return s;
      }
      int sub(int s1, int s2) {
      	int s = s1 - s2;
      	return s;
      }
      int add_sub(int (*fun)(int, int), int s1, int s2) {
      	int s = fun(s1, s2);
      	return s;
      }
      int main()
      {
      	printf("%d\n", add(2, 3));   // 5
      	int (*kasan)(int, int) = &add;
      	printf("%d\n", kasan(2, 3));   // 5
      	printf("%d\n", add_sub(add, 2, 3));   // 5
      	printf("%d\n", add_sub(sub, 2, 3));   // -1
      	return 0;
      }
      				

    6. 新規オブジェクトの定義と利用クラス

        C++ や Java におけるクラスのように,新しいオブジェクトを定義することができます.使用例は,複素数をイメージしたオブジェクトを作成したものです.thisprototype の使用方法に注意してください.クラスとはかなり異なっていますが,すべての変数や関数をグローバルな状態にすることを多少避けることができます.
      <!DOCTYPE HTML>
      <HTML>
      <HEAD>
      	<TITLE>オブジェクト</TITLE>
      	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      	<SCRIPT TYPE="text/javascript">
      					// Complex オブジェクト(プロパティ)
      					//      C++のクラスにおけるメンバー変数にほぼ対応
      		function Complex(a, b)
      		{
      			this.x = a;
      			this.y = b;
      		}
      					// Complex オブジェクト(メソッド add )
      					//      C++のクラスにおけるメンバー関数にほぼ対応
      		Complex.prototype.add = function(a, b)
      		{
      			let cp = new Complex(a.x+b.x, a.y+b.y);
      			return cp;
      		}
      	</SCRIPT>
      </HEAD>
      <BODY CLASS="white">
      	<H1 CLASS="center">新規オブジェクトの定義と利用</H1>
      	<SCRIPT TYPE="text/javascript">
      		let cp1 = new Complex(1, 2);
      		let cp2 = new Complex(3, 4);
      		let cp  = cp1.add(cp1, cp2);   // cp2.add(cp1, cp2) でも同じ
      		document.write("cp.x " + cp.x + " cp.y " + cp.y + "<BR>\n");
      	</SCRIPT>
      </BODY>
      </HTML>
      				

    7. 変数の有効範囲(スコープ)

        ここをクリックすれば,ブラウザ上で実行することができます.表示された画面において,「 OK 」ボタンをクリックすると,テキストエリアに,実行結果が表示されます.また,ページのソースを表示すれば,下に示した JavaScript のソースプログラムも表示可能です.

      01	<!DOCTYPE HTML>
      02	<HTML>
      03	<HEAD>
      04		<TITLE>変数の有効範囲(スコープ)</TITLE>
      05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      06		<SCRIPT TYPE="text/javascript">
      07			/****************************/
      08			/* 変数の有効範囲(スコープ) */
      09			/*      coded by Y.Suganuma */
      10			/****************************/
      11	
      12			str = "";
      13			z   = 30;
      14	
      15			/************************/
      16			/* オブジェクト Example */
      17			/************************/
      18			function Example() {
      19				this.x = 1000;
      20			}
      21	
      22			Example.prototype.sub = function() {
      23				str += "sub member( x ) " + this.x + "\n";
      24			}
      25	
      26			/************/
      27			/* 関数 run */
      28			/************/
      29			function run() {
      30						// ブロック
      31				let x = 10;
      32				var a = 100;
      33				if (x > 5) {
      34	//				str  += "then block x " + x + "\n";   // 許されない
      35					str  += "then block a " + a + "\n";
      36					let x = 15;
      37					if (x > 7) {
      38						let x = 20;   // OK
      39						str  += "then block block x " + x + "\n";
      40					}
      41					var a = 200;
      42					let b = -100;
      43					var y = 20;
      44					str  += "then block x " + x + "\n";
      45					str  += "then block a " + a + "\n";
      46					str  += "then block b " + b + "\n";
      47					str  += "then block y " + y + "\n";
      48				}
      49				else {
      50					str += "else block x " + x + "\n";
      51					str += "else block a " + a + "\n";
      52					x    = -15;
      53					str += "else block x " + x + "\n";
      54				}
      55	//			let x = 100;   // 許されない
      56	//			var a = 300;   // 許される
      57	//			str += "w " + w + "\n";   // 許されない
      58				sub();
      59				str += "w " + w + "\n";   // グローバル変数
      60				str += "x " + x + "\n";
      61				str += "a " + a + "\n";
      62	//			str += "b " + b + "\n";   // 許されない
      63				str += "y " + y + "\n";   // ブロック内の定義が有効
      64				                          // 最初の x が 1 の時は undefined
      65						// オブジェクト
      66				let ex = new Example();
      67				ex.sub();
      68				str += "member( x ) " + ex.x + "\n";
      69					//
      70					// 結果の設定
      71					//
      72				document.getElementById("tx").value = str;
      73			}
      74	
      75			/************/
      76			/* 関数 sub */
      77			/************/
      78			function sub()
      79			{
      80	//			str  += "   sub x " + x + "\n";   // 許されない
      81				let x = 40;
      82				str  += "   sub x " + x + "\n";
      83				str  += "   sub z " + z + "\n";   // グローバル変数
      84				w     = 50;
      85			}
      86		</SCRIPT>
      87	</HEAD>
      88	<BODY  STYLE="font-size:130%">
      89		<P STYLE="text-align:center">
      90			<INPUT TYPE="button" VALUE="OK" onClick="run()" STYLE="font-size:90%"><BR><BR>
      91			<TEXTAREA TYPE="text" ID="tx" COLS="30" ROWS="10" STYLE="font-size: 100%"></TEXTAREA>
      92		</P>
      93	</BODY>
      94	</HTML>
      				
        基本的に,ブロック内( { } で囲まれた部分,関数も含む)で,let を指定して定義すると,ブロック内のその変数が定義された以降で有効になります.また,関数内で,var を指定して定義すると,関数内のその変数が定義された以降で有効になります.これらの変数をローカル変数と呼びます.関数外で定義された変数,または,let や var を付加せずに定義された変数は,グローバル変数と呼ばれ,変数が定義された以降であれば,どこからでも参照可能(有効)になります.誤りの原因となりやすいので,「グローバル変数は,関数の外で let や var を付加せずに定義する,ローカル変数は,特別の理由が無い限り,var ではなく let を付加して定義する.」といった規則を守った方が良いと思います.

        まず,31 行目において,let を付加して変数 x が定義され(変数 x に値が代入され),10 で初期設定されています.この変数 x は,この位置から run 関数が終わる 72 行目まで有効になります.以下,この関数内の 50 行目,60 行目に対応する結果は,31 行目で宣言されたときの値になります.ただし,31 行目の変数の値が 5 以下の時は,52 行目の代入文のため,53 行目,60 行目の文によって,変数 x の値として -15 が出力されます.また,関数 sub 内の x は,関数 run 内の x とは全く別の変数ですので,80 行目は変数 x が未定義のためエラーになります.

        31 行目のように,let を付加して定義された変数の有効範囲内では,同じ名前の変数を再定義することはできません( 55 行目).32 行目において var を付加して定義された変数 a の有効範囲も,run 関数が終わる 72 行目までになりますが,56 行目のように再定義することが可能です.そして,この行以降は,ここで設定された値が有効になります.

        上で述べましたように,let を付加して定義された変数の有効範囲内では,同じ名前の変数を再定義することはできませんが,その内側のブロックでは,同じ名前の変数を再定義することができます( 36 行目,38 行目).勿論,var を付加して定義された変数においても再定義可能ですが,ただし,その意味はかなり異なってきます.let を付加した変数の場合,その有効範囲はブロックの最後までですが( 36 行目の x は 47 行目まで,38 行目の x は 39 行目まで,42 行目の b は 47 行目まで),var を付加した変数( 41 行目の a,43 行目の y )の有効範囲は関数の終わりまでとなります.しかし,変数 y は,ブロック内で定義されているため,31 行目の変数 x の値が 5 以下の時は,63 行目の文によって,undefined が出力されます.また,35 行目の文によって,32 行目で設定された a の値が問題なく出力されますが,34 行目は,36 行目の定義が存在するため,未定義によるエラーになってしまいます.C/C++ のように,34 行目~ 35 行目では,31 行目で定義された変数 x が有効になると考えがちですので,注意してください.

        12,13 行目に定義されている変数 str,z は,let や var が付加されていませんので,グローバル変数となり,どの関数からも参照可能になります.84 行目に定義されている変数 w も,let や var が付加されていませんので,グローバル変数となります.しかし,57 行目の段階では,まだ関数 sub が呼ばれていませんので,変数 w が未定義のためエラーになります.このような定義方法は非常に紛らわしく,誤りの原因になりかねません.「関数内で使用するローカル変数には必ず let (場合によっては,var )を付加し,グローバル変数は関数外で let や var を付加せずに宣言する」といった規則を守った方が良いと思います.

        以上,このプログラムを実行すると,以下に示すような出力が得られます.各行に付加した数字は,対応する文番号です
      		// 31 行目の x が 10 のとき
      35	then block a 100
      39	then block block x 20
      45	then block x 15
      46	then block a 200
      47	then block b -100
      48	then block y 20
      82	   sub x 40
      83	   sub z 30
      59	w 50
      60	x 10
      61	a 200
      63	y 20
      		// 31 行目の x が 1 のとき
      50	else block x 1
      51	else block a 100
      53	else block x -15
      82	   sub x 40
      83	   sub z 30
      59	w 50
      60	x -15
      61	a 100
      63	y undefined
      					
        JavaScript にはクラスが存在しませんので,似た概念であるオブジェクトについて考えてみます.15 ~ 24 行目において新しいオブジェクトを定義しています.22 ~ 24 行目は,C++ におけるメンバー関数の定義に対応します.オブジェクト内の変数や関数は,すべて public であり,どこからでも参照可能です

        66 行目において,オブジェクト Example のインスタンス ex を生成し,67 行目では,オブジェクト Example 内の関数 sub を通して,変数 x を出力しています.68 行目は,オブジェクトの外から,直接に,変数 x の値を出力した場合です.オブジェクト内の変数や関数は,すべてどこからでも参照可能ですが,「 ex. 」のような部分を付加しなければならず,プログラムの他の部分で同じ名前の変数や関数を使用していてもそれらと識別でき,混乱を防ぐことができます.これが,オブジェクトを使用する最大の利点かもしれません.以上,66 ~ 68 行目内の文によって,以下に示すような出力が得られます.
      sub member( x ) 1000
      member( x ) 1000
      					

  3. 使用方法

    1. HTML ファイル内へ記述

        HTML ファイル内に JavaScript を記述する場合は,SCRIPT 要素を使用し,
      <SCRIPT TYPE="text/javascript">
      	<!--
      		ここに,JavaScript のプログラム
      	//-->
      </SCRIPT>
      				
      のように記述します.なお,「<!--」と「//-->」は,JavaScript に未対応のブラウザが JavaScript のソースプログラムをコメントアウトするためです.このサイトの目的から言って,必要ないと思いますので,基本的には省略します.

        使用例1のように記述すると,ページが表示されたときに JavaScript も実行されます(この例では,新しい Window も生成しています).ページが表示されたときには実行されず,マウスでクリックしたときに実行したいような場合は,使用例2のように,HEAD 要素の中に実行したいことを関数の形で記述しておき,指定された箇所がクリックされる(イベントが発生する)と,その関数が実行されるようにすることも可能です.なお,イベント処理に関しては,「 event オブジェクト」,「HTML のグローバル属性」,「イベント処理」などを参照してください.

      使用例1( use1.htm )

      <!DOCTYPE HTML>
      <HTML>
      <HEAD>
      	<TITLE>文書内記述</TITLE>
      	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      </HEAD>
      <BODY CLASS="white">
      	<H1 CLASS="center">文書内記述</H1>
      	<SCRIPT TYPE="text/javascript">
      		document.write("JavaScript によって出力<BR>\n");
      		alert("文書内記述");
      		let w = window.open("", "", "width=300, height=100");
      		w.document.open();
      		w.document.write('<HTML>\n');
      		w.document.write('	<HEAD>\n');
      		w.document.write('		<TITLE>新しい Window</TITLE>\n');
      		w.document.write('	</HEAD>\n');
      		w.document.write('	<BODY>\n');
      		w.document.write('		新しい Window の生成も可能<BR>\n');
      		w.document.write('	</BODY>\n');
      		w.document.write('</HTML>\n');
      		w.document.close();
      	</SCRIPT>
      </BODY>
      </HTML>
      				

      使用例2( use2.htm )

      <!DOCTYPE HTML>
      <HTML>
      <HEAD>
      	<TITLE>文書内記述(関数)</TITLE>
      	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      	<SCRIPT TYPE="text/javascript">
      		function func()
      		{
      			alert("文書内記述(関数)");
      		}
      	</SCRIPT>
      </HEAD>
      <BODY CLASS="white">
      	<H1 CLASS="center">文書内記述(関数)(<SPAN onClick="func()">ここをクリック</SPAN>)</H1>
      </BODY>
      </HTML>
      				

    2. 外部ファイルへ記述

        JavaScript の関数などを外部ファイルに記述し,それを呼び出すことも可能です.たとえば,使用例2の場合,HEAD 要素内に,
      01	<!DOCTYPE HTML>
      02	<HTML>
      03	<HEAD>
      04		<TITLE>外部ファイル</TITLE>
      05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      07		<SCRIPT TYPE="text/javascript" SRC="control.js"></SCRIPT>
      08	</HEAD>
      09	<BODY CLASS="white">
      10		<H1 CLASS="center">外部ファイル(<SPAN onClick="func()">ここをクリック</SPAN>)</H1>
      11	</BODY>
      12	</HTML>
      				
      のような記述をし( 7 行目の SCRIPT 要素),そこで指定したファイル control.js に,関数 func を
      function func()
      {
      	alert("外部ファイル");
      }
      				
      のように記述することによっても実現可能です(使用例3).

    3. HTML 要素内へ記述

        実行する JavaScript の命令などが少ない場合は,使用例4のように,HTML 要素内に記述することも可能です.この例では,SPAN 要素A 要素内に記述しています.いずれの場合も,2 つの alert 関数が順に実行されます.
      <!DOCTYPE HTML>
      <HTML>
      <HEAD>
      	<TITLE>要素内記述</TITLE>
      	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
      	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
      </HEAD>
      <BODY CLASS="white">
      	<H1 CLASS="center">要素内記述</H1>
      	SPAN 要素  <SPAN onClick="JavaScript: alert('alert 1');alert('alert 2')">ここをクリック</SPAN><BR><BR>
      	A 要素  <A HREF="JavaScript: alert('alert 1');alert('alert 2')">ここをクリック</A>
      </BODY>
      </HTML>
      				

静岡理工科大学 菅沼ホーム JavaScript 目次 索引