<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, а также объекты броузера.
4*. Обработка событий, связанных с фокусом
Focus, Blur, Change являются базовыми событиями, связанными с наведением или потерей фокуса элементом. К таким элементам относятся – окно, фрейм или любой элемент формы.
Событие onFocus возникает в том случае, когда какой-либо элемент формы получает фокус ввода (щелчок мыши в области поля формы).
Событие onBlur возникает в том случае, когда какой-либо элемент формы теряет фокус ввода (щелчок мыши вне поля формы).
Событие onChange возникает при изменении содержимого одного из элементов формы (щелчок мыши в области изменяемого поля формы).
Практическая работа «Обработчики onClick и onFocus в формах»
1. Откройте файл вычислитель.htm и выполните просмотр скрипта в броузере, проанализируйте результаты обработки события onClick.
2. Выполните следующие изменения в файле:
Þ Удалите кнопку из документа.
<button onClick="Start()">считай </button>
Þ Выполните вывод отображения результата арифметического выражения при наведении фокуса (onFocus – щелчок мыши в области элемента) на первое текстовое поле.
<input type=’text’ name='p1' onFocus="Start()">
Þ Замените вывод отображения результата арифметического выражения при наведении фокуса (onFocus – щелчок мыши в области элемента) на второе текстовое поле.
<input type=’text’ name='p2' onFocus="Start()">
3. Проанализируйте результаты обработки события onFocus.
Практическая работа «Обработчики onBlur и onChange в формах»
1. Замените вывод отображения результата арифметического выражения в файле вычислитель.htm, применяя обработчик события onBlur для первого текстового поля формы, а затем для второго.
<input type=’text’ name='p1' onBlur="Start()">
2. Замените вывод отображения результата арифметического выражения в файле Sobyt2.htm, применяя обработчик события onChange для первого текстового поля формы, а затем для второго.
<input type=’text’ name='p1' onChange="Start()">
3. Проанализируйте результаты обработки данных событий. Сравните результаты обработки данных событий.
Выводы
События – это действия пользователя в рамках страницы. В отличие от операторов языка JavaScript, обработчики событий задаются не внутри контейнера <script>, а как атрибуты определённого тега языка HTML, описывающего тот или иной элемент. Обработчик какого-либо события получает управление при возникновении данного события и вызывает функцию, указанную в нём. Сама же функция-обработчик располагается в скрипте контейнера <head>…</head>.
Проектирование Web-сайта «Динамический Web-документ»
Темы проектов
Þ Рекламная страничка предприятия (авто, туризм, косметика, по желанию).
Þ Обучающая страничка по языку HTML (JavaScript или по школьному предмету).
Требования к теоретической части (Объём 14 – 20 печатных страниц)
Титульный лист (тема проекта, авторы проекта). 1
Содержание (разделы и номера страниц). 2
1. Введение. 3-4
· Область проектирования (сеть Internet, история создания и основные стандарты Web, понятие статического и динамического Web-документа)
· Возможности HTML и JavaScript. Правила создания Web-страниц
2. Описание работы. 5-7
· Чем меня привлекает тема сайта. Цель и задачи моей работы
· Информационная модель данных сайта (заголовки разделов и тем, обзор данных)
· Как построена теоретическая часть проекта (краткое описание каждого раздела)
3. Модель Web-документа (схема и её описание): 8-9
· структура Web-документа
· количество файлов, их форматы; сколько уровней содержит Web-документ
4. Модель стартового файла (схема и её описание) 10-11
· система фреймов, наполнение фреймов (какие объекты содержит заставка)
· технология ссылок во фрейм
5. Схема якорей (разноцветная «паутина» применяемых типов ссылок) 12-13
6. Технология создания Web-документа. 14-15
· какие приложения и как использовались для создания html-файлов и их просмотра
· какие технологии вы знаете для создания Web-страниц, их сравнение
· дополнительные средства (диски, приложения, задачи)
7. Средства HTML (что применяете, для какой информации, в каких файлах, элементы языка) 16-17
8. Сценарии на JavaScript
· Задача обработки элементов форм
· Задача обработки динамического эффекта 18-19
Описание алгоритма решения (какие переменные, базовые структуры программирования, средства ввода/вывода информации, объекты и события применяли); сценарий программы (распечатка скрипта)
9. Исследовательская часть – выработка новых знаний 20-21
Постановка проблемы, поиск её решения путём анализа, сравнения и выбора результата
10. Заключение 22-23
· Что такое моделирование? Проектирование?
· Что такое профессионализм? Профессия Web-мастер?
· Чему вы научились в работе над проектом? Ваша самооценка (см. требования практ. части)
· Где можно применить ваш программный продукт?
· Какова примерная стоимость вашего проекта?
· Выводы. Популярность компьютерных сетей, создание Web-сайтов.
11. Литература (автор, название, издательство, год издания). 24
Требования к практической части (Объём 8 – 12 html-файлов)
1. Средства HTML:
· оформление данных, применение свойств таблицы стилей для заголовков и абзацев
· создание списков
· создание таблиц
· установка цвета фона или «фона из файла»
· вставка и выравнивание графических изображений, применение графических указателей ссылок
· создание всех типов ссылок
· создание системы фреймов; ссылок во фрейм
· использование элементов форм: текстовые поля, флажки, переключатели, раскрывающийся список, кнопки: очистка формы и вызов обработчика функции
2. Сценарии на JavaScript:
· задача обработки массива элементов форм и её решение (бланк заказа, анкета, тест и т.д.)
Преобразуйте строку a из текстового поля t1 в массив строк b, используя свойство split , где разделителем элементов массива служит пробел 
Удалите кнопку из документа.
<input type=’text’ name='p1' onFocus="Start()">
<input type=’text’ name='p2' onFocus="Start()">
<input type=’text’ name='p1' onBlur="Start()">
<input type=’text’ name='p1' onChange="Start()">