日付ごとにテキストを変える方法を教えて・・・

質問

現在、下記のJavaScriptで、日付ごとに画像を変更しています。

<script type="text/javascript">
<!--
function change() {
obj=document.getElementById("image");
today = new Date();
Mon = today.getMonth()+1;
Day = today.getDate();
if (Mon == 1) { if (Day == 1) { obj.src = "01/01.jpg"; } }
if (Mon == 1) { if (Day == 2) { obj.src = "01/02.jpg"; } }
以下中略
if (Mon == 12) { if (Day == 30) { obj.src = "12/30.jpg"; } }
if (Mon == 12) { if (Day == 31) { obj.src = "12/31.jpg"; } }
}
// -->
</script>
<img src="./kihon.gif" name="image">

★実際の運用サイト
http://www.birthdayflower366.com/

この画像部分をテキスト（HTML）に変更したいのですが、プログラムのどこを変更すればよいのでしょうか？

JavaScriptの知識はありません。上記のプログラムもホームページに載っていたのをそのまま使用しています。

また、if (Mon == 1) { if (Day == 1) { obj.src = "01/01.jpg"; } }
部分も366日分用意しないといけませんが、もっと簡単な方法があれば教えてください。

回答No.3

HIRSYU · ベストアンサー

>if (Mon > 9) { if (Day > 9) { obj.src = Mon + "/" + Day + ".html";} }
>else if (Mon > 9) { if (Day < 9) { obj.src = Mon + "/0" + Day + ".html";} }
>else { obj.src = "0"Mon + "/0" + Day + ".html";}
いい線行ってるけど確かに間違ってますね。
一度整理してみましょう。

個人的に見にくかったから改行付けた後に、IF条件にコメント入れてみた。
// 月が、2桁の場合
if (Mon > 9) {
// 日が2桁の場合
if (Day > 9) {
obj.src = Mon + "/" + Day + ".html";
}
//月が2桁ではなく、月が2桁の場合（←else ifの意味を考えてみましょう）
} else if (Mon > 9) {
// 日が9未満の場合（←ここは、9未満ではなく、9以下が正しい）
if (Day < 9) {
obj.src = Mon + "/0" + Day + ".html";
}
} else {
//「"0"Mon」→「"0" + Mon」
obj.src = "0"Mon + "/0" + Day + ".html";
}

整理して考えたら↓のようなものになるはず。
if (/* 月が2桁の場合 */) {
if (/* 日が2桁の場合 */) {
// 月が2桁で、日が2桁の時
} else {
// 月が2桁で、日が1桁の時
}
} else {
if (/* 日が2桁の場合 */) {
// 月が1桁で、日が2桁の時
} else {
// 月が1桁で、日が1桁の時
}
}

ほかの書き方を提示すると、
if (/* 月が1桁の場合 */) {
Mon = "0" + Mon;
}
if(/* 日が1桁の場合 */) {
Day = "0" + Day;
}
obj.src = Mon + "/" + Day + ".html";
のように、先にMonとDayの値を整えておくって手段もある。

お礼

回答ありがとうございます。

早速テストしてみました。

<!--

function change() {
obj=document.getElementById("image");
today = new Date();
Mon = today.getMonth()+1;
Day = today.getDate();
// 月が、2桁の場合
if (Mon > 9) {
// 日が2桁の場合
if (Day > 9) {
obj.src = Mon + "/" + Day + "t.html";
}
// 月が2桁で、日が1桁の時
} else if (Mon > 9) {
// 日が9未満の場合（←ここは、9未満ではなく、9以下が正しい）
if (Day < 9) {
obj.src = Mon + "/0" + Day + "t.html";
}
// 月が1桁で、日が2桁の時
} else if (Mon < 9) {
// 日が2桁の場合
if (Day > 9) {
obj.src = "0" + Mon + "/" + Day + "t.html";
}
} else {
// 月が1桁で、日が1桁の時
obj.src = "0" + Mon + "/0" + Day + "t.html";
}
}
// -->

これで、どこかまちがっていると思うのですが、
月1桁　日1桁
月2桁　日1桁　が表示できません。

