変数の内容を増やす処理 (他にlocationも紹介)

スクリプトによるページ移動 (locationを使う)

JavaScriptのプログラムの実行で、希望のページに移動させる場合は
location.refに、=を使って移動先のアドレスを文字列でセットします。以下に例を示します。この例のプログラムは、このボタンで確認できます。

<html>
<head>
<script language="javascript"><!-- 
	function go_page(){
		location.href="ex/n1001.htm";
	}
// --></script>
</head>
<body>
<input type="button" value="クリックしたら\nex/n1001.htmへ移動するボタン" onclick="go_page()">
</body>
</html>

なお上記HTMLでは、ボタンが2行のサイズになっています。それは文字列に\nの改行させる指示の文字を含むからです。

変数の内容を増やす(または減らす)表現

変数=式; の表現で、変数の内容を、式の演算結果へ変更できます。
　　　　　　　　　　(例　a = 10 - 3 * 2;で式の演算結果の4で、変数aを変更します。)

ここで、変数を式の中に使うと、変数の変更前の値で演算したデータに変更できます。
例えば、a = 5;の後で、
a = a + 2;を実行すると、aは2増えて7になります。

例えば、a = 5;の後で、
a = a - 3;を実行すると、aは3減って増えて2になります。

なお、文字列の変数であれば+は連結演算になります。例えば、a = "5";の後で、
a = a + 2;を実行すると、aは2が連結されて"52"となります。

下記の部分は、変数を使ってテキストフィールドを変化させる例です。

これを実現するソースコードを下記に示します。

<script type="text/javascript"><!-- 
var b="1";
function btn_click1(){
	b = b + 2;
	document.form1.text1.value=b;
}
 --></script>
<form name="form1">
<input type="text" value="1" size="10"name="text1"><br>
<input type="button" value="2を連結する" onclick="btn_click1()">
</form>

下記の部分は、変数を使ってテキストフィールドを増やす例です。

これを実現するソースコードを下記に示します。

<script type="text/javascript"><!-- 
var c=1;
function btn_click2(){
	c = c + 2;
	document.form2.text2.value=c;
}
 --></script>
<form name="form2">
<input type="text" value="1" size="10"name="text2"><br>
<input type="button" value="2増やす" onclick="btn_click2()">
</form>

変数の内容を増やす処理やlocationを使う移動の練習

「増やす」のボタンクリックで、xxx の変数を増やして、それで移動のボタンの表示内容を変更します。変数の変更は、変数=変数 + 1;の表現を使ってください。この処理の関数名はxxxとします。
　また移動のボタンの名前をxxxとし、このボタンに使う関数名はxxxとします。このボタンはクリックで、表示に対応した番号の画像ファイルへ移動させます。
　フォームの名前は、xxxにしてdivの中に配置してください。 inputタグの属性は、 type value name onclick としてこの順番にして、必要ないものは省略してください。
なお、変数の初期値は間違っているので、正しい表現に変更する必要があります。

以下で、この問題で使われる画像ファイルを示します。これらのファイルは、出題されるHTMLの位置と同じディレクトリ内に位置するimgディレクトリ内に存在します。


n00.gif	n01.gif	n02.gif	n03.gif	n04.gif	n05.gif	n06.gif	n07.gif	n08.gif	n09.gif

参考：変数の内容を変更する処理