読者です 読者をやめる 読者になる 読者になる

ソフトウェアエンジニアのブログ

暇つぶしに書いてます。他に技術的なことは[http://qiita.com/nsas454]に書いてますのでそちらも見てください。

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!');
  });