JavaScript 概説

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>文書内記述</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 </HEAD> 09 <BODY CLASS="white"> 10 <H1 CLASS="center">文書内記述</H1> 11 <SCRIPT TYPE="text/javascript"> 12 document.write("JavaScript によって出力<BR>\n"); 13 alert("文書内記述"); 14 let w = window.open("", "", "width=300, height=100"); 15 w.document.open(); 16 w.document.write('<HTML>\n'); 17 w.document.write(' <HEAD>\n'); 18 w.document.write(' <TITLE>新しい Window</TITLE>\n'); 19 w.document.write(' </HEAD>\n'); 20 w.document.write(' <BODY>\n'); 21 w.document.write(' 新しい Window の生成も可能<BR>\n'); 22 w.document.write(' </BODY>\n'); 23 w.document.write('</HTML>\n'); 24 w.document.close(); 25 </SCRIPT> 26 </BODY> 27 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>文書内記述(関数)</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript"> 09 function func() 10 { 11 alert("文書内記述(関数)"); 12 } 13 </SCRIPT> 14 </HEAD> 15 <BODY CLASS="white"> 16 <H1 CLASS="center">文書内記述(関数)（<SPAN onClick="func()">ここをクリック</SPAN>）</H1> 17 </BODY> 18 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>外部ファイル</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript" SRC="control.js"></SCRIPT> 09 </HEAD> 10 <BODY CLASS="white"> 11 <H1 CLASS="center">外部ファイル（<SPAN onClick="func()">ここをクリック</SPAN>）</H1> 12 </BODY> 13 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>要素内記述</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 </HEAD> 09 <BODY CLASS="white"> 10 <H1 CLASS="center">要素内記述</H1> 11 SPAN 要素　　<SPAN onClick="JavaScript: alert('alert 1');alert('alert 2')">ここをクリック</SPAN><BR><BR> 12 A 要素　　<A HREF="JavaScript: alert('alert 2');alert('alert 1')">ここをクリック</A> 13 </BODY> 14 </HTML>

+ ：加算：どちらかが文字列の場合は，文字列の結合 - ：減算 * ：乗算 / ：除算：整数同士の割り算であっても，小数点以下が切り捨てられません． % ：余り：被除数，除数は共に制限はありません．除算の結果を整数として，その余りを結果とします．　　　　例えば，7.3 % 2.3 の結果は 0.4 となります（ 7.3 / 2.3 の演算結果は，3 余り 0.4 ）． = ：代入 ++ ：インクリメント演算子（ 1 だけ増加） -- ：デクリメント演算子（ 1 だけ減少）

>　より大きい　　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 が偽のとき真

|　論理和　　 x | y　　対応するビットのいずれかが 1 のとき真． &　論理積　　 x & y 　　対応するビットの双方が 1 のとき真 ^　排他的論理和　x ^ y　　対応するビットが異なるのとき真 ~　1の補数　　 ~ x　ビット毎に 1 と 0 を反転する <<　左にシフト　　 x << 3　　3 ビット左にシフト．x を 2³ 倍することに相当． >>　右にシフト　　 x >> 3　　3 ビット右にシフト．x を 2³ で割ることに相当． >>>　右にシフト　　x >>> 3　　3 ビット右にシフト（ C++ における符号無しの整数を右シフトする場合に相当）．

new　　 let obj = new Date()　オブジェクトの生成 delete　　delete obj　オブジェクトの削除（配列の要素も可能）　　　　　　　　　　　　　例　delete a[2]; 　　　　　　　　　　　　　　　delete['xyz']; // 連想配列 typeof()　typeof(x)　変数などの型 in 数値　 in obj　オブジェクト内に指定した値が含まれていれば真　　　　　　　　　　　　　例　let a = new Array(1,2,3); 　　　　　　　　　　　　　　　document.write(5 in a);

