Видеокурс: javascript. Больше, чем просто сайт

В последнее время все большую популярность набирают динамичные, так называемые, «Веб 2.0» приложения. Такие приложения на лету изменяют свою структуру и содержание, основываясь на реакции пользователя и взаимодействии с сервером в «фоновом» режиме. Технологии, используемые ими, основаны на языке javascript и его многочисленных библиотеках. Скорее всего, Вы уже и сами не раз слышали о них (jQuery, Prototype, MooTools и др.) И, скорее всего, Вы уже пытались подступиться к javascript в надежде изучить этот язык… И если Вы сейчас читаете этот текст, то, скорее всего, эти попытки не увенчались успехом… А могло ли быть иначе, если Вы — новичок в вопросах программирования для веба? Как быть, если Вы не знаете с чего начать обучение ? Как не запутаться в этих, на первый взгляд, невероятно сложных технологиях и приобрести практические навыки javascript программирования? Ответ прост — перенять эти знания от программиста-практика!

Содержание:

1. Описание курса.
2. Инструменты.
3. Начинаем кодировать.
4. Базовые понятия, структуры данных.
5. Управляющие структуры.
6. Функции.
7. Объект, как структура данных.
8. Встроенные объекты.
9. События.
10. DOM.
11. Работа с Cookie.
12. Примеры.
13. Дополнительные материалы.
14. Бонусы.

Все необходимые для работы программы уже записаны на диск. Для воспроизведения видео потребуется набор стандартных бесплатных кодеков, который у Вас уже, скорее всего, установлен.

На всякий случай мы его, также, записали на диск.
Вступление (34:21)

Вступительный раздел курса разбит на 2 части:
1. Описание курса.

В этой части мы с Вами рассмотрим некоторые аспекты работы с данным курсом, а так же поговорим о предмете наших изысканий — языке JavaScript.

Рассмотрим по пунктам, что конкретно Вы узнаете:
Как пользоваться меню курса.
Где взять файлы упражнений (исходные коды).
Где взять программы, которые понадобятся Вам в процессе разработки, и расширения к ним.
Куда обратиться за помощью, если у Вас возникнут вопросы.
Немного истории JS: как и где появился данный язык и почему он так называется.
Что может JS, а чего не может?
Почему у Вас обязательно получится освоить данный язык.
2. Инструменты.

В данном подразделе мы рассмотрим инструменты, которые понадобятся Вам для работы.

А конкретно Вы узнаете:
Что такое среды разработки (IDE);
Преимущества и недостатки каждой из рассмотренных IDE;
Какую роль в тестировании JS-сценариев играют браузеры;
Также мы рассмотрим несколько полезных плагинов (дополнений к браузерам), которые заметно облегчат Вашу жизнь и сделают процесс разработки и отладки максимально комфортным.
Глава 1: Начинаем кодировать (20:06)

В данном разделе будут рассмотрены некоторые основополагающие вопросы, которые касаются инкапсуляции сценариев в html-страницы, оформления кода, взаимодействия с пользователем.
Вы научитесь:
Встраивать сценарии в html-страницы;
Узнаете в какие части страницы можно встраивать сценарии и что от этого меняется;
Вы создадите Ваш первый сценарий;
Узнаете, чем внутренние скрипты отличаются от внешних;
Узнаете о комментариях, а именно: что это, зачем это нужно;
Узнаете о различных по смысловой нагрузке видах комментариев;
Узнаете о конструкциях комментариев, поддерживаемых JavaScript
Узнаете, как распознать пользователя с отключенным JS и уведомить его об этом;
А так же Вы узнаете о базовых методах взаимодействия с пользователем:

Как уведомить пользователя с помощью модального окна;
Как получить от пользователя ответ «да/нет» на свой вопрос, не используя html-форм;
Как получить от пользователя какие-либо данные, не используя html-форм;
Также Вы узнаете что такое JavaScript-консоль и как ей пользоваться.
Глава 2. Базовые понятия, структуры данных (24:05)

В этой главе вы получите понятия концепций, без которых невозможно программирование на любом языке: переменные, тип, приведение типов, арифметические операторы.
После просмотра данной главы, Вы:
Освоите понятие переменной;
Узнаете, как объявлять переменные;
Узнаете, как лучше называть переменные;
Освоите понятие типа, т.е. характеристики переменной с точки зрения того, информация какого вида в ней находится;
Узнаете о типах данных, которые поддерживает JavaScript;
Узнаете, как определить тип переменной;
Узнаете о приведении типов, т.е. переводе переменных одного типа в другой;
Узнаете об основных операторах, с помощью которых Вы сможете изменять значение переменных.
Глава 3. Управляющие структуры (34:57)

Невероятно важный раздел, по изучении которого Вы научитесь управлять потоком исполнения вашего сценария.

Здесь будут рассмотрены управляющие структуры, такие как условные операторы и циклы.
Если подробнее, то Вы:
Освоите понятие условия, а так же обсудим, что может быть рассмотрено как условие;
Изучите приведение всех типов к булевому(логическому) значению;
Освоите операции сравнения;
Научитесь использовать логические операции, которые помогут комбинировать несколько условий в одно;
Освоите конструкцию условного оператора if;
Научитесь использовать операторы else и else if, узнаете об их особенностях, а также где рекомендуется их применять;
Изучите оператор множественного выбора switch, его основную конструкцию, составные части;
Освоите тернарный условный оператор: его общий вид, варианты использования и среду применения;
Освоите понятия цикла, счетчика и итерации;
Научитесь применять структуру for, изучите характеристики-условия данного оператора;
Научитесь применять структуры while и do while, узнаете об их отличиях;
Научитесь мгновенно прерывать выполнение цикла, используя оператор break;
Научитесь переходить к следующей итерации цикла, не дожидаясь завершения текущей, используя оператор continue.
Глава 4. Функции (22:16)

Функции — основные строительные блоки языка.

Каждая функция решает конкретную задачу.

Правильно составленные блоки — залог стабильной и надежной работы сценария.

В данной главе мы подробнейшим образом рассмотрим как строить САМИ блоки, а также наиболее важные моменты работы с ними.
Освоите понятие функции (метода);
Научитесь описывать (декларировать) функции;
Научитесь вызывать функции;
Освоите понятие аргумента (параметра) функции;
Научитесь передавать в функцию аргументы;
Научитесь задавать значения аргументов Ваших функций по умолчанию, при возникновении такой необходимости;
Освоите понятие области видимости переменных;
Узнаете, что такое глобальные и локальные переменные, чем они отличаются;
Освоите понятие возвращаемого значения функции;
Научитесь использовать оператор return:

Для возвращения результата выполнения метода
Для прерывания работы метода
Глава 5. Объект, как структура данных (35:16)

Объект — структура, инкапсулирующая в себя не только данные (свойства), но и функции (методы) для работы с ними.

Это делает ее невероятно удобной для олицетворения какой-либо сущности реального мира.

Именно поэтому в программировании так популярен объектно-ориентированный подход.

Так что изучение данной концепции невероятно важно.
После просмотра данной главы, Вы:
Освоите понятие объекта, свойства и метода;
Освоите понятие конструктора;
Научитесь описывать свойства объектов;
Научитесь использовать указатель this для доступа к свойствам и методам объекта;
Научитесь декларировать методы объектов, используя свойство prototype;
Научитесь создавать объекты, вызывая конструктор и используя ключевое слово new;
Научитесь получать значения свойств и вызывать методы объектов;
Освоите понятие статических свойств и методов для объекта;
Научитесь описывать статические свойства и декларировать статические методы;
Освоите понятие перегрузки методов;
Узнаете об общих для всех объектов в JS методах toString() и valueOf();
Перегрузите их с учетом ваших потребностей и особенностей вашего объекта;
Создадите несколько методов, реализующих операции сравнения экземпляров объектов, также свойственных большинству объектов в JavaScript.
Глава 6. Встроенные объекты (01:28:58)

В этой главе Вы получите хорошее подспорье для решения большинства типовых задач.

