Glowに用意されているモジュールは次のとおり。

  • glow … ネームスペース/コアライブラリ
  • glow.anim … シンプルながら強力なアニメーション
  • glow.datam … JSONやクエリ文字列のシリアライズ/デシリアライズ
  • glow.domm … DOMへのアクセス/操作
  • glow.dragdropm … シンプルなドラッグ&ドロップ操作
  • glow.embedm … Flashオブジェクトの検出
  • glow.ebentsm … イベントリスナの登録/削除
  • glow.formsm … HTMLフォームのバリデート
  • glow.langm … オブジェクトのクローン生成や文字列操作といった有用なメソッド集
  • glow.netm … サーバ間とのデータ通信
  • glow.tweensm … アニメーション用の関数群

まずは上記より、glowモジュール内のreadyメソッドを紹介しておこう。glow.ready()はDOMの構築が完了した段階で関数を実行するメソッドだ。jQueryでいうと、$(document).ready()にあたる。

ready.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
    <head>
        <title>Hello, Glow! / glow.ready()</title>
        <script type="text/javascript" src="./glow/1.5.1/core/core.js"></script>
        <script type="text/javascript">
        <!--
        glow.ready
        (
           function()
           {
               alert('glow DOM Ready!');
           }
        );
        -->
        </script>
    </head>

    <body>

    </body>
</html>

Webブラウザ上でDOMの構築が完了した時点でアラートを表示する。これをWebブラウザで表示してみよう。

アラートが表示された。後述するイベントリスナの登録はglow.ready内でおこなおう

このほかにもWebブラウザのバージョンやインスタンスのユニークID、Glowのバージョンを格納するプロパティが用意されている。

Properties

  • env … Webブラウザの情報を格納
  • isDomReady … DOMの構築が完了しているかを格納
  • isReady … DOM構築をふくむGlowのロードがが完了しているかを格納
  • isSupported … WebブラウザがBBC's Browser Support GuidelinesのLevel 2に対応しているかを格納
  • UID … GlowインスタンスのユニークIDを格納
  • VERSION … Glowのバージョンを格納

ready.htmlのロード完了後にFirebugで各プロパティの値を表示したところ