| Project Home(Google Code) | DEMO | ChangeLog | License |
| Index | Document | Selector | Module | Glossary |

README > INDEX > DOCUMENT
Mixin | Detect | Iteration | Node | OOPClass | CSSClass | Attribute | CSS | Element | ViewPort | Module | Event | Ready | Request | Utility | Log | CrossBrowser | SystemGlobalInstance |

Mixin - Object/Hash/Arrayの混合

オブジェクトに別のオブジェクトを混ぜ込みます。

uu.mix は uupaa.js で最も多用される関数です。

  1. Hash に別の Hash を混ぜ込み、データの追加と更新ができます。
  2. Hash のクローンを作成できます。
  3. インスタンスにオブジェクト(データやメソッド)を混ぜ込み、機能を拡張(Mixin)できます。
  4. デフォルト引数の解決や補完ができます。
uu.mix - Object mixin - オブジェクトのミックスイン

uu.mix(base, flavor, aroma = undefined) は、 base に flavor と aroma を混ぜ込み、base を返します。

base と flavor, base と aromaに同じ index がある場合は、base の値を flavor や aroma の値で上書きします。

 @param Hash/Array base    - ベース要素の指定です。
 @param Hash/Array flavor  - baseに混ぜ込む要素の指定です。
 @param Hash/Array [aroma] - baseに混ぜ込む要素の指定です。デフォルトはundefinedです。
 @return Hash/Array - ミックス後のbaseを返します。

uu.mix はオブジェクトの継承や、Hash の結合で活躍します。

Run 
var base = uu.mix({ a: 0 }, { a: "a", b: 1 }); // { a: 0 } が { a: "a" } で上書きされる
uu.log(base); // { a: "a", b: 1 };

Hash のクローンを作成することもできます。

var org = { a: 1, b: 2 };
var clone = uu.mix({}, org);
uu.log(org === clone); // false

org.a = 2828
clone.a = 2929

uu.log(org.a);    // { a: 2828, b: 2 }
uu.log(clone.a);  // { a: 2929, b: 2 }
uu.mix.param - Object mixin for parameters - パラメタのミックスイン

uu.mix.param(base, flavor, aroma = undefined) は、 base に flavor と aroma を混ぜ込み、base を返します。

base と flavor, base と aroma に同じ index がある場合は、base の値を flavor や aroma の値で上書きしません。

 @param Hash/Array base    - ベース要素の指定です。
 @param Hash/Array flavor  - baseに混ぜ込む要素の指定です。
 @param Hash/Array [aroma] - baseに混ぜ込む要素の指定です。デフォルトはundefinedです。
 @return Hash/Array - ミックス後のbaseを返します。

uu.mix.param は与えられた引数と、デフォルト引数を結合する処理で活躍します。

Run 
var base = uu.mix.param({ a: 0 }, { a: "a", b: 1 }); // { a: 0 } が { a: "a" } で上書きされない
uu.log(base); // { a: 0, b: 1 }

Detect User-Agent and Functions - ブラウザと機能の判別

ブラウザの判別や、微調整に必要な情報を提供します。

uu.ua - Detect User-Agent and Functions - ブラウザと機能の判別

uu.ua(info = "")は、ブラウザの判別と、機能の有効/無効情報を返します。

 @param String info - ブラウザ名, ブラウザの描画エンジン名, 機能名の指定です。
                      大小文字を区別しません。
 @return Boolean/String - infoで指定したブラウザで動作しているか、機能が使用可能な場合にtrueを返します。
                          infoを省略した場合は、ユーザエージェント文字列を返します。
                          versionを指定するとバージョン番号を返します。
infoに指定可能な文字列と戻り値の一覧
infoReturn
戻り値
uu.ua("")ユーザエージェント文字列を返す
uu.ua("opear")Opera9+ で true
uu.ua("ie")Internet Explorer6+ で true
uu.ua("ie6")Internet Explorer 6 で true
uu.ua("ie8")Internet Explorer 8 で true
uu.ua("gecko")Firefox 2+ で true
uu.ua("webkit")Webkit(Safari3+, Konqueror, Chrome) で true
uu.ua("ipod")iPod/iPhone(Safari) で true
uu.ua("wii")Wii Internet channel(Opera9.5) で true
uu.ua("air")Adobe AIR で true
uu.ua("std")描画モードがスタンダードモードならtrue, IE6ではDTDを指定するとtrueになる
uu.ua("firefox3")Firefox 3 で true
uu.ua("opera95")Opera 9.5+ で true
uu.ua("v8")Google Chrome で true
uu.ua("minclock")setInterval(), setTimeout() 最小分解能(単位ms), GeckoとV8は10ms, その他は16msとなる
uu.ua("domrange")DOM Level2 Range Module が使用可能で true
uu.ua("display:table")Safari3, Firefox2, Opera9, IE8 で true, それ以外で false
uu.ua("version")ブラウザ(描画エンジン)のバージョンやビルド番号

if (uu.ua.gecko) { ... } のようにuu.ua以下のプロパティを直接参照しても、同様の情報を取得可能です。

List of uu.ua("version")
Browseruu.ua("version")
Firefox 2.0.0.1420080404
Firefox 3.0120080702
Safari 3.1525.13
Opera 9.510048
Opera 9.5110081
IE 88
IE 77
IE 66
IE 5.55.5

Iteration - オブジェクト/Hash/Array/FakeArrayのイテレーション

Array/Hash/FakeArrayの各要素を取り出し評価します。

uu.forEach - Executes a provided function once per hash element - 全要素を評価

uu.forEach(mix, fn, me = undefined) は、 mixの各要素に対し、fn.call(me, 要素の値, index, mix) を実行します。

Array.forEach は Array専用ですが、 uu.forEachは、Hash, Array, FakeArrayに使用可能です。

 @param Hash/Array/FakeArray mix - Hash, Array, FakeArrayを指定します。
 @param Function fn   - 各要素を評価する関数を指定します。
 @param this     [me] - fn実行時のthisを指定します。デフォルトはundefinedです。
Run 
uu.forEach({ a: "a", b: 1 }, function(v, i) {
  uu.log(i + ":" + v); // "a:a", "b:1"
});
uu.forEach(["a", 1], function(v, i) {
  uu.log(i + ":" + v); // "0:a", "1:1"
});
uu.forEach(uu.tag("*"), function(v, i) {
  uu.log(i + ":" + v); // "0:[object HTMLHtmlElement]", "1:[object HTMLHeadElement]", ...
});
uu.filter - Creates a new array with all elements that pass the test implemented by the provided function - 全要素を評価し、結果が真の要素を配列で返す

uu.filter(mix, fn, me) は、 mixの各要素に対し、fn.call(me, 要素の値, index, mix) を実行し、 結果が真の要素を Array で返します。

Array.filter は Array専用ですが、 uu.filterは、Hash, Array, FakeArrayに使用可能です。

 @param Hash/Array/FakeArray mix - Hash, Array, FakeArrayを指定します。
 @param Function fn   - 各要素を評価する関数を指定します。
 @param this     [me] - thisオブジェクトを指定します。デフォルトはundefinedです。
 @return Array        - Array([ 要素, ... ])を返します。
Run 
var rv = uu.filter(["a", 2, "3"], uu.isS);
uu.log(rv); // ["a", "3"]

rv = uu.filter({ a: "a", b: 2, c: "3" }, uu.isS);
uu.log(rv); // [ a: "a", c: "3" ]

rv = uu.filter(uu.tag("*"), function(v) {
  return (v.tagName === "HTML" || v.tagName === "BODY");
});
uu.log(rv.length); // 2
Array.forEach - Executes a provided function once per array element - 全要素をfnで評価する

Array.forEach(fn, me = undefined) は、Arrayの各要素に対し、fn.call(me, 要素の値, 数値index, this) を実行します。

Array.forEachはJavaScript1.5の機能です。

 @param Function  fn   - 各要素を評価する関数を指定します。
 @param this      [me] - thisオブジェクトを指定します。デフォルトはundefinedです。
Run 
["a", 1].forEach(function(v, i) {
  uu.log(i + ":" + v); // "0:a", "1:1"
});
Array.filter - Creates a new array with all elements that pass the test implemented by the provided function - 全要素を評価し、結果が真の要素を配列で返す

Array.filter(fn, me = undefined) は、Arrayの各要素に対し、fn.call(me, 要素の値, 数値index, this) を実行し、結果が真の要素をArrayで返します。

Array.filterはJavaScript1.5の機能です。

 @param Function  fn   - 各要素を評価する関数を指定します。
 @param this      [me] - thisオブジェクトを指定します。デフォルトはundefinedです。
 @return Array         - Array([ 要素, ... ])を返します。
Run 
var rv = ["a", 2, "3"].filter(function(v, i) {
  return uu.isS(v); // typeof v === "string" と同じ
});
uu.log(rv); // ["a", "3"]
Array.every - Tests whether all elements in the array pass the test implemented by the provided function - 全要素を評価し、全て真ならtrue,偽があればループを中断しfalseを返す

Array.filter(fn, me = undefined) は、Arrayの各要素に対し、fn.call(me, 要素の値, 数値index, this) を実行し、結果が偽ならループを中断しfalseを返します。結果が全て真ならtrueを返します。

Array.filterはJavaScript1.5の機能です。

 @param Function  fn   - 各要素を評価する関数を指定します。
 @param this      [me] - thisオブジェクトを指定します。デフォルトはundefinedです。
 @return Boolean       - 全て真ならtrue, 偽があればfalseを返します。
Run 
var rv = ["a", 2, "3"].every(function(v, i) {
  return uu.isS(v); // typeof v === "string" と同じ
});
uu.log(rv); // false (数値要素(2)が含まれているためfalse)
Array.some - Tests whether some element in the array passes the test implemented by the provided function - 全要素を評価し、全て偽ならfalse,真があればループを中断しtrueを返す

Array.some(fn, me = undefined) は、Arrayの各要素に対し、fn.call(me, 要素の値, 数値index, this) を実行し、結果が真ならループを中断しtrueを返します。結果が全て偽ならfalseを返します。

Array.someはJavaScript1.5の機能です。

 @param Function  fn   - 各要素を評価する関数を指定します。
 @param this      [me] - thisオブジェクトを指定します。デフォルトはundefinedです。
 @return Boolean       - 全て偽ならfalse, 真があればtrueを返します。
Run 
var rv = [1, 2, 3].some(function(v, i) {
  return uu.isS(v); // typeof v === "string" と同じ
});
uu.log(rv); // false (全要素は数値なのでfalse)
Array.map - Creates a new array with the results of calling a provided function on every element in this array - 全要素を評価し配列を返す

Array.map(fn, me = undefined) は、Arrayの各要素に対し、fn.call(me, 要素の値, 数値index, this) を実行し、結果をArrayで返します。

Array.mapはJavaScript1.5の機能です。

 @param Function  fn   - 各要素を評価する関数を指定します。
 @param this      [me] - thisオブジェクトを指定します。デフォルトはundefinedです。
 @return Array         - 結果をArrayで返します。
Run 
var rv = [1, 2, 4].map(function(v, i) {
  return i * v;
});
uu.log(rv); // [0, 2, 8]

Node

ノードの取り扱いを簡単にします。

uu.node.insert や uu.dom.insertText では、基準ノード(context)と位置(pos)により挿入する位置が決まります。

以下は、context と pos の関係表です。
context の一つ前の兄弟ノード(ThirdSibling)にアクセスするには、pos に UU.PREV を指定します。

  /DOCUMENT_NODE (root)
  |
  +- /parentNode.parentNode....
  |  |
  :  +- /parentNode.parentNode
  :  |  |
     :  +- /parentNode - contextの親
     :  |  |
        :  +- /FirstSibling   (親から見て長女) - pos = UU.FIRST
        :  +- /SecondSibling  (親から見て次女)
           +- /ThirdSibling   (親から見て三女) - pos = UU.PREV
           | 
           +- /FourthSibling  (親から見て四女) - context - 基準ノード
           |  |
           |  +- /FirstChild  (親から見て四女の長男) - pos = UU.FIRST_CHILD
           |  +- /SecondChild (親から見て四女の次男)
           |  +- /ThirdChild  (親から見て四女の三男) - pos = UU.LAST_CHILD
           | 
           +- /FifthSibling   (親から見て五女) - pos = UU.NEXT
           +- /SixthSibling   (親から見て六女)
           +- /SeventhSibling (親から見て七女) - pos = UU.LAST
