Часть 1. Обязательные задания

ВНИМАНИЕ! На этой странице находятся дополнительные справочные материалы по языку HTML и CSS.

Язык программирования JavaScript - предназначен для создания интерактивных HTML-документов.

Подтема 1: Задание и вызов функции. Формы и События

1. Откройте страницу Test1.htm. Проверьте работы сценария JavaScript. Введите длину прямоугольника 24 и ширину - 25 и нажмите левой кнопкой мыши кнопку Вычислить. У вас должен получиться ответ 600 см² .

2. Вернитесь к документу Test1.htm. Перейдите в браузере к редактированию HTML кода . Ознакомьтесь с устройством функции square(a,b). Посмотрите, как происходит обращение к функции при наступлении события onClick щелчка по кнопке Вычислить.

3. Измените функцию: square(a,b) -> cube(a,b,c) на функцию вычисления объема параллелепипеда. Сделайте замену: s=a*b; -> s=a*b*c; и Площадь прямоугольника -> Объем параллелепипеда. Укажите правильные единицы объема - см³.

4. Напишите название выполняемой операции - Вычисление объема параллелепипеда. Добавьте новое текстовое поле Введите высоту в см: < input type="text" size=10 name="str3" > . В объекте button (кнопка) замените функцию square -> cube и добавьте в строку параметров обращение к значению высоты параллелепипеда form1.str3.value .

5. Сохраните исправленный документ Test1.htm и обновите его в браузере. Введите в текстовые поля значения длины, ширины и высоты параллелепипеда: 5, 12 и 80 см. Нажмите на кнопку Вычислить и проверьте ответ. У вас должно получится 4800 см ³.

Подтема 2: Вывод результата расчетов в текстовое окно

1. Откройте исправленную вами страницу Test1.htm и сохраните ее под именем tEST2.htm. Перейдите в браузере к редактированию HTML кода . Замените заголовок страницы tEST2.htm:
Test1.htm: Площадь прямоугольника -> tEST2.htm: объем параллелепипеда .
Примечание: заголовок страницы находится между тегами <title> и <title>.

2. Добавьте новый сценарий JavaScript c функцией CubeT:
<script language="JavaScript" >
<!--//
function cubeT(obj)
{var a=obj.str1.value; b=obj.str2.value; c=obj.str3.value;
var s=a*b*c;
obj.res.value=s
return s
}
//-->
</script>
Примечание: Функция CubeT обращается к объекту obj, который определяется в самом документе tEST2.htm как форма с текстовыми полями   str1, str2, str3 , а в качестве параметров функции используются значения текстовых полей str1, str2, str3 объекта obj

3. При вычислении объема заменить обращение к функции
cube(form1.str1.value,form1.str2.value,form1.str3.value) -> cubeT(form1)

4. Внутри формы form1 перед тегом </FORM> ввести текстовое поле, в которое будут записываться результаты вычисления объема:
Объем (см³): <input type="text" size=7 name="res">

5. Сохранить файл tEST2.htm и проверить правильность вычисления объема.

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

1. Откройте страницу tEST3.htm и перейдите в браузере к редактированию HTML кода . Сохраните документ под именем record.htm. Замените заголовок страницы tEST3.htm:   tEST3.htm: -> record.htm.
Примечание: заголовок страницы находится между тегами <title> и <title>.

2. Ввести вместо функции test(form) новую функцию testrecord(form):
function testrecord(form)
{var record=90;
  if(form.value >record)
   { alert("Отлично! Вы побили рекорд"); }
    else
    { if(form.value ==record)
          { alert("Вы повторили рекорд"); }
     else { alert("Не очень хорошо! Вы не побили рекорд!");
    }
   }
}  .
Проверьте, чтобы число открывающих скобок { соответствовало числу закрывающих скобок }.

3. Измените название кнопки Нажать после ввода количества набранных баллов на РЕКОРД .
Сменить обращение к функции test(Form1.ball) на testrecord(Form1.ball)

4. Смените первую запись <90: Отлично на 90 баллов - Рекорд. Остальные записи следует удалить.

5. Проверьте работу вашей функции, вводя разные значения количества набранных баллов. Попробуйте изменить значение переменной record в функции testrecord() и посмотрите, как изменится работа функции после нажатия кнопки РЕКОРД.

Подтема 4: Обработка событий

1. Откройте страницу RazrFon.htm и перейдите в браузере к редактированию HTML кода . Проверьте работу скриптов JavaScript нажимая на кнопку Разрешение экрана. Проверьте работу кнопки Цвет фона, наведя на нее курсор мыши.

2. Введите новую переменную result в функцию screenhw() после строчек
h = screen.height
      }
var result= 3*(h * w)/1024/1024;

3. Вставьте в строчку alert("Разрешение экрана: "+w+"x"+h); перед закрывающей скобкой ) текст
+", Видео память: "+result+" Mb". Текст после правки должен выглядеть так:
alert("Разрешение экрана: "+w+"x"+h+", требуемая видео память > "+result+" Mb"); .

4. Скопируйте форму 2 (3 строчки, начинающиеся с <form name="form2"> и кончающиеся тегом </form>) и вставьте их в конец документа перед тегом </body>.

5. Поменяйте название формы: form2 -> form3. Измените событие Наведение курсора на кнопку, при котором происходит вывод сообщения о цвете фона на событие Двойной щелчок левой кнопкой мыши:
onMouseMove -> ondblclick.

6. Вставьте строчку Щелкните кнопку два раза, чтобы узнать цвет фона перед формой 3. Проверьте работу формы, щелкая 2 раза по кнопке.

Часть 2. Дополнительные задания

Подтема 5: Обработка различных событий в одной форме

1. Откройте документ RaspZan.htm. Проверьте его работу, наводя курсор мыши на названия различных занятий. Перейдите в браузере к редактированию HTML кода

2. Поменяйте названия занятий на Мат-Мех факультете на названия занятий на ХимФаке. Замените значения переменных s1 - s5 на соответствующие занятиям на ХимФаке.

3. Проверьте работу исправленной страницы с расписанием на ХимФаке.

Подтема 6: Специальные эффекты при работе с текстом

1. Откройте файл Filter.htm проверьте функционирование кнопок работы с текстом.
Изменение текста достигается с помощью фильтров - методов работы с текстовыми блоками. Подробнее с фильтрами можно познакомиться, изучив код HTML документа Filter.htm. Фильтры не работают в браузерах Mozilla и Netscape, поэтому для настройки фильтров используйте браузер Internet Explorer.

2. Поменяйте параметры функций blur, shadow и wave и посмотрите, как меняются эффекты при обработке текста.

3. Измените тип события в последнем ряду кнопок с нажатия кнопки на наведение курсора на кнопку. Проверьте работу кнопок.

4. Добавьте событие onmouseover (удаление курсора мыши с кнопки) таким образом, чтобы при наведении курсора на кнопку выполнялось написанное на кнопке действие, а при ее перемещении в другое место исходный вид текста восстанавливался. Проверьте, правильно ли работают кнопки.