[javascript.ru] javascript, dom, интерфейсы

[Amellian]

Курс состоит из трёх частей:

Первая часть позволяет хорошо разобраться в языке JavaScript, получить знания и навыки написания хорошего JavaScript-кода.
Вторая часть позволяет научиться работать со страницей и посетителем, создавать меню, слайдеры, Drag'n'Drop и прочие интерфейсные компоненты.
Третья часть посвящена грамотному использованию jQuery и более продвинутому ООП.

Большое внимание на этом курсе уделяется стилю кода. Это важно. Хороший стиль кода позволяет писать более быстро, красиво и делать меньше ошибок. А на серьёзных проектах он просто необходим.

Результат обучения:

Вы хорошо знаете JavaScript, свободно разрабатываете и отлаживаете программы на этом языке.
Вы умеете создавать компоненты и объединять их в интерфейсы средней сложности.
Ваши интерфейсы работают стабильно, без глюков, их можно удобно дорабатывать и развивать.
Мы идём от основ и до довольно-таки сложных штук. Успешное прохождение обучения гарантировано в том случае, если вы будете регулярно заниматься и делать домашнее задание.

Основные темы первой части курса:

Основной JavaScript.
Здесь мы изучим сам язык, его конструкции и особенности, которые позволяют "разговаривать" на JavaScript коротко, понятно, а главное - без ошибок.
Основные структуры данных, работа с числами, строками, датами.
Эффективное использование базовых структур данных в JavaScript, их тонкости и внутреннее устройство.
Инструменты разработки, отладка в браузерах.
Объекты и массивы.
Функции, виды объявлений и тонкости использования.
Более глубокое понимание языка.
Чтобы писать хороший код, а также грамотно пользоваться современными фреймворками, мы изучим JavaScript лучше, включая тонкости и продвинутое применение языковых конструкций.
Замыкания и их грамотное применение.
Преобразование типов.
Контекст this в деталях.
Введение в ООП.

По окончанию первой части курса вы свободно пользуетесь языком JavaScript, с учётом его особенностей. Мы улучшим эти навыки в последующих частях курса.

Вторая часть курса:

Документ, генерация интерфейса.
Здесь мы учимся работать с документом, решать всевозможные задачи в браузере.
Внутреннее устройство браузера, работа со скриптами.
Дерево DOM, особенности в современных браузерах и IE<9.
Получение информации об элементах страницы.
Динамическая генерация элементов интерфейса.
События, взаимодействие с посетителем.
Введение в события, способы назначения обработчиков и тонкости их использования.
Практика создания "живых" интерфейсных компонент (кнопки, меню, карусели).
Динамические компоненты интерфейса
Координаты в окне и документе, передвижение элементов
Drag'n'Drop, по окну и внутри элемента
Практика (слайдер, подсказка)
Работа с большим количеством элементов
Всплытие и перехват событий
Паттерн "делегирование", оптимизация производительности и архитектуры
Особенности работы событий mouseover, mouseout с учётом всплытия.
Практика создания интерфейсных компонент (дерево, галерея, редактируемая таблица)

По окончании второй части вы можете создавать интерфейсные компоненты, но нужно больше практики.

Третья часть курса:

Фреймворк jQuery, его важные тонкости и правильное использование.
Прототипный стиль ООП.
Архитектура сложных интерфейсов.
Практика создания компонент для сложных интерфейсов, свои события.
Системы шаблонизации, использование шаблонов для удобного создания компонент.
Обзор AJAX-технологий и фреймворков (Backbone, Angular.JS), куда двигаться дальше.

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

[GUEST] Завершено - [javascript.ru] JavaScript, DOM, интерфейсы [/GUEST]

 

[Amellian]

 

[Jordanxxx]

 

[Amellian]

 

[aminal]

"Hey, if you're looking to create custom DOM interfaces, I'd recommend checking out Web Component APIs like Shadow DOM or JSX for a more React-like experience. Either way, you'll want to make sure you understand how event delegation works in the browser. Been there, done that, and still got the scars"

 

[mirvaal]

"Hey, checked out the new DOM library you guys mentioned. It looks promising, but I'm still on the fence about switching from jQuery. Got a link to some tutorials or examples?"

 

[rknem]

"Hey, checked out the article on DOM interfaces, it's a solid resource for web dev newbies. Can confirm that `element.shadowRoot` has been a game-changer for modern web dev. Does anyone have experience with polyfills for older browsers?"

 

[All-ex2005]

"Hey, just got to this thread. If you're trying to manipulate DOM elements with JS, I'd recommend checking out some libraries like jQuery or React - they make it a lot easier than doing it from scratch. Anyone else have any favorite tools for DOM work?"