JavaScript

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

jQuery UI 1.8.4以下のdisableSelectionがWebkitで効かない

どうも1.8.4以下は実装がこうなってるらしくてWebkitで効かない disableSelection: function() { return this .attr( "unselectable", "on" ) .css( "MozUserSelect", "none" ); } 1.8.5でこうなってる。 disableSelection: function() { return this.bind( …

TypeError: Converting circular structure to JSON

循環参照しているオブジェクトをJSONにしようとするとエラる。 var obj = {} obj.me = obj JSON.stringify(obj) // TypeError: Converting circular structure to JSON

jQuery UIのCSSをGoogleのCDNから読み込む

ここに書いてないけどCSSも普通にロードできるっぽい。 Hosted Libraries | Hosted Libraries | Google Developers <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css"> ここにのってた。 jQuery UI 1.8.14 | jQuery UI BlogCSSは画像とかあってめんどいのでCDNでいい場合はこっちがよさげ。 minify版はないっ</link>…

JSで範囲指定のランダムな数値をつくる

こんな感じでいいだろうか function getRand(from, to) { return from + Math.floor( Math.random() * (to - from + 1) ); } console.log( getRand(0, 10) ); // 0 ~ 10 console.log( getRand(10, 20) ); // 10 ~ 20 console.log( getRand(8, 12)/10 ) // 0.…