Andre's garden プログラミングメモ: javascript

ラベル javascript の投稿を表示しています。すべての投稿を表示

2007年12月22日

「名台詞１００＋Flickr」作成時のメモ（JSON）

とりえあず参考リンクのみ

JSON in JavaScript - 実用
 第三章　データを解析し表示しよう：JSONのデータを表示する
 s.h.log: JavaScript - JSONでデータを受信する方法2種類
 [ajax] JKL.ParseXML／ajax通信処理ライブラリ
・安全にjsonを読み込むためのパーサ。
Japan.internet.com デベロッパー - JSONを使ってAJAXベースのアプリケーションを高速化する
・evalは、実際はJavaScriptインタプリタ

JSONの特徴
・javascriptのオブジェクトをテキストで記述するデータフォーマット
・取得した文字列をeval（文字列からJavaScriptコードを実行する関数）で解析。
・<script type="text/javascript" src="xxxxx"></script>でもオブジェクトを取得できる。
xxxxxはjson形式で記述されたテキストへのリンク
・javascriptのサブセット。

参考
Andre's garden: 「名台詞１００＋Flickr」サイドバーに貼れるようにしてみました

2007年12月15日

ウインドウの幅と高さの取得

参考ＵＲＬ
ユーザーのウインドウ表示幅を取得するjavascript - WEBデザイン　BLOG

クロスブラウザ対応

幅だけだったので高さもついでに

var getBrowserWidth = function() {
if ( window.innerWidth ) { return window.innerWidth; }
else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }
else if ( document.body ) { return document.body.clientWidth; }
return 0;
}

var getBrowserHeight = function() {
if ( window.innerHeight ) { return window.innerHeight; }
else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; }
else if ( document.body ) { return document.body.clientHeight; }
return 0;
}

Amazonウィッシュリング（リンク起動）で利用

要素の絶対位置の取得

クロスブラウザ対策

参考ＵＲＬ
anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について

利用時には、元のソースからfunctionを変数に入れ変えて利用しました。

//必要となるGlobal変数の定義
// 間違いのないように全文字列を小文字に変換
var agt = navigator.userAgent.toLowerCase();
var is_ie　 = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);

　//要素のスタイル属性を取得する関数
var getElementStyle = function (targetElm,IEStyleProp,CSSStyleProp) {
　var elem = targetElm;
　if (elem.currentStyle) {
　　return elem.currentStyle[IEStyleProp];
　} else if (window.getComputedStyle) {
　　var compStyle = window.getComputedStyle(elem,"");
　　return compStyle.getPropertyValue(CSSStyleProp);
　}
}//---End Function

var getPosition = function (that) {
　var targetEle = that;　　　//thatは位置を取得したい要素Object
　var pos = new function(){ this.x = 0; this.y = 0; }
　while( targetEle ){
　　pos.x += targetEle.offsetLeft;
　　pos.y += targetEle.offsetTop;
　　targetEle = targetEle.offsetParent;
　　　//IEの補正：上記計算で無視されてしまう各親要素のborder幅を加算
　　if ((targetEle) && (is_ie)) {
　　　pos.x += (parseInt(getElementStyle(targetEle,"borderLeftWidth","border-left-width")) || 0);
　　　pos.y += (parseInt(getElementStyle(targetEle,"borderTopWidth","border-top-width")) || 0);
　　}
　}
　　//geckoの補正：カウントしないbody部border幅をマイナスしてしまうので２倍して加算
　if (is_gecko) {
　　　//以下の部分でbody部を取得し、borderの減算を補正する。
　　var bd = document.getElementsByTagName("BODY")[0];　　//body部を取得
　　pos.x += 2*(parseInt(getElementStyle(bd,"borderLeftWidth","border-left-width")) || 0);
　　pos.y += 2*(parseInt(getElementStyle(bd,"borderTopWidth","border-top-width")) || 0);
　}
　return pos;
}//---End Function

Amazonウィッシュリング（リンク起動）で利用

SWFObject2.0でページのロード後にFlashオブジェクトの再表示を行うには？

Flashオブジェクトを埋め込むときには通常では色々問題があるので以下のサイトを参考にしました。

SWFObject v2.0 ドキュメント日本語訳