uu.node.insert - Insert ELEMENET_NODE or HTMLString - ELEMENT_NODEまたはHTML文字列をノード化し挿入

uu.node.insert(html, context = document.body, pos = UU.LAST_CHILD) は、 context 以下の pos で指定された位置に、html ノードの断片を挿入します。

html がHTML文字列なら、uu.node.substance で HTMLを実体化し、ノードを挿入します。

 @param Element/String html - ノードを指定します。
                              ノードの代りにHTML文字列も指定できます。
                              HTML文字列には、複数ノードやテキスト,スタイル属性等が含まれた複雑なHTMLを指定可能です。
 @param Element [context]   - 挿入の基準位置(コンテキスト)を指定します。デフォルトはdocument.bodyです。
 @param Number  [pos]       - 挿入位置を指定します。デフォルトはUU.LAST_CHILDです。
      
  <div id="parentNode1">
    <div id="girl1">girl1</div>
    <div id="girl2">girl2</div>
    <div id="girl3">girl3</div>
    <div id="girl4">girl4
      <div id="girl4_boy1">girl4_boy1</div>
      <div id="girl4_boy2">girl4_boy2</div>
      <div id="girl4_boy3">girl4_boy3</div>
    </div>
    <div id="girl5">girl5</div>
    <div id="girl6">girl6</div>
    <div id="girl7">girl7</div>
  </div>

上のようなDOMツリーに対し、uu.node.insert("<p>hoge</p>", uu.id("girl4"), UU.NEXT) を実行すると、下のようになります。

Run 
  <div id="parentNode1">
    <div id="girl1">girl1</div>
    <div id="girl2">girl2</div>
    <div id="girl3">girl3</div>
    <div id="girl4">girl4
      <div id="girl4_boy1">girl4_boy1</div>
      <div id="girl4_boy2">girl4_boy2</div>
      <div id="girl4_boy3">girl4_boy3</div>
    </div>
    <p>hoge</p>
    <div id="girl5">girl5</div>
    <div id="girl6">girl6</div>
    <div id="girl7">girl7</div>
  </div>
uu.node.insertText - Insert TEXT_NODE or TextString - TEXT_NODE または テキスト文字列をノード化し挿入

uu.node.insertText(text, context = document.body, pos = UU.LAST_CHILD) は、 context 以下の pos で指定された位置に、テキストノードを挿入します。

text が文字列なら、テキスト文字列をテキストノードとして挿入します。

 @param String  text      - テキストノードを指定します。
                            テキストノードの代りに、テキスト文字列も指定可能です。
 @param Element [context] - 挿入の基準位置(コンテキスト)を指定します。デフォルトはdocument.bodyです。
 @param Number  [pos]     - 挿入位置を指定します。デフォルトはUU.LAST_CHILDです。
Run
uu.node.replace - Replace oldNode with node - nodeとoldNodeを入れ替える

uu.node.replace(node, oldNode, context = oldNode.parentNode) は、 context 以下の oldNode と node を入れ替え、DocumentFragment に格納された oldNode を返します。

 @param Element node      - 新しいノードを指定します。
 @param Element oldNode   - 入れ替えられる古いノードを指定します。
 @param Element [context] - コンテキストを指定します。省略可能です。
                            省略すると、oldNode.parentNode を基準に除去を行います。
                            通常使用では context の指定を省略します。
 @return DocumentFragment - oldNode を格納した DocumentFragment を返します。
uu.node.remove - Remove node - nodeを取り除く

uu.node.remove(node, context = node.parentNode) は、 context 以下の node を取り除き、DocumentFragment に格納された node を返します。

 @param Element node      - 新しいノードを指定します。
 @param Element [context] - コンテキストを指定します。省略可能です。
                            省略すると、node.parentNode を基準に除去を行います。
                            通常使用では context の指定を省略します。
 @return DocumentFragment - node を格納した DocumentFragment を返します。
uu.node.diet - Removes CRLF/WhiteSpace/Comment node - 空白と改行だけのテキストノードとコメントノードを再帰的に除去する

uu.node.diet(elm, depth = 0) は、elm以下のDOMノードツリーに含まれている不要なノードを除去します。

不要なノードとは、空白だけのテキストノード、タグとタグの間に挿入される改行用の暗黙のテキストノード, コメントノードです。

IEはDOMツリー構築時に、改行やコメントノードを含まないツリーを構築しますが、この挙動は他のブラウザと異なります。
dietを使うと、不要なノードを除去した状態(IEと同じ状態)にできるため、IEとIE以外のブラウザの挙動の違いを吸収することができます。

depthに1以上の値を指定すると、再帰的に子孫ノードを検索し、ノードの除去を行います。
depth = 0 なら、context 以下のノードについてのみ除去を行います。
全ての階層について除去を行う場合は、十分に大きな値(例: 999)を指定します。 

 @param Element elm     - ノードを指定します。
 @param Number  [depth] - 到達可能な深度を指定します。
                          0以上の値を指定すると子孫ノードを再帰的に検索/除去します。
                          0を指定すると表層のみを検索/除去します。デフォルトは0です。
Run 
  <div id="root" style="background-color: yellow">div node 1-1
    <ol>\n
      <li>li node 2-1</li>\n
      <li>li node 2-2<!-- comment node 2-2-1 --></li>\n
      <li>li node 2-3</li>\n
      <li>li node 2-4<!-- comment node 2-4-1 --></li>\n
    </ol>\n
    <!-- comment node 3-1 -->\n
    <!-- comment node 4-1 -->\n
  </div>

  function enumBlankNode(elm, deep /* = false */) {
    var rv = [], i, sz, re = /\S/; deep = deep || false;
    F(elm);
    return rv;
    function F(elm) {
      var i = 0, e;
      for (i = elm.childNodes.length; i-- > 0;) {
        e = elm.childNodes[i];
        switch (e.nodeType) {
        case 3: if (re.test(e.nodeValue)) { break; } // blank text node?
        case 8: rv.push(e); break; // comment node
        case 1: deep && F(e); // element node
        }
      }
    }
  }
  uu.ready(function() {
    uu.log("element node(in #root) length[%d].", uu.node(uu.id("root"), 1).length);
    uu.log("before blank node(in #root) length[%d].", enumBlankNode(uu.id("root"), 1).length);
  });
  function diet(node, deep) {
    uu.node.diet(node, deep);
    uu.log("diet done.");
    var blankNode = enumBlankNode(uu.id("root"), 1);
    uu.log("after blank node length[%d].", blankNode.length);
    uu.log.dir(2, blankNode);
  }
uu.node.cutdown - Cut all nodes less than context and return DocumentFragment - context以下の全ノードを切り取り、DocumentFragmentを返す

uu.node.cutdown(context = document.body) は、 context以下の全てのノードを切り取りDocumentFragmentに格納したものを返します。

 @param Element [context] - 切り取りを開始するノードを指定します。デフォルトは document.body です。
uu.node.substance - Convert HTMLString into DocumentFragment - HTMLStringをDocumentFragmentに変換する

uu.node.substance(html) は、html 文字列をDOMノード化し、DocumentFragment を返します。

uu.node.substance は、uu.node.insert のオンザフライ(その場で生成)版です。

 @param String html - HTMLの断片を文字列で指定します。
                      複数のノードやテキスト,スタイル属性を持つ複雑なHTMLなども指定可能です。
Run
uu.node.pos - Get node position - ノードが何番目のELEMENT_NODEかを返す

uu.node.pos(node, reverse = false) は、node が、 親要素の中で何番目の ELEMENT_NODE かを返します。

ELEMENT_NODE 以外のノード(テキストノードやコメントノード等)はカウントしません(無視します)。

 @param Element node    - ELEMENT_NODE を指定します。
 @param Boolean reverse - 逆方向から検索する場合に true を指定します。デフォルトは false です。
 @return Number         - ノードの順番を返します。
                          node が親を持たない場合は -1 を返します。
uu.node.count - Count the number of ELEMENET_NODE - ELEMENET_NODEをカウントする

uu.node.count(node, tag = "*") は、node 以下の ELEMENET_NODE の数をカウントし返します。

tag に "*" 以外の文字列を指定すると、一致するタグ名を持つ ELEMENET_NODE だけをカウントします。

 @param Element node  - ELEMENT_NODE を指定します。
 @param String tag    - 絞込みを行うタグ名を指定します。デフォルトは "*" です。
                        "*" を指定すると、絞込みせず全ての ELEMENT_NODE を検索します。
 @return Number       - 見つかった ELEMENT_NODE の数を返します。
                        見つからなかった場合はゼロを返します。

OOP Class

オブジェクト指向的な"クラス"をJavaScriptでも使えるようにします。

uu.klass.kiss - Create class. "Keep It Simple, Stupid" - シンプルなクラスの雛形を生成

uu.klass.kiss(args, ...) は、シンプルなクラスの雛形を生成します。

以下のように記述し、new myClass() を実行すると、myClass.prototype.construct() を自動的に呼び出します(constructがもしあれば)。 初期化に必要な引数も渡せます。

 @param Mix [...] - constructに渡す引数をいくつでも指定できます。
 @return Function - シンプルなクラスの雛形を生成するクロージャを返します。
Run 
var myClass = uu.klass.kiss();
myClass.prototype = {
  construct: function(var1, var2 /*, ... */) {
    // 初期化
    this.privateVar1 = var1;
    this.privateVar2 = var2;
  },
  myMethod: function() {
    return this.privateVar1 * this.privateVar2;
  }
};
var my = new myClass(10, 20); // 自動的に construct() を実行する。
uu.log(my.myMethod()); // "200"
uu.klass.generic - Create generic class - 汎用クラスの雛形を生成

uu.klass.generic(args, ...) は、汎用的なクラスの雛形を生成します。

以下のように記述し、new myClass() を実行すると、myClass.prototype.construct() を自動的に呼び出します。 初期化に必要な引数も渡せます。

uu.klass.kissには無い、3点の特別な機能を持っています。

  1. newで生成されたインスタンスには、システム全体を通じてユニーク(唯一)な値を持つ uidプロパティが自動で追加されます。
  2. msgboxメソッドを持つクラスなら、インスタンス生成時に自動的にメッセージポンプに登録を行います。
  3. handleEventメソッドを持つクラスなら、イベントクロージャを自動的に登録します。

これらの特徴により、面倒な手続きをせずとも、 メッセージポンプによるメッセージの送受信や、 イベントのハンドリングが可能になっています。

 @param Mix [...] - constructに渡す引数をいくつでも指定できます。
 @return Function - 汎用クラスの雛形を生成するクロージャを返します。
Run 
var files = uu.klass.generic();
files.prototype = {
  construct: function(agent) {
    this.agent = agent;
  },
  msgbox: function(msg, p1, p2) {
    switch (msg) {
    case "Hello":
      uu.log("Agent[%s], I accepted a message [%s], from [%s]", msg, p1);
      break;
    }
  }
};
var x1 = new files("Agent Mulder");
var x2 = new files("Agent Scully");
var x3 = new files("Smoking Man");

uu.msg.post(x2, "Hello Mulder", { from: "Scully" }); // モルダーからスカリーにご挨拶
uu.msg.post(0,  "Hello All", { from: "Mulder" }); // (自分以外の)みんなにご挨拶
uu.msg.post(x1, "...", { from: "Smoking Man" }); // モルダーにお返事
uu.klass.singleton - Create singleton class - シングルトンクラスの雛形を生成

uu.klass.singleton(args, ...) は、シングルトンクラスの雛形を生成します。

シングルトンクラスは何度newしても、いつも同じ(一つ)のインスタンスが返されます。
一つ存在すれば十分なものや、newする度に新しく生成できてしまうとまずいものはシングルトンクラスにします。

