情報学部 菅沼ホーム 目次 索引

HTML 内データの参照・修正

      1. フォームと JavaScript
        1. 属性値の参照・変更
        2. 演習問題の解答（チェック）
        3. ラジオボタン，チェックボックス，ドロップダウンリスト（チェック）
        4. URL のパラメータ
      2. クッキーと JavaScript
        1. クッキーとその利用方法
        2. クッキーの利用例（ショッピング）
        3. インラインフレームの利用

  1. フォームと JavaScript

    1. 属性値の参照・変更

      　　フォーム関連要素に対する属性値の参照・変更は，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		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
007		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
008		<SCRIPT TYPE="text/javascript">
009			function soshin1(form)
010			{
011				let w = window.open("", "送信されたデータ");
012				w.document.open();
013				w.document.write('<HTML>\n');
014				w.document.write('<HEAD>\n');
015				w.document.write('	<TITLE>表示結果</TITLE>\n');
016				w.document.write('	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">\n');
017				w.document.write('	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">\n');
018				w.document.write('</HEAD>\n');
019				w.document.write('<BODY CLASS="white">\n');
020						// 名前
021				form.elements[0].value = "山田 太郎";
022				w.document.write(form.elements[0].value + '<BR>');
023						// 性別
024				form.elements[1].click();
025				w.document.write(form.elements[1].checked + '<BR>');
026				w.document.write(form.elements[2].checked + '<BR>');
027						// 好きな野菜
028				form.elements[3].click();
029				form.elements[5].click();
030				form.elements[6].click();
031				w.document.write(form.elements[3].checked + '<BR>');
032				w.document.write(form.elements[4].checked + '<BR>');
033				w.document.write(form.elements[5].checked + '<BR>');
034				w.document.write(form.elements[6].checked + '<BR>');
035						// 好きな果物
036				w.document.write(form.elements[7].options[0].selected + '<BR>');
037				w.document.write(form.elements[7].options[1].selected + '<BR>');
038				w.document.write(form.elements[7].options[2].selected + '<BR>');
039				w.document.write('</BODY>\n');
040				w.document.write('</HTML>\n');
041			}
042	
043			function soshin2(form)
044			{
045				let w = window.open("", "送信されたデータ");
046				w.document.open();
047				w.document.write('<HTML>\n');
048				w.document.write('<HEAD>\n');
049				w.document.write('	<TITLE>表示結果</TITLE>\n');
050				w.document.write('	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">\n');
051				w.document.write('	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">\n');
052				w.document.write('</HEAD>\n');
053				w.document.write('<BODY CLASS="white">\n');
054						// 名前
055				form.name.value = "鈴木 花子";
056				w.document.write(form.name.value + '<BR>');
057						// 性別
058				form.elements[2].click();
059				w.document.write(form.elements[1].checked + '<BR>');
060				w.document.write(form.elements[2].checked + '<BR>');
061						// 好きな野菜
062				form.v1.click();
063				form.v3.click();
064				form.elements[6].click();
065				w.document.write(form.v1.checked + '<BR>');
066				w.document.write(form.elements[4].checked + '<BR>');
067				w.document.write(form.v3.checked + '<BR>');
068				w.document.write(form.elements[6].checked + '<BR>');
069						// 好きな果物
070				w.document.write(form.list.options[0].selected + '<BR>');
071				w.document.write(form.list.options[1].selected + '<BR>');
072				w.document.write(form.list.options[2].selected + '<BR>');
073				w.document.write('</BODY>\n');
074				w.document.write('</HTML>\n');
075			}
076		</SCRIPT>
077	</HEAD>
078	<BODY CLASS="white">
079		<H1 CLASS="center">フォームの例</H1>
080		<FORM>
081			<LABEL>名前: </LABEL>
082				<INPUT TYPE="text" NAME="name" STYLE="font-size: 100%"><BR>
083			性別：<BR>
084			　　<INPUT TYPE="radio" NAME="sex" VALUE="Male"> 男性<BR>
085			　　<INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
086			好きな野菜：<BR>
087		　　	<INPUT TYPE="checkbox" NAME="v1" VALUE="n1"> キャベツ<BR>
088		　　	<INPUT TYPE="checkbox"> 大根<BR>
089		　　	<INPUT TYPE="checkbox" NAME="v3"> ジャガイモ<BR>
090		　　	<INPUT TYPE="checkbox"> トマト<BR>
091			好きな果物：<BR>
092			　　<SELECT MULTIPLE SIZE="3" NAME="list" STYLE="font-size: 100%">
093				　　<OPTION VALUE="f1"> 蜜柑 </OPTION><BR>
094				　　<OPTION> 林檎 </OPTION><BR>
095				　　<OPTION> 葡萄 </OPTION><BR>
096			　　</SELECT>
097			<P CLASS="center">
098				<INPUT TYPE="button" STYLE="font-size: 100%" VALUE="送信１" onClick="soshin1(this.form)">　
099				<INPUT TYPE="button" STYLE="font-size: 100%" VALUE="送信２" onClick="soshin2(this.form)">　
100				<INPUT TYPE="reset" STYLE="font-size: 100%" VALUE="リセット">
101			</P>
102		</FORM>
103	</BODY>
104	</HTML>
      011 行目

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

      021 行目～ 022 行目

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

      024 行目～ 026 行目

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

      028 行目～ 034 行目

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

      036 行目～ 038 行目

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

      055 行目～ 056 行目

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

      058 行目～ 060 行目

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

      062 行目～ 068 行目

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

      070 行目～ 072 行目

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

      098 行目

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

      099 行目

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

      100 行目

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

    2. 演習問題の解答（チェック）

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

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

      演習問題へ解答（チェック）

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

      　　答えが入力されているか否かのチェックを行っている．

      14 行目～ 17 行目

      　　名前が入力されているか否かのチェックを行っている．

      27 行目

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

      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;
}

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

      　　入力すべきところはすべて入力しても，場合によっては，誤って入力してしまう場合もあります．インターネットショッピングのような場合であれば，自分の希望しない商品が送られてくるようなことになります．そこで，重要な内容に関しては，送信内容を確認してから送信するようにすべきです．ラジオボタン，チェックボックス，ドロップダウンリスト等に対して，入力されたか否かのチェックをした後，その内容を確認してから送信するように 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		<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			sw1 = 0;