SWFObjectというライブラリを使って


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 dynamic embed - step 3</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>

  </body>
</html>

と書けば、Flashは問題なくページ上に表示されます。
上記の例では、htmlがロードされる前にHeadに書いたJavascript宣言（swfobject.embedSWF）からおそらく（？）

１．swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
２．embedSWF内のaddDomLoadEvent→ロード時に走るイベントを定義する関数
３．addDomLoadEvent内でcreateSWFを（Flashオブジェクトを生成する関数）を定義。
４．ページ読み込み後に、onDomLoadイベントが走ってcallDomLoadFunctionsを呼び出す。
５．callDomLoadFunctionsで定義されたcreateSWFが処理される

といった順序で処理が走ります。

ただ、残念なことにロード後にＨＴＭＬを動的に生成して再表示したい場合、embedSWFを呼びだしただけでは上手くいきませんでした。

調べてみるとロード後は、embedSWFを呼んでもcreateSWFが呼ばれないからということがわかってきました。

でもって結構詰まったのですが、色々探してみるとありがたいことに解決策が以下のフォーラムに載っていました。
http://groups.google.com/group/swfobject/browse_thread/thread/c857d29662509809

I've been develeoping with the old swfObject (1.5) and recently
switched over to the new 2.0 beta.
I noticed that you can't embed a flash object after the pages loads as
the embedding with the new version happens only on the onload. Is
there a way to use this JS to replace an existing flash?

SWFObject2.0でロード後にFlashの再表示をする方法はないか？といった内容でまさに知りたいことです。

解決策のソースを書いているエントリ
http://groups.google.com/group/swfobject/msg/0a04ea40128088c2

一部抜粋

The fix is really just the first inserted line. This:
＜元のソース＞
function addDomLoadEvent(fn) {
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}

becomes this:
＜変更後のソース＞

function addDomLoadEvent(fn) {
if (isDomLoaded) return fn(); // if the DOM is already loaded,
trigger directly
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}

ロード済みなら引数（fnはcreateSWFを含む）をすぐ実行するというコードが追加されています。

さらに詳しい比較のコードが別ページに解説されており非常に助かりました。
http://pastie.textmate.org/private/4ftrnrhae7h50nko8k6sg
ここまで詳細に書いてくれていると助かります。

修正したSWFObject.jsを置いときます。
もし、利用してもいいかもと思う方はどうぞ持っていって下さい。（動作保障は自己責任でよろしくお願いします。）
（SWFObject.jsは、MIT Licenseです。）

SWFObject.js

※よくわかってないながらもSWFObject2.0でロード後にFlashの再表示をしたかったので書いてみましたが、よくわかっている人からのいいやり方がありましたらぜひコメント・トラックバックでご指摘下さい。

2007年7月1日

クロージャ(Closure)のメモ

(javascript上での)クロージャの理解のためのサンプル


<html>
<head>
<script laungage="javascript">

var x1 = function() {
 var Y = 0;
 return function(Z) {
  Y += Z;
  return Y;
 }
}

var x2 = x1();//x2は、x2 = function(Z){...}と同じ
var x3 = x1();//x3は、x3 = function(Z){...}と同じ

document.writeln("x2(1)は"+x2(1));//1
document.writeln("x2(2)は"+x2(2));//3
document.writeln("x2(3)は:"+x2(3));//6

document.writeln("x3(1):"+x3(1));//1
document.writeln("x3(2):"+x3(2));//3

x1= function(){return function() {return 1}};
x3 = x1();

document.writeln("x3(3):"+x3(3));//X1()が戻す関数が新しくなったので1

</script>
</head>
<body>
</body>
</html>

※今までvar x2 = x1()をx2 = x1（C#の参照と勘違い）と同じと思っていた。
※x2 = function(Z){...}でわかりやすくなった。
※x1内の関数が入れ代わらない限りローカル変数Yは保持されている。

参考サイト
javascriptを理解するためのたった2つの大切なこと:改
JavaScriptの巧い書き方のコメント内(「関数実行後も内部で定義したデータにアクセス出来る」で検索)

以下はまだ読んでいない
クロージャとOOPとJavaScriptの謎仕様
Martin Fowler's Bliki in Japanese - Closure

Andre's garden プログラミングメモ

ブログ アーカイブ

ラベル