Практическое занятие № 12
Наименование: Создание тестов средствами HTML и JavaScript (4 часа)
Цель: Научиться создавать тестирующую программу средствами HTML и JavaScript
2. Подготовка к занятию: По предложенной литературе повторить тему «Использование HTML – форм» и ответить на следующие вопросы:
2.1 Назначение элементов формы на веб - странице?
2.2 Какие элементы формы вам известны?
2.3 Обязательные теги для создания формы?
3. Литература:
3.1 Шомас Е.А. Конспект лекций по МДК.В.01.03 «Веб - программирование»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с
3.4 http://www.wisdomweb.ru/JS/javascript-first.php - JavaScript .Учебник
4. Перечень оборудования и программного обеспечения:
ПЭВМ, подключенные к сети Интернет
Браузеры
Текстовый редактор
5. Задание:
5.1 Создать программу тестирования используя элементы формы HTML. Вопросов должно быть не менее 10 на тему JavaScript;
5.2 Подключите таймер, чтобы на обдумывания над ответом отводилось секунд 30;
5.3. Результат выводился в виде оценки и надписи, количества не верных ответов.
61% правильных ответов – оценка «3»;
81% - оценка «4»;
100% - оценка «5»;
Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
Дать ответы на контрольные вопросы;
7. Содержание отчета:
Наименование и цель работы
7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.
7.3 Ответы на контрольные вопросы
Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Обязательные атрибуты элементов формы, чтобы осуществить связь с кодом JavaScript?
8.2 Каким образом подключается таймер к скрипту?
ПРИЛОЖЕНИЕ:
В составлении вопросов тестирования, если необходимо выбрать один правильный ответ, то должно быть минимум четыре варианта ответа. В качестве элементов формы, используется флажки. Если в качестве ответа используется «да – нет» - логика, то применяются кнопки – переключатели.
Практическое занятие № 13
Наименование: Создание динамических страниц с помощью JavaScript
Цель: Научиться обновлять содержимое сайта в зависимости от текущего времени, сделать страничку динамической, средствами HTML и JavaScript
2. Подготовка к занятию: По предложенной литературе повторить пройденные темы, закрепить материал на практике выполнив задания практического занятия
3. Литература:
3.1 Шомас Е.А. Конспект лекций по МДК.В.01.03 «Веб - программирование»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с
3.4 http://www.wisdomweb.ru/JS/javascript-first.php - JavaScript .Учебник
4. Перечень оборудования и программного обеспечения:
ПЭВМ, подключенные к сети Интернет
Браузеры
Текстовый редактор
5. Задание:
5.1 Написать программу, позволяющую вывести поздравления на кануне какого – либо праздника (в первом случае пусть это будет открытка);
5.2 Усовершенствуйте сценарий таким образом, чтобы открытка с поздравлением загружалась в отдельном окне, с возможностью его закрытия;
5.3 Добавьте возможность изменения цвета фона HTML- документа в зависимости от поры года: белый – зимой, светло – зеленый – весной, более насыщенный зеленый – летом, желтый – осенью;
5.4 Сделайте то же, что и в предыдущем задании, но с использованием фонового изображения;
Порядок выполнения работы:
6.1 Внимательно ознакомится с Приложением к практическому занятию, где представлен фрагмент кода, позволяющего выводить поздравления с Рождеством;
6.2 Выполнить задание практического занятия;
Дать ответы на контрольные вопросы;
7. Содержание отчета:
Наименование и цель работы
Задание, под каждым поместить код программы и полученные результаты в виде скринов.
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Для чего в сценарии используется метод valueOf ()?
8.2 Для каких целей в сценарии присутствуют переменные start_date, finish_date, current_date?
ПРИЛОЖЕНИЕ:
Самый простой вариант «автоматического» обновления содержимого вашего сайта заключается в выводе некоторых фрагментов HTML-кода (текста, изображения, flash – презентации и т.д.) средствами JavaScript, используя метод write объекта document.
Рассмотрим пример, который построен на сравнении текущей даты с датами начала и завершения отображения фрагмента HTML – кода. Самым простым и логичным способом было бы выделить из стартовой и конечной даты день, месяц и год, а затем сравнивать поэлементно с текущим днем, месяцем и годом, но есть метод проще: метод valueOf для JavaScript – объекта Date возвращает количество секунд, начиная с первого января 1970 года. Поэтому гораздо проще сравнивать даты, используя это значение в миллисекундах, которое уже содержит информацию о дате, месяце и годе.
Код примера будет содержать три переменные:
current_date - текущая дата;
start_date – дата начала отображения фрагмента кода;
finish_date – дата завершения отображения фрагмента кода.
После инициализации значений переменных start_date, finish_date, current_date они сравниваются с помощью метода valueOf. В случае если значение в переменной current_date оказывается в промежутке между start_date и finish_date для текущего фрагмента кода, он отображается в окне браузера. Пример поздравления, появляющегося в канун Рождества с 20 декабря 2014 года по 8 января 2015 года приведен ниже (в данном случае загрузится открытка, а ниже надпись с поздравлением:
<script>
var start_date = new Date (2014, 11, 27);
var finish_date = new Date (2015, 0, 7);
var current_date = new Date ();
if((start_date.valueOf()<current_date.valueOf())
&&(current_date.valueOf()<finish_date.valueOf()))
{
document.write("<center><img src='rogestwo.jpg'> <br> Поздравляем!!!</center>");
}
</script>
Практическое занятие № 14.
Наименование: Реализация системы кнопок навигации (4 часа)
Цель: Научиться обновлять содержимое сайта в зависимости от текущего времени, сделать страничку динамической, средствами HTML и JavaScript
2. Подготовка к занятию: По предложенной литературе повторить пройденные темы, закрепить материал на практике выполнив задания практического занятия
3. Литература:
3.1 Шомас Е.А. Конспект лекций по МДК.В.01.03 «Веб - программирование»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с
3.4 Соколов В.А. JavaScript в примерах, типовых решениях и задачах. Профессиональная работы. – М.: ООО “И.Д. Вильямс”, 2006
3.5 http://www.site-do.ru/js/js.php - уроки JavaScript
4. Перечень оборудования и программного обеспечения:
ПЭВМ, подключенные к сети Интернет
Браузеры
Текстовый редактор
5. Задание:
5.1Создать сайт с кнопочной системой навигации, предложенной на рисунке 1 Приложения к практической работе.
5.2 Кнопкам придать эффект подсветки. При нажатии на кнопку осуществляется переход на соответствующую страницу. Система навигации должна быть видна на всех страницах сайта, причем подсвечиваться должна выделенная кнопка. Также на всех страницах должен отображаться логотип компании (банеры на усмотрение).
Заполните каждую страницу информацией.
6. Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
7. Содержание отчета:
7.1 Наименование и цель работы
7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Перечислите какие средства JavaScript использовались при создании сайта.
ПРИЛОЖЕНИЕ:
Использование системы кнопок навигации является одним из ключевых моментов дизайна сайтов. Предлагается рассмотреть пример заключающийся в подсветке образующих систему навигации «кнопок» при перемещении над ними указателя мыши. При этом для каждой страницы сайта, навигация на котором осуществляется данной системой кнопок, существует своя кнопка, автоматически подсвечиваемая при загрузке страницы в браузере. При наведении указателя мыши на любую другую кнопку этой системы подсветка переводится на эту кнопку. При уходе указателя мыши с этой кнопки подсвечивается первоначально выделенная кнопка, соответствующая текущей страницы сайта.
Главный плюс предлагаемого к рассмотрению примера заключатся в том, что JavaScript-код сам автоматически определяет кнопку, которая соответствует текущей странице сайта и на которую возвращается подсветка после снятия подсветки с других кнопок, когда указатель мыши выходит за их границы.
Второй плюс заключается в том, что можно поместить один и тот же фрагмент JavaScript – кода на всех HTML – документах, содержащих эту систему кнопок, без каких-либо изменений.
В предлагаемом примере используются четыре кнопки со ссылками на соответствующие разделы: Главная (Index), О компании (Company), Услуги (Service) и Документация (Documents). Эти абстрактные разделы наиболее часто встречаются на Интернет – сайтах небольших коммерческих фирм.
Как правило, система кнопок размещается слева от основного текста страниц сайта, под логотипом. Описываемый вариант размещения системы кнопок на типовой web – странице представлен на следующем рисунке:
Рисунок 1 – Вариант дизайна web – страницы, содержащей систему кнопок на навигации
Принцип подсветки заключается в том, что для каждой кнопки системы навигации существует два изображения: одно базовое (index.gif, company.gif, service.gif, documents.gif), а другое – с изображением выделенной кнопки (indexUp.gif, companyUp.gif, serviceUp.gif, documentsUp.gif). Принцип работы кнопочной системы навигации заключается в последовательном переборе изображений, содержащихся в массиве images объекта document, и изменении атрибута src, содержащего название изображения, отображаемого в данный момент.
Рисунок 2 – Внешний вид системы кнопок (выбрана страница company.html)
Для выполнения данного примера можно воспользоваться описанием практической работы №11 – пример изменяющегося рисунка. Банер можно выполнить с помощью слайд – шоу, воспользовавшись также практической работы №11.