google closureの基本 - ソフトウェアエンジニアのブログ

google closureを使い始めました。
スクリプトをHEAD内に記述すると動きません。
原因はgoog.require()にあるようです。

今回の反省と備忘録も控える意味合いで簡単なサンプルをつくって記録しておきます。
練習がてらに簡単なサンプル作ってみました。
最初にページを読み込んだとき、ボタンをクリックした時にアラートがあがるだけの簡単なものです。

index.html

<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>sample</title>
 <link rel="stylesheet" href="closure-library/closure/goog/css/dialog.css">
 <script src="closure-library/closure/goog/base.js"></script>
 <script src="hello.js"></script>
</head>
<body onload="sayHi()">

 <button id='button1'>test</button>
 
 <script>
  goog.events.listen(window, goog.events.EventType.LOAD, function(e) {
      alert('onload!');
  });
  
  goog.events.listen(goog.dom.getElement('button1'), goog.events.EventType.CLICK, function(e) {
      alert('button1 clicked!');
  });
 </script>
</body>
</html>

hello.js

goog.require('goog.dom');

function sayHi() {
  var newHeader = goog.dom.createDom('h1', {'style': 'background-color: #EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
}

イベントリスナについて

イベントリスナを追加する際はbodyの中に記述します。

ページロード時の処理

goog.events.listen(window, goog.events.EventType.LOAD, function(e) {
      alert('onload!');
  });

button1をクリックした時の処理

goog.events.listen(goog.dom.getElement('button1'), goog.events.EventType.CLICK, function(e) {
      alert('button1 clicked!');
  });