「prototype.js解読」とかに比べると、大半の人にはどうでもいい話。。。theater.jsは「JavaScriptでアドベンチャーゲームは作れるか？」という興味から発した、完全趣味の産物です。実用性は乏。。。prototype.js解読終了後、本来の目的であるtheater.js ve…

jsファイルの動的ロードはポピュラーな話題です。私も自分でdocument.writeで書き出したscriptタグが有効なのを見つけたときは驚きました。これを利用してASPのincludeみたいなことができないかなと試行錯誤中ですが、どうも無理がある感じです。。。*1原因…

2008/01/16 追記。v1.6.0で解消。 ここで言及した制限はv1.6.0で解消されています。解決策はやはりオブジェクトをプロパティとして持つというものでした。 【参考】v1.6.0 Hashクラス - Backstage of theater.js 以下保存。 ※v1.5.0に対応しました。 「Hash…

「初級者による」であって「初級者のための」でなく、「解読」であって「解説」ではありません＾＾； と、いきなり逃げ腰で始めた「prototype.js解読」ですが、なんとか最後まで来ることができました。ただ、例えるなら「水泳初心者が、ふと思い立っていきな…

終わった・・・。日を改めてまとめを書きます。。。

absolutizeメソッド および relativizeメソッド 【抜粋】 absolutize: function(element) { element = $(element); if (element.style.position == 'absolute') return; Position.prepare(); var offsets = Position.positionedOffset(element); var top = o…

cloneメソッド(後で上書きされる) 【抜粋】 clone: function(source, target) { source = $(source); target = $(target); target.style.position = 'absolute'; var offsets = this.cumulativeOffset(source); target.style.top = offsets[1] + 'px'; targe…

offsetParentメソッド 【抜粋】 offsetParent: function(element) { if (element.offsetParent) return element.offsetParent; if (element == document.body) return element; while ((element = element.parentNode) && element != document.body) if (Ele…

簡単な定義 要素のoffsetLeftプロパティ 要素の左辺と、offset基準要素の左辺との距離(px) 要素のoffsetTopプロパティ 要素の上辺と、offset基準要素の上辺との距離(px) 要素のoffsetParentプロパティ 要素のoffset基準要素(これが何になるかが問題) ○結論か…

realOffsetメソッド 【抜粋】 realOffset: function(element) { var valueT = 0, valueL = 0; do { valueT += element.scrollTop || 0; valueL += element.scrollLeft || 0; element = element.parentNode; } while (element); return [valueL, valueT]; },…

prepareメソッド 【抜粋】 // must be called before calling withinIncludingScrolloffset, every time the // page is scrolled prepare: function() { this.deltaX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scroll…

とうとう最後のオブジェクトです。ただ、ここの解読は苦労しそうな気がします。。。「http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Position」には仮ドキュメントしかなく、参考資料が少ないです。また、ちょっとテストしてみただけで、…

HTML+JavaScriptで、要素のイベントへの関数登録の方法は、主に以下の３つです。 1. 要素タグのなかに属性(onclick="〜"等)を直接記述する。 【例】 <button onclick="alert('!');">TEST</button> 2. 要素オブジェクトのプロパティへ関数を設定する。 【例】 <button id="test">TEST</button> <script> function func(){ alert("!"); } v…

windowオブジェクトonunloadイベントへのunloadCacheメソッド登録 【抜粋】 /* prevent memory leaks in IE */ Event.observe(window, 'unload', Event.unloadCache, false); windowオブジェクトonunloadイベントへunloadCacheメソッドを登録しています、IE…

stopObservingメソッド 【抜粋】 stopObserving: function(element, name, observer, useCapture) { var element = $(element); useCapture = useCapture || false; if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || el…

findElementメソッド 【抜粋】 // find the first node with the given tagName, starting from the // node the event was triggered on; traverses the DOM upwards findElement: function(event, tagName) { var element = Event.element(event); while (…

【抜粋】一部省略 if (!window.Event) { var Event = new Object(); } Object.extend(Event, { (省略) } });window.Eventがあればそれに対して拡張、なければ新たにオブジェクトを作成してメンバを追加します。window.Eventはブラウザによって実装が異なりま…

Form.Element.EventObserverクラスでは、Form.Element.TimeObserver等とは違い、multipe指定のselectタグでも問題は発生しません。しかし、複数の同名radioやcheckboxを扱えないのは同じです。扱えようになると便利なのですが、そのためにはかなり改造する必…

(ほぼ)はじめてトラックバックいただきました。感謝です＾＾ 励みになります。(最初のトラバはなんだかよく分からないところに反応された；；) http://d.hatena.ne.jp/ululun/20060915 はてなブックマークに登録頂いた方にも感謝いたします。prototype.js解…

【抜粋】 Form.EventObserver = Class.create(); Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { getValue: function() { return Form.serialize(this.element); } }); 前述Abstract.EventObserverクラスを継承しています。…

【抜粋】 Form.Element.EventObserver = Class.create(); Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { getValue: function() { return Form.Element.getValue(this.element); } }); 前述Abstract.EventObserver…

【抜粋】一部省略 Abstract.EventObserver = function() {} Abstract.EventObserver.prototype = { initialize: function(element, callback) { (省略) }, (省略) registerCallback: function(element) { (省略) } } 名前の通り抽象クラスです。継承すること…

前述したように、Form.Element.Observerでは、multiple指定のselectタグが扱えません。根本的な原因は、継承するAbstract.TimedObserverクラスのonTimerEventメソッドで、直前の値と現在の値の比較に、単純に不等号を用いていることです。改修案として、「直…

【抜粋】 Form.Observer = Class.create(); Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { getValue: function() { return Form.serialize(this.element); } }); 前述Abstract.TimedObserverクラスを継承しています。指定フォー…

【抜粋】 Form.Element.Observer = Class.create(); Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { getValue: function() { return Form.Element.getValue(this.element); } }); 前述Abstract.TimedObserverクラスを継…

【抜粋】一部省略 Abstract.TimedObserver = function() {} Abstract.TimedObserver.prototype = { (省略) }, (省略) registerCallback: function(element) { (省略) } } Abstract名前空間に作成されています。名前の通り抽象クラスです。継承することで、な…

【抜粋】 var $F = Form.Element.getValue; 前述Form.Element.getValueメソッドの別名です。 【参考】前述Form.Element.getValueメソッドの例の書き換え function test(element){ var value; if(element.length != null && element.type == null){ value = $…

【抜粋】一部省略 Form.Element.Serializers = { input: function(element) { (省略) }, (省略) selectMany: function(element) { (省略) } } 入力要素(inputタグ等)の名前と値を取得するためのメソッドを備えます。前述Formオブジェクト、Form.Elementオブ…

【抜粋】一部省略 Form.Element = { serialize: function(element) { (省略) }, getValue: function(element) { (省略) } }inputタグ等の入力要素を扱うオブジェクト。Formオブジェクトと違い、form経由でなくても要素を扱えます。 serializeメソッド 【抜粋…

【抜粋】一部省略 var Form = { serialize: function(form) { var elements = Form.getElements($(form)); var queryComponents = new Array(); for (var i = 0; i < elements.length; i++) { var queryComponent = Form.Element.serialize(elements[i]); if…