たとえば

js
  • こういう(↓) HTML を、 JavaScript で簡潔に表現できたり
[199 byte]

<body>
<h1>-DEMO-</h1>
<div id="a" class="mark">node1</div>
<div id="b" class="mark">node2</div>
<div id="c" class="mark">
  <ul>
    <li>node3-1-1</li>
    <li>node3-1-2</li>
    <li>node3-1-3</li>
  </ul>
  node3
</div>
</body>
[191 byte]

  body(h1(tx("-DEMO-")),
       div("id:a,class:mark", tx("node1")),
       div("id:b,class:mark", tx("node2")),
       div(ul(li(tx("node3-1-1")),
              li(tx("node3-1-2")),
              li(tx("node3-1-3"))), "id:c,class:mark", tx("node3")));
  • jQuery ライクな I/F も使えちゃったり
  $("body div ul>li").hover(function(e) {
    ev(e).style.color = "red";
  }, function(e) {
    ev(e).style.color = "black";
  });
  • ECMAScript-262 5th で追加された機能が使えたり
  • HTML5::Canvas や HTML5タグの一部が使えたり
  • クラスをサポートしてて、「あーデザパタのアレねー」みたいな機能も盛り込んでたり
  • 角丸やドロップシャドウなどの、CSS3 の目玉的な機能がいろいろと使えたり
  • IE6 のケアサポートも色々できちゃったり、
  • CSS3 セレクタでWebページのデザインができちゃったり
  • 日々のデザインワークや、Webアプリ作成に役立つ機能を、プラグインとして後付できたり
  • ユーザの趣向(用途)に応じて、OOP的(構造重視), C的(速度重視), jQuery的(ショートコード重視) な I/F が選べたり
  • Made in Japan だったりする

そんな JavaScript ライブラリ。

ごく簡単なサンプル

http://pigs.sourceforge.jp/blog/20090922/div.htm

<!doctype html><html><head><title></title>
<script src="uu.js"></script>
<script src="uu.ev.js"></script>
<script src="uu.css.js"></script>
<script src="uu.jam.js"></script>
<script src="uu.query.js"></script>
<style>
div { background-color: red; }
.mark { background-color: lime; }
</style>
<script>
function boot(uu, $) {
  uu.exp();

  body(h1(tx("-DEMO-")),
       div("id:a,class:mark", tx("node1")),
       div("id:b,class:mark", tx("node2")),
       div(ul(li(tx("node3-1-1")),
              li(tx("node3-1-2")),
              li(tx("node3-1-3"))), "id:c,class:mark", tx("node3")));

  $("body div ul>li").hover(function(e) {
    ev(e).style.color = "red";
  }, function(e) {
    ev(e).style.color = "black";
  });
}
</script>
</head><body>

<pre>
&lt;h1&gt;-DEMO-&lt;/h1&gt;
&lt;div id="a" class="mark"&gt;node1&lt;/div&gt;
&lt;div id="b" class="mark"&gt;node2&lt;/div&gt;
&lt;div id="c" class="mark"&gt;
  &lt;ul&gt;
    &lt;li&gt;node3-1-1&lt;/li&gt;
    &lt;li&gt;node3-1-2&lt;/li&gt;
    &lt;li&gt;node3-1-3&lt;/li&gt;
  &lt;/ul&gt;
  node3
&lt;/div&gt;
</pre>

</body></html>