HTML 内データの参照・修正

フォームと JavaScript
クッキーと JavaScript
ダイナミック HTML（ DOM ）
DOM の利用例

属性値の参照・変更
　　フォーム関連要素に対する属性値の参照・変更は，form オブジェクトのプロパティやメソッドを使用して可能です．フォームの例では，「送信１」または「送信２」ボタンをクリックすると（各ボタンは，「リセット」ボタンをクリックした後クリックして下さい），フォームデータの一部を修正した後，その結果を新しいページに表示します．ただし，FORM 要素に対して，ACTION 属性が記述してないためサーバへの送信は行われません．なお，実際にサーバへデータを送る方法に関しては，FORM 要素の使用例１（データの受け渡し）や次の例「演習問題の解答（チェック）」を参照して下さい．

　　「送信１」ボタンをクリックした場合は，関数 soshin1 が呼ばれ，関数 soshin1 では，基本的に form オブジェクトの elements プロパティを利用してフォーム内容を参照・変更しています．elements プロパティを利用した場合は，フォームの内容が変更されると（要素の順番が変更になった場合），関数 soshin1 も変更する必要が出てきます．そこで，関数 soshin2 では（「送信２」ボタンをクリックした場合に呼ばれる），可能な限り，各要素の NAME 属性に定義されている名前を利用してフォーム内容を参照・変更しています．このようにすれば，要素の順番が変更されても，NAME 属性値を変えなければ，関数 soshin2 の内容に影響を及ぼしません．
フォームの例
```
001	<!DOCTYPE HTML>
002	<HTML>
003	<HEAD>
004		<TITLE>フォームの例</TITLE>
005		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
006		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
007		<SCRIPT TYPE="text/javascript">
008			function soshin1(form)
009			{
010				let w = window.open("", "送信されたデータ");
011				w.document.open();
012				w.document.write('<HTML>\n');
013				w.document.write('<HEAD>\n');
014				w.document.write('	<TITLE>表示結果</TITLE>\n');
015				w.document.write('	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">\n');
016				w.document.write('	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">\n');
017				w.document.write('</HEAD>\n');
018				w.document.write('<BODY CLASS="white">\n');
019						// 名前
020				form.elements[0].value = "山田 太郎";
021				w.document.write(form.elements[0].value + '<BR>');
022						// 性別
023				form.elements[1].click();
024				w.document.write(form.elements[1].checked + '<BR>');
025				w.document.write(form.elements[2].checked + '<BR>');
026						// 好きな野菜
027				form.elements[3].click();
028				form.elements[5].click();
029				form.elements[6].click();
030				w.document.write(form.elements[3].checked + '<BR>');
031				w.document.write(form.elements[4].checked + '<BR>');
032				w.document.write(form.elements[5].checked + '<BR>');
033				w.document.write(form.elements[6].checked + '<BR>');
034						// 好きな果物
035				w.document.write(form.elements[7].options[0].selected + '<BR>');
036				w.document.write(form.elements[7].options[1].selected + '<BR>');
037				w.document.write(form.elements[7].options[2].selected + '<BR>');
038				w.document.write('</BODY>\n');
039				w.document.write('</HTML>\n');
040			}
041	
042			function soshin2(form)
043			{
044				let w = window.open("", "送信されたデータ");
045				w.document.open();
046				w.document.write('<HTML>\n');
047				w.document.write('<HEAD>\n');
048				w.document.write('	<TITLE>表示結果</TITLE>\n');
049				w.document.write('	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">\n');
050				w.document.write('	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">\n');
051				w.document.write('</HEAD>\n');
052				w.document.write('<BODY CLASS="white">\n');
053						// 名前
054				form.name.value = "鈴木 花子";
055				w.document.write(form.name.value + '<BR>');
056						// 性別
057				form.elements[2].click();
058				w.document.write(form.elements[1].checked + '<BR>');
059				w.document.write(form.elements[2].checked + '<BR>');
060						// 好きな野菜
061				form.v1.click();
062				form.v3.click();
063				form.elements[6].click();
064				w.document.write(form.v1.checked + '<BR>');
065				w.document.write(form.elements[4].checked + '<BR>');
066				w.document.write(form.v3.checked + '<BR>');
067				w.document.write(form.elements[6].checked + '<BR>');
068						// 好きな果物
069				w.document.write(form.list.options[0].selected + '<BR>');
070				w.document.write(form.list.options[1].selected + '<BR>');
071				w.document.write(form.list.options[2].selected + '<BR>');
072				w.document.write('</BODY>\n');
073				w.document.write('</HTML>\n');
074			}
075		</SCRIPT>
076	</HEAD>
077	<BODY CLASS="white">
078		<H1 CLASS="center">フォームの例</H1>
079		<FORM>
080			<LABEL>名前: </LABEL>
081				<INPUT TYPE="text" NAME="name" STYLE="font-size: 100%"><BR>
082			性別：<BR>
083			　　<INPUT TYPE="radio" NAME="sex" VALUE="Male"> 男性<BR>
084			　　<INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
085			好きな野菜：<BR>
086		　　	<INPUT TYPE="checkbox" NAME="v1" VALUE="n1"> キャベツ<BR>
087		　　	<INPUT TYPE="checkbox"> 大根<BR>
088		　　	<INPUT TYPE="checkbox" NAME="v3"> ジャガイモ<BR>
089		　　	<INPUT TYPE="checkbox"> トマト<BR>
090			好きな果物：<BR>
091			　　<SELECT MULTIPLE SIZE="3" NAME="list" STYLE="font-size: 100%">
092				　　<OPTION VALUE="f1"> 蜜柑 </OPTION><BR>
093				　　<OPTION> 林檎 </OPTION><BR>
094				　　<OPTION> 葡萄 </OPTION><BR>
095			　　</SELECT>
096			<P CLASS="center">
097				<INPUT TYPE="button" STYLE="font-size: 100%" VALUE="送信１" onClick="soshin1(this.form)">　
098				<INPUT TYPE="button" STYLE="font-size: 100%" VALUE="送信２" onClick="soshin2(this.form)">　
099				<INPUT TYPE="reset" STYLE="font-size: 100%" VALUE="リセット">
100			</P>
101		</FORM>
102	</BODY>
103	</HTML>
				
```
010 行目

　　新しい Window を生成している，以下，そこにタグや表示内容を出力している．

020 行目～ 021 行目

　　フォーム内の最初の要素（ 081 行目の INPUT 要素）に値を設定し，それを書き出している．

023 行目～ 025 行目

　　フォーム内の 2 番目及び 3 番目の要素で，ラジオボタンを構成している（ 083，084 行目）．023 行目において，2 番目の要素（男）をクリックした状態にした後，024 行目及び 025 行目において，各要素の状態を出力している．

027 行目～ 033 行目

　　フォーム内の 4 番目～ 7 番目の要素で，チェックボックスを構成している（ 086 行目～ 089 行目）．027 行目～ 029 行目において，4 番目，6 番目，及び，7 番目の要素（キャベツ，ジャガイモ，トマト）をクリックした状態にした後，030 行目～ 033 行目において，各要素の状態を出力している．

035 行目～ 037 行目

　　フォーム内の 8 番目の要素はドロップダウンリストである（ 091 行目～ 095 行目）．ここでは，各オプションの状態を出力している．

054 行目～ 055 行目

　　フォーム内の最初の要素（ 081 行目の INPUT 要素）に，その NAME 属性を利用して値を設定し，それを書き出している．

057 行目～ 059 行目

　　フォーム内の 2 番目及び 3 番目の要素で，ラジオボタンを構成している（ 083，084 行目）．057 行目において，3 番目の要素（女）をクリックした状態にした後，058 行目及び 059 行目において，各要素の状態を出力している．この場合は，上の場合のように，NAME 属性を利用した設定は不可能である．

061 行目～ 067 行目

　　フォーム内の 4 番目～ 7 番目の要素で，チェックボックスを構成している（ 086 行目～ 089 行目）．061 行目～ 063 行目において，4 番目，6 番目，及び，7 番目の要素（キャベツ，ジャガイモ，トマト）をクリックした状態にした後，064 行目～ 067 行目において，各要素の状態を出力している．その際，NAME 属性が設定されている場合はそれを利用しているが，そうでない場合は，elements を利用している．

069 行目～ 071 行目

　　フォーム内の 8 番目の要素はドロップダウンリストである（ 091 行目～ 095 行目）．ここでは，SELECT 要素に設定されている NAME 属性を利用して，各オプションの状態を出力している．

097 行目

　　INPUT 要素の onClick 属性を利用し，このボタンをクリックすると，関数 soshin1 （ 008 行目～ 040 行目）が，現在のフォームを引数として呼ばれるように設定している．

098 行目

　　INPUT 要素の onClick 属性を利用し，このボタンをクリックすると，関数 soshin2 （ 042 行目～ 074 行目）が，現在のフォームを引数として呼ばれるように設定している．

099 行目

　　このボタンをクリックすると，設定された内容がリセットされる．

　　具体的な適用例として，HTML に対する説明で示した「演習問題の解答」を考えてみます．このページを表示し，何も入力しないまま「送信」ボタンをクリックしても，そのままサーバへデータが送られてしまいます（当然，誤った結果になりますが）．しかし，本来であれば，計算結果と名前を入力してから送るべきです．勿論，入力されていないか否かの判断はサーバ側でも可能ですが，クライアント側でチェックしてからサーバへ送信する方が妥当だと思います．

「演習問題の解答（チェック）」（下に示すのがそのソースコード）においては，データをサーバへ送信する前にデータが入力されているか否かのチェックを行い，入力されていない場合は，window オブジェクトの alert メソッドを利用して警告メッセージを出力し，データの送信を行いません．対応する C/C++ で記述した CGI プログラムのソースコードは，「演習問題の解答（チェック）」のソースコードに対する説明の下に示してあります（このサーバでは動作しません）．なお，C/C++ に関しては，「C/C++ と Java」を参照して下さい． 演習問題の解答（チェック）

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 check(form) {
09				if(form.ans.value =="") {
10					alert("答えを入力してください");   // ダイアログの表示
11					return false;
12				}
13				if(form.name.value =="") {
14					alert("名前を入力してください");   // ダイアログの表示
15					return false;
16				}
17			}
18		</SCRIPT>
19	</HEAD>
20	<BODY CLASS="white">
21		<H3 STYLE="text-align:center">次の問題の答えは？</H3>
22		<FORM ACTION="test_c.cgi" METHOD="post" ENCTYPE="text/plain">
23			<P STYLE="text-align:center">
24				3 + 4 = <INPUT TYPE="text" NAME="ans" STYLE="font-size:90%"><BR><BR>
25				名前:<INPUT TYPE="text" NAME="name" STYLE="font-size:90%">　　
26				<INPUT TYPE="submit" VALUE="送信" onClick="return check(this.form)" STYLE="font-size:90%"><BR>
27				<INPUT TYPE="hidden" NAME="a" VALUE="3">
28				<INPUT TYPE="hidden" NAME="b" VALUE="4">
29			</P>
30		</FORM>
31	</BODY>
32	</HTML>

09 行目～ 12 行目: 　　答えが入力されているか否かのチェックを行っている．
13 行目～ 16 行目: 　　名前が入力されているか否かのチェックを行っている．
26 行目: 　　「送信」ボタンがクリックされたとき，そのまま送信するのではなく，関数 check （ 08 行目～ 17 行目）を呼ぶように設定している．この結果，答えや名前が入力されていないと送信されず，警告ダイアログが表示されることになる．

C/C++ で記述した CGI プログラム

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

int URLdecode(char* Data, int len)
{
	int i, j, sw = 0;
	char Buf,*Tmp;

	if(len == 0)
		sw = -1;
	else {
		Tmp = new char [len];
		for(i = 0,j = 0; i < len; i++,j++) {
			if(Data[i] == '+')
				Tmp[j] = ' ';
			else {
				if(Data[i] != '%')
					Tmp[j] = Data[i];
				else {
					if (Data[++i] >= 'A')
						Buf = Data[i] - 'A' + 10;
					else
						Buf = Data[i] - '0';
					Buf *= 16;
					if (Data[++i] >= 'A')
						Buf += Data[i] - 'A' + 10;
					else
						Buf += Data[i] - '0';
					Tmp[j] = Buf;
				}
			}
		}

		for(i = 0; i < j; i++)
			Data[i] = Tmp[i];
		Data[i] = '\0';

		delete [] Tmp;
	}

	return sw;
}

int main()
{
	int a, b, c;
	char in[100], ans[100], name[100], p1[100], p2[100], *str, *pos;
	printf("Content-type: text/html\n\n");
	printf("<HTML>\n");
	printf("<HEAD>\n");
	printf("	<TITLE>答えのチェック</TITLE>\n");
	printf("	<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=utf-8\">\n");
	printf("	<LINK REL=\"stylesheet\" TYPE=\"text/css\" HREF=\"../../../master.css\">\n");
	printf("	<SCRIPT TYPE=\"text/javascript\">\n");
	printf("		function check(form) {\n");
	printf("			if(form.ans.value ==\"\") {\n");
	printf("				alert(\"答えを入力してください\");\n");
	printf("				return false;\n");
	printf("			}\n");
	printf("			if(form.name.value ==\"\") {\n");
	printf("				alert(\"名前を入力してください\");\n");
	printf("				return false;\n");
	printf("			}\n");
	printf("		}\n");
	printf("	</SCRIPT>\n");
	printf("</HEAD>\n");
	printf("<BODY CLASS=\"white\">\n");
	scanf("%s", in);
	if (strstr(in,"&") != NULL) {
		str = &in[0];
		pos = strtok(str, "&\r\n");
		strcpy(ans, pos);
		URLdecode(ans, strlen(ans));
		str = NULL;
		pos = strtok(str, "&\r\n");
		strcpy(name, pos);
		URLdecode(name, strlen(name));
		str = NULL;
		pos = strtok(str, "&\r\n");
		strcpy(p1, pos);
		URLdecode(p1, strlen(p1));
		str = NULL;
		pos = strtok(str, "&\r\n");
		URLdecode(p2, strlen(p2));
		strcpy(p2, pos);
		str = NULL;
	}
	else {
		strcpy(ans, in);
		scanf("%s", name);
		scanf("%s", p1);
		scanf("%s", p2);
	}
	a = atoi(&p1[2]);
	b = atoi(&p2[2]);
	c = atoi(&ans[4]);
	if (a+b == c) {
		printf("	<H3 STYLE=\"text-align:center\">%s さん，正解です！</H3>\n", &name[5]);
		printf("	<H3 STYLE=\"text-align:center\">続いて，次の問題の答えは？</H3>\n");
		srand(c);
		a = (int)(100.0 * (double)rand() / RAND_MAX);
		b = (int)(100.0 * (double)rand() / RAND_MAX);
	}
	else {
		printf("	<H3 STYLE=\"text-align:center\">%s さん，間違っています！</H3>\n", &name[5]);
		printf("	<H3 STYLE=\"text-align:center\">もう一度計算してみて下さい</H3>\n");
	}
	printf("	<FORM ACTION=\"test_c.cgi\" METHOD=\"post\" ENCTYPE=\"text/plain\">\n");
	printf("		<P STYLE=\"text-align:center\">\n");
	printf("			%d + %d = <INPUT TYPE=\"text\" NAME=\"ans\" STYLE=\"font-size:90%%\"><BR><BR>\n", a, b);
	printf("			名前:<INPUT TYPE=\"text\" NAME=\"name\" STYLE=\"font-size:90%%\">　　\n");
	printf("			<INPUT TYPE=\"submit\" VALUE=\"送信\" onClick=\"return check(this.form)\" STYLE=\"font-size:90%%\"><BR>\n");
	printf("			<INPUT TYPE=\"hidden\" NAME=\"a\" VALUE=\"%d\">\n", a);
	printf("			<INPUT TYPE=\"hidden\" NAME=\"b\" VALUE=\"%d\">\n", b);
	printf("		</P>\n");
	printf("	</FORM>\n");
	printf("</BODY>\n");
	printf("</HTML>\n");
	return 0;
}

