HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
Web 開発者の責任 (翻訳): Days on the Moon
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
フォームコントロールのデフォルト値: Days on the Moon
WebKit のコントロール値キャッシュ対策 「日本野望の会－Yabooo.org > Safari/Webkitのおせっかいキャッシュとその対策。」にコメントしたはずなのですが、いつの間にかコメントが消えているようなので推敲の上再掲。 上記のページで問題にしているのは、Safari において bfcache を無効にしていても、動的に追加したフォームコントロールの値がキャッシュされた値に書き換えられてしまうことです。これに対し、文書中のコントロールをすべて記憶し、文書のアンロード時にそれらの名前 (name 属性の値) を変更することで解決を図っています。 しかし、書き換えられるのは一時的な値のみで、コントロールのデフォルト値 (フォームをリセットしたときに設定される値) まで変化するわけではありません。ならば、コントロールが文書中に挿入されたときに、その値をデフォルト値に設定してやれば
第 7 回アルゴリズムイントロダクション輪講会資料: Days on the Moon
すでにニュースでも伝えられている通り、12 月 1 日に第 7 回アルゴリズムイントロダクション輪講会がありました。今回の担当は私だったので、その発表資料を公開します。 中央値と順序統計量 (その 1) 予定 順序統計量とは 選択問題とは 最小値と最大値 平均線形時間選択アルゴリズム 中央値と順序統計量 (その 2) 最悪線形時間選択アルゴリズム 3 つずつのグループに分割した場合 7 つずつのグループに分割した場合 参考文献 中央値と順序統計量 (補足) 4 つずつのグループに分割した場合 6 つずつのグループに分割した場合 Lazy-Select Randomized-Partition スタッフロール 「どうせ後から Web で公開するんだから、PDF とか見るのに手間がかかるものは使ってられないよね。やっぱ時代は XML 複合文書でしょ!」と、数式を表現するのに MathML を使
JS オタが非オタの彼女に JavaScript 世界を軽く紹介するための 10 実装: Days on the Moon
アニオタが非オタの彼女にアニメ世界を軽く紹介するための 10 本が流行っているようで (◯◯オタが非オタの彼女に◯◯世界を紹介するための 10 本まとめ)。えっ、もうブームは去った? まあそんなこと気にせず勝手にいっちゃいます。 軽く紹介するための 10 本 まあ、どのくらいの数の JS オタがそういう彼女をゲットできるかは別にして、「オタではまったくないんだが、しかし自分のオタ趣味を肯定的に黙認してくれて、その上で全く知らない JavaScript の世界とはなんなのか、ちょっとだけ好奇心持ってる」ような、ヲタの都合のいい妄想の中に出てきそうな彼女に、JavaScript のことを紹介するために見せるべき 10 実装を選んでみたいのだけれど。(要は「脱オタクファッションガイド」の正反対版だな。彼女に JavaScript を布教するのではなく相互のコミュニケーションの入口として) あくま
Narcissus の正規表現: Days on the Moon
「前のエントリで書き忘れてた - 最速チュパカブラ研究会」にて、Narcissus で使われている正規表現が参考になるという話が出ています。 文字列リテラル /^"(?:\\.|[^"])*"|^'(?:[^']|\\.)*'/ 正規表現リテラル /^\/((?:\\.|[^\/])+)\/([gimy]*)/ コメント /^\/(?:\*(?:.|\n)*?\*\/|\/.*)/ 一流の人が書いたものを使いましょうというのに異を唱えるつもりはありませんが、そのままコピー & ペーストしていては意味がありません。ここはやはり一文字一文字心をこめて写経しましょう……ではなく、どうしてその書き方でうまくいくのかをきちんと考えた上で使いましょう。 文字列リテラルにマッチする正規表現 上記の文字列リテラルを表す正規表現から、一重引用符でくくられた文字列にマッチする部分だけを抜き出すと '(?:[^
本気でやるなら黙読は避けて朗読すべき: Days on the Moon
「読書百遍義自ら見る」という言葉があります。難解な書物であっても 100 回も読めば自然と意味がわかるようになるという、熟読の大切さを説いた句です。しかし、これは本当のことなのでしょうか? 2000 年もたてば社会も常識もまったく変わってきます。昔の人の言ったことが今も正しいとは限りません。 疑問があれば解明したくなるのが人の性というもの。実際に「読書百遍義自ら見る」は正しいか、確かめて紀要にまとめてくださった方がいます。それによると、女子大生にデカルトの「方法序説」を 30 回読んでもらったところ、ほとんどが内容を理解するにいたったとのこと。この言葉の正しさが見事に証明されたのです。 ただし、一点注意することがあり、それは黙読ではなく朗読するということ。人間は活字を使いだしたのはたかだかこの5千年程度のことであるが、音声を使った情報のやりとりは動物の時代から行ってきたことであるという由緒
JavaScript の変数と delete 演算子: Days on the Moon
Kanasan.JS JavaScript 第 5 版読書会 #1 にて delete 演算子の動作が話題に上ったそうです。そこで、それについてちょっとまとめてみようかと思い立ったはいいものの、ずるずると引き伸ばしているうちに年を越してしました。しかし、読書会 #2 の開催も決まり、もうこれ以上引き伸ばしているといつまでたっても書けなさそうなので、いい加減腹をくくって個人的にまとめてみようと思います。 JavaScript の変数 delete 演算子の対象 変数に対する delete 演算子 削除できるプロパティとできないプロパティ 変数の属性 delete 演算子の返り値 JavaScript の変数 delete 演算子の話に移る前に、変数とは何なのかおさらいしておきましょう。JavaScript において、変数とはプロパティの別名です。といっても、すべてのプロパティを変数というわけ
数値をカンマ区切りにする: Days on the Moon
JavaScript で数値を 3 桁ごとにカンマで区切るお話。「comma separation by javascript - さらさら宇宙忍法帖」にいろいろまとまっている。 ここでの基本的な方針としては 1 回の文字列置換で終わらせること。元のコードは Perlメモの「数字を 3桁ごとにコンマで区切る」。でも小数への対応を考えると 1 回では無理っぽかったので、小数点が含まれる場合は文字列を分割して処理することに。というわけでいきなり結論。 Number.prototype.toDeliminated = function () { var string = "" + +this; var pointIndex = string.indexOf("."); return (pointIndex == -1) ? string.replace(/(\d{1,3})(?=(?:\d\d\
Safari 3 の XPath のバグ: Days on the Moon
Mac OS X v10.5 Leopard 上では一足早く正式版が公開された Safari 3。JavaScript でのゲッタとセッタのサポートや DOM 3 XPath の実装など、新機能が山盛りです。しかし、Safari 3.0.4 の DOM 3 XPath 実装にはいくつかバグがあるので、それらをここで取り上げてみようと思います。 逆方向軸に関するコンテキスト位置 XPath 1.0 では、式を角括弧で囲んだ述語を用いることで、ノードセットから結果を絞り込んでいくことが可能です。例えば、child::*[position() mod 2 = 0] なら、子要素のうち偶数番目のものだけを選び出すといった具合です。 ここで、position 関数により得られるコンテキスト位置は、元のノードセットを文書順で並べ替えたとき、現在処理中のノードが何番目になるかを示しています。ただし、an
Kanasan.JS レポート
関西での JavaScript 勉強会、Kanasan.JS に行ってきた。内容は Prototype.js のコードリーディング (バージョン 1.5.1.1 を使用)。「家に帰ってレポートを書き、主催者のブログにトラックバックを送るまでが勉強会です」と念を押されたので、まもなく Kanasan さんの記事経由で参加者各々の様子をうかがえるようになると思うけど、以下あとから思ったことも加えて私の場合をつらつらと。 JavaScript 概説 & コードリーディング プロトタイプ やはり皆さん一番引っかかるのはここみたい。おそらく、プロトタイプと名のつくものが 2 つあるのが混乱の原因だと思う。 prototype プロパティ 関数 (Function オブジェクト) のみが持つ。その関数をコンストラクタとして使ったときに用いられる。 [[Prototype]] 内部プロパティ すべてのオ
ソート高速化を試みる: Days on the Moon
JavaScript の Array#sort は、比較関数を渡さない場合、各要素は文字列として比較され、並び替えられます。これに関して、IE などで用いられている JScript では、文字列化を一度しか行わず結果をキャッシュしている、すなわち内部的にシュワルツ変換 (Schwartzian transform) を行っているようで、配列要素の toString メソッドを適宜調整することによりソートを高速化できるというのが IT 戦記で触れられていました。 これはつまり、通常次のようにするところを、 // 比較関数 function C(order) { this.order = order; } array.sort(function (a, b) { return a.order - b.order; }); 次のようにすると JScript で高速化が図れるというものです。 //
JavaScript で構文解析: Days on the Moon
C++ の特徴のひとつである演算子オーバーロード、その粋を極めたのが Boost Lambda (無名関数) と Boost Spirit (構文解析) ではないかと思っています。JavaScript では無名関数が使えるので Lambda に関しては間に合っているとも言えますが、Spirit はそうも行きません。JavaScript 2 で演算子オーバーロードがサポートされるのならチャレンジしてみようかななどと思ってそれきりになっていました。 しかし、一部でパーサブームが起こっているというのを受け、Perl 6 Rules をつらつらと眺めているうち、正規表現のメタ文字を使えば文法定義をきれいに書けるのではと思い至りました。そこで実際に JavaScript でパーサジェネレータを作り、Spirit にあやかって Gin (ジン) と名づけてみました。 文法定義 正規表現リテラルを使うこ
E4X in Firefox 発表資料: Days on the Moon
Mozilla Party JP 8.0 に講師として参加させていただきました。以下はプレゼンテーション用のスライドです。 E4X in Firefox (PDF) E4X in Firefox (HTML) OnpenOffice.org 2.0 の Impress を使って作ったのですが、私のノート PC のディスプレイ接続がうまくいかず、お借りしたマシンに入っていた OpenOffice.org 2.1/2.2 ではなぜか実行途中にフリーズするので、PDF にエクスポートしたものを用いました。 また、発表は 25 分の枠だったのですが、最初に練習したときは 1 時間かかってしまい、話す内容をいろいろと削ったものの、結局枠ぎりぎりまで使い切ってしまって、質疑応答の時間をとることができませんでした。もし何か聞きたいことがあったという方がいらっしゃれば、このコメント欄にお願いします。 それ
作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
DOM オブジェクトとメモリリーク: Days on the Moon
IE でのメモリリーク ちょこちょこと紹介されているので知っている人も多いと思うが、IE には DOM ノードに絡んだメモリリークの問題がある。これに関しては Microsoft 自身の記事である「Understanding and Solving Internet Explorer Leak Patterns」に詳しいが、簡単にいえば DOM ノードオブジェクトに関する循環参照を作ると、IE を終了させるまでそのオブジェクトが解放されないというものだ。記事によればメモリリークには以下のようなパターンがあるという。 1. 単純な循環参照 ある DOM ノードオブジェクトのプロパティをたどっていくと自分自身に行き着く場合。以下のようなパターンが考えられる。 element.property == element element1.property1 == element2, element2
JavaScript の new 演算子の意味: Days on the Moon
JavaScript における new 演算子の動作は大まかにいって以下のとおりである。(new F() とした場合。) 新しいオブジェクトを作る。 1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。 F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。 F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。 3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。 ここで「オブジェクトである」というのはプリミティブ値 (文字列、数値、真偽値、undefined 、null) ではないということだ。new Stri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
