JavaScriptでできること（ホームページ編）

現在ホームページを作成しています。

こちらから

より豊かなHPにしようと、JavaScriptを勉強しています。この記事では、本で勉強しながら見つけた、使えそうな役割を例とともに紹介します。

（HPはまだ作成段階ですが、趣味の共有と保存を目的としています。現在は写真・音楽・地図を要素として考えており、それぞれで検索や絞り込みができたらおもしろいと思っています。）

外部入力の埋め込み・使用

例）名前を入力してもらう

var name = prompt("名前を入力してください");
document.write("<h1>こんにちは" + name + "さん<h1>");

汎用例）
・入力された色に基づく写真の表示（青と入力すれば、海や空など青系の写真を表示）
・入力された地名に基づく写真と位置情報の表示（沖縄や離島と入力すれば、そのキーワードに基づいた写真や、Googleの位置情報の表示）
・気持ちに対応した音楽（悲しいと入力すれば、元気づけられるような楽曲紹介や、歌詞の表示/夏と打てば夏にあった曲の紹介）

時計や日付関連

例）今年が終わるまでの日数

var today = new Date(); #今日
var newYearsDay = new Date(today.getFullYear() + 1, 0, 1);　#来年の1月1日

#日数差を求め、出力する
var diff = newYearsDay.getTime() - today.getTime();
var daysLeft = Math.ceil(diff / (24*60*60*1000));
document.write("<h1>今年の残り日数は" + daysLeft + "日です。</h1>");

汎用例）
・イベントまでのカウントダウン
・過ごした時間や残された時間を利用した哲学的な言い回し

プロトタイプの辞書利用

例）名前と番号の出力

Customer.prototype.showInfo = function(){
    console.log("番号:", this.number, "名前:", this.name);
};
var c1 = new Customer(1, "山田太郎");

汎用例）
・バンド名や楽曲名順など、並び替えの容易化
・日によって異なるジャンル（対象別、土地別、色別）での写真の分別表示

参考図書
きちんとわかる！JavaScript　技術評論社