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で終わるリンクを検…