Пример выполнения 6 задания. Задание № 1. Создать HTML-страницу, которая печатает Ваш возраст в годах, месяцах и днях
Лабораторная работа №10
Java Script
Вариант 2
Задание № 1. Создать HTML-страницу, которая печатает Ваш возраст в годах, месяцах и днях.
Задание № 2. Создать HTML-страницу, которая при загрузке случайным образом выбирает цвет фона.
Задание № 3. Создайте новый объект Translation для хранения английских слов и их перевода. Объект должен иметь свойства
• enWord - английское слово;
• rusText - русский перевод этого слова.
Далее необходимо с помощью наследования из объекта Array описать объект Dictionary, который хранит массив экземпляров объекта Tranclation. Для этого объекта необходимо поддерживать методы
• add( translation) - добавить в список экземпляр объекта Translation;
• replace( translation) - заменить перевод слова translation.enWord на новый translation.rusText.
• toString() - вывести в виде таблиц все слова и их перевод, разделяя их на группы по первой букве английского слова. Слова должны быть отсортированы по алфавиту.
• toStringForChar( ch) - аналогично toString, но выводятся только слова, начинающиеся с символа, стоящего первым с строке аргумента ch.
Показать на примерах использование объекта Dictionary.
Задание № 4. Возьмите четыре любые картинки одинакового размера (можно взять изображения игральных карт). Сделайте так, чтобы на Вашей странице отображались одновременно все четыре картинки в разных местах.
Картинки должны перемещаться по кругу. Т.е. один раз в полсекунды, все они должны перейти "по кругу" по часовой стрелке. Т.е., первая картинка, должна занять место второй, вторая - третьей, третья - четвертой и четвертая - первой.
И так, каждые полсекунды.
Эту задачу можно решать различными способами, но самый простой - определить необходимые объекты или добавить нужные методы к системным объектам.
Задание № 5. Создайте два плавающих фрейма, расположенных по вертикали в любом месте страницы. Далее возьмите несколько (не менее пяти) любых картинок одинакового размера (можно взять изображения игральных карт). Сделайте так, чтобы в правом фрейме отображалась только одна картинка.
Далее, в левом фрейме должна быть группа радио-кнопок, напротив которых написаны названия картинок. При переключении радио-кнопки, должна немедленно переключаться и картинка в правом фрейме.
Например, общий вид страницы может быть такой (ничего не работает):
| Начало формы Дама пик Король треф Семерка бубен Валет бубен Шестерка червей Конец формы |  |
Эту задачу можно решать различными способами, но самый простой - определить необходимые объекты или добавить нужные методы к системным объектам.
Задание № 6. Разработать динамическую web-страницу, выполняющую (при помощи JavaScript) нижеприведенную задачу. Ввод и вывод данных осуществлять при помощи элементов формы и диалоговых окон.
Содержание задачи: Тестирующая программа, которая предлагает пользователю три вопроса и по три ответа на каждый из них (только один правильный), а также выставляет оценку по результатам тестирования.
Пример выполнения 6 задания
Создать страницу - справочную подсистему о рекомендуемых книгах "Язык С++: Учебное пособие" и др. (см. Список рекомендуемой литературы). При этом выбор книги пользователем автоматически должен сопровождаться выдачей полной библиографии книги в окно вывода текста и характеристикой ссылки (основная или дополнительная литература).
Ниже приводится текст документа, а на рис. - вид страницы.
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <TITLE>Справочная подсистема</TITLE> <style type="text/css"> table {border: black 1 solid; background-color: #d7d7bf} TD.t1 {FONT-WEIGHT: bold; font-style: italic; COLOR: #003399; BACKGROUND-COLOR: #ffffff} TD.t2 {FONT-WEIGHT: bold; font-style: italic; COLOR: #ffffff; BACKGROUND-COLOR: #96bbf9} </style> <script language="JavaScript"> <!-- var Books; function preload() { Books = preload.arguments; } function show() { var N = show.arguments; document.f1.ta1.value=Books[N[0]-1]; if ((N[0] >= 1) && (N[0] <= 4)) {document.f1.cb1.checked=1;} else {document.f1.cb1.checked=0;} } //--> </script> </HEAD> <BODY background="bg.gif" bgcolor=#EEFFEE onload="preload( 'Подбельский В.В. Язык С++: Учебное пособие. - 5-е изд. - М.: Финансы и стати-стика, 2001. - 560 с.', 'Гради Буч. Объектно-ориентированный анализ и проектирование с примерами приложений на С++, 2-е изд. / Пер. с англ. - М.: Издательство Бином, СПб.: Невский диалект, 2001. - 560 с.', 'Леоненков А.В. Самоучитель UML. - 2-е изд., перераб. и доп. - СПб.: БХВ-Петербург, 2004. - 432 с.', 'Программирование Web-страниц / Шеф-редактор С.В. Глушаков. - Харьков: Фолио, 2002. - 390 с.', 'Страуструп Б. Язык про-граммирования С++. - М.: Радио и связь, 1991. - 352 с.', 'Павловская Т.А. С/С++. Про-граммирование на языке высокого уровня. - СПб.: Питер, 2001. - 464с.', 'Павловская Т.А. С/С++. Структурное программирование: Практикум/ Т.А.Павловская, Ю.А.Щупак. - СПб.: Питер, 2002. - 240с.', 'Гофман В.Э., Хомоненко А.Д. Работа с базами данных в Delphi. - СПб: БХВ-Петербург, 2001. - 656 с.', 'Использование HTML 4 / Паттерсон Луи-за и др. - К.; М.; СПб.: Издат. дом Вильямс, 1998. - 384 с.', 'JavaScript. Справочник: Пер. с англ. / Аллен Вайк и др. - СПб: ООО ДиаСофтЮП, 2002. - 896 с.')"> <table border=0><tr><td> <h3 align=center>Список литературы:</h3> <TABLE cellspacing=1 cellpadding=2> <TR><TD class=t1 onMouseOver="show(1);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Язык С++: Учебное пособие</TD></TR> <TR><TD class=t1 onMouseOver="show(2);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Объектно-ориентированный анализ и проектирование с примерами приложений на С++</TD></TR> <TR><TD class=t1 onMouseOver="show(3);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Самоучитель UML</TD></TR> <TR><TD class=t1 onMouseOver="show(4);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Программирование Web-страниц</TD></TR> <TR><TD class=t1 onMouseOver="show(5);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Язык программирования С++</TD></TR> <TR><TD class=t1 onMouseOver="show(6);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> С/С++. Программирование на языке высокого уровня</TD></TR> <TR><TD class=t1 onMouseOver="show(7);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> С/С++. Структурное программирование: Практикум</TD></TR> <TR><TD class=t1 onMouseOver="show(8);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Работа с базами данных в Delphi</TD></TR> <TR><TD class=t1 onMouseOver="show(9);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> Использование HTML 4</TD></TR> <TR><TD class=t1 onMouseOver="show(10);this.style.background='#FFF88E'" onMouseOut="this.style.background='#ffffff'"> JavaScript. Справочник</TD></TR> </TABLE> </td></tr><tr><td> <form name=f1> <teхtarea name=ta1 rows=3 cols=80> </teхtarea> <input type=checkbox name=cb1>Основная литература </form> </td></tr></table><hr> </BODY></HTML>
Задание № 7. Создайте средствами JAVASCRIPT web-приложение для работы с разными поисковыми системами, которое позволяет выполнять упрощенный ввод данных и простой выбор поисковой системы. Требования к разработке: экран разбить на 2 фрейма. В первом пользователь вводит в поле ввода текст запроса и с помощью стрелок перебирает содержимое графического меню доступных поисковых систем для выбора поисковой системы, которой будет адресован введенный запрос. Результаты выводятся во втором фрейме. Включить поддержку 20 поисковых систем.
Оформить отчет и предоставить преподавателю в электронном виде HTML-страницы по каждому заданию.