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…

inputイベント便利

どのブラウザで今サポートされてるかちゃんと調べてないけどchrome15ではサポートされてる。input[type=text]とかchangeイベントだとフォーカス外れないとイベント発火しないし、keyupイベントとかだとマウスで貼り付けとかやったときイベント発火しない。あ…

textareaでタブを入力できるようにする

document.querySelector("textarea").addEventListener("keydown", function(e) { if (e.keyCode === 9) { e.preventDefault(); var elem = e.target; var val = elem.value; var pos = elem.selectionStart; elem.value = val.substr(0, pos) + '\t' + val.…

正規表現のメタ文字をエスケープ

正規表現にマッチさせるときにメタ文字があるとエラるので var foo = 'hoge(fuga'; 'hoge(fuga'.match( new RegExp(foo) ); // error こうすといいらしい。 var foo = 'hoge(fuga'.replace(/\W/g,'\\$&'); 'hoge(fuga'.match( new RegExp(foo) ); // ok

DOMをプレーンなオブジェクト(ハッシュ)にする

<div> <div>foo</div> <p>bar</p> </div> こんなのを { div: { div: 'foo', p: 'bar' } } こんな感じにしたい。jQueryプラグインで書いてみた。 http://jsfiddle.net/hokaccha/syEH2/今回は属性は必要なかったんでめんどいし無視した。あとこういうのもうまくいかない <p>hoge<span>fuga</span>piyo</p>

chrome.tabs.executeScriptのJSファイルのパス

html/popup.htmlからjs/script.jsを実行したかったので chrome.tabs.executeScript(null, { file: '../js/script.js' }); としたらエラったので chrome.tabs.executeScript(null, { file: chrome.extension.getURL('js/script.js') }); としたけどこれもだめ…

選択しているテキストの取得

これだけで取れるのね。 window.getSelection().toString() IEだとこうなのかな?(未検証) document.selection.createRange().text

chrome extensionのcontent script内でつくったiframe.contentWindowがundefinedになる

chrome14。タイトルそのままだけどcontent scriptで var iframe = document.createElement('iframe'); iframe.src = chrome.extension.getURL('iframe.html') document.body.appendChild(iframe); console.log(iframe.contentWindow); // => undefined うー…

Draggable的な実装

こんなん Draggable Test 1 これでもいいんだけど、これドラッグ中に要素からマウスポインタが外れると動かなくなるという問題がある。コードはこんな感じ。 var div = document.querySelector(".box") , startX = 0 , startY = 0 , currentX = 0 , currentY…

一定文字数以上のテキストノードを取得する

body以下の6文字以上のテキストノードだけ取得したいというケースがあって、XPathでけっこう簡単にできた。 var xpath = '//text()[string-length(normalize-space()) > 5 and not(ancestor::script)]'; var resultType = XPathResult.ORDERED_NODE_SNAPSHOT…

jQueryで閉じタグ消し忘れてはまった

IE9+、IE以外だとこうなんだけど $("<div>hoge</div></div>").html(); // => hoge IE6-8だと $("<div>hoge</div></div>").html(); // => null jQuery Templateのテンプレで閉じdivが多くて何も返ってこなくて大いにはまった。

chrome extensionでCross-Origin XHR

Cross-Origin XMLHttpRequest - Google Chrome ここに書いてあるとおりmanifestのpermissionsにChross-Origin XHRを許可するドメインを書いてbackground.htmlで実行すればOK。ポートの指定でちょっとはまった。テストでローカルの8000にサーバーたてて以下…

setTimeoutとかsetIntervalを同時に走らせるときのはなし

var i = 0; (function loop() { console.log(i++); setTimeout(function() { loop(); loop(); }, 0); })(); このコード動かしてみるとわかるけど、途中で処理がつまってほぼ動かなくなる。node.jsとchromeで同じだった。これloop()は一回で二つ同時に呼んで…

非アクティブなときのsetTimeout/setIntervalとrequestAnimationFrame

#9381 (animations halt when the browser is out of focus due to requestAnimationFrame) – jQuery - Bug Tracker この問題についてちょっと調べたけど、setIntervalとかsetTimeoutはタブが非アクティブなときは、1000ms以下で設定してる場合1000msで実行…

スマホでclassList

5509.me こういうの。スマホで使うのはまだちょっと早いみたい。iOS4、Android2.3以下は全部使えなかった。残念。iOS5は使えた。Android3系は試してない。

for in と Object.keys

for (var key in obj) { if (obj.hasOwnProperty(key) { ... } } っていうのは Object.keys(obj).forEach(function(key) { ... }); と等価。ベンチマークとってみた。環境はnode.js v0.4.7。 ベンチマークのコードはこんな感じ。一応hasOwnPropertyなしのfor…

Objectかどうかの判定

jQuery.isPlainObjectみたいなやつ。こんな感じかな function isObject(obj) { return obj instanceof Object && Object.getPrototypeOf(obj) === Object.prototype; } console.log(isObject({})); // true console.log(isObject({ foo: 'bar' })); // true …

enumerableがfalseのプロパティを見る

node.jsでconsole.logとかしてもenumerableがfalseなプロパティは見れない。 var o = Object.create(null, { foo: { value: 'bar', enumerable: false }, }); console.log(o.foo); // => bar console.log(o); // => {} o.fooはあるのにoをconsole.logしても…

Objectのmerge

Objectを再帰的にマージしたい。 var _ = require('underscore')._; var a = { hoge: { key1: 'val1' } }; var b = { hoge: { key2: 'val2' } }; console.log(_.extend(a, b)); // こうなってほしいけど // { hoge: { key1: 'val1', key2: 'val2' } } // // …

ビット反転演算子(~)でindexOfの判定

nodeのqsモジュールのコード読んでたらよくわからん書き方があった。 if (~key.indexOf(']')) { ... } って感じだったんだけど、チルダってなんだっけと思って。チルダはビット反転演算子で、整数をビット反転させると符号を反転させて1引いた数になる。こん…

OAuth1.0をクライアントサイドのJavaScriptだけでやってはいけない理由

OAuth1.0をJavaScriptだけでやろうとすると、consumer keyやconsumer secretが漏れちゃってよろしくない。それはすぐわかる。ではなんでこれらが漏れるとよくないのか。そしてなぜOAuth2.0ではJavaScriptのみでOAuthができるのか。OAuth1.0はcallback URLを…