Javascript

Javascriptで関数を再帰的に呼び出す方法。

argumentsクラスのcalleeプロパティを用いる。

function foo(){
    // 処理
    arguments.callee(); // 自分自身を呼び出す
}

よく例として挙げられるのは階乗や総和の計算。
ほかにもエレガントに使えそうな場面があったら使ってみようかな。

Javascriptの変数宣言時、varの有無で挙動はどのように変わるか。

■var有り

宣言された関数内にてローカルスコープを持つ変数として振舞う。
また、DontDelete属性を持つためdelete演算子による削除が出来ない。

■var無し

関数内部での宣言であってもグローバルオブジェクトのメンバ変数として振舞う。

 

これは挙動をちゃんと理解してないとどっぷりはまるレベルの違い。
何か特別必要じゃない限りvar宣言は常にしておくでFAかな。

jQueryにてappendされた要素に対してイベントを関連付ける方法。

基本的な事だと思うけど、画面がレンダリングされた後に追加された要素に対してはイベントが割り振られないという罠におもっくそはまった。
とおもったら、意外と簡単に解決したので一応メモ。
ざっくり言うと、append()処理が走る関数内でイベントを宣言してあげればよい。

$(function(){
    var html = '<button class="appended">btn</button>';
    $('div.target').append(html);
    $('.appended').click(function(){
        alert('ok'); // 割り当てたい処理や関数を記述
    })
})

シンプルだね!

jQueryにて兄弟要素を取得する。

メモ。

var elem = $('div');

// すぐ次の要素を選択する。それ以降の要素は走査しない。
elem.next();
// 次以降全ての要素を取得する。
elem.nextAll();
// すぐ後ろの要素を選択する。それ以前の要素は走査しない。
elem.prev();
// 後ろの要素を全て取得する。
elem.prevAll();

上記関数はいずれも引数に条件を渡すことで厳密に要素を定義することが可能。

JavascriptでMD5を計算する。

必要だったので調べたらよさげなライブラリをみつけた。

ココ↓
http://labs.cybozu.co.jp/blog/mitsunari/2007/07/md5js_1.html

■使い方。

1, まずは上記のURLから「md5.js」をダウンロード

2, 落としたJSを読み込む

<script type="text/javascript" src="md5.js"></script>

3, 下記のようにして使う。

var str = 'abcde'; // md5化したい文字列
var md5 = CybozuLabs.MD5.calc(str);
console.log(md5);

文字列にマルチバイトが含まれている場合は、第2引数に「CybozuLabs.MD5.BY_UTF16」を渡してやること。
以下例。

var str = 'あかさたな'; // md5化したい文字列
var md5 = CybozuLabs.MD5.calc(str, CybozuLabs.MD5.BY_UTF16);
console.log(md5);

Javascriptにてtimestampを取得する方法。

いわゆるUnixTime。

var time = parseInt(new Date()/1000);
console.log(time);

jQueryでinput要素のdisabledを操作する。

ボタンとかフォームを無効化させたい時用。そのまんまだけどメモ。

■無効化したいとき

var elem = $('button');
elem.attr('disabled', 'disabled');

■有効にしたいとき

var elem = $('button');
elem.removeAttr('disabled');

いじょう。かんたん。

jQueryでGrowlウィンドウを実装する。

右上にぽこっと出てくるあれ。ちょっとした機能だけど実装するとかっこいい。

1, まずはココ←から「pnotify」をダウンロード

2, 以下の通り必要なファイルを読み込む。head内が無難かと。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pnotify.js"></script>
<link href="jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" />
<link href="jquery.pnotify.default.icons.css" media="all" rel="stylesheet" type="text/css" />
// ※公式と同様のスタイルにするためにはbootstrap.cssを読み込む必要があるので注意

3, Growlウィンドウを出したいタイミングで下記コードを呼び出す

$.pnotify({
    title: 'Success Title',
    text: 'Test Message',
    type: 'success'
});

デモ←クリック(右上に表示されます。)
※bootstrap.cssを読み込んでいないため、全く装飾されていないウィンドウが表示されます。

ほかにも色々な出し方があるので、詳しくは公式サイトを参照されたし。↓
http://sciactive.github.io/pnotify/