アドバイスよろしくお願いいたします。

もうひとつの書き方は、上のソースが完成してから、テストしてみたいと思っています。
それまでいろいろ質問するかと思いますが、よろしくお願いいたします。

回答No.5

HIRSYU

ぱっと見たところ間違いは無いと思いますよ。

>{ obj.src = Mon + "/" + Day + "today.html";
>}
ただ、ここに関しては、{}が無くてもいいです。
むしろ、他の人が見るときは無い方が見やすいですね。

>else　の意味が今一理解できていなくて悪戦苦闘しております。
elseとは「その他」って意味です。
else ifとは「ifと、このelse ifより先に記述しているelse if以外で条件に一致するもの」って意味です。

if(条件A){
条件Aの場合
}else if(条件B){
条件Aではなく、条件Bの場合
}else if(条件C){
条件Aでも条件Bでもなく、条件Cの場合
}else{
その他の場合
}

お礼

ソースの確認ありがとうございました。

同じ動作でも、ソースの書き方で複雑にも，簡単にも書けるようですね。
私は、後からの書き方の方（先にMonとDayの値を整えておくって手段）が、わかりやすいです。
現在、こちらのソースで動かしています。

図書館で借りてきた本も見ましたが、わかりにくいです。
私みたいな初心者で学ぶのに適したお勧めの本がありましたらお教えください。

今回、丁寧な回答ありがとうございました。
自分自身も勉強になりました。

補足

>{ obj.src = Mon + "/" + Day + "today.html";
>}
>ただ、ここに関しては、{}が無くてもいいです。

ソースの変更をいたします。確認ありがとうございます。

>else ifとは「ifと、このelse ifより先に記述しているelse if以外で条件に一致するもの」って意味です。

新しく作ってみました。
<!--

function change() {
obj=document.getElementById("image");
today = new Date();
Mon = today.getMonth()+1;
Day = today.getDate();
// 条件Aの場合
// 月が、2桁の場合　
if (Mon > 9) {
// 日が2桁の場合
if (Day > 9) {
obj.src = Mon + "/" + Day + "today.html";
}
// 条件B(条件Aではなく、条件Bの場合)
// 月が2桁で、
} else if (Mon > 9) {
// 日が1桁の時
if (Day <= 9) {
obj.src = Mon + "/0" + Day + "today.html";
}
// 条件C(条件Aでも条件Bでもなく、条件Cの場合)
// 月が1桁で、日が2桁の時
} else if (Mon <= 9) {
// 日が2桁の場合
if (Day > 9) {
obj.src = "0" + Mon + "/" + Day + "today.html";
}
// その他の場合
// 月が1桁で、日が1桁の時
} else {
obj.src = "0" + Mon + "/0" + Day + "today.html";
}
}
// -->

整理前のとあまり変わりません。
動作確認はまだしていませんが、これで合っているでしょうか？

同じ動作でも、後からの書き方の方（先にMonとDayの値を整えておくって手段）が、わかりやすいですね。
else ifの方が、ソースも複雑ですね。

回答No.4

HIRSYU

まず、
if (Mon > 9) {
} else if (Mon > 9) {
}
とありますが、else ifの意味を考えたとき、この記述に意味があるのかどうか考えてみてください。

整理して考えると、ほしい条件は、
1. 月が2桁、日が2桁
2. 月が2桁、日が1桁
3. 月が1桁、日が2桁
4. 月が1桁、日が1桁
以上の4種類です。

一度IFによる条件を1からやり直したらどうでしょうか。

ANo.3でも書きましたが、上記の4種類の分岐を満たすものは
f (/* 月が2桁の場合 */) {
if (/* 日が2桁の場合 */) {
// 月が2桁で、日が2桁の時
} else {
// 月が2桁で、日が1桁の時
}
} else {
if (/* 日が2桁の場合 */) {
// 月が1桁で、日が2桁の時
} else {
// 月が1桁で、日が1桁の時
}
}
のようになるはずです。

お礼

回答ありがとうございます。

