web-programming

JavaScript

Скринкаст лекции, часть 1

Скринкаст лекции, часть 2

План лекции

1. JavaScript: типы данных, control flow
2. Чистый JavaScript для проверки данных в форме: click, submit
3. Какие бывают события на странице:
   • events,
   • touch events,
   • keyboard events
4. DOMContentReady
5. jQuery: селекторы, навешивание обработчиков, изменение атрибутов и CSS-свойств
6. jQuery: генерация тегов
7. jQuery: перемещение по DOM-дереву
8. Пример с выбором поездов: код, результат
9. Навешивание эвентов к выбранным элементом и вечное навешивание на класс
10. Пример с таблицей умножения: код, результат
11. Github Pages

Задания

1. Todo-list. Что реализовать в Todo-list‘е:

• Есть пустой список заданий (список строк), можно добавлять новые строчки. Дело добавляется по нажатию энтера в поле ввода или по нажатию кнопки “Add”.
• Дело можно пометить сделанным.
• Текст дела можно менять: по двойному щелчку открывается возможность редактирования. (Hint: поищите свойство contenteditable.)
• Дело можно удалить из списка. (jquery remove)
• Все дела можно пометить сделанными, а все сделанные дела можно удалить.
• Все дела автоматически сохраняются в LocalStorage. При перезагрузке страницы все дела достаются из LocalStorage.

Решение выложите в интернет через Hostinger или GitHub pages, ссылку добавьте на вики-страницу.

2. Календарь.

Материалы

1. Наследование и каскадность в CSS
2. Event bubbling
3. Курс по JQuery на Codecademy. Курс по Джаваскрипту на Кодакадеми мне кажется бессмысленным, я его не советую.
4. Eloquent JavaScript, русский перевод
5. John Resig, Bear Bibeault. Secrets of the JavaScript Ninja. twirpx.com.
6. Building a JavaScript Framework