let x1 = new Array(); // 要素数は未定 let x2 = new Array(100); // 要素数が100の配列 let x3 = new Array(1, 2.3, "abc"); // 初期設定も実施 let x4 = [1, 2.3, "abc"]; // 上と同様

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>関数（様々な引数）</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript"> 09 // クラス Complex 10 class Complex { 11 // コンストラクタ 12 constructor(a, b) 13 { 14 this.x = a; 15 this.y = b; 16 } 17 } 18 // 関数 func 19 function func(a, b, c, d, e = 5) 20 { 21 d.x = -100; 22 a += 10; 23 c[0] = 30; 24 return (a + b + e); // 計算結果を返す 25 } 26 </SCRIPT> 27 </HEAD> 28 <BODY CLASS="white"> 29 <H1 CLASS="center">関数（様々な引数）</H1> 30 <SCRIPT TYPE="text/javascript"> 31 let x = 1; 32 let y = 2; 33 let z = new Array(10, 20); 34 let w = new Complex(100, 200); 35 document.write("関数を呼ぶ前：<BR>\n"); 36 document.write("　　　x：" + x + "　y：" + y + "　z：" + z[0] + "，" + z[1] + "　w.x：" + w.x + "<BR>\n"); 37 let r = func(x, y, z, w); 38 document.write("関数を呼んだ後：<BR>\n"); 39 document.write("　　　x：" + x + "　y：" + y + "　z：" + z[0] + "，" + z[1] + "　w.x：" + w.x + "　r：" + r + "<BR>\n"); 40 </SCRIPT> 41 </BODY> 42 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>関数（関数名）</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 </HEAD> 08 <BODY> 09 <SCRIPT TYPE="text/javascript"> 10 function add(s1, s2) { 11 let s = s1 + s2; 12 return s; 13 } 14 15 function sub(s1, s2) { 16 let s = s1 - s2; 17 return s; 18 } 19 20 function add_sub(fun, s1, s2) { 21 let s = fun(s1, s2); 22 return s; 23 } 24 25 document.write("add(2,3) " + add(2,3) + "<BR>\n"); 26 27 let kasan = add; 28 document.write("kasan(2,3) " + kasan(2,3) + "<BR>\n"); 29 30 document.write("add_sub(add, 2, 3) " + add_sub(add, 2, 3) + "<BR>\n"); 31 document.write("add_sub(sub, 2, 3) " + add_sub(sub, 2, 3) + "<BR>\n"); 32 </SCRIPT> 33 </BODY> 34 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>オブジェクト</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript"> 09 // Complex オブジェクト（プロパティ） 10 function Complex(a, b) 11 { 12 this.x = a; 13 this.y = b; 14 this.r = this.rep(); 15 } 16 // Complex オブジェクト（メソッド add ） 17 Complex.prototype.add = function(b) 18 { 19 let cp = new Complex(this.x + b.x, this.y + b.y); 20 return cp; 21 } 22 // Complex オブジェクト（メソッド rep ） 23 Complex.prototype.rep = function() 24 { 25 let r = "(" + this.x + " , " + this.y + ")"; 26 return r; 27 } 28 </SCRIPT> 29 </HEAD> 30 <BODY CLASS="white"> 31 <H1 CLASS="center">新規オブジェクトの定義と利用</H1> 32 <SCRIPT TYPE="text/javascript"> 33 let cp1 = new Complex(1, 2); 34 let cp2 = new Complex(3, 1); 35 let cpa = cp1.add(cp2); // cp2.add(cp1) でも同じ 36 document.write("cp1 + cp2 = (" + cpa.x + " , " + cpa.y + ")<BR>\n"); 37 document.write(cp1.r + " + " + cp2.r + " = " + cpa.r + "<BR>\n"); 38 </SCRIPT> 39 </BODY> 40 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>クラス</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css"> 08 <SCRIPT TYPE="text/javascript"> 09 // クラス Complex 10 class Complex { 11 static name = "Complex Number"; 12 #y = 0; 13 // コンストラクタ 14 constructor(a, b) 15 { 16 this.x = a; 17 this.#y = b; 18 this.r = this.rep(); 19 } 20 // メソッド add 21 add = function(b) 22 { 23 let cp = new Complex(this.x + b.x, this.#y + b.#y); 24 return cp; 25 } 26 // メソッド sub 27 static sub = function(a, b) 28 // static sub = function(b) 29 { 30 let cp = new Complex(a.x - b.x, a.#y - b.#y); 31 // alert("name: " + this.name + " x: " + this.x); // x に対しては，undefined 32 // let cp = new Complex(this.x - b.x, this.#y - b.#y); 33 return cp; 34 } 35 // メソッド rep 36 rep = function() 37 { 38 let r = "(" + this.x + " , " + this.#y + ")"; 39 return r; 40 } 41 } 42 // クラス Real 43 class Real extends Complex { 44 static name = "Real Number"; 45 // コンストラクタ 46 constructor(a) 47 { 48 super(a, 0); 49 this.r = this.rep(); 50 } 51 // メソッド rep 52 rep = function() 53 { 54 return this.x; 55 } 56 } 57 </SCRIPT> 58 </HEAD> 59 <BODY CLASS="white"> 60 <H1 CLASS="center">クラスの定義と利用</H1> 61 <SCRIPT TYPE="text/javascript"> 62 // Complex 63 document.write("　　***" + Complex.name + "***<BR>\n"); 64 let cp1 = new Complex(1, 2); 65 let cp2 = new Complex(3, 1); 66 let cpa = cp1.add(cp2); // cp2.add(cp1) でも同じ 67 let cps = Complex.sub(cp1, cp2); 68 // document.write("cp1 + cp2 = (" + cpa.x + " , " + cpa.#y + ")<BR>\n"); // エラー 69 document.write(cp1.r + " + " + cp2.r + " = " + cpa.r + "<BR>\n"); 70 document.write(cp1.r + " - " + cp2.r + " = " + cps.r + "<BR>\n"); 71 // Real 72 document.write("　　***" + Real.name + "***（Complex.name: " + Complex.name + "）<BR>\n"); 73 let re1 = new Real(10); 74 let re2 = new Real(20); 75 let rea = re1.add(re2); // re2.add(re1) でも同じ 76 let res = Real.sub(re1, re2); 77 document.write(re1.r + " + " + re2.r + " = " + rea.x + "<BR>\n"); 78 document.write(re1.r + " - " + re2.r + " = " + res.x + "<BR>\n"); 79 </SCRIPT> 80 </BODY> 81 </HTML>

