JavaScriptによる動的ページ作成

目標

ランダムにメッセージと画像が変化する占いウェブページを作成する。

準備: 「1から3までの乱数の表示」の確認

  1. report6.htmlをダウンロードして、ブラウザで閲覧してみること(リロードを繰り返すこと)
  2. report6.htmlをmiで開いてソースを確認
  3. 予備練習: 乱数の「3」を、「10」や「100」に変更して何が起こるか調べてみること
乱数の発生及び表示プログラムの解説表
<script type="text/javascript"></script> JavaScriptプログラムの開始と終了を示すタグ
Math.random() 0から1の間の乱数を発生させる関数
Math.floor() 実数の小数点以下を切り捨てて整数にする関数
Math.floor(Math.random()*3) 3倍されて0-3になった乱数を、[0,1,2]のどれかの整数に変換する操作
X=Math.floor(Math.random()*3)+1; 上記に1加えて、[1,2,3]のどれかとなった乱数を変数Xに代入
document.write("乱数: "); 文字列「乱数: 」をウェブページの内容として出力
document.write(X); 変数Xの値をウェブページに出力
document.write("<br>"); タグ<br>(改行)をウェブページに出力
<script>タグ内では、JavaScriptプログラムが実行された結果がウェブページとして表示されることに注意

練習(1): 乱数と条件分岐を利用したランダムな画像表示

  1. report6.htmlの「<h3>課題: 動的占いページの作成</h3>」の下に、以下のプログラムをコピーすること
  2. リロードを繰り返して、画像がランダムに表示されることを確認

<script type="text/javascript">
Z=Math.floor(Math.random()*3)+1;
if(Z==1){
document.write("<img src=\"http://www.c.u-tokyo.ac.jp/images/slide/reel_1.jpg\" width=\"200\">");
}
else if(Z==2){
document.write("<img src=\"http://www.c.u-tokyo.ac.jp/images/slide/reel_2.jpg\" width=\"200\">");
}
else{
document.write("<img src=\"http://www.c.u-tokyo.ac.jp/images/slide/reel_3.jpg\" width=\"200\">");
}
</script>

ランダムな画像表示プログラムの解説表
if(条件){操作A}else{操作B} 「条件」が満たされる場合は「操作A」を、満たされない場合は「操作B」を実行
if(条件1){A}else if(条件2){B}else{C} 場合分けが三つ以上ある場合に、枝分かれを繰り返す書き方
if(Z==1) 変数Zが1に等しいならば、という条件
== 等号条件(代入と区別するために=が二つ重ねてあることに注意)
document.write("<img src=\"http...>") リンク先の画像を表示するタグをウェブページに出力
\" エスケープシーケンス

練習(2): 占いメッセージの追加

  1. if(Z==1)の操作部分に「document.write("大吉<br>");」を追加して以下のように変更
    
    if(Z==1){
    document.write("大吉<br>");
    document.write("<img src=\"http://www.c.u-tokyo.ac.jp/images/slide/reel_1.jpg\" width=\"200\">");
    }
    
    
  2. リロードを繰り返して、たまに「大吉」が表示されることを確認
  3. if(Z==2)の操作部分に「document.write("吉<br>");」を追加
  4. 最後のelse以降の操作部分に「document.write("凶<br>");」を追加
  5. リロードを繰り返して占いページになっていることを確認

課題: スタイルシートの利用と場合の追加

追加課題(1): 結果表示の改良

以下の例の内容で、結果表示を改良すること

追加課題(2): 本日の日付の追加

ページの末尾に「本日(????年?月?日)の占い結果です。」というメッセージを追加すること。ただし、日付の?部分は自動的に西暦の本日となるようにすること(以下はプログラム作成手順のヒント)。

追加課題(3): 月齢の計算

本日の月齢を計算し、「月齢: 3」のように表示させること

追加課題(4): 数字根の計算

本日の数字根を計算し、「数字根: 5」のように表示させること

追加課題(5): 結果の表作成

本日の日付、月齢、数字根の結果から、以下のような表を自動で作成し、表示すること
本日の日付 月齢 数字根
1999年9月26日 17 3

追加課題(6): その他の改良

以下の例の中から、好きなものに取り組むこと(くわしいやり方については、自分で調査、工夫しながら進めること)
  1. スタイルシート、外部サイトの埋め込み等を活用し、結果表示を印象的にする
  2. 本日の日付から黄道十二宮の対応する星座を求め、結果に追加する: if文において、大小関係の判定や条件の組み合わせが必要(例: かに座ならば「if(M==6 && D>=22)」等)
  3. 月齢と数字根から本日のラッキースポットを計算し、Google mapへのハイパーリンクを表示する: 以下に作業手順とヒントを示す
    1. 対象範囲(東京都、駒場キャンパス等)を長方形とみなし、経度と緯度の範囲を調査(Google mapや各種サイトで調査可能)
    2. 対象範囲を、30x10の小領域に分割したと考えて、月齢(範囲:0-29)と数字根(範囲:0-9)から、対応する座標の小領域をラッキースポットとして選択し、中心の経度と緯度を計算
    3. 経度と緯度を指定したGoogle mapへのリンクを作成し出力( 「http://maps.google.com/maps?q=35.660899,139.684987」のように経度緯度を含むURLを作成するとよい)
    4. 余裕があるならば、乱数要素も含めて領域を分割、選択し、リロードのたびに異なるラッキースポットとなるよう改良してみること
  4. 誕生日の入力を可能とし、誕生日の月齢や数字根を計算して個人の占い結果を表示する: ネット上に解説が多数あるが、実際に使うにはかなりの試行錯誤が必要