Coffee script ruby style язык транслируемый в javascript, т. е. Транслятор Вы можете скачать на сайте проекта: http://jashkenas.github.com/coffee-script/
там же небольшое руководство по использованию.
Все.
Coffee script — это такая вещь которая позволяет нудные выкладки на javascript представить в синтаксисе похожем на ruby — гораздо удобном и понятном. Сам Coffee-script браузерами не поддерживается (надеюсь, что пока, ну или хотя бы в виде плагина к браузеру). Поэтому нам нужен транслятор на javascript он может быть инсталлируемым или в виде подключаемого javascript скрипта.
Coffee script не одинок существует к примеру Objective-J (Читайте на wikipedia).
Главное что я хочу показать в этом посте — это то как запустить coffee-script на страничке. Как ни странно, когда я искал информацию как «готовить» скрипты на coffeescriptе, нигде не было примера того. как прикрутить скрипт к обычной html страничке без предварительной трансляции в javascript. Такая возможность позволит протестировать код и посмотреть кофе скрипт в действии. Для production он может быть тяжеловат — транслятор у меня весил 160 Kb.
В общем, смотрите
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CoffeeScript</title>
<!-- Указываем транслятор coffee: -->
<!--<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>-->
<script src="coffee-script.js"></script>
<!-- Демонстрация возможности запуска coffee скрипта + взаимодействие с объектами DOM -->
<script type="text/coffeescript">
# coffee class:
class Demo1
constructor: (@name) ->
show1: (param1) ->
console.log "#1: "+@name + " &&& " + param1
show2: (param1) ->
console.log "#2: "+@name + " &&& " + param1
# object:
math =
cube: (x) -> x * x * x
square: (x) -> x * x
# coffee function
demo_function = () -> alert "You click on test node"
# глобальные объекты javascript доступны и из coffee-script
window.onload = () -> console.log "Welcome"
# добавляем обработчик события onclick
document.getElementById('testNode1').onclick= demo_function
document.getElementById('testNode2').onclick= ()-> alert "Hello 2"
# autostart as window.onload :
(() ->
demo= new Demo1 "xxx"
demo.show1 "yyy"
demo.show2 "www"
)
# end without '()' at the end, because no input's!
# Look on next ... on load:
((x) -> console.log "input value: "+x )(2)
</script>
</head>
<body>
<h1>hello <span id="message"></span></h1>
<p id="testNode1">Test Node 1</p>
<p id="testNode2">Test Node 2</p>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Так же можете почитать http://blog.w3orme.com/2011/04/coffeescript.html
