practice

<img id="目印_画像"onclick="ねくすと()"src="Test_img_1.jpg"width="100"height="100">
 
<h1 style="font-size:20px;color:blue;margin-left:300px;">JavaScript の翻訳</h1>
onclick="ねくすと()"
event handler(イベント・ハンドラー)で, クリックしたときに「ねくすと()」という関数が作動することを宣言する.
 
画像=new Array("Test_img_1.jpg","Test_img_2.jpg","Test_img_3.jpg","Test_img_4.jpg");
new Array() は JavaScript に組み込まれている配列を宣言できるオブジェクトです. → Test_img_1.jpg を数字の 0 とする / Test_img_2.jpg を数字の 1 とする / Test_img_3.jpg を数字の 2 とする / Test_img_4.jpg を数字の 3 とし, 0 - 1 - 2 - 3 という順番で 4つの数の配列番号を「画像」という変数名に置き換えて宣言する.
 
数=0;
変数名 → 「数」 を数字の 0 と宣言する.
 
function ねくすと() { 〜 }
onclick で, クリックしたときに何かが作動する「ねくすと」という名前の関数を宣言する. すなわち{ 〜 }
 
{if(数==3){数=0;} 
else 
{数++;}
「数」 は 0であると先ほど宣言したが, {数++;} クリックされると数字が一つづつ増える. if(数==3) もしもクリックによって数字が増えたとしても 3 になったらそれまで. その次のクリックで 0 にもどり, 0 - 1 - 2 - 3 を繰り返す.
 
document.getElementById("目印_画像").src=画像[数];} 
getElementById("目印_画像") 目印がつけられた場所のソースはもともと "Test_img_1.jpg" であったが, クリックされると配列番号が 0 から 1 のように順に置き換わる. 結果は一つ目のクリックで &lt;img id="目印_画像"onclick="ねくすと()"src="Test_img_2.jpg"width="100"height="100"&gt; となる.
 <hr> 
<img id="目印_がぞう"ちぇんじ="切り替え()"src="Test_img_1.jpg"width="100"height="100">
<img id="目印_がぞう"onclick="切り替え()"src="button.jpg"width="30">
 <hr> 
<img id="目印_ふぉわーど"src="Test_img_1.jpg"width="100"height="100">
<input type="button"onclick="ばっく()"value="Back">
<input type="button"onclick="ふぉわーど()"value="Next">

</html>