以下のように記述し、new myClass() を実行すると、myClass.prototype.construct を自動的に呼び出します。 初期化に必要な引数も渡せます。

uu.klass.singleton は、uu.klass.genericの特徴を受け継ぎ、さらに以下の特別な機能を持っています。

  1. destruct メソッド を定義しておくと、ページ遷移の時に destruct メソッドを自動的に呼び出します。
  2. construct メソッド を定義しておくと、1度目の new で construct メソッドを呼び出します。
  3. stabled メソッド を定義しておくと、2度目以降の new で stabled メソッドを呼び出します。
 @param Mix [...] - constructに渡す引数をいくつでも指定できます。
 @return Function - singletonクラスの雛形を生成するクロージャを返します。
Run 
function Run() {
  var myClass = uu.klass.singleton();
  myClass.prototype = {
    construct: function(url /* = "" */, msg1 /* = "" */, msg2 /* = "" */ /*, ... */) {
      // 初期化用メソッド
      uu.mix(this, { url: url || "", msg1: msg1 || "", msg2: msg2 || "" }); // 引数の補完と、this.xxx = xxx の実行
//      uu.ajax(this.url + "?" + this.msg1);
    },
    stabled: function(url /* = "" */, msg1 /* = "" */, msg2 /* = "" */ /*, ... */) {
      uu.log("call stabled");
    },
    destruct: function() {
      // 後処理用メソッド
//      uu.ajax(this.url + "?" + this.msg2);
    },
    myMethod: function() {
      return [this.msg1, this.msg2];
    }
  };
  var my = new myClass(uu.id("url").value, "hello", "bye-bye"); // 自動的に construct を実行する。
  uu.log(my.myMethod()[0]); // "hello"

  var my2 = new myClass(); // 二度目のnewなので construct は呼ばれず、代わりに stabled が呼ばれる。
  uu.log(my.myMethod()[1]); // "bye-bye"

  uu.log(my === my2); // "true"  myとmy2は同じもの(シングルトン)

  if (window.confirm("jump to http://www.example.com/")) {
    window.location.href = "http://www.example.com/"; // ページ遷移が発生するため、自動的に destruct を1度だけ実行する。
  }
}

CSS Class

CSSクラス(className)の取り扱いを簡単にします。

uu.klass.has - Has className - classNameの存在確認

uu.klass.has(elm, className) は elm要素のclassNameプロパティの値にclassNameが含まれていればtrueを返します。

 @param Element elm       - 要素を指定します。
 @param String  className - クラス名を指定します。
 @return Boolean          - 要素のclassNameプロパティの値に引数で指定したclassNameが含まれていればtrueを返します。
    
var e = document.body.appendChild(createElement("div"));
e.className = "hoge";

uu.log(uu.klass.has(e, "hoge")); // true
uu.klass.add - Add className property - classNameプロパティにクラス名を追加

uu.klass.add(elm, className) は elm要素のclassNameプロパティの値にclassNameを追加します。

開発中の機能: クラス名が "js" で始まっている場合は、クラス名の先頭から "js" を取り除き、 uu.klass.setWidgetChainedClassName で登録されているuidがあるなら、 uidに対しメッセージ(UU.MSG_ADD_CLASSNAME)をpost(p1=elm, p2=js除去後のclassName)します。 

 @param Element elm - 要素を指定します。
 @param String  className - クラス名を指定します。複数のクラス名は指定できません。
    
uu.forEach(uu.klass("alpha"), function(v) {
  uu.klass.add(v, "beta");
});
uu.klass.remove - Remove className property - classNameプロパティからクラス名を削除

uu.klass.remove(elm, className) は elm要素のclassNameプロパティの値からclassNameを削除します。

該当する値が存在しなければ何もしません。

開発中の機能: クラス名が、uu.klass.setWidgetChainedClassName で登録されているuidがあるなら、 uidに対しメッセージ(UU.MSG_REMOVE_CLASSNAME)をpost(p1=elm, p2=js除去後のclassName)します。 

 @param Element elm       - 要素を指定します。
 @param String  className - クラス名を指定します。複数のクラス名は指定できません。
    
uu.forEach(uu.klass("alpha"), function(v) {
  uu.klass.remove(v, "beta");
});
uu.klass.toggle - Add className property or remove - classNameプロパティにクラス名を追加または削除する

uu.klass.toggle(elm, className) は elm要素のclassNameプロパティの値に、classNameを追加します。すでに存在する場合は削除します。

 @param Element elm       - 要素を指定します。
 @param String  className - クラス名を指定します。複数のクラス名は指定できません。
    
uu.forEach(uu.klass("alpha"), function(v) {
  uu.klass.toggle(v, "beta"); // 既に存在するなら削除し、存在しないなら追加する
});
uu.klass.match - Match regexp - 正規表現でクラス名を検索

uu.klass.match(elm, expr) は elm要素のclassNameプロパティのから、exprにマッチするクラス名を検索し結果返します。

 @param Element elm   - 要素を指定します。
 @param RegExp  expr  - RegExpオブジェクトを指定します。
 @return Array/null   - マッチ結果の配列またはnullを返します。
    
<style>
.imagerollover { background-image: url(../../img/roll.gif); }
</style>
<div class="imagerollover rollrect_0_0_50_20"></div>
<div class="imagerollover rollrect_0_20_50_20"></div>
var m;
uu.css("div.imagerollover").forEach(function(v) {
  if ( (m = uu.klass.match(v, /^rollrect_([\d]+)_([\d]+)_([\d]+)_([\d]+)$/)) ) {
    uu.log("x=%s y=%s w=%s h=%s", m[1], m[2], m[3], m[4]);
  }
});
uu.klass.setWidgetChainedClassName - Coming Soon

uu.klass.setWidgetChainedClassName(uid, className) は uidとクラス名の関連付けを行います。

関連付けされたクラス名が、uu.klass.add, uu.klass.remove, uu.klass.toggle で追加/削除が行われるとメッセージがpostされるようになります。 

 @param String  uid       - msgboxメソッドを持つuidを指定します。
 @param String  className - クラス名を指定します。複数のクラス名は指定できません。
                            クラス名の先頭に"js"は不要です。
    
var DummyClass = uu.klass.generic();
DummyClass.prototype = {
  msgbox: function(msg, p1, p2) {
  }
};
// widgetbutton クラスが追加/削除された場合にメッセージを飛ばす
uu.klass.setWidgetChainedClassName(DummyClass.uid, "widgetbutton");
uu.klass.unsetWidgetChainedClassName - Coming Soon

uu.klass.unsetWidgetChainedClassName(uid, className) は uidとクラス名の関連付けを解除します。

 @param String  uid       - msgboxメソッドを持つuidを指定します。
 @param String  className - クラス名を指定します。複数のクラス名は指定できません。
                            クラス名の先頭に"js"は不要です。
uu.klass.evalWidgetChainedClassName - Evaluate className - classNameを評価する

uu.klass.evalWidgetChainedClassName(elm, className) は elmにclassNameが追加された時の振る舞いをエミュレートさせます。

この関数を呼ぶ前に、uu.klass.setWidgetChainedClassNameで関連付けを行っておく必要があります。

 @param Element elm       - 要素を指定します。
 @param String  className - クラス名を指定します。複数のクラス名は指定できません。
                            クラス名の先頭に"js"は不要です。

Attribute

属性の取り扱いを簡単にします。

uu.attr.get - Get attribute - 属性を取得

uu.attr.get(elm, attr) は、 elm要素のattr属性の値を取得します。

setAttributeで設定された独自の属性があればそちらを取得しますが、 Elementノードに同名の属性値があればそちらを優先します。

 @param Element elm  - 属性を取得する要素を指定します。
 @param Taxing  attr - 属性名の指定です。
 @return Hash/String - attrに複数の属性名を指定すると Hash({ attr: value })を返します。
                       attrに属性名を1つだけ指定すると 属性値 を文字列で返します。
                       存在しない属性名を指定すると、その要素の戻り値は空文字列("")になります。
ExpressionReturnsNote
uu.attr.get(elm, "title,href")
uu.attr.get(elm, ["title","href"])		{ title: "the title", href: "http://..." }複数の属性名を指定するとHashを返す
uu.attr.get(elm, "title")"the title"属性名を一つだけ指定すると文字列を返す
uu.attr.get(elm, "abcde")""存在しない属性名を指定すると空文字列("")を返す
uu.attr.get(elm, "title,abcde"){ title: "the title", abcde: "" }存在しない属性名の値は空文字列("")になる
uu.attr.set - Set attribute - 属性を設定

uu.attr.set(elm, hash) は、 elm要素のattr属性に値valueを設定します。

 @param Element elm  - 属性を設定する要素を指定します。
 @param Hash    hash - { attr: value, ...} を指定します。
ExpressionNote
uu.attr.set(elm, uu.toPair("title", "hoge"))
uu.attr.set(elm, { title: "hoge" })		{ title: "hoge" }を設定
uu.attr.set(elm, { title: "hoge" href: "http://..."} ){ title: "hoge", href: "http://..." }を設定

CSS

スタイル情報の取り扱いを簡単にします。

uu.css.get - document.defaultView.getComputedStyle wrapper - 計算済みのスタイルを取得

uu.css.get(elm, cssProp = undefined)は、要素(elm)に適用されている計算済みのスタイルを取得します。
cssPropを省略すると全てのスタイル情報をHashで返します。 cssPropにプロパティを一つ指定すると値を文字列で返します。 プロパティを複数指定すると結果をHashで返します。

この関数ではpseudo elementを取得できません。

cssPropResult type
戻り値の型		Returns
戻り値
指定しないCSS2Properties
(read only)		elmのスタイル情報
{ 0: undefined, MozApperrance: "none", ... }
"backgroundColor"stringrgb(51, 102, 153)
["background-color", "float"]Hash{ backgroundColor: "rgb(51, 102, 153)", cssFloat: "left" }
"border, outline, width, height"Hash{ border: "", height: "200px", outline: "", width: "320px" }
"float,opacity"HashIEの場合は { styleFloat: "left", opacity: "0.5" }
IE以外は、{ cssFloat: "left", opacity: "0.5" }

戻り値は、cssProp形式で、単位付の文字列(例: "200px")になります。

 @param Element elm      - スタイルを取得する要素を指定します。
 @param Taxing [cssProp] - cssProp形式のプロパティ名("fontWeight")を指定します。省略できます。
 @return Hash/String - cssPropに複数の要素を指定している場合は Hash { cssProp形式のプロパティ名: 計算済みのスタイル, ... }を返します。
                       cssPropが単一の要素なら、計算済みのスタイルを文字列で返します。
                       cssPropで指定したプロパティが存在しない場合は、その要素の値は空文字列("")になります。
                       cssPropを省略した場合は、全てのスタイル情報を持つ特別なオブジェクト(CSS2Properties)を返します。
Run 
  var elm = uu.id("target");

  var rv1 = uu.css.get(elm, ["backgroundColor", "float"]); // { backgroundColor: "rgb(51, 102, 153)", cssFloat: "left" }
  uu.log(rv1["styleFloat"] || rv1["cssFloat"]); // "left"

  var rv2 = uu.css.get(elm, "backgroundColor"); // "rgb(51, 102, 153)";
  uu.log(rv2);
  var rv3 = uu.css.get(elm, "border, outline, width, height"); // { border: "", height: "200px", outline: "", width: "320px" }
  uu.log(rv3);
  var rv4 = uu.css.get(elm, ["width", "height"]); // { height: "200px", width: "320px" }
  uu.log(rv4);

  // elmの全プロパティを列挙
  var all = uu.css.get(elm); // { 0: undefined, 1: undefined, 2: undefined, MozApperrance: "none", ... length: 109 }
  uu.log(all);
uu.css.rect - Get RectHash( { x: left, y: top, w: width, h: height } ) (value of px unit)

uu.css.rect(elm) は、 RectHash( { x, y, w, h } )を返します。x,yには座標の数値(単位:px), w,hには幅と高さの数値(単位:px)が格納されます。

w と h には、margin, padding, border を含みません。

