2006年8月22日 (火)

Yahoo User Interface Library - Yahoo.util.ColorAnimクラス -

先日は、Yahoo.util.Animクラスについて書きましたが、今日はYahoo.util.ColorAnimクラスについて書いてみます。
と言っても、ほとんど同じなんですが・・・。
サンプルは、引き続きこちらです。

Yahoo.util.ColorAnimクラスは、背景色・文字色・枠線の色などを滑らかに変化させる際に使用します。
Yahoo.util.Animクラスから派生していて、使い方も同じです。
var attributes = {
    backgroundColor : {from:'#ffffff', to:'#ff0000'},
    color : {from:'#000000', to:'#0000ff'}
};

var anim = new YAHOO.util.ColorAnim('id', attributes, 0.5);

anim.animate();


違う点は、指定する属性が色に関するものになり、値も16進数での指定となります。

| | コメント (0) | トラックバック (0)

2006年8月20日 (日)

Yahoo User Interface Library - Yahoo.util.Animクラス -

先日、Yahoo User Interface Libraryの単純なエフェクトサンプルを作成してみましたが、今日はクラスの使い方を簡単に書いておきます。

最低限必要なファイルは、yahoo.js、event.js、dom.js、animation.js ですので、まずこれらをインクルードして下さい。

アニメーションに関するクラスは animation.js 定義されていて用途によって幾つかのクラスがあるのですが、基本となるのはYahoo.util.Animクラスです。
Yahoo.util.Anim クラスを使うと、要素の大きさ・位置などCSSで数値として指定できる属性を、指定した時間で徐々に変化させアニメーション することが出来ます。
まず、コンストラクタで、
var attributes = {
    width:{from:10, to:100},
    height:{from:10, to:100},
};

var anim = new Yahoo.util.Anim('id', attributes, 0.5, YAHOO.util.Easing.backOut);
のように指定します。
最初の引数は、変化させる要素のインスタンスまたはIDです。

変化させる属性と値は、attributes のようにオブジェクトで第2引数に指定します。
上の例では、幅と高さが10pxから100pxへ変化します。
fromは必須ではなく、指定しなければ現在の値が適用されます。
toの代わりにby:100とすると、大きさが100pxずつアニメーションのたびに大きくなります。
他に指定できる属性としては、私が試してみたものでは、top、left、borderWidth、fontSizeが可能でした。
DHTMLでスタイルを数値で指定できるものならOKではないでしょうか。
また、ブラウザによって指定方法が異なる透過度は、
opacity : { from : 1.0, to : 0 }
と指定することで、透過をサポートしているブラウザなら動作します。(数値は0から1.0の範囲)

第3引数はアニメーションの開始から終了までの時間で、秒単位で指定します。
この引数はオプションで、指定しなければデフォルトの1秒が適用されます。

第4引数はEasingというもので、例えば物にぶつかってバウンドするように、動きに少し変化をつけることが出来ます。
これもオプションで、指定しなければ変化はつきません。


アニメーションの定義はこれでOKですので、次はアニメーションの実行です。
実行は以下のように
anim.animate();
と、animateメソッドを呼び出すだけです。

ただ、例えば、要素の幅と高さをゼロにした後に要素を非表示にするなど、アニメーションの終了時に何か処理をしたい場合もあると思います。
そのような場合に、
anim.animate();
document.getElementById('id').style.visibility = 'hidden';
としても、思い通りの動きにはなりません。
animateメソッドは、内部ではタイマーを使ってアニメーションを実行しており、アニメーションの終了を 待たずに次の行が実行されてしまうためです。

したがって、終了時に何か処理をしたい場合は、以下のようにonCompleteのsubscribeメソッドを使って終了時の関数を指定する必要があります。
var animCompleted = function(){
    document.getElementById('id').style.visibility = 'hidden';
};
anim.onComplete.subscribe(animCompleted);

anim.animate();

また、サイズを小さくする場合はスタイルで overflow : hidden を指定しておかないと中身より小さくならないため 思い通りの動きになりませんので、注意してください。

