そこで Netscape Communications Inc. は JavaScript を開発しました。これ は、単純なHTMLでは不可能な 動的処理をサーバ側 でなく クライアント側（ブラウザソフト上） で可能にするために開発され た言語（処理系）です。
つまり、Edge, Firefox 等のブラウザソフト が JavaScript を動かす インタープリタ（エンジン）を内蔵しているわけです。 もう少し言うと、現在では、ブラウザというソフトウェアは、の３つの機能を持つ（当初は先の２つしか無かった）、ということです。
- サーバと 通信 をする機能
- HTML をタグに従って 表示（レンダリング） する機能
- JavaScript を 実行（処理） する機能
ちなみに、 JavaとJavaScriptは異なる言語で、JavaScriptはJava の簡易 版などでは決してありません（！） ので、誤解しないようにしてくださ い。とはいえ JavaScript がJava を意識して作られたのは確かで、
もはやどちらも会社として存在しません。Netscape は AOL (America OnLine), Sun Microsystems は Oracle に吸収されています。
VB(A) の場合は SUB foobar ... END SUB のような形ででブロックを構成しています。
VB(A) の場合は文は原則１行なので、終わりに特殊な記号は付けません。逆に、 JavaScript の場合は ";" までは改行があっても無視され、単なる空白の扱い です。
VB(A) の場合は "()" で、関数呼び出しと一緒でややこしいです。
VB(A) の場合も、これは（たまたま？）共通です。
Edge, Chrome 等の ブラウザ とメモ帳, TeraPad 等の テキストエディタ があればすぐ動かすことが出来る（つまり動作環境を 簡単に用意できる）ので、初学者向けに「Javaを学習する前にJavaScriptを学 習しておくとJavaが分かりやすい」と言われることはあります。
HTML5 時代になって、かなり複雑になってきましたが…ちなみに Java 自体は 文法的には C++ の影響をかなり受け ていると思われ、上で述べてある特徴はほぼ C++ にも当てはまります。
とはいえAjax 時代になり DOM（後述）全盛の今では、オブジェクト指向と呼ぶ ほうが主流かもしれません。いずれにしても、プログラミングの中心的作業はオブジェクトに関するもので ありますので、以下、重要な概念である「オブジェクト」、 「プロパティ」、 「メソッド」について簡単に説明します。こ れらは VB.NET, Java等での概念とほぼ同じものなので、それらに馴染んでいる 人に特に問題はないと思います。
today=new Date();と記述すると、パソコンに内蔵されている時計の時刻から現在の年、月、日、 時、分、秒などのデータを作成して、todayに記憶します。また、todayに記憶 された時間を取り出すには、
hour=today.getHours();のように書きます。
たとえば、画面に情報を表示するDocumentというオブジェクトは、fgColor、 bgColorなどのプロパテイをもちます。前者は、Document上の文字の色 (foreground color) 、後者は背景の色(background color)を指定する機能が あります。
たとえば Document.fgColor="red" のように 記述すると、文字の色が赤になります。オブジェクトは、それぞれその機 能に見合ったいろいろなプロパテイをもっているので、プロパテイの意味 と使い方を知ることがJavaScriptを習得する重要な部分となります。これ らについては例題で少しずつ学習していきます。
document.write(abc）は、変数abcの内容を画面上に表示します。また、上記のgetHours() は、時間を入手するメソッドで、
hour=today.getHours()は、todayというオブジェクトから時間を入手して変数hourに記憶させるもの です。
いずれにしろ、JavaScriptでは、オブジェクトとプロパテイ、そして、オ ブジェクトとメソッドの関係を理解することが非常に大事です。
このソースは以下の通りです：
<html>
<body>
<script>
document.fgColor="#00ff00"; //←前景色（文字の色）を緑色に設定
document.bgColor="#ffffff"; //←背景色を白色に設定
document.write("<h1>**** WELCOME to JavaScript! ****</h1> ");
document.write("<h2>**** Let's learn JavaScript ! ****</h2>");
document.write("**** WELCOME to JavaScript ****");
</script>
</body>
</html>
ここで、簡単に説明しておきます。
JavaScriptの記述は、スクリプトの始まりを示す <script>と、終わりを示す </script> の間に書かれます。
<script> JavaScriptによる記述 </script>
このとき、scriptがJavaScriptであること（実は JavaScript 以外にも VBScript なども指定できる場合があります）の記述や、JavaScriptを読めな いブラウザのための配慮を次のように書くことがあります。<script language="JavaScript"> <!-- JavaScriptのコード // --> </script>ここで、
これら2つを組み合わせることで、HTML としても JavaScript としても文法的 に問題なく、かつ非対応ブラウザにとっては無いものとみなせることになりま す。とはいえ、最近では非対応ブラウザはかなり少なくなってきてる、という こともあり、これ以降このページの説明ではこれらの記述を省略します。
- <!-- と --> で囲まれてる部分（上の場合は3行）はHTMLとしての コメント（無視される部分）であり、
- // は JavaScript としてのコメント（その行が無視される）であるので、
document は、処理中の文書についての情報をもち、HTMLの出力を表 示するメソッドをもつ、基本中の基本のオブジェクトです。このオ ブジェクトは、anchor, form, bgColor, fgColorなどのプロパテイと、clear, close, open, write, writeln のメソッドをもちます。
前景色は、ドキュメント上のテキスト（文字）の色を示します。前景色は、ド キュメントのfgColorプロパテイにより、次の形式で示されます。
document.fgColor="# 色の指定"使用される色は、光の三原色（赤、緑、青）の各要素の濃さを「00」から「ff」 までの16進数2けたで表したものを、左から赤、緑、青の順にならべた文字定 数の形式で表現したものです。このとき、いちばん濃い色が「ff」で、また、 いちばん薄い色が「00」で表され、各色は256通りの濃さで表現されることに なります。したがって、赤、緑、青の組み合わせでは 256x256x256 = 16777216（約千七百万）種類の色の表現ができます。最近はあまり聞かなくな りましたが、これをフルカラーということがあります。
よく使用される色の例を次に示します。
| 16進数の表示 | 色の名称 | 16進数の表示 | 色の名称 |
|---|---|---|---|
| #FF0000 | 赤色 | #00FF00 | 緑色 |
| #0000FF | 青色 | #FFFF00 | 黄色 |
| #00FFFF | 水色 | #FF00FF | 紫色 |
| #FFFFFF | 白色 | #000000 | 黒色 |
| #808080 | 灰色 | #FF5500 | オレンジ色 |
| #7777aa | 青灰色 | #00FF11 | 蛍光黄緑色 |
色の表示には、この他、いくつかの英単語の色の名前を使用できます。たとえば、
document.fgColor="red";と書くと、前景色が赤となります。この方が上記の方法より楽なので、最近では、 特別の場合を除いて英語の色の名前を使用することが多いと思われます。
背景色は、ドキュメントの背景の色です。背景色は、bgColorプロパテイにより 次の形式で示されます。使用される色の指定は、上記と同様で、もちろん英単語 も使用できます。
document.bgColor="# 色の指定"たとえば、
document.bgColor="#0000ff"は、水色の背景色を表示します。また、
document.bgColor="pink"は、ピンクの背景色を表示することになります。
writeメソッドは、右側のかっこ内の文字列や、変数の内容を画面に 表示します。一般的なプログラムにとっての print 文と同じような意味合い （要するに、処理結果の単純出力）です。たとえば、
document.write("答えは",abc)
では、文字列の「答えは」と変数abcの内容が表示されます。ちなみに括弧内
には HTMLのタグも使用できるので、いろいろな表現が可能です。と
いうか、HTML を吐き出すための仕組みが document.write だ、という捉え方
もできます。
なお、繰り返しになりますが、<h1>、<h2>などのタグは、本来 「見出し」という意味構造を付与するためのタグであり、文字の大き さを表すためのものではないことに注意してください。文字の大きさなどは、 スタイルシートで指示すべきものでしょう。
このソースは以下の通りです：
フォーム（form）は、JavaScript ではなくHTMLで規定されている機能です。 テキストを入力したり、チェックボックス、ボタンなどのいろいろなオブジェ クトから何かを選択するときに使用されるオブジェクトです。ちなみにフォー ムは、JavaScript だけではなく CGI での入力、すなわちサーバーにデータを 送る場合にも使います。フォームとフォームの中に書かれるinputタグ及びボ タンの属性については詳細は略しますが、ここでは、このようにすればスクリ プトが呼べる、くらいを覚えておいてもらえればいいでしょう。
（特にGUI アプリケーションで）ある動作を行うこと（発生した動作）を イベント(event, 出来事）といいます。マウスでボタンをクリックした り、マウスのカーソルを画面の特定の位置を横切ったり、また、データを入力 したりすることはすべてイベントです。そして、あるイベントが生じたときに、 特定の処理を行うようにすることができます。イベントハンドラー (event handler) とは、このために使用するものです。
VB で Button1_Click とかでコマンドボタンをクリックされた時の処理をプ ロシージャとして記述するのと同じです。クリックイベントが発生した場合に実行される手続きは、onClickイベント ハンドラーによって示されます。この形式は
onClick=" 実行される手続きを示すJavaScriptのコード "です。この例題では、フォームのボタンがクリックされるとウインドウ上にア ラートダイアログボックスがポップアップされて表示されます。JavaScriptで 書かれたコードは、このようにイベントハンドラーの中にも書くことができま す。
アラート(alert)ダイアログボックスは、メッセージとＯＫ ボタンだけを表示するボックスで、ある状況の確認だけを 行います。
VB の MsgBox と同じです。このボックスから、ユーザがなにかを選択することなどはできません。ち なみにダイアログ(dialog(ue))は「対話、問答」とい うような意味です。アラートダイアログボックスの形式は、
alert（"表示するテキスト"）です。ですので、この例題では、「ようこそ JavaScriptへ」という文字 が表示されるわけです。ちなみにコードでは ' (single quote、引用 符）で文字列がかこまれていますが、これはイベントハンドラを示 すために " (double quote、二重引用符）で囲っているので、" をつかうとその囲いをはずすことになってしまうからです。文字列を指定 するのは JavaScript では'' (single-quote pair) でも "" (double-quote pair) でもどちらでもよいことになっています。
このソースは以下の通りです：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
now= new Date();//←現在の時刻の取得
document.write(now);//←オブジェクトnowの内容を表示
document.write("<hr size=10>");//←水平線を引くHTMLタグ
year=now.getYear();//←ここからは、年、月、日、時、分、秒の取得
year=(year < 2000) ? year+1900 : year;//ここでブラウザの差を補正している
month=now.getMonth()+1;
date=now.getDate();
hour=now.getHours();
minute=now.getMinutes();
second=now.getSeconds();
document.write("今は，",year,"年",month,"月",
date,"日",hour,"時",minute,"分",second,"秒です。");//←取得したデータを表示
</script>
</body>
</html>
HTML5 時代になって、ブラウザ自体がかなりかわってきていることもあり、特 に文字コードまわりは注意が必要になってきています。ASCII だけのページの 場合は問題がないのですが、漢字仮名をつかう場合、以前は JIS (ISO-2022-JP 7bit code) であれば大抵大丈夫だったのですが、今はしっかり 指示してやらないといけません。
実は前のサンプル２でも指示してましたが、時間の関係で説明を後回しにして いました。
そこで、まず HTML タグの前に
<!DOCTYPE html>としてやることでこの文書が HTML5 準拠であることを示した上で、 HEAD 要素の中で META タグの属性指定を使って
<meta charset="UTF-8">として、この文書の 文字コード が UTF-8 である、とブラウザに教 えてやればいいでしょう。もちろん他のコードでもいいのですが、昨今では （国際化も考慮して？）UTF-8 を使っておくのが無難なようです。もちろんそ の場合、HTMLファイルの文字コードも UTF-8 で保存しないといけないのは言う までもありません。
要するに meta での宣言とそのファイルのコードがあっていれば良いので、ちゃ んと理解した上でなら SHIFT_JIS や ISO-2022-JP を使っても問題はありませ ん。
現在の時刻を取得するオブジェクト変数名を now とすると、
now = new Date()という式で、現在の時刻(年、月、日、時、分、秒)をもつオブジェク ト を新たに 生成 (new) し、 ＝（代入） によって、 そのオブジェクトをオブジェクト変数、つまりオブジェクトを預っておく箱 （？）である now が受け取ります。この時刻は、システム内部で管理されてい るものです。ちなみにこの生成されたオブジェクト（この場合now）のことをイ ンスタンスと言い、雛型のオブジェクト（この場合Date) であるクラスと言い 分ける場合があります。なおシステムの制限で 1970年以前 の時間は使用できないことになっ ています。 これは、主に UNIX/C の実装による制限であり、 2038年問題 としてもよく知られています。 この例題では、こうして得られたnowオブジェク トの内容を
document.write(now)で表示しています。この時 now オブジェクトの内容は適宜文字列に変換されて から表示されていることになります。その際、そのパソコンが使用されている 地域に応じて、東京（標準時）, JST, PST, UTC, GMTなどの語が表示されます。 ちなみにPST は、太平洋標準時間（Pacific Standard Time）です。 UTC は協 定世界時 (Universal Time, Coordinated)で、GMT ＝グリニッジ標準時 (Greenwich Mean Time) と（ほぼ）同じ時間を表します。
厳密にいうと、GMT は微妙にずれるのですが、UTC は原子時計を使っていてず れを補正するので、UTC のほうが正確です。
Date のオブジェクト（インスタンス）から年、月、日などを取得するには、 次のメソッドを使用します。
| メソッド | 説明 |
|---|---|
| getYear() | 西暦の年の取得：ただし、(Mozilla 等のブラウザに 対応する、等）必要な場合は、1900を加えます。 |
| getMonth() | 月の取得：ただし月は１月を「０」，２月を「１」とする整数で表されているので、 1を加えて正しい月名とします。 |
| getDate() | 日の取得：1から31までの整数が取得されます。 |
| getDay() | 曜日名の取得：日曜日が「０」、月曜日が「１」の ように取得されます。 |
| getHours() | 時間の取得：0から23までの整数が取得されます。 |
| getMinutes() | 分の取得：0から59までの整数が取得されます。 |
| getSeconds() | 秒の取得：0から59までの整数が取得されます。 |
上で述べたようにnowには、年、月、日、時、分、秒が記憶されています。この オブジェクトから年、月などを個別に取り出すには、上記のメソッドを使用して
year = now.getYear()などと記述します。このようにすると変数 yearには、取得された年の値が記憶 されるわけです。
このソースは以下の通りです：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function getname(str) { // 関数の定義
alert("今日は, " + str + "さん!");
}
</script>
</head>
<body>
氏名を入力してください。入力が終わったらＴＡＢキーを押してください。
<form name="form1">
<input type="text"
name="yourName"
onBlur="getname(this.value)"
value=""> <!-- 入力された値は、このvalueに記憶される -->
</form>
</body>
</html>
function は JavaScript を構成する基本的な要素のひとつです。function は、 ある処理を行うためのひとつ以上のステートメントの集まりをまと めたもの です。そして、function はあるまとまった（何回も同じよう なことが行なわれる）処理を モジュール化 しておくことで、 繰り返し使いやすくする と同時に バグもはいりにくく しま す。
ここで、function は特にどれかのオブジェクトに属しているわけではないこと に注意してください。 Java などでは全てのメソッドはかならずなにかのオブジェ クトに属していたわけですが、JavaScript ではそのような縛りはありません。 これが、「オブジェクト指向」ぽく無い要素の1つであったりします。functionを定義する形式は、次のとおりです。…と昔は説明していましたが、HTML5 時代では、形式的には document オブジェ クトのメソッドの扱いになるようです。VB でプロシージャと呼ばれてたものがこれに対応するわけです。VBでは返り 値を持つものが Function プロシージャ、そうじゃない（値をかえさない）も のは Sub プロシージャと（宣言形式から）わけられてましたが、JavaScript ではなんでも function です (C/C++ 風）。ちなみに VBA ではプロシージャは必ずしもオブジェクト（クラス）に属する わけではありませんでしたが、VB.NET ではオブジェクト指向を極めてる（？） ので、原則として必ずなんらかのクラスに属します（メソッドの位置付け）。
…と昔は説明していましたが、今の VBA では、Project 内の Module オブジェ クトのメソッドの扱いになるようです。ただ、それを意識する場面はほとんど 無いと思います。
function ファンクション名（引数名１、引数名２，…引数名） ｛ 処理内容を示すひとつ以上のステートメント ｝
引数名は、このファンクションを利用するときにこのファンクションに渡され るデータの名前です。なお、引数を必要としない場合は、 ()だけ を 書きます。この例題では、strを引数とする getname(str) というファンクショ ンが定義されています。その内容:
alert("今日は, " + str + "さん!");
は、 「今日は」という文字列と、
引数（str）の内容と、
「さん！」という文字列を 「＋」で繋げて、
今日は，引数（str）さん！のように引数の前後に文字をつけてアラートボックスに表示するものです。
VBA では 「＆」で文字列を連結していましたが、 JavaScript では「＋」で繋げます。言語によって同 じことを違うやりかたでやるのでややこしいですが、そういうものだと思って ください（？）ちなみにCだと、strcat() 関数を使わないと文字列と文字列は 繋げられません（！？詳細略）そして、このファンクションは、フォーム中の onBlurイベントハンドラー で呼び出されるわけです。ちなみに fucntionは通常ヘッダ部、すなわ ち
<head>………………</head>の中に定義します。というのは、ヘッダ部でファンクションを一度定義しておく と、プログラムのいろいろな場所から何度でも呼び出して使用でき、便利だから です。
onBlur は、あるオブジェクト（例えばテキストボックス）が フォーカ ス を失ったときに実行されるイベントハンドラーです。フォーカスとは、 今注目されてるところ、といった意味で、具体的には テキストボックスの場 合だとクリックして入力待ちしてる状態 のことです。 この例では、テキストボックスに氏名を入力した後、tabキーを押す か、テキストボックス以外のフォーム上でマウスをクリック したりすると、このテキストのvalueにその名前が記憶されるとともに、 フォーカスが失われますのでonBlur イベントが発生し，この場合には関数の getnameが実行される、という流れです。このとき valueに記憶されているデー タが引数として、getname に渡されます。
なお this.value の this は「このオブジェクト」という意味で、この場合に は input オブジェクトを表します。したがって this.value はその value プロパテイの内容を指しています。
このソースは以下の通りです：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Cookie sample</title>
<script language="JavaScript">
function getCookie(str) {
tmp = document.cookie+";";
tmp1 = tmp.indexOf(str,0);
if (tmp1 != -1) {
tmp = tmp.substring(tmp1, tmp.length);
start = tmp.indexOf("=",0)+1;
end = tmp.indexOf(";",start);
return(unescape(tmp.substring(start, end)));
}
return("");
}
function inputName() {
names = prompt("名前を入力してください。","Your Name");
if (names == null) {
inputName();
}
setCookie("Name", names);
}
function setCookie(key,value) {
tmp = key + "=" + escape(value) + "; ";
day=new Date();
day.setTime(day.getTime() + 30 * 24 * 60 * 60 * 1000); // 30日
tmp += "expires=" + day.toGMTString() + ";";
document.cookie=tmp;
}
function deleteCookie() {
if (document.cookie != "") {
tmp = document.cookie.split(";");
expireDate = new Date();
expireDate.setYear(expireDate.getYear() - 1);
for (i=0;i<tmp.length;i++) {
cname = tmp[i].split("=")[0];
document.cookie = cname + "=; expires=" + expireDate.toGMTString();
}
alert("cookie を" + tmp.length + "個、削除しました。");
} else {
alert("削除すべきcookie はありません。");
}
}
</script>
</head>
<body>
お名前を覚えます。
<script language="JavaScript">
names = getCookie("Name");
if (names == "") {
inputName();
}
document.write("ようこそ、" + names + " さん！");
</script>
</body>
</html>
今回は結構ステップ数が多いので、いつも以上に簡単に解説します。
リンクをたどって画面が変わったら、前にいた画面の情報は無くなってしまう、 ということですから、折角ログインしても、その情報の行き場がない、という わけです。そこで、最近の Web アプリケーションではいろいろな方策がこうじられており、 その中の代表的なものとしてクッキーがあるというわけです。これは、例外的 にほんの少しの情報だけ サーバー から クライアント側のディ スク に情報を置かせてもらうことで、このセッション管理などを可能と する機能です。
とはいえ、ブラウザやサーバーのバグ（セキュリティホール）等で別のサイト でうめたクッキーを参照できることが絶対にないとはいえません。よく知られ ているものには XSS （クロスサイトスクリプティング）と呼ばれるものがあり ますが、詳細はここでは略します（別資料で説明の予定）。クッキーにはセッ ション情報として、認証のためのユーザＩＤとパスワードが入っている場合が あったり、さらに（最近はさすがにほとんど見かけませんが）クレジットカー ドの番号等個人情報がある場合もあるので、セキュリティホールの情報には常 に敏感であるとともに、個人情報を安易にクッキーに置くことはシステム設計 として避けるべきです。
document.cookieと、document オブジェクトのcookieプロパティを参照したり 設定したりすることで、クッキーを操作します。 その内容は
要素名 = 要素内容 ;です。上の例では Name という要素名にユーザ名を埋め込むこと にしていて、最初にアクセスしたときには設定されてないので inputName() 関数を呼び出して設定します。２回目以降は既に設 定されてるのでそれを読み出して表示する、ということをしてま す。
有効期限設定ためのキーワードが expires です。上でも使われているように
day=new Date(); day.setTime(day.getTime() + 30 * 24 * 60 * 60 * 1000); // 30日 tmp += "expires=" + day.toGMTString() + ";";と書き足すことで、このクッキーの有効期限が30日という設定をすることがで きます。つまり、
ちなみに a+=b とは a=a+b と同じで、要するに、「a に b を足す」とは「 a に b を足した値が新たに a の値になる」ということです。慣れれば += のほ うが理解しやすいと思います。実はこの演算子は C++/Java/VB.NET 他、かな りのプログラミング言語で使えます。これはクッキーの消去に利用できます。すなわち、有効期限を過去の時点 と設定しなおせば、自動的に消えるということです。このサンプルでは （実際に利用はしていませんが）この仕組みを使った deleteCookie() と いう関数が用意されていますので、これを呼び出すとクッキーが消せます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Anim. Sample page</title>
<SCRIPT LANGUAGE="JavaScript">
var delay = 1000; // 切り替え周期（m秒）
var pages = 5; // 画像の枚数
//------------------------------------------------
var ii = 0;
il = new Array();
for (i=1; i<=pages; i++) { // 画像は img001.gif から決め打ち
il[i] = new imageItem("img00" + i + ".gif");
}
function imageItem(iloc) {
this.image_item = new Image();
this.image_item.src = iloc;
}
rotateImage = function () {
ii = ii % pages + 1;
var new_image = il[ii].image_item.src;
document["target1"].src = new_image;
setTimeout(rotateImage, delay);
}
function speedup() {
delay /= 2;
}
function speeddown() {
delay *= 2;
}
</script>
</head>
<body OnLoad="rotateImage('target1')">
<FORM>
<INPUT TYPE="button" VALUE="Speed up" onClick="speedup()">
<INPUT TYPE="button" VALUE="Speed down" onClick="speeddown()">
</FORM>
<br>
<img name="target1" src="img001.gif" width=441 height=331>
</body>
</html>
これも長いので、さらに簡単に説明します。ヘッダの部分や変数の定義はおいといて；
il = new Array();
for (i=1; i<=pages; i++) { // 画像は img001.gif から決め打ち
il[i] = new imageItem("img00" + i + ".gif");
}
function imageItem(iloc) {
this.image_item = new Image();
this.image_item.src = iloc;
}
では、まず（何でもOKの）オブジェクトの配列を生成して il にお
きます。それで、その配列要素として imageItem で生成したオブジェクトを
おいていってます。
この場合、imageItem は function （関数）として定義されていますが、実 質はオブジェクトを生成するためのクラスの宣言であることに注意してくだ さい。JavaScript には、つい最近までclass のキーワードはなく、関数と クラスの区別はなかったです（どちらもオブジェクト）imageItem で生成されものは、引数としてわたされた画像 ファイル名がさす画像ファイルそのものです。実はこれは結構メモリを消費し ますので、枚数が多い場合には注意が必要です（動作が重くなったりする）。
rotateImage = function () {
ii = ii % pages + 1;
var new_image = il[ii].image_item.src;
document["target1"].src = new_image;
setTimeout(rotateImage, delay);
}
は、少し書き方は変わってますが、関数を オブジェクトとして定
義 （上述）し、さらに言うと、再帰呼び出し になってます。
ii はグローバル変数（どの関数からでも操作できるもの）です。ii % pages + 1で、ページ数で ii を割った余りに１加えたものを新たな ii とする、すな わち、１つずつ足すんだけど、ページ数の上限までいったら１に戻る、という 処理です。
やさしく（？）書き直せばii は実は画像（を持ってる上のオブジェクト配列の要素）の番号を示してたわ けで、その画像を新たに呼び出して、ii = ii + 1; if (ii > pages) ii = 1;と同じ処理を１行ですませているわけです。
document[img].src = new_image;とすることで、画像を表示しなおします。そして、setTimeout で delay だけ 待って、rotateImage で示されてる関数、すなわち自分自身を呼び出しな おす＝再帰呼び出しする ことで、描画を繰り返す、というわけです。
ここで、rotateImage という 変数に、関数自体を代入している（出来る） ことに注意しておいてください。JavaScript では、関数もオブジェクト （プログラムの部品）として取り扱うことができます。これは、VisualBasic 等ではありえない記述です。JavaScript では、このように、名前の無い関数を つくって変数に代入したり、さらに、それを後で呼び出すということも可能と なっています。このような仕組みの一般的な枠組みを クロージャー (closure) といいますが、詳細は略します。
前述のとおり（特に画像の取り扱い等で）ブラウザによって挙動がかわる 可能性があることは頭の片隅においておいたほうがいいかもしれません。 実際、上のアニメーションは昔の Firefox ではうまく動いてくれませんでし た。。ですので、親切なページではブラウザの判定をした後で適宜スクリプト をスイッチさせているようです。今では、jQuery などが ラッパー (wrapper, ソフトウェア的に皮を被せることで差異を吸収するもの） と して使われることが多いです。jQueryは上であげたクロージャーをうまく活用 しています。その分、お世辞にも記述が美しいとは言えないですが…（詳細略）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JavaScript sample</title>
<script language=javascript>
<!--
function anscheck (f, op) {
var flag = 1;
flag &= anscheck0 (f.val00.value, f.val10.value, f.cell00, op);
flag &= anscheck0 (f.val01.value, f.val10.value, f.cell01, op);
if (flag == 1)
alert("Very Good! (^_^)");
else
alert("だめ！もう一度計算して！！");
}
function anscheck0 (b1, b2, c, op) {
for (i=0; i < b1.length; i++) {
c1 = b1.charAt(i);
c2 = b2.charAt(i);
c0 = c.value.charAt(i);
if (op == "AND") {
if (calcand(c1,c2,c0) != 1) {
c.style.color = "red";
return 0;
}
} else if (op == "OR") {
if (calcor(c1,c2,c0) != 1) {
c.style.color = "red";
return 0;
}
} else {
alert("何を計算するの?!");
}
}
c.style.color = "black";
return 1;
}
function calcand(c1,c2,c0) { // CALCulate AND
if (c1 == "1" && c2 == "1") {
return c0 ;
} else {
return c0 == "1" ? 0 : 1 ;
}
}
function calcor(c1,c2,c0) { // CALCulate OR
if (c1 == "0" && c2 == "0") {
return c0 == "1" ? 0 : 1 ;
} else {
return c0 ;
}
}
// -->
</script>
</head>
<body>
<h1>
ビット演算の演習用ページ
</h1>
<FORM>
<table border=1>
<tr>
<th> AND/OR </th>
<input type=hidden name=val00 value="100101">
<th> 100101 </th>
<input type=hidden name=val01 value="011010">
<th> 011010 </th>
</tr>
<tr>
<input type=hidden name=val10 value="111001">
<th> 111001 </th>
<th>
<INPUT TYPE="text" NAME="cell00" VALUE="" SIZE=7>
</th>
<th>
<INPUT TYPE="text" NAME="cell01" VALUE="" SIZE=7>
</th>
</tr>
</table>
<p>
<INPUT TYPE="button" NAME="kaitou00" VALUE="AND（論理積の計算チェック）"
onClick=anscheck(this.form,"AND")>
<INPUT TYPE="button" NAME="kaitou00" VALUE="OR（論理和の計算チェック）"
onClick=anscheck(this.form,"OR")>
</FORM>
<p>
<p>
</body>
</html>
とはいえ、少しだけ簡単にコメントすると、
今後も学習していないタグなどがいっぱいあるかもしれませんが、動作を確認 しながら、自力で読みとおす訓練（？）をしてください。必要に応じて google, yahoo などで調査（検索）する習慣もつけましょう。
このあたりが理解できると、JavaScript の世界が広がると思いますし、その延 長でオブジェクト指向プログラミング自体の理解が深まるでしょう。