rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
fladdict.net blog: JavaScript, ActionScriptにおける .this とは何なのか？
人様にActionScript (あるいは JavaScript)を教える時に、絶対に鬼門となるthisスコープについてのまとめメモ。 ECMAスクリプトでは関数が他の変数に代入可能な為、関数のthisが文脈によって変動します。どうも、Javaとかやってる人にはそれがスゴイ気持ち悪いらしいのです。 thisとな何なのか？ 端的に言うならば、thisは「その関数を、何のプロパティと解釈して呼び出したか？」によって決定します。 関数を直接呼び出す場合と、オブジェクトのプロパティに代入してから呼び出す場合を比較してみます。 function hoge(){ alert(this); //trace(this); flashの場合はコッチ } var myObj = new Object(); myObj.hoge = hoge; hoge(); myObj.hoge(); のように書いた場合、
JavaScriptコーディングに関するテクニックやパフォーマンス等のリファレンス集:phpspot開発日誌
最近発見した、JavaScriptコーディングに関するテクニックやパフォーマンス等の参考になりそうなエントリをリファレンスをまとめてみました。 Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7 | Impressive Webs IE7のgetElementByIdで起こる問題を避けるためのTIPS集。 How to add a CSS Link programmatically using JavaScript <link>タグをJavaScriptによって動的に作成してCSSを動的に設定するコード例 JavaScript CSS Selector Benchmarks CSSセレクタでDOMにアクセスする際の各フレームワークでの速度ベンチマーク比較 6 Ways To Wor
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ:phpspot開発日誌
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ 2009年08月18日- JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ。 ここ最近で巡回したもので便利そうなチュートリアルを以下にまとめてみました。 沢山あるので使えそうなものだけ覚えておくとよいかもしれません。 Quick Tip ・Resizing Images Based On Browser Window Size ブラウザサイズによって画像のサイズを変えるjQueryチュートリアル Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial 水平サブナビゲーション実現のためのjqueryチュートリアル Making
いげ太のブログ: [JavaScript] イベント上の this をめぐる攻防
this といえば自分自身のインスタンスを参照するもの。OOP に染まったプログラマなら、そう理解しているのが普通だろう。しかし JavaScript において、this の参照先は実行されるコンテキストによって以下のように変化する。 イベント ハンドラ内では、イベントの発生源（イベント ソース）のオブジェクトを参照する。 オブジェクトのプロパティ内では、自分自身のインスタンスを参照する。 ここで重要なのは 1. の方が優先されるってこと。両方が成立する場合、つまりイベント ハンドラにインスタンス メソッドを指定した場合、当該メソッドに出現する this はイベントの発生源を指すということ。 さて注目すべきは、this がイベントの発生源を参照するのは、イベント ハンドラの内だけである点だ。イベント ハンドラから参照されるオブジェクト内では、それは適用されないのである。言い方を変えれば、イ
[Javascript] Prototype.js 1.6.0 - Event.fireでNative DOM Eventを呼び出し可能にする
Javascriptの話題が続いてます。 Changeset 7835 - prototype: Namespace all custom event names to avoid conflicts with native DOM events. 上記Changesetで、Native DOM Eventとの名前衝突を避けるために、コロンで区切るネームスペースが導入された & Native DOM Eventの呼び出しが削除された？ため、Native DOM Eventが呼び出せない。[Javascript] クロージャを利用したイベントリスナの登録のように、クロージャー + 無名関数でイベントリスナを登録すると、スコープの外部から、現在選択中のボックスを取得するとなると、各ノードを走査して調べる事になりますが、これは美しくない。 Prior to this change, Protot
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-finally を使うのはやめよう eval と with は隔離しよう グローバル変数を使うのはやめよう 暗黙のオブジェクト変換に気をつけよう 性能を決める関数で for-in を使うのはやめよう 文字列は累積スタイルで使おう プリミティブの操作は関数呼び出しより速い setTimeout() や setInterval() には文字列でなく関数を渡そう DOM 再描画と再フロー 再フローの回数をでき
JavaScriptの関数 [/dev/nullpo]
することができます。 // 関数を変数に代入 function fuga() { window.alert("fuga") } var f = fuga; f(); // 無名関数を変数に代入 var hoge = function() { window.alert("hoge"); } hoge(); JavaScriptのメソッドは、オブジェクトのプロパティに関数をセットしたものです。 また、関数自身がオブジェクトであるため、普通のオブジェクトのようにメソッドを定義したり、プロパティを付加したりできます。 // 関数fugaがプロパティcountを持っている。 function fuga() { window.alert(fuga.count++); } fuga.count = 0; 高階関数とは、関数を引数にする関数や、関数を戻り値にする関数です。JavaScriptの関数はファー
JavaScriptの巧い書き方 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"private" variables: var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule."; //"private" m
prototype.jsのbind()メソッドは便利。 | Tricorn Tech Labs
昔から買い続けた雑誌や書籍に部屋を侵略され続けて早○年。いい加減部屋を広げなければならないと、一念発起してドキュメントスキャナと裁断機を購入して、せっせと雑誌を裁断 → ドキュメントスキャナでPDF化にいそしんでます。 おかげで今月もAmazonの請求が7万を超えてしまいました。こんにちはtodaです。 さて、最近仕事でJavaScriptを書く機会が増えましたが、PHPなどの（まがりなりにも）クラスベースのオブジェクト指向言語とは似て非なるところが多くて、その挙動の違いに驚かされます。 今回はJavaScriptを書いていて、ハマったポイントとその解決法をを紹介します。 JavaScriptで、あるクラスを作っていて、そのメソッド内でAjax.Reuqest()で通信した結果をオブジェクトの変数に格納したいことがあります。 以下のPersonクラスはコンストラクタで名前を受け取り、身長を
jQueryを使ってクロスドメインのAjax·jQuery CrossDomain MOONGIFT
JavaScriptを使えば画面遷移の少ない、スムーズな操作性を提供できる。いわゆるAjaxなどがそれに相当するが、ドメインを越えて通信できないのが問題だった。幾つかの打開案はあるが、例えばJSONPを使う方法やサーバサイドで取得する方法などがメインになっていた。 検索結果のXMLを並べるテスト これではどちらかのサーバで対応が必要になってしまう。そんな中、殆どをクライアントサイドだけで解決してしまうのがjQuery CrossDomainだ。 今回紹介するオープンソース・ソフトウェアはjQuery CrossDomain、jQueryによるクロスドメインAjaxライブラリだ。 jQuery CrossDomainが使うのはFlashだ。Flashを使って外部ドメインにあるXMLを取得し、それをJavaScriptに返すようになっている。その仕組みをjQueryプラグイン化することで容易に
JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験：JavaScriptの実践的な知識 クライ
「Discover Shiretoko」で使われているWEBデザインの美麗テクニック – ウェビンブログ
おしらせ： サイトの改装を予定してます。 時間がかかりそうなので、このブログも一時的に見栄えが悪くなるかもしれません。そうなったらすみません。 Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語 美しい。 流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。 しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。 北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。 このサイトではWEBデザインの美しいテクニックがあちこちに使われています。 全ては紹介できませんが、取り急ぎ目立つものだけ。 WEBデザインの可能性を広げる、透過PNG このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカル
JavaScriptツール&ライブラリ50選 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Editoria氏がSmashing Magazineにおいて50 Fresh JavaScript Tools That Will Improve Your Workflowのタイトルで50のJavaScriptに関連したツールやライブラリを紹介している(実際には51)。RIA開発においてJavaScriptは重要な地位を占めつつあり、適切な開発ツールやライブラリ、フレームワーク、プラグインを選択することは、迅速で効果的な開発を実現するために欠かせない。紹介されているツールやライブラリは次のとおり。 JavaScriptツール FireUnit (Firebug向けJavaScrip
JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
HTMLの暴走 (meltdown3) - KAZUMiX memo
javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown3.js?'+(new Date).getTime();s.charset='UTF-8';s.id='KM3';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページが暴走を開始します。 ページによってはアニメーションが始まるまでちょっと待たされることがあるかもしれません。 色んなページで遊んでみてください。 アドレスバー貼り付けではなく、リンク動作の実験版 (実験)ブックマークレットをリンク先のページで発動させてみる - KAZUM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker
http://moto-mono.net/2009/07/07/jqueryplugins-i-have-used.html
JavaScriptとDOMによる動的なWebページの作成
S2ファクトリー | Web/アプリ/システム/デザイン/ディレクション
