他のライブラリや、自分のコードと共存させるときは、これらの名前と衝突しないように気をつける必要があります。同じ名前を使ってしまうと、コードがロードされた順番によって挙動が変わる、というようなわかりにくい問題が発生してしまう場合が出てきます。 オブジェクト、クラスの使われ方 ライブラリ内では、上記の名前空間は大きく分けて以下のような使われ形をしています。 その下に別のオブジェクトを入れるための親名前空間として使う Class.create()を使って Prototypeライブラリ風のクラスとして定義する Object.extend()を使って他のクラス、オブジェクトから継承されることを前提とする関数を集める コードを簡潔に記述する為に短い名前の関数として使う 特に、Object.extend()を使って継承を実現している箇所が多く、最終的にどのオブジェクト・クラスにどのメソッドが定義されてい
prototype.jsで右クリックメニューを独自に作れるJSライブラリ「Proto.Menu」 2007年08月27日- Proto.Menu :: prototype based context menu Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page prototype.jsで右クリックメニューを独自に作れるJSライブラリ「Proto.Menu」。 次のような独自の右クリックメニューを簡単に作ることが出来ます。 使い方は、必要なJavaScript/CSSファイルを読み込んだ後、次のようなコードを書くだけです。 // メニューを定義 var myLinks = [ {name: 'Back', callback: fu
ソース読みの準備 本連載ではこれまで、JavaScriptの特徴的な記法をいくつか紹介してきた。そろそろ世に広まっているJavaScriptライブラリのソースコードを読み解いていくことができるはずだ。 今回からは、少し趣向を変えて、JavaScriptライブラリをいくつか挙げながら、ライブラリ利用方法と、その動作メカニズムについて紹介していこう。 今回は、prototype.jsにフォーカスする。現在のJavaScript人気の立役者といっても過言ではないprototype.jsだが、その中身はどうなっているのだろうか。ソースコードを読みながら、メカニズムはもちろん、JavaScript的なコードスタイルも学んでいきたい。 まずはソースコードを読むための環境を整備しよう。prototype.jsは、作者であるSam Stephenson氏が提供するサイトから取得できる。現在の安定最新バージ
javascriptのprototypeはなかなか理解してもらえないですねぇ。 ここ1年間でマジマジと実感しました。 特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて(ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。 そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。 ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘 prototype.jsのソースコードを眺める Array.mapとかEnumerable, Hashは勉強になりますねー。 ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。 var
このドメインを購入する。 hawklab.jp 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
このドメインを購入する。 hawklab.jp 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
仕事で使おうと思って作ったら意外といい出来だったので公開してみる。 だうそろーど たとえば、こう書くと var element = $('block'); var planner = new EffectPlanner( [ { Move: [element, {x: 200, y: 200}] }, { Move: [element, {x: 0, y: 300}] }, { Move: [element, {x: 300, y: 0}] }, { Move: [element, {x: 0, y: -300}] }, { Move: [element, {x: -300, y: 0}], next: 1 } ] ); planner.start(); こうなる http://sample.ecmascript.jp/20060523-00.html たとえば、こう書くと var col
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。 ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。 しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。 JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。 そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。 今回は、 Prototype.js を読むために必要な知識を
さてここから、実際にAjaxアプリケーションの制作に入っていきたい。まず今回は、フォトアルバムで画像を表示する際のフレームとなる部品を作る。サンプルを見てみよう。 リンクをクリックすると、まず写真風のフレームがフェードインで表示され、画像自体はロードが完了してからフェードインする。このサンプルではXMLHTTPRequestを使っていないが、イベントやローディングをJavaScriptで制御しながら、ユーザーにはそれを感じさせないなめらかなインターフェイスを与えるこのようなアプローチは、まさにAjaxの発想だ。 今回のサンプルを試してみるために、まずはPrototypeとscript.aculo.usのソースをダウンロードする必要がある。現在Prototypeは1.3.1、script.aculo.usは1.0が正式リリースされているが、本連載では開発バージョンであるPrototype 1
This is a bugfix release that bumps script.aculo.us to version 1.9.0. Most importantly, the included Prototype 1.7 provides performance and compatibility improvements with the latest browsers. One other fix is includes, that makes the script.aculo.us loader work better if you use script tags in the BODY of your page. Download at http://script.aculo.us/, or grab/fork the source at http://github.com
実践 prototype.js [2] 中にある、ひげぽんさんの疑問の解決法を思いついた。 //この方法では引数が渡せない function Hoge(){ Hoge = Class.create(); Hoge.prototype = (new HogeBase).extend({ initialize : function(){...}, ... }); return new Hoge(); } 困ったのは最後の return new Hoge() である。これでは引数が渡せない。new がなければ Hoge.apply(Hoge , arguments) とか出来るのに。 しょうがないので eval を使って解決した。 //この部分は最初に読み込ませる Function.prototype.createInstance = function(){ var strArgs = 'new
以下mixi日記の転載、僕みたいにprototype.jsってなんだよ?と焦ってる忙しい人向けの清涼剤エントリのつもり。今週は9連休なので、やる気があります(謎) 参考にさせてもらったprototype.jsに言及された方のコメントに書いてあった通り、「便利で適度にコンパクトで素敵」というのが最大の特徴。jakarta commonsみたいに、その気になれば30分もあれば十分に読めるのが魅力でこういうライトなライブラリは好きです。 最近、Ajax系のフレームワークが出ていて、すごく気になってたけど、ことprototype.jsに限って言えば、別に使わなくてもさして不利益にもならないことがわかったので安心した。ただし、このレベルのJavaScriptを書ける人は少ないよなぁ。JavaScriptのウザイとこ=本質をコンパクトにまとめている感じなので、オブジェクトのスコープとかthisの使い方
かなりターゲットの狭いTips。役に立たない。 prototype.jsというRuby on Railsなんかのフレームワークで使われている有名なJavaScriptのライブラリがあって、これが色々と使えそうな処理を綺麗に詰め込んであり、デファクトスタンダート的な地位を確立しているのだけれど、ちょっと微妙だなーと思うところがあって、それはObject.prototypeを拡張してしまう点。 実際の弊害はこういう。 http://d.hatena.ne.jp/nazoking/20050425/1114374966 要は連想配列として使うときに困るって話。 多分prototype.jsはJavaScriptの側でロジックを組むことをあまり想定していないため、この辺の問題にあんまり配慮していないのではないかと思うのだけれど、とりあえず無理やり回避する方法を思いついたので書いてみる。 http:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く