Dom
前回の戦略に沿って、コードを書いてみた。サンプルの初期画面は以下。 戦略通りに、テキスト入力フィールドには、グレーで入力ガイドを書いている。 以下のスクリーンショットは、入力途中でバリデーションがかかったところ。 入力して、次の入力フィールド…
地味ーに、バリデーションのコードを書いてきたが、超簡単にフォーム入力＆バリデーション（入力検証、入力制限）＆サブミットできるとうれしい。コンセプトは、 フォームに（簡単なルールで）inputタグを書くと、自動的にバリデーションがくっついて、サブ…
class名より、要素をオブジェクトとして抽出するメソッド。 引数として、親要素、ルート要素を指定できる。getElementByIdの拡張といえるが、getElementsByClassName とあるように、戻り値はArrayになる。 （getElementByIdの場合、該当する先頭要素のみが戻…
このページでは、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要素のハンドリ…
