Ever marveled at the magic of React? Ever wondered how Dojo does it? Ever been curious about jQuery's gymnastics? In this tutorial, we’re going to sneak behind the scenes and try our hand at building a super-simple version of jQuery. We use JavaScript libraries nearly every day. Whether it's for implementing an algorithm, providing an abstraction over an API, or manipulating the DOM, libraries per
Some browsers do not distinguish some or all of the numpad keys. Why use Keypress? Keypress is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~9kb), and has no dependencies. Here's some of what Keypress offers: Fire on keyup and/or keydown Any key can serve as a modifier Special "counting" combos Sequence combos Other features..
Google Closure Tools の JavaScriptのコードを最適化する 「Closure Compiler」をperlから利用する。 Closure Compilerは元のJavaScriptコードに対して大きく分けて二つの処理を行います。 １．既存のJavaScriptコードの最適化 ２．外部参照しているコードの取り込み cpanのままだけど、サンプルは use WebService::Google::Closure; my $res = WebService::Google::Closure->new( url => "http://code.jquery.com/jquery-1.8.0.js", compilation_level => 3, )->compile; print "Orig Size = " . $res->stats->original_size
LDRize.Opera用に、some相当の関数を書いていて気がついたことをメモメモ。 配列を走査する際に、目的の値を見つけたらそこでループを抜けたい場合というのは良くあるケースだと思います。普通にfor文などで回す場合は、breakを使うのが一般的です。ただ、forEachではbreakは使えません。 [1,2,3,4,5].forEach(function(v,i){ console.log(v,i); if ( v > 2) ;//break? }); /* 1 0 2 1 3 2 ←ここで止めたい 4 3 5 4 */ そういったときはArray#some(Array#everyでも可)が使えます。 [1,2,3,4,5].some(function(v,i){ console.log(v,i); return v > 2; }); /* 1 0 2 1 3 2 */ このとき、当
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
8月17 jsPerf, JSPerfView を使った、JavaScript コードのベンチマーク計測とブログなどで計測結果を利用する方法 jsPerf とは JavaScript のコードスニペットに対してベンチマークを計測するサービスです。 一般的に、コードの速度を計測する際は console.time, console.timeEnd を使う事が多いと思いますが、 実行するたびに結果がブレたり、短い処理では正確な比較ができなかったりします。 jsPerf では何度か同じ処理を実行して最終的に一秒間に何回実行できたかをスコアにするので、実行時間が 1ms より小さい処理でも計測できたり、ブレがあっても大体のスコアが分かったりします。 このスコアを計算する部分は Benchmark.js というライブラリで書かれていますので、サーバサイドの JavaScript コードの速度を計測する
多分コードも説明もおかしいのであんま参考にしないで下さい。あくまでも初心者である自分の勉強用なので。 ステートフルJavaScriptを写経しながら何となくMVC（MVVCとかMVPとかまだなんのこっちゃ分からん）っぽい概念は分かったけどいざ自分でコード書くとなるといまいちフローが分かないので、汚コードだろうがなんだろうがとにかく自分で考えながらコード書いてみた。徐々に機能を追加、リファクタリングしていく。 ちなみにどうしても自分で考えても分からなくなった時には下記ソースを見ながら進めた。 Todos 1. HTMLを用意する JavaScriptありきのHTMLってのはないと思うのでまずは兎にも角にもHTMLを用意。これを元に作っていく。 最新のSpine.jsも読み込んでおく。 また、jQueryも最新版を使用する。 <div id="mod-app"> <header> <h1>To
最近のモダンな JavaScript では、必ず "use strict" というのが書かれていると思います。この使い方を雰囲気ではわかってるけど、正しく理解していない場合が自分も含めて多いと思ったので書きとめたいと思います。 ちなみに、"use strict" でググると Perl のそれが出てきますが、Perl の話はしません。あとセミコロンの話もしません。 "use strict"とはそもそもなにか "use strict" は、Use Strict Directive と呼ばれています。 これは ECMA-262 の 14.1 Directive Prologues and the Use Strict Directive によって示されています。 A Use Strict Directive is an ExpressionStatement in a Directive Pro
Kanazawa.js 1.7 with Mozilla で利用したスライド 容量 10MB 制限があった時期に SpeakerDeck に UP していたもの: http://speakerdeck.com/u/dynamis/p/kanazawajavascriptnextRead less
キャッシングで借金をしているからと言って、まったく別のローンは絶対に利用が困難になるというものではありません。幾らか影響することがあり得るくらいだと言えます。 兎にも角にも即刻そこそこのお金を捻出しなければならなくなったという場合、あなたには当てがありますか？こういう時に不安を解消してくれるのが、即日キャッシングだといえるでしょう。 話題の即日キャッシングは、当日中に必要額を貸してもらえるので、仮に金融機関の営業時間終了後に申込みを終えれば、次の日の朝には審査が通ったかどうかの返事が手元に届けられるというわけです。 大方のキャッシング専門会社は、昼夜関係なしに受け付け自体は行なっていますが、審査をするのはそれぞれの業者の営業日・営業時間内に限定されてしまうことを頭にインプットしておかないといけないと思われます。 しっかり計画してその通り暮らしているつもりでも、給料日間近になると注意していて
１月２月は除雪でおわりました。（生存報告） - こういうのなんて呼ぶんだろう function myNumber (num) { return function (accessToNum) { if (accessToNum) num = accessToNum(num); return num; }; } 型判断とか端折っちゃったけど、はじめに設定した数値(num)をゴニョゴニョする関数を返す関数。 var n1 = myNumber(100); // プライベートに 100 を保持する関数を返す n1(function (_num) { // _num は n1 関数が保持している 数値。 return _num + 1; // ここで、保持している数値をインクリメント }); n1(function (_num) { console.log(_num); // n1 関数が保持してい
GetterとSetter ES 5thからsetterとgetterの定義が仕様に入ったわけですが… var Hoge = Object.create({}, { // プロパティ val: { set: function(a){ this._a = a }, get: function(){ return this._a } }, // メソッド add: { value: function(a){ this._a += a } }, init: { value: function(a){ this.val = a; return this; } } }); Object.createやObject.definePropertiesの第２引数に渡すオブジェクトの形式は厳密に定められいて、プロパティディスクリプタ（Property Descriptor）という偉そうな名前が付けられている
(ε・◇・)з hasOwnProperty を使った for in ループより 20%～84% 低コストな、うーぱー式 ループのご紹介だよ～ Object.keys を使い、key を列挙することで、hasOwnProperty を使った for in ループよりも速くなります。 var keys = Object.keys(obj), i = 0, iz = keys.length; for (; i < iz; ++i) { var key = keys[i]; var value = obj[key]; ... ベンチマーク http://jsperf.com/perf-for-in-loop-vs-pre-enum-keys-for-loop/8 Browser for_in_hasOwnProperty loop uupaa-looper Chrome 16.0.912.77
chromeでnative版とjQuery版のベンチを取ってみたら倍ぐらい違ったのでjQueryを使わないで実装。native版とほぼ変わらない実行速度になりました。 if( typeof Array.prototype.map === 'undefined') Array.prototype.map = function($callback){ var len = this.length; var $_ = new Array(len); for(var i =0; i コールバックについて２点ほど… 一つ目は、コールバック関数の引数。ECMAScript 5thのArray.prototype.mapの仕様では、コールバックには３つの引数が渡されます。最後の引数には配列自身が入ります。 [1,2,3,4].map(function(a,b,c){ return a + c[b] })
function Foo() {} Foo.prototype.a = 'b'; var foo = new Foo; console.log(foo.constructor.name); // => Foo これでコンストラクタとれるんだけど、こうするとダメ。 function Foo() {} Foo.prototype = { a: 'b' }; var foo = new Foo; console.log(foo.constructor.name); // => Object Foo.prototype.constructorを上書きしちゃうから。 ちなみにjQueryはこうなってる。 jQuery.fn = jQuery.prototype = { constructor: jQuery, ... }
あんまりいい例を思いつかなかったけど、タイマーを作ってみた。 new Timer でタイマーオブジェクトを作る Timer の プロトタイプオブジェクトにEventEmitterのインスタンスを利用することで、new Timer したオブジェクトはイベント駆動のオブジェクトになる 任意のイベントを登録するには timer.on(eventName, listener) もしくはtimer.addListener(eventName, listener) 任意のイベントリスナーの実行には timer.emit(eventName, [arg1, [arg2...]]) 。この例だと任意のタイミングでリスナーを実行させたいので if (count % 3 === 0) this.emit(eventName, count) みたいにする このサンプルだと、１秒ごとにカウントを表示する。ただし、
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
手軽に関数型言語を学ぶには js はいいかもしれない。 【追記】ここで定義している map と filter だけど、ECMAScript 262 5th editon の アルゴリズムに沿ってないっていう指摘がありました。ECMAの Array#map と Array#filter のアルゴリズム（というか定義）を知りたい人は http://www.ecmascript.org/docs/tc39-2009-043.pdf 見るといいです。あと実装については https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array/map : MDNのArray#map の実装 https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