Мы рассмотрим встроенные в JavaScript объекты, которые представляют собой основные типы и структуры данных.

Кроме того, нами будут рассмотрены методы этих объектов, знание которых сэкономит вам кучу времени в процессе разработки ваших сценариев.

Итак, в данной главе Вы:
Освоите понятие массива;
Научитесь создавать массивы несколькими способами;
Научитесь узнавать длину массива, используя свойство length;
Освоите большинство методов объекта Array(массив):

Методы добавления элементов в массив;
Методы извлечения элементов из массива;
Методы сортировки массива;
Метод slice, который поможет вам получить какую-либо часть от исходного массива;
Освоите объект Date, который будете использовать для работы с датой и временем;
Изучите несколько видов конструктора данного объекта, узнаете чем отличаются объекты, созданные при их использовании;
Узнаете об особенностях JS в работе с датой и временем;
Научитесь приводить к объекту Date строки временного формата, используя метод parse() данного объекта;
Создадите скрипт часов, на примере которого изучите методы:

Позволяющие с датой(год, месяц, число), которой проинициализирован текущий объект;
Позволяющие работать со временем(часы, минуты, секунды), которым проинициализирован текущий объект;
Изучите объект String и методы его инициализации;
Научитесь получать длину строки, используя свойство length данного объекта;
Освоите некоторое количество методов работы со строками:

Метод поиска символа в строке;
Метод поиска подстроки;
Методы, позволяющие выделить подстроку из более длинной;
Методы, которые позволят нам разбивать сроки на кусочки и склеивать полученный массив снова в единую строку;
Методы, которые позволят нам управлять регистром строк;
Рассмотрите объект Math, который позволит выполнять нетривиальные математические операции;
Изучите большинство методов данного объекта:

Методы для возведения в степень и извлечения корней;
Методы для округления чисел с плавающей точкой;
Методы, которые помогут определить максимальное и минимальное значение из некоторого набора;
Метод генерации случайного числа;
Создадите метод генерации случайного числа из заданного промежутка;
Научитесь получать значения математических констант, таких, как ? и exp;
Научитесь приводить строки, в которых содержаться литеральные значения чисел к объекту Math, используя методы parseInt и parseFloat;
Научитесь откладывать выполнение кода, используя глобальную функцию setTimeout, а при необходимости отменять отложенное выполнение с помощью функции clearTimeout;
Научитесь повторно выполнять какой-либо код с заданным интервалом при помощи глобальной функции setInterval, а при желании прерывать циклическое исполнение кода функцией clearInterval.
Глава 7. События (31:44)

События — основа любой динамики на web-странице.

Кто подскажет нашему с вами сценарию когда выполнять то или иное действие?

Причиной каких либо изменений могут служить 2 сущности: первая — пользователь; вторая — система, т.е. браузер.
Из этой главы Вы почерпнете знания, необходимые для отслеживания событий и их обработки:
Освоите понятия события и обработчика;
Изучите большинство событий, поддерживаемых браузерами;
Узнаете для каких элементов они характерны и в каких ситуациях могут быть использованы;
Научитесь привязывать обработчики к событиям тремя разными способами;
Создадите небольшое приложение, которое будет отслеживать и соответствующим образом реагировать на наиболее часто встречающиеся события — клики;
Создадите еще одно приложение(ролловер), которое будет заниматься отслеживанием движения курсора и реагировать соответствующим образом, когда он войдет в область определенного элемента страницы.
Глава 8. DOM (48:21)

DOM (Объектная Модель Документа) — скелет любого web-приложения, каждый элемент Вашей разметки — DOM-узел.

Понимание анатомии вашего веб-приложения сделает простым и понятным его проектирование и разработку, а в дальнейшем — отладку и тестирование.
В данной главе Вы:
Освоите понятие объектной модели документа(DOM), узнаете:

Что это;
Зачем нужно;
Как пришли именно к такой модели;
Освоите понятие узла DOM;
Изучите типы узлов и их персональные особенности;
Изучите терминологию DOM, узнаете что такое:

Элемент-родитель;
Элемент-потомок;
Дочерний элемент;
Сестринский элемент (sibling) ;
Создадите небольшое приложение в процессе создания которого научитесь:

Создавать новые DOM-элементы;
Создавать текстовые узлы, для добавления к элементам;
Создавать узлы-атрибуты, для добавления к элементам;
Добавлять и удалять DOM-узлы в существующую модель;
Вставлять и вырезать DOM-узлы на/с определенной позиции;
Заменять необходимые узлы вновь созданными;
Перемещать существующие узлы на новую позицию;
Глава 9. Работа с Cookie (23:23)

JavaScript не может работать не с базами данных, не с файлами.

Но необходимость веб-приложения хранить какие-либо временные данные еще никто не отменял.

Именно здесь нам на помощь и придут cookie-наборы, те самые «закрома», где Вы сможете хранить в невидимом для пользователя режиме данные, необходимые Вам для дальнейшей работы.
В результате изучения данной главы, Вы:
Освоите понятие cookie-набора и узнаете:

Зачем применяются cookie-наборы;
Какой объем данных в них можно хранить;
Изучите свойства, которыми характеризуется cookie-набор;
Изучите свойство document.cookie;
Создадите библиотеку функций для:

Установки cookie;
Удаления cookie;
Изменения cookie;
Чтения cookie;
В дальнейшем Вы сможете использовать эту библиотеку в любом из Ваших проектов!
Примеры (1:12:42)

В этой главе мы с вами мы с вами займемся закреплением всего ранее пройденного материала, а так же рассмотрим несколько новых вопросов.

Все это мы провернем в «боевых» условиях: превратим обыкновенный, статичный сайт в динамичное и дружелюбное веб-приложение.
Вот, чему Вы научитесь:
Создавать несколько видов динамических меню, основанных на JavaScript;
Обрабатывать несколько видов событий, которые не были рассмотрены в соответствующем разделе;
Узнаете, как манипулировать CSS-свойствами DOM-элементов с помощью JS;
Научитесь отслеживать нажатия клавиш и реагировать на них соответствующим образом;
Научитесь работать с формами:

Получать и устанавливать значения полей формы;
Проверять валидность данных, введенных пользователем;
При возникновении конфликтных ситуаций уведомлять пользователя о необходимости исправления введенных данных без помощи метода alert;
И многое другое.
Дополнительные материалы (32:03)

В данной главе Вы почерпнете знания, которые помогут вам в процессе разработки Ваших веб-приложений, а так же в их модернизации и сопровождении.

Мы рассмотрим вопросы, касающиеся отладки кода, его документирования и компрессии(для ускорения загрузки).
Итак, в этом разделе вы:
Освоите понятие документации;
Изучите формат комментариев JSDoc;
Изучите большинство тегов JSDoc;
Научитесь с помощью исполняемого модуля JSDoc генерировать документацию в формате HTML;
Освоите понятия компрессии и обфускации кода;
Научитесь использовать несколько различных инструментов для компрессии и обфускации:

JS Minifier;
JavaScript Compressor;
Google Closure Compiler;
Вы узнаете об особенностях и возможностях каждого из перечисленных выше инструментов;
Освоите понятия отладки, точки останова(break point) и стека вызовов функций;
Узнаете, как и для чего применять оператор debugger;
Научитесь пользоваться такими инструментами для отладки, как:

Firebug;
Инструменты разработки, встроенные в Google Chrome;
Научитесь задавать условия для точек останова;
Научитесь отслеживать значения переменных в интересующий вас момент времени;
Узнаете как отследить состояние интересующей Вас переменной в нужный момент времени;

Впечатляет, не правда ли?

Только представьте себе, сколько времени и сил Вам позволит сэкономить видеокурс «JavaScript. Больше, чем просто сайт»!

Год выпуска: 2010
Автор: Денис Хомич
Тип раздаваемого материала: Видеоурок
Язык: Русский
Размер: 1200 Mb

Узнать подробнее о Видеокурсе