JavaScriptの文字列を反転する１０の方法とそのパフォーマンス - 風と宇宙とプログラム
はじめに JavaScriptで文字列を反転する１０の方法を（無理矢理？）思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。 文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(reverse)機能はない。Arrayのreverseはあるのに、Stringのreverseがないのはどうしてなのだろうか。 各ブラウザとそのバージョンは以下の通り： Chrome Firefox Opera Safari IE 13.0.782.112 m 6.0 11.50 5.1(7534.50) 8.0.7600.16335 rev01: C言語的発想 空の配列を作って、そこに元の文字列の後ろから１文字つづ入
正規表現を明記せず、RegExp#exec を String#split にするとちょっとハッピーに - latest log
JavaScript の小ネタです。 UserAgent 文字列(window.navigator.userAgent) "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.814.0 Safari/535.1"から、Windowsのバージョン(6.1)を取り出すようなコードをよく見かけますね。 ちょっと前の私は RegExp#exec + parseFloat で、こんな(↓)感じにしていたり、 function getWindowsVersion() { var m = /Windows NT (\d+(\.\d+)?)/.exec(navigator.userAgent); if (m) { return parseFloat(m[1]); } return 0;
Stoyan Stefanov「無駄に大変なcssローディング完了のチェック」 - 以下斜め読んだ内容
phpied.com 2011.3.17のエントリ When is a stylesheet really loaded? link要素でロードイベントの実装がされてたりされてなかったり DL完了してないのにノードリストが更新されちゃってたり Fxが特に大変 クロスブラウザな解決方法に「一応」到達してるのでよかった 以下斜め読んだ内容 cssが読み込み完了後にコールバックをセットする おかしい話だが意外と大変でした 使えるテクニックは５つ link.onloadチェック link.addEventLinstener("load")チェック link.onreadystatechangeチェック document.styleSheetsのlengthをsetIntervalで監視 特定DOM要素のstyle情報が更新されるかをsetIntervalで監視 reflow/repaintのキュー
Node.compareDocumentPositionが素晴らしい - hogehoge @teramako
と呟いていたら、 id:caisui さんが と教えてくれた。 広範囲にイベントを取得して、イベント発生元がどの要素に含まれるかで処理を変えたい時があって、そんな時は親ノードを辿って調べるという面倒なことをしていた。これとはおさらばしたいということで、compareDocumentPositionについて調べてみた。 Node.compareDocumentPosition - MDC Doc Center The return value is a bitmask with the following values: DOCUMENT_POSITION_DISCONNECTED = 0x01; DOCUMENT_POSITION_PRECEDING = 0x02; DOCUMENT_POSITION_FOLLOWING = 0x04; DOCUMENT_POSITION_CONTAINS
【レビュー】Firebugにみる「フィーチャーディテクションプログラミング」の使い方 | エンタープライズ | マイコミジャーナル
~robcee/ more than just sandwiches WebサイトやWebアプリケーションの開発ツールとしてFirefoxのアドオン「Firebug」は揺るぎない位置にある。Firefoxで効率のいいデバックを実施できるツールであり、その恩恵にあずかっている開発者は多い。特にFirebugの提供するconsole機能は便利なものだ。この機能がブラウザに組み込まれてくれればいいと思っている開発者は少なくないだろう。 いくつかの機能はすでにFirefoxにも取り込まれている。Firebugの開発者が自身のブログ~robcee/ - console.foo() and youに、console機能を使ったデバッグコードをWebページに組み込む場合のコーディング例を「フィーチャーディテクション」をベースにして紹介したものがあり、コーディングの際の参考になる。まず、もっと最初に利用す
setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵
なかなかどうして、怠惰な若輩者につき不明な点が多々あるため先人の知恵をお借りしたく候。というわけでいろいろ知恵や知識などいただきます。・・・消化不良でしたorz setTimeoutの中の小難しいお話 自分だけじゃ到底調べられないし分かる術もない。Cなんて知るか。だのにこうしてなんとなくでも知ることができるのはありがたいことです。 http://labs.gmo.jp/blog/ku/2007/09/firefoxsettimeout.html Firefoxだけで少し古い記事だけど今でも同じようなものかな。他に私がわかるような資料もないのでこちらをベースに考えさせてもらいます。大きな変更はないだろうし。 タイマースレッド URL先読んだだけではイメージできなかった。整理のため箇条で要約。 Firefoxにはタイマー処理だけを管理している専用のスレッドがある（TimerThread） タイ
Sensasi Jackpot No Limit City, Khusus di SURGAVIP
d="M21.99 12.055C21.99 6.49775 17.5122 2 11.995 2C6.47776 2 2 6.49775 2 12.055C2 17.0725 5.65817 21.2304 10.4358 21.99V14.9635H7.89705V12.055H10.4358V9.83608C10.4358 7.31734 11.925 5.92804 14.2139 5.92804C15.3033 5.92804 16.4528 6.12794 16.4528 6.12794V8.6067H15.1934C13.954 8.6067 13.5642 9.38631 13.5642 10.1759V12.065H16.3328L15.8931 14.9735H13.5642V22C18.3418 21.2504 22 17.0825 22 12.065L21.99 1
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
第10回 JavaScriptとCSS | gihyo.jp
こんにちは、太田です。前々回と前回はHTMLの操作について解説しました。今回は、CSSの操作を中心に解説していきます。 CSSとJavaScript JavaScriptからCSSを扱うとは、JavaScriptから要素に適用されているスタイルを変更して見た目を変化させる、ということを意味します。その具体的な方法にはいくつかの種類があります。 styleプロパティの操作 class名の操作 CSS自体の操作 では、styleプロパティの操作から順番に見ていきます。 styleプロパティの操作 要素のstyleプロパティを直接操作する方法は、その要素だけに影響するので1回あたりの処理コストは低く済むというメリットはあります。しかし、複数のプロパティの操作に加え、多くの要素のスタイルを変更する場合には、スタイルを変更するたびに描画への影響の計算が行われる（この計算をreflowと呼びます）ので
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
Web Workers用と通常のJavaScript用のコードを共存させる - latest log
Web Workers の調べ物してました。 Web Workers は、Google Chrome 4+, Firefox3.5+ , Safari4+ で既に利用可能です。 Google Chrome5 では、Web Workers 内で Web Socket を動かすこともできます。 js の基本であり鬼門といえば this オブジェクト 各ポイントで this.toString() や self.toString() を行い、this や self が何を指しているのか調べました。 <script> var globalScope = this.toString() </script> // WebWorkers.js var workersGlobalScope = this.toString(); var self1 = self.toString(); onmessage =
DOM Events とブラウザの実装: Days on the Moon
ブラウザ上でのイベント処理の仕組みは DOM 2 Events および DOM 3 Events 草案にて規定されています。しかし、DOM 2 Events で言及されていない部分など、細かい動作はブラウザごとに異なっていることもあります。そうした仕様と実装の差異を、「作って納得! DOM 2 Events」で触れなかったものも含めて、いくつかまとめてみました。 ターゲットフェーズで呼び出されるリスナ DOM 2 Events のイベントモデルにおいて、あるノードでイベントが発生すると、そのノードの祖先ノードのイベントリスナが呼び出されるキャプチャリングフェーズ、そのノード自身のイベントリスナが呼び出されるターゲットフェーズ、再び祖先ノードのイベントリスナが呼び出されるバブリングフェーズと、3 段階にわたってイベントが伝播していきます。このうちターゲットフェーズでは、addEventLis
140文字以内で DOMContentLoaded - latest log
DOM構築完了またはそれ相当のタイミングで (どこかで定義されている)関数A をコールバックします。 function Z(){try{(new Image).doScroll();A()}catch(e){setTimeout(Z,0)}} +[1,]?document.addEventListener("DOMContentLoaded",A,!1):Z() 130byteで驚きの読み辛さ。 ヒューマンリーダブル版 (function() { function IEDOMContentLoaded(){ try { (new Image()).doScroll(); // [!] throws A(); } catch(err) { setTimeout(IEDOMContentLoaded, 64); // delay after 64ms } } // IE6〜IE8を判定(IE8
これでできる！ クロスブラウザJavaScript入門 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2026 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
2010年のJavaScript：「これまで」と「これから」 | gihyo.jp
2010年のJavaScriptと題しまして、JavaScript周辺の「これまで」と「これから」についてまとめてみたいと思います。 2009年までのJavaScript JavaScriptは各ブラウザベンダなどが個別に実装するという特殊性から、ブラウザ（実装）ごとの非互換性の問題に悩まされ続けてきた言語です。まず、そのJavaScriptの歴史を簡単に振り返ってみます。 ECMA-262 3rd editionとスピードコンテスト JavaScriptはNetscape社によってLiveScriptという名前で誕生し、その後ECMAScriptとして標準化が進みました。1999年12月にECMA-262 3rd editionが策定されてから、Internet ExplorerのJScript、MozillaのSpiderMonkey（TraceMonkey）、SafariのJav
jQuery.live っぽい実装 - latest log
submit, focus, blur, change をクロスブラウザにする方法を追記しました。 最新版のコードを追記しました。 デモを追加しました。 jQuery.live() は document.addEventListener(type, fn, capture) で、天辺までバブルアップしてくるイベントを拾う 拾ったイベントが CSS のセレクタ式(expr) に一致するか比較 一致していれば登録されている fn をコールバック という処理をやっているようです。 # 注意: jQuery のコードを見ずにしゃべってるよ そんな感じのを実装してみた var _livedb = {}; // { "expr\vnamespace.click": {...}, ... } uu = uumix(_uujamfactory, { // uu(expr, ctx) -> Instance
JavaScriptのswitch文の速度はブラウザの違いでこんなにも差があった。 - 風と宇宙とプログラム
はじめに JavaScriptのswitch文は、CやJavaと異なりcaseのところに任意の式が書けるため、実行時にcaseの式も評価されるので基本的にはif-else文の並びと類似のものになります。つまり、caseの数に応じてパフォーマンスも低下すると予想されます。本当にそうなのか確認してみました。 測定した各ブラウザのバージョンは以下の通りです。 Firefox Chrome Safari Opera IE 3.5.6 4.0.249.30 4.0.4 (531.21.10) 10.10 8.0.6001 caseが数値リテラルの場合 パフォーマンスを測定するテストコードは下記のような簡単なものです。caseが1000個あるswitch文を10万回繰り返して実行したときの時間を測定しました。perf_test()関数の引数ｖに与える値に応じてcaseの条件で一致する場所が変わります。
JavaScriptの遅延ロードの効果とブラウザ | エンタープライズ | マイコミジャーナル
SproutCore: JavaScript HTML5 Application Framework - Create fast, native-style applications in any modern web browser without plugins. JavaScriptフレームワークSproutCoreの主要開発者であるCharles Jolley氏がSproutCore BlogにおいてJavaScriptの遅延ロードテクニックの概要と簡単なベンチマーク結果を紹介している。JavaScriptの読み込み時の処理がどのようにおこなわれ、どうやって遅延ロードを実現すればいいか、またその結果やブラウザごとの効果の違いなどがまとまっており参考になる。 SproutCore Blog - Faster Loading Through Eval() SproutCore Blog
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GREE Engineering