uu.css.rect が margin, padding, borderを含まない情報を返すのに対し、
uu.element.rectは、それらを含んだ情報を返します。

 @param Element elm - 要素を指定します。
 @return RectHash   - RectHash( { x, y, w, h } )を返します。
uu.css.opacity - Get opacity value(from 0.0 to 1.0) - 不透明度を数値(0.0～1.0)で取得

uu.css.opacity(elm) は、 不透明度を0.0～1.0の数値で取得します。

 @param Element elm - 要素を指定します。
 @return Number     - 不透明度(0.0～1.0)を返します。
uu.css.backgroundImage - Get background-image URL - 背景画像のURLを取得

uu.css.backgroundImage(elm) は、 background-imageの値(URL)を取得します。

 @param Element elm - 要素を指定します。
 @return String     - URLを返します。URLが指定されていない場合は "none" を返します。
                      返される文字列は、"http://..." の形式になります。
uu.css.set - Set style - スタイルを設定

uu.css.set(elm, hash)は、 要素elmにhash({ cssProp: value, ... })で 指定されたスタイルを設定します。

valueには単位付きの文字列を指定します。一部のスタイルには数値や特別な値を指定できます。

数値や特別な値を指定可能なスタイル名の一覧
cssProp nameValue / Value TypeNote
opacityNumber不透明度を0.0から1.0の値で指定可能
 @param Element elm  - スタイルを設定する要素を指定します。
 @param Hash    hash - { cssProp: value, ...} を指定します。
Run 
<div id="result1">change bg-color and text-color. border style copied BorderBox</div>
<div id="result2">BorderBox</div>
<script>
function boot() {
  var elm1 = uu.id("result1"), elm2 = uu.id("result2");
  var cssProp = "borderTopColor,    borderTopWidth,     borderTopStyle,     " +
                "borderRightColor,  borderRightWidth,   borderRightStyle,   " +
                "borderBottomColor, borderBottomWidth,  borderBottomStyle,  " +
                "borderLeftColor,   borderLeftWidth,    borderLeftStyle     ";
  var style2 = uu.css.get(elm2, cssProp); // border系のスタイルを抽出

  uu.delay(function() {
    uu.effect.fade(elm1, {
      begin: 1,
      end: 0,
      fn: function() {
        uu.css.set(elm1, style2); // elm1にborder:系のスタイルを適用する
        uu.css.set(elm1, { backgroundColor: "white", color: "black" });
        uu.delay(function() {
          uu.effect.fade(elm1, { begin: 0, end: 1 });
        }, 500);
      }
    });
  }, 500);
}
</script>
uu.css.setRect - Set RectHash( { x: left, y: top, w: width, h: height } )

uu.css.setRect(elm, rect, autoVisible = false) は、 RectHash( { x, y, w, h } )を受け取り、要素の座標とサイズを更新します。

各要素はpx単位の数値で指定します。
x が elm.style.left, y が elm.style.top, w が elm.style.width, h が elm.style.height に相当します。
x, y, w, h のいずれも省略可能で、省略された要素については更新しません。 

 @param Element  elm         - 要素を指定します。
 @param RectHash rect        - RectHash( { x, y, w, h } )を指定します。x, y, w, h のいずれも省略可能です。
 @param Boolean  autoVisible - visibilityを自動的に制御する場合はtrueを指定します。デフォルトはfalseです。
                               trueを指定し、wまたはhの値がゼロに変化すると、その要素のvisibilityは"hidden"に設定されます。
                               trueを指定し、wとhの値がゼロから1以上の値に変化すると、その要素のvisibilityは"visible"に設定されます。
uu.css.setOpacity - Set opacity value(from 0.0 to 1.0) - 不透明度を設定(0.0～1.0)

uu.css.setOpacity(elm, opa) は、 不透明度を0.0～1.0の数値で設定します。
0を指定すると透明になります。

 @param Element elm - 要素を指定します。
 @param Number  opa - 不透明度(0.0～1.0)を指定します。0.001未満なら、0が指定されたものとして動作します。
uu.css.setBackgroundImage - Set background-image URL - 背景画像のURLを設定

uu.css.setBackgroundImage(elm, url) は、 background-image の値(URL)を設定します。

 @param Element elm - 要素を指定します。
 @param String  url - URLを指定します。
uu.css.show - Show element

uu.css.show(elm, resultRect = false) は、要素を表示します。

visibility の値を"visible"に設定し、display の値を要素の種別に合わせ自動的に"block"や"table"等に設定します。

resultRect が true ならば、要素を表示した状態でuu.css.rect(elm)を取得しRectHashを返します。

 @param Element elm        - 要素を指定します。
 @param Boolean resultRect - 戻り値でRectHashを返す場合にtrueを指定します。
                             デフォルトはfalseです。
 @return RectHash/0        - resultRectがtrueなら、uu.css.rect(elm)の結果を返します。
                             resultRectがfalseなら0を返します。
uu.css.hide - Hide element

uu.css.hide(elm, resultRect = false) は、要素を非表示にします。

visibility の値は変更せず、display の値を"none"に変更します。

resultRect が true ならば、要素を非表示にした状態でuu.css.rect(elm)を取得しRectHashを返します。

 @param Element elm        - 要素を指定します。
 @param Boolean resultRect - 戻り値でRectHashを返す場合にtrueを指定します。
                             デフォルトはfalseです。
 @return RectHash/0        - resultRectがtrueなら、uu.css.rect(elm)の結果を返します。
                             resultRectがfalseなら0を返します。
uu.css.rebound - Move element in inside of screen after having made it visible in outside of screen - 画面外で可視化し画面内に戻す

uu.css.rebound(elm, inboundRect) は、要素を画面外で可視化し画面内に戻します。

まず、要素を画面外の位置(left: -3333px, top: -3333px)に移動し、表示します。
次に、uu.css.setRect(inboundRect)を実行し画面内に戻します。

この関数は、描画途中をユーザから隠したい場合や、最小化の状態でeffectを開始したい場合等に使用します。

 @param Element  elm         - 要素を指定します。
 @param RectHash inboundRect - 画面内の座標をRectHashで指定します。
uu.css.isBlock - is block element - ブロック要素ならtrue

uu.css.isBlock(elm) は、要素がブロック要素としてレンダリング可能ならtrueを返します。

display = "table" などをサポートしていないブラウザ(IE6など)では、
display = "table" を指定すると要素が表示されなくなるため、この関数は false を返します。

現在のdisplayの値が、"inline-block"などに設定されていたとしても、 elm で指定された要素が、本来ブロック要素としてレンダリングされるべきものなら true を返します。 

 @param Element  elm - 要素を指定します。
 @return Boolean     - trueまたはfalseを返します。
uu.css.toPixel - Unit into px - px単位に変換

uu.css.toPixel(elm, val, cssProp = "") は、単位をpxに変換した数値を返します。

 @param Element  elm     - 要素を指定します。
 @param Mix      val     - 数値( 3 ),
                           文字列化された数値( "3" ),
                           単位付の文字列数値( "3px" , "3pt", "3em" ) などが指定可能です。
                           IEなら、"auto" も指定可能です。
 @param String   cssProp - IEで有効な引数です。デフォルトは空文字列( "" ) です。
                           valに"auto", cssPropに"width" を指定すると、elm.clientWidth の値を返します。
                           valに"auto", cssPropに"height" を指定すると、elm.clientHeight の値を返します。
 @return Number          - px単位の数値を返します。
uu.css.measure - Measure em and pt, and return PixelHash( { em, pt } ) value - em, ptを測定しPixelHash( { em, pt } )を返す

uu.css.measure(cache = true) は、相対単位(em, pt)が何pxに相当するのかを実測しPixelHash( { em, pt } )を返します。

emは現在のフォントサイズが変更されるたびに動的に変化します。
動的なフォントサイズの変更は、IE6+, Firefox2, Firefox3(ズーム:文字サイズだけ変更)で発生します。
フォントサイズの変更があった場合にこれらの値は再測定する必要があります。 

 @param Boolean cache - 前回測定した値を返す場合はtrueを指定します。デフォルトはtrueです。
                        再測定する場合はfalseを使用します。
 @return PixelHash    - PixelHash( { em, pt } )を返します。
uu.css.insertRule - Insert CSS ruls - CSSルールを追加

uu.css.insertRule(rule, index = undefined) は、ルールを追加します。

必要に応じて、uupaa.js 専用に新しいスタイルシートを動的に生成してからルールを追加します。

 @param String rule  - ルールを追加します。
                       ルールは "div { color: black }" のような文字列で指定します。
                       "div, p { color: black }" のようにカンマコンビネータを使用するとIEでエラーが発生するため、
                       "div { color: black }" と "p { color: black }" に分けて指定します。
 @param Number index - ルールの挿入位置を指定します。デフォルトは undefined です。
                       undefined を指定すると、ルールセットの最後に追加されます。
                       通常は、undefined を指定します。
 @return Number      - ルールの挿入位置を返します。
                       この番号は、uu.css.deleteRule で使用します。
 @see CSSOM
uu.css.deleteRule - Delete CSS ruls

uu.css.deleteRule(index) は、uupaa.js 専用に動的に生成されたスタイルシート上からルールを削除します。

 @param Number index - 削除するルールを指定します
                       この番号は、uu.css.insertRule が返す番号を指定します。
 @see CSSOM
uu.css.createStyleSheet - Create StyleSheet

uu.css.createStyleSheet() は、新しくスタイルシートを生成し、head要素の最後に追加します。

 @return Element - 生成したスタイルシートオブジェクトを返します。
 @see CSSOM
uu.css.unselectable - Elemenet unselectable - 要素を選択禁止にする

uu.css.unselectable() は、要素を選択禁止にします。

 @param Element - 選択禁止にする要素を指定します。
uu.css.recalc - Recalc element style - スタイルを再評価する

uu.css.recalc() は、スタイルを再評価します。

特定のブラウザ上で要素を動的に追加したり、スタイルを変更した場合などにこのメソッドを呼びスタイルを再評価してください。

  • IEで、スタイルに max-width:, min-width:, max-height:, min-height: を持つ要素を動的に追加した場合
  • IEで、スタイルに opacity: を持つ要素を動的に追加した場合
  • IEで、スタイルに position: fixed を持つ要素を動的に追加した場合
  • IEで、スタイルに position: absolute を持つ要素を初めて動的に追加した場合

上記リストに無いブラウザでは、この関数は何もしません。

Element

要素に関する情報を取り扱います。

Firefox3でcssTextに、
"margin: 5px; border: 3px solid black; padding: 2px; width: 10px; height: 10px"指定時の各プロパティの値です。

offsetXxx系は正式な仕様ではなく、IEの独自実装を他のブラウザが追従したものですが、
各ブラウザで解釈が異なっているようです。

  elm.style.cssText
    = "margin: 5px; border: 3px solid black; padding: 2px; width: 10px; height: 10px";

elm.offsetLeft   =  5px = 5(marginLeft)
elm.offsetTop    =  5px = 5(marginLeft)
elm.offsetWidth  = 20px = 6(border) + 4(padding) + 10(width)
elm.offsetHeight = 20px = 6(border) + 4(padding) + 10(height)
elm.clientLeft   =  3px = 3(borderLeft)
elm.clientTop    =  3px = 3(borderTop)
elm.clientWidth  = 14px = 4(padding) + 10(width)
elm.clientHeight = 14px = 4(padding) + 10(height)

 +----------------------------------------------------  ＿
 |                      □                              │elm.style.marginTopWidth
 |                      □                              │elm.offsetTop
 |                      □                              │
 |                      □                              │
 |                      □                          ＿  │    ＿
 |          ■■■■■■■■■■■■■■■■■■■■│  ￣    │elm.style.borderTopWidth
 |          ■■■■■■■■■■■■■■■■■■■■│        │elm.clientTop
 |          ■■■■■■■■■■■■■■■■■■■■│＿  ＿  │
 |          ■■■    □                      ■■■││  │  ￣
 |          ■■■    □                      ■■■││  │elm.style.paddingTopWidth
 |          ■■■□□+- - - - - - - - - +    ■■■││  ￣
 |□□□□□■■■                       |    ■■■││
 |          ■■■    |                       ■■■││
 |          ■■■                       |    ■■■││elm.clientHeight(= padding + height)
 |          ■■■    |       elm             ■■■││
 |          ■■■                       |    ■■■││
 |          ■■■    |                       ■■■││
 |          ■■■                       |    ■■■││
 |          ■■■    |                       ■■■││
 |          ■■■    + - - - - - - - - -+    ■■■││  ＿
 |          ■■■                            ■■■││  │elm.style.paddingBottomWidth
 |          ■■■                            ■■■││  │
 |          ■■■■■■■■■■■■■■■■■■■■│￣  ￣
 |          ■■■■■■■■■■■■■■■■■■■■│
 |          ■■■■■■■■■■■■■■■■■■■■│elm.offsetHeight(= margin + height)
 |                                                  ￣
 |         ├───────────────────┤
 |          elm.offsetWidth(= margin + width)
 |
 |               ├─────────────┤
 |                elm.clientWidth(= padding + width)
 |
 |         ├──┤
            elm.style.borderTopWidth
            elm.clientLeft
  
 ├────┤
  elm.style.marginLeftWidth
  elm.offsetLeft
