From 14033554317580d331e1e287a393a0e7a56a28dd Mon Sep 17 00:00:00 2001 From: Vladislav Moiseev Date: Mon, 6 Mar 2023 22:04:00 +0400 Subject: [PATCH] Add lw03 --- README.md | 2 +- lw03/README.md | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 lw03/README.md diff --git a/README.md b/README.md index edd914c..c47e195 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ * [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md) * [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md) -* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md) +* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/lw03/README.md) * [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md) * [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md) diff --git a/lw03/README.md b/lw03/README.md new file mode 100644 index 0000000..3c2c68f --- /dev/null +++ b/lw03/README.md @@ -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: . +Особенно обратите внимание на первые 6 страниц. + +Проверьте, что на ваших формах есть необходимые элементы: элемент form, поля ввода, кнопка в виде button или ``. +Также убедитесь, что у полей ввода есть аттрибуты name, которые уникальны для каждого поля в рамках одной формы. + +## Необходимость JavaScript и отладка приложений JS + +Сейчас страницы написанного вами сайта статичны - в них нет интерактивных элементов. +Однако если вы зайдёте на популярные сайты, то можете увидеть, что они динамичны - на кнопки можно нажать, при клике на некоторые элементы появляются другие и т.п. +Для этого используется язык программирования JavaScript, код которого (его называют _скриптами_ или _сценариями_) выполняется в браузере каждого пользователя вашего сайта. + +JavaScript — слаботипизированный мультипарадигменный язык программирования. +Это означает, что в нём есть работа с типами данных, но от разработчика не требуется строгое соответствие типам (например, можно складывать числа со строками и ничего плохо не случится, как, к слову, и хорошего). + +Синтаксис JS похож на любой си-подобный язык (C / C++ / C#), однако при работе с ним особенно часто применяется асинхронный подход к обработке данных. +Об этом стоит знать и помнить, если вы обмениваетесь данными с веб-сервером. +Из-за особенностей связи и реализации бекенда (кода на серверной стороне) наши запросы могут обрабатываться медленно, и на момент ожидания мы не должны блокировать работу пользователя с нашим веб-сайтом. +Если в desktop-приложениях при долгих операциях можно сделать, чтобы приложение "зависло" в ожидании какого-либо запроса, то в веб-приложениях это не допустимо (да и благодаря JavaScript невозможно). +Единственные случаи, когда браузер может зависнуть - это от слишком больного DOM-дерева или неправильно написанного кода на JavaScript. + +Ознакомьтесь с основами этого интересного языка программирования в Учебнике JavaScript (главы Введение и Основы JavaScript): . +Там же есть описание про средства отладки JS-кода при помощи консоли разработчика. + +Также про особенности слабой типизации в JavaScript и Ruby (есть и такой язык программирования) есть шуточный доклад: . +Отметьте, как аудитория реагирует, когда докладчик в первый раз говорит "javascript" :) + +В качестве освоения консоли разработчика можете повторить примеры на JavaScript из доклада выше и убедиться в том, что JavaScript - интересный язык программирования. + +## Подключение JavaScript-библиотек + +Ранее Вы подключали каскадные таблицы стилей к Вашему веб-сайту через ``. + +Сценарии JavaScript подключаются немного иначе, через элемент ``. +Заметьте, что у этого элемента обязательно следует указывать закрывающий тег. +Иначе работать не будет. + +Кстати, не все библиотеки нужно скачивать к себе рядом с сайтом. +Можно воспользоваться CDN — сетями распространения контента. + +Подключите таким образом в элемент `head` библиотеку SweetAlert: . +На момент написания задания это можно сделать при помощи элемента ``. + +Посмотрите, какие красивые можно сделать сообщения о чём-либо на Вашем сайте! + +## Написание собственного скрипта. Добавление обработки формы + +До этого Вы ознакомились с основами 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` и методов работы с ним можете ознакомиться со следующим материалом: . +Также там есть код по получению формы, добавлению обработчика и т.д. + +Про использование _SweetAlert_ пример кода можно увидеть на сайте этой библиотеки. +Это нормальная практика для библиотек в вебе, когда прямо на сайте о них можно посмотреть пример их работы.