ラジオボタン，チェックボックス，ドロップダウンリスト（確認）

入力すべきところはすべて入力しても，場合によっては，誤って入力してしまう場合もあります．インターネットショッピングのような場合であれば，自分の希望しない商品が送られてくるようなことになります．そこで，重要な内容に関しては，送信内容を確認してから送信するようにすべきです．HTML に対する説明で示した「ラジオボタン，チェックボックス，ドロップダウンリストの例」を，入力されたか否かのチェックをした後，その内容を確認してから送信するように window オブジェクトの confirm メソッドを利用して修正してみます．実際に，「送信内容の確認」を表示して実行してみてください．もちろん，このような機能は，CGI を利用しても可能ですが，データが少ないような場合は，応答性の早さからいって JavaScript で記述した方が適切だと思います． 送信内容の確認

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			sw1 = 0;
09			sw2 = 0;
10			sw3 = 0;
11			function sel(sw) {
12				if (sw == 1)
13					sw1 = 1;
14				else if (sw == 2)
15					sw2 = 1;
16				else
17					sw3 = 1;
18			}
19			function check(form) {
20				if (sw1 == 0) {
21					alert("性別を選択してください");
22					return false;
23				}
24				else if (sw2 == 0) {
25					alert("好きな野菜を選択してください");
26					return false;
27				}
28				else if (sw3 == 0) {
29					alert("好きな果物を選択してください");
30					return false;
31				}
32				else if(form.name.value =="") {
33					alert("名前を入力してください");
34					return false;
35				}
36				else {
37					let str = "名前： "+form.name.value+"\n";
38					if (form.elements[1].checked)
39						str += "性別： 男性\n";
40					else
41						str += "性別： 女性\n";
42					str += "好きな野菜：";
43					if (form.c1.checked)
44						str += "　キャベツ";
45					if (form.c2.checked)
46						str += "　大根";
47					if (form.c3.checked)
48						str += "　ジャガイモ";
49					if (form.c4.checked)
50						str += "　トマト";
51					str += "\n";
52					str += "好きな果物：";
53					if (form.list.options[0].selected)
54						str += "　蜜柑";
55					else if (form.list.options[1].selected)
56						str += "　林檎";
57					else
58						str += "　葡萄";
59					let result = confirm(str);
60					if (result == true)
61						return true;
62					else
63						return false;
64				}
65			}
66		</SCRIPT>
67	</HEAD>
68	<BODY CLASS="white">
69		<H1 STYLE="text-align: center">送信内容の確認</H1>
70		<FORM ACTION="radio.php" METHOD="post">
71			<DL>
72				<DT>名前: <INPUT TYPE="text" NAME="name" STYLE="font-size:90%">
73				<DT>性別：
74				<DD><INPUT TYPE="radio" NAME="sex" VALUE="Male" onClick="sel(1)">男性
75				<DD><INPUT TYPE="radio" NAME="sex" VALUE="Female" onClick="sel(1)">女性
76				<DT>好きな野菜：
77				<DD><INPUT TYPE="checkbox" NAME="c1" onClick="sel(2)">キャベツ
78				<DD><INPUT TYPE="checkbox" NAME="c2" onClick="sel(2)">大根
79				<DD><INPUT TYPE="checkbox" NAME="c3" onClick="sel(2)">ジャガイモ
80				<DD><INPUT TYPE="checkbox" NAME="c4" onClick="sel(2)">トマト
81				<DT>好きな果物：
82				<DD><SELECT NAME="list" onClick="sel(3)" STYLE="font-size:90%">
83					<OPTION VALUE="s1">蜜柑</OPTION>
84					<OPTION VALUE="s2">林檎</OPTION>
85					<OPTION VALUE="s3">葡萄</OPTION>
86				</SELECT>
87			</DL>
88			<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" onClick="return check(this.form)" STYLE="font-size:90%"></P>
89		</FORM>
90	</BODY>
91	</HTML>

11 行目～ 18 行目: 　　ラジオボタン，チェックボックス，及び，ドロップダウンリストの項目が選択されたとき呼ばれる関数である．ラジオボタンの項目が選択されると sw1 の値が 1 に，チェックボックスの項目が選択されると sw2 の値が 1 に，また，ドロップダウンリストの項目が選択されると sw3 の値が 1 に設定される．08 行目～ 10 行目において，sw1，sw2，及び，sw3 の値はすべて 0 に設定されているため，これらの値によって，各項目が選択されていることの確認が可能になる．
19 行目～ 65 行目: 　　「送信」ボタンがクリックされたとき，呼ばれる関数である．20 行目～ 31 行目においては，ラジオボタン，チェックボックス，及び，ドロップダウンリストの項目が選択されているか否かを調べ，32 行目～ 35 行目において，名前が入力されているか否かをチェックしている．37 行目以降はすべての項目が入力されている場合に対する処理であり．入力された項目を文字列 str に設定し，59 行目の confirm メソッドで確認を行っている．確認の結果，OK であれば，CGI プログラム radio.php にデータが送信される．

　　なお，上の例においては，CGI プログラム（ radio.php ）は PHP で記述されており，そのソースコードは以下に示す通りです．送られてきたデータを表示するだけですが，実行可能です．なお，PHP に関しては，「 PHP 」を参照して下さい（対応する例：ラジオボタン，チェックボックス，ドロップダウンリスト）．

<!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 STYLE="text-align: center">送信されたデータ</H1>
<?php
	printf("		名前： %s<BR>\n", $_POST['name']);
	printf("		性別： %s<BR>\n", $_POST['sex']);
	printf("		好きな野菜 c1 ： %s<BR>\n", $_POST['c1']);
	printf("		好きな野菜 c2 ： %s<BR>\n", $_POST['c2']);
	printf("		好きな野菜 c3 ： %s<BR>\n", $_POST['c3']);
	printf("		好きな野菜 c4 ： %s<BR>\n", $_POST['c4']);
	printf("		好きな果物： %s<BR>\n", $_POST['list']);
?>
</BODY>
</HTML>

URL のパラメータ

　　CGI の目的は，サーバにデータを送信し，そこで何らかの処理を行い，その結果を別のページで表示することです．単に，特定のデータを指定したページに受け渡すだけであれば，下に示す例のように，URL の最後に ? をつけて受け渡したいパラメータを記述することによって可能です．ここをクリックすると，

<A HREF="form/para.htm?par1=10&par2=abc">