10			sw2 = 0;
11			sw3 = 0;
12			function sel(sw) {
13				if (sw == 1)
14					sw1 = 1;
15				else if (sw == 2)
16					sw2 = 1;
17				else
18					sw3 = 1;
19			}
20			function check(form) {
21				if (sw1 == 0) {
22					alert("性別を選択してください");
23					return false;
24				}
25				else if (sw2 == 0) {
26					alert("好きな野菜を選択してください");
27					return false;
28				}
29				else if (sw3 == 0) {
30					alert("好きな果物を選択してください");
31					return false;
32				}
33				else if(form.name.value =="") {
34					alert("名前を入力してください");
35					return false;
36				}
37				else {
38					let str = "名前： "+form.name.value+"\n";
39					if (form.elements[1].checked)
40						str += "性別： 男性\n";
41					else
42						str += "性別： 女性\n";
43					str += "好きな野菜：";
44					if (form.c1.checked)
45						str += "　キャベツ";
46					if (form.c2.checked)
47						str += "　大根";
48					if (form.c3.checked)
49						str += "　ジャガイモ";
50					if (form.c4.checked)
51						str += "　トマト";
52					str += "\n";
53					str += "好きな果物：";
54					if (form.list.options[0].selected)
55						str += "　蜜柑";
56					else if (form.list.options[1].selected)
57						str += "　林檎";
58					else
59						str += "　葡萄";
60					let result = confirm(str);
61					if (result == true)
62						return true;
63					else
64						return false;
65				}
66			}
67		</SCRIPT>
68	</HEAD>
69	<BODY CLASS="white">
70		<H1 STYLE="text-align: center">送信内容の確認</H1>
71		<FORM ACTION="radio.php" METHOD="post">
72			<DL>
73				<DT>名前: <INPUT TYPE="text" NAME="name" STYLE="font-size:90%">
74				<DT>性別：
75				<DD><INPUT TYPE="radio" NAME="sex" VALUE="Male" onClick="sel(1)">男性
76				<DD><INPUT TYPE="radio" NAME="sex" VALUE="Female" onClick="sel(1)">女性
77				<DT>好きな野菜：
78				<DD><INPUT TYPE="checkbox" NAME="c1" onClick="sel(2)">キャベツ
79				<DD><INPUT TYPE="checkbox" NAME="c2" onClick="sel(2)">大根
80				<DD><INPUT TYPE="checkbox" NAME="c3" onClick="sel(2)">ジャガイモ
81				<DD><INPUT TYPE="checkbox" NAME="c4" onClick="sel(2)">トマト
82				<DT>好きな果物：
83				<DD><SELECT NAME="list" onClick="sel(3)" STYLE="font-size:90%">
84					<OPTION VALUE="s1">蜜柑</OPTION>
85					<OPTION VALUE="s2">林檎</OPTION>
86					<OPTION VALUE="s3">葡萄</OPTION>
87				</SELECT>
88			</DL>
89			<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" onClick="return check(this.form)" STYLE="font-size:90%"></P>
90		</FORM>
91	</BODY>
92	</HTML>
      12 行目～ 19 行目

      　　ラジオボタン，チェックボックス，及び，ドロップダウンリストの項目が選択されたとき呼ばれる関数である．ラジオボタンの項目が選択されると sw1 の値が 1 に，チェックボックスの項目が選択されると sw2 の値が 1 に，また，ドロップダウンリストの項目が選択されると sw3 の値が 1 に設定される．09 行目～ 11 行目において，sw1，sw2，及び，sw3 の値はすべて 0 に設定されているため，これらの値によって，各項目が選択されていることの確認が可能になる．

      20 行目～ 66 行目

      　　「送信」ボタンがクリックされたとき，呼ばれる関数である．21 行目～ 32 行目においては，ラジオボタン，チェックボックス，及び，ドロップダウンリストの項目が選択されているか否かを調べ，33 行目～ 36 行目において，名前が入力されているか否かをチェックしている．38 行目以降はすべての項目が入力されている場合に対する処理であり．入力された項目を文字列 str に設定し，60 行目の confirm メソッドで確認を行っている．確認の結果，OK であれば，CGI プログラム radio.php にデータが送信される．

      　　なお，上の例においては，CGI プログラム（ radio.php ）は PHP で記述されており，そのソースコードは以下に示す通りです．送られてきたデータを表示するだけですが，実行可能です．なお，PHP に関しては，「 PHP と C/C++ 」を参照して下さい． 

      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>ラジオボタン，チェックボックス，ドロップダウンリスト</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>

    4. 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">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>

  2. クッキーと JavaScript

    1. クッキーとその利用方法

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

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

          のような場合は，
          informatics.sist.ac.jp
          を設定する．

        4. path=値： クッキーを有効としたいパス．指定したパス以下のディレクトリで有効となる．例えば，URLが

          https://informatics.sist.ac.jp/suganuma/JavaScript/

          のような場合は，
          /suganuma/JavaScript/
          などを設定する．設定しない場合は，値をセットしたときのカレントディレクトリになる．

        5. secure：記述すると セキュアな HTTPS 接続の場合にのみクッキーが送信されるようになる． 

        （書き込み）

