エンジニアの将来って?

現在6年目の元COBOL現Javaエンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

現在表示しているページの最終更新日とファイル名を取得して表示させる

こんにちは。たいらです。
今回はJavaScriptとHTMLのアウトプットです。
作ったのは現在表示しているページの名前と最終更新年月日を取得して表示させるものです。

フォルダ構成

f:id:Tairax:20171028152930p:plain

 

JavaScript

// 最終更新年月日
var modified;
// 最終更新年
var year;
// 最終更新月
var month;
// 最終更新日
var date;

/**
 * ページの最終更新年月日を表示する関数
 */
function printLastModified() {
// ページの最終更新年月日を取得
    modified = new Date(document.lastModified);

// 最終更新年月日をそれぞれ格納
    year = modified.getFullYear();
    month = modified.getMonth() + 1;
    date = modified.getDate();

// 画面に表示
    document.write("最終更新日:" + year + "年" + month + "月" + date + "日");
}

/**
 * 表示しているページの名前を出力する関数
 */
function printFileName() {
    document.write("表示しているページの名前:" + window.location.href.split('/').pop() + "
");
}

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>最終更新日</title>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
        <script type="text/javascript" src="../script/LastModified.js"></script>
    </head>
    <body>
        <script>
            printFileName();
            printLastModified();
        </script>
    </body>
</html>

 

実行結果

f:id:Tairax:20171028162606p:plain

画面にファイル名と最終更新日が表示されてますね。
本当に最終更新日か確認します。

f:id:Tairax:20171028163131p:plain

確かに最終更新日が表示されてます。

 

これで難しかったのはJavaScriptでHTMLのファイル名を取得することです。
↓がファイル名を取得しているところです。

window.location.href.split('/').pop() + "

どういう風に処理されているか解説します。
window.location.hrefでURLを取得します。
この時取得している値は
file:///C:/Javawork/BlogWeb/lastModified/html/LastModified.html
になります。
split('/')で「/」ごとに区切っていきます。
そうすると、↓のようになります。
file:,,,C:,Javawork,BlogWeb,lastModified,html,LastModified.html
pop()で1番最後の値であるLastModified.htmlを取得して、返しているという内容です。

 

参考にさせて頂いたサイト様

にしし ふぁくとりー > JavaScript TIPSふぁくとりー > 日付・時刻 > ページの最終更新日を表示する方法

window.location.hrefプロパティ - JavaScript(ジャバスクリプト)リファレンス

.pop() | JavaScript 日本語リファレンス | js STUDIO