01 <!DOCTYPE HTML> 02 <HTML> 03 <HEAD> 04 <TITLE>変数の有効範囲(スコープ)</TITLE> 05 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 06 <META NAME=viewport CONTENT="width=device-width, initial-scale=1"> 07 <SCRIPT TYPE="text/javascript"> 08 /****************************/ 09 /* 変数の有効範囲(スコープ) */ 10 /* coded by Y.Suganuma */ 11 /****************************/ 12 13 str = ""; 14 z = 30; 15 16 /************************/ 17 /* オブジェクト Example */ 18 /************************/ 19 function Example() { // class Example { 20 this.x = 1000; // constructor() { this.x = 1000; } 21 } 22 23 Example.prototype.sub = function() { // sub = function() { 24 str += "sub member( x ) " + this.x + "\n"; 25 } 26 27 /************/ 28 /* 関数 run */ 29 /************/ 30 function run() { 31 // ブロック 32 let x = 10; 33 var a = 100; 34 if (x > 5) { 35 // str += "then block x " + x + "\n"; // 許されない 36 str += "then block a " + a + "\n"; 37 let x = 15; 38 if (x > 7) { 39 let x = 20; // OK 40 str += "then block block x " + x + "\n"; 41 } 42 var a = 200; 43 let b = -100; 44 var y = 20; 45 str += "then block x " + x + "\n"; 46 str += "then block a " + a + "\n"; 47 str += "then block b " + b + "\n"; 48 str += "then block y " + y + "\n"; 49 } 50 else { 51 str += "else block x " + x + "\n"; 52 str += "else block a " + a + "\n"; 53 x = -15; 54 str += "else block x " + x + "\n"; 55 } 56 // let x = 100; // 許されない 57 // var a = 300; // 許される 58 // str += "w " + w + "\n"; // 許されない 59 sub(); 60 str += "w " + w + "\n"; // グローバル変数 61 str += "x " + x + "\n"; 62 str += "a " + a + "\n"; 63 // str += "b " + b + "\n"; // 許されない 64 str += "y " + y + "\n"; // ブロック内の定義が有効 65 // 最初の x が 1 の時は undefined 66 // オブジェクト 67 let ex = new Example(); 68 ex.sub(); 69 str += "member( x ) " + ex.x + "\n"; 70 // 71 // 結果の設定 72 // 73 document.getElementById("tx").value = str; 74 } 75 76 /************/ 77 /* 関数 sub */ 78 /************/ 79 function sub() 80 { 81 // str += " sub x " + x + "\n"; // 許されない 82 let x = 40; 83 str += " sub x " + x + "\n"; 84 str += " sub z " + z + "\n"; // グローバル変数 85 w = 50; 86 } 87 </SCRIPT> 88 </HEAD> 89 <BODY STYLE="font-size:130%"> 90 <P STYLE="text-align:center"> 91 <INPUT TYPE="button" VALUE="OK" onClick="run()" STYLE="font-size:90%"><BR><BR> 92 <TEXTAREA TYPE="text" ID="tx" COLS="30" ROWS="10" STYLE="font-size: 100%"></TEXTAREA> 93 </P> 94 </BODY> 95 </HTML>

　　基本的に，ブロック内（ { } で囲まれた部分，関数も含む）で，let を指定して定義すると，ブロック内のその変数が定義された以降で有効になります．また，関数内で，var を指定して定義すると，たとえブロック内で定義したとしても，関数内のその変数が定義された以降で有効になります．これらの変数をローカル変数と呼びます．関数外で定義された変数，または，let や var を付加せずに定義された変数は，グローバル変数と呼ばれ，変数が定義された以降であれば，どこからでも参照可能（有効）になります．ただし，C/C++ や Java の有効範囲とはかなり異なっていますので注意してください．上のプログラム例について説明する前に，プログラムの断片によって，いくつかの確認を行っておきます．

　　まず，var について考えてみます．下に示すプログラムの断片において，01 行目の x は，関数外で定義されたグローバル変数です．しかし，03 行目では，01 行目の x は無視され，「 undefined 」が出力されます．確かに，var を使用して定義された変数の有効範囲は定義された以降ですが，その影響は定義されたブロック全体に及び，関数の外側で定義された同じ名前の変数は無視されます．この例の場合は，04 行目の変数 x の定義が，03 行目に影響を与えています（宣言の巻き上がり）．また，var に関しては，04 行目，06 行目のように，複数回定義しても許されますが，08 行目の定義は許されません．

01	x = 10;
02	function run() {
03		alert(x);   // undefined
04		var x = 20;
05		alert(x);
06		var x = 30;
07		alert(x);
08	//	let x = 40;  // 定義済みエラー
09		・・・・・
10	}

　　次に，let について考えてみます．グローバル変数や影響範囲に対する考え方は var の場合と同じですが，下に示すプログラムの断片において，03 行目では，未定義のためエラーになってしまいます．この例の場合も，04 行目の変数 x の定義が，03 行目に影響を与えています（宣言の巻き上がり）．また，複数回同じ名前の変数を定義することは許されません．

01	x = 10;
02	function run() {
03	//	alert(x);   // 未定義エラー
04		let x = 20;
05		alert(x);
06	//	let x = 30;  // 定義済みエラー
07	//	var x = 30;  // 定義済みエラー
08	}

　　関数内において，同じ名前の変数を var や let を付加して定義しなければ，下に示すプログラムの断片における 01 行目のグローバル変数が有効になります．

01	x = 10;
02	function run() {
03		alert(x);
04		x = 20;
05		alert(x);
06	}

　　では，上の枠内に示したプログラム例についての説明に移ります．まず，32 行目において，let を付加して変数 x が定義され（変数 x に値が代入され），10 で初期設定されています．この変数 x は，この位置から run 関数が終わる 73 行目まで有効になります．以下，この関数内の 51 行目，61 行目に対応する結果は，32 行目で宣言されたときの値になります．ただし，32 行目の変数の値が 5 以下の時は，53 行目の代入文のため，54 行目，61 行目の文によって，変数 x の値として -15 が出力されます．また，関数 sub 内の x は，関数 run 内の x とは全く別の変数ですので，81 行目は変数 x が未定義のためエラーになります．

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

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

　　13，14 行目に定義されている変数 str，z は，let や var が付加されていませんので，グローバル変数となり，どの関数からも参照可能になります．85 行目に定義されている変数 w も，let や var が付加されていませんので，グローバル変数となります．しかし，58 行目の段階では，まだ関数 sub が呼ばれていませんので，変数 w が未定義のためエラーになります．このような定義方法は非常に紛らわしく，誤りの原因になりかねません．「関数内で使用するローカル変数には必ず let （場合によっては，var ）を付加し，グローバル変数は関数外で let や var を付加せずに宣言する」といった規則を守った方が良いと思います．また，ブロック内において，その外側で定義された変数と同じ名前の変数は使用しない方が良いと思います．

　　以上，このプログラムを実行すると，64 行目までの文によって，以下に示すような出力が得られます．各行に付加した数字は，対応する文番号です

		// 32 行目の x が 10 のとき
35	then block a 100
39	then block block x 20
44	then block x 15
45	then block a 200
46	then block b -100
47	then block y 20
82	   sub x 40
83	   sub z 30
59	w 50
60	x 10
61	a 200
63	y 20
		// 32 行目の 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

　　次に，オブジェクトについて考えてみます．16 ～ 25 行目において新しいオブジェクトを定義しています．23 ～ 25 行目は，C++ におけるメンバー関数の定義に対応します．オブジェクト内の変数や関数は，すべて public であり，どこからでも参照可能です．なお，クラスに関してもほとんど同じです．上のプログラムにおいて，19，20，23 行目を，コメントのように変更し，かつ，21 行目を 25 行目の後ろに移動すれば，クラスを利用したプログラムになります．勿論，「クラスと継承」において説明したように，クラスの場合は，プロパティやメソッドの前に # を付加することによって，クラスの外部から参照できなくすることが可能です．

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

sub member( x ) 1000
member( x ) 1000