<!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>cookie への書き込み（ JavaScript ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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/JavaScript/DOM_canvas/HTML/cookie/method/";
	</SCRIPT>
</BODY></HTML>

（読み込み）

<!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>cookie の読み込み（ JavaScript ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>
<HTML><HEAD>
	<TITLE>cookie への書き込み（ meta ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
					<!-- cookie への書き込み -->
	<META HTTP-EQUIV="Set-Cookie" CONTENT="article=data1:data2(meta); path=/suganuma/JavaScript/DOM_canvas/HTML/cookie/method/">
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">cookie への書き込み（ meta ）</H1>
</BODY></HTML>

（読み込み）

<!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>cookie の読み込み（ JavaScript ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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++ 言語」を参照して下さい．

        （書き込み）
		// HTML
<!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>cookie への書き込み（ CGI(C++) ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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/JavaScript/DOM_canvas/HTML/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>
<HTML><HEAD>
	<TITLE>cookie の読み込み（ CGI(C++) ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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 と C/C++ 」を参照して下さい．

        1. name： クッキーの名前

        2. value： クッキーに設定する値．「,」「;」「半角スペース」は使用しないこと．

        3. expire： クッキーの有効期限．UNIX 標準時（ 1970 年 1 月 1 日）からの秒数．設定しないと，ブラウザを閉じるときが有効期限となる．

        4. path： クッキーを有効としたいパス．指定したパス以下のディレクトリで有効となる．例えば，URLが
          https://informatics.sist.ac.jp/suganuma/JavaScript/
          のような場合は，
          /suganuma/JavaScript/
          などを設定する．設定しない場合は，値をセットしたときのカレントディレクトリになる．

        5. domain： クッキーが有効なドメイン．例えば，URLが
          https://informatics.sist.ac.jp/suganuma/JavaScript/
          のような場合は，
          informatics.sist.ac.jp
          を設定する．

        6. secure： 1 をセットすると セキュアな HTTPS 接続の場合にのみクッキーが送信されるようになる．デフォルトは 0 である． 

        （書き込み）

