変数を使う（文字列を扱う）

変数を使うと、それに情報を記憶して、後で使うことができます。

変数とは、名前を付けて管理する情報の入れ物です。 この変数と呼ばれる入れ物には、さまざまな種類のデータを記憶できて、記憶した内容を利用できます。
例えば 下の交換のボタンは、右と左の画像を交換しますが、 このような処理では、変数を使います。ここでは memo1の名前の、変数を使っています。 変数を用意する時、varのキーワードを使いますで、注目してください。
変数の名前の付け方は、関数の名前の付け方と同じです。そして関数名も含めて重複した名前を付けるべきではありません。
変更対象のsrcを、「画像ファイルパスの文字列」に変更することで、画像を変更します。
変更すると、変更前の情報が上書きされて無くなってしまうので、 変更前の「画像ファイルパスの文字列」を 変数に記憶してから 画像を変更します。 その後に、もう一方の画像を、変数に記憶しておいた 「画像ファイルパスの文字列」で変更することにより、交換の処理を行わせています。 (下記にこの動作の詳細な解説があります。)
なお、javascriptでは、「undefined」と呼ぶキーワードがあり、初期化されていない変数は「undefined」の状態になっています。

交換ボタンをクリックください。

上記の動作を確認してください。このhtmlは、次の内容です。

<html>
<head>
	<title>test</title>
<script type="text/javascript">
<!--
 var memo1 = "";

function btn_Click1(){
	memo1 = document.img1.src;
	document.img1.src = document.img2.src;
	document.img2.src = memo1;
}

// -->
</script>
</head>
<body>
<p>
<img src="img/faceA0.gif" name="img1">
<img src="img/faceB0.gif" name="img2">
交換ボタンをクリックください。<br>
<input type="button" value="交換" onClick="btn_Click1()">
</p>
</body>
</html>

bodyの画像タグ内の、img1と img2 に注目ください。ここで画像タグに、名前をつけています。 また、背景が黄色の範囲でプログラムを書いています。
この文字色の記述が、プログラムの範囲を指定している部分です。
その中の先頭で、var のキーワードにより、 memo1の名前の変数を用意し、 その記憶内容を空の文字列（""） に設定しています。
そして、この中にbtn_Click1の名前で、関数（かんすう:function）と呼ばれる命令を作っています。
btn_Click1の関数は、ボタン(button)をクリックした時に実行させるため、そのタグの中で
onClick="btn_Click1()"と指定しています。
このbtn_Click1の実行で、画像を交換するようにプログラムが書いてあります。
その動作を以下で解説します。

交換前imgタグのsrcの記憶内容を示します。
左のimgタグのsrc属性記憶内容    右のimgタグのsrc属性記憶内容
document.img1.src "img/faceA0.gif"    document.img2.src "img/faceB0.gif"

btn_Click1の実行で、どうように変わるかを 下のstepボタンで確認してください。
  document.img1.src document.img2.src
変数memo1の記憶内容
" " "img/faceA0.gif" "img/faceB0.gif"

function btn_Click1(){

memo1 = document.img1.src;

document.img1.src = document.img2.src;

document.img2.src = memo1;

}

上記が初期の状態です。下のstepボタンでbtn_Click1関数の動作をトレースできます。
（一般にトレースとは、行単位で実行をなぞるように実行させることです。）
stepボタンをクリックしてください。最初の行を実行します。
初期状態にしたい時は、ブラウザを更新してください。

このページは、ボタンクリックなどの確認すべき操作をすべて行わないと指示のページへのボタンが有効になりません。