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