Практическая работа «Вычислитель»

• Дополните файл События.htm html-кодом для задачи «Вычислитель» и проанализируйте обработку события onClick в форме.

Практическая работа «Бланк заказа»

1. Д ополните тело документа События.Htm формой с именем fd, включив в неё следующие элементы по образцу:

Текстовые поля d1 и d2: Фамилия: Имя:

Текстовое поле d3: Укажите количество (по 2$ за штуку)

2. Включите в форму кнопку <button>Проверка данных</button> с обработчиком onClick для вызова

функции Z4( )

3. Дополните скрипт документа События.htm функцией с именем Z4( ), включив в неё обработку текстового поля d3 и вывод информации методом document.write из полей d1 и d2 по следующему образцу:

Уважаемый посетитель нашего сайта … ! Благодарим Вас за приобретение нашего товара в количестве … штук.

Вы должны перевести на наш счёт … $.

4. Предусмотрите 5%^ную скидку при вводе количества товара больше 50 штук

4. Доступ к элементам форм. Примеры

Сценарий JavaScript Форма в теле html-документа

Текстовое поле ввода ‘TEXT’ Проверка ввода данных

Document.Форма.Поле.value

function start2( ){

z=document.F2.k.value;

if (z=="")

{alert("Попробуйте ввести своё имя.")}

else

{alert("Ваше имя-"+z+"?");

a="Уважаемый "+z+"приветствуем Вас";

document.write(a);

}

}

Флажки ‘CHECKBOX’

Document.Форма.Поле.checked

function start3( ){

var s="";

if (document.F3.p1.checked ==true)

s=s+document.F3.p1.value;

if (document.F3.p2.checked ==true)

s=s+document.F3.p2.value;

if (document.F3.p3.checked ==true)

s=s+document.F3.p3.value;

if (s.length>0)

{document.write("Ваш заказ: "+s);}

else {alert ("Флажок не включён!"); }

}

Переключатели ‘RADIO’

Document.Форма.Элемент массива.checked

function start4( ) {

if (document.F4.R[0].checked==true) alert("Иордания");

if (document.F4.R[1].checked==true) alert("Кипр");

if (document.F4.R[2].checked==true) alert("Замбия");

if (document.F4.R[3].checked==true) alert("Россия");

}

Раскрывающийся список ‘SELECT’

Document.Форма.Поле.selectedIndex № элемента

Document.Форма.Поле.options(№).text элемент

function start5( ){

a=document.F5.S.selectedIndex;

b=document.F5.S.options[a].text;

document.write("Вы выбрали "+b)

}

<form name="F2">Введите ваше имя<br>

<input type="text" name="k">

<button onClick="start2()">Проверим ввод</button>

<input type="reset">

</form>

Проверка выбора заказа

<form name="F3">Проверка включения флажка: <br>

<input type="checkbox" name="p1" value="Шоколад">

Шоколад <br>

<input type="checkbox" name="p2" value="Мороженое">

Мороженое <br>

<input type="checkbox" name="p3" value="Шампанское">

Шампанское <br>

<button onClick="start3()">Проверка заказа</button>

<input type="reset">

</form>

Вывод государства по выбору его столицы

<form name="F4">Выбери столицу <BR>

<input type="radio" name="R" onClick="start4()">

Амман <BR>

<input type="radio" name="R" onClick="start4()">

Никосия <BR>

<input type="radio" name="R" onClick="start4()">

Лусака <BR>

<input type="radio" name="R" onClick="start4()">

Москва <BR>

</form>

Проверка выбора иностранного языка

<form name='F5'>Какой язык вы знаете ? <br>

<select name='S'>

<option>Английский

<option>Немецкий

<option>Французский

</select>

<button onClick="start5()">Проверим выбор </button>

</form>

5. Программирование обработки событий

Одной из самых важных задач обработки текстового поля формы является преобразование содержимого текстового поля в массив и обработка этого массива на стороне клиента, в среде броузера.

Практическая работа “Средний балл участника соревнований”

Найдите среднюю оценку участника соревнований. При подсчёте среднего балла максимальная и минимальная оценки не учитываются. Ввод оценок осуществите в первом текстовом поле формы через пробел. Вывод результата выполните во втором текстовом поле той же формы.

Решение

1. Создайте форму с именем FT, содержащую два текстовых поля с именами t1 и t2, кнопку для вызова функции z5( ) и кнопку для очистки формы

2. Создайте функцию z5( ), в которой реализуйте решение задачи:

• П реобразуйте строку a из текстового поля t1 в массив строк b, используя свойство split , где разделителем элементов массива служит пробел

a=document.FT.t1.value;

var b=new Array();

b=a.split(" “);

• Преобразуйте созданный массив строк b в числовой массив, используя функцию parseFloat

• Осуществите в массиве b поиск суммы, а также минимального и максимального элемента

• Вычислите среднее арифметическое элементов массива b, не учитывая максимального и минимального элементов

• Выведите результат во втором текстовом поле t2 формы FT

3. Протестируйте работу программы с разными исходными данными

4. Отформатируйте Web-страницу (цвет, шрифт)

7. Программирование динамических «эффектов»

JavaScript – универсальное средство создания интерактивных страниц, с помощью которого можно создавать визуальные динамические эффекты на Web-странице. Примеры задач с динамическими эффектами содержатся в каталоге «Эффекты».

«Смена изображения» основана на обработке событий onMouseOver и onMouseOut. При потере фокуса изображение1 меняется на изображение2, при получении фокуса изображение2 меняется на изображение1.

«Мультик» создан с помощью конструирования массива объектов Image, в которые загружаются изображения и последовательно отображаются сначала в прямом порядке, а затем в обратном.

«Выбор фона из списка» использует свойство document.bgColor, а также элемент формы select, в котором определены цветá фона страницы для выбора пользователем.

«Выбор фона ссылкой» использует исходные внутренние якоря для выбора цвета фона страницы пользователем.

«Новое окно» броузера открывается с помощью метода window.open(), а закрывается методом window.close()

«Пароль» выполняет запрос функцией prompt() для защиты конфиденциальной информации и закрывает доступ к файлу, если ввод данных был не определён.

«Часы» показывают текущую дату и время с помощью методов getHours(), getMinutes(), getSeconds() и вызывает функцию на выполнение с интервалом 1 секунда методом setTimeout()

«Подтверждение ссылки» выводит диалоговое окно confirm() с вопросом, действительно ли пользователь намерен перейти по ссылке.

«Ссылка во фрейм js» демонстрирует динамическое изменение цвета фона и текста в отдельном фрейме при щелчке пользователя по указателю ссылки, расположенной в статическом фрейме.

Выводы

Мы рассмотрели типичные примеры задач, встающих перед авторами Web-страниц. В примерах использованы различные свойства и методы встроенных объектов языка JavaScript, а также объекты броузера.