Days on the Moon

前の記事で書いた Bug 306664 が修正済みとなり、Firefox 1.5 Beta 1 からは晴れて JavaScript 1.6 に対応するようになった。JavaScript 1.6 の新機能は前の記事に書いたとおり。実際に使用するには、

<script type="application/javascript; version=1.6">
// <![CDATA[

var xml = <element>content</element>;

// ]]>
</script>

という風に type 属性に version=1.6 パラメータを指定する。e4x=1 と指定しなくても E4X は有効になるし、逆に e4x=0 と指定しても無効にはならない。

<script language="JavaScript1.6">

と指定されたスクリプトも動作するが、この場合 E4X は有効にはならない。

<script type="application/javascript; version=1.6">
<!--

...

// -->
</script>

HTML 4 では script 要素中に </ という文字列が現れてはいけないので、E4X を使う場合は外部スクリプトにしたほうがいいだろう。XHTML では CDATA セクションでスクリプトの内容を囲んでおいたほうがいい。

「JavaScript、マークアップビルダ、存在しないメソッド」(Collection & Copy) を読んで。そういえば Firefox 1.5 には XMLContentBuilder というのがあった。XTF の一部として提供されているのだが、これを使うと (といっても XPCOM コンポーネントなので通常の Web 上では使えないが) 例えば table の作成は以下のように書ける、と思う。

var data = [["A1", "A2"], ["B1", "B2"]];
var b = Components.classes["@mozilla.org/xtf/xml-contentbuilder;1"]
                  .createInstance(Components.interfaces.nsIXMLContentBuilder);

b.setDocument(document);
b.setElementNamespace("http://www.w3.org/1999/xhtml");

b.beginElement("table");
  b.attrib("summary", "サンプルの表");
  b.beginElement("tbody");
    for (var i = 0; i < data.length; i++) {
      b.beginElement("tr");
        var cells = data[i];
        for (var j = 0; j < cells.length; j++) {
          b.beginElement("td");
            b.textNode(cells[j]);
          b.endElement(); // td
        }
      b.endElement(); // tr
    }
  b.endElement(); // tbody
b.endElement(); // table

document.body.appendChild(b.root);

beginElement と endElement で囲まなければならないっていうのがちょっと泥臭いような気もするが、こうすることで途中に文をいくらでも挟めるのは便利。

それから、実は JavaScript でも存在しない関数を呼ぶことはできる。SpiderMonkey (Firefox などに使われている JavaScript エンジン) でしか利用できないのだが、__noSuchMethod__ というのがそれだ。__noSuchMethod__ というメソッドを定義しておくことによって、存在しないメソッドが呼ばれたときは代わりにそれが呼ばれるようになる。(参考: Bug 196097 Attachment 134673)

Object.prototype.__noSuchMethod__ = function (name, args) {
  alert("存在しないメソッド " + name + " が呼ばれました。");
};

というわけでこれを使えばこのようなマークアップビルダ (Firefox など Gecko 系専用) が可能になる。

var b = new MarkupBuilder();
b.p(null,
    "わからないことを ",
    b.a({href: "http://www.google.co.jp/"}, "Google"),
    " で調べる。");

<p>
  わからないことを
  <a href="http://www.google.co.jp/">Google</a>
  で調べる。
</p>