Not your computer? Use a private browsing window to sign in. Learn more
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
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
type detection - latest log
2011-07-10追記 モダンブラウザでは、 typeof /^a/ は "function" ではなく "object" に修正されています。2009年10月(このエントリの初出)時点で /^a/("a") と記述可能な場合がありましたが、現在はエラーになります。 2010-01-21追記 http://d.hatena.ne.jp/uupaa/20100120/1263998056 2009-10-18追記 uu.type(new String('hoge'))とか渡した時4が帰ってきたりするので、プリミティブラッパー（ってJSで言うのか？）の判定を_TYPEに入れたほうがいいのかもしれませんね。 by tera コメント欄でのご指摘を受け、以下のコードを追記しています。 "[object Boolean]": 0x40, // uu.type(new Boolean(false))
本の虫: QuirksBlog: HTML5のドラッグ＆ドロップはクソだ
QuirksBlog: The HTML5 drag and drop disaster QuirksBlogで有名なPeter-Paul Kochさんが、HTML5のドラッグ＆ドロップに関して、酷くののしっている。かなり好い文章で、興味深かったので翻訳してみた。記事が長いので、blockquoteを使うのは御免を被る。 一日半もテストして、HTML5 drag and drop moduleはクソなばかりか、ゲロみてえな臭いがプンプンするってことが、いやというほど分かったね。 コイツはHTML5規格から、ソッコーで消すべきだし、もっとまともな規格が制定されるまでは、現行ブラウザは、この機能を、一刻も早く無効にするべきだ。 Web開発者は、HTML5のドラッグ＆ドロップを使うな。絶対使うな。RFC2119で規定されているMUST NOTの意味で使うな。使いたきゃ、従来通りのスクリプトで実装
ブラウザごとのlocation.hashの挙動のまとめ - ?D of K
今更ですが、location.hashで現在のステータスを管理するのがマイブームです。しかし、ASCII以外をぶち込むとブラウザごとに挙動が違うっぽいです。というのを調べておいて、書いておくのを忘れたので、まとめておきます。 方法 以下のアクションを起こした場合、location.hashで取得できる値がどうなるか、調べました。なお、ファイルはUTF-8で試しました。 ファイルに書いてあるリンクをクリックした場合 A1:#test B1:#てすと C1:#%E3%81%A6%E3%81%99%E3%81%A8 A2:#test#test B2:#てすと#てすと C2:#%E3%81%A6%E3%81%99%E3%81%A8#%E3%81%A6%E3%81%99%E3%81%A8 A3:#test%23test B3:#てすと%23てすと C3:#%E3%81%A6%E3%81%99%E3%
無料サービスを使え！ – 役立つ無料サービスのレビュー、まとめ、比較記事を紹介
コンテンツへスキップ 無料で使える！HubSpotの顧客リストの活用法 無料のアンケート作成ツール 比較／まとめ 無料「Excel」 テンプレート 比較／まとめ 無料で使えるノートアプリ比較 (Evernote / OneNote / Google Keep) おすすめの無料Web会議システム5選 WebP Converter 徹底解説！初心者でも直ぐに使える HubSpot は、マーケティング、セールス、サービスのためのCRM（Continue reading 多くの人の声を聞くことで改善できることも多い 企業や団体など運営していContinue reading 就職・転職には必須となる履歴書・職務経歴書 これから就職活動をスタートContinue reading 便利なノートアプリで効率的な仕事をしよう いつの時代も仕事をしていてメContinue reading 近年、リモートワーク
Google Docsはグローバル変数を使う、定石とは逆の実装 | エンタープライズ | マイコミジャーナル
Web Application Development - SitePen Mike Wilcox氏がSitePen Blog ≫ Web Page Global Variable Performanceにおいて、JavaScriptのグローバル変数とローカル変数に関する性能について興味深いベンチマークと考察を公開している。Mike Wilcox氏はフルフィーチャJavaScriptフレームワークDojoの開発者。 Mike Wilcox氏は最近Google Docsに追加されたベクタグラフィックス作成/挿入機能に興味を持ったという。DojoのベクタグラフィックAPIであるdojox.gfxと同じSVGとVMLを使っているためだ。Firebugでその実装を調査したところ、コードほとんどにおいてグローバル変数が使われていることに気がついて驚いたとしている。 JavaScript実装定石のひと
Firefox3.5でも使える！Geolocation APIの実装とその感想：マピオンラボ(Javascript)
こんにちは、マピオンでクライアントサイドの開発を行っている大澤です。 このほどマピオンのサイトをGeolocation API対応しました。 Firefox3.5以上をお使いの方は今すぐ試せます。 今回実際に実装などを行ってみた感想などを書こうと思います。 実装は、簡単だった 簡単でした。 ブラウザの判定なども特に必要なく、ただnavigator.geolocationがあるかどうか見て、あったら処理を続ければいいだけです。 if (navigator.geolocation) { /* geolocation is available */ } else { alert("ごめんなさい。あなたの居場所はわかりません。"); } 参考： MDC - Geolocation の利用 有線環境と無線LAN環境で精度が違う 有線LANのデスクトップ環境と無線LANのノートPCでは精
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
JavaScriptでCSSパーサーを書くための情報を収集中(1日目) - latest log
<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できればそれでいい。 ブラウザに CSS の解釈を任せなきゃいいんじゃないか? まずは、JavaScript で CSSパーサーを書くための情報収集からです。 わかってること ロード済みのスタイルシートは、document.styleSheets に擬似配列として格納されています。長さは document.styleSheets.length から取得できます。 スタイルシートの各ルールは、cssRules (IE なら rules)に格納されています。 document.sty
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
iモードがJavaScriptやCookie対応、Flash動画も
NTTドコモは、2009年夏モデルの発表にあわせ、「iモードブラウザの拡張（バージョンアップ）」として、iモード関連の仕様拡充を発表した。今夏モデル以降が対象となるが、今回発表された機種のうち、L-04A、L-06A、P-10A、T-01A、HT-03Aは非対応となる。 ■ 操作体系の変更 Flashゲームも方向決定キーで操作可能に 操作関連では、「i」ボタン（iモードボタン）を押した際の挙動が変更される。これまではiモードボタンを押すと、端末のiモード関連メニューが表示され、iメニューへのリンク、ブックマーク、ラストURL、iモード設定といった項目が表示された。しかし、今夏モデルからはiモードボタンを押すと、すぐiメニュー（iモード公式メニュー）へアクセスするようになる。 ブックマークや画面メモへは、サブメニューから利用する形となる。なお、iメニューのページにアクセスしている最中でも操作
JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net
最終更新日 Sun, 19 Apr 2009 20:27:25 +0900 最後のコメント Mon, 14 Jul 2014 08:14:00 +0900 ブックマーク 先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。 ご参加頂いた皆様、ありがとうございました。 JavaScriptからCSSを扱う それ程難しくはないので、簡単にまとめておきます。 はまりがちな事 Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。 僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。 <style> #foo { background-c
JavaScriptは悪くない - os0x.blog
JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第五回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第六回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 最終回 - Yahoo! JAPAN Tech Blog のシリーズがJavaScriptの面白さよりも、暗黒面ばかり伝えてしまっている印象で、連載モノだか
JavaScriptテストをスケールさせるファイナルウェポン"TestSwarm" | エンタープライズ | マイコミジャーナル
John Resig - JavaScript, Programming, and Web Applications Webアプリケーションの開発において複数のブラウザとOSで組合試験を実施するのは容易な作業ではない。クロスブラウザに対応したJavaScriptライブラリを利用することでこの問題の軽減をはかることができるが、そもそもJavaScriptライブラリの開発ではどうやって試験が実施されているのだろうか。jQueryの開発者であるJohn Resig氏がJavaScript Testing Does Not ScaleにおいてjQueryにおける試験の方法と問題点、問題を解決するために現在取り組んでいるプロジェクトを紹介している。試験のアイディアはWebアプリケーションにも適用できるため開発者やテスターはチェックしておきたい。 jQeuryにはいくつも試験ツールがあるが、少なくとも
「最速ブラウザ」争いは無意味だ
米Microsoftが最近実施した一連のテストによると、Internet Explorer 8（IE 8）は現在市場に出回っているブラウザの中で最速だという。もっとも、Google ChromeやFirefox、Safari、Opera、WebKitといったブラウザについて同様の主張を展開している調査結果を探すのは、そう難しい作業ではないはずだ。 それならば、こうした最速ブラウザに関するテストの数々をどう解釈すればいいのだろう？ どのテストが最も妥当なのだろう？ まあ、本当を言えば、映画『ミートボール』でのビル・マーレイの口グセと同じで「そんなのどうでもいい！」といったところだ。 まったくその通りなのだ。最近のWebやWebブラウザに関して言えば、ブラウザを選ぶ際に速度を気にする人など、ほとんどいない。 確かにかつてはブラウザの性能が重視された。わたしも実際1990年代にブラウザの比較を行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