uu.element.rect - Get element rect(abs) - 要素の絶対位置とサイズを取得

uu.element.rect(elm) は、要素の矩形情報を取得します。

uu.css.rect が margin, padding, border を含まない情報を返すのに対し、
uu.element.rect は、それらを含んだ情報を返します。

uu.element.rect は 画面内における要素の絶対位置を取得するために使用できます。

 @param Element elm - 要素を指定します。
 @return RectHash   - RectHash( { x, y, w, h, ow, oh } )を返します。
                      x: offset from viewport with scroll(abs x) - 画面左上からのオフセット(スクロール量を含む)
                      y: offset from viewport with scroll(abs y) - 画面左上からのオフセット(スクロール量を含む)
                      w: padding + width
                      h: padding + height
                      ow: border + padding + width
                      oh: border + padding + height
uu.element.offsetFromParentHasLayout - Get offset from ParentHasLayout element - ParentHasLayout要素からのオフセットを取得

uu.element.offsetFromParentHasLayout(elm) は、ParentHasLayout要素からのオフセットを取得します。

 @param Element elm - 要素を指定します。
 @return RectHash   - RectHash( { x, y, w, h, ow, oh } )を返します。
                      x: offset from ParentHasLayout element(rel x) - ParentHasLayout 要素からのオフセット
                      y: offset from ParentHasLayout element(rel y) - ParentHasLayout 要素からのオフセット
                      w: padding + width
                      h: padding + height
                      ow: border + padding + width
                      oh: border + padding + height
uu.element.offsetFromAncestor - Get offset from ancestor element - 先祖要素(ancestor)からのオフセットを取得

uu.element.offsetFromAncestor(elm, ancestor) は、先祖要素(ancestor)からのオフセットを取得します。

 @param Element elm      - 要素を指定します。
 @param Element ancestor - 先祖要素を指定します。
 @return Hash            - Hash( { x, y } )を返します。
                           x: offset from ancestor element(rel x) - ancestor要素からのオフセット
                           y: offset from ancestor element(rel y) - ancestor要素からのオフセット
uu.element.toAbsolute - Absolute positioning - 絶対座標化

uu.element.toAbsolute(elm) は、要素の現在位置を保持したまま絶対座標化(position: absolute)します。

 @param Element elm - 要素を指定します。
uu.element.toStatic - Static positioning - 静的座標化

uu.element.toStatic(elm) は、要素を静的座標化(position: static)します。

 @param Element elm - 要素を指定します。

ViewPort

ブラウザの表示領域(ViewPort)に関する情報を取り扱います。

uu.viewport.rect - Get view-port rect(browser inner size) - ブラウザの表示領域の位置とサイズを取得

uu.viewport.rect() は、ブラウザの表示領域の情報を取得します。

x, y, w, h の値には uu.viewport.setVirtualPadding で設定したパディング値が加味された値が返されます。

 @return RectHash   - RectHash( { x, y, w, h, sw, sh } )を返します。
                      x:  virtual-padding-left
                      y:  virtual-padding-top
                      w:  browser view-port width - ブラウザの表示領域の幅
                      h:  browser view-port height - ブラウザの表示領域の高さ
                      sw: scroll width  - スクロールの幅
                      sh: scroll height - スクロールの高さ
Run
uu.viewport.setVirtualPadding - Set PaddingHash( { top, right, bottom, left } )

uu.viewport.setVirtualPadding() は、ブラウザの表示領域の仮想的なpadding情報を設定します。

top, right, bottom, left のいずれも省略可能で、省略された要素については更新しません。

設定された値は uu.viewport.rect が返すx, y, w, h の値に影響を与えます。

 @param PaddingHash - PaddingHash( { top, right, bottom, left } )を指定します。
                      top:    virtual-padding-left
                      right:  virtual-padding-right
                      bottom: virtual-padding-bottom
                      left:   virtual-padding-left

Module

uupaa.jsに最初から搭載されている機能はごくわずかですが、 機能が必要になったタイミングでモジュールと呼ばれるJavaScriptコードの塊を読み込み、機能を拡張することができます。

一つのJavaScriptファイルには、複数のモジュールを格納することができます。

以下が最小構成のモジュールの例です。これは uu.module.dummy.js として提供されています。

(function() { var /* uud = document, */ uuw = window, uu = uuw.uu;

uu.module.dummy = {};

})(); // end (function())()

この例からもわかるように、モジュールとしての最小条件は、uu.module[モジュール名] = {} を定義することです。
システムは uu.module にモジュール名が登録されることでモジュールが正常に読み込まれていることを認識します。
この定義を忘れるとモジュールの読み込み失敗やタイムアウトエラーが発生します。

以下は、全て有効なモジュールの定義方法です。

uu.module.moduleName = {};                      // 基本形
uu.module.moduleName = function( ... ) { ... }; // 関数オブジェクトもOK
uu.module["effect+"] = {};                      // 記号を使う場合は ["モジュール名"] とする
uu.module["skin.plasticityAngle"] = {};       // ドットでネームスペースを切ることも可能

モジュールを格納したファイル(モジュールファイル)のファイル名は "uu.module." + ModFileName + ".js" とします。
ModFileName には、英数字と一部の記号( []()_+-!., )が使用可能です。
モジュールファイルは任意のディレクトリに設置できます。

uu.module - Load Module - モジュールの読み込み

uu.module(path = "", module, fn = undefined) は、 moduleをpathで指定されたディレクトリから読み込みます。 全モジュールの読み込み完了で fn() をコールします。

pathに複数のパスを指定すると、各パスで読み込みが可能か順番に試行します。
全てのパスを試行し、それでも読み込めないモジュールがある場合は例外を発生させ処理を終了します。
pathに空文字列を指定すると、検索パスとしてuu.module.config.modulePath の値を使用します。

pathに相対パスを指定すると、 uupaa.js が設置されているディレクトリを基準としてモジュールを読み込みます。

 @param Taxing [path] - 検索パスの指定です。絶対URLや相対パスを指定します。
                        空文字列を指定すると、uu.module.config.modulePath で指定されたURLを検索パスとして使用します。
                        デフォルトは空文字列("")です。
 @param Taxing module - ModFileName名の指定です。
                        ModFileName名には、uu.module.xxx.js の xxxの部分を指定します。
 @param Function [fn] - ロード完了後にコールバックするメソッドを指定します。デフォルトはundefinedです。
 @throws Error          "uu.module({module}) failed"  ロード失敗
      
// http://example.com/ 以下から effect, dragモジュールのロードを試み、失敗したモジュールだけは、
// http://example.net/latest/ 以下からモジュールのロードを試みる。
uu.module("http://example.com/, http://example.net/latest/", "effect,drag");

複数の検索パスをうまく組み合わせると、本番系が接続しにくい場合に、 自動的に予備系のサーバからスクリプトをロードするといった動作の指定が可能になります。

既にロード済みのモジュールを再度読み込もうとすると、その指示は無視され、即座に fn() をコールします。

uu.moduleは非同期に読み込みを行うため高速にモジュールを読み込むことができますが、 読み込み順はブラウザに依存します。タイムアウトもしません。

読み込み順が保障されないため、読み込み順に依存するモジュールでエラーが発生する場合があります。
そのような場合は、uu.module.loadSyncを使用します。

uu.module()の代りに、<script id="uupaa.js" src="uupaa.js?module=..."> とすることで、 モジュールを自動的に読み込むこともできます。

uu.module.already - Module already loaded - モジュールの読み込み確認

uu.module.already(module) は、moduleに指定した全てのモジュールが読み込み済みならtrueを返します。

 @param Taxing module - モジュール名を指定します。
 @return Boolean      - モジュールロード済みでtrueを返します。
                        複数モジュール指定時は、全モジュールロード済みでtrueを返します。
uu.module.loadSync - Load Module(Synchronized) - モジュールの同期読み込み

uu.module.loadSync(path = "", module, fn = undefined) は、 uu.moduleの同期ロード版です。

uu.module.loadSyncはモジュールを順番に(ひとつずつ)読み込むため、完了までの時間は伸びますが、読み込み順が保障されます。
読み込み順を保障する必要の無いモジュールと、保障する必要のあるモジュールに分け、
必要の無いモジュールは uu.moduleで読み込み、必要があるモジュールはuu.module.loadSync を使用します。
一定時間以内に読み込みが完了しないとタイムアウトします。 uu.module.timeoutの値を変更するとタイムアウト時間を変更できます。

既にロード済みのモジュールを再度読み込もうとすると、その指示は無視され、即座に fn() をコールします。

 @param Taxing [path] - 検索パスの指定です。絶対URLや相対パスを指定します。
                        空文字列を指定すると、uu.module.config.modulePath で指定されたURLを検索パスとして使用します。
                        デフォルトは空文字列("")です。
 @param Taxing module - ModFileName名の指定です。
                        ModFileName名には、uu.module.xxx.js の xxxの部分を指定します。
 @param Function [fn] - ロード完了後にコールバックするメソッドを指定します。デフォルトはundefinedです。
 @throws Error          "uu.module.loadSync({module}) timeout" タイムアウト
 @throws Error          "uu.module.loadSync({module}) failed"  ロード失敗
uu.module.loadSyncTimeout - loadSync timeout

uu.module.timeout は、uu.module.loadSyncで使用するタイムアウト時間を指定します。 1以上の数値を指定します。単位はmsです。デフォルトは500です。

Event

イベントの取り扱いを簡単にします。

uu.event.closure - Create event closure - イベントクロージャを生成

uu.event.closure(me) は、イベントシステムで使用するイベントクロージャを生成します。

この関数を明示的に使用する必要があるのは、以下のケースです。

  1. uu.klass.kissでクラスを生成しイベントを受け取りたい場合
  2. トップレベルオブジェクト(window)に追加した関数でイベントを受け取りたい場合

uu.klass.generic, uu.klass.singleton でクラスを生成した場合は 自動的に処理されるため、この関数を呼び出す必要はありません。

 @param this me - thisを指定します。
 @return Object - イベントクロージャオブジェクトを返します。これは uu.event.set の引数に渡すことができます。

メッセージを受け取りたいクラスは msgbox という 名前のメソッドを定義しますが、 イベントを受け取りたいクラスは、handleEvent という名前のメソッドを定義しておきます。
handleEvent は DOM LEVEL2 Eventの仕様です(JavaScript第5版 420pを参考にしてください)。

以下はクリックイベントを受け取るクラスの実装例です。

Run 
var MyClass = uu.klass.generic();
MyClass.prototype = {
  construct: function(element) {
    this.element = element;
    uu.event.set(this, this.element, "click"); // イベントハンドラを設定
  },
  destruct: function() {
    uu.event.unset(this, this.element, "click"); // constructで設定したイベントハンドラを開放
  },
  handleEvent: function(evt) {      // 第一引数にイベントオブジェクトが渡される
    var tgt = uu.event.target(evt); // イベントが発生した要素は、tgt.target で取得可能
    uu.event.stop(evt);             // イベントの伝播とデフォルト動作を抑止
    var mpos = uu.event.mousePos(evt); // クリック時のマウス座標を取得
    uu.id("result").innerText = uu.sprintf("CLICK: x:[%d], y:[%d]", mpos.x, mpos.y);
  }
};
var my = new MyClass(uu.id("clicktarget"));