という記述によって，2 つのパラメータを para.htm に送っています．para.htm は，受け取ったパラメータを表示しているだけであり，CGI プログラムとほとんど同じ処理を行っています．ただし，受け取ったデータをディスクへ保存するようなことはできません． para.htm

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>データの受け渡し</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<SCRIPT TYPE="text/javascript">
		function GetParameter()
		{
			let result = new Array();
			if(1 < window.location.search.length) {
							// 最初の1文字 (?記号) を除いた文字列を取得する
				let str = window.location.search.substring(1);
							// 区切り記号 (&) で文字列を配列に分割する
				let param = str.split('&');
				for(var i1 = 0; i1 < param.length; i1++ ) {
							// パラメータ名とパラメータ値に分割する
					let element = param[i1].split('=');
					let Name    = decodeURIComponent(element[0]);
					let Value   = decodeURIComponent(element[1]);
							// パラメータ名をキーとして連想配列に追加する
					result[Name] = Value;
				}
			}
    		return result;
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">送信されたデータ</H1>
	<SCRIPT TYPE="text/javascript">
		let result = GetParameter();
		document.write(result['par1'] + "<BR>");
		document.write(result['par2'] + "<BR>");
	</SCRIPT>
</BODY>
</HTML>

クッキーと JavaScript

クッキーとその利用方法
　　ローカルな環境にデータを保存する機能としてクッキー（ Cookie ）が存在します．クッキーには，最大データ量（ 4 KB ）や最大データ数（ 20 ）が少ない，自動的にサーバに送信される，ウィンドウ間で共有可能，有効期限を指定できる，などの特徴があります．

　　Web Storage （ sessionStorage，localStorage ）は，最大データ量（オリジン単位で，5 ～ 10 MB ）や最大データ数（無制限）が大きく，意図的に送信しない限り，データはサーバに送信されません．sessionStorage は，ウィンドウやタブ間でデータの共有は不可能であり，ウィンドウやタブが閉じられた時点で消滅します．また，localStorage では，オリジン単位でデータを永続的に保存し，ウィンドウやタブ間でデータを共有することが可能です．なお，オリジンとは，プロトコル（ http:// ） + ドメイン（ www.sist.ac.jp ） + ポート番号（ 80 ）の組合せのことです．

　　ここでは，クッキーについて説明します．ブラウザは，サーバーにアクセスする際にページの情報と一緒に送られてくる Cookie 情報，Web ページ上のスクリプトなどから設定された Cookie 情報，をコンピュータ内に保存しておきます．Cookie は，ドメイン名やサーバー上のパス（ディレクトリ）などによって整理されており，アクセス先のサーバーに関連した情報が Cookie として保存されている場合，ページを読み込む際にその Cookie の情報をサーバーに送信します．Cookie への書き込み，また，Cookie の読み込み方法としては以下のような方法があります．
1. JavaScript による方法
  
  　　document オブジェクトのプロパティ cookie を利用して，
  
  document.cookie = "・・・":
  
  の形で書き込み，また，document.cookie の値を参照することによってその内容を知ることができます．ここでは，JavaScript によって書き込み，かつ，読み込み，読み込んだ結果を JavaScript の alert 関数で表示しています．なお，「・・・」に記述する内容は，以下に示すとおりです．
  1. NAME=値：クッキーに設定する値．「,」「;」「半角スペース」は使用しないこと．識別する必要がなければ，NAME= の部分は任意であり，値だけでも良い．
  2. expires=値：クッキーの有効期限．例えば，
    
    Thu, 1-Jan-2030 00:00:00 GMT
    
    のように指定する．設定しないと，ブラウザを閉じるときが有効期限となる．
  3. domain=値：クッキーが有効なドメイン．例えば，URLが
    
    https://www.sist.ac.jp/~suganuma/home/
    
    のような場合は，「www.sist.ac.jp」を設定する．
  4. path=値：クッキーを有効としたいパス．指定したパス以下のディレクトリで有効となる．例えば，URLが
    
    https://www.sist.ac.jp/~suganuma/home/
    
    のような場合は，「/~suganuma/home/」などを設定する．設定しない場合は，値をセットしたときのカレントディレクトリになる．
  5. secure：記述するとセキュアな HTTPS 接続の場合にのみクッキーが送信されるようになる．
  （書き込み） <!DOCTYPE HTML> <HEAD> <TITLE>cookie への書き込み（ JavaScript ）</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">cookie への書き込み（ JavaScript ）</H1> <SCRIPT TYPE="text/javascript"> document.cookie = "article=data1:data2(JavaScript); path=/~suganuma/home/web_design/JavaScript/cookie/method/"; </SCRIPT> </BODY> </HTML> （読み込み） <!DOCTYPE HTML> <HEAD> <TITLE>cookie の読み込み（ JavaScript ）</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">cookie の読み込み（ JavaScript ）</H1> <SCRIPT TYPE="text/javascript"> alert(document.cookie); </SCRIPT> </BODY> </HTML>
2. HTML の META 要素による方法
  
  　　HTML の META 要素を利用して
  
  <META HTTP-EQUIV="Set-Cookie" CONTENT="・・・">
  
  のようにして書き込みます．ここでは，META 要素によって書き込み，そして，JavaScript で読み込んだ内容を alert 関数で表示しています．なお，「・・・」に記述する内容は，JavaScript の場合と同様です．
  （書き込み） <!DOCTYPE HTML> <HEAD> <TITLE>cookie への書き込み（ meta ）</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">  <META HTTP-EQUIV="Set-Cookie" CONTENT="article=data1:data2(meta); path=/~suganuma/home/web_design/JavaScript/cookie/method/"> </HEAD> <BODY CLASS="white"> <H1 CLASS="center">cookie への書き込み（ meta ）</H1> </BODY> </HTML> （読み込み） <!DOCTYPE HTML> <HEAD> <TITLE>cookie の読み込み（ JavaScript ）</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">cookie の読み込み（ JavaScript ）</H1> <SCRIPT TYPE="text/javascript"> alert(document.cookie); </SCRIPT> </BODY> </HTML>
3. CGI ( C/C++ ) による方法
  
  　　例えば，C/C++ の場合は，
  
  printf("Content-type: text/html\n");
  
  printf("Set-Cookie: ・・・\n\n");
  
  のような方法で書き込みます．なお，「・・・」に記述する内容は，JavaScript の場合と同様です．書き込み，及び，読み込みは，C/C++ の CGI で行っています（各々，実行する際は，「送信」ボタンをクリックしてください．なお，このサーバでは動作しません）．また，読み込みの際は，環境変数全体を出力しています．具体的なプログラムは以下に示すとおりです．なお，C/C++ に関しては，「C/C++ と Java」を参照して下さい．
  （書き込み） // HTML <!DOCTYPE HTML> <HEAD> <TITLE>cookie への書き込み（ CGI(C++) ）</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">cookie への書き込み（ CGI(C++) ）</H1> <FORM ACTION="cookie_wc.cgi" METHOD="post" ENCTYPE="text/plain"> <P CLASS="center"> <INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"> </P> </FORM> </BODY> </HTML> // cookie_wc.cgi #include <stdio.h> int main() { printf("Content-type: text/html\n"); printf("Set-Cookie: article=data1:data2(C++); path=/~suganuma/home/web_design/JavaScript/cookie/method/\n\n"); printf("<html><head><title>CGI(C++)</title></head><body>\n"); printf("<h1 style=\"text-align: center\">CGI(C++)</h1>\n"); printf("</body></html>\n"); return 0; } （読み込み） // HTML <!DOCTYPE HTML> <HEAD> <TITLE>cookie の読み込み（ CGI(C++) ）</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">cookie の読み込み（ CGI(C++) ）</H1> <FORM ACTION="cookie_rc.cgi" METHOD="post" ENCTYPE="text/plain"> <P CLASS="center"> <INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"> </P> </FORM> </BODY> </HTML> // cookie_rc.cgi #include <stdio.h> int main(int argc, char *argv[], char *envp[]) { int i1 = 0; printf("Content-type: text/html\n\n"); printf("<html><head><title>CGI(C++)</title></head><body>\n"); printf("<h1 style=\"text-align: center\">CGI(C++)</h1><dl>\n"); while (envp[i1] != NULL) { printf("<dt>%d %s\n", i1+1, envp[i1]); i1++; } printf("</dl></body></html>\n"); return 0; }
4. PHP による方法
  
  　　setcookie 関数を利用して書き込み，その内容は定義済み変数 $_COOKIE を通して参照できます．この例では，setcookie によって書き込み，読み込みでは，変数 $_COOKIE の内容を print_r で表示しています．ここで，setcookie 関数の引数の意味は以下に示すとおりです．なお，PHP に関しては，「 PHP 」を参照して下さい．
  1. name：クッキーの名前
  2. value：クッキーに設定する値．「,」「;」「半角スペース」は使用しないこと．
  3. expire：クッキーの有効期限．UNIX 標準時（ 1970 年 1 月 1 日）からの秒数．設定しないと，ブラウザを閉じるときが有効期限となる．
  4. path：クッキーを有効としたいパス．指定したパス以下のディレクトリで有効となる．例えば，URLが「https://www.sist.ac.jp/~suganuma/home/」のような場合は，「/~suganuma/home/」などを設定する．設定しない場合は，値をセットしたときのカレントディレクトリになる．
  5. domain：クッキーが有効なドメイン．例えば，URLが「https://www.sist.ac.jp/~suganuma/home/」のような場合は，「www.sist.ac.jp」を設定する．
  6. secure： 1 をセットするとセキュアな HTTPS 接続の場合にのみクッキーが送信されるようになる．デフォルトは 0 である．
  （書き込み） <?php setcookie("test", "article=data1:data2(PHP)", 0, "/~suganuma/home/web_design/JavaScript/cookie/method/"); ?> <!DOCTYPE HTML> <HEAD> <TITLE>cookie への書き込み（ PHP ）</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">cookie への書き込み（ PHP ）</H1> </BODY> </HTML> （読み込み） <!DOCTYPE HTML> <HEAD> <TITLE>cookie の読み込み（ PHP ）</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">cookie の読み込み（ PHP ）</H1> <?php print_r($_COOKIE); ?> </BODY> </HTML>

クッキーの利用例（ショッピング）

　　一般に，ショッピングサイトでは，複数のページに亘って商品の説明があり，それらのページで購入された商品は一つの買い物カゴに入れられ，最終的に購入することになります．この機能を実現するためには，各ページ間（特に，商品のページと買い物カゴのページ間）で情報を交換する必要があります．その際に，サーバ側またはクライアント側において，一時的にディスクにデータを保存し，そのデータを各ページから参照する方法が良く使用されます．クライアント側でそれを実現する唯一の方法がクッキーです．なお．PHP には，クッキーと同様，サーバとクライアント間において複数回やりとりした情報を一時的に保存するための機能が存在しますが，詳細については PHP の定義済み変数 $_SESSION に対する説明を参照して下さい．．

　　以下，例に基づいてクッキーを利用する方法についてみていきます．商品一覧のページ（ article.html ）において，購入数を入力した後「カゴに入れる」ボタンをクリックすると，関数 cart_in が呼ばれ確認メッセージが表示されます．その際，「 OK 」ボタンをクリックすると，関数 cookie_change が呼ばれます．cookie_change では，購入した商品情報に基づきクッキーの内容を変更します．クッキーの内容は，

article=商品数:型番:商品名:価格:購入数:・・・

のようになっており，「:型番:商品名:価格:購入数」の部分が商品数だけ繰り返されます．

　　「買い物カゴを見る」部分をクリックすると，cart.html に移動し，

のように，それまでに購入した商品（買い物カゴの内容）を見ることができます．これらの処理は，関数 cart_content で行っています．また，商品の購入をやめたり（左側のチェックボックスのチェックを外す），購入数を変更することが可能です．これらの操作を行うと，関数 sel_c が呼ばれ，クッキー内容の修正が行われます．

　　「購入」ボタンをクリックすると，関数 trans によって購入商品の確認が行われた後，FORM 要素の ACTION 属性に記述されたページ oreder.php に移動します．oreder.php は，単に，購入した商品を表示するだけの機能を持った PHP のプログラムです．なお，PHP に関しては，「 PHP 」を参照して下さい．さらに，「買い物情報クリア」ボタンをクリックすればクッキー内容のクリアが，また，「商品一覧へ」の部分をクリックすればさらに買い物を続けることが可能です．

　　以上述べた関係を図で示すと以下のようになります．

以下に示すのは，各ページ及びそこで使用されている関数のプログラムです． article.html：商品の選択

01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>商品一覧</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
06		<SCRIPT SRC="control.js" TYPE="text/javascript"></SCRIPT>
07	</HEAD>
08	<BODY CLASS="white" STYLE="text-align: center">
09		<TABLE STYLE="margin-left: auto; margin-right: auto">
10			<TR>
11				<TD>
12					<DIV STYLE="width: 350px; margin-left: auto; margin-right: auto">
13						<H2>商品001</H2>
14						<IMG SRC="cat01-001.jpg" WIDTH="300">
15						<FORM>
16							<TABLE STYLE="text-align: left; margin-left: auto; margin-right: auto">
17								<TR>
18									<TH>型番</TH>
19									<TD>001-01<INPUT TYPE="hidden" NAME="type" VALUE="001-01"></TD>
20								</TR>
21								<TR>
22									<TH>商品名</TH>
23									<TD>商品001<INPUT TYPE="hidden" NAME="name" VALUE="商品001"></TD>
24								</TR>
25								<TR>
26									<TH>定価</TH>
27									<TD>2,800円(税込)</TD>
28								</TR>
29								<TR>
30									<TH>販売価格</TH>
31									<TD CLASS="osusumeprice">2,800円(税込)<INPUT TYPE="hidden" NAME="price" VALUE="2800"></TD>
32								</TR>
33								<TR>
34									<TH>購入数</TH>
35									<TD STYLE="padding: 0px 5px;"><INPUT TYPE="text" NAME="num" VALUE="1" STYLE="width: 50px;"></TD>
36								</TR>
37							</TABLE>
38							<BR>
39							<INPUT onClick="return cart_in(this.form)" TYPE="image" VALUE="カートに入れる" SRC="cartin.gif" ALT="かごに入れる" WIDTH="115" HEIGHT="25">
40						</FORM>
41					</DIV>
42				</TD>
43				<TD>
44					<DIV STYLE="width: 350px; margin-left: auto; margin-right: auto">
45						<H2>商品002</H2>
46						<IMG SRC="cat01-002.jpg" WIDTH="300">
47						<FORM>
48							<TABLE STYLE="text-align: left; margin-left: auto; margin-right: auto">
49								<TR>
50									<TH>型番</TH>
51									<TD>001-02<INPUT TYPE="hidden" NAME="type" VALUE="001-02"></TD>
52								</TR>
53								<TR>
54									<TH>商品名</TH>
55									<TD>商品002<INPUT TYPE="hidden" name="name" VALUE="商品002"></TD>
56								</TR>
57								<TR>
58									<TH>定価</TH>
59									<TD>4,200円(税込)</TD>
60								</TR>
61								<TR>
62									<TH>販売価格</TH>
63									<TD CLASS="osusumeprice">4,200円(税込)<INPUT TYPE="hidden" NAME="price" VALUE="4200"></TD>
64								</TR>
65								<TR>
66									<TH>購入数</TH>
67									<TD STYLE="padding: 0px 5px;"><INPUT TYPE="text" NAME="num" VALUE="1" STYLE="width: 50px;"></TD>
68								</TR>
69							</TABLE>
70							<BR>
71							<INPUT onClick="return cart_in(this.form)" TYPE="image" VALUE="カートに入れる" SRC="cartin.gif" ALT="かごに入れる" WIDTH="115" HEIGHT="25">
72						</FORM>
73					</DIV>
74				</TD>
75			</TR>
76		</TABLE>
77		<BR>
78		<DIV><A HREF="cart.html">買い物カゴを見る</A></DIV>
79	</BODY>
80	</HTML>

　　11 行目～ 42 行目，及び，43 行目～ 74 行目が，各々一つの商品情報に対応している．従って，以下で行っている 11 行目～ 42 行目内に対する説明は，他の商品に対しても同様である．
19，23，31 行目: 　　これらの行に記述されている INPUT 要素は，TYPE 属性として hidden が設定されているため，ブラウザ上には表示されないが，それぞれ，関数 cart_in から，型番，商品名，及び，販売価格に対する情報を得るために使用されている．ただし，購入数に対しては，35 行目に示すように，TYPE 属性として text を設定し，ユーザがその値を変更できるようになっている．
39 行目: 　　「カゴに入れる」ボタンをクリックすると，関数 cart_in が呼ばれ，カゴに入れようとしている商品の確認が行われる．
78 行目: 　　「買い物カゴを見る」ボタンをクリックすると，買い物カゴの内容を表示するページ（ cart.html ）に移動する．

cart.html：買い物カゴの中身の表示

01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>買い物カゴ</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
06		<SCRIPT SRC="control.js" TYPE="text/javascript"></SCRIPT>
07	</HEAD>
08	<BODY CLASS="white">
09		<H2 CLASS="center">買い物カゴ</H2>
10		<SCRIPT TYPE="text/javascript">
11			cart_content();   // 買い物カゴの中身を表形式で表示する関数
12		</SCRIPT>
13	</BODY>
14	</HTML>

control.js：使用されている JavaScript の関数

001	n_get  = 0;   // 商品数
002	type   = new Array();   // 型番
003	p_name = new Array();   // 商品名
004	num    = new Array();   // 購入数
005	price  = new Array();   // 価格
006	sum    = new Array();   // 価格 * 購入数
007	
008	/**************************/
009	/* カゴへ入れた内容の確認 */
010	/**************************/
011	function cart_in(form)
012	{
013		let str = "型番： " + form.type.value + "\n" +
014	          "商品名： " + form.name.value + "\n" +
015	          "価格： " + form.price.value + " 円\n" +
016	          "購入数： " + form.num.value + "\nよろしいですか?";
017		if (!confirm(str))
018			return false;
019		else
020			cookie_change(form.type.value, form.name.value, form.price.value, form.num.value);
021	}
022	
023	/**************************/
024	/* 買い物カゴの中身の変更 */
025	/**************************/
026	function cookie_change(type1, p_name1, price1, num1)
027	{
028						// カートの内容を保存したクッキーの読み込み
029		if (document.cookie != "") {
030			let part1 = document.cookie.split(";");
031			n_get     = 0;
032			for (let i0 = 0; i0 < part1.length; i0++) {
033				let k = part1[i0].indexOf("article=");
034				if (k >= 0) {
035					let part = part1[i0].split(":");
036					k        = part[0].indexOf("article=");
037					n_get    = parseInt(part[0].substr(k+8,part[0].length-k-8));
038					let m    = 1;
039					for (let i1 = 0; i1 < n_get; i1++) {
040						type[i1]   = part[m];
041						p_name[i1] = part[m+1];
042						num[i1]    = part[m+2];
043						price[i1]  = part[m+3];
044						m += 4;
045					}
046					break;
047				}
048			}
049		}
050						// カートに今回購入した商品を追加
051		if (type1 != "") {
052								// 整数への変換
053			let v = parseInt(price1);
054			let n = parseInt(num1);
055								// 同じ商品があるか？
056			let m = -1;
057			for (let i1 = 0; i1 < n_get && m < 0; i1++) {
058				if (type1 == type[i1] && p_name1 == p_name[i1])
059					m = i1;
060			}
061										// 同じ商品がある場合
062			if (m >= 0) {
063				let n1 = parseInt(num[m]) + n;
064				num[m] = n1;
065				sum[m] = n1 * v;
066			}
067										// 同じ商品がない場合
068			else {
069				m         = n_get;
070				type[m]   = type1;
071				p_name[m] = p_name1;
072				num[m]    = num1;
073				price[m]  = price1;
074				sum[m]    = n * v;
075				n_get++;
076			}
077								// クッキーへの書き込み
078			let str = "article=";
079			str    += n_get;
080			for (let i1 = 0; i1 < n_get; i1++) {
081				str += (":" + type[i1]);
082				str += (":" + p_name[i1]);
083				str += (":" + num[i1]);
084				str += (":" + price[i1]);
085			}
086			str += ";path=/~suganuma/home/web_design/JavaScript/cookie/shopping_cookie/";
087			document.cookie = str;
088		}
089	}
090	
091	/**************************/
092	/* 買い物カゴの中身の表示 */
093	/**************************/
094	function cart_content()
095	{
096						// カートの内容を保存したクッキーの読み込み
097		if (document.cookie != "") {
098			let part1 = document.cookie.split(";");
099			n_get     = 0;
100			for (let i0 = 0; i0 < part1.length; i0++) {
101				let k = part1[i0].indexOf("article=");
102				if (k >= 0) {
103					let part = part1[i0].split(":");
104					k        = part[0].indexOf("article=");
105					n_get    = parseInt(part[0].substr(k+8,part[0].length-k-8));
106					let m    = 1;
107					for (let i1 = 0; i1 < n_get; i1++) {
108						type[i1]   = part[m];
109						p_name[i1] = part[m+1];
110						num[i1]    = part[m+2];
111						price[i1]  = part[m+3];
112						m += 4;
113					}
114					break;
115				}
116			}
117		}
118						// 表示
119		document.write('						<FORM ACTION="order.php" METHOD="post" STYLE="text-align: center" TARGET="buy">\n');
120		document.write('							<TABLE ID="tbl" BORDER="1" STYLE="margin-right: auto; margin-left: auto">\n');
121		document.write('								<TR>\n');
122		document.write('									<TH>　</TH>\n');
123		document.write('									<TH>型番</TH>\n');
124		document.write('									<TH>商品名</TH>\n');
125		document.write('									<TH>価格</TH>\n');
126		document.write('									<TH>購入数</TH>\n');
127		document.write('									<TH>合計</TH>\n');
128		document.write('								</TR>\n');
129		let s = 0;
130		for (let i1 = 0; i1 < n_get; i1++) {
131			document.write('								<TR>\n');
132			document.write('									<TD><INPUT TYPE="checkbox" NAME="no' + i1 + '" CHECKED onClick="sel_c(this.form)"></TD>\n');
133			document.write('									<TD>' + type[i1] + '</TD>\n');
134			document.write('									<TD>' + p_name[i1] + '</TD>\n');
135			document.write('									<TD STYLE="text-align: right">' + price[i1] + '円</TD>\n');
136			document.write('									<TD><INPUT TYPE="text" NAME="num' + i1 + '" VALUE="' + num[i1] + '" SIZE="3" STYLE="text-align: right" onBlur="sel_c(this.form)"></TD>\n');
137			let v = parseInt(num[i1]) *  parseInt(price[i1]);
138			s    += v;
139			document.write('									<TD><INPUT TYPE="text" NAME="sum' + i1 + '" VALUE="' + v + '" READONLY SIZE="7" STYLE="text-align: right"></TD>\n');
140			document.write('								</TR>\n');
141		}
142		document.write('								<TR>\n');
143		document.write('									<TD COLSPAN="5">合計</TD>\n');
144		document.write('									<TD><INPUT TYPE="text" NAME="sum" VALUE="' + s + '" READONLY SIZE="7" STYLE="text-align: right"></TD>\n');
145		document.write('								</TR>\n');
146		document.write('							</TABLE>\n');
147		document.write('							<INPUT TYPE="hidden" NAME="order">\n');
148		document.write('							<BR>\n');
149		document.write('							<BUTTON TYPE="submit" STYLE="font-size: 90%; background-color: pink" ID="btn" onClick="return trans(this.form)">購入</BUTTON>　\n');
150		document.write('							<INPUT TYPE="button" VALUE="買い物情報クリア" STYLE="font-size: 90%; background-color: #eeffee" ID="clear" onClick="c_clear()">　\n');
151		document.write('							<A HREF="article.html">商品一覧へ</A>\n');
152		document.write('						</FORM>\n');
153	}
154	
155	/**************************/
156	/* 購入／購入しない       */
157	/* 購入個数               */
158	/*     を変えたときの処理 */
159	/**************************/
160	function sel_c(form)
161	{
162		let s = 0;
163		for (let i1 = 0; i1 < n_get; i1++) {
164			let c = eval("form.no" + i1);
165			if (c.checked) {
166				let n = eval("form.num" + i1);
167				if (n.value == "")
168					n.value = "0";
169				num[i1]   = n.value;
170				let v     = parseInt(num[i1]) *  parseInt(price[i1]);
171				let sm    = eval("form.sum" + i1);
172				sm.value  = v;
173				s        += v;
174			}
175			else {
176				num[i1]  = "0";
177				let n    = eval("form.num" + i1);
178				n.value  = "0";
179				let sm   = eval("form.sum" + i1);
180				sm.value = "0";
181			}
182		}
183		form.sum.value = s;
184						// cookie の変更
185		let str = "article=";
186		str    += n_get;
187		for (let i1 = 0; i1 < n_get; i1++) {
188			str += (":" + type[i1]);
189			str += (":" + p_name[i1]);
190			str += (":" + num[i1]);
191			str += (":" + price[i1]);
192		}
193		str += ";path=/~suganuma/home/web_design/JavaScript/cookie/shopping_cookie/";
194		document.cookie = str;
195	}
196	
197	/********/
198	/* 購入 */
199	/********/
200	function trans(form)
201	{
202		let str          = "";
203		let s            = 0;
204		form.order.value = "";
205		for (let i1 = 0; i1 < n_get; i1++) {
206			if (num[i1] > 0) {
207				let v = parseInt(num[i1]) *  parseInt(price[i1]);
208				str  += p_name[i1] + "： " + num[i1] + "個，" + v + "円\n";
209				s    += v;
210				if (form.order.value == "")
211					form.order.value = form.order.value + type[i1] + ":" + num[i1];
212				else
213					form.order.value = form.order.value + ":" + type[i1] + ":" + num[i1];
214			}
215		}
216		if (s > 0) {
217			str += "　　合計 " + s + "円\n\nよろしいですか?";
218			if (!confirm(str))
219				return false;
220			else
221				c_clear();
222		}
223		else {
224			alert("まだ，何も購入されていません！");
225			return false;
226		}
227	}
228	
229	/**********************/
230	/* 買い物情報のクリア */
231	/**********************/
232	function c_clear()
233	{
234		n_get = 0;
235		document.cookie = "article=0;path=/~suganuma/home/web_design/JavaScript/cookie/shopping_cookie/";
236		document.getElementById("tbl").style.display = "none";
237		document.getElementById("btn").style.display = "none";
238		document.getElementById("clear").style.display = "none";
239	}

001 行目～ 006 行目: 　　グローバル変数．コメントに記述されているようなデータが入る．
（関数：cart_in，カゴへ入れた内容の確認）
013 行目～ 016 行目: 　　型番，商品名，価格，購入数を文字列に代入
017 行目～ 020 行目: 　　上記の文字列からなる確認ダイアログを表示（ confirm ）し，「キャンセル」であれば何もしない（ 018 行目）．「 OK 」であれば，型番，商品名，価格，購入数を引数として関数 cookie_change を呼び出す（ 020 行目）．
（関数：cookie_change，買い物カゴの中身の変更．029 行目～ 049 行目において，現在記憶されているクッキーの内容を配列に保存し，051 行目以降において，新しく購入した商品情報をクッキーに記憶している）
030 行目: 　　先に述べたように，クッキーには，セミコロン「 ; 」で区切られ，様々な情報が記憶されている．ここでは，セミコロンで区切られた各情報を配列 part1 に代入している．
033 行目: 　　032 行目の for 文によって，配列 part1 の各要素に，「 article= 」という文字列が含まれている（クッキーに設定した値）か否かを調べている．含まれている場合は，035 行目～ 046 行目が実行される．
035 行目: 　　クッキーには，「article=商品数:型番:商品名:価格:購入数:型番:商品名:価格:購入数:・・・」のように，「:型番:商品名:価格:購入数」が商品の数だけ繰り返す形で商品情報が設定されている．ここでは，それらをコロン「 : 」で分離し，配列 part に代入している．
036 行目～037 行目: 　　part[0] には，「article=商品数」の部分が入っているはずである．この文字列から，「商品数」の部分を抜き出し，かつ，整数に変換し変数 n_get に代入している．
039 行目～045 行目: 　　配列 part に入っている残りの部分を，型番，商品名，価格，購入数を一組として抜き出し，各々を，配列 type，p_name，num，price に代入している．
053 行目～054 行目: 　　関数の引数で渡された price1 及び num1 を，整数に変換し，変数 n 及び v に代入している．
056 行目～060 行目: 　　関数の引数で渡された商品（型番 type1，商品名 p_name1 ）が既にクッキー内に記憶されているか否かを調べている．
062 行目～066 行目: 　　同じ商品があった場合は，購入個数を変更し，その商品全体の金額を計算している．
068 行目～076 行目: 　　同じ商品がなかった場合は，商品数を増加させると共に，配列 type，p_name，num，price に新しい商品を追加し，その商品全体の金額を計算している．
078 行目～087 行目: 　　クッキーに商品情報及びクッキーが有効なドメインを設定している．
（関数：cart_content，買い物カゴの中身の表示）
097 行目～117 行目: 　　関数 cookie_change の 029 行目～ 049 行目と同様，現在記憶されているクッキーの内容を変数 n_get，及び，配列 type，p_name，num，price に保存している．
120 行目～146 行目: 　　上で得られた情報を，表形式で表示している．132 行目において，チェックボックスの状態を変更した場合（購入／購入取りやめ）は，onClick 属性によって，関数 sel_c が呼ばれるように設定している．また，136 行目においては，購入数を変更した場合は，onBlur 属性によって，関数 sel_c が呼ばれるように設定している（要素がフォーカスを失った際，修正が実行される）．
147 行目: 　　実際に購入された場合，この INPUT 要素に記述された内容が FORM 要素の ACTION 属性に記述されたページ order.php に送られる．
149 行目: 　　このボタンをクリックすると，購入処理が始まり，購入内容の確認が行われる関数 trans が呼ばれる．
150 行目: 　　このボタンをクリックすると，買い物情報をクリアするため，関数 c_clear が呼ばれる．
151 行目: 　　このボタンをクリックすると，さらに買い物を継続するため，商品選択のページ article.html に移動する．
（関数：sel_c，購入／購入しない，及び，購入個数の変更）
164 行目: 　　c は form 内の NAME 属性の値が "no" + i1 である要素になる（例えば，i1 が 0 のときは no0 ）．これらの要素はチェックボックスに相当する．
165 行目～174 行目: 　　チェックボックスにチェックが入っているときの処理である．166 行目の n は form 内の NAME 属性の値が "num" + i1 である要素になる（購入数の欄）．また，171 行目の sm は form 内の NAME 属性の値が "sum" + i1 である要素になる（商品毎の合計欄）．これらを利用して，購入数（ 169 行目），商品毎の合計（ 172 行目），及び，全体の合計（ 173 行目）を計算し，再設定している．
175 行目～181 行目: 　　チェックボックスにチェックが入っていないときの処理である．購入数，商品毎の合計を 0 に設定している．
183 行目: 　　全体の合計を設定している．
185 行目～194 行目: 　　クッキーに商品情報及びクッキーが有効なドメインを設定している．
（関数：trans，購入内容の確認）
207 行目～209 行目: 　　購入内容を変数 str に設定すると共に，その合計金額 s を計算している．
210 行目～213 行目: 　　FORM 要素の ACTION 属性に記述されたページ order.php に購入情報を送るために，147 行目の INPUT 要素に，型番と購入数をコロンで区切って設定している．
218 行目～221 行目: 　　確認ダイアログを表示し（ confirm ），「キャンセル」であった場合は何もしない（ 219 行目）．また，「 OK 」であった場合は，クッキーがクリアされページ order.php に移動する（ 221 行目）．
223 行目～226 行目: 　　何も購入していない場合はメッセージを出力し，なにもしない．
（関数：c_clear，買い物情報のクリア）
235 行目: 　　クッキーの内容をクリア．
236 行目～238 行目: 　　getElementById("ID属性名") は，ID 属性が ID属性名である要素を返すメソッドであり，236 行目では，ID 属性が tbl である要素，つまり，120 行目の TABLE 要素を返す．この TABLE 要素に対して，その STYLE 属性のプロパティ display を none に設定することにより，表が表示されなくなる．同様に，237 行目によって，149 行目の「購入」ボタン，また，238 行目によって，150 行目の「買い物情報クリア」ボタンが表示されなくなる．

order.php：商品の購入

01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>購入</TITLE>
04		<META http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
05		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
06	</HEAD>
07	<BODY CLASS="white">
08		<H2 CLASS="center">購入された商品</H2>
09		<DIV>
10	<?php
11		$order = $_POST['order'];
12		$x     = strtok($order, ":");
13		$k     = 0;
14		while ($x !== FALSE) {
15			$type[$k] = $x;
16			$x = strtok(":");
17			$num[$k] = $x;
18			echo "商品 ". $type[$k]." 個数 ".$num[$k]." 個<BR>\n";
19			$x = strtok(":");
20			$k++;
21		}
22	?>
23		</DIV>
24	</BODY>
25	</HTML>

インラインフレームの利用

　　「クッキーの利用例（ショッピング）」において，ページ間で情報交換をすることができないと述べましたが，IFRAME 要素（インラインフレーム）を利用すれば，インラインフレームの中に記述されたページ間で情報交換を行うことが可能です（ただし，異なるサーバのページである場合は不可能）．「 IFRAME 要素を使用した例」においては，そのトップページである main.html は，2 つのインラインフレームから構成されています．その各々には，form.html 及び article.html が表示されます．

　　article.html は，クッキーを利用していない点だけは異なりますが，「クッキーの利用例（ショッピング）」における article.html とほぼ同じ内容を持つページです．form.html は，FORM 要素だけからなるページですが，対応する IFRAME 要素の HEIGHT 属性の値が 0 px に設定されているため，画面には表示されません．article.html において，購入数を入力した後「カゴに入れる」ボタンをクリックすると，関数 cart_in が呼ばれ確認メッセージが表示されます．その際，「 OK 」ボタンをクリックすると，関数 cookie_change が呼ばれます．この点については，「クッキーの利用例（ショッピング）」の場合と同様ですが，商品情報はクッキーではなく，form.html の NAME 属性が order である INPUT 要素の VALUE 属性に設定しています．

　　「買い物カゴを見る」ページ（ cart.html ）に移動しても，変化するのは main.html における下のインラインフレームの部分だけであり，form.html の部分は常駐します．従って，INPUT 要素の VALUE 属性の値も保持されることになります．このように，データを保存している場所が異なるだけで，「 IFRAME 要素を使用した例」も先の例とほとんど同じ処理を行っています．

　　クッキーを利用した場合との大きな違いは，データの保存期間の問題です．クッキーの場合は，ショッピングのページから抜け出ても，そのデータをある一定期間保持させることが可能ですが，インラインフレームの場合は，ショッピングのページから抜け出るとすべてのデータが削除されてしまいます．単に，ショッピングを行うだけであれば問題ありませんが，クッキーによってユーザの好みや最近の購入傾向などを判定したいような場合は不都合です．しかし，インラインフレームを使用した場合には，ユーザがクッキーの使用を禁止しても対応可能であるという利点が存在します．

以下に示すのが，各ページ及びそこで使用されている関数のプログラムですが，クッキーを使用した場合と内容的にほぼ同じですので，詳細な説明は省略します． main.html

<!DOCTYPE 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 SRC="control.js" TYPE="text/javascript"></SCRIPT>
</HEAD>
<BODY CLASS="white">
	<IFRAME NAME="article_buy" SRC="form.html" WIDTH="100%" HEIGHT="0px"></IFRAME>
	<IFRAME NAME="article" SRC="article.html" WIDTH="100%" HEIGHT="800px"></IFRAME>
</BODY>
</HTML>

form.html

<!DOCTYPE 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 SRC="control.js" TYPE="text/javascript"></SCRIPT>
</HEAD>
<BODY CLASS="white">
	<FORM NAME="form_buy" ACTION="order.php" METHOD="post" TARGET="buy">
		<INPUT TYPE="text" NAME="order">
	</FORM>
</BODY>
</HTML>

article.html：商品の選択

<!DOCTYPE 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 SRC="control.js" TYPE="text/javascript"></SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center">
	<TABLE STYLE="margin-left: auto; margin-right: auto">
		<TR>
			<TD>
				<DIV STYLE="width: 350px; margin-left: auto; margin-right: auto">
					<H2>商品001</H2>
					<IMG SRC="cat01-001.jpg" WIDTH="300">
					<FORM>
						<TABLE STYLE="text-align: left; margin-left: auto; margin-right: auto">
							<TR>
								<TH>型番</TH>
								<TD>001-01<INPUT TYPE="hidden" NAME="type" VALUE="001-01"></TD>
							</TR>
							<TR>
								<TH>商品名</TH>
								<TD>商品001<INPUT TYPE="hidden" NAME="name" VALUE="商品001"></TD>
							</TR>
							<TR>
								<TH>定価</TH>
								<TD>2,800円(税込)</TD>
							</TR>
							<TR>
								<TH>販売価格</TH>
								<TD CLASS="osusumeprice">2,800円(税込)<INPUT TYPE="hidden" NAME="price" VALUE="2800"></TD>
							</TR>
							<TR>
								<TH>購入数</TH>
								<TD STYLE="padding: 0px 5px;"><INPUT TYPE="text" NAME="num" VALUE="1" STYLE="width: 50px;"></TD>
							</TR>
						</TABLE>
						<BR>
						<INPUT onClick="return cart_in(this.form)" TYPE="image" VALUE="カートに入れる" SRC="cartin.gif" ALT="かごに入れる" WIDTH="115" HEIGHT="25">
					</FORM>
				</DIV>
			</TD>
			<TD>
				<DIV STYLE="width: 350px; margin-left: auto; margin-right: auto">
					<H2>商品002</H2>
					<IMG SRC="cat01-002.jpg" WIDTH="300">
					<FORM>
						<TABLE STYLE="text-align: left; margin-left: auto; margin-right: auto">
							<TR>
								<TH>型番</TH>
								<TD>001-02<INPUT TYPE="hidden" NAME="type" VALUE="001-02"></TD>
							</TR>
							<TR>
								<TH>商品名</TH>
								<TD>商品002<INPUT TYPE="hidden" NAME="name" VALUE="商品002"></TD>
							</TR>
							<TR>
								<TH>定価</TH>
								<TD>4,200円(税込)</TD>
							</TR>
							<TR>
								<TH>販売価格</TH>
								<TD CLASS="osusumeprice">4,200円(税込)<INPUT TYPE="hidden" NAME="price" VALUE="4200"></TD>
							</TR>
							<TR>
								<TH>購入数</TH>
								<TD STYLE="padding: 0px 5px;"><INPUT TYPE="text" NAME="num" VALUE="1" STYLE="width: 50px;"></TD>
							</TR>
						</TABLE>
						<BR>
						<INPUT onClick="return cart_in(this.form)" TYPE="image" VALUE="カートに入れる" SRC="cartin.gif" ALT="かごに入れる" WIDTH="115" HEIGHT="25">
					</FORM>
				</DIV>
			</TD>
		</TR>
	</TABLE>
	<BR>
	<DIV><A HREF="cart.html">買い物カゴを見る</A></DIV>
</BODY>
</HTML>

cart.html：買い物カゴの中身の表示

<!DOCTYPE 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 SRC="control.js" TYPE="text/javascript"></SCRIPT>
</HEAD>
<BODY CLASS="white">
	<H2 CLASS="center">買い物カゴ</H2>
	<SCRIPT TYPE="text/javascript">
		cart_content();
	</SCRIPT>
</BODY>
</HTML>

control.js：使用されている JavaScript の関数

n_get  = 0;
type   = new Array();
p_name = new Array();
num    = new Array();
price  = new Array();
sum    = new Array();

/****************/
/* カゴへ入れる */
/****************/
function cart_in(form)
{
	let str = "型番： " + form.type.value + "\n" +
          "商品名： " + form.name.value + "\n" +
          "価格： " + form.price.value + " 円\n" +
          "購入数： " + form.num.value + "\nよろしいですか?";
	if (!confirm(str))
		return false;
	else
		cookie_change(form.type.value, form.name.value, form.price.value, form.num.value);
}

/**************************/
/* 買い物カゴの中身の変更 */
/**************************/
function cookie_change(type1, p_name1, price1, num1)
{
					// カートの内容を保存したフォームデータの読み込み
	if (parent.article_buy.document.form_buy.order.value != "") {
		let part1 = parent.article_buy.document.form_buy.order.value.split(";");
		n_get     = 0;
		for (let i0 = 0; i0 < part1.length; i0++) {
			let k = part1[i0].indexOf("article=");
			if (k >= 0) {
				let part = part1[i0].split(":");
				k        = part[0].indexOf("article=");
				n_get    = parseInt(part[0].substr(k+8,part[0].length-k-8));
				let m    = 1;
				for (let i1 = 0; i1 < n_get; i1++) {
					type[i1]   = part[m];
					p_name[i1] = part[m+1];
					num[i1]    = part[m+2];
					price[i1]  = part[m+3];
					m += 4;
				}
				break;
			}
		}
	}
					// カートに今回購入した商品を追加
	if (type1 != "") {
							// 整数への変換
		let v = parseInt(price1);
		let n = parseInt(num1);
							// 同じ商品があるか？
		let m = -1;
		for (let i1 = 0; i1 < n_get && m < 0; i1++) {
			if (type1 == type[i1] && p_name1 == p_name[i1])
				m = i1;
		}
									// 同じ商品がある場合
		if (m >= 0) {
			let n1 = parseInt(num[m]) + n;
			num[m] = n1;
			sum[m] = n1 * v;
		}
									// 同じ商品がない場合
		else {
			m         = n_get;
			type[m]   = type1;
			p_name[m] = p_name1;
			num[m]    = num1;
			price[m]  = price1;
			sum[m]    = n * v;
			n_get++;
		}
							// フォームデータへの書き込み
		let str = "article=";
		str    += n_get;
		for (let i1 = 0; i1 < n_get; i1++) {
			str += (":" + type[i1]);
			str += (":" + p_name[i1]);
			str += (":" + num[i1]);
			str += (":" + price[i1]);
		}
		parent.article_buy.document.form_buy.order.value = str;
	}
}

/**************************/
/* 買い物カゴの中身の表示 */
/**************************/
function cart_content()
{
					// カートの内容を保存したフォームデータの読み込み
	if (parent.article_buy.document.form_buy.order.value != "") {
		let part1 = parent.article_buy.document.form_buy.order.value.split(";");
		n_get     = 0;
		for (let i0 = 0; i0 < part1.length; i0++) {
			let k = part1[i0].indexOf("article=");
			if (k >= 0) {
				let part = part1[i0].split(":");
				k        = part[0].indexOf("article=");
				n_get    = parseInt(part[0].substr(k+8,part[0].length-k-8));
				let m    = 1;
				for (let i1 = 0; i1 < n_get; i1++) {
					type[i1]   = part[m];
					p_name[i1] = part[m+1];
					num[i1]    = part[m+2];
					price[i1]  = part[m+3];
					m += 4;
				}
				break;
			}
		}
	}
					// 表示
	document.write('						\n');
	document.write('							\n');
	document.write('								\n');
	document.write('									\n');
	document.write('									\n');
	document.write('									\n');
	document.write('									\n');
	document.write('									\n');
	document.write('									\n');
	document.write('								\n');
	let s = 0;
	for (let i1 = 0; i1 < n_get; i1++) {
		document.write('								\n');
		document.write('									\n');
		document.write('									\n');
		document.write('									\n');
		document.write('									\n');
		document.write('									\n');
		let v = parseInt(num[i1]) *  parseInt(price[i1]);
		s    += v;
		document.write('									\n');
		document.write('								\n');
	}
	document.write('								\n');
	document.write('									\n');
	document.write('									\n');
	document.write('								\n');
	document.write('							　 型番 商品名 価格 購入数 合計
' + type[i1] + ' ' + p_name[i1] + ' ' + price[i1] + '円 
合計 \n');
	document.write('							
\n');
	document.write('							　\n');
	document.write('							　\n');
	document.write('							商品一覧へ\n');
	document.write('						\n');
}

/**************************/
/* 購入／購入しない       */
/* 購入個数               */
/*     を変えたときの処理 */
/**************************/
function sel_c(form)
{
	let s = 0;
	for (let i1 = 0; i1 < n_get; i1++) {
		let c = eval("form.no" + i1);
		if (c.checked) {
			let n = eval("form.num" + i1);
			if (n.value == "")
				n.value = "0";
			num[i1]   = n.value;
			let v     = parseInt(num[i1]) *  parseInt(price[i1]);
			let sm    = eval("form.sum" + i1);
			sm.value  = v;
			s        += v;
		}
		else {
			num[i1]  = "0";
			let n    = eval("form.num" + i1);
			n.value  = "0";
			let sm   = eval("form.sum" + i1);
			sm.value = "0";
		}
	}
	form.sum.value = s;
					// フォームデータの変更
	let str = "article=";
	str    += n_get;
	for (let i1 = 0; i1 < n_get; i1++) {
		str += (":" + type[i1]);
		str += (":" + p_name[i1]);
		str += (":" + num[i1]);
		str += (":" + price[i1]);
	}
	parent.article_buy.document.form_buy.order.value = str;
}

/********/
/* 購入 */
/********/
function trans(form)
{
	let str  = "";
	let str0 = "";
	let s    = 0;
	for (let i1 = 0; i1 < n_get; i1++) {
		if (num[i1] > 0) {
			let v = parseInt(num[i1]) *  parseInt(price[i1]);
			str  += p_name[i1] + "： " + num[i1] + "個，" + v + "円\n";
			s    += v;
			if (str0 == "")
				str0 = str0 + type[i1] + ":" + num[i1];
			else
				str0 = str0 + ":" + type[i1] + ":" + num[i1];
		}
	}
	if (s > 0) {
		str += "　　合計 " + s + "円\n\nよろしいですか?";
		if (confirm(str)) {
			parent.article_buy.document.form_buy.order.value = str0;
			parent.article_buy.document.form_buy.submit();
			c_clear();
		}
	}
	else
		alert("まだ，何も購入されていません！");
}

/**********************/
/* 買い物情報のクリア */
/**********************/
function c_clear()
{
	n_get = 0;
	parent.article_buy.document.form_buy.order.value = "";
	document.getElementById("tbl").style.display = "none";
	document.getElementById("btn").style.display = "none";
	document.getElementById("clear").style.display = "none";
}

	型番	商品名	価格	購入数	合計
	' + type[i1] + '	' + p_name[i1] + '	' + price[i1] + '円
合計

order.php：商品の購入

<!DOCTYPE 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">
	<H2 CLASS="center">購入された商品</H2>
	<DIV>
<?php
	$order = $_POST['order'];
	$x     = strtok($order, ":");
	$k     = 0;
	while ($x !== FALSE) {
		$type[$k] = $x;
		$x = strtok(":");
		$num[$k] = $x;
		echo "商品 ". $type[$k]." 個数 ".$num[$k]." 個<BR>\n";
		$x = strtok(":");
		$k++;
	}
?>
	</DIV>
</BODY>
</HTML>

ダイナミック HTML（ DOM ）
　　「フォームと JavaScript 」においては，フォーム関連要素に対する属性値の参照や変更を，form オブジェクトのプロパティやメソッドを利用して行いました．この方法は，他の要素に対しても実行可能です．例えば，IMG 要素による表示画像を変更したいような場合，後に示す DOM の使用例の 12 行目の後ろにコメントで記述したように，image オブジェクトのプロパティを使用し，
```
document.images[0].src = "ayame.gif";
			
```
のような形で記述することによって，IMG 要素の SRC 属性の値を変更できます．

　　しかしながら，要素の属性や HTML 文書の内容など，より細かな修正・変更を行う場合には，DOM の機能を利用することが多いと思います．DOM（ Document Object Model ）とは，ブラウザの機能，要素，属性などを構造化する方法を定めた仕様であり，これを使用して，HTML で記述されたドキュメントをプログラムから操作し，ブラウザに動的な効果を与えることができます．HTML の各要素に対する説明の中に，「DOM インタフェース」という項目が現れます．例えば，IMG 要素の中には，
```
[NamedConstructor=Image(),
 NamedConstructor=Image(unsigned long width),
 NamedConstructor=Image(unsigned long width, unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;
           attribute DOMString crossOrigin;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
};
			
```
のような記述が現れるはずです．DOM インタフェースでは，要素の属性の内，どのような属性を参照，変更できるかを示しています．上に示した例では，10 個の属性の内，3 つは参照しかできませんが，他の属性に対してはその値を変更することが可能です．また，AUDIO 要素のように，要素に対して使用できるメソッド（ load()，play()，pause() ）が DOM インタフェースに定義されている場合もあります．要素の属性値を参照・変更する場合は下に示す方法の 1 行目，スタイルシートのプロパティの場合は 2 行目のように記述します．
```
要素.属性 [ = 属性値]   // 属性の場合
要素.style.プロパティ [ = 値]   // スタイルシートのプロパティの場合
			
```
　　ここで示す例では，「花」ボタンをクリックすると（ 40 行目），DOM のメソッド getElementById によって，ID 属性の値が hana である要素（ IMG 要素）を特定し，その src 属性の値を変更しています（ 12 行目）．「説明」ボタンをクリックした場合は（ 41 行目），上と同様の方法によって要素を特定した後，DOM のプロパティ innerHTML を利用し，ID 属性の値が exp である DIV 要素で囲まれた内容を変更しています（ 15 行目）．「両方」ボタンをクリックした場合は（ 42 行目），ID 属性の値が main である DIV 要素で囲まれた内容を innerHTML プロパティによって変更していますが（ 18 行目），「元に戻す」ボタンをクリックした場合のように，個別に行っても構いません．

　　「背景色」ボタンをクリックした場合も，基本的には同じですが，背景色というスタイルシートのプロパティを変更するため，「 style 」という文字を使用しています（ 21 行目）．この例に示すように，スタイルシートのほとんどのプロパティを DOM の機能を使用して変更できますが，プロパティの記述がスタイルシートの場合と DOM の場合とでは，異なっている場合が多いことに注意して下さい．例えば，この例で使用している backgroundColor は，スタイルシートの表現では background-color になります（「スタイルシート」，及び，「DOM スタイルシートプロパティ」参照）．
```
01	<!DOCTYPE HTML>
02	<HTML>
03	<HEAD>
04		<TITLE>DOM の例</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 change(sw)
09			{
10				switch (sw) {
11					case 0:
12						document.getElementById("hana").src = "ayame.gif";
	//					document.images[0].src = "ayame.gif"; でも可能
13						break;
14					case 1:
15						document.getElementById("exp").innerHTML = "あやめ";
16						break;
17					case 2:
18						document.getElementById("main").innerHTML = '<IMG ID="hana" SRC="ayame.gif"><DIV ID="exp">あやめ</DIV>';
19						break;
20					case 3:
21						document.getElementById("back").style.backgroundColor = "pink";
22						break;
23					case 4:
24						document.getElementById("hana").src = "ajisai.gif";
25						document.getElementById("exp").innerHTML = "紫陽花";
26						document.getElementById("back").style.backgroundColor = "yellow";
27						break;
28				}
29			}
30		</SCRIPT>
31	</HEAD>
32	<BODY CLASS="white">
33		<H1 CLASS="center">DOM の例</H1>
34		<DIV CLASS="center">
35			<DIV ID="main" CLASS="center">
36				<IMG ID="hana" SRC="ajisai.gif">
37				<DIV ID="exp">紫陽花</DIV>
38			</DIV>
39			<BR>
40			<BUTTON STYLE="font-size: 100%; background-color: yellow" onClick="change(0)">花</BUTTON>　
41			<BUTTON STYLE="font-size: 100%; background-color: yellow" onClick="change(1)">説明</BUTTON>　
42			<BUTTON STYLE="font-size: 100%; background-color: yellow" onClick="change(2)">両方</BUTTON>　
43			<BUTTON STYLE="font-size: 100%; background-color: yellow" onClick="change(3)">背景色</BUTTON>　
44			<BUTTON ID="back" STYLE="font-size: 100%; background-color: yellow" onClick="change(4)">元に戻す</BUTTON>　
45		</DIV>
46	</BODY>
47	</HTML>
			
```

DOM の利用例

演習問題の解答（正誤の判断）
　　HTML に対する説明で示した「演習問題の解答」では，その処理を行う CGI プログラムにおいて単に答えをチェックするだけで，結果をディスク上に保存するような処理を行っていません．そのような場合，あえて CGI プログラムを利用しなくても，JavaScript だけで同様の処理が可能です．サーバにアクセスせず，クライアント上だけで行われるため，時間的にも非常に有利になります．以下に示す例においては，正誤の判断を JavaScript で行い，その結果に従って，ID 属性で指定された H3 要素と SPAN 要素の内容を DOM の機能を利用して書き換えています．なお，この例においては，フォーム関連要素に対する属性値の参照や変更を，form オブジェクトのプロパティやメソッドを利用して行っています． → 表示して実行
```
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 check(form) {
09				let sw = 0;
10				if(form.ans.value =="") {
11					alert("答えを入力してください");
12					sw = 1;
13				}
14				if(form.name.value =="") {
15					alert("名前を入力してください");
16					sw = 1;
17				}
18				if (sw == 0) {
19					let a = parseInt(form.a.value);
20					let b = parseInt(form.b.value);
21					let c = parseInt(form.ans.value);
22					if (a+b == c) {
23						document.getElementById("result1").innerHTML = form.name.value + " さん，正解です！";
24						document.getElementById("result2").innerHTML = "続いて，次の問題の答えは？";
25						form.a.value = Math.floor(100 * Math.random());
26						form.b.value = Math.floor(100 * Math.random());
27						form.ans.value = "";
28						document.getElementById("equation").innerHTML = form.a.value + " + " + form.b.value;
29					}
30					else {
31						document.getElementById("result1").innerHTML = form.name.value + " さん，間違っています！";
32						document.getElementById("result2").innerHTML = "もう一度計算してみて下さい";
33					}
34				}
35			}
36		</SCRIPT>
37	</HEAD>
38	<BODY CLASS="white">
39		<H3 STYLE="text-align:center" ID="result1"></H3>
40		<H3 STYLE="text-align:center" ID="result2">次の問題の答えは？</H3>
41		<FORM>
42			<P STYLE="text-align:center">
43				<SPAN ID="equation">3 + 4</SPAN> = <INPUT TYPE="text" NAME="ans" STYLE="font-size:90%"><BR><BR>
44				名前:<INPUT TYPE="text" NAME="name" STYLE="font-size:90%">　　
45				<INPUT TYPE="button" VALUE="送信" onClick="check(this.form)" STYLE="font-size:90%"><BR>
46				<INPUT TYPE="hidden" NAME="a" VALUE="3">
47				<INPUT TYPE="hidden" NAME="b" VALUE="4">
48			</P>
49		</FORM>
50	</BODY>
51	</HTML>
				
```
10 行目～ 13 行目

　　答えが入力されているか否かを調べ，入力されていない場合は，メッセージを出力し，18 行目以降の答えのチェックを行わない（ sw = 1 に設定しているため）．なお，ans は，43 行目における INPUT 要素の NAME 属性の値である．

14 行目～ 17 行目

　　名前が入力されているか否かを調べ，入力されていない場合は，メッセージを出力し，18 行目以降の答えのチェックを行わない（ sw = 1 に設定しているため）．なお，name は，44 行目における INPUT 要素の NAME 属性の値である．

19 行目～ 21 行目

　　NAME 属性の値が a，b，及び，ans である INPUT 要素（ 46，47，及び，43 行目）の VALUE 属性の値を整数に変換している（文字列のままでは加算を実行できないため）．

23 行目～ 28 行目

　　正解であった場合の処理である．23，24 行目では，getElementById によって，ID 属性の値が result1，及び，result2 である要素（ 39，40 行目の H3 要素）を特定し，その要素内に innerHTML プロパティを利用して，HTML 形式で次の問題の実行を促す文字列を書き出している．25，26 行目では，NAME 属性の値が a，b である INPUT 要素（ 46，47 行目）の VALUE 属性の値をランダムに設定することによって新しい問題を生成し，27 行目においては，答えを入力する領域をクリアしている．また，28 行目においては，getElementById によって，ID 属性の値が equation である要素（ 43 行目の SPAN 要素）を特定し，その要素内に innerHTML プロパティを利用して，上で生成した新しい問題を書き出している．

31 行目～ 32 行目

　　不正解であった場合の処理である．getElementById によって，ID 属性の値が result1，及び，result2 である要素（ 39，40 行目の H3 要素）を特定し，その要素内に innerHTML プロパティを利用して，HTML 形式で再実行を促す文字列を書き出している．

45 行目

　　このボタンをクリックすると，関数 check が呼ばれる．

表示・非表示（ visibility ）

　　表示・非表示（ visibility ）のページにおいて，上部にある 3 つのオレンジ色の箇所にマウスが入ると，入った場所に応じ，文中の対応する箇所の背景色が変化すると共に，図の対応する箇所にマークが付けられます（ DOM スタイルシートプロパティ visibility の使用．ブラウザによって，多少，マークの表示位置が異なります）．

01	<!DOCTYPE HTML>
02	<HTML>
03	<HEAD>
04		<TITLE>表示・非表示（ visibility ）</TITLE>
05		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
07		<STYLE TYPE="text/css">
08			BODY { width: 700px }
09			IMG.right { float: right; position: relative; z-index:1; margin: 0px; padding: 0px }
10			IMG.right_cl { position: absolute; top: 40px; left: 490px; z-index: 2; visibility: hidden; margin: 0px; padding: 0px }
11			IMG.right_cm { position: absolute; top: 120px; left: 530px; z-index: 2; visibility: hidden; margin: 0px; padding: 0px }
12			IMG.right_cs { position: absolute; top: 170px; left: 630px; z-index: 2; visibility: hidden; margin: 0px; padding: 0px }
13			P.center { text-align: center }
14			SPAN.U { text-decoration: underline; background-color: orange }
15		</STYLE>
16		<SCRIPT TYPE="text/javascript">
17			function mark_o()
18			{
19				document.getElementById("circle_l").style.visibility = "hidden";
20				document.getElementById("hana").style.backgroundColor = "white";
21				document.getElementById("circle_m").style.visibility = "hidden";
22				document.getElementById("ha").style.backgroundColor = "white";
23				document.getElementById("circle_s").style.visibility = "hidden";
24			}
25			function mark_1()
26			{
27				document.getElementById("circle_l").style.visibility = "visible";
28			}
29			function mark_2()
30			{
31				document.getElementById("circle_m").style.visibility = "visible";
32				document.getElementById("hana").style.backgroundColor = "lightblue";
33			}
34			function mark_3()
35			{
36				document.getElementById("circle_s").style.visibility = "visible";
37				document.getElementById("ha").style.backgroundColor = "lightgreen";
38			}
39		</SCRIPT>
40	</HEAD>
41	<BODY CLASS="white">
42		<P>紫陽花　　<SPAN CLASS="U" onMouseOver="mark_1()" onMouseOut="mark_o()">紫陽花</SPAN> <SPAN CLASS="U" onMouseOver="mark_2()" onMouseOut="mark_o()">花の説明</SPAN> <SPAN CLASS="U" onMouseOver="mark_3()" onMouseOut="mark_o()">葉の説明</SPAN>
43		<IMG ID="ajisai" SRC="ajisai.gif" CLASS="right">
44		<IMG ID="circle_l" CLASS="right_cl" SRC="circle_l.gif">
45		<IMG ID="circle_m" CLASS="right_cm" SRC="circle_m.gif">
46		<IMG ID="circle_s" CLASS="right_cs" SRC="circle_s.gif">
47		<P>　　ユキノシタ科の落葉低木．ガクアジサイの改良種とされる．幹は根から叢生．高さ約一・五ﾒｰﾄﾙ．葉は広卵形で対生．六～七月頃，球状の集散花序に四枚の萼片だけが発達した不実の花(装飾花)を多数つける．色は青から赤紫で，変化するところから「七変化」の名もある．観賞用．<SPAN ID="hana">花は解熱薬</SPAN>，<SPAN ID="ha">葉は瘧(おこり)の治療薬用</SPAN>．また，広くはサワアジサイ・ガクアジサイなどの総称で，ヨーロッパでの改良品種をセイヨウアジサイ・ハイドランジアなどと呼ぶ．あずさい．四片(よひら)．
48	</BODY>
49	</HTML>

08 行目: 　　Window の幅を 700 ピクセルに設定している．
09 行目: 　　紫陽花を画面の右側に配置している．
10 行目～ 12 行目: 　　紫陽花全体を囲む大きな円，青い紫陽花の花を囲む中くらいの円，及び，紫陽花の葉を囲む小さな円の表示位置を指定している．「 z-index: 2 」が指定されているため，これらの円は紫陽花の上に描かれる．なお，「 visibility: hidden 」が指定されているため，最初は表示されない．
17 行目～ 24 行目: 　　オレンジ色の「紫陽花」，「花の説明」，及び，「葉の説明」からマウスが離れたときに呼ばれる関数であり，大，中，小の円を見えなくし，かつ，説明文内の背景色を変えた位置の背景色を白に戻している．
25 行目～ 28 行目: 　　オレンジ色の「紫陽花」の箇所にマウスが入ったときに呼ばれる関数であり，紫陽花全体を囲む円が表示される．
29 行目～ 33 行目: 　　オレンジ色の「花の説明」の箇所にマウスが入ったとき呼ばれる関数であり，青い紫陽花の花を囲む円が表示されると共に，説明文内の「花は解熱薬」の背景色が薄い緑になる．
34 行目～ 38 行目: 　　オレンジ色の「葉の説明」の箇所にマウスが入ったとき呼ばれる関数であり，紫陽花の葉を囲む円が表示されると共に，説明文内の「葉は瘧(おこり)の治療薬用」の背景色が薄い緑になる．
42 行目: 　　SPAN 要素の onMouseOver 及び onMouseOut 属性を利用して，マウスが入ったとき，及び，マウスが離れたときに行う処理を記述した関数を指定している．
43 行目～ 46 行目: 　　紫陽花及び大中小の円を表示している．ただし，初期状態では，その STYLE 属性のために，円は表示されない．
47 行目: 　　SPAN 要素の ID 属性を使用して，マウス操作によって背景色が変化する部分を指定している．

表示・非表示（ display ）
　　画面への表示項目が多くなると，一般に，画面をスクロールする必要が出てきます．しかし，必ずしもすべての項目を同時に表示する必要がない場合には，表示項目を制限することによって，適切な量を表示することができる場合もあります．このページでは，ラジオボタンをクリックすると，ID 属性で指定された要素のスタイルシートのプロパティを変更することによって，その選択に必要なデータだけを表示しています．上で示した「表示・非表示（ visibility ）」の例では，DOM スタイルシートプロパティ visibility を利用して表示・非表示の制御をしていましたが，ここでは display を使用しています．display の場合は，visibility の場合とは異なり，表示・非表示が切り替わる毎に画面の再レイアウトを行います．
```
01	<!DOCTYPE HTML>
02	<HTML>
03	<HEAD>
04		<TITLE>表示・非表示（ display ）</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 disp(sw)
09			{
10				if (sw == 1) {
11					document.getElementById("dl_1").style.display = "";
12					document.getElementById("dl_2").style.display = "none";
13				}
14				else {
15					document.getElementById("dl_1").style.display = "none";
16					document.getElementById("dl_2").style.display = "";
17				}
18			}
19		</SCRIPT>
20	</HEAD>
21	<BODY CLASS="white">
22		<H1 STYLE="text-align: center">表示・非表示（ display ）</H1>
23		<FORM>
24			<DL>
25				<DT>名前: <INPUT TYPE="text" NAME="name" STYLE="font-size:90%"><BR><BR>
26				<DT><INPUT TYPE="radio" NAME="sel" onClick="disp(1)">好きな野菜：
27				<DD><DL ID="dl_1" STYLE="display:none">
28					<DT><INPUT TYPE="checkbox" NAME="c1">キャベツ
29					<DT><INPUT TYPE="checkbox" NAME="c2">大根
30					<DT><INPUT TYPE="checkbox" NAME="c3">ジャガイモ
31					<DT><INPUT TYPE="checkbox" NAME="c4">トマト
32				</DL></DD>
33				<DT><INPUT TYPE="radio" NAME="sel" onClick="disp(2)">好きな果物：
34				<DD><DL ID="dl_2" STYLE="display:none"><DD>
35					<DT><INPUT TYPE="checkbox" NAME="c5">蜜柑
36					<DT><INPUT TYPE="checkbox" NAME="c6">林檎
37					<DT><INPUT TYPE="checkbox" NAME="c7">葡萄
38					<DT><INPUT TYPE="checkbox" NAME="c8">苺
39				</DL></DD>
40			</DL>
41		</FORM>
42	</BODY>
43	</HTML>
				
```
08 行目～ 18 行目

　　表示，非表示を切り替える関数である．引数で渡された sw の値が 1 のときは，ID 属性の値が dl_1 である要素（ 27 行目の DL 要素）を表示し，ID 属性の値が dl_2 である要素（ 34 行目の DL 要素）を非表示にする．sw の値が 1 でないときは，上の逆になる．

26 行目

　　この項目が選択されると，関数 disp が 1 を引数として呼ばれ，「好きな野菜」に対応する項目が表示，「好きな果物」に対応する項目が非表示になる．

27 行目～ 32 行目

　　「好きな野菜」に対応する項目であり，当初は，DL 要素の STYLE 属性「 display:none 」の指定により表示されない．

33 行目

　　この項目が選択されると，関数 disp が 2 を引数として呼ばれ，「好きな果物」に対応する項目が表示，「好きな野菜」に対応する項目が非表示になる．

34 行目～ 39 行目

　　「好きな果物」に対応する項目であり，当初は，DL 要素の STYLE 属性「 display:none 」の指定により表示されない．
文字サイズの変更
　　文字のサイズが小さいと，読みづらい人も少なくありません．そこで，ここでは，ボタンをクリックすることによって文字サイズを変更できるようにしてみたいと思います．「文字サイズの変更例」においては，BUTTON 要素に対して，onclick 属性が指定されているため，ボタンをクリックすると，JavaScript の関数 size_c が呼ばれます．size_c においては，引数 sw の正負により，変数 size の値が増減します．その値を，ID 属性が div_2 である　DIV 要素に対応する領域の DOM スタイルシートプロパティ fontSize に設定しています．
```
01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>文字サイズの変更</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
06		<SCRIPT TYPE="text/javascript">
07			size = 130;
08			function size_c(sw)
09			{
10				if (sw > 0)
11					size += 10;
12				else {
13					if (size > 10)
14						size -= 10;
15				}
16				document.getElementById("div_2").style.fontSize = size + '%';
17			}
18		</SCRIPT>
19	</HEAD>
20	<BODY CLASS="white">
21		<H1 CLASS="center">文字サイズ</H1>
22		<DIV CLASS="center">
23			<BUTTON onClick="size_c(1)" STYLE="font-size: 90%">大きく</BUTTON>　<BUTTON onClick="size_c(-1)" STYLE="font-size: 90%">小さく</BUTTON>
24		</DIV>
25		<DIV ID="div_1" STYLE="float: left">
26			<H1>文書１</H1>
27			<H2>文書１</H2>
28			<H3>文書１</H3>
29			<H4>文書１</H4>
30			<H5>文書１</H5>
31			<H6>文書１</H6>
32		</DIV>
33		<DIV ID="div_2">
34			<H1>文書２</H1>
35			<H2>文書２</H2>
36			<H3>文書３</H3>
37			<H4>文書４</H4>
38			<H5>文書５</H5>
39			<H6>文書６</H6>
40		</DIV>
41	</BODY>
42	</HTML>
				
```
07 行目

　　グローバル変数であり，文字サイズの初期値である．

08 行目～ 17 行目

　　文字サイズを変更する関数であり，引数 sw が正の場合は 10 ％ずつ大きくなり（ 11 行目），負の場合は 10 ％ずつ小さくなる（ 14 行目）．ただし，10 ％より小さくはならない，変更された値は，16 行目において，ID 属性の値が div_2 である要素（ 33 行目の DIV 要素）の STYLE 属性のプロパティ fontSize に設定される．その結果，その DIV 要素内の文字サイズが変更になる．

23 行目

　　文字サイズを変更するためのボタンである．これらのボタンをクリックすると，関数 size_c が呼ばれ，文字サイズが変化する．

要素の表示位置変更（スクロール）

　　ページを DIV 要素などを使用して左側と右側と異なる領域に分割したような場合，右側の表示内容が多い時，スクロールによって左側の領域が見えなくなるような場合があります．「要素の表示位置変更」においては，画面がスクロールされると，スクロールされた量に従って左側領域の DOM スタイルシートプロパティ marginTop の値を修正し，左側領域が常に表示されるようにしています．

　　ページがロードされると start 関数が呼ばれます．start 関数では，100 ms 毎に p_change 関数を呼ぶように設定しています．p_change 関数が margin-top の値を修正しています．さらに適切な方法があるかもしれませんが，この方法によって一応目的は達成できます．

01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>スクロール</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<META HTTP-EQUIV="Content-Language" CONTENT="ja">
06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
07		<SCRIPT TYPE="text/javascript">
08			timerID = -1;
09	
10			function start()
11			{
12				timerID = setInterval('p_change()',100);
13			}
14	
15			function p_change()
16			{
17				if (window.pageYOffset) {   // Chrome
18					if (pageYOffset > 50)
19						document.getElementById("left").style.marginTop = (pageYOffset - 30) + "px";
20					else
21						document.getElementById("left").style.marginTop = "0px";
22				}
23				else {   // IE
24					let x = (document.documentElement || document.body.parentNode || document.body).scrollTop;
25					if (x > 50)
26						document.getElementById("left").style.marginTop = (x - 10) + "px";
27					else
28						document.getElementById("left").style.marginTop = "0px";
29				}
30			}
31		</SCRIPT>
32	</HEAD>
33	
34	<BODY CLASS="white" STYLE="text-align: center" onLoad="start()">
35		<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
36			<DIV ID="left" STYLE="float: left; width: 190px">
37				<H1>文書１</H1>
38				<H2>文書１</H2>
39				<H3>文書１</H3>
40				<H4>文書１</H4>
41				<H5>文書１</H5>
42				<H6>文書１</H6>
43			</DIV>
44			<DIV ID="right" STYLE="float: right; width: 300px">
45				<H1>文書２</H1>
46				<H2>文書２</H2>
47				<H3>文書３</H3>
48				<H4>文書４</H4>
49				<H5>文書５</H5>
50				<H6>文書６</H6>
51				<H1>文書２</H1>
52				<H2>文書２</H2>
53				<H3>文書３</H3>
54				<H4>文書４</H4>
55				<H5>文書５</H5>
56				<H6>文書６</H6>
57				<H1>文書２</H1>
58				<H2>文書２</H2>
59				<H3>文書３</H3>
60				<H4>文書４</H4>
61				<H5>文書５</H5>
62				<H6>文書６</H6>
63				<H1>文書２</H1>
64				<H2>文書２</H2>
65				<H3>文書３</H3>
66				<H4>文書４</H4>
67				<H5>文書５</H5>
68				<H6>文書６</H6>
69			</DIV>
70		</DIV>
71	</BODY>
72	</HTML>

10 行目～ 13 行目: 　　39 行目の onLoad 属性によって，このページがロードされると呼ばれる関数である．12 行目において，100 ms ごとに，関数 p_change が実行されるように設定している．
15 行目～ 30 行目: 　　左側領域の表示位置を変更するための関数である．window オブジェクトの pageYOffset （縦方向のオフセット）の値によって，STYLE 属性のプロパティ marginTop を変化させている．なお，23 行目以降は，ブラウザが IE である場合の処理である．

ページ内容の一部変更（リンク）

一般的なリンクの場合は，単に A 要素を利用してページを切り替えることになります．この例では，以下に示す 3 つのページを切り替えています．また，3 つのページとも，DIV 要素によって，以下に示すようにレイアウトされています． page1.html：ページ１

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ１</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
		<DIV ID="left" STYLE="float: left; width: 190px">
			<OL CLASS="number">
				<LI><A HREF="page1.html">ページ１</A>
				<LI><A HREF="page2.html">ページ２</A>
				<LI><A HREF="page3.html">ページ３</A>
			</OL>
		</DIV>
		<DIV ID="right" STYLE="float: right; width: 300px">
			<DIV ID="right_top" STYLE="width: 295px">
				<H1>文書１</H1>
				<H2>文書１</H2>
				<H3>文書１</H3>
				<H4>文書１</H4>
				<H5>文書１</H5>
				<H6>文書１</H6>
			</DIV>
			<DIV ID="right_bottom" STYLE="width: 295px">
				<H1>文書１</H1>
				<H2>文書１</H2>
				<H3>文書１</H3>
				<H4>文書１</H4>
				<H5>文書１</H5>
				<H6>文書１</H6>
			</DIV>
		</DIV>
	</DIV>
</BODY>
</HTML>

page2.html：ページ２

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ２</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
		<DIV ID="left" STYLE="float: left; width: 190px">
			<OL CLASS="number">
				<LI><A HREF="page1.html">ページ１</A>
				<LI><A HREF="page2.html">ページ２</A>
				<LI><A HREF="page3.html">ページ３</A>
			</OL>
		</DIV>
		<DIV ID="right" STYLE="float: right; width: 300px">
			<DIV ID="right_top" STYLE="width: 295px">
				<H1>文書２</H1>
				<H2>文書２</H2>
				<H3>文書２</H3>
				<H4>文書２</H4>
				<H5>文書２</H5>
				<H6>文書２</H6>
			</DIV>
			<DIV ID="right_bottom" STYLE="width: 295px">
				<H1>文書１</H1>
				<H2>文書１</H2>
				<H3>文書１</H3>
				<H4>文書１</H4>
				<H5>文書１</H5>
				<H6>文書１</H6>
			</DIV>
		</DIV>
	</DIV>
</BODY>
</HTML>

page3.html：ページ３

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ３</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
		<DIV ID="left" STYLE="float: left; width: 190px">
			<OL CLASS="number">
				<LI><A HREF="page1.html">ページ１</A>
				<LI><A HREF="page2.html">ページ２</A>
				<LI><A HREF="page3.html">ページ３</A>
			</OL>
		</DIV>
		<DIV ID="right" STYLE="float: right; width: 300px">
			<DIV ID="right_top" STYLE="width: 295px">
				<H1>文書１</H1>
				<H2>文書１</H2>
				<H3>文書１</H3>
				<H4>文書１</H4>
				<H5>文書１</H5>
				<H6>文書１</H6>
			</DIV>
			<DIV ID="right_bottom" STYLE="width: 295px">
				<H1>文書３</H1>
				<H2>文書３</H2>
				<H3>文書３</H3>
				<H4>文書３</H4>
				<H5>文書３</H5>
				<H6>文書３</H6>
			</DIV>
		</DIV>
	</DIV>
</BODY>
</HTML>

上の例からも明らかなように，各ページ間で異なっているのは一部だけです（ right_top，または，right_bottom の内容だけ）．このような例も多いかと思います．上で示した方法ですと，ページの一部だけを変更すれば良いのにも関わらずページ全体を新たに読み込む必要があります．ページサイズが大きい時は非常に問題です．これを避ける一つの方法は，関数を使用することです．以下に示すように各ページのサイズは小さくなります． page1.html：ページ１

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ１</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
	<SCRIPT TYPE="text/javascript" SRC="control.js"></SCRIPT>
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
		<DIV ID="left" STYLE="float: left; width: 190px">
			<OL CLASS="number">
				<LI><A HREF="page1.html">ページ１</A>
				<LI><A HREF="page2.html">ページ２</A>
				<LI><A HREF="page3.html">ページ３</A>
			</OL>
		</DIV>
		<DIV ID="right" STYLE="float: right; width: 300px">
			<DIV ID="right_top" STYLE="width: 295px">
				<SCRIPT TYPE="text/javascript">
					func1();
				</SCRIPT>
			</DIV>
			<DIV ID="right_bottom" STYLE="width: 295px">
				<SCRIPT TYPE="text/javascript">
					func1();
				</SCRIPT>
			</DIV>
		</DIV>
	</DIV>
</BODY>
</HTML>

page2.html：ページ２

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ２</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
	<SCRIPT TYPE="text/javascript" SRC="control.js"></SCRIPT>
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
		<DIV ID="left" STYLE="float: left; width: 190px">
			<OL CLASS="number">
				<LI><A HREF="page1.html">ページ１</A>
				<LI><A HREF="page2.html">ページ２</A>
				<LI><A HREF="page3.html">ページ３</A>
			</OL>
		</DIV>
		<DIV ID="right" STYLE="float: right; width: 300px">
			<DIV ID="right_top" STYLE="width: 295px">
				<SCRIPT TYPE="text/javascript">
					func2();
				</SCRIPT>
			</DIV>
			<DIV ID="right_bottom" STYLE="width: 295px">
				<SCRIPT TYPE="text/javascript">
					func1();
				</SCRIPT>
			</DIV>
		</DIV>
	</DIV>
</BODY>
</HTML>

page3.html：ページ３

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ３</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
	<SCRIPT TYPE="text/javascript" SRC="control.js"></SCRIPT>
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
		<DIV ID="left" STYLE="float: left; width: 190px">
			<OL CLASS="number">
				<LI><A HREF="page1.html">ページ１</A>
				<LI><A HREF="page2.html">ページ２</A>
				<LI><A HREF="page3.html">ページ３</A>
			</OL>
		</DIV>
		<DIV ID="right" STYLE="float: right; width: 300px">
			<DIV ID="right_top" STYLE="width: 295px">
				<SCRIPT TYPE="text/javascript">
					func1();
				</SCRIPT>
			</DIV>
			<DIV ID="right_bottom" STYLE="width: 295px">
				<SCRIPT TYPE="text/javascript">
					func3();
				</SCRIPT>
			</DIV>
		</DIV>
	</DIV>
</BODY>
</HTML>

　　ただし，関数を使用してページ内容を記述すると，関数を使用しない場合より多少見にくくなります．以下に示すのは，関数を記述した control.js の内容です．

function func1()
{
	document.write("				<H1>文書１</H1>\n");
	document.write("				<H2>文書１</H2>\n");
	document.write("				<H3>文書１</H3>\n");
	document.write("				<H4>文書１</H4>\n");
	document.write("				<H5>文書１</H5>\n");
	document.write("				<H6>文書１</H6>\n");
}

function func2()
{
	document.write("				<H1>文書２</H1>\n");
	document.write("				<H2>文書２</H2>\n");
	document.write("				<H3>文書２</H3>\n");
	document.write("				<H4>文書２</H4>\n");
	document.write("				<H5>文書２</H5>\n");
	document.write("				<H6>文書２</H6>\n");
}

function func3()
{
	document.write("				<H1>文書３</H1>\n");
	document.write("				<H2>文書３</H2>\n");
	document.write("				<H3>文書３</H3>\n");
	document.write("				<H4>文書３</H4>\n");
	document.write("				<H5>文書３</H5>\n");
	document.write("				<H6>文書３</H6>\n");
}

　　変更する部分が少ない場合は，他のページへ移動せず，DOM のプロパティ innerHTML を使用して，内容を書き換える方法を利用することができます．この方法であれば，下に示すページだけで，上に述べた機能を実現できます．

01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>ページ１</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<META HTTP-EQUIV="Content-Language" CONTENT="ja">
06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
07		<STYLE TYPE="text/css">
08			span.point:hover { color: #00ff00; cursor: pointer; }
09		</STYLE>
10		<SCRIPT TYPE="text/javascript">
11			page = 1;
12			str1 = "<H1>文書１</H1>\n<H2>文書１</H2>\n<H3>文書１</H3>\n<H4>文書１</H4>\n<H5>文書１</H5>\n<H6>文書１</H6>\n";
13			str2 = "<H1>文書２</H1>\n<H2>文書２</H2>\n<H3>文書２</H3>\n<H4>文書２</H4>\n<H5>文書２</H5>\n<H6>文書２</H6>\n";
14			str3 = "<H1>文書３</H1>\n<H2>文書３</H2>\n<H3>文書３</H3>\n<H4>文書３</H4>\n<H5>文書３</H5>\n<H6>文書３</H6>\n";
15	
16			function move(sw)
17			{
18				if (page != sw) {
19					if (sw == 1) {
20						if (page == 2)
21							document.getElementById("right_top").innerHTML = str1;
22						else
23							document.getElementById("right_bottom").innerHTML = str1;
24					}
25					else if (sw == 2) {
26						document.getElementById("right_top").innerHTML = str2;
27						if (page == 3)
28							document.getElementById("right_bottom").innerHTML = str1;
29					}
30					else {
31						document.getElementById("right_bottom").innerHTML = str3;
32						if (page == 2)
33							document.getElementById("right_top").innerHTML = str1;
34					}
35					page = sw;
36				}
37			}
38		</SCRIPT>
39	</HEAD>
40	
41	<BODY CLASS="white" STYLE="text-align: center">
42		<DIV ID="wrapper" STYLE="width: 500px; margin-right: auto; margin-left: auto">
43			<DIV ID="left" STYLE="float: left; width: 190px">
44				<OL CLASS="number">
45					<LI><SPAN CLASS="point" onClick="move(1)">ページ１</SPAN>
46					<LI><SPAN CLASS="point" onClick="move(2)">ページ２</SPAN>
47					<LI><SPAN CLASS="point" onClick="move(3)">ページ３</SPAN>
48				</OL>
49			</DIV>
50			<DIV ID="right" STYLE="float: right; width: 300px">
51				<DIV ID="right_top" STYLE="width: 295px">
52					<H1>文書１</H1>
53					<H2>文書１</H2>
54					<H3>文書１</H3>
55					<H4>文書１</H4>
56					<H5>文書１</H5>
57					<H6>文書１</H6>
58				</DIV>
59				<DIV ID="right_bottom" STYLE="width: 295px">
60					<H1>文書１</H1>
61					<H2>文書１</H2>
62					<H3>文書１</H3>
63					<H4>文書１</H4>
64					<H5>文書１</H5>
65					<H6>文書１</H6>
66				</DIV>
67			</DIV>
68		</DIV>
69	</BODY>
70	</HTML>

11 行目: 　　現在表示されているページ番号．
12 行目～ 14 行目: 　　ID 要素の値が right_top，または，right_bottom である DIV 要素内に記述される内容を文字列に設定している．
19 行目～ 24 行目: 　　ページ 1 （ sw の値）に変更する場合の処理である．現在のページ番号が 2 ( page の値）である場合は，ID 要素の値が right_top である DIV 要素内に，innerHTML プロパティを利用して，文字列 str1 を書き込む．また，そうでない場合（現在のページ番号が 3 ）は，ID 要素の値が right_bottom である DIV 要素内に，innerHTML プロパティを利用して，文字列 str1 を書き込む．いずれの場合も，文字列は，HTML の解釈に従って表示される．
25 行目～ 29 行目: 　　同様に，ページ 2 （ sw の値）に変更する場合の処理である．
30 行目～ 34 行目: 　　同様に，ページ 3 （ sw の値）に変更する場合の処理である．
35 行目: 　　変更したページを変数 page に保存．
45 行目～ 47 行目: 　　ページ名がクリックされると，onClick 属性の設定により，関数 move が呼ばれる．その際，ページを指定する番号（ 1，2，または，3 ）が引数として渡される．

書き換える内容が非常に多い時は上の方法は勧められません．12 行目～ 14 行目に示すように，コンテンツの記述が非常にわかりにくくなるからです．最後に示すのは，IFRAME 要素（インラインフレーム）を使用してページレイアウトを行った場合に可能な方法です．この方法を使用すれば，IFRAME 要素内のページだけを独立に読み込むことによってリンクを実現できます（具体的には，left.html 内で操作している）．実際，各ページへの移動ボタンをクリックしても，URL が変化しないことが分かると思います．一度に読み込むページのサイズが小さくなると共に，一度レイアウトを作成しておけば，各ページの記述が簡単になります． home.html：トップページ．IFRAME 要素内に wrapper.html を表示しているだけ

<!DOCTYPE HTML>
<HEAD>
	<TITLE>リンク（フレーム）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>
<BODY CLASS="white" STYLE="text-align: center">
	<IFRAME SRC="wrapper.html" WIDTH="550px" HEIGHT="650px"></IFRAME>
</BODY>
</HTML>

wrapper.html：左側の IFRAME 要素内に left.html，右側に right.html を表示

<!DOCTYPE HTML>
<HEAD>
	<TITLE>リンク（フレーム）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>
<BODY CLASS="white" STYLE="text-align: center">
	<IFRAME SRC="left.html" WIDTH="175px" STYLE="float: left"></iframe>
	<IFRAME ID="right" SRC="right.html" WIDTH="330px" HEIGHT="600px" STYLE="float: right"></IFRAME>
</BODY>
</HTML>

left.html

01	<!DOCTYPE HTML>
02	<HEAD>
03		<TITLE>left.html</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<META HTTP-EQUIV="Content-Language" CONTENT="ja">
06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
07		<SCRIPT TYPE="text/javascript">
08			page = 1;
09			function move(sw)
10			{
11				if (page != sw) {
12					if (sw == 1) {
13						if (page == 2)
14							parent.right.document.getElementById("right_top").src = "page1.html";
15						else
16							parent.right.document.getElementById("right_bottom").src = "page1.html";
17					}
18					else if (sw == 2) {
19						parent.right.document.getElementById("right_top").src = "page2.html";
20						if (page == 3)
21							parent.right.document.getElementById("right_bottom").src = "page1.html";
22					}
23					else {
24						parent.right.document.getElementById("right_bottom").src = "page3.html";
25						if (page == 2)
26							parent.right.document.getElementById("right_top").src = "page1.html";
27					}
28					page = sw;
29				}
30			}
31		</SCRIPT>
32	</HEAD>
33	<BODY CLASS="white" STYLE="text-align: center">
34		<OL CLASS="number">
35			<LI><A HREF="JavaScript:move(1)">ページ１</A>
36			<LI><A HREF="JavaScript:move(2)">ページ２</A>
37			<LI><A HREF="JavaScript:move(3)">ページ３</A>
38		</OL>
39	</BODY>
40	</HTML>

08 行目: 　　現在表示されているページ番号．
12 行目～ 17 行目: 　　ページ 1 （ sw の値）に変更する場合の処理である．現在のページ番号が 2 ( page の値）である場合は，ID 要素の値が right である IFRAME 要素内の，ID 要素の値が right_top である IFRAME 要素の SRC 属性の値を page1.html に変更している．また，そうでない場合（現在のページ番号が 3 ）は，ID 要素の値が right である IFRAME 要素内の，ID 要素の値が right_bottom である IFRAME 要素内 SRC 属性の値を page1.html に変更している．これらの処理によって，各 IFRAME 要素内には指定されたページが表示される．
18 行目～ 22 行目: 　　同様に，ページ 2 （ sw の値）に変更する場合の処理である．
23 行目～ 27 行目: 　　同様に，ページ 3 （ sw の値）に変更する場合の処理である．
28 行目: 　　変更したページを変数 page に保存．
35 行目～ 37 行目: 　　ページ名がクリックされると，関数 move が呼ばれる．その際，ページを指定する番号（ 1，2，または，3 ）が引数として渡される．

right.html：上部の IFRAME 要素内に page1.html，下部にも page1.html を表示

<!DOCTYPE HTML>
<HEAD>
	<TITLE>リンク（フレーム）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>
<BODY CLASS="white" STYLE="text-align: center">
	<IFRAME ID="right_top" SRC="page1.html" WIDTH="300px" HEIGHT="280px"></IFRAME>
	<IFRAME ID="right_bottom" SRC="page1.html" WIDTH="300px" HEIGHT="280px"></IFRAME>
</BODY>
</HTML>

page1.html

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ１</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<H1>文書１</H1>
	<H2>文書１</H2>
	<H3>文書１</H3>
	<H4>文書１</H4>
	<H5>文書１</H5>
	<H6>文書１</H6>
</BODY>
</HTML>

page2.html

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ２</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<H1>文書２</H1>
	<H2>文書２</H2>
	<H3>文書２</H3>
	<H4>文書２</H4>
	<H5>文書２</H5>
	<H6>文書２</H6>
</BODY>
</HTML>

page3.html

<!DOCTYPE HTML>
<HEAD>
	<TITLE>ページ３</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META HTTP-EQUIV="Content-Language" CONTENT="ja">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../../master.css">
</HEAD>

<BODY CLASS="white" STYLE="text-align: center">
	<H1>文書３</H1>
	<H2>文書３</H2>
	<H3>文書３</H3>
	<H4>文書３</H4>
	<H5>文書３</H5>
	<H6>文書３</H6>
</BODY>
</HTML>

アニメーション

　　このページは，DOM 機能とタイマー機能（ window オブジェクトの setTimeout 及び clearTimeout ）を利用したアニメーションです．「表示」ボタンをクリックするとアニメーションが開始します．

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		<STYLE TYPE="text/css">
08			BODY { width: 650px }
09			IMG.pos { position: absolute; top: 155px; left: 240px; z-index: 2; visibility: hidden; margin: 0px }
10		</STYLE>
11		<SCRIPT TYPE="text/javascript">
12			state   = 0;
13			timerID = 1;
14			function timer()
15			{
16				switch (state) {
17					case 0:
18						document.getElementById("fig1").style.visibility = "visible";
19						document.getElementById("fig2").style.visibility = "hidden";
20						document.getElementById("fig3").style.visibility = "hidden";
21						state = 1;
22						break;
23					case 1:
24						document.getElementById("fig1").style.visibility = "hidden";
25						document.getElementById("fig2").style.visibility = "visible";
26						document.getElementById("fig3").style.visibility = "hidden";
27						state = 2;
28						break;
29					case 2:
30						document.getElementById("fig1").style.visibility = "hidden";
31						document.getElementById("fig2").style.visibility = "hidden";
32						document.getElementById("fig3").style.visibility = "visible";
33						state = 0;
34						break;
35				}
36				clearTimeout(timerID);
37				timerID = setTimeout("timer()", 500);
38			}
39		</SCRIPT>
40	</HEAD>
41	<BODY CLASS="white">
42		<H1 STYLE="text-align: center">アニメーション</H1>
43		<P STYLE="text-align: center">
44			<BUTTON TYPE="button" onClick="timer()" STYLE="font-size:100%">表示</BUTTON>
45		</P>
46		<DIV STYLE="text-align: center; font-size: 100pt"><B>？</B></DIV>
47		<IMG ID="fig1" SRC="fig1.jpg" CLASS="pos">
48		<IMG ID="fig2" SRC="fig2.jpg" CLASS="pos">
49		<IMG ID="fig3" SRC="fig3.jpg" CLASS="pos">
50	</BODY>
51	</HTML>

09 行目: 　　IMG 要素の内，CLASS 属性の値が pos である要素（ 47 行目～ 49 行目）に対する STYLE 属性の指定である．画像の表示位置（position: absolute; top: 155px; left: 240px; ），表示順序（ z-index: 2; ），表示するか否か（ visibility: hidden;，hidden の指定により表示されない）などを指定している．
12 行目: 　　アニメーションの状態
13 行目: 　　タイマー番号
18 行目～ 22 行目: 　　アニメーションの状態が 0 である場合の処理である．18 行目においては，ID 属性の値が fig1 である要素（ 47 行目．球が左上にある図）を表示状態に設定している．また，19，20 行目では，ID 属性の値が fig2，及び，fig3 である要素（ 48，49 行目．球が下及び右上にある図）を非表示状態に設定し，21 行目において，アニメーションの状態を 1 に変更している．
24 行目～ 28 行目: 　　同様に，アニメーションの状態が 1 である場合の処理である．
30 行目～ 34 行目: 　　同様に，アニメーションの状態が 2 である場合の処理である．
36 行目: 　　タイマー timerID をクリアする．
37 行目: 　　500 ms 経過すると，関数 timer が呼ばれる．
44 行目: 　　このボタンをクリックすると，関数 timer が呼ばれ，アニメーションが開始される．
47 行目～ 49 行目: 　　3 つの画像を表示している．ただし，hidden 属性が設定されているため，「表示」ボタンがクリックされるまでは表示されない．

　　上の例では setTimeout と clearTimeout メソッドを利用しましたが，setInterval 及び clearInterval メソッドを利用しても可能です． -> 表示

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		<STYLE TYPE="text/css">
08			BODY { width: 650px }
09			IMG.pos { position: absolute; top: 155px; left: 240px; z-index: 2; visibility: hidden; margin: 0px }
10		</STYLE>
11		<SCRIPT TYPE="text/javascript">
12			state   = 0;
13			timerID = 1;
14			function start()
15			{
16				timerID = setInterval("timer()", 500);
17			}
18	
19			function timer()
20			{
21				switch (state) {
22					case 0:
23						document.getElementById("fig1").style.visibility = "visible";
24						document.getElementById("fig2").style.visibility = "hidden";
25						document.getElementById("fig3").style.visibility = "hidden";
26						state = 1;
27						break;
28					case 1:
29						document.getElementById("fig1").style.visibility = "hidden";
30						document.getElementById("fig2").style.visibility = "visible";
31						document.getElementById("fig3").style.visibility = "hidden";
32						state = 2;
33						break;
34					case 2:
35						document.getElementById("fig1").style.visibility = "hidden";
36						document.getElementById("fig2").style.visibility = "hidden";
37						document.getElementById("fig3").style.visibility = "visible";
38						state = 0;
39						break;
40				}
41			}
42		</SCRIPT>
43	</HEAD>
44	<BODY CLASS="white">
45		<H1 STYLE="text-align: center">アニメーション</H1>
46		<P STYLE="text-align: center">
47			<BUTTON TYPE="button" onClick="start()" STYLE="font-size:100%">表示</BUTTON>
48		</P>
49		<DIV STYLE="text-align: center; font-size: 100pt"><B>？</B></DIV>
50		<IMG ID="fig1" SRC="fig1.jpg" CLASS="pos">
51		<IMG ID="fig2" SRC="fig2.jpg" CLASS="pos">
52		<IMG ID="fig3" SRC="fig3.jpg" CLASS="pos">
53	</BODY>
54	</HTML>

18 行目～ 22 行目: 　　47 行目のボタンがクリックされると，この関数（ start ）が呼ばれ，アニメーションが開始される．16 行目は，500 ms 毎に関数 timer を呼ぶことを意味している．一定の時間毎に繰り返されるアニメーションを作成するには，こちらの方法の方が適しているかもしれない．

静岡理工科大学

菅沼ホーム

JavaScript目次

索引