intprog/lw03/README.md
2023-03-06 22:04:00 +04:00

98 lines
9.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Лабораторная работа №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#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных.
Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером.
Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом.
Если в 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_ пример кода можно увидеть на сайте этой библиотеки.
Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.