jsdo.it で CoffeeScript を使う方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

前回に引き続き CoffeeScript についてのエントリーです.

今回は jsdo.it で CoffeeScript を使う方法を紹介します.

HTML5 Canvas を使ったサンプルもあるよ♪


             
                  
                   
         }   }{  {
        {  }{  }  }                    _____       __  __
         }{ }{  { )                   / ____|     / _|/ _|
     .- { { }  { }} -.               | |     ___ | |_| |_ ___  ___
    (  ( } { } { } }  )              | |    / _ \|  _|  _/ _ \/ _ \
    |`-..________ ..-'|              | |___| (_) | | | ||  __/  __/
    |                 |               \_____\___/|_| |_| \___|\___|
    |                 ;--.
    |                (__  \            _____           _       _
    |                 | )  )          / ____|         (_)     | |
    |#-..________ ..-#|/  /          | (___   ___ _ __ _ _ __ | |_
    |#################(  /            \___ \ / __| '__| | '_ \| __|
    |#################|/              ____) | (__| |  | | |_) | |_
    |#################|              |_____/ \___|_|  |_| .__/ \__|
     `-#############-'                                  | |
                                                        |_|

Demo

Demo

使い方はとても簡単です.

jsdo.it の HTML に下記のコードを加えるだけです.

<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script type="text/coffeescript">

# TODO: ここに CoffeeScript のコードを書く
document.write "Hello, world!"

</script>

# TODO: 以下に CoffeeScript のコードを書いてください.

注意点としては, JavaScript ではなく HTML にコードを書いていくという点です.

JavaScript の方に書く方法もあるのですが, こちらの方法はダウンロードした際にファイルが分離してしまい動かなくなってしまうので あまりオススメしません.

下の CoffeeScript Template を fork して使ってもらっても構いません.

CoffeeScript Template – jsdo.it – share JavaScript, HTML5 and CSS

ついでに Canvas Version も公開

HTML5 Canvas on CoffeeScript – jsdo.it – share JavaScript, HTML5 and CSS

次回は JavaScript と CoffeeScript の比較サンプルを公開しようと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT