Лабораторная работа №5 Формы и простейшие Java-скрипты
вHTML-документах
1.Создайте HTML-документ, сообщающий прогноз погоды. В редакторе Блокнот создайте основу для HTML-документа. Назовите документ form1.htm. В документ включите форму FORM1. Форма должна содержать кнопку. Нажатие на кнопку вызывает появление окна с сообщением о погоде «Сегодня ожидается теплая погода. Температура воздуха – 15 градусов». В документ включите функцию, написанную на языке JavaScript, открывающую окно с сообщением (см. Пример 1 или Пример 2 Приложения и описание функции alert).
2.На основе документа form1.htm создайте новый документ form2.htm, в который включите форму со следующими элементами: окно ввода с поясняющим текстом и кнопка для вывода прогноза погоды через окно сообщения. Окно ввода служит для ввода температуры воздуха, окно сообщения должно выводить это значение (см. Пример 3 Приложения и описание функции alert). Если окно ввода пустое, нажатие на кнопку должно вызывать сообщение «Нет данных!».
3.Создайте новый документ form3.htm, представляющий собой анкету. Анкета должна представлять собой форму и содержать средство для ввода фамилии, два вопроса, ответы на которые выбираются с помощью радиокнопок (не менее трёх в каждой группе), и кнопки, «обрабатывающей» анкету. Обработка анкеты заключается в определении «рейтинга», представляющего собой сумму баллов за ответы на вопросы и выводе фамилии и «рейтинга» в окно браузера. Окно с ответом должно содержать элементы оформления: цвет фона, символов, форматирование символов, абзацев, горизонтальная полоса.
<FORM name=”form_name”> </FORM> name – атрибут, задающий имя формы
<INPUT type="button" value="Текст" onClick=”function_name”>
type – атрибут, задающий тип элемента; значение "button" обозначает кнопку
value - атрибут, определяющий надпись на кнопке (текст произвольного содержания); тип данных - строка
onClick – атрибут, определяющий функцию, выполняющуюся при нажатии на кнопку.
<INPUT type="text" name="input_name">
type – атрибут, задающий тип элемента; значение "text" обозначает окно ввода текста name – атрибут, задающий имя окну ввода
Окно ввода представляет собой объект. Свойство value содержит текст, введённый в окно: input_name.value – обращение к строке, отображаемой в окне ввода.
Текст1<INPUT type=radio name="name_radio" value=0 checked> Текст2<INPUT type=radio name=" name_radio" value=1> Текст3<INPUT type=radio name=" name_radio" value=2> Текст4<INPUT type=radio name=" name_radio" value=3>
type – атрибут, задающий тип элемента; значение "radio" обозначает радиокнопку
name – атрибут, задающий имя группе радиокнопок; все радиокнопки, образующие группу, должны иметь одно и то же имя
value – значение, соответствующее данной радиокнопке, тип значения – строка checked – атрибут, обозначающий выбранную радиокнопку
alert – функция, предназначенная для вывода сообщений в специальное окно сообщений. Вызов: alert(“Сообщение”);
document.write – метод объекта document, выводящий строку текста в окно браузера: document.write(“текст”);
После вывода текста на экран не происходит переход на следующую строку. Если аргумент метода write содержит какой-либо тэг языка HTML, то этот тэг не отображается на экране как текст, а интерпретируется браузером (см. Пример 4 Приложения).
document.writeln – то же, что и document.write, только после завершения вывода текста выполняет переход в начало следующей строки.
parseInt – функция, преобразующая строку текста в целое число: int_num = parseInt(string_variable);
parseFloat – функция, преобразующая строку текста в вещественное число: float_num = parseInt(string_variable);
Условный оператор if
if (<условие>) <действие 1> ;
else
<действие 2> ;
Пример 1 Простейший скрипт
<HTML>
<HEAD>
<TITLE>Пример 1</TITLE> <SCRIPT language=”JavaScript”>
function privet()
{
alert("Всем привет!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”form1”>
Хотите передать привет? <HR>
Нажмите кнопку
<INPUT type="button" value="Передать привет" OnClick=privet()> </FORM>
</BODY>
</HTML>
Пример 2 Использование глобальной переменной в скрипте
<HTML>
<HEAD>
<TITLE>Пример 2</TITLE> <SCRIPT language=”JavaScript”>
var Slovo = "большой"; function privet()
{
alert("Всем "+Slovo+" привет!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”form1”>
Хотите передать привет? <HR>
Нажмите кнопку
<INPUT type="button" value="Передать привет" OnClick=privet()> </FORM>
</BODY>
</HTML>
Пример 3 Функция с параметром
<HTML>
<HEAD>
<TITLE>Пример 3</TITLE> <SCRIPT language=”JavaScript”>
function privet(Slovo)
{
alert("Всем "+Slovo.value+" привет!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”form1”>
Хотите передать привет? <HR>
<INPUT type="text" name=”stroka”>
Нажмите кнопку
<INPUT type="button" value="Передать привет" OnClick=privet(form1.stroka)> </FORM>
</BODY>
</HTML>
Пример 4 Использование метода document.write
Ещё один вариант функции privet() – результат выводится в окно браузера function privet(Slovo)
{
document.write("<H2 align=center>Приветствие</H2>"); document.write("Всем "+Slovo.value+" привет!"); document.write("<HR width=80%>");
}
Пример 5 Функция для определения значения, соответствующего выбранной радиокнопки
function getValue(radioObject)
{
var value=null;
for(var i=0; i<radioObject.length; i++)
{
if (radioObject[i].checked)
{
value=radioObject[i].value;
break;
}
}
return value;
}
Здесь radioObject – массив объектов - радиокнопок. Объект – радиокнопка имеет значение, хранящееся в свойстве value, тип значения – строка. Свойство checked обозначает выбранную радиокнопку и имеет логический тип (значение true соответствует выбраной радиокнопке).