JavaScript：with構文によるブロックスコープ再考
変態文法と聞いて胸がときめく人なら、ぜひマスターしておきたいのがJavaScriptのwith構文です。スピード狂やuse strict信奉者に蔑まれ、そのうち黒歴史として消滅しそうな哀れな構文ですが、消えるには惜しい。ちょっと光を当ててみましょう。 以下、パフォーマンス無視の文章でいきますのでよろしくお願いしますm(_ _)m with文の教科書的な説明 もともとwithはオブジェクトのメンバを展開するための構文でした。たとえばdocument.getElementById()などのDOMのメソッド類は多用すると思いますが、名前が長いですよね。せめてdocument.を省略できないものか、と誰もが思うでしょう。ちまちまやるなら、 var getElementById = document.getElementById, getElementsByName = document.getEl
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
jQueryのテンプレートプラグイン「jquery-tmpl」を使ってみた (多分)その1 - 黒羊工房はてな版
追記：続編書きました。 リンクは一番下に 最近jQueryにはまっているひつじです。こんにちは。 jQueryに限らず、JavascriptでDOMをいじっていると var name = 'bsheep'; $('<div>').addClass('name').text(name).appendTo('#profile'); // // <div id="profile"></div> // ↓ // <div id="profile"><div class="name">bsheep</div></div> // こんな感じでDOMをその場で生成して埋め込みとかいう操作が結構あります。 でも、こういうの書いているとHTMLとscriptとを分離したくなってきますよね！ この書き方のまま複雑なものとか作ってると、できあがりのHTMLの構造を読み取るための思考コストがかなり必
jQuery.extend マニアックス
jQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。 jQuery.extend の呼び出しパターンは次の４通り。 $.extend([deep,] target, obj1, [obj2, [obj3, ...]])$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj) 全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。 以下では分かりやすくするために deep オプションは省略した一覧を掲載する。 $.extend(target, obj1, [obj2, ...]])$.extend(obj)$.fn.extend(obj)$(...).extend(obj) だいぶシンプルにな
Opera の UserJS と Extension のイベント順 - 'ashula.info
質問スレPart23の261からの流れが興味深かったのでちょっと実験してみた． 前提 ユーザー JavaScript でできることによれば，.js なスクリプトはすべてのスクリプトの実行の前のとなっていて，一方 ユーザー JavaScript による制御のGreasemokeyスクリプトの節 によれば，.user.js にしたスクリプトは DOMContentLoade 以降 load 前になっているので，以下の順序で実行されることが予想される． *.js DOMContentLoaded *.user.js onload .js で登録した DOMContentLoaded と 文書内でインラインで登録した DOMContentLoaed との関係や，.js で登録した onload と body.onload と*.user.js で登録した onload との関係などは特に規定されて
typeof演算子から学ぶJavaScriptのデータ型の概念と関係する考察のまとめ - 三等兵
まずはtypeof演算子について。JavaScript Gardenというウェブページがありまして。こういう一文がありまして。 The typeof operator (together with instanceof) is probably the biggest design flaw of JavaScript, as it is near of being completely broken. http://bonsaiden.github.com/JavaScript-Garden/#typeof 訳）http://efcl.info/adiary/Javascript/JavaScriptGarden#k95p17 要するにtypeof演算子は「ヒャッハーtypeof演算子ぶっ壊れてるぜー」ってことらしい。理由が下記の表。 [表1] Value Class Type - "f
単語前方一致・単語後方一致・単語完全一致 String.indexOfの魔力 - ぶれすとつーる
indexOfにはあまり知られてない裏技的な使い方がある。 よく知られてるString.indexOf indexOf 構文 indexOf(searchValue[, fromIndex]) パラメータ searchValue 検索する値を表す文字列。 fromIndex 呼び出す文字列内の検索を始めるための位置。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。 概要 呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。fromIndex から検索を始め、値が見つけられない場合、-1 を返します。 indexOf - MDC Doc Center 概要からわかるように、文字列の出現インデックスを取るものだが、肝心なのは見つからない場合-1を返すことだ。 これを利用してとある条件の下で以下の三つの正規表現ライクなこと
DOMに要素が挿入される度にイベントを起こすDOMNodeInsertedの扱い方 - 三等兵
DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない
無職のプログラミング [JavaScript]小数を整数に変換する望ましい方法は？
昨日書いた 背景をdiv要素に描画して、HTML5 Canvasタグに重ねる だが、 これは HTML5@iPhoneゲーム開発 のCanvas高速化Tipsを参考にしている。 このTipsには「座標や幅、高さの指定はintにする」という項目もあって、深く考えずにparseIntしていたのだが、見直したら「parseIntは使わない」と書いていた。 浮動小数点数を整数にする高速（？）な方法 - JavaScript比較 によると、parseInt(Number)はブラウザによってはかなり遅いようだ。 そもそもparseIntは文字列を変換する関数だし。 じゃあどうすればいいのかと思ったのだが、 Re:浮動小数点数を整数にする高速（？）な方法 - JavaScript比較 によると、 しかし、関数呼び出しである Math.floor よりも、プリミティブ演算 (含ビット演算) を使うほうが格
use strict 怖い - hogehoge @teramako
Perlの話ではない、JavaScriptの話なのである。 あと、タイトルはまんじゅう怖い的な意味なのである ECMAScript 5 strict mode in Firefox 4 ? Mozilla Hacks ? the Web developer blog Firefox4.0b10pre に ECMAScript5 の Strict モードが実装されましたーパチパチー で、自分がはまった罠について書いておくよ。まあ上記ページに書かれていることなんだけどね。 "caller", "callee" in arguments オブジェクト 使うとエラー (function() { "use strict"; return arguments.callee; })(); TypeError: 'caller', 'callee', and 'arguments' properties
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
JavaScriptベストプラクティス30選-jsEdu
#jsEduから適当に選んで日本語にしたものです。 訳とかは全く正確ではなく、as possibleなど表現をかなり省いてるので命令口調になってます。 フィーリング的なものはあんまり入れてないので、興味をもったらTogetter – 「JavaScriptのベストプラクティス大会 jsEdu」を読みましょう。(まとめた奴はこれの10倍くらいありますが、被ってるのや関係無いのもあるので読める程度の量です) 全てを確認したわけではないので、正確性は保証しかねます。 ==ではなく===を使うべき (自動的に型変換に行われないのでバグが減る、高速) new Object() and new Array() よりも[] or {}を使うべき。 []や{}の方がシンプル JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナルで出てくるのは間違いだと思う。 []
jQuery公式のテンプレートplugin 「jQuery Templates」
jQuery公式のテンプレートplugin 「jQuery Templates」 Check Tweet 配布元:jquery’s jquery-tmpl at master – GitHub リファレンス:jQuery Templates jQueryプロジェクトからいくつかの公式プラグインが公開されました。そのひとつが「jQuery Templates」。これはJavaScriptで利用できるテンプレートエンジンです。 利用方法 本エントリー執筆時点ではGitHubからダウンロードして利用できますが、jQuery 1.5からはjQuery本体に組み込まれ、プラグインなしで利用することが出来ます。(本体への組み込みは延期されました)また、MicrosoftのCDNでも公開されていますので次のような記述で読み込むことも可能です。 <script type="text/javascript"
Nicholas C. Zakas「getElementsByTagName()がquerySelectorAll()よりも高速な件」 - 以下斜め読んだ内容
NCZOnline 2010.9.28のエントリ Why is getElementsByTagName() faster that querySelectorAll()? querySelectorAll()で取得されるNodeListは更新されない（static）件について getElementsByTagName()と比較して 処理の重さや、重くなる訳を仕様書やWebKitの実装を参照しながら説明して この２つのメソッドの使いどころを手短に記す という主旨のエントリ 豆知識 Scott Schillerは今Yahoo!のフェロー id:amachangの2008.3.6のエントリ「IE8 で実装された Selectors API とは何か？」でquerySelectorAll()／getElementsByTagName()の違いは分かりやすく書かれてる 以下斜め読んだ内容 エントリ
File APIでブラウザーからローカルファイルを操作 (1/5)
W3Cで標準化が進められている「File API」を使うと、指定したローカルファイルのファイル情報やファイルの中身（データ）をJavaScriptで取得できます。今回のJavaScriptラボはこのFile APIを使って、ブラウザー上にファイルの内容を表示してみましょう。テキストファイルの内容をそのまま表示するサンプルと、バイナリファイルを16進数データの羅列（バイナリダンプ、ダンプリスト）として表示するサンプルを作成します。 File APIの対応ブラウザー File APIは2010年10月現在、以下のブラウザーで利用できます。 Firefox 3.6 / 4β Google Chrome 6 このほか、Safari 5が、File APIを使ったファイル情報（ファイル名やファイルサイズなど）の取得に対応していますが、ファイル内容へのアクセスはできないので今回作成するサンプルは動作し
演算子の優先順位と結合規則
一つの式の中で複数の演算子が使われている場合、どのような順番で演算を行うのかによって結果が異なる場合があります。その為、 JavaScript では演算子の優先順位が決められており優先順位が高いものから順に演算を行います。また同じ優先順位の演算子が使われていた場合にどの順番で演算を行うのかを決めるために演算子の結合規則も決められています。ここでは JavaScript における演算子の優先順位と結合規則について解説します。 (Last modified: 2024-10-01)
七章第四回 ノードをまとめて扱う：DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net
七章第四回 ノードをまとめて扱う：DocumentFragmentこのページの最終更新日：2018年7月29日 今回解説するのは、DocumentFragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 実はこれはノードの一種です。つまり、「テキストノード」とか「要素ノード」とかと同じように、「DocumentFragment」という種類のノードがあるのです。 ノードの一種だから、appendChildなどで子ノードを追加したり、あるいはcloneNodeでDocumentFragment自身をコピーしたりもできます。 このDocumentFragmentはどういった意味を持つノードなのかということですが、典型的な説明としては「小型のdocumentのようなものである」とされます。 つまり、DocumentFragmentは、ひとつの独立した木構造
getElementsByTagName()がquerySelectorAll()より高速な理由
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. JavaScriptのNoteListオブジェクトは特殊なオブジェクトだ。同じオブジェクトであるにもかかわらず、動的なオブジェクトと静的なオブジェクトという2種類の実装を持っている。この違いが性能に大きな差を与えている。このあたりの話がWhy is getElementsByTagName() faster that querySelectorAll()? - NCZOnlineにわかりやすくまとまっており参考になる。 JavaScript
prototype と __proto__ - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20100929.html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to resize images proportionally / keeping the aspect ratio?
