intprog/lw03

Лабораторная работа №3 - Динамика сайта (JavaScript)

Цель работы

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

Ход работы

1. Вспомнить основные понятия в DOM-дереве.
2. Изучить работу с формами в HTML.
3. Изучить необходимость JavaScript.
4. Изучить отладку JS в веб-браузере Google Chrome или Mozilla Firefox.
5. Подключить JS-библиотеки к HTML-странице.
6. Написать собственный сценарий (скрипт). Добавить обработку формы.

Основные понятия в DOM-дереве

Необходимо вспомнить про следующие понятия:

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

Формы в HTML

Изучите работы с формами на ресурсе HTMLBOOK: http://htmlbook.ru/samhtml5/formy. Особенно обратите внимание на первые 6 страниц.

Проверьте, что на ваших формах есть необходимые элементы: элемент form, поля ввода, кнопка в виде button или <input type="submit" ... />. Также убедитесь, что у полей ввода есть аттрибуты name, которые уникальны для каждого поля в рамках одной формы.

Необходимость JavaScript и отладка приложений JS

Сейчас страницы написанного вами сайта статичны - в них нет интерактивных элементов. Однако если вы зайдёте на популярные сайты, то можете увидеть, что они динамичны - на кнопки можно нажать, при клике на некоторые элементы появляются другие и т.п. Для этого используется язык программирования JavaScript, код которого (его называют скриптами или сценариями) выполняется в браузере каждого пользователя вашего сайта.

JavaScript — слаботипизированный мультипарадигменный язык программирования. Это означает, что в нём есть работа с типами данных, но от разработчика не требуется строгое соответствие типам (например, можно складывать числа со строками и ничего плохо не случится, как, к слову, и хорошего).

Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных. Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером. Из-за особенностей связи и реализации backend (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом. Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно). Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript.

Ознакомьтесь с основами этого интересного языка программирования в Учебнике JavaScript (главы Введение и Основы JavaScript): https://learn.javascript.ru/. Там же есть описание про средства отладки JS-кода при помощи консоли разработчика.

Также про особенности слабой типизации в JavaScript и Ruby (есть и такой язык программирования) есть шуточный доклад: https://www.destroyallsoftware.com/talks/wat. Отметьте, как аудитория реагирует, когда докладчик в первый раз говорит "javascript" :)

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

Подключение JavaScript-библиотек

Ранее Вы подключали каскадные таблицы стилей к Вашему веб-сайту через <link type="stylesheet" .../>.

Сценарии JavaScript подключаются немного иначе, через элемент <script src="site.js"></script>. Заметьте, что у этого элемента обязательно следует указывать закрывающий тег. Иначе работать не будет.

Кстати, не все библиотеки нужно скачивать к себе рядом с сайтом. Можно воспользоваться CDN — сетями распространения контента.

Подключите таким образом в элемент head библиотеку SweetAlert: https://sweetalert.js.org/. На момент написания задания это можно сделать при помощи элемента <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>.

Посмотрите, какие красивые можно сделать сообщения о чём-либо на Вашем сайте!

Написание собственного скрипта. Добавление обработки формы

До этого Вы ознакомились с основами JavaScript. Также Вы попробовали поработать в консоли разработчика и написали там несколько команд (странно, что в этом языке нет void Main() { }, не так ли?). А ещё Вы подключили сторонние библиотеки (как минимум SweetAlert).

Теперь Ваша задача следующая:

• создать файл site.js рядом с index.html либо в отдельной папке js;
• подключить файл на страницу сайта с формой по аналогии с другими библиотеками (только из атрибутов в script должен быть только src);
• для примера написать в файле alert('test'); и проверить, что теперь при входе на страницу с формой должно появляться сообщение;
• убрать alert;
• добавить поиск формы через document.forms;
• добавить обработчик на submit через .addEventListener;
• добавить .preventDefault, чтобы при сабмите (отправке) формы не перезагружалась страница сайта (такое поведение по умолчанию во всех браузерах);
• добавить получение данных через FormData;
• добавить отображение данных из формы ввода в консоль разработчика при помощи console.log;
• добавить отображение сообщения о том, что данные записаны/заказ оформлен/регистрация прошла (смотря что у Вас) через sweet alert.
• добавить sweet alert с ошибкой, если какие-либо данные на форме были введены некорректно. Например, пароль короткий или количество товара отрицательное.

Для понимания FormData и методов работы с ним можете ознакомиться со следующим материалом: https://www.valentinog.com/blog/formdata/. Также там есть код по получению формы, добавлению обработчика и т.д.

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