<section id="live">
  <h1>Live Script事始め</h1>
  <p>CodePen Settingの旅、JS編第2回。LiveScriptはCoffeScriptの拡張言語らしい。<br>
CoffeeScriptはRubyライクとのことだったがLiveScriptはHuskellライクに関数型のような書き方ができるそうな。</p>
  <section id="hello">
    <h2>特徴</h2>
    <ul>
      <li>コメントは#（1行）は使えるが###（複数行）は使えない？</li>
      <li>CoffeeScriptそのものの記述でも動く(?)</li>
      <li>関数が!で実行できるらしいが…</li>
      <li>カリー化とは何か？</li>
    </ul>
  </section>
  <div><button id="btn">ここ押せワンワン</button>
</section>
#btn {
  display: inline-block;
padding: 1em;
background: #666;
border-radius: 5px;
  color: #fff;
}

#btn:hover {
  opacity: 0.7;
  cursor : pointer;
}
/*関数
function hellow(){
window.alert('hellow CoffeeScript');
window.alert('こんにちは、珈琲スクリプト');
window.alert('おしまい');
}
*/

#関数
hellow  = ->
  window.alert 'hellow LiveScript' 
  window.alert 'こんにちは、生スクリプト'
  window.alert 'おしまい'

/*変数
var btn = document.getElementById('btn');
*/

#変数
btn = document.getElementById 'btn'

/*イベント
btn.addEventListener('click', hellow, false);
*/

#イベント
btn.addEventListener 'click',  hellow, false
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.