JavaScriptはオブジェクト指向のスクリプト言語である．ただし，この演習 ではプログラミングが主目的ではないため，必要最小限の説明にとどめる．
オブジェクト(Object)とは，なにか「モノ」を表す言葉である．オブジェク ト指向言語では，プログラムで操作する対象となるすべてのものをオブジェクト として扱い，オブジェクトとオブジェクトとの関係やオブジェクトの属性を指示 していくことで，目的のプログラム動作を記述する．
オブジェクトに対して，そのオブジェクトが持つ属性のことは，JavaScript の場合「プロパティ」と呼ぶ(別の言語では別の表現となることもある)．また， そのオブジェクトが持つ機能のことを「メソッド」と呼ぶ．
メソッドは，基本的にプロパティの内容を変更する機能を提供したり，それ 以外のオブジェクトに対する操作も含む．
オブジェクトのプロパティが，さらに別のオブジェクトになっているこ ともある．このとき，元のオブジェクトのことを「親」，プロパティになってい るオブジェクトの方を「子」として喩えられる．
例えば，画面に表示されている一つのウィンドウをオブジェクトとして考え てみる．このウィンドウには，いくつものボタンやメニューを持っている．ウィ ンドウのプロパティとしては高さや幅のようなものの他にも，これらのボタンや メニューもプロパティとしてとらえることもできる．しかし，このボタン自体に も幅や高さというプロパティが存在する．つまりウィンドウのプロパティ であるボタンも立派なオブジェクトと考えられる．
このように親子関係があることを階層構造と呼ぶ．また，この場合には「オ ブジェクトには階層性がある」「オブジェクトは階層構造を持っている」などと 表現する．
さて，もう少し考えを一般化させる．「親」と「子」があるならば，当然 「孫」も存在し，さらに何代分もの子孫も考えられる．このようにまるで家系図 のような何代にもわたるオブジェクトの系列が存在する可能性がある．
家系図を見ればわかるが，一番の祖先は一人か二人でも，その子孫はどんど ん増えて枝分かれしている．これは樹木が，一本の幹から枝分かれしてどんどん 枝の数を増やしていくことに喩えられる．
コンピュータの世界では，一般的にこのような枝分かれするような構造のこ とを木構造(ツリー構造)と呼ぶ．この場合には「オブジェクトツリー」と呼ぶこ とになる．
JavaScriptの場合には，対象がWebページだけである．つまりWebページを表 示しているブラウザのWindowが対象のすべてと考えてもよい．そこで， JavaScriptではwindowオブジェクトを，第一の祖先と考える．
このwindowsオブジェクトには，ウィンドウの名前を示すnameやウィンドウ位 置を示すlocation，ページ内容を示すdocumentなどのプロパティがある．それぞ れのプロパティはさらにプロパティを持っている．
このWindowsオブジェクトの階層は，ブラウザによって差異が存在するのだが， 例えばこの ページの後半ににまとめられている．
JavaScriptではオブジェクトの中のプロパティやメソッドを指定するのには 「.」記号を使って表記する．例えば次のようなものである．
window.document.sample.width = 320; window.document.sample.height = 240;
これは，windowsオブジェクトのdocumentプロパティを示す，さらにその document が持っているsampleプロパティ，そしてsampleが持っているwidthプロ パティとheightプロパティに値を代入していることを示す．sampleプロパティは ユーザがページ中に記述した画像データや，図表などのオブジェクトを示す例で ある．
同様にメソッドを「呼び出す」ためにも，同様に「．」記号を用いる．
window.open("URL名","ウィンドウ名","付加するウィンドウ属性");
window.alert("表示する文字列");
メソッドを呼び出すとは，そのオブジェクトが持っ ている機能を実際に実行させることを表す慣例表現である．メソッドを呼び出す には，メソッド名に続く括弧の中に，メソッドごとに定められている引数を書く 必要がある．引数とはメソッドに対する要求事項を具体的に示したものである． これをメソッドに「引数を渡す」と表現する．
JavaScriptから見ると，windowオブジェクトがオブジェクトツリーの根本に 当たるため，毎回windowsオブジェクトを指示することになる．このため， windowオブジェクトだけは省略してもよいことになっている．例えば，上記の例 は次のように書いてもまったく同じ意味で解釈される．
document.sample.width = 320;
document.sample.height = 240;
open("URL名","ウィンドウ名","付加するウィンドウ属性");
alert("表示する文字列");
Webページを表示しているウィンドウには，ボタンやメニューなどシステム側 で提供されるものだけではなく，そもそも表示している文書や，画像，入力フォ ームなどWebページ作成者が任意に用意したコンテンツが含まれる．JavaScript からこれらを操作するためには，それぞれ名前を用意して操作することになる．
例えば，次のようにimgタグで読み込まれる画像データがあったとする．
<img src = "sample.jpg">
JavaScriptからこの画像データを操作するためには，次のように名前を定義す る．名前は任意のもので構わない．
<img src = "sample.jpg" name="名前"> 例: image1と名前を付ける <img src = "sample.jpg" name="image1">
この上で次のように，documentのプロパティの一つとしてアクセスすること ができる．
window.document.名前.width = 320; //画像の幅を320に変化させる
または，次のように番号で指定する方法もある．
window.document.images[番号].width = 320;
この番号は，HTMLファイル中に存在するimgタグの順番に対応している．表示 順ではなくあくまでHTMLソースの中における順番である点に注意．例えば imges[5]とは，HTML中で頭から見て5番目のimgタグで指定された画像のことにな る．
先ほどのimages[番号]のように，同様のいくつものデータを番号付けする方 法が「配列」と呼ばれる形式である．imagesの場合にはシステム側が用意してく れるため，そのまま使うことができる．
JavaScriptの文法の最初にあったよ うに，JavaScriptのプログラムでは変数を使うことができる．もしも，同様のい くつもの変数がある場合には，imagesのように番号で管理した方が便利なことも 多い．変数の配列は次のように宣言すればよい．
var 変数名 = new Array(0番目の初期値，1番目の初期値, ...);
この宣言の後では，「変数名[番号]」として番号で指定した順位の変数を使 用することができるようになる．ただし，番号は0番から始まる点に注意するこ と．
例えば，次のように使用する．
var ex_name = new Array("太郎", "花子", "次郎");
document.write( ex_name[0] ); //0番の名前を表示する
document.wrietメソッドは，画面に文字を表示する機能であって，たまたま サンプルとして選択した．深い意味はない．この例では，ex_name[0]に"太郎"， ex_name[1]に"花子"，ex_name[2]に"次郎"が格納されることになる．
前へ，後ろへというようなリンクを用意して，決められた画像を次々と表示 するスライドショーのようなプログラムの例を示す(動作例)．
<html>
<head>
<title>スライドショー</title>
<script type ="text/javascript">
<!--
var now = 0; //現在表示している画像の番号を保持するための変数
var im = new Array("001.jpg","002.jpg","003.jpg","004.jpg");
//番号ごとの画像のファイル名を保持する配列
//表示する画像を番号で指定するためのメソッド
function setImage(no){
if( no > 3 ) no = 3;
if( no <= 0 ) no = 0;
document.myImage.src = "photo/"+im[no];
now = no;
}
//-->
</script>
</head>
<body>
<a href="javascript:setImage(now - 1);">前へ</a>
<a href="javascript:setImage(now + 1);">後へ</a>
<img name="myImage" src="photo/001.jpg" width=320 height=240>
</body>
</html>
この例は，自分のWebページ用のフォルダ内に「photo」という名前のフォルダが存在し，そのなかに 「001.jpg」「002.jpg」「003.jpg」「004.jpg」という4枚の画像ファイルが保存されている という前提条件で書かれている．
課題において自分の状況に合わせるためには，次の部分を修正すること．
var im = new Array("自分の画像名1", "自分の画像名2", .......);
if( no > 自分の画像の枚数-1 ) no = 自分の画像の枚数-1;
imgタグの所にname="myImage"とあるのは，任意の ものに変更できる．その名前を使って，次の部分でsrcの内容を書き換えること で，表示している画像を取り替えている．
document.myImage.src = "photo/"+im[no];
この例は，ブラウザで表示すると，次のような順序で動作する．
1.の時点では変数の初期化(nowに0を代入したり，imの配列内容を用 意したりされるが，setImageは実行されない．
2.の時点では，普通にページが表示されるだけである．
3.の段階で，setImageを呼び出すが，このとき表示すべき画像番号が括弧の 中で指定されている．now(現在表示中の画像番号)±1がそれで，現在表示中の画 像の前か後ろのものを次に表示させることを意図している．
4.で呼び出されたsetImageの本体部分では，先ほど指定された番号が「no」 に代入された状態で実行されることになる．
var now = 0;
一行目: 変数nowの定義．nowは，現在画面に表示中の画像の番号を記憶して おくために用意してある．
var im = new Array("001.jpg","002.jpg","003.jpg","004.jpg");
二行目: 配列imの定義，imは画像ファイル名を記憶しておくために用意． この例では，次のように記憶されることになる．
im[0] → "001.jpg" im[1] → "002.jpg" im[2] → "003.jpg" im[3] → "004.jpg"
この例ではsetImageを用意している．この関数は <body>タグ以下のWebページ本体の部分で，例えば
<a href="javascript: setImage(2)"> 2枚目の表示</a>
などのように使用して．2番目を表示させるために 使用できる．この「2」がsetImage本体では「no」に代入された状態となる．
<head></head>の中で定義されているsetImage本体の最初のif文 2行では，noの値の範囲をチェックするためのものである．noがマイナスだった り，用意した画像番号を超えるようだったら，それぞれ0と最大値に置き換える 作業をしている．
3行目が，肝心な部分で，noの値として指定された画像番号に対応したファイ ル名を，im[no]として取り出して，画像myImageのsrcプロパティに設定している． これによりmyImageで表示している画像ファイルを取り替えている．
最後に4行目で，現在表示中の画像番号を保持するための「now」を，最新の 番号(今取り替えた番号)に更新する．