以下のようにすることでグローバルネームスペース(windowオブジェクト)に、作成したイベントハンドラを指定することもできます。

Run 
window.myHandleEvent = function(evt) { // この場合のメソッド名は "handleEvent" 以外でもOK
  uu.log("click");
  var tgt = uu.event.target(evt);
  uu.log(tgt.target.id);
};
uu.event.set(window.myHandleEvent, document, "click");
uu.event.target - Detect event target - イベント発生源を取得

uu.event.target(evt) は イベント発生源に関する情報を取得します。

 @param event evt - イベントオブジェクトを指定します。
 @return Hash     - Hash({ target, currentTarget, relatedTarget }) を返します。
target
イベント発生源のノード
currentTarget
現在処理中のノード(キャプチャリング/バブリング中)のカレントノード(Firefox, Safari, Opera)
relatedTarget
関連性のあるターゲット(hover用の情報)
targetでmouseoverが発生した場合は、relatedTargetにmouseoutした要素が格納される。
targetでmouseoutが発生した場合は、relatedTargetにmouseoverした要素が格納される。
uu.event.set - Add event handler - イベントハンドラを設定

uu.event.set(me, elm, type, capture = false) はイベントを設定します。

elmに、同じパラメタ(type, me, capture)でイベントを二重登録しようとしても失敗します(何もおこりません)。

 @param Function/this me   - イベント成立時にコールバックする関数
                             またはuu.event.closureの戻り値を指定します。
 @param Element  elm       - イベントを設定する要素を指定します。
 @param Taxing   type      - イベントタイプを指定します。
 @param Boolean  [capture] - イベントをキャプチャーする場合はtrueを指定します。
                             通常のイベントを登録する場合はfalseを指定します。
uu.event.unset - Remove event handler - イベントハンドラを解除

uu.event.unset(me, elm, type, capture = false) はイベントを解除します。 引数は、uu.event.setでイベントを登録する際に指定したものとまったく同じものを指定します。

 @param Function/this me   - イベント成立時にコールバックする関数
                             またはuu.event.closureの戻り値を指定します。
 @param Taxing   type      - イベントタイプを指定します。
 @param Function fn        - イベント成立時にコールバックする関数を指定します。
                             通常は、uu.event.handler の戻り値を指定します。
 @param Boolean  [capture] - イベントをキャプチャーする場合はtrueを指定します。
                             通常のイベントを解除する場合はfalseを指定します。
uu.event.toggle - Toggle event handler - イベントハンドラを設定または解除

uu.event.toggle(me, elm, type, capture = false) はイベントを設定または解除します。

既に登録されているイベントを指定すると解除、未登録なら登録します。

指定可能な引数は uu.event.set, uu.event.unset と同じです。

以下はイベントのset/unsetを効率的に行うドラッグandドロップ処理の実装例です。

Run | uupaaの開発日記 
var elm = uu.id("drag");
uu.event.set(elm, "mousedown", F);
uu.element.toAbsolute(elm);
function F(evt) {
  uu.event.stop(evt);
  switch (uu.event.toType(evt)) {
  case "mousemove": uu.module.drag.move(elm, evt); break;
  case "mousedown": uu.module.drag.save(elm, evt);
  case "mouseup":   uu.event.toggle(F, uu.ua.ie ? elm : document, "mousemove,mouseup", true);
  }
}
uu.event.stop - Execute stop-propagation and prevent-default - イベントの抑止

uu.event.stop(evt, cancel = true) は イベントのバブルアップ(伝播)と、可能ならデフォルトの動作を抑止します。

 @param event evt        - イベントオブジェクトを指定します。
 @param Boolean [cancel] - ブラウザが実装しているデフォルトの動作をキャンセルする場合にtrueを指定します。
                           キャンセルできない場合は無視されます。
uu.event.toType - Convert DOM Lv0 event type - DOM Lv0イベントタイプに変換

uu.event.toType(evt) は DOMイベントタイプをDOM Level 0イベントタイプに変換します。

 @param event evt - イベントオブジェクトを指定します。
 @return String   - 変換後のイベントタイプを返します。
Browserevt.typeReturn
Firefox2+DOMMouseScrollmousewheel
IE6+onlosecapturemouseup
uu.event.toDOMType - Convert DOM event type - DOMイベントタイプに変換

uu.event.toDOMType(type) は DOM Level 0イベントタイプをDOMイベントタイプに変換します。

 @param String type - DOM Level 0イベントタイプを指定します。
 @return String     - 変換後のイベントタイプを返します。
BrowsertypeReturn
Firefox2+mousewheelDOMMouseScroll
uu.event.keyState - Get key state - キーの状態を取得

uu.event.keyState(evt) は キーの状態を取得します。

alt
altキー押下でtrue
shift
shiftキー押下でtrue
ctrl
ctrlキー押下でtrue
key
押下したキーコード
 @param event evt - イベントオブジェクトを指定します。
 @return Hash     - Hash( { alt, shift, ctrl, key } ) を返します
uu.event.mousePos - Get mouse position - マウス座標を取得

uu.event.mousePos(evt) は マウス座標を取得します。

x
画面左上からのオフセット幅(スクロール量を含む)
y
画面左上からのオフセット幅(スクロール量を含む)
ox
画面左上からのオフセット幅(スクロール量を含まない)
oy
画面左上からのオフセット幅(スクロール量を含まない)
cx
最寄の要素の左上からの相対座標
cy
最寄の要素の左上からの相対座標
 @param event evt - イベントオブジェクトを指定します。
 @return Hash     - Hash( { x, y, ox, oy, cx, cy } ) を返します
uu.event.mouseState - Get mouse click and wheel state - マウスクリック, ホイールの状態を取得

uu.event.mouseState(evt) は マウスクリック, ホイールの状態を取得します。

x
画面左上からのオフセット幅(スクロール量を含む)
y
画面左上からのオフセット幅(スクロール量を含む)
left
左クリックでtrue
mid
中クリックでtrue
right
右クリックでtrue
click
クリック数, シングルクリックで1, ダブルクリックで2, トリプルクリックで3
wheel
マウスホイールを上に回転させると-1を、下に回転させると1を返します
 @param event evt - イベントオブジェクトを指定します。
 @return Hash     - Hash( { left, mid, right, click, wheel } ) を返します

Ready

機能が使用可能になったタイミングで、事前に登録されている関数をコールバックする仕組みを提供します。

類似機能に、uu.module.imageset が提供する ImageReady があります。

uu.ready - Ready event handler - Readyイベントハンドラを設定

uu.ready(fn, id = "DM") は idで指定した機能が使用可能な状態(Ready状態)になると呼ばれる関数(fn)を登録します。
状態成立後に uu.ready が呼ばれた場合は、即座に fn をコールバックします。

ExpressionFunction/State
uu.ready(fn, "D")DomReady
uu.ready(fn, "M")ModuleReady
uu.ready(fn, "W")WindowReady
uu.ready(fn, "C")CanvasReady
uu.ready(fn, "A")AjaxReady
uu.ready(fn, "J")JSONPReady
 @param Function fn - コールバック関数を指定します。
 @param String [id] - 機能をidで指定します。デフォルトは "DM" です。
                      指定可能なidは、"D", "M", "W", "C", "A", "J" と、これらを組み合わせた文字列です。

複数の状態が全て成立した場合に関数をコールバックにするには、idに "D", "M", "W", "C", "A", "J" を組み合わせた文字列を指定します。

Run 
function boot() { ... }
uu.module("", "drag,canvas");
uu.ready(boot, "DMC"); // DomReady + ModuleReady + CanvasReady 成立でboot関数を呼ぶ
uu.ready.already - Ready state - Ready状態の確認

uu.ready.already(id = "DM") は idで指定した機能が既に使用可能ならtrueを返します。

uu.unready - Unready event handler - Unreadyイベントハンドラを設定

uu.unready(fn) は WindowUnready状態になると呼ばれる関数(fn)を登録します。

ExpressionFunction/State
uu.unready(fn)WindowUnready
 @param Function fn - コールバック関数を指定します。
Run

Request

Webサーバにリクエストを発行します。 同期リクエストはサーバからレスポンスがあるまで、JavaScriptの動作が停止します。

Functionクロスドメイン
(Cross Domain)		リクエスト
(Request)		メソッド
(Method)		タイムアウト
(Timeout)		独自ヘッダの追加
(Add Original Headers)		更新チェック
(Update check)
uu.ajax×AsyncGET, POST○○×
uu.ajax.loadIfMod×AsyncGET○○○
uu.ajax.loadSync×SyncGET, POST×○×
uu.jsonp○AsyncGET○××
uu.module.image.load○AsyncGET○××

タイムアウト機能を使用するには、uu.request.timeout に10000(10秒)～50000(50秒)を指定します。単位はmsです。0を指定するとタイムアウトしません。デフォルトは10000(10秒)です。

通信ヘッダを追加するには、uu.request.header に要素を追加します。

NameValue TypeDefault valueNote
uu.request.callbackFilterNumber0x2コールバックフィルタのデフォルト値
uu.request.timeoutNumber (unit: ms)10000タイムアウト時間(単位:ms)
(0でタイムアウトしない)
uu.request.headerHash{ "X-Requested-With": "XMLHttpRequest" }リクエストヘッダ
uu.request.jsonpFnString"callback"JSONPコールバック関数名
uu.ajax - Ajax async request - 非同期リクエスト

uu.ajax(url, fn = undefined, data = undefined) は、Webサーバと非同期に通信を行います。

urlにはリクエストURLを、fnには各ステップ毎にコールバックする関数を、 データを送信する場合は data に encodeURIComponent でエンコード済みの文字列を指定します。

Run 
 @param String   url    - リクエストURLを指定します。
 @param Function [fn]   - 各ステップ毎にコールバックする関数を指定します。デフォルトはundefinedです。fnを省略するとコールバックしません。
 @param String   [data] - データを送信する場合に、encodeURIComponentでエンコード済みの文字列を指定します。
                          dataを指定するとPOSTメソッドを使用し、指定しないとGETメソッドを使用します。
                          デフォルトはundefinedです。
 @param Number   [callbackFilter] - コールバックするステップを限定する場合に指定します。
                          省略すると、uu.request.callbackFilter の値を使用します。
uu.ajax.loadIfMod - Ajax async request with new-arrival check - 更新チェック付き非同期リクエスト

uu.ajax.loadIfMod(url, fn = undefined) は、Webサーバと非同期に通信を行います。

前回通信を行った際のURLと、その更新日時を保存しており、データが更新されていない場合は status に 304 を返します。

 @param String   url - リクエストURLを指定します。
 @param Function [fn] - 各ステップ毎にコールバックする関数を指定します。デフォルトはundefinedです。fnを省略するとコールバックしません。
 @param Number   [callbackFilter] - コールバックするステップを限定する場合に指定します。
                          省略すると、uu.request.callbackFilter の値を使用します。
uu.ajax.loadSync - Ajax sync request - 同期通信

uu.ajax.loadSync(url, fn = undefined, data = undefined) は、Webサーバと同期通信を行います。

同期通信はサーバからのレスポンスがあるまで待機し続けます(ブラウザが固まったように見えます)。

 @param String   url    - リクエストURLを指定します。
 @param Function [fn]   - 各ステップ毎にコールバックする関数を指定します。デフォルトはundefinedです。fnを省略するとコールバックしません。
 @param String   [data] - データを送信する場合に、encodeURIComponentでエンコード済みの文字列を指定します。
                          dataを指定するとPOSTメソッドを使用し、指定しないとGETメソッドを使用します。
                          デフォルトはundefinedです。
 @param Number   [callbackFilter] - コールバックするステップを限定する場合に指定します。
                          省略すると、uu.request.callbackFilter の値を使用します。
uu.jsonp - JSONP async request - 非同期リクエスト

uu.jsonp(url, fn = undefined) は、Webサーバと非同期に通信を行います。

urlにはリクエストURLを、fnには 各ステップ毎にコールバックする関数を指定します。

 @param String   url  - リクエストURLを指定します。
 @param Function [fn] - 各stepで呼び出す関数を指定します。デフォルトはundefinedです。fnを省略するとコールバックしません。
 @param Number   [callbackFilter] - コールバックするステップを限定する場合に指定します。
                          省略すると、uu.request.callbackFilter の値を使用します。
uu.script.create - Create script element - script要素の生成

uu.script.create(id = "") は script要素を生成し返します。

返されるscript要素は、<script type="text/javascript" charset="utf-8" id="..."></script> と等価です。

 @param String [id] - id属性の値を指定します。デフォルトは空文字列( "" ) です。
 @return Element    - script要素を返します。
uu.script.exec - Evel Script - JavaScript文字列をグローバルネームスペースで評価

uu.script.exec(code) は JavaScriptコードを評価(eval)します。

戻り値はありません。

 @param String code - JavaScriptコードを指定します。
CallBack - コールバック

uu.ajax, uu.ajax.loadIfMod, uu.ajax.loadSync, uu.jsonp, uu.request.script, uu.module.image.load の引数で指定した fn は、 通信/読み込み の各段階で fn(uid, step, response, status, url, async, more arg, ...) の形で コールバックされます。

uidにはユニークなID(文字列)が、 responseにはレスポンステキストが、 statusにはWebサーバが返すステータスコード または uuppa.jsが設定したステータスコードが格納されます。 asyncは非同期通信で1, 同期通信で0になります。

more arg, ...が渡される場合もあります。

uu.module.image.load では、response に text ではなく Image Object が渡されます。

状況 uidstepresponsestatusurlasync
リクエスト開始 - REQUEST ユニークID1 "" 0request URL1 or 0
成功 - OK ユニークID2 text
or Image Object 		200request URL1 or 0
失敗 - NG ユニークID4 "" 200以外の数値request URL1 or 0

引数callbackFilterに1～7の値を指定すると、コールバックするstepを限定することも可能です。
OKとNGだけを知りたい場合は、 callbackFilter に 6 を設定します( 6 = 2 + 4 )。

引数callbackFilterを指定しないと、uu.request.callbackFilter の値を使用します。
uu.request.callbackFilterのデフォルトは 2 です。

Utility

型の相互変換や、検索, 使用頻度の高い文字列操作関数などを提供します。

uu.uid - Generate unique ID - ユニークIDの生成

uu.uid(prefix = "uniqueID") は prefix + ユニークな数字(通し番号) から構成される文字列を返します。

 @param String [prefix] - プリフィクスを指定します。デフォルトは"uniqueID"です。
 @return String         - プリフィクス + ユニークナンバー で構成される文字列を返します。
                          例: "uniqueID1", "uniqueID2"
uu.sprintf

uu.sprintf(format, ...) は ANSI C標準のsprintf関数に、PHPのi18n対応機能を追加したものです。

 @param String  format - フォーマット文字列を指定します。
 @param Mix     [...]  - sprintfに与える引数を指定します。引数は可変個です。
 @return String        - 整形済みの文字列を返します。

Run

format(書式)は、%[arg-index$][flag][width][.precision][size]type となります。

書式指定フィールド指定機能例
arg-index数値数値とダラー("$")により引数を0から始まる番号で呼び出すことができます。
flag#typeがo,x,Xなら文字列の先頭に"0","0x","0X"を追加します。
flag0typeがd,u,fならwidthで指定した幅に達するまで
文字列の先頭を"0"で埋めます(zero padding)。
width数値最低限表示する桁数を指定できます。0で非表示になります。
幅を指定すると右寄せ(align right)で出力されるため、
数値や文字列の桁あわせに利用できます。
iduoxXfsで有効です。		uu.sprintf("%2d", 2) → " 2"
precision数値小数点以下の桁数や文字列の長さを指定できます。
typeがfなら小数点以下の桁数を指定します。
浮動小数点値は丸められる場合があります。0で小数点以下は非表示になります。
typeがsなら文字列の長さを指定します。
指定した長さ以上の文字は切り捨てられます。0で文字列全体が非表示になります。
typed符号付き10進数値(signed decimal number)として出力します。
typeu符号無し10進数値(unsigned decimal number)として出力します。
typeo符号無し8進数値(unsigned octet number)として出力します。
typex符号無し16進数値[小文字](unsigned hex number[lower case])として出力します。
typeX符号無し16進数値[大文字](unsigned hex number[upper case])として出力します。
typef浮動小数点([-]dddd.dddd)(floating-point number)として出力します。
typec文字の数値表現(the character with that ASCII value)として出力します。
types文字列(string)として出力します。
type%パーセント記号("%")そのものを出力します。

以下の書式は使用できません。

書式指定フィールド指定機能
flag-左詰で出力します。
width*引数で幅を指定します。
precision*引数で精度を指定します。
sizellong型に変更します。
size数値数値で型の精度を指定します。
typei符号付き8進数値(signed octet number)として出力します。
typee浮動小数点([-]d.dddde[+/-]dddd)として出力します。
typeg浮動小数点("f","e"の結果でより短い方)として出力します。
typeE浮動小数点([-]d.ddddE[+/-]dddd)として出力します。
typeG浮動小数点("f","E"の結果でより短い方)として出力します。
typen出力済みの文字数を出力します。
typepポインタとして処理します。
uu.trim - Trim both(left and right) - 文字列の両端の空白文字を除去

uu.trim(str) は 文字列(str)の左右から空白文字を除去します。 空白文字には、NULL("\0"),空白(" "),タブ("\t"),改行("\n"),垂直タブ("\v"),復帰("\d")が含まれます。

 @param String str - 文字列を指定します。
 @return String - トリム後の文字列を返します。
    
uu.trim(" hoge "); // "hoge"
uu.notax - Receive JointedString, StringArray and String, return an Array - 結合文字列, 文字列の配列, 文字列を受け取り、配列を返す

uu.notax(tax, param = { sep: ",", fn: undefined, trim: true }) は Taxing型の変数をパースし、 各要素を(もし指定されていれば) fn で評価した StringArray を返します。

 @param Taxing    tax           - 結合文字列, StringArray または 文字列を指定します。
 @param Hash      [param]       - パラメタを指定します。
 @param String    [param.sep]   - セパレータを指定します。デフォルトはカンマ(",")です。
 @param Function  [param.fn]    - 各要素を評価する関数を指定します。デフォルトはundefinedです。
 @param Boolean   [param.trim]  - カンマ結合文字列の各要素の左右の空白文字をトリムする場合はtrueを指定します。デフォルトはtrueです。
                                  taxが文字列や、Arrayで指定されている場合はトリムしません。
 @return StringArray            - taxが結合文字列( " a , b " )なら、各要素をセパレタで分割、左右の空白をトリムし StringArray( [ "a", "b" ]) を返します。
                                  taxが文字列( "ab" )なら、taxを唯一の要素とする StringArray( [ "ab" ] ) を返します。
                                  taxがStringArray( [ "a", "b" ] )ならtaxをそのまま返します。
                                  taxが空の文字列( "" )なら要素数ゼロの StringArray( [] ) を返します。
 @throws TypeError  "uu.notax(tax) bad arg"  引数が文字列でもArrayでもない

    
function toLower(str) { return str.toLowerCase(); }
function toUpper(str) { return str.toUpperCase(); }
var rv = uu.notax("a, b,C,d ", { fn: toLower });
uu.log(rv); // ["a", "b", "c", "d"]

var rv = uu.notax(["a", "b", "c", "d"], { fn: toUpper });
uu.log(rv); // ["A", "B", "C", "D"]

var rv = uu.notax("abcd");
uu.log(rv); // ["abcd"]

var rv = uu.notax("html/body/div[1]", { sep: "/" });
uu.log(rv); // ["html", "body", "div[1]"]
uu.toPair - Make Hash( { key: value } ) from key and value - key, value から Hash( { key: value } )を生成

uu.toPair(key, value) は Hash({ key: value })を返します。

 @param String/Number/Element key - Key(Index)を指定します。
 @param Mix value                 - Value(値)を指定します。
 @return Hash                     - Hash( { key: value } )を返します。
    
uu.log(uu.toPair("key", "value")); // { key: "value" }
uu.toHash - Make Hash from Array and FakeArray - 配列,擬似配列をHash化

uu.toHash(ary) は aryをHashに変換します。

変換するのは数値indexの要素のみで、文字列indexと関数オブジェクト(および"length"プロパティ)は無視します。

重複する数値indexは1つに纏められます。

 @param Array ary - Hash化するArrayを指定します。
 @return Hash     - Hash化したArrayを返します。
Run 
var ary = [undefined, null, 1, 1, "hoge", function(){} ];
ary["hash_index"] = "lost value";
var b = uu.toHash(ary);
uu.log(b); // { undefined: undefined, null: null, 1: 1, hoge: "hoge" }
uu.toArray - Make Array from FakeArray - 擬似配列を配列化

uu.toArray(fake, idx = 0) は FakeArray(fake)の idx 番目以降を、Array化します。

この関数はFakeArray専用です。HashやオブジェクトのArray化には、 uu.indexes や uu.values を使用してください。

 @param FakeArray fake - FakeArrayを指定します。
 @param Number [idx]   - 切り出し開始位置を指定します。デフォルトは0です。
                         FakeArrayの長さ以上の値を指定すると、空のArrayを返します。
 @return Array         - fakeがnullやlengthプロパティを持たないHashなら空のArray([])を返します。
                         fakeがlengthプロパティを持つFakeArrayならArray化したものを返します。
 @see uupaaの開発日記
Run 
uu.toArray(document.getElementsByTagName("*")).forEach(function(v) {
  uu.log(v.tagName); //  "HTML" "HEAD" "TITLE" "SCRIPT" "SCRIPT" "META" "STYLE" "BODY" "A" "A" "SCRIPT" "PRE"
});
uu.indexes - Enumerate the index of the Hash/Array/FakeArray and return an Array - Hash/配列/擬似配列のindexを列挙し配列を返す

uu.indexes(mix) は mix の Index のみを列挙し Array を返します。

mix が Array なら、数字Index のみを列挙し Array を返します。
mix が Hash なら、文字Index と数字Index を列挙し Array を返します。

 @param Hash/Array/FakeArray mix - Hash/Array/FakeArrayを指定します。
 @return Array                   - 要素の値ではなくindexを列挙したArrayを返します。有効な要素がなければ、空のArray([])を返します。
    
var array = [74, 50, 50], hash = { a: 74, b: 50, c: 50 };
array["hash_index"] = "hash";
hash[0] = "hash";
delete array[0];
uu.indexes(array); // [undefined, 1, 2]
uu.indexes(hash); // ["a", "b", "c", 0]
uu.values - Enumerate the value of the Hash/Array/FakeArray and return an Array - Hash/配列/擬似配列の値を列挙し配列を返す

uu.values(mix) は mix の値のみを列挙し Array を返します。

mix が Array なら、数字Index の値のみを列挙しArray を返します。
mix が Hash なら、文字Index と数字Index の値を列挙しArray を返します。

 @param Hash/Array/FakeArray mix - Hash/Array/FakeArrayを指定します。
 @return Array                   - 要素の値だけを列挙しArrayを返します。有効な要素がなければ、空のArray([])を返します。
    
var array = [74, 50, 50], hash = { a: 74, b: 50, c: 50 };
array["hash_index"] = "hash";
hash[0] = "hash";
delete array[0];
uu.values(array); // [50, 50]
uu.values(hash); // [74, 50, 50, "hash"]
uu.converse - Return Hash which replaced value with key of Hash - Hashのkeyとvalueを入れ替えたHashを返す

uu.converse(hash) は hashのIndexと値を入れ替えたHashを生成し返します。

 @param Hash hash - Hashを指定します。
 @return Hash     - Indexと値を入れ替えたHashを返します。
    
