俗人プログラマ : DOM:JavaScriptからHTMLを操作する
2012/1/94:13 DOM:JavaScriptからHTMLを操作する 前回まで、JavaScriptによってウィンドウ(タブ)を生成し、そこに文字を直接書き込むことによりHTMLを作成していた。 この方法では、仮に一度作成したHTMLの途中に要素をはさもうとした場合、一度documentオブジェクトをclose()した後open()しなおし、再度新しいHTMLを一から書き直さなければならない。 例えば、<body>要素に<div>要素を追加する。というような形でHTMLを操作で きないだろうか。 まぁ、こんな書き方をするくらいだからできるのである。 DOM -Document Object Model- HTMLは元々文字に過ぎないが、ブラウザは文字を元に内部でデータをオブジェクト化する。 これによりHTMLは一連の文字列ではなく、各要素のツリー状の集合のようにあつかうことができる
[javascript][jQuery] jQueryでマウスの右クリック、左クリックを判断する答えを知りたい | 答えを知りたい
jQuery を使って 「クリックされた時に左なら要素を消して、右なら何もしない。」 という動作をさせようと思ったら日本語だと検索してもすぐに答えが出てこなかったので、また stackoverflow から解説を紹介します。 実際のコードがこちら。 $('#element').mousedown(function(event) { switch (event.which) { case 1: alert('Left mouse button pressed'); break; case 2: alert('Middle mouse button pressed'); break; case 3: alert('Right mouse button pressed'); break; default: alert('You have a strange mouse'); } });
[JavaScript] jQueryの$.proxy - 個人的なまとめ
JavaScriptでcallback処理で呼元のthisを参照したい時がよくあります。 例えば、下のような感じです。 var Hoge = function(name){ this.name = name; }; Hoge.prototype.method = function(){ var url = ''; var param = {}; $.post(url, param, function(data){ alert(this.name); }); }; var hoge = new Hoge('aaa'); hoge.method(); で、thisの中身はHogeではないので、postのundefinedがalertに表示されます。 これを解決するには、以下のようにbindメソッドを使うとOKです。 Hoge.prototype.method = function(){ var
![[JavaScript] jQueryの$.proxy - 個人的なまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ece79e4ca864adc920f0dbf98e3d78c01787cec1/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704346814673852334%2F12704346814673866726%2F1325785812)
0.1+0.2は0.3になりません（JavaScript おれおれ Advent Calendar 2011 – 13日目） | Ginpen.com
なんでかというと、現代のコンピューターの性質で、数値を2進数、つまり2の階乗の和で表現しようとするためです。 例えば0.5は簡単ですね。2-1です。また0.25は2-2ですから、0.75は2-1+2-2という事になります。 ちなみにJavaScriptで階乗を扱う場合はMath.pow()です。 console.log(Math.pow(2, -1)); // => 0.5 console.log(Math.pow(2, -2)); // => 0.25 console.log(Math.pow(2, -1) + Math.pow(2, -2)); // => 0.75
実数を整数に丸める4パターン（JavaScript おれおれ Advent Calendar 2011 – 7日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 7日目 Mathオブジェクトに小数点付きの数値を整数にするメソッドが幾つかあるので、おまけと併せてまとめてみます。 Math.trunc() Math.ceil() Math.floor() Math.round() parseInt() ~~n n | 0 Math.trunc() 小数点以下をごっそり切り捨てます。現代ではとりえずこれ使っておけば良いです。
今時のブラウザが例外発生時にどんな情報を出しているのか調べてみたよ - latest log
本文には反映していませんが IE10で Error#stack が実装されました http://blogs.msdn.com/b/ie_ja/archive/2012/05/17/diagnosing-javascript-errors-with-error-stack.aspx JavaScript では例外が発生すると例外オブジェクトが生成されます。 この例外オブジェクトの仕様は標準化されておらず、各ブラウザで実装が異なります。 最新のブラウザで JavaScript の Error オブジェクトや Error から派生しているオブジェクトが持つ属性を調べてみました。 Safari Stable (Safari 5.1.1) try { throw new Error("hoge"); } catch (err) { var i, ary = []; for (i in err) {
JavaScript のパフォーマンスと Sweet Spot の甘い罠 - Block Rockin’ Codes
本文 先日 JavaScript を高速化するには、 VM を知る必要があるんだろうと思い、 以下のような発言をしてみました。 とにかく今は 「V8の最適化の恩恵を受けるための JS の書き方」や「ホットスポットを温めて C よりも速い JS を書こう」という釣りっぽいけど釣りじゃない記事を @Constellation さんや @bad_at_math さんに書いていただく必要があるということでした！ 2011-10-23 21:53:44 via Echofon しかし、釣り針が小さかったためか、誰も釣れず。。 自分で調べろってことですよね、すいません。。 と思っていたら、先日下記のエントリが話題になりました。 そのものずばり、JavaScript を最適化する話。 mraleph-The trap of the performance sweet spot 先に感想を言うと、これはい
ふじこのプログラミング奮闘記 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
Array.isArray - hogehoge @teramako
Firefoxでしか確認してないけど、Array.isArrayメソッドの優位性を知ったのでメモ。 <iframe id="testFrame" src="about:blank"> var iframe = document.getElementById("testFrame"); var doc = iframe.contentDocument; var s = doc.createElement("script"); s.textContent = "var hogehoge = [0,1,2,3,4,5,6]"; doc.body.appendChild(s); var array = iframe.contentWindow.hogehoge; まあ、重要なのは別ドキュメント内で作られたArrayインスタンスがあること。ここでは、変数arrayが別ドキュメント内のArrayインス
JavaScriptのin演算子の理解と使い方 - prog*sig
■in演算子の仕様 まずはin演算子の動作を知る。 Special Operators - MDC Docs オブジェクトが指定されたプロパティ(prototypeチェーンを辿って)を持っているかの真偽値を返す 要はhasOwnPropertyとほとんど同じで、違いはprototypeチェーンを辿るかどうか。 in 演算子と obj.hasOwnProperty()の比較は以下を参照 in 演算子と obj.hasOwnProperty() はどちらが早い！？ - hogehoge @teramako 次は仕様書を見てみましょう。 ES3の仕様書：11.8.7 in 演算子 (The in operator) RelationalExpression を評価。 GetValue(Result(1)) を呼出す。 ShiftExpression を評価。 GetValue(Res
1. Automated Testing - prog*sig
FirebugなどJavaScriptデバッガーはいろいろあって便利だけど、Humans are lazyだ。 デバッガーによるデバッグは手動で行っているので、そこにAutomated testingをもうけて自動化しよう。 JavaScriptの自動テストのソフトウェアの歴史は2001年のJsUnitまでさかのぼる。 2004年にSeleniumがでてきて、 JavaScript/web developmentは今も活気があるコミュニティだ。 ■1.1 The Unit Test Unitテストはコンポーネント単体で実行すべきであり、他のテストに依存するべきではない。 場合によっては単体で実行できるようにするためにmockやstubといったものを必要にするときがあるだろう。(この辺はPart III, Real-World Test-Driven Development in
jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと…
jQuery 1.6 が既にリリース されていますが、1.5 で追加された Deferred を勉強する意味で、Script Junkie から Creating Responsive Applications Using jQuery Deferred and Promises を翻訳してみましたので、共有したいと思います。著者の Julian Aubourg は、jQuery のコアチーム・メンバーとして、Ajax モジュールの書き換えと Deferred 導入を指揮した方だそうです。 記事の途中、各メソッドの説明部分は、jQuery ドキュメントの翻訳に差し替えていますので、リファレンスとして使ってもらうのも良いかと思います。 Deferred や Promise は、概念や用語が少々分かりにくいところがあるかと思いますので、読んでくださった方の、少しでも理解の助けになれば幸いです
JavaScript：ブロック構文の性能比較
ブロックスコープを作る構文をちゃんと性能比較してみました。 ブロック構文の性能比較 前回の記事で書いたcreateScope関数もセットにしました。 function createScope(prev) { var newScope, Scope=createScope.Scope; if (prev instanceof Object) { Scope.prototype = prev; newScope = new Scope; newScope.__outer__ = prev; return newScope; } else { Scope.prototype = null; return new Scope; } } createScope.Scope = function(){ this.my = this }; ひとまずFirefoxでの測定結果をのせます。 ブロック自体の生
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 との関係などは特に規定されて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoogleChromeのデベロッパーツールのconsoleオブジェクト – FNB
ARX Developers Blog: jQuery Templatesを使ってみる