Изучаем программирование на HTML5 - Хотите создавать динамичные, интерактивные, насыщенные данными веб-страницы? Почему бы не использовать HTML5 для создания полнофункциональных веб-приложений? И почему бы не делать это с помощью современных методик, которые так же легко применимы к вашему настольному браузеру, как и к мобильным устройствам? Вам, конечно же, захочется использовать такие новейшие HTML5-технологии, как API-интерфейс Geolocation, элемент video, 2D-рисование, API-интерфейсы Web Storage и Web Workers и т. д. Не так ли? С помощью данной книги вы научитесь создавать веб-приложения с использованием современных стандартов и передовых методик завтрашнего дня. Вы изучите основы новых API-интерфейсов HTML5 и узнаете, как они взаимодействуют со страницами и приводятся в движение javascript-кодом, а также как использовать их для создания веб-приложений, которые впечатлят ваше начальство и изумят друзей.
Название: Изучаем программирование на HTML5 Автор: Фримен Э., Робсон Э. Издательство: Питер Год: 2013 Страниц: 594 Формат: PDF Размер: 17,1 МБ ISBN: 978-5-459-00952-1 Качество: Отличное
Содержание:
Введение Для кого написана эта книга? Мы знаем, о чем вы думаете И мы знаем, о чем думает ваш мозг Метапознание: учимся учиться Технические рецензенты Благодарности От издательства 1. Знакомство с IITML5. Добро пожаловать в Вебвилль Переходите на HTML5 СЕГОДНЯ! Зачем ждать? Представляем вам наш новый HTML5-модернизатор. Обновите свой HTML прямо сейчас Вы ближе к HTML5-разметкс, чем думаете! Встречаем HTML5: Признания новой версии HTML Просим встать НАСТОЯЩЕГО HTML5… Как на самом деле работает HTML5… Кто и что делает? Ваша первая миссия: разведка в стане браузеров Что можно сделать с помощью JavaScript Пишем серьезный JavaScript Пишем серьезный JavaScript: проверка ваших ответов Ключевые моменты 2. Знакомство с JavaScript и объектной моделью документа (DOM). Немного кода Как работает JavaScript Что можно сделать с помощью JavaScript? Объявление неременной Как присваивать имена переменным Серьезное программирование Выражения Многократное выполнение одного и того же… Принятие решений с использованием JavaScript Принятие дополнительных решений… и добавление перехватывающего блока Как и куда добавлять JavaScript в своих страницах Как JavaScript взаимодействует с вашей страницей Рецепт приготовления собственной объектной модели документа (DOM) Первое испытание объектной модели документа (DOM) Нельзя начинать взаимодействовать с DOM, пока веб-страница не загрузилась полностью Для чего еще хорошо подходит DOM Нельзя ли снова поговорить о JavaScript, или как осуществляется сохранение множественных значений при использовании JavaScript Как создать массив Phrase-OMatic Ключевые моменты 3. События, обработчики и весь этот джаз. Немного взаимодействия Приготовьтесь к встрече с Webville Tunes Приступаем… Когда я нажимаю кнопку Add Song (Добавить песню), ничего не происходит Обработка событий Составляем план… Получение доступа к кнопке Add Song (Добавить песню) Задание обработчика событий click для кнопки Более пристальный взгляд на происшедшее… Извлечение названия песни Как добавить песню на страницу? Как создать новый элемент Добавление элемента в DOM Соединяем все воедино… … и проводим тест-драйв Обзор того, что мы только что сделали Как добавить приготовленный код… Интегрирование приготовленного кода Ключевые моменты 4. Функции и объекты JavaScript. Серьезный JavaScript Расширяем ваш словарный запас Как добавить свои собственные функции Как работает функция Локальные и глобальные переменные Функции еще являются и значениями Что можно сделать посредством функций как значений? Как создать объект на JavaScript? Что можно сделать с объектами Поговорим о передаче объектов функциям Наш следующий сеанс состоится в… Объекты также могут обладать поведением… Возвращаемся к приложению Webville Cinema… Добавление ключевого слова this Как создать конструктор Воспользуемся нашим конструктором Как на самом деле работает this? Сразу же проведем тест-драйв нашего конструктора Что такое объект window? Более пристальный взгляд на window. onload Еще один взгляд на объект document Более пристальный взгляд Hadocument. getElementByld Еще один объект, о котором нужно знать: объект элемента Ключевые моменты 5. Создание HTML-страниц с поддержкой определения местоположения. API-интерфейс Geolocation Местоположение, местоположение… Широта и долгота… Как API-интерфейс Geo location определяет местоположение пользователя Так где же вы находитесь? Как все это работает Раскрываем наше тайное убежище… Написание кода для определения расстояния Отображение вашего местоположения на карте Как добавить карту к странице Прикалываем булавку на карту… Прочие интересные вещи, которые можно сделать с использованием API-интерфейса Google Maps Можем ли мы поговорить о точности? «Whereveryou go, there you are» Приступаем к созданию приложения Дорабатываем наш старый код… Пора отправляться в путь! Параметр positionOptions… Мир параметров timeout и maximumAge… Шлифуем наше приложение! Интеграция нашей новой функции Ключевые моменты 6. Общение с веб-службами. Приложения-экстраверты Компании Mighty Gumball требуется веб-приложение Подробпее о системе Mighty Gumball Как выполняются запросы, адресованные веб-службам? Как выполпять запросы из JavaScript Подвинься, XML: встречайте JSON Отображепие данных об уровне продаж жвачки Как установить собствепный веб-сервер Дорабатываем коде целью использования JSON Переходим к использованию действующего сервера Неожиданпый поворот событий! Помните, как мы столкпулисьс пеожидапным поворотом событий? Неполадки с приложением Что за браузерная политика безопасности? Какие у нас вариапты? Знакомство с JSONP Что означает буква Р в аббревиатуре JSONP? Обновление кода веб-приложения Mighty Gumball Дорабатываем приложепие Mighty Gumball Обновление URL-адреса JSON с целью включения lastreporttime Ключевые моменты Специальпое сообщение из главы 1… 7. Раскрываем в себе художника. Элемент canvas Наш повый стартап: TweetShirt Взгляд на «оригинал-макет» Как добавить canvas в свою веб-страницу Как увидеть свой canvas Рисование в элементе canvas Выходим достойно из проблемной ситуации TweetShirt: общая картина Спачала напишем необходимый HTML Теперь добавим <form> Пришло время добавить JavaScript для вычислений Написапие функции drawSquare Добавление вызова flllBackgroundColor Тем временем, возвращаясь KTweetShirt.com… Черчение контуров Подробпое исследование метода arc Небольшой пример использования метода arc Я говорю «градус», вы говорите «радиан» Возвращаемся к написанию TweetShirt-кода для рисования кругов Пишем фупкцию drawCircle… Извлечение твитов Завершаем написание функции drawText Ключевые моменты 8. Телевидение для нового поколения. Элемент video… и наш особый гость - элемент canvas Знакомство с Webvilie TV Включите этот «телевизор» и протестируйте его… Как работает элемент video? Пристальный взгляд на атрибуты элемента video… Что пеобходимо зпатьо форматах видео Как жонглировать всеми этими форматами… Я слышал, там будут API-интерфейсы? Немного «программирования» содержимого Webville TV Как написать обработчик «конца видео» Как работает метод canPlayType Распаковка демоблока Рассмотрение остальной части «заводского» кода Обработчики setEffect и setVideo Реализация элементов управлепия видео Реализация остальных элементов управления видео Дорабатываем один нюанс… Как происходит обработка видео Как обрабатывать видео с использованием времепного буфера Реализация временного буфера в canvas Займемся написапием эффектов Как использовать события error 9. Сохраняем данные локально. API-интерфейс Web Storage Как работает браузсрпос хранилище (1995-2010) Как работает Web Storage HTML5 Заметка для себя… Были ли локальное храпилище и массив разделены при рождении? Создапие иптерфейса Теперь добавим JavaScript Завершаем создапие интерфейса пользователя Прервемся для небольшого заплапированпого мероприятия Поддержка типа «сделай сам» Дорабатываем наше приложепие с использованием массива Впесепие изменепий BcreateStickyc целью использования массива Функция deleteSticky Как выбрать заметку для удалепия? Как извлечь заметку для удаления, используя объект event Удаление заметки также из DOM Обновление интерфейса пользователя для выбора цвета заметок Метод JSON.stringify - не только для массивов Использование нового объекта stickyObj Теперь, когда вы изучили localStorage, как вы собираетесь использовать его? 10. Применяем JavaScript наделе: API-интерфейс Web Workers Устрашающее диалоговое окно Slow Script (Медленный сценарий) KaKjavaScript проводит свое время Когда однопоточпость - это ПЛОХО Поток веб-сцепария worker Как работают веб-сценарии worker Ваш первый веб-сценарий worker… Написание manager.js Получение сообщений от веб-сцепария worker А теперь папишем worker Захват виртуальных земель Как вычисляется множество Мандельброта Как задействовать сразу несколько веб-сценариев worker Займемся созданием приложепия Fractal Explorer Создание веб-сценариев worker и раздача им задач… Написание кода Запуск веб-сцепариев worker Реализация кода worker Возвращаемся к коду: как осуществляется обработка результатов работы worker Подгоняем canvas под размеры окна браузера Дотошный шеф повар программист Время фипального тест-драйва! Ключевые моменты Приложение. Десять важных тем (которые мы не рассмотрели) № 1. Modernizr № 2. Элемент audio и API-иптерфейс Audio № 3. jQuery № 4. XHTML мертв, да здравствует XHTML № 5. SVG № 6. Автономные веб-приложения № 7. API-иптерфейс Web Sockets № 8. Дополнительно об API-интерфейсе Canvas № 9. API-интерфейс Selectors № 10. Однако есть даже еще кое-что! HTML5-pyкoвoдcтвo по новым конструкциям Вебвилльское руководство по семантическим элементам HTML5 Вебвилльское руководство по CSS3-свойствам
