В книге рассмотрены все важнейшие навыки работы с 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

https://habrahabr.ru/post/334064/