JavaScript 「再」入門 - JavaScript | MDN
なぜ 「再」入門 (re-introduction) なのか? なぜなら JavaScript は世界で最も誤解されたプログラミング言語としてよく知られているためです。しばしばおもちゃだと馬鹿にされながら、しかしその人を欺くような単純さの下に、強力な言語機能が隠されているのです。JavaScript は数々の高い注目を集めるアプリケーションで使用され、この技術の深い知識がどんなウェブやモバイルの開発者にとっても重要なスキルであることが示されました。 この言語の歴史について理解することから始めるのが役立つでしょう。JavaScript は 1995 年、Netscape の技術者ブレンダン・アイク (Brendan Eich) によって創られ、1996 年初頭に Netscape 2 で初めてリリースされました。当初は LiveScript と呼ばれる予定でしたが、Sun Microsyst
FacebookのJavaScript SDKの下品なコメントが格好良すぎて惚れた件 - kissrobberの日記
https://github.com/facebook/connect-js/blob/master/src/core/content.js#L113 // Dear IE, screw you. Only works with the magical incantations. // Dear FF, screw you too. Needs src _after_ DOM insertion. // Dear Webkit, you're okay. Works either way. var guid = FB.guid(), …続く 親愛なるIEへ、 死ね。 謎の呪文を使わないと動かない… 親愛なるFFへ、 お前も死ね。 DOM挿入後にsrc設定必要 親愛なるWebkitへ、 お前はいいだろう。 どっちでも動く。
さらなる「#!」URL批判 - karasuyamatenguの日記
このブログはlifehackerを含むgawkerメディア系サイトの#!URLへの移行を批判している。 http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/ 以下、isolaniとテングの見解をごっちゃ混ぜに紹介する。 lifehacker他のgawkerメディアサイトが数日前に長時間におよびアクセス不能になった。(厳密に言うとページ内のコンテンツアクセス不能になった) #!URLベースのサイトはJavaScriptにエラーがあるとコンテンツが一切ロードせずのっぺらぼう状態になってしまうようだ。 #!について 「#!」は何で呼ぶの？ shebangと綴られる。 Hash=# Bang=!の略 発音すると「シバン」といったところか。(ちなみにUnixの#!とは無関係) 以下「#URL」は： サイト内のロケーション情
IT戦記 - arguments を直接的に配列化
Own Properties は同じだからプロトタイプだけ入れ替える (Firefox Only) id:cheesepie:20070129:1170012588 を見ていて思いつきました。 arguments.__proto__ = Array.prototype; ちなみにクロスブラウザなやり方 3 つ // 1 for(var i = 0, args = []; i < arguments.length; i ++) args[i] = arguments[i]; // 2 arguments = Array.apply(null, arguments); // 注意: コメント欄参照 // 3 for(var n in Array.prototype) arguments[n] = Array.prototype[n]; 別に配列化しなくても配列の関数は使えます 配列のプロトタイ
CSSセレクタの開発から得られたノウハウのフィードバック + IE8でメソッドをフックする(HTMLElementプロトタイピング) - latest log
ここ数日は、CSSセレクタ(uupaa-selector.js)の高速化と同時に、DOM Level2 Mutation Events をサポートする小さなライブラリ(uupaa-mutationevent.js)を作っていました。 uupaa-mutationevent.js は、 CSSセレクタにキャッシュを導入するなら、DOMツリーの改変を知る必要がある IE には Mutation Events を実装するための基礎がそもそも無いので、それらを入れ込んだライブラリを作ってしまおうか といった動機付けから作成が始まりました。 これらを作成する過程で得られたノウハウを、今日は むぎゅっと縮めてお届けします。 HTMLElement にオレオレメソッドを追加する IE8 には HTMLElement や Node を改変できる仕組みが追加されています。 constructor が追加され
A要素は文字列コンテキストではhrefプロパティ値で評価される - rikubaのブログ
window.openの第一引数にA要素（HTMLAnchorElement）をそのまま渡しているコードを見て、動かないんじゃないかと思って試してみると問題なく動いて驚いた。どうやらHTMLAnchorElementは文字列コンテキストではhrefプロパティの値として評価される、つまりtoStringがreturn this.href;のようだ。 この挙動はECMAScript Language Bindingに書かれていた*1。 HTMLAnchorElement objects in String expressions are evaluated as HTMLAnchorElement.href. 例えば、ページにある全てのリンクのリンク先URLを一覧表示するブックマークレットは、以下のようにシンプルに書ける（良い例が思いつかない）。 javascript:alert(Array.
要素ノードにデータを紐付ける関数 - rikubaのブログ
HTML5で、紐付けたいデータが文字列なら、data-で始まる属性(custom data attribute)を付けることができる（詳細はコメント欄を参照）。 DOM3のNode#setUserData・Node#getUserDataのように、間接的に要素とデータを紐付けられる関数を作った。jQuery.data()のようなものと言ったほうが分かりやすいかも。ただ、jQuery.data()は要素に独自のプロパティ（「jQuery」に時刻のミリ秒表現を続けた文字列）を生やしてしまう。 特徴 Node#[sg]etUserDataとの違い 要素ノードのみ対応。 Node#setUserDataの第三引数のようなハンドラ関数には未対応。 クロスブラウザ：実装によって手段を変える Node#[sg]etUserDataをサポートしている実装では、単にそれのラッパー（Firefox）。 Ele
Top 10 custom JavaScript functions of all time
./with Imagination A JavaScript, CSS, XHTML web log focusing on usability and accessibility by Dustin Diaz Tuesday, November 29th, 2005 UPDATE: For anyone who lands on this article months after the fact, there is now a podcast entry about this article reviewing each and every function. If there was ever a universal common.js shared among the entire develosphere, you’d fine these ten (plus one bon
Dean Edwards: addEvent() – My Solution
PPK’s addEvent() Recoding Contest produced a number of very similar solutions. The eventual winner was chosen because of its simplicity. All of the solutions relied on object detection to some degree. My solution is very different. it performs no object detection it does not use the addeventListener/attachEvent methods it keeps the correct scope (the this keyword) it passes the event object correc
IE6のメモリリークを華麗に回避 - zorioの日記
ajaxian経由：http://ajaxian.com/archives/is-finally-the-answer-to-all-ie6-memory-leak-issues http://www.hedgerwow.com/360/dhtml/ie6_memory_leak_fix/ try ... finallyを使って循環参照を削除する方法。 windowのunloadとかに頼らないで済む所がかっこいい。 function createButton() { var obj = document.createElement("button"); obj.innerHTML = "click me"; obj.onclick = function() { //handle onclick } //this helps to fix the memory leak issue try
要素固有の ID を取得する - IT戦記
IE では element.uniqueID というのがある。 これは、要素に固有の番号を付けたものだ。 これが結構便利で、 var seen = {}; for (var i = 0; i < elemenets.length; i ++) { if (seen[elements[i].uniqueID]) elements.splice(i, 1); else seen[elements[i].uniqueID] = true; } みたいな感じで、使うことができる。 他のブラウザ 他のブラウザにはこれがないので、結構不便。 で、 getter で出来るじゃんって思ってググってみたら。 Dean Edwards さんがもう作ってた。さすが http://dean.edwards.name/moz-behaviors/src/ HTMLElement.prototype.__define
... and the winner is ... - QuirksBlog
Well, that wasn't what anyone would call fast. Scott, Dean and I all had trouble making time to judge the contest. Besides, the quality of most of the entries was less and their length far greater than we'd expected. We had to wade through dozens of lines of script that didn't really make much sense to us, and that weren't really necessary to perform the job at hand. Despite this disappointment we
Function.prototype.bindは何がいいのか - 枕を欹てて聴く
ES5からFunction.prototype.bindが入りました. これに準ずるものは数々のFrameworkで提供され続けてきたので, あまり馴染みの無さはないのではないでしょうか. このFunction.ptototype.bindは実はとても面白いので. 結論から言えば, Function.prototype.bindはtarget functionのConstructに完全に移譲するのでConstructorの引数束縛が行えます. またConstructor callに対して配列を渡すapply形式のものといったapplyConstructorやcallConstructorをbindを使って実装することができます. 基本 Function.prototype.bindは基本的にはthisとargumentsに特定の値を束縛する関数です. bindは第一引数にthis, 次から
Function.prototype.call()とFunction.prototype.apply()の使い方 - 素人がプログラミングを勉強していたブログ
関数を呼び出したとき、その関数がさすthisが引数の一つ目になるってこと。 んで、callの時はcallの引数の二つ目以降に、渡したい引数を一つずつ指定する。 applyの場合は二つ目の引数にいっぺんに渡したい引数を配列で指定する。 具体的には console.log( Array.prototype.join.call(document.links,'\n') ); みたいに、配列っぽい振る舞いをするオブジェクトに配列用のメソッドを使えるようになる。便利。 ちなみに、素直にdocument.links.join('\n')としようとしても、document.linksがArrayのprototypeを継承してないからエラーになる。
Event Listener: イベントリスナ [JavaScript / DOM]
Event Listener とは Event Listener とは、イベントを受け取って処理するものです。 JavaScript では関数がイベントリスナの役割を担うことが多いです。 ここでいうイベントとは、「画面上のどこかをクリックした」 だとか 「HTML の読み込みが完了した」 などといった事です。 従来は、イベントとイベントリスナ (関数) を結びつける方法としてイベントハンドラ式が使用されてきました。 // 「クリックされた」 というイベントを受け取るイベントリスナ (関数) myFunc を HTML 要素に結びつける例 // [(X)HTML] 要素の属性として記述する方法 <button onclick="myFunc();" id="test" /> // [JavaScript] element 要素のプロパティを使用する方法 // id が "test" である要
Learning JavaScript Design Patterns by Addy Osmani
Document has moved, if you aren't automatically redirected go here.
applyの利用してイベントのthisをbind(指定)させる方法(attachEventでthisを指定させる方法) - 新みのる日記
ちょっとはまったので、まとめとく。 きっかけ 元々の発端は、イベント関連の処理をしていて、FirefoxではaddEventListenerしたとき、 つまりobj.addEventListener(func, 'click', false);という処理を書くと 呼び出し先(func)のthisにobjが入ってくるわけだが、 IEでは、attachEvent先のthisがnullになるという仕様(?)になっている。*1 obj.attachEvent(func, 'onclick'); function func(){ alert(this); // null /* thisを使った処理をかく。 * 例えばotherObj === this は常にnulなためfalseになる */ } これだと、呼び出し先で、呼び出さし元のオブジェクトがわからないためDOM操作などができなくなり。困った困
.aspx)
Internet Explorer リーク パターンを理解して解決する
Justin Rogers Microsoft Corporation June 2005 日本語版最終更新日 2006 年 2 月 3 日 Web 開発者の進化 以前は、メモリ リークは Web 開発者にとって大きな問題ではありませんでした。ページは比較的単純に保たれ、サイト内の異なるロケーション間のナビゲーションは解放されたメモリをクリーンアップするうえで優れた方法でした。リークがあった場合も、たいていは気付かないほど小さなものでした。 新しい Web アプリケーションは、より高い標準に従います。ページはナビゲートされずに何時間も実行され、Web サービスを通じて更新情報を動的に取得する場合があります。複合イベント スキーム、オブジェクト指向の JScript、およびアプリケーション全体を生成するためのクロージャを組み合わせることで、言語機能が限界点に達します。これらの変更およびその他
IEのバグ？prototype拡張時に注意すべきこと - まなぶろぎーく。
すでに周知の事実かと思いますが、少なくとも自分は知らなかったのでまとめ。 Web開発におけるクロスブラウザ問題は、jQueyやPrototype.jsなどのJSライブラリを使うことで簡単に吸収できます。しかし事情により、使用を極力控えたい場合があるかもしれません。 １サイト複数開発会社体制（ルール決めとかないとエラいことになる）とか Webマスターが知らない間にライブラリ依存のJSコードを別ページに流用とか しかもWebマスターが頻繁に変わる（流用が忘れ去られる）とか prototype拡張でクロスブラウザ対応するとしたら よりラッピング前の記法に近く、よりオブジェクト指向的（JavaScriptは厳密にはprotoytpeベースのオブジェクト指向ですが）な書き方をするとしたら、やはりprototype拡張を上手に駆使することではないでしょうか。 よくある例としてイベントアタッチ部分のクロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JsDoc Toolkitを使う！
