Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.astro.spbu.ru/staff/afk/Teaching/Seminars/XimFak/Sem09.htm
Дата изменения: Fri Nov 19 16:06:12 2010
Дата индексирования: Tue Oct 2 04:47:36 2012
Кодировка: Windows-1251
Sem09: Формы и Объекты. Объект Math
  Изменение размера шрифта

Тема 9 практических занятий:
Язык JavaScript. Часть 2.

 

Основы языка HTML и введение в CSS и JavaScript


  + -

Примечание. Для редактирования HTML файлов используйте встроенный редактор программы File Manager, а не внутренний редактор программы Mozilla!


Подтема 1: Обмен изображений

1. Откройте страницу Exchange.htm в браузере Mozilla или посмотрите как устроен файл Exchange.htm с помощью встроенного текстового редактора программы File Manager. Проверьте работу Программы обмена изображениями. Наведите курсор мыши на изображение. В этот момент изображение (Altavista) должно смениться на другое (Газета.ru). После удаления курсора с нового изображения никаких изменений больше не происходит.

2. Перейдите в браузере Mozilla к пункту File/Edit Page/<HTML>Source  . Создайте в вашем личном каталоге папку img и сохраните в ней изображения m1.gif, m2.gif, n1.gif и n2.gif.
Примечание: Рисунки открываются по ссылкам на их имена.
Добавьте реакцию на событие удаления курсора мыши с изображения: onmouseout="document.pm1.src='img/m1.gif'", восстаналивающую первоначальное изображение "m1.gif". Проверьте, что при удалении мыши с изображения востанавливается рисунок Altavista.

3. Скопируйте тэг <img src="m1.gif" ... > с обменом изображениями и поместите ее на две строки ниже первого тэга img.

4. Поменяйте имена заменяемых изображений: m1.gif->n1.gif и m2.gif->n2.gif. Проверьте, правильно ли работает обмен изображений во 2-й форме.

5. Введите реакцию на нажатие кнопки со вторым изображением (ondblclick). При этом должно загружаться изображение Park.jpg в папке img. Аналогичным образом оформите реакцию на двойной щелчок мыши по изображению. Рекцией на это действие должно быть появление изображения Repino.jpg в папке img.

Подтема 2: Объект Math

1. Откройте страницу Triangle.htm в браузере Mozilla или посмотрите как устроен файл Triangle.htm с помощью встроенного текстового редактора программы File Manager. Проверьте работу функции вычисления площали (area). Если из введеных в текстовые окна сторон (sides) можно составить треугольник, то будет вычислена его площадь. Если нельзя, то будет написано, такой треугольник не существует.

2. Перейдите в браузере Mozilla к пункту File/Edit Page/<HTML>Source. Скопируйте функцию geron и вставьте копию этой функции между тегами
<script ...> и <script>. Переименуйте 2-ю функцию geron -> perimeter. Примечание: в формулах надо обязательно писать 1*a, а не просто a, так как иначе переменная а будет восприниматься как текст.

3. Оформить вывод периметра (величины 2*p) в функции perimeter.

4. Ввести кнопку Perimeter по образцу кнопки Area. Вставить обращение к функции perimeter(form1) в качестве реакции на нажатие кнопки мыши (событие onClick).

5. Вставить кнопку reset: <input type="reset" value="Cancel">. Проверить работу кнопки reset. Для этого ввести какие-либо значения сторон и нажать на кнопку. Все введенные числа должны исчезнуть.

Подтема 3: Проверка условий в формах

1. Откройте страницу Zarplata.htm в браузере Mozilla. Проверьте работу функции вычисления средней зарплаты за три месяца (meanZarpl). После ввода значений зарплаты за три месяца и нажатия на кнопку Mean Salary в поле Mean Salary for 3 monthes появится значение средней зарплаты за 3 месяца.

2. Перейдите в браузере Mozilla к пункту File/Edit Page/<HTML>Source или посмотрите как устроен файл Zarplata.htm с помощью встроенного текстового редактора программы File Manager. Добавьте в функцию meanZarpl новые переменные a4, a5 и a6, соответствующие зарплате за апрель, май и июнь. Изменить соответсвующим образом функцию вычисления средней зарплаты.

3. Ввести новые текстовые поля num4, num5 и num6 для ввода зарплаты за апрель, май и июнь. Сохранить и обновить в браузере исправленную вами страницу Zarplata.htm. Проверить работу функцию meanZarpl на исправленной странице.

4. Вставить кнопку reset: <input type="reset" value="Cancel"> (см. пункт 5 подтемы 2). Протестировать работу кнопки reset