| | コメント (0) | トラックバック (0)

2006年8月18日 (金)

Yahoo User Interface Libraryのエフェクトサンプル

先日はFlex2のエフェクトについて書きましたが、DHTMLでも動きのあるページを作ることは出来ます。
そのようなページの作成を補助してくれるJavaScriptライブラリは幾つかありますが、Yahoo User Interface Libraryを使った サンプルを少しご紹介したいと思います。

まずは、こちらからYahoo UI Libraryをダウンロードします。
ダウンロードしたファイルを解凍すると、examples、docs、buildというフォルダがあり、buildフォルダ以下にjsファイルがありますので、 これらを目的に応じてインクルードして使用します。
なお、yahoo フォルダの yahoo.js は常にインクルードしておきます。

エフェクトは、animation フォルダの中の animation.js 内のクラスを主に使用します。
どのようなことが出来るかはサンプルページを実際に見ていただいた方が早いと思いますので、興味のある方はサンプルページを見てみてください。
Yahoo User Interface Libraryのエフェクトサンプル

明日以降、クラスの使い方などを簡単に書いてみたいと思います。

| | コメント (0) | トラックバック (0)

2006年6月11日 (日)

【JavaScript】 イベントリスナーの追加と削除

先日書いたイベントハンドラを追加する方法でも イベントをハンドリング出来ますが、この方法でセット出来る関数は1つだけです。
しかし、例えばObserverパターンのように複数のオブジェクトに対してイベントを通知したい場面も多いと思います。
そういう場合、DOM Level2 Event Modelをサポートしているブラウザをターゲットとしているなら、addEventListener・removeEventListener メソッドを使って以下のようにイベントリスナーの追加と削除を行います。
// イベントリスナー
function targetClicked()
{
    ....
}

var eventTarget = document.getElementById("ex1");
// リスナーの追加
eventTarget.addEventListener("click", targetClicked, false);

// リスナーの削除
eventTarget.removeEventListener("click", targetClicked, false);
しかし、もっともシェアの高いInternet Explorerがこれをサポートしていません。 Internet Explorerには同様の機能としてattachEvent・detachEventというメソッドが用意されていますので、 こちらを使用します。
// イベントリスナー
function targetClicked()
{
    ....
}

var eventTarget = document.getElementById("ex1");
// リスナーの追加
eventTarget.attachEvent("onclick", targetClicked);

// リスナーの削除
eventTarget.detachEvent("onclick", targetClicked);
従って、どちらのブラウザにも対応するには、以下のようにメソッドが存在するかを判別した上で行う必要があります。
// イベントリスナー
function targetClicked()
{
    ....
}

var eventTarget = document.getElementById("ex1");
// リスナーの追加
if(eventTarget.addEventListener){
    eventTarget.addEventListener("click", targetClicked, false);
}else if(eventTarget.attachEvent){
    eventTarget.attachEvent("onclick", targetClicked);
}

// リスナーの削除
if(eventTarget.removeEventListener){
    eventTarget.removeEventListener("click", targetClicked, false);
}else if(eventTarget.detachEvent){
    eventTarget.detachEvent("onclick", targetClicked);
}

サンプルを作成しましたので、実際に動作を確認してみてください。
サンプルページ
IEとFirefoxで比較すると、同様にイベントリスナーが呼び出されますが、呼び出される順序が違う点に注意が必要です。

参考資料
Document Object Model (DOM) Level 2 Events Specification(W3C)
attachEvent Method(MSDN Library)
detachEvent Method(MSDN Library)

| | コメント (0) | トラックバック (0)

2006年6月 9日 (金)

【JavaScript】 DOMのメソッド・プロパティ

JavaScriptからHTML要素にアクセスする時はDOMを使用しますが、私自身がよく忘れるので、そこそこ使用頻度の高いメソッド・プロパティのプチリファレンスを書いておきたいと思います。

