- •1.Лабораторная работа №1. Создание простых web-страниц с фреймовой структурой
- •1.1.Введение
- •1.2.Структура html-документа
- •1.3.Фреймы
- •1.4.Ссылки
- •1.5.Текст
- •1.5.1.Текстовые блоки
- •1.5.2.Форматирование текста
- •1.5.3.Списки
- •1.5.4.Таблицы
- •1.6.Изображения
- •1.7.Задание на лабораторную работу
- •1.8.Варианты заданий
- •1.9.Справочники и руководства
- •2.Лабораторная работа №2. Использование каскадных таблиц стилей css
- •2.1.Назначение css
- •2.2. Включение css в документ html
- •2.2.1.Внешние стили (external style sheets)
- •2.2.2.Таблицы стилей документа (document style sheets)
- •2.2.3.Стили, встроенные в элемент (inline styles)
- •2.3.Синтаксис css
- •2.3.1.Виды селекторов html селекторы
- •Селекторы класса
- •Id селекторы (идентификаторы)
- •2.3.2.Селекторы, зависящие от контекста Селекторы потомков
- •Селекторы детей
- •3.1.2.Элемент textarea
- •3.1.3.Элемент input
- •3.1.4.Элемент select .. Option
- •3.2.Пример реализации формы
- •3.3.Обработка данных форм на JavaScript
- •3.4.Лабораторное задание
- •3.5.Справочники и руководства
- •4.Лабораторная работа №4. Java Script. Работа с html-страницей при помощи объектной модели документа dom
- •4.1.Введение
- •4.2.Структура программы JavaScript
- •4.2.1.Включение сценария в html-файл
- •4.2.2.Выполнение сценариев и отображение страницы
- •4.2.3.Операторы и комментарии
- •4.3.Dom: работа с html-страницей
- •4.3.1.Глобальная структура объектов браузера
- •4.3.2.Дерево dom-объектов
- •4.3.3.Доступ к элементам dom и навигация
- •4.3.4.Свойства элементов dom
- •4.3.5.Атрибуты элементов dom
- •4.3.6.Добавление и удаление элементов dom
- •4.3.7.Работа с таблицами в dom
- •4.4.Работа со стилями при помощи JavaScript
- •4.4.1.Работа с классом элемента
- •4.4.2.Работа с css-свойствами
- •4.5.Задание на лабораторную работу
- •5.Лабораторная работа 5. Сценарии php. Обработка форм на стороне сервера
- •5.2.Лабораторное задание
3.4.Лабораторное задание
Разработать веб-страницу, содержащую форму с полями для описания объекта предметной области в соответствии с вариантом задания на лабораторную работу №1.
В форме необходимо использовать поля текстового, многострочного текстового типов, радиокнопки, чекбокс, выпадающий список.
В веб-странице реализовать сценарий JavaScript, выполняющий проверку правильности вводимы в форму данных и вывод их в виде описания объекта на этой же странице.
Форма должна иметь оригинальный дизайн, заданный при помощи CSS.
Веб-страница с формой должна отображаться в фрейме «описания» по ссылке из списка категорий.
3.5.Справочники и руководства
http://javascript.ru
http://lit.jinr.ru/LCTA/Java/javascript/chapt10.htm
4.Лабораторная работа №4. Java Script. Работа с html-страницей при помощи объектной модели документа dom
4.1.Введение
JavaScript – прототипно-ориентированный скриптовый язык программирования. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Прототипное программирование – стиль объектно-ориентированного программирования, при котором отсутствует понятие класса, а повторное использование (наследование) производится путём клонирования существующего экземпляра объекта — прототипа.
Поскольку программа на JavaScrit представляет собой сценарий, то ее не требуется компилировать. Сценарий интерпретируется (браузером) по ходу выполнения.
В целях безопасности для сценариев JavaScript ограничен доступ к файловой системе компьютера, а также ограничена возможность запускать другие приложения. Т.е JavaScript-сценарий не имеет прямого доступа к операционной системе. Кроме того, JavaScript, работающий в одной вкладке или окне браузера, не имеет доступа к другой вкладке или окну, за исключением случая, когда он сам открыл это окно.
4.2.Структура программы JavaScript
4.2.1.Включение сценария в html-файл
Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT:
<html>
<body>
<p>Начало документа</p>
<script>
alert('Привет, Мир!')
</script>
<p>Конец документа</p>
</body>
</html>
Элемент <script> также имеет необязательные атрибуты:
<script type=...> - указывает тип скрипта, например <script type="text/javascript">
<script language=...> - указывает язык скрипта, например <script language="text/javascript">
Иногда рекомендуется использовать HTML-комментарии внутри SCRIPT, чтобы спрятать Javascript от браузеров, которые не поддерживают его:
<html>
<body>
<p>Начало документа</p>
<script type="text/javascript"><!--
alert('Привет, Мир!')
//--></script>
<p>Конец документа</p>
</body>
</html>
Если JavaScript-кода много то его выносят в отдельный файл, который подключается в HTML:
<script src="/path/to/script.js"></script>
Важный плюс выноса скриптов в отдельный файл - кеширование. Один и тот же скрипт обычно используется на множестве страниц. В этом случае браузер скачает его только первый раз, и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
4.2.2.Выполнение сценариев и отображение страницы
Когда браузер парсит HTML-страницу и встречает тег <script>, он переключается в режим исполнения Javascript и выполняет код, который находится внутри тега. Выполнив его, браузер продолжает парсить страницу. Таким образом, тег <script> блокирует рендеринг (отображение) документа, пока не выполнится. Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место – это раздел <HEAD>.
Если необходимо продолжить рендеринг и отображение страницы прежде, чем скрипт из внешнего файла загрузится, то можно для тэга <script> задать атрибут async или defer, то браузер ставит его в очередь на загрузку и, не задерживаясь, продолжает отображать страницу. Когда скрипт загрузится — он выполнится. Разница между этими двумя атрибутами заключается в том, что defer сохраняет порядок выполнения скриптов, а async – нет.