<section id="coffee">
  <h1>Coffee Script事始め</h1>
  <p>CodePen Settingの旅、JS編第一回。Coffer Scriptは少ない記述量で済むAltJS。<br>
少ない記述量といえばjQueryだが、AltJSはコンパイルする。</p>
  <section id="hello">
    <h2>基本構文</h2>
    <ul>
      <li>コメントは#(1行)か###(複数行)</li>
      <li>文末のセミコロン不要</li>
      <li>関数、メソッドのカッコ不要</li>
      <li>変数のvar不要</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 CoffeeScript' 
  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.