タグ

JavaScriptとsampleCodeに関するmollifierのブックマーク (14)

  • Drawing Graphics with Canvas - MDC

    Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。 <canvas> は 1 つ以上の描画コンテクスト を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。 始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。 function draw() { va

    Drawing Graphics with Canvas - MDC
    mollifier
    mollifier 2009/08/14
    canvasを使って図形を書く。lineTo などを使用する
  • call()を使うと幸せになれた - maru source

    少し前にGreasemonkeyを書いてるときにはまったところがあります。 addEventListenerした関数を手動で呼び出せなくて困ったのです。詳細は以下の日記で。 グリモンを書いてるときにはまったところ - maru source call() で、今日id:mollifierさんから「call()を使うと良いよ」というコメントを頂、mozillaのURLを教えてもらったので早速読んでみました。 https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function/call var result = fun.call(thisArg[, arg1[, arg2[, ...]]]); thisArg Determines the value of this inside fun.

    call()を使うと幸せになれた - maru source
    mollifier
    mollifier 2009/02/24
    func.call() を使う例
  • Using workers in extensions - MDC

    This article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface. If you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: Creating a status bar extension Creating a dynamic status bar extension Adding preferences to an extension Localizing an extensio

    Using workers in extensions - MDC
    mollifier
    mollifier 2009/01/23
    拡張機能でworker threadsを使う方法
  • E4X の変数展開 深追い (1) - てっく煮ブログ

    javascript, asE4X の変数展開が E4Xで変数展開、テンプレート - 素人がプログラミングを勉強するブログ で取り上げられていた。 var foo=123; <>変数fooは{foo}です。.toString(); // "変数fooは123です。" ほー。仕様書ではE4XのリテラルXMLでの式評価 - 0x廃棄階層 - 統治局 によると、仕様書には次のようなコードがあるらしい。 var tagname = "name"; var attributename = "id"; var attributevalue = 5; var content = "Fred"; var x = {tagname} {attributename}={attributevalue}>{content}{tagname}>; // Fred タグ名にも属性名にも属性の値にもタグの中身にも使える

    mollifier
    mollifier 2009/01/22
    E4Xの変数展開 {} でOK。+ とかもOK
  • for 文と無名関数のイディオム - IT戦記

    id:cho45 がチョロっと書いたコードが話題になっている 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech このような書き方は、自分もたまにする。 というわけで、この書き方をする利点を以下の順に解説して見る。 単純な for 文の問題点 with 文を使った解決方法と、その微妙な問題点 無名関数を使った解決方法 単純な for 文の問題点 まずは、以下の HTML に対して <ul> <li>hoge</li> <li>fuga</li> <li>piyo</li> </ul> 以下の JavaScript を実行して var list = document.querySelectorAll('ul > li'); for (var i = 0, len = list.length; i < len; i++) { var node = list[i]; v

    for 文と無名関数のイディオム - IT戦記
    mollifier
    mollifier 2009/01/19
    forループの中でクロージャーを使って変数のスコープを狭くする方法
  • IE8 の DOM のプロトタイプと Getter/Setter API はどうなるか - IT戦記

    ちょっと前に Microsoft 公式に以下のような発表がありました。 Responding to Change: Updated Getter/Setter Syntax in IE8 RC 1 – IEBlog また、以下のようなドキュメントも公開されています。 Internet Explorer for Developers | Microsoft Docs Internet Explorer for Developers | Microsoft Docs これらの内容での概要を自分なりにまとめてみます。 概略 要点は DOM オブジェクトのプロトタイプが使えるようになる DOM オブジェクトに既存の Getter/Setter API が使えるようになる DOM オブジェクトに ECMAScript 3.1 の Getter/Setter API(PropertyDescripto

    IE8 の DOM のプロトタイプと Getter/Setter API はどうなるか - IT戦記
    mollifier
    mollifier 2009/01/16
    Firefoxなどで使える既存のGetter/Setter APIのサンプルコードあり。参考になる。
  • John Resig - JavaScript Getters and Setters

    It is with much happiness that I think I can finally say, without seeming like a fool, that: “JavaScript Getters and Setters are now prevalent enough to become of actual interest to JavaScript developers.” Wow, I’ve been waiting a long time to be able to say that. I want to start by giving a whirlwind tour of Getters and Setters and why they’re useful. Followed by a look into what platforms now su

    mollifier
    mollifier 2009/01/15
    アクセッサ(get, set)について
  • マイミクのページから直接「足あと」を消せる、グリースモンキー - IT戦記

    はじめに mixi の足あと機能がパワーアップしましたね! 「足あと」の機能改善においては、ページデザインのリニューアルと同時に、「マイミクシィ」(友人)の表示に加えて、これまで足あとページでは分からなかった「マイミクシィのマイミクシィ」(友人友人)についても、アイコンが表示されるようになりました。これらの機能改善により、自分のページを訪れたユーザーとのつながりが、今まで以上に分かりやすくなります。 また、新機能「自分の足あと」の提供により、自分が訪問した先(プロフィールや日記など)のユーザーのニックネームを、時系列で最大30件表示いたします。なお、意図しないユーザーのページへ訪問してしまったときのために、相手の足あとページから自分の足あとを削除できる機能*1を追加しています。 株式会社ミクシィ どうやら 自分の足あとを削除できるようになったみたいですね! ただ この機能、便利なんですけ

    マイミクのページから直接「足あと」を消せる、グリースモンキー - IT戦記
    mollifier
    mollifier 2009/01/05
    E4Xのサンプルコード。リテラルとしてE4Xを記述し、ユーザ名などを置換し、innerHTMLで代入、というのを一気にやっている。参考になる。
  • Born Geek » Firefox Extensions & Tutorials

    mollifier
    mollifier 2009/01/05
    ツールバーのサンプルコードあり
  • XUL Event Propagation - Archive of obsolete content | MDN

    はじめに XULイベントは、以前の XULNote でかなり一般的なやり方が紹介されました。 しかし、XUL でイベントを効果的に使用するには、イベントが発生し、聞きとられ、処理される、実際の過程を意識しなければなりません。 併せて、この過程は XULイベントモデルとして参照されます。 このイベントモデルは、複数のXULファイルを合わせて単一のインターフェースに、さらに振る舞いを XULウィジェットにつなげることを可能にするものです。 というのも、ユーザーのアクションをつかまえて、インターフェースで対応するアクションに翻訳するのはイベンドだからです。 次のイメージは、様々なイベントモデルの役者たちがどのようにお互いでやりとりするのかについての、とても基的な方法を示しています。 ユーザーはインターフェース上のボタンをクリックします。このボタンはユーザーのアクションに反応してイベントを起こし

    XUL Event Propagation - Archive of obsolete content | MDN
    mollifier
    mollifier 2009/01/05
    XULのイベント処理について。サンプルコードあり。
  • JavaScript OOP におけるクラス定義方法 - IT戦記

    クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか? プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler

  • getElementsByTagNameの結果のNodeListはソートされていることに気づいた - hagino3000's blog

    getElementsByTagName Returns a NodeList of all the Elements with a given tag name in the order in which they are encountered in a preorder traversal of the Document tree. Document Object Model Core 書式 elements = document.getElementsByTagName(name) * elements は、ツリーに現れる順に並べられた、見つかった要素の生きた NodeList です。 * name は要素の名前を表す文字列です。特殊な文字列 "*" は全ての要素を表します。 document.getElementsByTagName - MDC これに気がつくまで、getElem

    getElementsByTagNameの結果のNodeListはソートされていることに気づいた - hagino3000's blog
    mollifier
    mollifier 2009/01/03
    getElementsByTagNameで取得するノードの順番について。サンプルコードあり。参考になる。
  • 本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記

    第1回 そろそろ気で学びませんか? | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない(と思う)。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn

    本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
    mollifier
    mollifier 2008/12/29
    YAHOO UI LibraryとjQueryでのサンプルコードあり
  • 2008-12-15

    RDFデータソースの使い方について簡単にまとめてみました. RDFデータソースはFirefoxでデータを扱う上で重要な要素で, ブックマークや履歴など様々な場所で利用されている. XUL の tree 要素を使用する場合にはほぼ必須です. RDFについて RDFは, subject ----> [predicate(property)] ---> target という関係を表す. これをトリプル (triple) と呼ぶ. rdf/xmlで表すと, <subject> <predicate>target</predicate> </subject> とか, <subject predicate="target" /> とか. subjectにはリソースの場所を表すためのURIが必要. URI には, URL や URN などが用いられる. <subject rdf:about="urn:h

    2008-12-15
    mollifier
    mollifier 2008/12/15
    RDFデータソースの使い方について。rdfファイルの書き方、XPCOMからのアクセス方法など。参考になる。
  • 1