サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
コーヒー沼
teramako.hatenadiary.org
WebPlatform 系 time 要素の実装 (Bug 629801) data 要素の実装 (Bug 839371) input[range] 要素の実装 (Bug 841948) [WebComponents] document.register の実装 (Bug 783129 about:config から dom.webcomponents.enabled を true にする必要あり FormData の append に filename をサポート (Bug 690659 https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#dom-formdata-append の第3引数のこと [CSS] Flexbox をデフォルトでサポート (Bug 841876) [CSS] @support , CSS.supports(
ある意味、ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由の続き。 今回は ECMAScript 6th から入る ArrowFunction で即時関数を考える巻。 前回は普通の関数式での即時関数を解説してみた。 functionには2種類ある いきなり function から書くと式とは認識されないから一工夫が必要 という話だった。 さて、もし、function には1種類しかなく、式としての関数式のみだったら、きっと ExpressionStatementの先頭にfunctionが来てはならないという宣言が設けられることは無かっただろう。 それを踏まえて、ArrowFunctionを見てみると、これは1種類の式のみの定義だ。 では、 () => { // .... }(); と書けるはず! と思うだろう。 しかし、しかしながら、こう書くと構文エラー
結論から言うと、単なる格好付けです。 以下説明。 主要なJavaScript (ECMAScript 5th)では、functionは2種類あります。 文(Statement) *1 式(Expression) です。 所謂、「即時関数」と呼ばれるものはfunctionは式(Expression)である必要があります。 何故なら、関数実行を示す構文であるCallExpressionが式であり、それ以外存在しないからです。*2 JavaScript コードは文(Statement)の集合 JavaScriptのコードは文の集合と言えます。いきなり式が始まることはありえません。 とはいえ、 foo(); 1 + 2; といったものは成り立ちます。これは文(Statement)の解釈としてExpressionStatement(式を書いても良い)という、文が定義されているからです。 ともかく、文
function setButtonHandler () { var buttons = document.querySelectorAll(".hogeButton"); for (var i = 0, len = buttons.length; i < len; ++i) { (function(n) { buttons[i].addEventListener("click", function() { alert(n); }); }(i)); } } って感じのコードってあるじゃないですか。JavaScript で陥りがちな落とし穴を解決するみたいな感じで。 でも、これって本当は良いコードじゃないよね。 (function(n) {.... }(i)) が格好わるいっていうか、毎回即時関数実行かよっていうね click のハンドラーも同じコードなのにループ数分生成しちゃってるよねー
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference を読んで、display = "block" はアカンやろ、と思ったので書いておく。 <div id="foo"> <p>FOO</p> </div> div#foo を JavaScript から表示/非表示をするには。 ダメパターン function show (elm) { elm.style.display = "block"; } function hide (elm) { elm.style.display = "none"; } これはダメなパターン。何故なら、show 関数が対象とする要素が、display: block で合っているか保証がないから。 場合によっては、inline,inline-block,table,
869996 – Set.prototype.{keys, values, entries} 875433 – iterator methods of [Array, Map, Set].prototype should be same function object as entries/values Array.prototype values() Map.prototype keys() values() entries() Set.prototype keys() values() entries() 辺りが実装された。 どのメソッドもイテレータを返す。 Array var arr = ["a", "b", "c"]; var iter = arr.values(); // [object Array Iterator] arr.push("d"); var v; for (let
func1 から func10 までのどれが「クロージャ」でしょうか? var scope = "global"; function func1 () { return scope; } var func2 = function () { return scope; }; var func3 = new Function("return scope;"); function foo () { var scope = "function foo"; function func4 () { return scope; } var func5 = function () { return scope; }; var func6 = new Function("return scope;"); var func7 = Function("return scope;"); var func8 = e
問題:どれが「クロージャ」でしょうか? - hogehoge の回答 期待させて申し訳ないですが、はっきりとした解等を定めていません。ということで解答ではなく、回答で。 クロージャの定義を以下の様に定めました。 引数以外の変数を実行時の環境ではなく、自身が定義された環境(静的スコープ)において解決することを特徴とする。 クロージャ - Wikipedia JavaScriptの関数オブジェクトは定義時にスコープを定めてチェーンを形成します。このチェーンが変化することはありません。上記定義の言葉通りに考えるならば、答えは6, 7, 9以外の全てになると思います。 ただし、よくある説明では、関数の中で定義される関数オブジェクトのみを「クロージャ」と呼んでいる様に思えます。 var scope = "global"; function func1 () { return scope; } fun
[JavaScript]for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を3つほど. | TM Life 対応その2: event.targetを使う と 対応その4 : this を使う について 上記サイトで書いてあることが間違っているというわけじゃないんだけど、少し補足したい。 event.target その Event オブジェクトには発火元となった要素を target プロパティとして保持しています. 合っています。 が、on* や addEventListener した要素と target は必ずしも一致しない点には注意した方が良いと思います。 <ul id="list"> <li>foo <b>hoge</b></li> <li>bar <b>hoge</b></li> </ul> var list = document.getElement
Chrome 28 で ECMA-402 が実装されてたのを期に少し書いてみる。本当な Firefox Nightly でも一度は実装されたんだけど、バグがあったからか今はバックアウトしちゃって使えない。 確認したバージョン: 28.0.1500.11 (Official Build 199640) dev-m Standard ECMA-402 ECMAScript Internationalization API Specification - ECMA-402 Edition 2.0 - DRAFT The ECMAScript Internationalization API (ここが用例とかが載っていて分かりやすいかも) i18n API と略して言ったりする。 ボクは全然詳しくないので触りの説明しかできないけど、ロケールに合わせたメソッドを提供する仕様/APIだ。 プログラミン
ちょっとフライング気味だけど WebPlatform 系 Style[scoped] のサポート (Bug 508725) <main> のサポート (Bug 820508) window.crypto.getRadomValues (Bug 440046) Web Cryptography API[W3C] window.crypto.getRandomValues - Document Object Model (DOM) | MDN window.location.origin (Bug 828261) origin - URL Standard[WHATWG] decodeAudioData (Bug 792263) decodeAudioData - Web Audio API[W3C] parseInt がオクテット数値を考慮しない (Bug 786135) parseInt(
今更ながら、基本のおさらい s-bit (sビット) setuid, setgid のことで、そのファイルのオーナーまたはグループの権限で実行する ただし、各オーナーやグループに実行権が付いている、かつ、実行するユーザが実行できるパーミッション(オーナーかグループかその他か)になっている必要がある。 例えば、setuid が付いているがパーミッションが 744 、オーナーが root になっている場合、root 以外の他のユーザは実行できない。 ディレクトリの s-bit の場合 グループに付くs-bit (setgid) はその配下に作るファイルのグループが継承される。 ディレクトリを作ると、s-bit も継承する sticky-bit (スティッキービット) 典型的な例は /tmp のディレクトリ このsticky-bit が付いたディレクトリ配下に作ったファイルは作ったオーナーしか移
主に2種類あると思う。 switch (expr) { case expr1: break; case expr2: break; default: // ... } と switch (expr) { case expr1: break; case expr2: break; default: // ... } ボクは、前者がお勧めだと思っている。jslint ? そんなの知りません。 vim のデフォルトがインデントするから ブロック文を生成した時の整合性 1番目はいいや、単にボクの使用エディタがvimだってだけだから。 2番目。 switch内の最後の句で、微妙にインデントレベルが合わなくて気分が悪くなるわけだが、下記のようにブロック文にするとすっきりさせることができる。 switch (expr) { case expr1: break; case expr2: break; de
の解説を理解するために。 通常のFunciton定義と、ArrowFunctionでの違いを追ってみる。 以下の3つくらいの理解に必要だろう。 8.3.15.1 [[Call]] Internal Method 10.2 Lexical Environments 13 Function and Generators 13.1 Function Definitions 13.2 Arrow Function Definitions 13.6 Creating Function Objects and Constructors Functionオブジェクトの違い(FunctionExpressionとArrowFunction) まずは、Functionオブジェクトがどのように生成されるか、である。 Function定義は、FunctionDeclarationと名前付きFunctionExp
Firefox Nightly (22) に ES6のArrow Function来たる - fragmentary ということで、早速試しているわけです。 基本 var f1 = () => "OK"; // 引数なしの場合は、"()"が必須 var f2 = arg => arg + 1; // 引数一つなら、"()"は省略可 var f3 = (arg1, arg2) => arg1 + arg2; // 複数の引数の場合は"()"必須 var f4 = arg => { // ステートメントを入れる場合は "{}" でブロックを生成する if (arg) return "OK"; else return "NG"; }; // オブジェクトを返す場合は、ブロックと間違われないように // ({...}) と () 等を使用する var f5 = () => ({ a: "A", b
昨日はFirefox Nightlyにdocument.registerが実装されたって話を書いたが、もしやChrome Canaryにもあるんじゃ?と思って見てみたら、あった。 Bug 100229 - [Custom Elements] Implement bare-bone document.register() チェンジセット 143865 – WebKit ただし、webkitプレフィックス付き。 function mixin (aTarget, aSource) { Object.getOwnPropertyNames(aSource).forEach(function(key){ Object.defineProperty(aTarget, key, Object.getOwnPropertyDescriptor(aSource, key)); }); return aTar
ChromeのExperimental WebKit/JavaScript Features - fragmentary Experimental JavaScript Features の方に Symbol が使えると書かれていたので早速。 Symbol ってのはなんて言うか、固有のプロパティのキーになれるもの?っていう説明で良いのかな。 var s = new Symbol(); var obj = {}; obj[s] = "OK"; obj[s] // "OK"; obj[s]の s は文字列化されずに、Symbolそのものとして動く。文字列キーとしては存在しないためs を使わずに得ることは不可能なのだ。 "use strict"; (function(global){ var className = new Symbol, name = new Symbol; var BaseP
783129 - Implement the document.register interface method mozilla-central: changeset 123773:871fea464883 カスタム要素が作れるようになった。DOM要素は単にDOM APIを呼び出すだけの存在だったのが、独自のメソッドとかを追加できるようにったわけで、よりオブジェクト指向的にJavaScriptを書けますね! 仕様 Introduction to Web Components Custom Elements サンプルコード 詳細は、テストコードを見たほうが良いかも。 http://mxr.mozilla.org/mozilla-central/source/dom/tests/mochitest/webcomponents/test_document_register.html?force
Array#indexOf(item) !== -1をやって存在を確認するのが、どうにも速い気がしなくてやってみた。 とりあえず、Array.indexOf vs Set.has · jsPerfで速度確認。Set#hasが圧倒的に速い。 かと言って、単純な Set では以下の点で使いづらい 値の順番操作が面倒 入っている値に直にアクセスすることができない ということで、配列的なんだけど、内部にSetオブジェクトを持ったものを作ってみた https://gist.github.com/teramako/4970442 ECMAScript.next なのがたくさん入っているので、今のところ、Firefoxでないと動かないと思う 値があるかどうかの確認は高速(UniqArray#hasの使用) それ以外の操作は余計な処理をするので遅くなりそう 値の重複は許さない(メリットでありデメリットでも
constructor.members_に使えるメソッド名一覧があることを発見して、getEventListeners(node)で、そのnodeでリッスンしているハンドラが取れる事を知った。 デバッグに役に立ちそう。 参考 Command Line API Reference - Chrome Developer Tools — Google Developers
function getJSengine() { if (!("__proto__" in Object.prototype)) { if (typeof Object.getPrototypeOf === "undefined") return "JScript(IE8-)"; else return "JScript(IE9+)" } var o = JSON.parse('{"__proto__":null}'); if (!(o instanceof Object)) return "V8(GoogleChrome26-)"; if (Object.getPrototypeOf(o) === null) return "JavaScriptCore(Safari)"; if (Object.prototype.hasOwnProperty("__proto__")) { var d
788293 – Remove E4X from Spidermonkey mozilla-central: changeset 120561:c929583ba8ae 現NightlyのFirefox 21.0a1で──というよりSpiderMonkeyから──E4Xが削除された。 (当然だけど)Firefoxからも、javascript.options.xml.chromeやjavascript.options.xml.contentで有効/無効にできたものが、このオプション自体がなくなっている ぽく、ぽく、ぽく、ちーん... 参考 「e4x」の検索結果一覧 - hogehoge
Webサーバを立てると良く CD-ROM を取り出したくなりますよね。 ならないとしたら、今すぐこの記事を読むのをやめて病院に行って下さい。 https://gist.github.com/4634841 追記:セキュリティリスクがあることが判明しました! <img src="http://localhost:8090/eject..."> 訪れたページに上記のようなものがあると勝手にejectされてしまうかもしれません!!! ejectすると何らかのピタゴラスイッチにより自爆する装置がある人は注意しましょう!!!! 経緯 始まりはGigazineでも見てもらうとして、 Firefoxでも。アドオンとして動作するHTTPサーバ「fxHttpd」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログに自分が作っている、fxHttpd[GitHub] が紹介
Mozilla in 2012 | The Mozilla Blog 言いたいことは分かるよ。4x less memory usedのところを見て言っているんだろ? でもね、"*" つまり、※ただしイケメンに限る があることに気付かない? 小さいけど、For the memory power users with add onsって書かれているでしょ。 つまりね、これはFirefox 15で削除されたコンテンツへの参照をいつまでも保持していたのを強制的に解放するするようになったからで、そのようなアドオンをたくさん追加している人にとっては「4分の1」なんだ。 僕も最初騙された。Mozillaめ...。
ES-Discuss のメーリングリストで知った。 Object.prototype.get = function(){}; var o = {}; Object.defineProperty(o, "hoge", { value: "OK" }); // TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified Object.prototypeに get, set あたりのプロパティを追加してしまうと、Object.defineProperty()時に例外が発生していしまう件、というやつ。 Object.prototype に設定すべきでないプロパティ 先に、設定すべきでないプロパティをあげておく get set va
個人的メモ ローカルでサーバを立てて実験中、妙に反応が悪いので何でだろうと思ってた $ curl -V curl 7.27.0 (i686-pc-cygwin) libcurl/7.27.0 OpenSSL/1.0.1c zlib/1.2.7 libidn/1.25 libssh2/1.4.2 Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp scp sftp smtp smtps telnet tftp Features: Debug GSS-Negotiate IDN IPv6 Largefile NTLM NTLM_WB SSL libz TLS-SRPトレースを取ってみたところ $ cat <<EOM | curl -X POST -F "file=@-" --
Firefox 17.0 リリースノート さて、Firefox 17 がリリースされました。そのリリースノートに、以下の様なのがあります。 JavaScript の Maps と Sets がイテラブル (反復可能なオブジェクト) として利用できるようなりました。 これはどういうことなのかを少し解説。といっても、内部のECMAScript仕様に詳しいわけではないので、その辺りは、Constellationさんに譲りたいと思います(ぉ あくまでMozilla実装での使い方ということで。 var map = new Map([ ["a", "A"], ["b", "B"] ]); map.set("c", "C"); console.log( map.get("a"), map.get("b"), map.get("c") ); // "A B C" ここまでは今までの基本です。 イテラブルと
ソース: https://twitter.com/mattn_jp/status/271117577693044736
まぁGimpのプラグインとかを使っても良いんだけど、アニメーションGifをアニメーションpngに変換するツールがあるので、その紹介。 GIF to APNG | Free software downloads at SourceForge.net Jari Aalto - [ANNOUNCEMENT] New package: gif2apng 1.7-1 -- tool for converting animat 先日Cygwinにアニメーションpngへ変換する新たなパッケージが登録されたので早速使ってみた次第。 使い方は至極簡単。 gif2apng <gif-file> [<out-file>]$ gif2apng senjougahara.gif gif2apng 1.7 Reading 'senjougahara.gif'... 2 frames. Writing 'senjoug
次のページ
このページを最初にブックマークしてみませんか?
『hogehoge @teramako』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く