Documentのメソッド
Element createElement( tagName[string] )
説明:新しいElementオブジェクトを生成します。
引数:タグの名前を文字列で指定します。
戻り値:新たに生成されたElementオブジェクト
var elem = document.createElement("img");
NodeList getElementsByTagName( tagName[string] )
説明:タグの名前を指定して要素のリストを取得します。
引数:タグの名前を文字列で指定します。
戻り値:該当する要素のリスト。
var elements = document.getElementsByTagName("img");
Element getElementById( id[string] )
説明:id属性を指定して要素を取得します。
引数:id属性値を文字列で指定します。
戻り値:該当する要素。
var element = document.getElementById("ex1");
NodeList getElementsByName( name[string] )
説明:name属性を指定して要素のリストを取得します。
引数:name属性値を文字列で指定します。
戻り値:該当する要素。
var elements = document.getElementsByName("ex1");
Elementのプロパティ・メソッド
string nodeName
説明:要素の名前を取得します。読み取り専用です。
var name = document.getElementById("ex1").nodeName;
string nodeValue
説明:要素の値を取得します。読み取り専用です。
var value = document.getElementById("ex1").nodeValue;
Node parentNode
説明:親要素を取得します。読み取り専用です。
var parent = document.getElementById("ex1").parentNode;
NodeList childNodes
説明:子要素のリストを取得します。読み取り専用です。
var elements = document.getElementById("ex1").childNodes;
Node firstChild
説明:先頭の子要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").firstChild;
Node lastChild
説明:最後の子要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").lastChild;
Node previousSibling
説明:前の要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").previousSibling;
Node nextSibling
説明:次の要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").nextSibling;
string tagName
説明:タグの名前を取得します。読み取り専用です。
Node insertBefore( newNode[Node], refChild[Node] )
説明:このメソッドを使用すると、子要素を挿入する際に、挿入する場所を指定できます。
引数:newNode:挿入する要素、refChild:この要素の前に挿入されます。
戻り値:挿入された要素。
Node removeChild( oldChild[Node] )
説明:指定した子要素を削除します。
引数:削除する子要素。
戻り値:削除された子要素。
Node appendChild( newChild[Node] )
説明:子要素を要素リストの最後に追加します。
引数:追加する子要素。
戻り値:追加された子要素。
boolean hasChildNodes()
説明:子要素を持っているか調べることができます。
戻り値:子要素を持っていればtrue、そうでなければfalse。
Node cloneNode( isDeep[boolean] )
説明:要素をコピーします。
引数:trueを指定するとディープコピーとなり、falseならシャローコピーとなります。
戻り値:新たにコピーされた要素。
void removeAttribute( name[string] )
説明:属性を削除します。
引数:属性名。
string getAttribute( name[string] )
説明:属性の値を取得します。
引数:属性名。
戻り値:属性の値。
void setAttribute( name[string], value[string] )
説明:属性をセットします。
引数:name:属性名、value:属性値。
NodeList getElementsByTagName( name[string] )
説明:タグの名前を指定して、要素のリストを取得します。
引数:タグの名前を文字列で指定します。
戻り値:該当する要素のリスト。
var element = document.getElementById("ex1");
var elements = element.getElementsByTagName("img");
boolean hasAttribute( name[string] )
説明:要素が、指定した名前の属性を持っているかどうかを調べられます。
引数:調べたい属性名。
戻り値:持っていればtrueを返します

参考資料
Document Object Model (DOM) Level 1 Specification (W3C)
Document Object Model (DOM) Level 2 Core Specification (W3C)

| | コメント (0) | トラックバック (1)

2006年6月 7日 (水)

【JavaScript】 イベントハンドラをセットする

要素がクリックされた時の処理を設定したい場合、例えば
<div onclick="hoge();">....</div>
のようにタグの属性で関数を指定することが出来ますが、以下のようにしてJavaScriptからも設定することが出来ます。

function elementClicked()
{
    alert("クリックされました!");
}

document.getElementById("ex").onclick = elementClicked;

また、あらかじめ関数を定義していなくても、

