There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか? 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
追記: 指摘により、UIオブジェクト型を追加した(thx @kanreisa)。 クライアントサイドJavaScriptでのビューの作り方を大別すると、3つ4つある。 DOM操作型 テンプレートエンジン型 UIオブジェクト型 データバインディング型 ここでいうビューの作り方とは、有り体にいうとJavaScriptからどうやってDOM要素を生成したりするかどうか。イベントリスナーの登録とかも含む。 DOM操作型 昔ながらのやり方。jQueryとか使って直接DOM操作してビューを作る。 // 例えば、<div class='hoge'>fugafuga</div> みたいなDOMを表示する var myView = $("<div class='hoge'/>"); myView.text('fugafuga'); // body以下に挿入 $(body).append(myView); 長所
DOM Based XSSに関しては、IPA「安全なウェブサイトの作り方」でも、拙著でもごく簡単にしか触れておらず、まとまった解説が要望されていましたが、本日(2013年1月29日)にIPAから「IPA テクニカルウォッチ『DOM Based XSS』に関するレポート」が公開されました。 同冊子の目次は下記の通りです。 はじめに 1. DOM Based XSSの概要 2. IPAに報告されたDOM Based XSSの脆弱性 3. DOM Based XSSの事例 4. DOM Based XSSの対策方法 コラム おわりに IPAのレポートと言うことで、DOM based XSSの届出の状況も説明されています。以下にグラフを引用します。 一見して「急増」していることと、昨年の10月から12月の3ヶ月で92件も届出があったということで、対策が急務となっている状況が見て取れます。これは、こ
2012 年 1 月 5 日付 W3C 草案 このバージョン: http://www.w3.org/TR/2012/WD-dom-20120105/ 最新バージョン: http://www.w3.org/TR/dom/ 最新編集草案: http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html 前のバージョン: http://www.w3.org/TR/2011/WD-dom-20110915/ http://www.w3.org/TR/2011/WD-domcore-20110531/ http://www.w3.org/TR/2010/WD-domcore-20101007/ 編集: Anne van Kesteren (Opera Software ASA) <annevk@opera.com> Aryeh Gregor (Goo
2011年7月2日土曜日 contenteditable + DOMCharacterDataModifiedでIME入力(変換)中のイベントも拾う IME入力(変換)中のイベントも拾う - jsdo.it - share JavaScript, HTML5 and CSS タイトル通りでそれ以上でもそれ以下でもないです。 FirefoxとChromeで動作確認できた。 IEは9からDOMCharacterDataModifiedをサポートしてるらしいです。 Operaはよく分からない DOMCharacterDataModified event JavaScript DOMCharacterDataModifiedはMutation Events の一つらしいですが、これ系はいつも情報が少ない… 使い道があるのかも微妙 一応元ネタ Experimentation Harness 関係しそ
これでできる! クロスブラウザJavaScript入門の第6回はJavaScriptとHTMLとDOMの基本#1です。 今回は正直に言ってかなり苦戦しました。。DOM周りは書くことがありすぎてなかなかまとめきれないし、その前にHTMLについて書いておきたいこともあってと。 script要素といえば、昔はlanguage属性というのがあって…とかは今更書くことでもないかなとか。でも、language属性書いているHTMLって結構見かけるんですよね…。まあ、あっても何か問題が起こるわけではないし、language属性とかが書いてあったらそこからいわゆる「不吉な匂い」を嗅ぎ取ることができるので、ある意味では有用です。 「不吉な匂い」を醸しだすパーツを独断と偏見で挙げてみると、 language属性 (不必要な)eval document.all(最近ではクローキングされているとはいえ、条件分岐に
Mark Finkle suggested that I do some speed testing, now that a native implementation of getElementsByClassName has landed in the Mozilla trunk (destined for Firefox 3). So I went around and dug up all of the different, existing, implementations that I could find. Currently, implementations fall into one of three categories (with some straddling more than one): Pure DOM This usually involves a call
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は2月から新しい職場で働き始めたり、9月6日に第1子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます(静的リンクが有効な場合ですが)。今時のブラウザならエンコ
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. The two mechanisms within Web Storage are as follows: sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). Stores data
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
より効率的なコードに差し替えました http://dev.w3.org/2006/webapi/selectors-api2/#matchesselector と id:javascripter さんの記事 Selectors APIのmatchesSelectorと、動的なページでのイベント処理 via http://d.hatena.ne.jp/javascripter/20091018/1255889085 を参考に uu.match(expr, ctx, rtype = 0) な関数を書いてみました。 // uu.match - document.matchesSelector like function function uumatch(expr, // @param String: "css > expr" ctx, // @param NodeArray/Node: matc
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 DOM ストレージ API には、ドキュメント オブジェクト モデル (DOM) を使用してクライアント サイド データをセキュアに保存するための関連メカニズムとして、 sessionStorage および localStorage の 2 つが含まれています。 これらのオブジェクトは Internet Explorer 8 で導入されました。 メモ : Internet Explorer の従来のバージョンでは、永続的なデータ記憶域の実装に userData 動作が使用されていました。 このトピックは、次の各セクションで構成されています。 DOM ストレージについて DOM ストレージのスクリプティング オ
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
ここ数日は、CSSセレクタ(uupaa-selector.js)の高速化と同時に、DOM Level2 Mutation Events をサポートする小さなライブラリ(uupaa-mutationevent.js)を作っていました。 uupaa-mutationevent.js は、 CSSセレクタにキャッシュを導入するなら、DOMツリーの改変を知る必要がある IE には Mutation Events を実装するための基礎がそもそも無いので、それらを入れ込んだライブラリを作ってしまおうか といった動機付けから作成が始まりました。 これらを作成する過程で得られたノウハウを、今日は むぎゅっと縮めてお届けします。 HTMLElement にオレオレメソッドを追加する IE8 には HTMLElement や Node を改変できる仕組みが追加されています。 constructor が追加され
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
久々のシリーズ。 今回はcommons-configuration。設定ファイル、ってありますよね。Javaだとproperties、Windosだとiniファイルが使われる事が多い。複雑なものだとXMLで書いたりする。 さて、そんなファイルの読み込み・書き出しってどうしますか。まさかFileInputStreamで自前で読み出すとか、しないですよね。コメント行の処理等、やらなきゃいけないことは結構あります。まぁ、propファイルだったらPropertiesクラスで読み書きできますが、それでも、そうそう便利には出来ていません。 XMLファイルだったりすると、DOM組んで読み書きしますかね。これも結構大仕事。 という時に使うのがcommons-configurationのようです。まぁ、能書きよりコードですかね。 propertiesファイルの場合 foo = hoge foo.bar =
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ!ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの!? めっちゃ簡単(で、ちょっとだけ適当)なDOM 3 XPath の説明をします><。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね? DOM 3 XPath
Section 8F of the book discusses innerHTML and when it's preferable to "real" W3C DOM methods. This is a test page intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly from browser to browser. Each of the test scripts creates a 50x50 table, all of whose cells are filled with one character, *. Then the time y
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く