Статьи

Счастливых праздников от CoffeeScript

Январь 12, 2019

Праздники на нас. Чтобы помочь вам прийти в настроение, я создал приложение HTML5 / CoffeeScript, которое представляет праздничную и анимированную сцену (с фоновой музыкой). Хотя это приложение несерьезно, оно демонстрирует концепции HTML5 и CoffeeScript, которые могут оказаться полезными в других проектах.

Эта статья сначала знакомит вас с приложением, представляет его компоненты и показывает, как скомпилировать его пару исходных файлов CoffeeScript в их эквивалентные исходные файлы JavaScript. Далее статья показывает, как встроить это приложение в веб-страницу. Связанный zip-файл содержит исходный код и сопутствующий PDF-файл, который проведет вас через код каждого файла CoffeeScript.

ПРИМЕЧАНИЕ. Эта статья была протестирована с браузерами Chrome 23.0.1271.95 m, Firefox 17.0.1, Internet Explorer 9.0.8112.16421, Opera 12.02 и Safari 5.1.5.

Представляем HHFCS

Happy Holidays from CoffeeScript (HHFCS) — это приложение HTML5 / CoffeeScript, которое использует API-интерфейс Canvas HTML5 для представления сцены зимнего леса ночью. Снежинки падают, а пара венков мигают на переднем плане. Кроме того, во время воспроизведения музыки Jingle Bells исчезает центрированное сообщение, благодаря HTML5 Audio API. Скриншот пейзажа показан на рисунке 1.

HHFCS состоит из нескольких файлов, которые организованы в каталог HHFCS и его подкаталоги audio и images . В следующем списке представлены эти файлы:

  • HHFCS/audio/jb.mp3 хранит музыку Jingle Bells в формате MP3. Этот файл используется всеми браузерами, кроме Firefox и Opera, которые поддерживают формат Ogg .
  • HHFCS/audio/jb.ogg хранит музыку Jingle Bells в формате Ogg. Этот файл используется Firefox и Opera.
  • HHFCS/HHFCS.coffee хранит код CoffeeScript для основного класса приложения.
  • HHFCS/HHFCS.html хранит загрузочный HTML-код и три строки JavaScript для запуска HHFCS.
  • HHFCS/HHFCS.js хранит JavaScript-эквивалент HHFCS.coffee .
  • HHFCS/images/message.png хранит сообщение, которое исчезает в поле зрения.
  • HHFCS/images/scene.png хранит сцену зимнего леса, которая является модифицированной версией изображения общественного достояния, расположенного здесь .
  • HHFCS/images/wreath0.png хранит первый кадр HHFCS/images/wreath0.png анимации венка. Все три кадра любезно предоставлены Free Christmas Gifts .
  • HHFCS/images/wreath1.png хранит второй кадр HHFCS/images/wreath1.png анимации венка.
  • HHFCS/images/wreath2.png хранит третий кадр HHFCS/images/wreath2.png анимации венка.
  • HHFCS/Snowflake.coffee хранит код CoffeeScript для класса приложения Snowflake .
  • HHFCS/Snowflake.js хранит JavaScript-эквивалент Snowflake.coffee .
  • HHFCS/stripes.png хранит образец тростника леденца для использования в качестве фонового изображения веб-страницы.
  • HHFCS/title.png хранит HHFCS/title.png веб-страницы в виде льда. Это изображение было создано с помощью онлайн- генератора логотипов и имен по академической лицензии.

Поскольку браузеры не распознают CoffeeScript, два исходных файла CoffeeScript должны быть переведены в эквивалентный JavaScript. Инструкции на coffeescript.org рассказывают, как загрузить и установить компилятор CoffeeScript. Следующие командные строки используют этот компилятор для перевода этих файлов: 

  кофе - компилировать - голый HHFCS
 кофе --компилировать - голая снежинка

При компиляции этих исходных файлов вы должны указать опции coffee --compile и --bare . Параметр --compile компилирует исходный файл CoffeeScript в исходный файл JavaScript с тем же именем, а параметр --bare не --bare оболочку безопасности функции верхнего уровня .

Встраивание HHFCS в веб-страницу

HHFCS должен быть встроен в веб-страницу, чтобы ее можно было запустить. Я создал небольшой HTML-файл HHFCS.html который выполняет эту задачу. В листинге 1 представлено содержимое этого файла. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Happy Holidays from CoffeeScript </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script src="HHFCS.js"> </script> <script src="Snowflake.js"> </script> </head> <body style="text-align: center; background-image: url('stripes.png'); background-repeat: repeat"> <img src="title.png"> <script> var DELAY = 40; HHFCS.init(DELAY); setInterval("HHFCS.draw()", DELAY); </script> </body> </html>

Листинг 1: Встраивание HHFCS в веб-страницу через файл HHFCS.html

В листинге 1 сначала представлено объявление < !DOCTYPE> которое сообщает браузеру, какая версия HTML предназначена для страницы. Это объявление присутствует, чтобы запретить Internet Explorer генерировать сообщение об ошибке «Объект не поддерживает свойство или метод getContext» при попытке получить контекст холста.

Чуть позже в листинге 1 представлены тег. Этот тег определяет тип содержимого страницы как ISO-8859-1, чтобы Firefox не жаловался на необъявленную кодировку символов.

Продолжая, листинг 1 представляет элементы для загрузки HHFCS.js и Snowflake.js , а затем закрашивают полосатый фон с помощью свойств CSS background-image и background-repeat . Наконец, в листинге 1 представлен короткий скрипт JavaScript, который создает переменную DELAY (описывающую задержку в миллисекундах), вызывает свойство функции init() объекта HHFCS с этой задержкой и многократно выполняет свойство функции draw() объекта каждые миллисекунды DELAY через setInterval("HHFCS.draw()", DELAY) вызов.

Вывод

Я обнаружил, что гораздо проще (и быстрее) писать HHFCS на CoffeeScript, чем на JavaScript. Поскольку HHFCS — это мое первое приложение CoffeeScript, я, вероятно, не использовал CoffeeScript в полной мере, и поэтому я оставляю вам возможность сделать код более CoffeeScriptish. Обязательно ознакомьтесь с сопутствующим файлом PDF в соответствующем кодовом файле этой статьи, чтобы узнать, как работает приложение. Счастливых праздников от CoffeeScript, JSPro и меня!

36
Share: