JavaScript

JavaScriptのデバッグTips

JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスし…

JavaScript連載第15回

Bootcamp2010、GDD2010でこっちに書くのが遅れましたが、クロスブラウザJavaScript入門の第15回が公開されています。 前回に引き続きprototypeのお話。このシリーズではあえてクラスとかチェーンといった言葉も避けています。他ではあまり見かけない説明の仕…

valueOfとtoStringとToPrimitive

valueOfとtoStringメソッドの水深43cmぐらいの深さの話 - 三等兵のもう少し深いお話。コメント欄に書こうかとも思ったけど、最近ブログ書いてない気がしたのでちゃんと記事にしてみる。まずは問題です。次のコードを実行したときにtrueかfalseのどちらがaler…

JavaScript連載第13回

クロスブラウザJavaScript入門の第13回です。今回は簡単なアプリケーションの作成ってことで、これまでのまとめ・復習的な内容になっています。ただ「簡単な」と書きましたが、あんまり簡単じゃないかも…。 JavaScript部分は特に問題はなかったんですが、や…

JavaScript連載12回とデベロッパーツールの特集開始

これでできる! クロスブラウザJavaScript入門の第12回として、XMLHttpRequest入門が、Google Chrome版Firebug:デベロッパーツール取扱説明書として、詳説:デベロッパーツールの使い方が公開されています。 デベロッパーツールというのはWebKitのWebInspec…

JavaScript連載第11回

これでできる! クロスブラウザJavaScript入門の第11回はJSONP入門です。 いわゆるAjaxと呼ばれる範囲の一部で、少し高度な内容になる、と思わせてすごく基礎的なところを取り上げています。というか、数学に例えると「公式の使い方の説明ではなく、公式の導…

SVG特集最終回

特集:スタートアップ SVG|gihyo.jp … 技術評論社の最終回が公開されました。 なるべく実用的で且つ面白そうなネタを考えていたんですが、結局無難なグラフにしました。 SVGの場合大きく描画しても重くないので、その辺は活かせるように拡大モードを追加し…

オレ標準JavaScript勉強会を開催しました

Twitterでこっそりと募集して、オレ標準JavaScript勉強会というイベントを開催しました。 id:edvakfさんが来日されるということで、「会いましょう→何かやりましょう→勉強会とかどうでしょう」というTwitter上の軽いノリで企画され、みんなで短いネタを披露…

SVG特集第2回・第3回

特集:スタートアップ SVG|gihyo.jp … 技術評論社の第2回と第3回が公開されています(第2回は1週間前ですが)。 ここまででIE9pp3やRaphaëlがサポートしている機能は一通り紹介しました。 次回で最終回なので、具体的な利用ケースとか、チップスとかを詰め込…

JavaScript連載第10回

これでできる! クロスブラウザJavaScript入門の第10回はJavaScriptとCSSです。 styleプロパティの操作に関するアレコレから、動的なルール操作やスタイルシート自体の追加方法など、JavaScriptからスタイルシートを扱う際のチップスを一通り詰め込んでみま…

SVGの特集記事

gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集:スタートアップ SVG|gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きま…

JavaScript連載第9回

これでできる! クロスブラウザJavaScript入門の第9回は実践DOMスクリプティング#2:DOMとHTMLです。 本当は月曜更新なんですが、原稿が遅れて1日遅れの公開となってしまいました…。申し訳ありません。 さて今回は前回に引き続き、HTMLの操作系です。安全か…

連結リスト(LinkedList)のベンチマーク

LinkedListは一言で言えば数珠繋ぎになったデータです。定義的には色々種類がありますが、今回は配列の代わりに順番にデータにアクセスする方法として使用します。具体的にはこういうことです。 function linkloop(){ var n = first; do{ // n } while ((n =…

jsdo.itで遊ぼう!

既にご存知の方も多いと思いますが、1週間ほど前にKAYACさんの新サービスjsdo.itがリリースされています。 jsdo.itはHTML, CSS, JavaScriptを編集してその場で実行、共有するプログラマ向けコミュニティサイトです。wonderflをご存知の方はそのJavaScript版…

JavaScript連載第8回

これでできる! クロスブラウザJavaScript入門の第8回は実践DOMスクリプティング#1 HTMLとテキストの操作です。 今回は今までより少し掘り下げていて、最適化とかにも少し触れています。これぐらいのほうが面白みがあって良いのかなとも思う一方、「クロスブ…

JavaScript連載第7回

これでできる! クロスブラウザJavaScript入門の第7回はJavaScriptとHTMLとDOMの基本#2 イベント編です。リンク先が前回になってました。ごめんなさい。id:edvakfさんご指摘感謝。 今回はイベントです。あとレガシーな書き方にも触れています。レガシーなコ…

JavaScriptで3D

id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと本格的な(だ…

JavaScript連載第6回

これでできる! クロスブラウザJavaScript入門の第6回はJavaScriptとHTMLとDOMの基本#1です。 今回は正直に言ってかなり苦戦しました。。DOM周りは書くことがありすぎてなかなかまとめきれないし、その前にHTMLについて書いておきたいこともあってと。 scrip…

CSSセレクタの高速化の話を検証

CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。 先に書いておくと、この元ネタのMozillaの記…

JSパーティクル崩し

canvasをバイト単位で修正する方法(ImageDataの使い方) | tech.kayac.com - KAYAC engineers' blogを少し改良してFirefox、Operaでも動くようにしてみた。 JSパーティクル崩し 修正点 Firefoxはcanvas外(幅100pxのcanvasにx:100.1とか)にputImageDataしよ…

JavaScript連載第5回

これでできる! クロスブラウザJavaScript入門も早くも第5回で、今回はJavaScriptの基礎知識#2:クロージャ編です。 結構時間をかけた甲斐があって、かなりわかりやすくなったんじゃないかと自画自賛してるんですがいかがでしょうか? 今回もあんまりクロス…

JavaScript連載第4回

これでできる! クロスブラウザJavaScript入門 第4回 JavaScriptの基礎知識#1 今回は少し基本に戻ったお話です。いや基本といえば基本だけど、わかりにくい・間違いやすいだろうなというところにスポットを当ててます。 この連載で意識しているのは、「JavaS…

BPStudy#32でChrome拡張とECMAScript5についてお話してきました

若手IT勉強会 : ATND(次回25日)繋がりのid:monjudohに誘われて株式会社ビープラウドさん主催のBPStudy#32 : ATNDでChrome拡張についてお話してきました。 資料はこちらChrome Extension with ECMAScriptまたこの資料か、という声が聞こえてきそうですが、htt…

第3回はクロスブラウザの傾向と対策

これでできる! クロスブラウザJavaScript入門:第3回 クロスブラウザの傾向と対策|gihyo.jp … 技術評論社 と、今さらですが、連載全体としては連載:これでできる! クロスブラウザJavaScript入門|gihyo.jp … 技術評論社からどうぞ。今回からいよいよクロ…

クロスブラウザJavaScriptの連載始めました

これでできる! クロスブラウザJavaScript入門:第1回 ウェブブラウザとJavaScriptの未来|gihyo.jp … 技術評論社 gihyo.jpさんでクロスブラウザを扱った連載を始めました。JavaScriptを中心に、CSSなどの周辺の話や、その辺のバックグラウンドにある標準化…

ECMAScript 5 and Chromium/V8

Page not found | Qt Blogの補足とV8版です。赤くなってるのはChrome5で使えるやつです。 Object.getPrototypeOf WebKit https://bugs.webkit.org/show_bug.cgi?id=28114 Chrome http://codereview.chromium.org/518056 Object.getOwnPropertyDescriptor Web…

JavaScriptの勉強会資料を公開

私が講師役をしている社内向けJavaScript勉強会の資料をまとめて公開しました。 実践JavaScript - 株式会社ALBERT 社内勉強会資料1回目を書いてからだいぶ間が空いてしまいましたが、その分6回分をまとめて、インデックスや見た目等々を整理してあります。 …

Tween3とsetTimeoutの最適化

JSTweener ライクなアニメーション code snippets - 0xFF、Tween2.js - 0xFFの続編です。今までは、複数のアイテムを動かす時に動かすモノの数だけタイマーが必要でした。対して、JSTweenerはタイマー一つで動くように作られていて、自作Tweenもそうしたいと…

IE6,7のためにArray.join("") による文字列連結を使うべき

理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log の件について。IE6の+による文字列結合が遅くて、Array.joinで連結するとマシになるよって話を(私が)初めて聞いたのはShibuya.js第1回の id:amachang の発表だった…

DOM取得のパフォーマンス比較

心に宇宙は満ちているでChromeのXPathが遅いあたりが気になって、軽く検証してみました。Speed Test. links, elements, xpath, querySelector! 単純にリンク要素を取得、走査 リンク要素を取得、#を含み、テキスト(手抜きでinnerHTML)が25で終わるリンクを検…

Event Driven JavaScript

document.createEventとdispatchEvent、addEventListenerを使ってイベントドリブンに書いたJavaScriptがオレブーム(ただし、IE非対応*1 )なので、軽く紹介してみたいと思います。具体的には、AutoPatchWork (Google Chrome Dev用のextension)をイベントドリ…

XMLHttpRequest Level 2 と wedata バックアップ

http://ss-o.net/json/ 以下に対して、.htaccessで Header append Access-Control-Allow-Origin: *という指定をして、ヘッダーにAccess-Control-Allow-Originをつけているので、(*はすべてのドメインからのリクエストを許可) http://ss-o.net/json/wedataAut…

Tween2.js

JSTweener ライクなアニメーション code snippets - 0xFFについて、アニメーションを止めたり、再開したいという要望をもらったので、機能追加してみました。 os0x's gist: 123561 — Gist サンプル:Tween2 黒い四角にマウスポインタを乗せると止まって(pause…

JavaScriptの勉強会資料

JavaScript社内勉強会|渋谷ではたらくベンチャーCTOのブログ 実践JavaScript - Event編 - 株式会社ALBERT 勉強会資料 月一で講師をしている、社内向けJavaScript勉強会の資料です。 初回はEvent周りの一般的な話(実際、割と良く目にするネタばかりだと思い…

「JavaScriptでconcatはもう使うべきではないのかも」なんてことはない

JavaScriptでconcatはもう使うべきではないのかもしれない (Kanasansoft Web Lab.)に早まるなとツッコミを入れる。まず、当たり前ですがpushを使うべきところでconcatを使う理由はありません。配列に要素を追加したいならpushを使うのは当然ですね。 あえてc…

『JavaScript:The Good Parts』にツッコミ

『JavaScript:The Good Parts』にツッコミ (Kanasansoft Web Lab.)へのレスも兼ねて。 Good Parts読んでない方は、A Life in Shinjuku.: JavaScript: The Good Partsを見れば大体書いてある。 かんそう 良書だと思うのだけど、初心者には説明不足なのが惜し…

JavaScriptは悪くない

JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog …

IEでlabel内の画像をクリック可能にする

ウノウラボ by Zynga Japan: IEでlabelの子要素に画像を含めるをより汎用的に実装してみます。まず、修正方針は以下の2点。 HTML側に処理を書かない(onclickは使わない) IEだけで処理されるようにする 素直に書いてみるとこういった感じになります。 /*@cc_o…

OperaのCanvasでParticles(Sand/Snow)

ふと、Saqoosha 先生の Snow*1をCanvasで出来たりするのかなーと気になって、ちょっと調べてみたら、OperaのCanvasが凄いと言われたので、早速移植してみました。http://ss-o.net/test/opera.snow.html (Operaのロゴは404: Page not foundから) んー、(簡略…

大量に同じ画像を表示したいとき

画像周りの速度メモ - #生存戦略 、それは - subtechの件。最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; fo…

富豪URI

URI - 素人がプログラミングを勉強していたブログ function URI(uri,base){ var a, _loc = location, self = this; if (base) {//via nanto_vi var XHTML_NS = "http://www.w3.org/1999/xhtml"; var XML_NS = "http://www.w3.org/XML/1998/namespace"; a = d…

期間限定、Google Chrome 2 の HiResTimeでベンチマーク

dev版のGoogle Chrome 2.0.166.1を弄っていたら、HiResTimeというグローバル関数を見つけました。perlとかでお馴染みの高精度のタイマー関数のようです。 さっそく試してみましたが、非常に高性能でお薦めです……と言いたいところなのですが、実はChromiumで…

inspect window(and Safari3と4の判定)

前回のをちょっと改良してwindowオブジェクトを解析してみた。 http://ss-o.net/test/window.htmlで、Safari3からSafari4betaで新たに増えたグローバルプロパティを調べてみた。 getSearchEngine postMessage setSearchEngine CSSVariablesDeclaration CSSVa…

inspect a

あまり知られていない気がしますが、HTMLのa要素はhref属性だけでなく(locationと同じ)hostやpathnameなどの属性を持っています(読み取り専用のようなものなので、属性を持つという言い方は不適切かもしれません)。 ただ、pathnameについて、例によってブラ…

OperaのpostMessageの実装(Opera10でLDR Full Feedを動くように)

OperaでLDR Full Feed - 0xFFがOperaで動かない件を調べてみたら、Opera10でpostMessageの実装が修正させていることに気がつきました。元々、OperaはHTML5のドラフト時の仕様に沿って document.postMesage を実装していました。その後 HTML5側ではwindow.pos…

JavaScriptによるブラウザ判別の実際

1 行でブラウザ判別を行うスクリプト (IE 用の日本語紹介記事、Firefox、Safari 用の日本語紹介記事) を発端に、SpiderMonkey の判別とブラウザ判別: Days on the Moon や JavaScript でのブラウザ判別 - 「仕様の盲点」ではなく、「プロパティの有無」を使…

主要ブラウザで動くCSSを追加する関数

GM_addStyleの実装と最適化 - 0xFFに関連して、「IEでGM_addStyleみたいな関数ってどう書けばいいんだろ」とつぶやいたら、fubさんにcreateStyleSheetってのを教えてもらいました。で、調べてみたらcreateStyleSheetとcssTextで割と簡単に書けるみたいなので…

GM_addStyleの実装と最適化

GreasemonkeyのGM_addStyle関数は呼び出すたびにhead内にstyle要素を作る。 Greasemonkey 0.8.20080609.0のソースより。 function GM_addStyle(doc, css) { var head, style; head = doc.getElementsByTagName("head")[0]; if (!head) { return; } style = d…

空から降ってくる女の子(ゲームっぽく)

空から女の子が降ってくる - ぼくはまちちゃん!(Hatena)id:murky-satyr先生 の http://gist.github.com/45346 を勉強目的に読んでたら、自分でも書きたくなってついやってしまった。すごく出遅れ感あるけど、折角なので公開。 javascript:H='http://hamachi…

IEでのテキストノード走査の高速化

に釣られて。 HatenaStar.js 1380 行目 テキストノード走査 一番のボトルネックはやはりここですね。IEなので、こんな感じでベタに計測。 makeTextNodes: function(c) { if (c.textNodes || c.textNodePositions || c.documentText) return; if (Ten.Highlig…