javascript

element.querySelectorで直下の要素を指定する

例えばel(DOM Element)の直下の.fooを取りたいときに、以下のようにしたい。 el.querySelectorAll('> .foo'); これだとエラーになるんだけど:scopeを使えばいける。 el.querySelectorAll(':scope > .foo'); Chrome、Firefoxでは動いた。

Babel 6.xでErrorとかArrayをextendsしたときの挙動がおかしい

class FooError extends Error {} console.log(new FooError() instanceof FooError); //=> false console.log(new FooError() instanceof Error); //=> true class FooArray extends Array {} console.log(new FooArray() instanceof FooArray); //=> false…

ES6でN個の配列

Array.prototype.keysはIteratorを返すのでArray.fromに食わせる Array.from(Array(5).keys()); //=> [0, 1, 2, 3, 4] もしくは Array.from({ length: 5 }).map((v, k) => k); //=> [0, 1, 2, 3, 4] Array.fromの第二引数はmap的な役割があるので Array.from…

ShadowDOMの外から内部の要素を取得する

shadowRootでshadowRootが取れるのでそこから辿れる。 var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var shadowRoot = this.createShadowRoot(); shadowRoot.innerHTML = '<span class="foo">text</span>'; }; document.registerElement(…

Shadow-Piercing descendant combinator is deprecated

最近Web Componentsのアップデート全然見てなかったけどCSSで外からShadow DOMをスタイリングするための/deep/(>>>)、::shadowがdeprecatedになってた。 Shadow-Piercing descendant combinator, '/deep/' (aka '>>>') - Chrome Platform Status

Polymer/platform.jsでdocument.currentScriptが動かない

Web ComponetsのPolyfillのPolymer/platform.jsでHTML import使ったときに、呼び出される側のHTMLのJSのdocumentを取得したいときに、 var doc = document.currentScript.ownerDocument; ってやればとれるらしいんだけど、これがうまくPolyfillできなくて動…

Backbone.jsでPATCHをPUTに書き換える

Backbone.jsでsaveするときに patch: true にするとPATCHメソッドになってsaveに渡した引数だけをbodyに含める(patch :true しないとmodelの全attributesをbodyにしてPUTする)んだけど、API側がPATCHメソッドに対応してなかったりPATCHメソッドを通さないp…

要素の属性を全部取得する

例えば <div data-foo="a" data-bar="b" data-baz="c">...</div> みたいに任意のカスタムデータ属性がついてて、こっから { foo: 'a', bar: 'b', baz: 'c' } みたいなデータを作りたいので属性を全部取得したいんだけど、 jQuery ではできないっぽい。DOMの element.attributes を使えばいける。 var div = docu…

delegateでclickイベントを拾う場合のtap-highlight-color

iOSとかでリンクをクリックするときにグレイにハイライトされるけど、clickイベントでも特定の条件を満たせばハイライトされる(対象の要素がリフローしない場合とかだった気がするけど詳しくは覚えてない)。ハイライトされるのはいいとして、delegate次の…

new FormDataの引数

XHR2で画像とかのバイナリデータを送るのにFormDataっていうのが使えて <form> <input type="file" name="file"> <input type="submit"> </form> var form = document.querySelector('form'); form.addEventListener('submit', function() { e.preventDefault(); var formData = new FormData(form); var xhr = new XMLHttpRequ…

window.onerrorを強制的に発火する

window.onerrorが正常に動いてるか確認したくてコンソールで throw new Error('foo'); ってやったけどなぜか発火しなかった。アドレスバーにjavascriptスキームで javascript: throw new Error('foo'); ってやったら発火した。

jshintでグローバル変数のチェックをしないやつを指定する

jshintで (function() { 'use strict'; var foo = Backbone.Model.extend({...}); })(); とか書くとBackboneがないよこのやろうって怒られる。jsのファイルに /*global Backbone: true*/って書くけばいいんだけど、全ファイルに書きたくない。調べたら.jshin…

coffeescriptについて

なんか流行ってるみたいなので便乗してみる。なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech なぜ CoffeeScript がよいか - 0xff.toBlog() CoffeeScriptは自分にとっては有益だった - Takazudo hamalog基…

sinon.jsのuseFakeTimersでmochaがややバグる

sinon.jsのuseFakeTimersでDateを上書きするとmochaでテストにかかった時間を計測するところがバグって変なことになる。報告しようと思ったけどすでにissueあがってた。 https://github.com/visionmedia/mocha/issues/237ブラウザで使う場合はmocha.js本体に…

Backbone.jsで値をセットしたときにデータを変換したい

例えばこんな感じで文字列で渡した日付をDateオブジェクトに変換みたいなことがしたい。 var myModel = new MyModel({ date: '2012-02-02' }); console.log( myModel.get('date') ); // Date Object myModel.set('date', '2012-02-03'); console.log( myMode…

iOSでのWebSQL Databaseの容量の上限

iOSの場合openDatabase時に大きい容量を指定すると、容量増やすけどOK?みたいなダイアログでる。だけど、指定する容量が50MB以上だとエラーになるっぽい。んで50MBにして1KBのデータをどんだけ保存できるかやってみたら、12000レコードくらい(実データのサ…

for inとObject.keysの件追記

http://d.hatena.ne.jp/hokaccha/20110729/1311927481 この件にuupaaさんからつっこみ。https://twitter.com/uupaa/status/165692109565870080 http://uupaa.hatenablog.com/entry/2012/02/04/145400Object.keysはスコープつくるので正確には等価じゃないと…

JavaScriptファイルをminifyするときとかのビルド方法

jQueryとかjQueryMobileとかを参考にしつつMakefileつくってこんな感じにしてみた。build以下にclosure-compilerをまるっとアップする感じ。 https://github.com/pxgrid/js-flipsnap/commit/34eb5acec21911aa39f3c598133f74d7503dfe88まあこれでもいいんだけ…

Backbone.Model.prototype.setとかのときに値を渡す

アンドキュメントだけどこんな感じでいける。 var Foo = Backbone.Model.extend(); var foo = new Foo(); foo.bind('change:hoge', function(model, hoge, obj) { console.log(hoge); //=> fuga console.log(obj); //=> { key: 'val' } }); foo.set({hoge: '…

Backbone.ModelのidAttribute

ドキュメントに書いてないけどidAttributeってのでidのキー名を変更できるっぽい。mongoDBとかで_idにするといいっぽい。 https://github.com/documentcloud/backbone/blob/29b60e53fa18b6fffb4a21d0d1c8c9fdbde43b6c/backbone.js#L159-161

Backbone.Eventsのアップデート

underscoreの_.bindと混じるからbindとunbindはonとoffになったっぽい。今のところbindとunbindも後方互換で残ってるけど1.0では消えるっぽい。 https://github.com/documentcloud/backbone/commit/51335bf10f0763f0b9cd1bd9b386b0445cfc8185 https://github…

flipsnap.jsのアップデートとか

クロスブラウザ対応してみた。 https://github.com/pxgrid/js-flipsnapもともとWindows Phone7のIEで動かすために始めたんだけど、結局mousemoveがバグって全然発火しないので諦めた。PCのIE9では動くんだけど。。AndroidのFirefoxとかOperaで動くようになっ…

Androidでtouchmoveがうまくうごかない件とflipsnapでの対応策

この件。主に2.1とかっぽい。 http://www.youtube.com/watch?v=s6c3n7IjKuY手元の端末だとIS03で同じ現象だった。エミュレーターでも同じ挙動になったので端末依存じゃないかも。んで検証してみたらtouchstartをpreventDefault()すればうまく動くことがわか…

use strictの影響範囲

use strictは関数内に書けばその関数内だけで有効になるわけだけど、グローバルの領域に 'use strict'; ... とか書くと、人が書いた他のモジュールに影響出ちゃうんで (function() { 'use strict'; ... })(); こうするのが礼儀かと思ってたけど、やってみた…

オブジェクトの順番が変わる

2011-12-19 - ここはちょっと見せられない var obj = { "00" : "foo", "10" : "bar" }; console.log(Object.keys(obj)); // => [ '10', '00' ] (Node.js, Chrome, Opera) // => [ '00', '10' ] (Firefox, Safari) オブジェクトの順番が保証されないのは仕様…

console.logのエイリアス

http://ginpen.com/2011/12/16/apply-to-through/ function log() { // console.logが使えればそれで出力 if (window.console && console.log) { console.log.apply(console, arguments); } // consoleが使えなければalert()で出力 else { // alert()は引数…

jsよりcss先に読み込むべし

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts. http://api.jquery.com/ready/ CSSに依存するJSがあった場合、DOMConten…

Foo.prototype = {}するとconstructorがObjectになる

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.…

jQueryのanimate scrollTopで困った件

今更こんなのにはまった。スムーズスクロール実装するときに、 $("html, body").animate({ scrollTop: 0 }, function() { console.log("animate end"); }); WebKitだとbody、それ以外だとhtmlにしないと動かないので $('html, body') って書くのが普通っぽい…

jsでarray_chunk

http://php.net/manual/ja/function.array-chunk.php こういうのほしかったので。 function arrayChunk(input, size) { var ret = [] , x = -1; input.forEach(function(val, i) { var y = i % size; y === 0 ? ret[++x] = [val] : ret[x][y] = val; }); ret…