まずは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

indexOfにはあまり知られてない裏技的な使い方がある。 よく知られてるString.indexOf indexOf 構文 indexOf(searchValue[, fromIndex]) パラメータ searchValue 検索する値を表す文字列。 fromIndex 呼び出す文字列内の検索を始めるための位置。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。 概要 呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。fromIndex から検索を始め、値が見つけられない場合、-1 を返します。 indexOf - MDC Doc Center 概要からわかるように、文字列の出現インデックスを取るものだが、肝心なのは見つからない場合-1を返すことだ。 これを利用してとある条件の下で以下の三つの正規表現ライクなこと

DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない

「#!URL」エントリーに対するツイートやコメントで#!という文字列自体に対する疑問などが意外とあったので、ここでまとめてみる。 #!とは… ウェブとUnixで違った意味を持つ "shebang"と綴られる Hash(#) Bang(!)の略 グーグル検索tips： "#!"では何も出ない。"shebang"で検索するといい。 Unixでは昔からスクリプトファイルでインタプリタを指定する最初のラインに使われてきた 例えば ~/bin/ohhaiを #!/usr/bin/python print "OH HAI"とすればpython hoge.pyとしなくても直接コマンドとして使える $ ohhai OH HAIこのようにスクリプトファイルの一行目でインタプリタを指定する行頭に使う。詳しくはここを参照 http://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%

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

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio. Can someone point me to some code, or explain the logic?

#jsEduから適当に選んで日本語にしたものです。 訳とかは全く正確ではなく、as possibleなど表現をかなり省いてるので命令口調になってます。 フィーリング的なものはあんまり入れてないので、興味をもったらTogetter – 「JavaScriptのベストプラクティス大会 jsEdu」を読みましょう。(まとめた奴はこれの10倍くらいありますが、被ってるのや関係無いのもあるので読める程度の量です) 全てを確認したわけではないので、正確性は保証しかねます。 ==ではなく===を使うべき (自動的に型変換に行われないのでバグが減る、高速) new Object() and new Array() よりも[] or {}を使うべき。 []や{}の方がシンプル JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナルで出てくるのは間違いだと思う。 []

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()の違いは分かりやすく書かれてる 以下斜め読んだ内容 エントリ

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このページの最終更新日：2018年7月29日 今回解説するのは、DocumentFragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 実はこれはノードの一種です。つまり、「テキストノード」とか「要素ノード」とかと同じように、「DocumentFragment」という種類のノードがあるのです。 ノードの一種だから、appendChildなどで子ノードを追加したり、あるいはcloneNodeでDocumentFragment自身をコピーしたりもできます。 このDocumentFragmentはどういった意味を持つノードなのかということですが、典型的な説明としては「小型のdocumentのようなものである」とされます。 つまり、DocumentFragmentは、ひとつの独立した木構造

移転しました http://please-sleep.cou929.nu/20100929.html

valueOfとtoStringメソッドの水深43cmぐらいの深さの話 - 三等兵のもう少し深いお話。コメント欄に書こうかとも思ったけど、最近ブログ書いてない気がしたのでちゃんと記事にしてみる。 まずは問題です。次のコードを実行したときにtrueかfalseのどちらがalertされるかそれぞれ当ててみてください。 var date = new Date(); var date_string = date.toString(); var date_value = date.valueOf(); alert(date == date_string); alert(date == date_value); true, true false, false true, false false, true (難しい問題ではないと思いますが、)この問題の答えは最後に。 続いて、もっとシンプルな問題です。

エレメントの比較でisSameNodeとisEqualNodeというのがあった。 手元で確認した限りでは、 Firefox3.6.8 Google Chrome5.0/6.0 Opera10.61時点でisEqualNodeは無し IE9pp IE8以下はどちらも無いようです。 isSameNode 同じノードかどうかをbooleanで返す。sameだから同一って表現で大丈夫かな。 //js var par = document.getElementsByTagName('p')[0]; par.isSameNode(par); // true //html <p>paragraph</p> 自分自身のノードの場合においてtrueを返す。たとえば、 //js var par = document.getElementsByTagName('p')[0]; par.isSameNode(pa

使用頻度が高いのはデベロッパーツールを起動するCtrl+Shift+I（もしくはCtrl+Shift+J）と、コンソールを開閉するESC、コンソールでは補完候補を選択するtabなどが挙げられます。 例えば、長くて間違えやすいencodeURIComponentのスペルは、Ctrl+Shift+Jでデベロッパーツールを起動してコンソールを開き（コンソールが開かなかった場合はESC⁠）⁠、eだけ打ってtabキーを2回押せば encodeURIComponent が補完されるので、スペルを簡単にコピーできます。 JavaScriptデバッガの活用 前回はブレークポイントの設置方法を紹介しましたが、もう一歩進んだ条件付きブレークポイントの設置方法を紹介します。 まず、通常のブレークポイントを設置します。 この青くハイライトされた行番号の上で右クリックすると次のようなメニューが表示されます。 ここで

Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/