三章第四回 イベントキャプチャリング — JavaScript初級者から中級者になろう — uhyohyo.net
三章第四回 イベントキャプチャリングこのページの最終更新日：2017年8月17日 いきなりですが、次のサンプルを見てください。 <!doctype html> <html> <head> <title>test</title> </head> <body> <div id="aaa"> <p onclick="console.log('p');">test</p> </div> <script type="text/javascript"> var div = document.getElementById('aaa'); div.addEventListener('click',function(){ console.log('div'); }, true); </script> </body> </html> p要素にonclick属性がついています。 また、script要素内では、変
knockout.js でカスタムバインディングを作成する - しばやん雑記
バインディングは text とか value みたいに data-bind 属性の内部で指定する奴です。knockout.js ではこのバインディングを自由に拡張できるようになっています。 バインディングは ko.bindingHandlers に内蔵のものもすべて含まれているので、ここに追加してあげればいいです。以下にテンプレを置いておきます。 ko.bindingHandlers.myBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 初期化、イベントハンドラの登録など }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 値が変化した時に行う処理 }
JavaScriptは演算子オーバーロードの夢を見るか - js lover's
JavaScriptでは演算子を定義したりオーバーロードしたりすることはできない。これはだれでも知っているようなことだろう。 だが、過去には演算子オーバーロードのようなことを可能にしたライブラリも存在した。 def.js このコードを見て欲しい。 //https://github.com/tobeytailor/def.jsより def ("Person") ({ init: function(name){ this.name = name; }, speak: function(text){ alert(text || "Hi, my name is " + this.name); } }); def ("Ninja") << Person ({ init: function(name){ this._super(); }, kick: function(){ this.speak("I
NodeFest2014 - Transpiler
Slides to the presentation that I held on the 2014 NodeFest conference.
jQuery 3.0: The Next Generations | Official jQuery Blog
It’s hard to believe it’s been nearly eight years since jQuery was released. Web development has changed a lot over the years, and jQuery has changed along with it. Through all of this time, the team has tried to walk the line between maintaining compatibility with code from the past versus supporting the best web development practices of the present. One of those best practices is semantic versio
A State of Change — On the future of Object.observe
{ } { changed: true } No idea it changed Solutions? var model = new Model(); model.set('foo', 'bar'); model.get('foo'); Dirty checking — a.k.a. $scope.$digest( ) — “Angular models are plain old JavaScript objects. This makes your code easy to test, maintain, reuse, and again free from boilerplate.” var o = {}; Object.observe(o, function(changes) { console.log(changes); }); // Add a property o.foo
動的スクリプトローディング（さんざん既出だと思うけど - IT戦記
なんか、既出な予感もするんですけど 私製版を作ったので コード var load = function(src, check, next) { check = new Function('return !!(' + check + ')'); if (!check()) { var script = document.createElement('script') script.src = src; document.body.appendChild(script); setTimeout(function() { if (!check()) setTimeout(arguments.callee, 100); else next(); }, 100); } else next(); }; 考え方は、 このエントリ と同じです。 使い方 以下の場合 // 処理 1 // ← ここで jQu
arguments.calleeがstrictモードで禁止な理由
Yoshiaki Kawazu🐸ずん @kawaz これ軽くググっても理由がわからないんだが何で危険なの？＞「arguments.calleeの使用が、ECMAScript 5のStrictモードがサポートしていないことからもわかるように、危険なこと」／無くてもまぁ困らないけど理由を知り… http://t.co/I9sPoAv0 2011-11-18 21:18:59 koichik @koichik @kawaz それらは Good Parts に書いてないので、使うとダグラス様がマシンガン乱射して危険だからです。というか、caller はそもそも ECMA-262 で規定されたことがないとか、callee 使うくらいなら関数に名前つけろとか。 2011-11-18 21:38:35
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
The Portfolio of Hakim El Hattab
I'm Hakim El Hattab, a Swedish front-end developer and interface designer. I co-founded and am working on Slides. +++ Slides is a platform for creating, presenting and sharing slide decks. Sign up for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea
Virtual DOMを持つMV*ライブラリのmercuryについて
最近node-webkitアプリを書く時、何かしらのMV*やデータバインディングライブラリと言われるものを試しているのですが、floating-memo.appではRaynos/mercuryを使いました。 mercury は小さなモジュールを組み合わせたライブラリとも言えますが色々特徴的です。 完全にモジューラーな実装 Virtual DOM FRP ファイルサイズが小さめ モジューラーな実装とは何かというとmercuryのindex.jsを見ると面白い事が書かれています。 /* Pro tip: Don't require `mercury` itself. require and depend on all these modules directly! */ require("mercury") しないで、直接それぞれのモジュールを読み込んで使えるという事が書かれています。 (これ
CodeGrid - フロントエンドに関わる人々のガイド
HTML/CSS 411 CSS仕様 135 CSS設計 55 HTML仕様 47 SVG 25 スタイルガイド 14 HTML/CSSの実践 143 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 53 セキュリティ 16 パフォーマンス 12 アクセシビリティ 23 ブラウザ 25 デザイン 83 コミュニケーション 13 ディレクション 51 ドキュメンテーション 8 JavaScript 491 ECMAScript 51 ライブラリ 68 ブラウザAPI 44 WebGL 42 テスト 37 JavaScriptの実践 70 JavaScriptの設計 9 JavaScriptドリル 19 非同期通信 5 DOM 9 Angular 30 Electron 4 Web Components 20 jQuery 24 Backbone 17 TypeScrip
node.jsでメモリ使用量を取得する方法あれこれ - Qiita
node.jsでメモリ使用量を取得する方法あれこれ はじめに BounscaleというオートスケールするHeroku Addonを作っています。 Bounscaleでは実験的にnode.jsへの対応を実施しています。 オートスケールするにあたり、各種リソースの監視が必要なのですが、node.jsでどのようにメモリ使用量を取得するか調べたので下記しておきます。 バージョン node.js v0.10.15 取得方法 調べた限りには下記3種類の方法を見つけました。 osオブジェクトの情報を利用する方法 processオブジェクトの情報を利用する方法 usageライブラリを利用する方法 osオブジェクトの情報を利用する方法 osオブジェクトはnodeの標準APIで提供されています。 下記の感じで全メモリ容量と未使用メモリ容量を取得できます。 引き算すればメモリ使用量が算出できると思います。
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Node学園祭2014来てるので、ほぼリアルタイムでメモをGistに書いていくよ - Life goes on
Fluidbox, a jQuery plugin for beautiful lightboxes
Angular 2 Core
DataTables | Javascript table library
Vue.js • TodoMVC