カテゴリー : JavaScript

[JavaScript][jQuery] 要素 DOM の存在確認・チェック

JavaScriptで、要素 DOM の存在確認をする方法がたくさんあるので迷うけど、結論としては、

document.getElementById("id") != null

でチェックのが速くて良いみたい。

コード 速度
document.getElementById("id") != null 0.019ms
$("selector")[0] 0.033ms
$("selector").get(0) 0.040ms
$("selector").size() 0.041ms
$("selector").length 0.069ms
$("selector").is("*") 0.169ms

・引用元:[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき はてなブックマーク - [JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき

jQueryによる要素の存在チェックまとめ: 小粋空間 はてなブックマーク - jQueryによる要素の存在チェックまとめ: 小粋空間

JsDoc Toolkit 入門

JsDoc Toolkit 入門ということで色々メモ。

JsDoc Toolkit の参考サイト

JsDoc Toolkitを使う! – トップページ はてなブックマーク - JsDoc Toolkitを使う! - トップページ

JsDoc Toolkitによる開発効率向上を目指して - @IT はてなブックマーク - JsDoc Toolkitによる開発効率向上を目指して - @IT

JsDoc Toolkit メモ はてなブックマーク - JsDoc Toolkit メモ

JsDoc Toolkit のインストール

■ Mac に Homebrew でインストール

% brew install jsdoc-toolkit

JsDoc Toolkit をもっと便利にするツール

■ スタイリッシュで機能的な API ドキュメントを簡単に作成するためのテンプレート

Jsdoc2-template-bootstrap はてなブックマーク - Jsdoc2-template-bootstrap

OrgaChem/JsDoc2-Template-Bootstrap · GitHub はてなブックマーク - OrgaChem/JsDoc2-Template-Bootstrap · GitHub

JavaScriptコーダー必見!クールなJsDoc用テンプレート「JsDoc2-Template-Bootstrap」 | DOTAPON Blog はてなブックマーク - JavaScriptコーダー必見!クールなJsDoc用テンプレート「JsDoc2-Template-Bootstrap」 | DOTAPON Blog

[JavaScript]スクロールしたときにサイドバーのパーツをjQueryで止める方法

JavaScript や jQuery を使って、スクロールしたときにサイドバーのパーツを止める方法が紹介されている記事をメモ。

スクロールしたときにサイドバーのパーツをjQueryで止める方法: 小粋空間 はてなブックマーク - スクロールしたときにサイドバーのパーツをjQueryで止める方法: 小粋空間

ライブドアみたいにスクロールしたらサイドバーの広告を固定する – ぼくはまちちゃん!(Hatena) はてなブックマーク - ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん!(Hatena)

[JavaScript] RSA 公開鍵を使った暗号化/復号化ができるライブラリ「cryptico.js」

JavaScript で RSA 公開鍵を使った暗号化/復号化ができるライブラリ「cryptico.js」が使いやすそうなのでメモ。

wwwtyro/cryptico · GitHub はてなブックマーク - wwwtyro/cryptico · GitHub

JavaScriptで RSA 公開鍵による暗号化、復号化が出来るライブラリ「cryptico.js」 | Web活メモ帳 はてなブックマーク - JavaScriptで RSA 公開鍵による暗号化、復号化が出来るライブラリ「cryptico.js」 | Web活メモ帳

以上です。

[IE6] javascript:void(0); と onclick で動かない問題の解決方法

IE6 にて、href に javascript:void(0); を指定して、 onclick を使う場合は、onclick 内の最後に return false; を記述しないと動かない。

■ IE6 で動かないコード

<a href="javascript:void(0);" onclick="document.form.submit();">

■ IE6 で動くコード(onclick 内の最後に return false; を記述)

<a href="javascript:void(0);" onclick="document.form.submit(); return false;">

また、IE6 に苦しめられるとは…。

【参考】

javascript: void(0); のIEでの挙動 – 雑想空間 はてなブックマーク - javascript: void(0); のIEでの挙動 - 雑想空間

javascript:void(0) のIE6での注意点/WEBサイト作成の注意点 »サイト構築日記 はてなブックマーク - javascript:void(0) のIE6での注意点/WEBサイト作成の注意点 »サイト構築日記

[jQuery] Proxy Pattern を使ってメソッドをオーバーライド

jQuery にて、Proxy Pattern というデザインパターンを使って alert メソッドをオーバーライドする方法を調べたのでメモ。

(function() {
  var proxied = window.alert;
  window.alert = function() {
    // ここに処理を追加する
    return proxied.apply(this, arguments);
  };
})();

以上です。

参考情報

Types – jQuery JavaScript Library はてなブックマーク - Types - jQuery JavaScript Library

override – JavaScript: Overriding alert() – Stack Overflow はてなブックマーク - override - JavaScript: Overriding alert() - Stack Overflow

必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目) | Ginpen.com はてなブックマーク - 必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目) | Ginpen.com

[JavaScript] 実行時間をミリ秒単位で簡易計測する方法

JavaScript で、実行時間をミリ秒単位で簡易計測するスニペットをメモ。

var start = new Date();
// 実行時間を計測したい処理
var end = new Date();
var executionTime = end.getTime() - start.getTime();
 
console.log(executionTime);

【参考】

JavaScriptでページのレンダリング時間をミリ秒単位で簡易計測する – 大人になったら肺呼吸 はてなブックマーク - JavaScriptでページのレンダリング時間をミリ秒単位で簡易計測する - 大人になったら肺呼吸

[Javascript] オブジェクトが空か判定・判別する方法

JavaScript で、オブジェクトのプロパティが一個以上あるかどうかを調べるには、Object.keys を使って下記のように書けます。

var hoge = { 
    fuga: 1,
    moga: 2,
};
 
console.log(Object.keys(hoge).length === 2); // true

【参考】

javascript の オブジェクトが空かどうかを調べる場合 – Node.js日誌β はてなブックマーク - javascript の オブジェクトが空かどうかを調べる場合 - Node.js日誌β

keys | Mozilla Developer Network はてなブックマーク - keys | Mozilla Developer Network

[Javascript] HTMLエスケープを行う htmlspecialchars

Javascript で HTML において特殊な意味を持つ文字のエスケープを行うPHP関数 htmlspecialchars を実装するコードをメモ。

function htmlspecialchars(ch) { 
    ch = ch.replace(/&/g,"&amp;") ;
    ch = ch.replace(/"/g,"&quot;") ;
    ch = ch.replace(/'/g,"&#039;") ;
    ch = ch.replace(/</g,"&lt;") ;
    ch = ch.replace(/>/g,"&gt;") ;
    return ch ;
}

【参考】

Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装:phpspot開発日誌 はてなブックマーク - Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装:phpspot開発日誌

[jQuery] カンタンにDialogを表示できる「ThickBox」の使い方・参考記事まとめ

jQuery の ThickBox を使うときの参考記事をまとめてみました。

基本的には公式サイトを読めばOKです。

・公式(英語):ThickBox 3.1 はてなブックマーク - ThickBox 3.1

英語が苦手な方は日本語の参考サイトを読んで、ざっくり使い方を理解してから公式サイトを読むといいかもしれません。

jQuery版のLightBox「ThickBox」[to-R] はてなブックマーク - jQuery版のLightBox「ThickBox」[to-R]

今更ながらjQueryのプラグインThickBox3.1 – Webtech Walker はてなブックマーク - 今更ながらjQueryのプラグインThickBox3.1 - Webtech Walker

以上です。