<?php
	setcookie("test", "article=data1:data2(PHP)", 0, "/suganuma/JavaScript/DOM_canvas/HTML/cookie/method/");
?>
<!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>cookie への書き込み（ PHP ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">cookie への書き込み（ PHP ）</H1>
</BODY></HTML>

（読み込み）

<!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>cookie の読み込み（ PHP ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>

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

      　　一般に，ショッピングサイトでは，複数のページに亘って商品の説明があり，それらのページで購入された商品は一つの買い物カゴに入れられ，最終的に購入することになります．この機能を実現するためには，各ページ間（特に，商品のページと買い物カゴのページ間）で情報を交換する必要があります．その際に，サーバ側またはクライアント側において，一時的にディスクにデータを保存し，そのデータを各ページから参照する方法が良く使用されます．クライアント側でそれを実現する唯一の方法がクッキーです．なお．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 と C/C++ 」を参照して下さい．さらに，「買い物情報クリア」ボタンをクリックすればクッキー内容のクリアが，また，「商品一覧へ」の部分をクリックすればさらに買い物を続けることが可能です．

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

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

      article.html：商品の選択

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

      20，24，32 行目

      　　これらの行に記述されている INPUT 要素は，TYPE 属性として hidden が設定されているため，ブラウザ上には表示されないが，それぞれ，関数 cart_in から，型番，商品名，及び，販売価格に対する情報を得るために使用されている．ただし，購入数に対しては，36 行目に示すように，TYPE 属性として text を設定し，ユーザがその値を変更できるようになっている．

      40 行目

      　　「カゴに入れる」ボタンをクリックすると，関数 cart_in が呼ばれ，カゴに入れようとしている商品の確認が行われる．

      79 行目

      　　「買い物カゴを見る」ボタンをクリックすると，買い物カゴの内容を表示するページ（ cart.html ）に移動する．

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

      01	<!DOCTYPE HTML>
02	<HTML><HEAD>
03		<TITLE>買い物カゴ</TITLE>
04		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
05		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
07		<SCRIPT SRC="control.js" TYPE="text/javascript"></SCRIPT>
08	</HEAD>
09	<BODY CLASS="white">
10		<H2 CLASS="center">買い物カゴ</H2>
11		<SCRIPT TYPE="text/javascript">
12			cart_content();   // 買い物カゴの中身を表形式で表示する関数
13		</SCRIPT>
14	</BODY></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/JavaScript/DOM_canvas/HTML/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/JavaScript/DOM_canvas/HTML/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/JavaScript/DOM_canvas/HTML/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	<HTML><HEAD>
03		<TITLE>購入</TITLE>
04		<META http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
05		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
06		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
07	</HEAD>
08	<BODY CLASS="white">
09		<H2 CLASS="center">購入された商品</H2>
10		<DIV>
11	<?php
12		$order = $_POST['order'];
13		$x     = strtok($order, ":");
14		$k     = 0;
15		while ($x !== FALSE) {
16			$type[$k] = $x;
17			$x = strtok(":");
18			$num[$k] = $x;
19			echo "商品 ". $type[$k]." 個数 ".$num[$k]." 個<BR>\n";
20			$x = strtok(":");
21			$k++;
22		}
23	?>
24		</DIV>
25	</BODY></HTML>

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

      　　「クッキーの利用例（ショッピング）」において，ページ間で情報交換をすることができないと述べましたが，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>
<HTML><HEAD>
	<TITLE>買い物</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>
<HTML><HEAD>
	<TITLE>買い物の制御</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>
<HTML><HEAD>
	<TITLE>商品一覧</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>
<HTML><HEAD>
	<TITLE>買い物カゴ</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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";
}

      order.php：商品の購入

      <!DOCTYPE HTML>
<HTML><HEAD>
	<TITLE>買い物カゴ</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<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>

情報学部 菅沼ホーム 目次 索引