+7 (812) 703-02-02 info@hse.spbstu.ru
23.08.2022 19:00 День открытых дверей программ профессиональной переподготовки
Онлайн-формат. Для участия нужна регистрация...

Разработка пользовательских интерфейсов (JS)

Длительность дисциплины: 20 ак.ч.


Аннотация

Библиотека JQuery была создана Джоном Резигом в августе 2006 года как средство для облегчения выполнения манипуляций с объектной моделью веб-документа (DOM) на языке Javascript. В то время, в браузерах работа JavaScript - кода была по разному реализована, что вызывало множество проблем совместимости.

Библиотека JQuery реализует согласованную и целостную среду для построения различных запросов манипулирования объектной моделью документа, событиями, анимацией и использованием подхода AJAX.

Из-за простоты использования, легкости освоения синтаксиса и обеспечения совместимости программного кода в браузерах библиотека стала самым популярным инструментом фронтенд разработки, что привело к появлению множества плагинов и фреймворков, основанных на JQuery, которые работают на миллионах сайтов во всем мире.

C течением времени Javascript стал более совершенным языком. Были реализованы новые программные интерфейсы (API), которые позволили разработчикам добиться того же результата на чистом Javascript, который ранее был достижим только с использованием Jquery. Важным примером является API селекторов, который значительно облегчает выбор элементов DOM. Несмотря на постепенно нисходящий тренд популярности библиотеки, она все еще является актуальной. Согласно статистике сервиса BuiltWith на 2019 год, JQuery используется на 77% из миллиона крупнейших мировых веб-сайтов.

Курс является ознакомительным и позволяет использовать возможности Javascript, библиотеки JQuery и плагинов для создания интерактивного веб-сайта с востребованными компонентами.

Если вы работаете над небольшим проектом веб-сайта, который будет создан на базе Wordpress или другой популярной CMS, где необходимо обеспечить совместимость с плагинами и вам нужна поддержка более старых браузеров – библиотека JQuery идеально подходит для быстрого решения этой задачи. Компонентные фреймворки React.js, Angular.js, Vue.js будут сложны и избыточны при создании такого сайта и потребуют дополнительных навыков программирования.


Знания и умения, полученные в результате изучения

В результате обучения слушатели узнают:

  • Методы применения библиотеки JavaScript при разработке веб-приложений,
  • Создавать динамические веб-приложения с применением визуальных эффектов,
  • Подключать и настраивать пользовательские интерфейсы, виджеты и плагины,
  • Самостоятельно разрабатывать пользовательские интерфейсы

Содержание дисциплины

Тема 1

Объектная модель документа

  • Реализация DOM в разных браузерах.
  • Элементы документа, их свойства и методы работы с ними.
  • Типы узлов, работа с атрибутами.

Основы JQuery

  • Обзор существующих библиотек
  • Загрузка и подключение библиотеки JQuery, версии, документация по библиотеке.
  • Структура библиотеки.
  • Обработчик готовности документа. 

Выбор элементов документа

  • Базовые селекторы.
  • Селекторы выбора потомков, контейнеров и атрибутов.
  • Селекторы выбора элементов по расположению в дереве DOM.
  • Применение фильтров.

 

Тема 2

Доступ к атрибутам элементов

  • Добавление, удаление и изменение классов и атрибутов.
  • Изменение сss свойств элемента. Позиционирование и масштабирование элемента.

Работа с содержимым элемента

  • Замена html-разметки или текста.
  • Перемещение, копирование, удаление элементов.

События

  • Основные события, поддерживаемые JQuery.
  • Подключение обработчиков событий. Методы bind(),one(), unbind().
  • Динамические обработчики событий. Методы live(), die().
  • Задание callback-функций, вызываемых при наступлении события.

 

Тема 3

Базовые эффекты и анимация

  • Скрытие и отображение элементов.
  • Переключение состояния отображения метод toggle.
  • Постепенное скрытие и отображение элементов.
  • Остановка анимационных эффектов.
  • Создание анимационных эффектов: масштабирование, эффект падения.

 

Тема 4

Пользовательские интерфейсы JQuery

  • Библиотека JQuery UI. Загрузка и использование.
  • Темы оформления JQuery UI.

Эффекты JQuery UI

  • Применение виджетов. 
  • Применение готовых и создание собственных стилевых тем. Разработка слайдера. Progressbar.
  • Репозиторий плагинов. Загрузка и подключение плагинов.

 

Плагины JQuery UI

  • Взаимодействие JQuery UI с мышью.
  • Перетаскивание элементов мышью.
  • Упорядочивание элементов
  • Изменение размеров элементов.

Новейшие решения

  • Формы
  • Меню
  • Интерактивные галереи