jqueryで、その日の日付に応じた外部HTMLファイルの内容を読み込みたい

いつも大変お世話になっております。
jquery、javascriptに関する基礎知識がないためトンチンカンな質問になっているかもしれませんが、どうぞご容赦ください。

【やりたいこと】
・0101.html(1月1日用)、0102.html(1月2日用)…のように、一年365日分のHTMLファイルを用意する。
・上記HTMLファイル内の一部のコンテンツ（ID名はすべてのファイルで共通）を、index.htmlに読み込む。
・ただし、index.htmlでjavascriptによる日付の取得を行い、今日が11月11日であれば「1111.html」というファイルを、11月12日なら「1112.html」というファイルの中身を読みこむようにしたい。

【現在までにできていること】
・外部ファイルの特定部分（IDで指定された部分）を読み込むことはできています。

【できていないこと】
・javascriptで取得した日付に応じて、読み込むHTMlファイルを動的に変更すること

↓index.html（コンテンツを読み込むファイル）

HTML
1<head>
2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
3 </script>
4 <script src="load.js"></script>
5</head>
6<body>
7 <h1>ここに外部 HTML ファイルを表示します</h1>
8 <div id="page">dst</div>
9</body>

↓external.html（読み込まれる側のファイル）

HTML
1<body>
2 <div id="contents">
3  <h2>外部ファイル</h2>
4  <p>この文章は external.html に記載された外部 HTML の文章です</p>
5 </div>
6</body>

↓load.js

javascript
1$(function() {
2    $.ajax('external.html', {
3        timeout : 1000, // 1000 ms
4        datatype:'html'
5    }).then(function(data){
6        var out_html = $($.parseHTML(data));//parse
7        $('#page').empty().append(out_html.filter('#contents')[0].innerHTML);//insert
8
9        //var sub_html = out_html.filter(function(index) {
10        //    return $(this).attr("id") === "sub";
11        //})[0].innerHTML;//extract
12        //var sub2_html = out_html.filter(function(index) {
13        //    return $(this).attr("id") === "sub2";
14        //})[0].innerHTML;//extract
15        //$('#page').empty().append(sub_html);//insert
16        //$('#page2').empty().append(sub2_html);//insert
17    },function(jqXHR, textStatus) {
18        if(textStatus!=="success") {
19            var txt = "<p>textStatus:"+ textStatus + "</p>" +
20                "<p>status:"+ jqXHR.status + "</p>" +
21                "<p>responseText : </p><div>" + jqXHR.responseText +
22                "</div>";
23            $('#page').html(txt);
24        }
25    });
26    // $('#page').load('external.html');
27});

このコードをベースに、external.htmlではなく、日付ごとに連番を降ったhtmlファイルを日付に応じて読み込むことはできますでしょうか？
できるとすれば、具体的にどのように記述すればよいのでしょうか。

ややこしい説明で恐縮ですが、どなたかご教授頂けますと幸いです。
どうぞよろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

あなたのやりたい事をあなたの代わりにやってくれるサイトは、
ここじゃなくてクラウドファンディングという仕事の斡旋サイトになるからね。
だから全てをやってあげる事はできない。ヒントだけ出すから頑張って実装していこう。

load.jsが何やってるかをざっくり解説するから、
keiさんの回答と合わせてどうすればいいかよく考えて実装していこう。

JavaScript
1$.ajax('external.html', options).then(fn, fn);

まず、この$.ajaxの第一引数の'external.html'。
JavaScriptに限らず大抵のプログラミング言語では、変数というメモリ空間を宣言して値を保存することが出来る。

ブラウザー上でF12キーを押すとコンソール画面が表示されるから、下記の内容を打ち込んでみよう。
コンソール欄が見えない？なら更にEscキーでコンソール欄の表示・非表示が切り替わる。
console.log()のカッコの中に調べたい対象を入れて実行すると、コンソール上に対象に何が入っているかを表示してくれる。

JavaScript
1// この行のように行の先頭に「//」と記入すると、同じ行のそれ以降の記述は実行されない
2console.log('external.html'); // "external.html"
3
4var url = 'external.html';
5console.log(url); // "external.html"