document.getElementById("ex").onclick = function()
{
    alert("クリックされました!");
};

のように、無名関数をセットすることも出来ます。
ページのロードが完了した際の処理も同様に、

window.onload = function()
{
    ......
};

と記述することが出来ます。

| | コメント (0) | トラックバック (0)

2006年6月 6日 (火)

【JavaScript】 動的に要素を変更してみる

HTML要素の参照を取得したら、次は見た目や中身を変更してみましょう。

1.中身を変更する
div・spanなど、HTML要素には中に別の要素が入れ子になっている場合が多いですが、この入れ子になっている中身を変更することが出来ます。

-- HTML --
<div id="ex1">.....</div>

-- JavaScript --
document.getElementById("ex1").innerHTML = "変更後の文字列です";
document.getElementById("ex1").innerHTML = "<b>タグも書き込めます</b>";

何かを実行した時に注意を促すメッセージを表示する場合などに使用できます。

2.見た目を変更する
要素の表示スタイルを動的に変更することが出来ます。
以下は枠線の色を変更するサンプルです。

-- HTML --
<div id="ex2" style="width:100px;height:100px;border:solid 1px black;"></div>

-- JavaScript --
document.getElementById("ex2").style.borderColor = "red";

要素のstyleプロパティ以下には、CSSで定義されている属性と同じ名前のプロパティが用意されていて、これを変更することで表示スタイルを変更できます。
※ CSS属性で、例えばborder-colorなどハイフンで区切られているものについては、JavaScriptではborderColorといった具合にハイフンが無くなり代わりにハイフンの後の1文字目が大文字になるという風になっています。

3.画像を入れ替える
imgタグにはsrcというimgタグ特有の属性がありますが、これらのタグの属性も変更可能です。
以下は、画像を変更するサンプルです。

-- HTML --
<img id="ex3" src="example1.gif">

-- JavaScript --
document.getElementById("ex3").src = "example2.gif";

小さなサムネイル画像をクリックされたら大きな画像に変更する、といったことが出来ます。

| | コメント (0) | トラックバック (0)

2006年6月 5日 (月)

【JavaScript】 要素を取得する

ここ1~2年の間にDynamic HTMLが多くの場所で利用されるようになりました。
Dynamic HTMLは、ページをリロードすることなく要素の外観を変えたり中身の文字を
変えたりすることが出来ますが、変更したい要素を取得しないと始まりません。
そこで、まず最初は、要素(HTML内のタグ)を取得する方法について書きたいと思います。

1.IDを指定して取得する
 HTML内の要素にはIDを付けることが出来ますが、そのIDを指定して要素を取得する方法です。
 まず、以下のようにタグにIDを付けます。
 <div id="test">DIVタグです</div>
 そして、このDIV要素を取り出すJavaScriptは、以下のようになります。

document.getElementById("test")

 試しに、以下のJavaScriptを実行してみてください。
 「DIV」と表示されたらOKです。

alert(document.getElementById("test").tagName);

 ただし、このようにして取得する場合は、複数の要素に同じIDをつけてはいけません。

2.タグの名前を指定して取得する
 "DIV"などのタグの名前で要素の配列を取得することが出来ます。
 配列となっているのは、ページ内にDIVタグがいくつあるかわからないためです。
 
 以下のようなタグがあったとします。
 <div>1つ目のDIVタグです</div>
 <div>2つ目のDIVタグです</div>
 これらを取得するJavaScriptは、以下のようになります。

 document.getElementsByTagName("div")

 Elementsとなっている点に注意してください。
 試しに、以下のJavaScriptを実行すると、

alert(document.getElementsByTagName("div").length);

 「2」と表示されると思います。
 lengthは、配列の数を取得するプロパティです。
 すべての要素にアクセスするには、以下のようにループを使います。

var elements = document.getElementsByTagName("div");
for(i=0;i<elements.length;i++){
    alert(elements[i].innerHTML);
}

| | コメント (0) | トラックバック (0)