やりたいこと
coffeescriptで生成したjavascriptでDOM操作をしたい今回学んだこと
coffeescriptの１行目に$ ->
と記述することで、それ以下の命令がdocument読み込み完了時に実行される。
jQueryの下記の記述と同等。
$(function() {
//何らかの処理
});
ディレクトリ構造
shusuke@shusuke-VirtualBox:~/practice/coffee$ pwd/home/shusuke/practice/coffee
shusuke@shusuke-VirtualBox:~/practice/coffee$ tree
.
├── bin
│ └── hello.js <-coffeescriptをコンパイルしてできたJSファイル
├── lib
│ └── jquery-1.9.0.min.js
├── src
│ └── hello.coffee <-coffeescriptのソースファイル
└── view.html <-練習用のHTML
view.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./lib/jquery-1.9.0.min.js"></script>
<!-- javascriptを読み込む -->
<script type="text/javascript" src="./bin/hello.js"></script>
</head>
<body>
<div id="apple">りんご</div>
<div id="banana">バナナ</div>
<div id="hoge">HOGE</div>
</body>
</html>
src/hello.coffee
$ ->console.log "LOG TEST"
hoge = $('#hoge')
msg = if hoge is null then "hoge is null" else "hoge is not null"
console.log msg
console.log hoge.html()
bin/hello.js
// Generated by CoffeeScript 1.4.0(function() {
$(function() {
var hoge, msg;
console.log("LOG TEST");
hoge = $('#hoge');
msg = hoge === null ? "hoge is null" : "hoge is not null";
console.log(msg);
return console.log(hoge.html());
});
}).call(this);
実行結果（HTML表示時のjavascriptコンソール）
[23:24:31.514] LOG TEST[23:24:31.514] hoge is not null
[23:24:31.515] HOGE