このように、関数を実行する直前でconsole.log('external.html')等と文字列を宣言することも出来るし、
プリペイドカードにお金をチャージしてから支払うように、一度var url = 'external.html'という風にurl変数を宣言して、その中に文字列を埋め込んでおき、console.log(url)という風に利用することもできる。

つまり、こう書き換えるわけだね。

JavaScript
1var url = 'external.html';
2$.ajax(url, options).then(fn, fn);

次に変数には何が入るかを解説しよう。
思いつくものは大抵なんでも入れておくことが可能だね。
変数の宣言は行の先頭でvar、忘れるとエラーになるので気をつけて。

JavaScript
1var url = 'external.html';
2var num = 123;
3var calc = 10 + num; // こんな風に式も書ける
4var options = {
5  timeout : 1000,
6  datatype: 'html'
7};
8var fn = function (data) {
9  var out_html = $($.parseHTML(data));
10  $('#page').empty().append(out_html.filter('#contents')[0].innerHTML);
11}
12
13console.log(url); // "external.html"
14console.log(num); // 123
15console.log(calc); // 133 <- 式を展開した結果が格納されている
16
17url = '1123.html' // 2回目書くと上書き代入、external.htmlは消去される
18console.log(url); // "1123.html"
19
20var month = 5;
21var day = 20;
22url = month + day + '.html'; // + 演算子を使って文字列同士を連結させる事もできる
23console.log(url); // "25.html" <- 月と日付が足されて駄目だ
24
25url = month + '-' + day + '.html'; // 間にハイフンを入れてみる
26console.log(url); // "5-10.html"
27
28url = '' + month + day + '.html'; // + 演算子は左から解釈していくので、無意味な空文字列を左に埋め込んでやると…
29console.log(url); // "520.html" <- 勝手に数値同士で計算されなくなった

今回やりたい事は全部詰め込んだ。
一度勉強だと思って数行ずつでも良いんで全てコピペするなり、打ち込むなりして挙動を確認しておこう。

日付ごとに連番を降ったhtmlファイルを日付に応じて読み込むことはできますでしょうか？

ここまで読んだらもう出来るね？

日付ごとに連番を振ったhtmlの部分の文字列はkeiさんの回答で作れる。
それを加工してやればいい、
以下大ヒント。

JavaScript
1var today = new Date();
2var month = ?????; // todayから月の情報を取り出す
3var day = ?????; // todayから日の情報を取り出す
4var url = month + '-' + day + '.html'; // 連番のファイルのURLを文字列連結で作り出す、文字列が気に入らなかったら色々修正頑張って
5$.ajax(url, { // 'external.html'の代わりにurlを使ってアクセスさせる

投稿2017/11/11 08:07

miyabi-sun

総合スコア21158

isobel

2017/11/12 03:45

大変丁寧にご解説頂き、ありがとうございました。 Webデザインが専門のため、javascriptにうとくご迷惑をおかけいたします。よくわからないながらもご教授頂いた内容をもとに解決することができました。本当にありがとうございます。

行動規範の内容に同意します

この辺の情報でどうでしょう？

【文字列の連結 - 演算子 - JavaScript入門】
https://www.ajaxtower.jp/js/ope/index16.html

【今日の日付と現在時刻－JavaScript入門】
http://www.pori2.net/js/date/1.html

【JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】 | TechAcademyマガジン】
https://techacademy.jp/magazine/5587

投稿2017/11/11 05:46

kei344

総合スコア69398

isobel

2017/11/11 06:21

早速のご回答ありがとうございます！ javascriptのDateオブジェクトを使って日付を取得し、月と日の文字列を連結させてファイル名を取得する…という流れはなんとなく理解できるのですが、恥ずかしながらjavascriptの知識が乏しいため、それをload.jsにどう記述すればいいのかがわかりません…。本当にお手数ですが、どのような記述を行えばいいか、具体的に教えて頂けますでしょうか。どうぞよろしくお願い致します。