В книге рассмотрены все важнейшие навыки работы с JavaScript, HTML5 и CSS3, требующиеся разработчику, чтобы преуспеть в создании современного клиентского кода. Изучая эту книгу, вы напишете четыре веб-приложения. Каждому приложению посвящена отдельная часть книги, а каждая глава добавляет в создаваемое приложение новые функциональные возможности. Создание этих четырех веб-приложений даст вам возможность изучить все технологии, требуемые для создания клиентской части.
• Ottergram. Наш первый проект посвящен веб-фотогалерее. Создание Ottergram научит вас основам программирования для браузеров с помощью языка разметки HTML, таблиц стилей CSS и языка программирования JavaScript. Вы вручную создадите пользовательский интерфейс и узнаете, как браузер загружает и визуализирует контент.
• CoffeeRun. Частично форма заказа кофе, частично — список заказов. CoffeeRun познакомит вас с множеством методов языка программирования JavaScript, включая написание модульного кода, использование преимуществ замыканий и взаимодействие с удаленным сервером с помощью технологии Ajax.
Далее под катом...
• Chattrbox. Часть, описывающая приложение Chattrbox, — самая короткая, и это приложение больше всего отличается от остальных. В нем будет использоваться язык программирования JavaScript для создания системы общения в Интернете, включая написание сервера чата с помощью платформы Node.js, а также браузерного клиента для чата.
• Tracker. Последний проект использует Ember.js — один из самых функциональных фреймворков для разработки клиентской части. Мы напишем приложение для каталогизации случаев наблюдения редких, экзотических и мифических существ. По ходу дела вы узнаете, как использовать возможности богатейшей экосистемы, лежащей в основе фреймворка Ember.js.
По мере создания этих приложений вы познакомитесь с множеством инструментов, включая:
— Текстовый редактор Atom и некоторые полезные плагины для работы с кодом;
— Источники документации, например Mozilla Developer Network;
— Командную строку с использованием приложения терминала OS X или командной строки Windows;
— Утилиту browser-sync;
— Инструменты разработчика браузера Google Chrome (Google Chrome’s Developer Tools);
— Файл normalize.css;
— Фреймворк Bootstrap;
— Библиотеки jQuery, crypto-js и moment;
— Платформу Node.js, систему управления пакетами Node (npm) и модуль nodemon;
— Протокол WebSockets и модуль wscat;
— Компилятор Babel и модули Babelify, Browserify и Watchify;
— Фреймворк Ember.js и такие дополнения к нему, как интерфейс командной строки Ember CLI, плагин для Chrome Ember Inspector, дополнение Ember CLI Mirage и шаблонизатор Handlebars;
— Систему управления пакетами Bower;
— Систему управления пакетами Homebrew;
— Утилиту Watchman.
Отрывок. Организация цикла по массиву миниатюр
Связывание миниатюр с кодом обработки событий будет быстрым и несложным делом. Мы напишем функцию, которая станет отправной точкой всей логики Ottergram. В других языках программирования, в отличие от JavaScript, есть встроенный механизм запуска приложения. Но не волнуйтесь — его достаточно легко можно реализовать вручную.
Начнем с добавления функции initializeEvents в конец файла main.js. Этот метод свяжет воедино все шаги по превращению Ottergram в интерактивное приложение. Во-первых, он получит массив миниатюр. Далее он пройдет в цикле по массиву, добавляя обработчик нажатий для каждой из них. После написания этой функции мы добавим вызов функции initializeEvents в самый конец файла main.js для ее запуска.
В теле нашей новой функции добавьте вызов функции getThumbnailsArray и присвойте результат (массив миниатюр) переменной thumbnails:
...
function getThumbnailsArray() {
...
}
function initializeEvents() {
'use strict';
var thumbnails = getThumbnailsArray();
}Далее нам нужно пройти в цикле по массиву миниатюр, по одному элементу за раз. При обращении к каждому из них мы будем вызывать метод addThumbClickHandler и передавать ему элемент миниатюры. Это может показаться несколькими шагами, но поскольку thumbnails — настоящий массив, сделать все это можно с помощью вызова одного-единственного метода.
Добавьте вызов метода thumbnails.forEach в файл main.js и передайте его функции addThumbClickHandler в качестве обратного вызова.
...
function initializeEvents() {
'use strict';
var thumbnails = getThumbnailsArray();
thumbnails.forEach(addThumbClickHandler);
}Обратите внимание, что вы передаете в качестве обратного вызова поименованную функцию. Как вы прочтете далее, это не всегда хорошее решение. Однако в данном случае оно сработает как надо, поскольку функции addThumbClickHandler требуется только та информация, которая будет ей передаваться, когда ее будет вызывать метод forEach, — элемент массива thumbnails.
Наконец, чтобы увидеть все это в действии, добавьте вызов функции initializeEvents в самый конец файла main.js:
...
function initializeEvents() {
'use strict';
var thumbnails = getThumbnailsArray();
thumbnails.forEach(addThumbClickHandler);
}
initializeEvents();Помните, браузер выполняет код по мере чтения каждой строки вашего JavaScript. На протяжении большей части файла main.js он просто выполняет объявления переменных и функций. Но когда он дойдет до строки initializeEvents();, он выполнит эту функцию. Сохраните и вернитесь в браузер. Нажмите на несколько различных миниатюр и полюбуйтесь на плоды своих трудов (рис. 6.28).
Откиньтесь на спинку кресла, расслабьтесь и наслаждайтесь щелчками на фото выдр! Вы немало потрудились и усвоили много нового во время создания интерактивного слоя нашего сайта. В следующей главе мы завершим создание Ottergram, добавив для пущей красоты визуальные эффекты.
Серебряное упражнение: взлом ссылок
DevTools браузера Chrome предоставляют немало возможностей для развлечений с посещаемыми страницами. Следующее упражнение будет заключаться в том, чтобы поменять все ссылки на странице результатов поиска так, чтобы они вели в никуда.
Зайдите в вашу любимую поисковую систему и выполните поиск по ключевому слову выдры. Откройте консоль DevTools. Используя написанные для Ottergram функции в качестве образца, подключите прослушиватели событий ко всем ссылкам и отключите имеющуюся по умолчанию функциональность перехода по щелчку кнопкой мыши.
Золотое упражнение: случайные выдры
Напишите функцию для изменения атрибута data-image-url случайно выбранной миниатюры выдры так, чтобы увеличенное изображение более не соответствовало миниатюре. Используйте URL изображения по вашему выбору (хотя можно отыскать неплохое путем поиска в Интернете по слову tacocat). В качестве дополнительного упражнения напишите функцию, возвращающую миниатюрам выдр исходные значения атрибута data-image-url и меняющую одну из них, выбранную случайным образом.
Для самых любознательных: строгий режим
Что такое строгий режим и для чего он существует? Он был создан в качестве более «чистого» режима JavaScript, позволяет перехватывать определенные виды ошибок программирования (например, опечатки в именах переменных), удерживая разработчиков от использования некоторых подверженных ошибкам частей языка и отключая возможности языка, которые попросту явно неудачны.
У строгого режима есть немало преимуществ:
• Заставляет использовать ключевое слово var
• Не требует использования операторов with
• Ограничивает способы использования функции eval
• Рассматривает дублирующиеся имена параметров функций как синтаксическую ошибку
Все это можно получить всего лишь за счет размещения директивы 'use strict' наверху функции. В качестве бонуса директива 'use strict' игнорируется не поддерживающими ее старыми версиями браузеров (эти браузеры просто рассматривают эту директиву как строку).
Прочесть больше о строгом режиме можно на MDN по адресу.
» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок
Для Хаброжителей скидка 20% по купону — Front-end
Автор: ph_piter
