押さえておきたいjavascriptで出来ること
javascriptによるWebサイト開発で行われる基本的な処理に絞ってまとめてあります。全体として使いこなして効果的な機能とするには、HTMLタグやcssの知識が必須になります。
目次
javascriptで日時を扱う方法
javascriptで現在日時などを取得するには一旦、日時オブジェクトを作成してから、メソッドで取り出します。注意点として、月や曜日はプログラミングの世界での表現となっているため、表示の際などには変換が必要です。
Unixタイムスタンプとは、1970/1/1 00:00:00 からの経過秒数で、21世紀中は10桁となります。時系列データの並び替えなどに有用です。javascriptでは、ミリ秒まで取得できるので、別システムと連携する場合は、秒単位に変換します。
/* 現在日時を取得 */
var d = new Date();
/* 年 4桁 */
var y = d.getFullYear();
/* 月 0-11 */
var m = d.getMonth();
/* 日 1-31 */
var day = d.getDate();
/* 曜日 0-6 */
var w = d.getDay();
/* 時間 0-23 */
var h = d.getHours();
/* 分 0-59 */
var min = d.getMinutes();
/* 秒 0-59 */
var s = d.getSeconds();
/* Unixタイムスタンプ ミリ秒 */
var mtime = d.getTime();
/* Unixタイムスタンプ 秒 */
var time = Math.round( d.getTime()/1000 );
/* 月や日、時間、分、秒を0で埋めて、2桁に揃える */
m += 1;//月は0からの数値なので1足す
if (m < 10) m = '0'+m;
if (day < 10) day = '0'+day;
if (h < 10) h = '0'+h;
if (min < 10) min = '0'+min;
if (s < 10) s = '0'+s;
/* 曜日を日本語表記に */
var week = ['日','月','火','水','木','金','土'];
var w = week[w];
/* 特定の日時を調べたい時 例では10日前、timeはunixタイムスタンプ */
var d = new Date( time-60*60*24*10 );
javascriptでウィンドウを開く方法
Webアプリケーションの動作として、リンクをクリックした時の動作と同じ動きをさせたい時などに利用されます。また開いたウィンドウは、プログラム側で制御することも出来ます。
/* 新しいタブにURLを開く */
window.open('URL');
/* 現在のタブにURLを開く */
window.open('URL', '_self');
/* 新しいウィンドにURLを開く サイズを指定する */
window.open('URL', null, 'height=400,width=600');
/* 指定ウィンドウに開く ウィンドウ数を限定したい場合 */
window.open('URL1', 'name');
window.open('URL2', 'name');
/* 開いたウィンドウを操作する */
var win = window.open('URL');
win.close();
警告や注意を促すモーダルウィンドウを表示することも出来ます。実行後に元に戻せない処理を行なう際に、ユーザーに再度、確認を取る場合などに利用されます。
/* アラートウィンドウを表示する */
alert('ご注意下さい');
/* 確認ウィンドウを表示する */
if (confirm('削除しますか？削除後は元に戻せません。')) {
/* OKボタンが押された時の処理 */
} else {
/* キャンセルボタンが押された時の処理 */
}
/* 入力ウィンドウを表示する */
var txt = prompt('クーポンコードを入力して下さい', '初期入力値');
javascriptで現在のURLを扱う方法
javascript側で、URL毎に表示を変えたい場合などに利用できます。URLに識別IDなどを持たせて判定する流れになります。
/* 現在のURLを取得する */
var u = location.href;
/* httpsアクセスか確認する */
var pro = location.protocol;
/* ホスト名を取得する */
var host = location.host;
/* URLパスを確認する */
var path = location.pathname;
/* ページ内アクセスを確認する */
var hash = location.hash;
/* ページをリロードする */
location.reload();
/* 現在のURLを変更する ページ遷移 */
location.href = 'URL';
/* 現在のページ内を移動する ページ内遷移 */
location.href = '#id1';
javascriptでは、同一ページ内での画面遷移が行えるWebアプリケーションを開発することが出来ます。本来、複数のURLで構成されるWebアプリに対して、単一ページのみの場合はSPA（シングルページアプリケーション）と呼ばれ、主にAjaxを利用して、外部から情報を取得して反映を行います。
同一ページなのでURLは通常一つしかありませんが、javascriptではページ遷移をさせずに、URLのみを変更することが出来ます。開発時には、遷移毎の状態を設計して、ページ遷移時のイベント onpopstate で検出して反映させる流れになります。
/* URL移動せずに、URLを変更 ブラウザ履歴に追加される */
var state = {};
history.pushState(state, null, 'page1');
/* URL移動せずに、URLを変更 ブラウザ履歴に追加されない */
var state = {};
history.replaceState(state, null, 'page2');
/* 履歴の移動時 */
window.onpopstate = function(e){
/* 設定したstateで判定 */
if (e.state=='') {}
}
/* ブラウザ履歴で前のページに戻る */
history.back();
/* ブラウザ履歴で次のページに進む */
history.forward();
javascriptでリンク元を調べる方法
Webサイトへアクセスしてきたユーザーがどのページから移動してきたかを知ることが出来ます。サーバサイドでは、例えばPHPでは、$_SERVER['HTTP_REFERER'] で知ることが出来ますが、綴りが異なるので注意が必要です。
またブラウザの拡張機能や、サーバへのリクエストアプリなどで、リファラー情報は設定してからアクセスできるため、厳密な制限を行なう場合は、注意が必要となります。
/* リンク元URL（リファラー）を取得 */
var ref = document.referrer;
javascriptでスクロール位置を調べる方法
Webサイトでは、ブラウザのスクロール量に応じて、複数のレイヤー（層）を別々のスピードで動かすことで奥行きを感じさせたり、立体感を出したりできます。この視差効果をパララックスと言います。
/* ブラウザの縦方向のスクロール位置 */
var top = (document.documentElement.scrollTop || document.body.scrollTop);
/* ブラウザの横方向のスクロール位置 */
var left = (document.documentElement.scrollLeft || document.body.scrollLeft);
/* 画面の要素内の縦スクロール位置 */
var top = o.scrollTop;
/* 画面の要素内の横スクロール位置 */
var top = o.scrollLeft;
/* スクロールイベントで取得 */
window.onscroll = function(){
/* スクロール位置 */
this.scrollTop;
}
javascriptで時間差で処理を行なう方法
javascriptでは、読み込みなどでユーザーを待たせることなく、一定時間ごとに処理を行ったり、指定時間後に処理を行わせることが出来ます。アニメーション処理などに利用できます。
具体的な処理内容としては、HTMLエレメントのスタイルを変更して、移動や色を変化させるなどがあります。
/* 指定ミリ秒後に処理を一回だけ実行 ミリ秒 */
var id = setTimeout(function(){}, 1000);
/* 処理実行をキャンセル */
clearTimeout( id );
/* 指定ミリ秒ごとに処理を実行 ミリ秒 */
var id = setInterval(function(){}, 1000);
clearInterval( id );
javascriptでクッキーを処理する方法
クッキーとは、ブラウザに保存されるデータで、主にサーバサイドのWebアプリケーションでよく使われますが、javascriptでも利用できます。ただし、クッキーの発行時にjavascriptからアクセスできない状態にすることも出来ます。
/* クッキーを取得し、連想配列にする */
var cookie = {};
var cs = document.cookie.split('; ');
for(var i in cs){
var c = cs[i].split('=');
cookie[ c[0] ] = decodeURIComponent( c[1] );
}
/* 連想配列をクッキーに保存する */
var a = {};
for(var i in a){
document.cookie = i +'='+ encodeURIComponent( a[i] );
}
javascriptでクリップボードにコピーする方法
ユーザーのクリックなどの操作時に、特定のエレメントの文字列を選択し、クリップボードにコピーすることが出来ます。打ち間違いが起こりやすい文字列をユーザーに提供する場合などに利用されます。
/* ボタンクリック時に、エレメントを選択し、クリップボードにコピー */
document.querySelector('#copy').onclick = function(){
var o = document.querySelector('#from1');
o.select();
document.execCommand('copy');
}
javascriptでブラウザを判定する方法
特定のブラウザで機能しないスクリプトやスタイル指定を除外する場合などに判定で処理分けを行なう必要があります。判定は、ユーザーエージェントで行いますが、この取得できる値はブラウザの拡張機能などで変更が可能です。
/* ブラウザ情報を取得 */
var ua = window.navigator.userAgent.toLowerCase();
/* IE */
if (ua.indexOf('msie')!==-1 || ua.indexOf('trident')!==-1) {}
/* Edge */
if (ua.indexOf('edge')!==-1) {}
/* Google Chrome */
if (ua.indexOf('chrome')!==-1) {}
/* Safari */
if (ua.indexOf('safari')!==-1) {}
/* Firefox */
if (ua.indexOf('firefox')!==-1) {}
/* Opera */
if (ua.indexOf('opera')!==-1) {}
/* 端末を判定する */
/* iPhone */
if (ua.indexOf('iphone')!==-1) {}
/* iPad */
if (ua.indexOf('ipad')!==-1) {}
/* android */
if (ua.indexOf('android')!==-1) {
/* スマホ */
if (ua.indexOf('mobile')!==-1) {}
/* タブレット */
if (ua.indexOf('mobile')===-1) {}
}
/* windows */
if (ua.indexOf('windows')!==-1) {
/* スマホ */
if (ua.indexOf('phone')) {}
/* タブレット */
if (ua.indexOf('tablet') {}
}
/* kindle */
if (ua.indexOf('kindle')!==-1) {}
javascriptでブラウザのリサイズに対応する方法
Webサイト上のエレメントを固定幅などにしている場合、ブラウザのリサイズがあった時に検出し、反映する必要があるケースがあります。例えば、canvas の描画サイズはwidth属性、height属性で設定する必要があるため、レスポンシブデザインにする場合は、都度書き換えるようにします。
/* ブラウザがリサイズされた度に処理が実行される */
window.onresize = function(){
/* ウィンドウの横幅 */
window.innerWidth;
/* ウィンドウの高さ */
window.innerHeight;
}
javascriptでサーバと通信を行なう方法
javascriptがサーバと通信を行なう仕組みをAjaxと言います。主にGET送信とPOST送信が利用され、簡単に実装が可能ですが、送信するデータとサーバサイドの設計、レスポンス処理のコーディングが必要になります。
/* URLの設定 */
var url = '';
/* サーバ通信用オブジェクト */
var req = new XMLHttpRequest();
/* レスポンスが返ってきた時の処理 */
req.onload = function(){}
/* URLにGETリクエスト */
req.open('GET', url, true);
req.send(null);
/* URLにPOSTリクエスト */
var data = '';
req.open('POST', url, true);
req.send(data);