情報処理演習2

問題(第一週・二週目分)

次の要件を満たすようなJavaScriptを使ったページを用意して，自分のトップページからリンクせよ．

1. (練習問題)サンプルを改良して「前へ」「後ろへ」というボタンをフォームで用意して，前後の画像を表示できるようにする．
2. (必修問題)画面の下にはサムネイル画像を表示しておいて，それをクリックするとその画像を上部に表示するようにする
3. (応用問題)画像の拡大ボタンと縮小ボタンを付けて，画像を拡大縮小できるようにしてみよ．スライドショーのように拡大ボタンを何回も押せば，数段階拡大したりした方がおもしろい．
4. (おまけ)マウスカーソルが位置している所のサムネイル画像をその場で少しだけ大きく表示するようにすると面白い

応用問題は，できる人だけでよい．時間がある限りがんばること．

ヒント: 
練習問題　フォームは<form> </form> で，その中に<input type=button>を配置．
　　　　　そのボタンにイベントとしてJavaScriptを埋め込む．
　　　　　そのとき呼び出すJavaScriptの内容は，サンプルプログラムの「前へ」「後ろへ」の所と同じもの．
　　　　　※ただしイベントとして組み込むため，リンクとして埋め込むのための「javascript:」は不要．
必修問題　サムネイル画像は，<img width=幅 height=高さ>タグでサイズ指定した画像を埋め込めばよい．
　　　　　その画像にイベントを埋め込む．
　　　　　埋め込むイベントは，ボタンとは違って「その」画像と同じ画像を表示させるためのもの．
応用問題　「前へ」「後ろへ」とは別に「拡大」「縮小」ボタンを配置する．
　　　　　サンプルプログラムのsetImage関数は，<img>の"src="オプションの内容を書き換えるものだった．
　　　　　srcではなく"width="と"height="の方を書き換えればサイズを変更することができる．
　　　　　つまりsetImageとほぼ同様な動きをする(ただしsrcでなくwidthとheightを書き換える)scaleImage関数を
　　　　　　　setImageとは別に用意する．
　　　　　「拡大」「縮小」ボタンのイベントにはscaleImageの方を呼び出すように設定する．
おまけ　　イベントには，他にもonMouseOverとonMouseOutなどがある．
　　　　　サムネイル画像の<img>に別のイベントを別の動作を実行するように埋め込める．
　　　　　例えばonMouseOverした時に，わずかに拡大させ，onMouseOutしたときに元に戻すような動作．
　　　　　この動作を別関数として用意する．この関数のパラメータには，サムネイル画像の番号を渡してやる．
　　　　　関数の中で，渡されてきた番号のサムネイル画像のwidthとheightの値を変更する．

　　　　　

第三週・四週目分

先週まで作成したページを次のように改良せよ．

1. (必修問題)「スライドショー」ボタンを用意して，それをクリックすると自動的に1秒間隔で画像が更新されるようにする
2. (応用問題)現在時刻を秒単位で表示するデジタル時計を設置せよ．

採点方法(全部合わせて)

• 前へ後ろへボタンがあるかどうか．
• そのボタンが機能しているかどうか．
• サムネイル画像があるかどうか
• それが機能しているかどうか
• 拡大ボタン・縮小ボタンがあるかどうか
• それが機能しているかどうか
• スライドショーボタンがあるかどうか
• それが機能しているかどうか
• 時計があるかどうか
• それが機能しているかどうか

締め切り

• 10/18日まで