目次
PythonとJavaScriptがメイン。サーバーレスとマイクロサービスが好き。
基本は理解しており大抵の処理は書ける人でも使用頻度が低いためか忘れてしまいがちな JavaScript の雑多な知識を書き出してみました。
タイマー
一定間隔毎に繰り返し実行
var intervalId;
var intervalTime = 1000; //msec
var cnt = 0;
var intervalFunc = function(){
console.log(cnt);
if(cnt == 5) {
clearInterval(intervalId);
}
++cnt;
};
// すべての要素がロードされたら実行
// http://api.jquery.com/ready/
$(function(){
intervalId = setInterval(intervalFunc, intervalTime);
});
一定時間経過したら一度だけ実行
var timeoutId;
var timeoutTime = 2000; //msec
var timeoutFunc = function(){
console.log('timeoutFunc');
};
// すべての要素がロードされたら実行
// http://api.jquery.com/ready/
$(function(){
timeoutId = setTimeout(timeoutFunc, timeoutTime);
// clearTimeout(timeoutId);
});
ページの情報
// http://localhost/help の場合の例:
console.log(location.host); //=> localhost
console.log(location.pathname); //=> /help
console.log(location.protocol); //=> http
ポップアップ
alert('警告');
console.log(confirm('よろしいでしょうか?')); // => true/false
console.log(prompt('入力してください', '既定値'));
var subwin = window.open('http://www.example.com/');
if (subwin && !subwin.closed) {
subwin.close();
}
クッキーの操作
敢えてライブラリを使用せずにクッキーを扱う場合は以下のようにします。
// クッキーは ';' 区切りの文字列で表現します。
var c = '';
// 最初に名称を設定
c = 'myCookie=' + encodeURIComponent('日本語も大丈夫');
// 有効期限を設定 (省略時はブラウザを閉じたときに削除されます)
var exp = new Date(); // 加減算の項を参照:
exp.setDate(exp.getDate() + 2);
c += ';expires=' + exp.toGMTString(); // GMT で指定
// SSL 通信でのみ利用可能にするかどうか
c += ';secure';
// ブラウザに保存
document.cookie = c;
// クッキーを読み出す
// - 自分のドメイン配下でないクッキーは利用できません
// - HttpOnly なクッキーは利用できません
// - secure クッキーは SSL でのみ利用できます
var cs = document.cookie.split(';');
for(var i = 0; i < cs.length; ++i) {
var kv = cs[i].split('=');
console.log(kv[0] + ': ' + decodeURIComponent(kv[1]));
}
配列 grep
JavaScript は配列の grep を提供していません。jQuery.grep を利用しましょう。
var data = [
{keyA: 1, keyB: 3},
{keyA: 2, keyB: 4}
];
var filter = function(e,i){
return (e.keyA % 2) == 0;
};
var res = $.grep(data, filter);
console.log(res); //=> [Object {keyA=2, keyB=4}]
HTML の構築
要素の追加
index.html
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="my_id"></div>
</body>
sample.js
$(function(){
// ここに以下の内容を設置します↓
});
指定要素の内部に e を入れ込みます。.append() は内部の最後に入れ込みます。.prepend() は内部の最初に入れ込みます。
var e = $('<div>Test</div>');
$("#my_id").append(e);
$("#my_id").prepend(e);
指定要素と同階層に e を並べます。.after() は指定要素の後に配置します。.before() は指定要素の前に配置します。
var e = $('<div>Test</div>');
$("#my_id").after(e);
$("#my_id").before(e);
指定要素の内部に e を入れ込みます。.appendTo() は内部の最後に入れ込みます。.prependTo() は内部の最初に入れ込みます。
var e = $('<div>Test</div>');
e.appendTo("#my_id");
e.prependTo("#my_id");
指定要素と同階層に e を並べます。.insertAfter() は指定要素の後に配置します。.insertBefore() は指定要素の前に配置します。
var e = $('<div>Test</div>');
e.insertAfter("#my_id");
e.insertBefore("#my_id");
要素の包含
index.html
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="my_id" class="my_class"></div>
<div class="my_class"></div>
</body>
sample.js
$(function(){
// ここに以下の内容を設置します↓
});
.wrap() は指定要素を個別に外から赤枠 div で包みます。
$('.my_class').wrap($('<div></div>').css('border', 'solid 1px Red'));
.wrapAll() は指定要素をひとまとまりにして、外から赤枠 div で包みます。
$('.my_class').wrapAll($('<div></div>').css('border', 'solid 1px Red'));
.wrapInner() は指定要素の中身を赤枠 div で包みます。
$('.my_class').wrapInner($('<div></div>').css('border', 'solid 1px Red'));
.unwrap() は指定要素を包んでいる赤枠 div を取り除きます。
$('.my_class').wrap($('<div></div>').css('border', 'solid 1px Red'));
$('.my_class').unwrap();
要素の削除
index.html
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="my_id">Test</div>
</body>
指定要素の削除
子要素を含めてすべて削除するためには .remove() を利用します。
$(function(){
$('#my_id').remove();
});
一旦は削除するにせよ後で再度利用する可能性がある場合は .detach() を利用します。返り値を変数に保存しておき、任意のタイミングで DOM に追加します。前述の .remove() と異なり、イベントリスナや子要素などすべての属性が保存されます。
var div;
$(function(){
$('#my_id').click(function(){
console.log('my_id');
});
div = $('#my_id').detach();
div.appendTo('body');
});
隠すだけ
削除はせずに隠したいだけという場合は .hide() を利用します。
sample.js
$(function(){
$('#my_id').hide();
});
子要素を削除
対象要素の子要素を削除して中身を空にするためには .empty() を利用します。対象要素自体は削除しません。
sample.js
$(function(){
$('#my_id').empty();
});
jQuery オブジェクト化
通常の DOM オブジェクトを $() でラップすると jQuery のメソッドが使用できるようになります。これはとても重要な事実です。例えば this をラップして $(this) とする場面は頻出です。
index.html
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div>Test</div>
</body>
sample.js
$(function(){
$(document.body).css('background-color', '#33ff66');
});
関数内 this にオブジェクトをバインド
オブジェクト this が指すものは文脈 context によって変化します。
- 通常の関数内: undefined (何も指さない)
- オブジェクトのメソッド関数内: オブジェクトを指す
- イベントリスナ関数内: イベントの発生源となった DOM 要素を指す
jQuery.proxy() を利用することで、関数内 this が文脈 context オブジェクトを指すように変更できます。
index.html
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="my_id">Test</div>
</body>
通常の関数にコンテキストオブジェクトをバインド
sample.js
var context = {
myKey: 1
};
var func = function(){
console.log(this.myKey);
};
$(function(){
var funcUnderContext = $.proxy(func, context);
funcUnderContext(); //=> 1
func(); //=> undefined
});
オブジェクトのメソッド関数にコンテキストオブジェクトをバインド
コンテキストオブジェクトに自分自身を指定することで、イベントリスナ関数として提供したオブジェクト関数内 this でそのオブジェクトを指すことができます。jQuery.proxy() を利用しない場合は、イベントの発生源となった DOM 要素を指してしまいます。
sample.js
var obj = {
myKey: 1,
myFunc: function(){
console.log(this.myKey);
}
};
$(function(){
console.log(obj.myFunc()); //=> 1
// $('#my_id').click(obj.myFunc); //=> undefined (DOM 要素 div#my_id で myKey プロパティは未定義)
$('#my_id').click($.proxy(obj.myFunc, obj)); //=> 1
});
ちなみに
$(function(){
$('#my_id').click($.proxy(obj.myFunc, obj));
});
については以下のような略記法が用意されています。
$(function(){
$('#my_id').click($.proxy(obj, 'myFunc'));
});
クラスインスタンスのメソッド関数にコンテキストオブジェクトをバインド
JavaScript のオブジェクトのうち、クラスインスタンスとしてのオブジェクトに関しても同様に jQuery.proxy() を利用できます。コンテキストオブジェクトに自分自身を指定することで、イベントリスナ関数として提供したオブジェクト関数内 this でそのオブジェクトを指すことができます。
sample.js
var MyClass = function(prop){
this.prop = prop;
};
MyClass.prototype.method = function(){
console.log(this.prop);
};
$(function(){
var obj = new MyClass('MyClass');
obj.method(); //=> MyClass
// $('#my_id').click(obj.method); //=> undefined (DOM 要素 div#my_id で prop プロパティは未定義)
$('#my_id').click($.proxy(obj.method, obj)); //=> MyClass
// 略記法:
// $('#my_id').click($.proxy(obj, 'method')); //=> MyClass
});
$.proxy() を使用しないほうがシンプルになる場面
クラスをインスタンス化する過程でイベントリスナ関数を登録する場面では jQuery.proxy() を使用せずに self というクロージャを利用したほうがシンプルになります。
sample.js
var MyClass = function(element){
this.prop = 'MyClass';
// element.click(function(){
// console.log(this.prop); //=> undefined
// }); // (DOM 要素 div#my_id で prop プロパティは未定義)
// element.click($.proxy(function(){ // $.proxy() を利用する場合
// console.log(this.prop); //=> MyClass
// }, this));
var self = this; // クロージャを利用する場合
element.click(function(){
console.log(self.prop); //=> MyClass
});
};
$(function(){
new MyClass($('#my_id'));
});
「ページが読み込まれたタイミング」の詳細
ページが読み込まれたタイミングで発生するイベントには二種類あります。
ready は画像などの読み込みを待たなくてよいため load よりも前に発生します。ready は DOM ツリーの頂点 document に対してのみ登録できるイベントリスナですが load は任意の DOM 要素に対して登録できます。また、通常 JavaScript は DOM ツリーが完成していれば問題なく動作するため ready のほうがよく利用されます。そのため ready に関しては document を省略した記法が用意されています。
$(function(){
// DOM 操作の処理
});
上記内容は下記内容の略記法です。
$(document).ready(function(){
// DOM 操作の処理
});
以下の内容を実行すると「"DOM tree is ready." → "Page is fully loaded."」という順番で出力されます。
$(window).load(function(){
console.log('Page is fully loaded.');
});
$(function(){
console.log('DOM tree is ready.');
});
load が利用される場面
画像のサイズ情報に依存した JavaScript を実行する場面では ready では対応できないため load が利用されます。
$("img.icon").load(function(){
if( $(this).height() > 100 ) {
$(this).addClass("bigImg");
}
});
記事の執筆者にステッカーを贈る
有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。
さらに詳しく →Feedbacks
ログインするとコメントを投稿できます。
関連記事
- JavaScriptにおける関数定義function文で定義します。 sample.js function fact(n) { return (n==0) ? 1 : n*fact(n-1); } for(var i=0; i<7; ++i) console.log(i +'!='+ fact(i)); 実行例 $ node sample.js 0!=1 1!=1 2!=2 3!=6 4!=24 5!=120 6!=...
- Date オブジェクトの使用例 (JavaScript)コンストラクタ // 現在時刻 var d = new Date(); console.log(d); // システムのタイムゾーンに変換して出力 (この例では JST) //=> Thu Jan 29 2015 23:45:21 GMT+0900 (東京 (標準時)) // システムのタイムゾーン (以下の例では JST) での日付指定 d = new Date('2000/01/01')...
- AngularJS が提供するユーティリティAngularJS では JavaScript の言語仕様として不足のある汎用的な処理を補うためにユーティリティが提供されています。代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> ...
- JavaScript のグラフ描画ツール Dygraph の使用例ダウンロード こちらのページから dygraph-combined.js をダウンロードします。 サンプルコード チュートリアルより。 <html> <head> <script type="text
- サービス (AngularJS)AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...