2008-10-01から1ヶ月間の記事一覧
YUIのAnimationを呼んでいると、Easing Methodという言葉が出てくる。 とても、訳しずらいので、今後、そのままeasingと呼ぶが、ようするにAnimationの終端の扱いのことらしい。 YAHOO.utilにEasingというオブジェクトがあって、そのAPIドキュメントをみると…
Animation Exampleの最初（Basic)は、とてもシンプルなサンプル。runボタンを押すと、矩形が短くなって消えてしまうというもの。ソースコードは以下。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> #demo { background:#ccc…</meta></meta></head></html>
サイトのナビゲーション通りに進み、いよいよYahooアニメーション(Animation)のサンプリングに入る。AnimationのトップページのGetting Startedをみると、以下のjsファイルを読み込めと書いてある。 <script src="scripts/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"> </script>
このページでは、DOM APIのおさらいと追加がまとめられている。DomのAPIについては、APIドキュメントを参照だが、下の表にあるように便利そうなDOMハンドリングの関数が並んでいる。 YAHOO.util.Dom.get("id_name")は、id名一発で要素を取得するメソッド。 Y…
このサンプルは、赤い矩形のX座標（left）とY座標（right）をとるところで、getXYを使い、小さい青い矩形の座標をそれにセットする。このセットのときにsetXYを利用する。 このイベントハンドラーは、「実行」ボタンのクリックイベントに仕込んでおく。サン…
YUI DOMのExampleのページのサンプリングを開始。 開いてみると、setXYとか、さっきサンプリングしたものばかり。 慣れるためにもう1回やってみることにする。サンプルは、クリックイベントの位置に矩形が飛んでくるという代物。HPで紹介されているコードだ…
YAHOO.util.Dom.removeClass('element','classnames')は指定したelementのクラス属性を削除するためのメソッド。（elementの部分はobjectでもよい）サンプルコードは以下。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> </meta></meta></head></html>
YAHOO.util.Dom.addClass('element','classnames')は指定したelementのクラス属性を増やすためのメソッド。（elementの部分はobjectでもよい）サンプルコードは以下。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> </meta></meta></head></html>
YAHOO.util.Dom.hasClass('element','classnames')は、指定したelementが、クラス要素として'classnames'（複数指定するときは、'−’の中にスペース区切りで指定）を持っているかどうかを調べる。戻り値は、boolean。サンプルコードは以下。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Aja…</meta></meta></head></html>
一見、DOM Using getXYのサンプルと同じにみえるが、こちらのサンプルでは、大きいほうの矩形（赤）のスタイルから、背景色（赤い）取得し（この際にgetStyle()を用いる）、小さい法の矩形（青）の背景色に適用する。このサンプルページにも One of the bene…
青い矩形の透過度を0.5（50%）に設定するサンプル。 先にやったものとほぼ同じである。ソースコードを除いてみると、styleの設定に関して、次のような但し書きがかいてある。 /*margin and padding on body element can introduce errors in determining ele…
DOMのトップページからサンプリングしていく。まず、YUIのDOM機能を利用するには、以下の２つのjsファイルを読み込む。 <script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" > </script> <script type="text/javascript" src="scripts/yui/dom/dom-min.js" > </script> 以下、DOMの座標（x=left、y=top; pix）の参照と変更、スタイルの変更の例が書いてあるので、まとめて以下のコードでサン…
今更なのだが、DOMのトップページの右側にCheatSheet（カンペのこと）というのがあるのを発見。 見てみると、APIドキュメントが一表にまとめられている。 API Documentも下の通り、JavaDocのような立派なものが公開されていて、YUIというコミュニティーの統…
Eventが一通り終わったので、DOM（Document Object Model）にはいる。Ajaxでは、このDOMプログラミング＋CSSが基本、これに動きを加えるために、Eventやリスナといったものが存在する。「動き」を具現化するものをイベントハンドラー（Event Handler）と呼ぶ…
DOMの座標の次は、Viewpointについてちらりと書かれている。 Viewpointは聞かない言葉だが、ググッて調べてみると、iPhoneとiTouchに乗っているsafariのmeta要素らしい。 iPhoneとiTouch用の話なので、興味は惹かれるが、先に進む。次はclass要素のハンドリ…
Eventのトップページを見てて、Dependency Configuratorというのがあるのに気がつかなかった。（下）何かと思ったら、ほしかったもの。 YUIはjsファイルが分かれてるから、使う機能で読み込ませるjsファイルが違う。 使おうと思って、さて何を読み込んだらい…
そういえば、先の投稿時にevtと書いて気がついたのだけど、ブラウザーはFireFox3を使っている。 IEは使っていません。そういえば、の追加なのだけど、Exampleばかりに目が行っていたら、Eventのトップにも基本事項が書いてあることを見逃していた。基本の基…
YUIのサンプリングをして、ちょこっと感じたのが、JavaScriptそのものの記法に似ているということ。ここまで、YUIのEventをみてきたが、「普通のJava Scriptのイベント、リスナー」について復習しておく。 かつてお世話になった、大御所古籏一浩さんの「Java…
次は、window.onloadの拡張。Using onAvailable, onContentReady, and onDOMReadyの序文を読んでなるほどね。 Windowのonloadイベントは、すべてのオブジェクトが用意万端整ってから発生するけど、それだと、重たい画像なんかを貼るときは、処理が待ちきれな…
昨日は、ソースコードの全文を書いてみた。 次はCustom Eventを朴訥にやってみる。この中のView example in new window.を開くと、ブラウザの「ソースコードの表示」でhtmlのソースが見れるのを発見。 なーんだ。というところだが、眺めていても得るものはな…
YUIのEvent UtilityのExamle4はEvent Delegation。Event Delegationとかいう名前だと、一般的な用語かと思ってググッてみるが、Java関連で出てくるのみ。awt関連（自分はJavaEEの人だから、むかーしかじった程度）の記事に「イベント処理をListnerを仕込んで…
ガイダンス通りにEventからはじめることにする。 YUI2.6.0をダウンロードしてきて、Build下を、apache(2.2.9)のDocument Root配下にscripts/yuiというディレクトリを切って入れた。 EventのGet Startedに、 yahoo-min.js event-min.js を使えと書いてある。 …
２年前は、フレームワークのVer3と、PHP（Ver5が出たばかり）でちゃちゃっとアプリを作る、というのをやっていた。 ちょうど、Ajaxが流行りはじめた頃で、サンプリングしていたから、それをSubversionから引っこ抜いて、見るとYUI(Yahoo User Interface)のバ…
ほぼ、2年ぶりにプログラムをしてみることにした。 このログは、その覚書き用。すぐ忘れちゃうので。
