Add lw03
This commit is contained in:
Vladislav Moiseev
parent
271fb5e605
commit
1403355431
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
||||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
||||||
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
|
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md)
|
||||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
|
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
|
||||||
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
|
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
|
||||||
|
|
||||||
|
|||||||
97
lw03/README.md
Normal file
97
lw03/README.md
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
# Лабораторная работа №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_ пример кода можно увидеть на сайте этой библиотеки.
|
||||||
|
Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.
|
||||||
Loading…
Reference in New Issue
Block a user