var hash = { a: 1, b: 2, c: 3 };
uu.converse(hash); // { 1: "a", 2: "b", 3: "c" }
uu.size - Length of the Hash/Array/FakeArray - Hash/配列/擬似配列の要素数を返す

uu.size(mix) は mixの要素数を返します。

 @param Hash/Array/FakeArray mix - Hash/Array/FakeArrayを指定します。
 @return Number - 要素数を返します。有効な要素がなければ0を返します。
uu.first - First Element of the Hash/Array/FakeArray - Hash/配列/擬似配列の先頭の要素の値を取得

uu.first(mix, missHit = undefined) は mixの先頭の要素を返します。

 @param Hash/Array/FakeArray mix - Hash/Array/FakeArrayを指定します。
 @param Mix [missHit] - 有効な要素が存在しない場合に返す値を指定します。デフォルトはundefinedです。
 @return Mix - 先頭の要素の値を返します。有効な要素が無ければmissHitを返します。
uu.last - Last Element of the Hash/Array/FakeArray - Hash/配列/擬似配列の最後の要素の値を取得

uu.last(mix, missHit = undefined) は mixの最後の要素を返します。

 @param Hash/Array/FakeArray mix - Hash/Array/FakeArrayを指定します。
 @param Mix [missHit] - 有効な要素が存在しない場合に返す値を指定します。デフォルトはundefinedです。
 @return Mix - 最後の要素の値を返します。有効な要素が無ければmissHitを返します。
uu.slim - Remove equivalent value - 配列から重複する値を除去した新しい配列を生成する

uu.slim(ary) は aryから重複する値を除去した新しい配列を生成し返します。

 @param Array ary - 配列を指定します。
 @return Array    - 重複した値を除去した新しい配列を返します。
uu.diet - Hash/Array memory compaction - Hash/Arrayのコンパクト化

uu.diet(mix) は mixから値がundefined, nullの要素を削除した新しいArrayを生成します。

mixがArrayなら、文字列Indexと、値がundefinedとnullの要素を削除した新しいArrayを返します。
mixがHashなら、文字列Indexと数字Indexの要素のうち、値がundefinedとnullの要素を削除した新しいHashを返します。

 @param Hash/Array mix - Hash/Arrayを指定します。
 @return Hash/Array - 有効な要素のみを持つ新しいArrayかHashを返します。
                      有効な要素がなければ、空のArray([])かHash({})を返します。
    
var ary = [null, undefined, 3], hash = { a: null, b: undefined, c: 50 };
ary["hash_index"] = "hash";
hash[0] = "hash";
uu.diet(ary); // [3]
uu.diet(hash); // { c: 50, 0: "hash" }
uu.inRect - Rectangular coordinate - 矩形内(rect)の座標(pos)ならtrue

uu.inRect(rect, pos) は posがrect内にある場合にtrueを返します。

 @param RectHash rect - RectHash( { x, y, w, h } )を指定します。
 @param PosHash pos   - PosHash( { x, y } )を指定します。
 @return Boolean      - posがrectに含まれている場合にtrueを返します。
    
rect━┯━━┓
  ┃  │    ┃
  ┠─pos   ┃
  ┃        ┃
  ┗━━━━┛
uu.delay - Lazy evaluation - 遅延評価

uu.delay(fn, delay = 0)は、delay時間経過後に、fnを呼び出します。

スタックのネストを浅くしたいケースや、スレッド間の依存関係を分断したいケースなどにも利用できます。

引数を渡す場合はクロージャでラップしてください。

 @param Function fn      - 遅延評価する関数を指定します。
 @param Number   [delay] - 遅延時間をms単位で指定します。デフォルトは0です。
 @return Number          - タイマーIDを返します。
      
// 遅延評価 + 引数
var hoge = "hoge";
uu.delay(function() {
  alert(hoge);
}, 1000); // 1秒後に"hoge"を表示する
uu.time - Get current time - 現在時刻を取得

uu.time() は 現在時刻をms単位の数値で返します。

 @return Number - 現在時刻を数値(単位:ms)を返します。
uu.isU - is Undefined

uu.isU(mix) は mix が Undefined 型なら true を返します。

uu.isA - is Array

uu.isA(mix) は mix が Array 型なら true を返します。

uu.isFA - is FakeArray

uu.isFA(mix) は mix が FakeArray なら true を返します。

uu.isE - is Element(is Node)

uu.isE(mix) は mix が ノード (Element) なら true を返します。

uu.isF - is Function

uu.isF(mix) は mix が Function 型なら true を返します。

uu.isN - is Number

uu.isN(mix) は mix が Number 型なら true を返します。

uu.isB - is Boolean

uu.isB(mix) は mix が Boolean 型なら true を返します。

uu.isS - is String

uu.isS(mix) は mix が String 型なら true を返します。

uu.die - Critical error handler

uu.die(type, p1, p2) は 例外を生成します。

uu.no - Every return false

uu.no() は 常に false を返します。

uu.echo- Every return first argument

uu.echo(arg) は arg を返します。

uu.mute - Every return undefined

uu.mute(mix) は何もしません。戻り値には undefined が返ります。

Log

Log出力をサポートします。

uu.log

uu.log(fmt, arg ... ) は ログを出力します。

Firebugがインストールされている環境では console.logに出力し、 uu.module.log2(devモジュール)が読み込まれている環境では 画面上のログレイヤーに出力します。

 @param String/Mix [fmt] - 出力フォーマットを指定します。省略可能です。
                           省略すると、指定された引数を解析し、妥当な形で出力します。

以下のバリエーションがあります。詳細についてはFirebugのドキュメントを参照してください。

CrossBrowser

クロスブラウザを実現します。

Array.indexOf- Returns the first index at which a given element can be found in the array, or -1 if it is not present
- 配列の先頭から値を検索し最初のindexを返す。無ければ-1を返す

Array.prototype.indexOf(value, index = 0) は JavaScript 1.6準拠のメソッドで、 Arrayの先頭から値を検索し最初のindexを返します。
該当する値が無ければ-1を返します。

 @param Mix     value   - 検索する値を指定します。検索は===演算子で比較します。
 @param Number  [index] - 検索を開始するindexを指定します。負の値はArrayの末尾からのオフセットとみなします。デフォルトは0です。
 @return Number - 検索成功で0以上の値を返します。失敗で-1を返します。
 @see Array:indexOf - Arrayの末尾から値を検索 - MDC
      
var rv = [0, 1, 1, 2];
rv["HashIndex"] = "HashIndex";
rv.indexOf(1);       // 1
rv.indexOf(1, -2);   // 2
rv.indexOf("1");     // -1
rv.indexOf("HashIndex");  // -1 見つからない
Array.lastIndexOf - - Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex
- 配列の後方から値を検索し最初のindexを返す。無ければ-1を返す

Array.prototype.lastIndexOf(value, index = 0) は JavaScript 1.6準拠のメソッドで、 Arrayの後方から値を検索し最初のindexを返します。
該当する値が無ければ-1を返します。

 @param Mix     value   - 検索する値を指定します。検索は===演算子で比較します。
 @param Number  [index] - 検索を開始するindexを指定します。負の値はArrayの末尾からのオフセットとみなします。デフォルトは0です。
 @return Number - 検索成功で0以上の値を返します。失敗で-1を返します。
 @see Array:lastIndexOf - Arrayの先頭から値を検索 - MDC
      
var rv = [0, 1, 1, 2];
rv["HashIndex"] = "HashIndex";
rv.lastIndexOf(1);       // 2
rv.lastIndexOf(1, -2);   // 2
rv.lastIndexOf("1")      // -1
rv.lastIndexOf("HashIndex");  // -1 見つからない
HTMLElement.prototype.outerHTML

IEの独自実装である outerHTML を Firefox2+ でエミュレートします。

HTMLElement.prototype.innerText

IEの独自実装である innerText を Firefox2+ でエミュレートします。

System global instance

システム全体で共用するグローバルなインスタンスがあります。

uu.url
uu.url は uu.module.url のインスタンスです。
uu.vtmHighSpeed
uu.vtmHighSpeed は uu.module.virtualTimer のインスタンスです。 高いレスポンスが求められるシーンで活躍する仮想タイマー機能を提供します。
uu.vtmMidSpeed
uu.vtmMidSpeed は uu.module.virtualTimer のインスタンスです。 中程度のレスポンスが求められるシーンで活躍する仮想タイマー機能を提供します。
uu.vtmLowSpeed
uu.vtmLowSpeed は uu.module.virtualTimer のインスタンスです。 隠密動作が求められる場合に使用する仮想タイマー機能を提供します。
uu.msg
uu.msg は uu.module.messagePump のインスタンスです。 メッセージポンプ機能を提供します。
uu.customEvent
uu.customEvent は uu.module.customEvent のインスタンスです。 DOM標準外のイベント(フォントのリサイズイベントなど)をハンドリングしメッセージを通知する機能を提供します。
uu.imageset
uu.imageset は uu.module.imageset のインスタンスです。 画像の読み込み状況を把握し、メッセージを通知する機能を提供します。
uu.color
uu.color は uu.module.color のインスタンスです。 色名辞書("skyblue", "tomato")や、色成分(RGB, RGBA, HSV, #FFF)を扱う機能を提供します。
uu.effect
uu.effect は uu.module.effect のインスタンスです。 アニメーション機能を提供します。
uu.agent
uu.agent は uu.module.agent のインスタンスです。 スパイ活動を行い、メッセージを通知する機能を提供します。
uu.config
uu.config は uu.module.config のインスタンスです。 システムのチューニング方法を提供します。

Why Not omni-selector? - なぜ包括的(万能)なセレクタが無いのか?

uupaa.js のゴールの一つには、WebOS のフロントエンド(GUI)があります。WebOS のベースとなるライブラリには高い応答性が求められます。

「セレクタで選択した要素が、各メソッド内のthisになる」というjQueryの特徴は、
ライトウエイトな用途(セレクタで検索 → スタイル変更 等)では良く使うが、 内容が高度で複雑になるほど、使用頻度の低い邪魔(モッサリする原因を作るおせっかい)な機能だということがわかりましたので、 (uupaa.js v0.4で実装しかけた) jQuery ライクな構文を解釈し実行するモジュールは一旦削除しました。

なんでも食べちゃう $(...) や $$(...) などの万能セレクタは、あれば確かに便利ですが、
最終的には document.getElementById や document.getElementsByTagName が実行されるようなケースでも、
まず RegExp で文字列をパースする処理が走り、さらに Element をラップしたオブジェクトを生成して返すような実装(アプローチ)は富豪的であり、 レスポンス悪化を招く原因になります。

uupaa.jsに実装されているセレクタは、基本的に ElementArray と呼ばれるシンプルな配列を返します。
将来(※)を見据え、携帯端末やネットブック上で動作するJavaScriptが実用的な速度を出すためには、
配列を配列のまま扱うことこそが、資源効率と実行速度を両立するベターな方法と(現時点では)考えます。
PCにフォーカスした富豪的なアプローチの製品は、Web3.0時代には通用しないかもしれません。

※ ウエアラブルなモバイル端末は、将来の日本を支える主力商品になるはずです。

「速度を計ってみたら、JavaScript::RegExp と String.toLowerCase() は同程度に早いから大丈夫」と思う人も中には居るでしょう。
しかし、モバイル環境でも同じ結果になるのでしょうか?
そのような考えは、リソースが限定された組み込み機器においても「++i と i++ は、副作用以外は同じもの」や「libc::tolower() と C++::Boost::regex() は同程度」と主張しているようにも聞こえます。

必要な道具は用意しました。後はパズルを解いてください。

About dependence to the XPath library - XPathライブラリへの依存について

uupaa.jsは多様なセレクタで要素を選択することが可能です。

uu.xpath と uu.css は、内部でXPath(document.evaluate)を使用しているため、 XPathを標準でサポートしていないブラウザ(IE等)では、XPathをエミュレーションするライブラリ(JavaScript-XPath)が必要になります。

JavaScript-XPathは、 Version 0.5以上のuupaa.jsに同梱されています。(TNX! id:amachang)

XPathライブラリが存在しない環境で、XPathに依存している関数(uu.xpath, uu.css)を呼び出すと例外が発生します。