>上記の4種類の分岐を満たすものは
なかなか難しいものですね。
else　の意味が今一理解できていなくて悪戦苦闘しております。

別の書き方のほうですが、次のように記述してみました。

<!--

function change() {
obj=document.getElementById("image");
today = new Date();
Mon = today.getMonth()+1;
Day = today.getDate();
//月が1桁の場合
if (Mon <= 9) {
Mon = "0" + Mon;
}
//日が1桁の場合
if(Day <= 9) {
Day = "0" + Day;
}
{ obj.src = Mon + "/" + Day + "today.html";
}
}
// -->

1月1日も1月10日も、9月9日、9月10日、10月1日も10月10日も無事表示されています。
上のソースで誤りがあれば教えてください。

回答No.2

HIRSYU

テキストって言うのはHTMLファイルのことだったのですね・・・

>obj=document.getElementById("div"); でよいのでしょうか。
obj=document.getElementById("image");は変更しなくても大丈夫です。

>{ obj.src = "Mon + "/" + Day + ".html";}
Monの手前の"は不要（タイプミスかな）で「obj.src = Mon + "/" + Day + ".html";」

このままだと、1月1日のHTMLファイルは、フォルダ“1”の中の“1.htm”ってファイルを開きます。
現状の画像のように、フォルダ“01”の中の“01.htm”のように1桁の場合頭に0が付くような名前のファイルの場合、一工夫必要です。

><iframe src="change.htm"width="470" height="400" scrolling="no" frameborder="0" marginheight="2" marginwidth="2"></iframe>
IDを付ける必要があります。「id=」ってヤツ。
尚、「obj=document.getElementById("image");」の"image"と同じIDをつけます。
<iframe id="image" src="change.htm"width="470" height="400" scrolling="no" frameborder="0" marginheight="2" marginwidth="2"></iframe>

お礼

ご回答ありがとうございます。
いろいろアドバイスありがとうございます。

テストサイトでテストしてみました。無事、できました。
http://www.birthdayflower366.com/index01-1.html

>フォルダ“01”の中の“01.htm”のように1桁の場合頭に0が付くような名前のファイルの場合、一工夫必要です。

ソースを私なりに考えてみました。
if (Mon > 9) { if (Day > 9) { obj.src = Mon + "/" + Day + ".html";} }
else if (Mon > 9) { if (Day < 9) { obj.src = Mon + "/0" + Day + ".html";} }
else { obj.src = "0"Mon + "/0" + Day + ".html";}

たぶん、どこか違うと思います。アドバイスをお願いします。

回答No.1

HIRSYU

JavaScriptの知識が無いなら勉強しましょう。
（マスターしろとは言いません。ただ、自分の運営しているJavaScriptぐらいは理解しましょう。）

画像からテキストにしたいのなら、
1.<img>を<div>に変更する。
2.srcへ画像パスを代入している箇所を、divのinnerText(又はinnerHTML)にテキストを代入するように変更する。

ifを366個は単調すぎるので、if無しの「obj.src = Mon + "/" + Day + ".jpg";」でいけます。
別途0埋めは行ってください。

後、「<img src="./kihon.gif" name="image">」より「<img src="./kihon.gif" id="image">」の方がいいです。

お礼

早速の回答ありがとうございます。
>1.<img>を<div>に変更する。
obj=document.getElementById("div"); でよいのでしょうか。

>2.srcへ画像パスを代入している箇所を、divのinnerText(又はinnerHTML)にテキストを代入するように変更する。
先日、図書館で「java入門書」を借りてきたばかりなので、今一よくわかりません。

回答や参考書から、ソースを書いてみました。
テストしてみましたが、動作しませんでした。

<script type="text/javascript">
<!--
function change() {
obj=document.getElementById("div");
today = new Date();
Mon = today.getMonth()+1;
Day = today.getDate();
{ obj.src = "Mon + "/" + Day + ".html";}
}
// -->
</script>
<iframe src="change.htm"width="470" height="400" scrolling="no" frameborder="0" marginheight="2" marginwidth="2"></iframe>

どこが、違うのか、お教えいただければと思います。
出来れば、ソースを書いていただいたら助かります。