React – ユーザインターフェース構築のための JavaScript ライブラリ
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。 自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。 コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
Passive Event Listeners によるスクロールの改善 | blog.jxck.io
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
DOM Standard 日本語訳
Hello ＜world＞! <％script> function test(%e) { debug(%e.target, %e.currentTarget, %e.eventPhase); // A } document.addEventListener("hey", test, {capture: true}); // B document.body.addEventListener("hey", %test); // C var %ev = new Event("hey", {bubbles:true}) document.getElementById(＜"x"＞).dispatchEvent(%ev); <％/script> ■introduction-1 Why yes. ■interface-document-1 ●●bp_examples tree-order-1:[ [ ]
Window オブジェクトや Document オブジェクト、DOMなど | Web Design Leaves
Window オブジェクトや Document オブジェクト、DOMなど CATEGORY: jQuery 2015年6月13日 Window オブジェクトや Document オブジェクト、DOM (Document Object Model) 、DOM 要素、jQuery オブジェクト等に関する個人的なメモ。 目次 Window オブジェクト ブラウザを操作するための機能を集めたオブジェクトがブラウザオブジェクトです。ブラウザオブジェクトは標準の規格があるわけではなく、個々のブラウザごとに独自に実装されています。（その中の Document オブジェクトは、ドキュメントオブジェクトモデル：DOM としてほぼ標準化されています。） そのため以前はブラウザごとの仕様の違いによりクロスブラウザ問題がありましたが、現在では主要なブラウザではそれなりに互換性を持っています。 クライアントサイド
NodeListとHTMLCollectionも別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 13日目） | Ginpen.com
console.log(document.forms[0]); // <form id="foo"></form> console.log(document.forms[1]); // <form id="bar"></form> console.log(document.forms['foo']); // <form id="foo"></form> console.log(document.forms['bar']); // <form id="bar"></form> forms については過去記事をどうぞ。 JavaScriptで要素を検索せずに取得する方法があります。（JavaScriptおれおれAdvent Calendar 2013 – 03日目） HTMLCollectionの出番 以下の場合がHTMLCollectionになります。 document.anchors do
DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita
こんにちは、ほそ道です。 今回はDOMネタです。 イベントのキャプチャとバブリングについて覚書をまとめて参ります。 また今回はv8での検証であり、レガシーなIEは対象外です。 レガシーなIEはイベント設定メソッド自体が違いますのでご注意くださいませ。 目次はこちら 入れ子なDOMのイベント発生順序制御 DOMが入れ子構造になっていてそれぞれにイベント(例えばClickイベント)が設定されていた場合 「このように動いてほしい」という期待はケースバイケースであると思います。 期待通りの処理になるようカッチリ制御しちゃいましょう。 addEventListenerの第三引数「useCapture」 例えば下記の様なHTMLがあったとします。 body内にdivが入れ子になっておりそれぞれにClickイベントが登録されています。 <html> <head lang="en"> <meta char
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
第7回 DOM-based XSS その2 | gihyo.jp
前回は、DOM-based XSSの原因と対策についての概略を解説し、DOM-based XSSを引き起こすシンクの事例としてinnerHTMLへのHTMLの代入やlocationオブジェクトへのURLの代入をとりあげました。今回は、innerHTMLやlocationオブジェクトほど頻繁ではないものの、実際にDOM-based XSSの原因として見かけるシンクの代表的なものについて説明します。 document.write／document.writeln～できるだけ使わず、代替手段を利用する DOMのレンダリングを遅延させるなどの理由から、以前に比べるとdocument.writeの使用される頻度は減っていますが、それでもなお広告用のJavaScriptなど一部では根強くdocument.writeが使われています。document.writeやdocument.writelnでは、引
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
