習うより慣れろprogramingD

新しい試み

おふくろ様 以前、《拝啓、お袋様》、《一週間の仕事》、《ウェブページに補足情報》において、ロシア民謡の叙情歌が流れて、遠く離れたお袋様へのメッセージを想定してブログに掲載しました。

これらは複数ページにまたがって、お袋への伝言を歌に仕上げています。

他のページにジャンプするために、現在の情報をCookieに保存し、小さなコードながら苦労して完成させた記憶があります。

今回は、ひとつの記事で7日分の情報を制御するため、以前よりも難解さはなく、離れた母へ一週間の仕事を伝える試みをしてみます。

7画像中の一例を示します。実際は稿末の実行例に描画した画像をクリックします。

OneWeek

処理の概要

日曜から始まる一週間の仕事をロシア民謡に合わせて、イラスト画像を添えて母への伝言として記(しる)しています。

モジュロ演算子

曜日ごとに定まった処理をする場合は、日曜日を0、月曜日を1、土曜日を6に変換して7種の処理をすることができます。曜日に依存せず、開始日から順に0、1…5、6そして再び0に戻る処理は開始からの通算日を7で割り、その余り(0~6)による7種の処理に分類します。

CやJavaScriptにおいて、割り算の余りを求める演算子をモジュロ演算子とも言い、%で表します。
a = 17;
b = 7;
c = a % b;
cには3が求まります。通算日をcountとすれば、7日ごとに繰り返す処理pはp = count % 7;で求めます。使い勝手の良い演算子です。

コードの解説

①3行、titleタグで文書にタイトルを付けます。ブラウザのツールバーに表示される。
②5行、numは曜日ごとの画像を引き当てるインデックス。
③6行、ImgArrayは曜日ごとの画像を記憶する配列。
④9行、曜日ごとの仕事を定義する。
⑤16~21行、画像ファイル名を配列に用意。
⑥23~29行、ロード時、画像のクリック時に起動する関数を定義。
⑦32行、ロード時に動作するコードを定義する。
⑧33~37行、一週間の仕事を表示するエリアを定義。
⑨38~39行、音響データを定義。

サンプルコード

<html>
<head>
<title>改良版・一週間の仕事</title>
<script language="JavaScript">
var num = 0;                     //画像の番号, Tiny-D.html
var ImgArray=
["0-super.png","1-walking.jpg","2-haisha.jpg","3-gym.png","4-englishschool.png","5-nawanoren.jpg","6-ittech.png"];
                                                                            //仕事名を配列に格納する
const job = ["日曜日はスーパーに出かけ、一週間ぶんの食料を買い込みます。",
             "月曜日は早起きして散歩に出かけます。",
             "火曜日は歯医者に出かけ、治療に専念です。",
             "水曜日はジムに出かけ、シェープアップをします。",
             "木曜日は英会話スクールに出かけ、TOEIC600点を目指します。",
             "金曜日は居酒屋に出かけ、リラックスです。",
             "土曜日は寺子屋に出かけ、IT技術を教えます。" ];
  var imgFile= new Array();      //画像ファイル 配列変数。
  for(var i=0; i<ImgArray.length; ++i){
    ImgArray[i] = "https://aidesign.lolipop.jp/wp-content/uploads/2014/07/" + ImgArray[i];//画像ファイル名を生成
    imgFile[i] = new Image();    //画像を早めにロードするための準備
    imgFile[i].src = ImgArray[i];//画像をロードする
  }

  function changeImg(){
    var week = (num++) % imgFile.length;//番号を1進め、番号が配列の個数になったら0にする。
    document.getElementById('gazo').src = ImgArray[week];               //画像の切り替え
    document.getElementById('gazo').style.width = imgFile[week].width;  //画像の幅
    document.getElementById('gazo').style.height = imgFile[week].height;//画像の高さ
    document.getElementById("ttl").innerHTML=job[week];                 //説明文の切り替え
  }
</script>
</head>
<body onLoad="document.getElementById('week-song').play();changeImg()">
<font size=6 color='blue'>《一週間の仕事》</font><font size=4 color='maroon'>
 Tiny-D.html, Ver 0.02, &copy;Aidesign,2016<BR><BR>次に進むには画像をクリックします。<BR><BR></font>
<font id="ttl" size=5 color='magenta'></font><BR><BR>
<a href="javascript:void(0)" onFocus="this.blur()" onclick="changeImg()">
<img src="" id="gazo" width="" height="" border="1"></a>
<audio id="week-song" preload="auto">
<source src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/One_Week_Music_Box.mp3"></audio>
</body>
</html>

実行例

改良版・一週間の仕事 《一週間の仕事》 Tiny-D.html, Ver 0.02, ©Aidesign,2016

次に進むには画像をクリックします。



コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください