アクセスするたびに異なるテキストや画像を表示

情報コンテンツ・デザイン
Lecture12
July 13th 2015
Web オブジェクトを操作するのが JavaScript の役割
JavaScript がクライアントサイド・プログラミングの必修言語たる理由は、
JavaScript が、HTML や Cascading Style Sheets (CSS) と密接な関係にあるか
らです。JavaScript を使えば、HTML タグに付けた名前を指定して、そのタグ内
のコンテンツを参照したり、CSS で指定した座標系や位置を使って画像を移動
させることができます。つまり三者には、HTML で文書構造を定義し、CSS で
文書の装飾（見栄え）を決め、JavaScript で動きを制御する、という関係がある
わけです。
では、どうやってそんなことを実現しているのでしょうか。
オブジェクトという言葉になじみがない人は、
「オブジェクトとは、それに命令
をすれば単体で何らかの仕事をしてくれるもの、いわばスイッチを押すと動作
する電化製品のようなもの」だと考えてください。
JavaScript では、オブジェクト（ビルトイン・オブジェクト）と、ブラウザが
独自に用意しているオブジェクト、の 2 種類に分類しています。コア・オブジェ
クトは、最も基本的なオブジェクトの集まりです。文字列を表わすオブジェクト、
日付を表す Date オブジェクト、などが該当します。ブラウザに依存しないので
JavaScript 対応のどのブラウザでも同じように使え、ブラウザ以外の JavaScript
対応アプリケーション（例えば Adobe Reader、Dreamweaver,
Photoshop など）でも利用できます。
一方、ブラウザが独自に用意しているオブジェクトは、ブラウザ上で
JavaScript を使うときに必要となるオブジェクトの集まりです。
アクセスするたびに異なるテキストや画像を表示
Web ページにアクセスするたびに、異なるテキストや画像を表示させるように
すると、何度も Web ページを見てくれる人を楽しませることが出来ます。この
テクニックは、おみくじや占い、フォトアルバムなどで多く使われます。
pictures.js :
var img = new Array();
img[0]="photo/photo1.jpg";
img[1]="photo/photo2.jpg";
img[2]="photo/photo3.jpg";
img[3]="photo/photo4.jpg";
情報コンテンツ・デザイン
Lecture12
July 13th 2015
img[4]="photo/photo5.jpg";
img[5]="photo/photo6.jpg";
img[6]="photo/photo7.jpg";
img[7]="photo/photo8.jpg";
img[8]="photo/photo9.jpg";
img[9]="photo/photo14.jpg";
img[10]="photo/photo10.jpg";
img[11]="photo/photo11.jpg";
img[12]="photo/photo12.jpg";
img[13]="photo/photo13.jpg";
img[14]="photo/photo15.jpg";
img[15]="photo/photo16.jpg";
var rnd=Math.floor(Math.random()*img.length);
document.write("<img src='"+img[rnd]+"'>");
HTML 文書：
<script language=”JavaScript”>
<!-var img=new Array();
img[0]=”photoname0.jpg”;
img[1]=”photoname1.jpg”;
img[2]=”photoname2.jpg”;
var rnd=Math.floor(Math.random()*img.length);
document.write(“<img src=’”+img[rnd]+”’>”);
//-->
</script>

Download Report