サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
susie-t.hatenadiary.org
question:1178848515の回答の修正です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head> <script type="text/javascript"> /** * スタイル値取得関数 * elemID : 対象要素ID * IEStyleProp : IE用CSS属性名(aaaBbb形式) * CSSStyleProp : その他用CSS属性名(aaa-bbb形式) */ function getElementStyle(elemID, IEStyleProp, CSSStyleProp){ var elem; if(typeof(elemID) == "string"){ elem = document.getElementById(elemID); }else{ elem = elem
はじめに 「初級者による」であって「初級者のための」でなく、「解読」であって「解説」ではありません^^; prototype.jsを使ってみようと思ったのですが、中で何をやっているかは知っておきたいというのと、今後の参考になるかと思い、ここ数日で解読してみました。その確認のために書いていこうと思います。 このため、何ができるかではなくて、何をやっているかが主な内容となります。使い方については以下のサイトを参照してください。 http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html 前提条件 JavaScriptのオブジェクト指向プログラム言語としての側面について理解しておく必要があります。以下のサイトを参照してください。 オブジェクト指向プログラム言語としてのJavaScript 2007/01/22追記。 以降の解読はこの
よく分かっていない部分もありますが、備忘録としてメモします。 XMLHttpRequestオブジェクトのresponseTextプロパティは、(ほとんどのブラウザで)デフォルトでは文字コードUTF-8とみなされます。が、ブラウザよって違いはありますが、他の文字コード(shift_jis, EUC-JP等)を扱うこともできます。この点については以下が詳しいです。 http://jsgt.org/mt/archives/01/001221.html?1155011082951 (2006/08/09追記。初歩的な質問をコメントさせていただいたのですが、お答えいただきました。感謝。) ただ、ローカルで試すと文字化けしました。これはブラウザが、データのヘッダ情報により文字コードを判断しているためではないかと思います。(Webサーバ経由でない)ローカルファイルだとヘッダ情報はつけられませんので、UT
jsファイルの動的ロードはポピュラーな話題です。私も自分でdocument.writeで書き出したscriptタグが有効なのを見つけたときは驚きました。 これを利用してASPのincludeみたいなことができないかなと試行錯誤中ですが、どうも無理がある感じです。。。*1 原因の一つに、document.writeされたscriptタグの実行順序の問題があります。これはつまり、ページに書き込まれたタグの順番なわけですが、これがブラウザによって違う場合があるのです。 以下、サンプル。 [test.htm] <html> <head> <title></title> <script src="test1.js"></script> <script src="test2.js"></script> </head> <body onload="document.getElementById('tes
※FirefoxのBODY枠線問題に対応しました。 【関連】 Positionオブジェクト(1) - Backstage of theater.js Positionオブジェクト(3) - Backstage of theater.js offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js prototype.jsのPosition.cumulativeOffset、Position.positionedOffset、Position.pageメソッドは、対象要素の上位offsetParentに枠線幅があると、正しく値を取得できない場合があります。これは、要素のoffsetTop/LeftプロパティがoffsetParent側の基準を枠線内側においている場合があり、このためメソッド処理中の各offsetTop/Left累
Ajax.Requestでのフォームデータ送信サンプルを載せておきます。ポイントはForm.serializeメソッドです。これがフォーム内容をpostBodyプロパティに適合した文字列に変換してくれます。 [test.htm]UTF-8で記述 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script language="javascript" src="./prototype.js" charset="utf-8"></script> <script language="javascript"> function test(fm){ new Ajax.Request('test.jsp', { method : 'post', pos
question:1169003191 で回答したものです。 <html> <head> <title></title> <script> var fso = new ActiveXObject("Scripting.FileSystemObject"); var path = "C:\\text.txt" function readFile(){ if(!fso.FileExists(path)){ alert("ファイルが存在しません"); return false; } var textObj = fso.OpenTextFile(path, 1); document.getElementById("edit").value = textObj.ReadAll(); textObj.Close(); } function writeFile(){ var textObj = fso.
2007/12/19追記。onExceptionオプションを追加しました。例外発生時の処理も変更しています。 2007/12/03追記。Opera9.24に対応しました。 以前書いたように、IE7ではローカル環境でAjaxが使えません。今まで使えたのに・・・。 拙作theater.jsはprototype.jsを使用しているとはいえ、Ajax関連は未使用です。けど、readmeでwikiのソースをそのまま使うためにAjax.Requestを使ってました。これがIE7だとまったく読めなくなります。 で、隠しフレーム通信に再登場願います。昔、Ajaxのなかった頃、ユーザーの注文に対して一日悩んだ挙句自力でこの方法を編み出すも、直後に持っていた本に載ってるのが発覚して凹んだことはすでになつかしい話・・・。 Ajax.Requestからの移行を容易にするために、インターフェースを似せてみます。 <
【抜粋】 var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } 構造解析 createメソッドは、自オブジェクトのinitializeメソッドを呼び出す無名関数を返却します。つまり、以下の2つは同じ意味です。 【例】 var Test = Class.create();【例】 var Test = function() { this.initialize.apply(this, arguments); }initializeメソッドは個別に追加する必要があります。具体的には以下のようにします。 【例】 var Test = Class.create(); Test.prototype = { initialize : function(arg)
自分なりのまとめです。 【他、参考となるサイト】 http://d.hatena.ne.jp/keyword/%a5%af%a5%ed%a1%bc%a5%b8%a5%e3 http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs03/ajaxjs03_03.html http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs03/ajaxjs03_04.html 内部関数 関数内で更に関数を定義することができます。 function test(test_str){ function sub(sub_str){ alert(sub_str); } sub("TEST:" + test_str); } test("!!!"); //「TEST:!!!」と表示される。 //←ここでsub("!!!");とはできない。 関数
実現のためのコードはいたってシンプルです。以下のようにします。 var imgObj = new Image(); imgObj.src = "sample1.jpg"; JavaScriptでImageオブジェクトのsrcプロパティに画像アドレスを設定すると、その時点でブラウザが画像をダウンロードするのを利用しています。 以下は引数に画像アドレス配列を渡すと、一括して先読みしてくれる関数です。 function preload(imgs){ for(var i = 0; i < imgs.length; i++){ var imgObj = new Image(); imgObj.src = imgs[i]; } } preload(["sample1.jpg", "sample2.jpg", "sample3.jpg"]); ・・・が、これだけでは先読みの終了どころか、本当に先読みして
常識かもしれないけど、初めて知ったのでメモ。 http://q.hatena.ne.jp/1179461074 で回答した際、グローバル宣言の関数ならwindow["関数名"]でアクセスできることを利用しました。 function test(str){ alert(str); } window["test"]("!!!"); ここで疑問が。「test」という名前を、「onload」にしたらどうなるのだろう・・・。 function onload(str){ alert(str); } window["onload"]("!!!"); 通常、windowオブジェクトのonloadプロパティは、ページ読み込み直後に実行される関数を設定する場所です。 結果は・・・。 IE、Opera 「!!!」が一回表示されるだけ。 Firefox 「!!!」の表示後、「[object Event]」が表示され
【抜粋】一部省略 Ajax.Responders = { responders: [], (省略) dispatch: function(callback, request, transport, json) { this.each(function(responder) { if (responder[callback] && typeof responder[callback] == 'function') { try { responder[callback].apply(responder, [request, transport, json]); } catch (e) {} } }); } }; Object.extend(Ajax.Responders, Enumerable); Ajax.Responders.register({ onCreate: function()
簡単な定義 要素のoffsetLeftプロパティ 要素の左辺と、offset基準要素の左辺との距離(px) 要素のoffsetTopプロパティ 要素の上辺と、offset基準要素の上辺との距離(px) 要素のoffsetParentプロパティ 要素のoffset基準要素(これが何になるかが問題) ○結論から先に見たい方は>>こちら<<○ いままで、なんとなくoffsetTopやoffsetLeftを使っていました^^; これらは「ページ上の要素の位置」を格納してると思って。しかし、よくよく調べてみるとそれは誤りであり、かつかなり複雑でややこしいプロパティであることが分かってきました。*1 もともと、(ここでは述べませんが、offsetHeightとoffsetWidthも含め)offset〜のプロパティはIEがVer5で独自に実装したものらしく、その後他のブラウザが追随して実装したようです
HTML+JavaScriptで、要素のイベントへの関数登録の方法は、主に以下の3つです。 1. 要素タグのなかに属性(onclick="〜"等)を直接記述する。 【例】 <button onclick="alert('!');">TEST</button> 2. 要素オブジェクトのプロパティへ関数を設定する。 【例】 <button id="test">TEST</button> <script> function func(){ alert("!"); } var elem = document.getElementById("test"); elem.onclick = func; </script> 3. 要素オブジェクトのaddEventListenerメソッドまたはattachEventメソッドを使用する。 【例】 <button id="test">TEST</button>
前回最後にHashクラスに言及したので見てみます。 【抜粋】 function $H(object) { return new Hash(object); }; var Hash = Class.create(Enumerable, (function() { if (function() { var i = 0, Test = function(value) { this.key = value }; Test.prototype.key = 'foo'; for (var property in new Test('bar')) i++; return i > 1; }()) { function each(iterator) { var cache = []; for (var key in this._object) { var value = this._object[key];
前回最後にHashクラスに言及したので見てみます。 【抜粋】 function $H(object) { return new Hash(object); }; var Hash = Class.create(Enumerable, (function() { if (function() { var i = 0, Test = function(value) { this.key = value }; Test.proto…
【抜粋】一部省略 var Hash = { _each: function(iterator) { for (key in this) { var value = this[key]; if (typeof value == 'function') continue; var pair = [key, value]; pair.key = key; pair.value = value; iterator(pair); } }, (省略) inspect: function() { return '#<Hash:{' + this.map(function(pair) { return pair.map(Object.inspect).join(': '); }).join(', ') + '}>'; } }いわゆる連想配列を扱うクラスです。Hashクラスも、Enumerableクラスと同
このページを最初にブックマークしてみませんか?
『Backstage of theater.js』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く