Документ взят из кэша поисковой машины. Адрес
оригинального документа
: http://www.astro.spbu.ru/staff/afk/Teaching/Seminars/XimFak/Sem08.htm
Дата изменения: Fri Nov 19 16:06:12 2010 Дата индексирования: Tue Oct 2 04:47:23 2012 Кодировка: Windows-1251 Поисковые слова: sculptor galaxy |
Изменение размера шрифта | |||||
Тема 8 практических занятий: |
Основы языка HTML и введение в CSS и JavaScript |
+ | - |
ВНИМАНИЕ! На этой странице находятся дополнительные справочные материалы по языку HTML и CSS.
Язык программирования JavaScript - предназначен для создания интерактивных HTML-документов.
1. Откройте страницу Test1.htm. Проверьте работы сценария JavaScript. Введите длину прямоугольника 24 и ширину - 25 и нажмите левой кнопкой мыши кнопку Вычислить. У вас должен получиться ответ 600 см2 .
2. Вернитесь к документу Test1.htm. Перейдите в браузере к редактированию HTML кода . Ознакомьтесь с устройством функции square(a,b). Посмотрите, как происходит обращение к функции при наступлении события onClick щелчка по кнопке Вычислить.
3. Измените функцию: square(a,b) -> cube(a,b,c) на функцию вычисления объема параллелепипеда. Сделайте замену: s=a*b; -> s=a*b*c; и Площадь прямоугольника -> Объем параллелепипеда. Укажите правильные единицы объема - см3.
4. Напишите название выполняемой операции - Вычисление объема параллелепипеда. Добавьте новое текстовое поле Введите высоту в см: < input type="text" size=10 name="str3" > . В объекте button (кнопка) замените функцию square -> cube и добавьте в строку параметров обращение к значению высоты параллелепипеда form1.str3.value .
5. Сохраните исправленный документ Test1.htm и обновите его в браузере. Введите в текстовые поля значения длины, ширины и высоты параллелепипеда: 5, 12 и 80 см. Нажмите на кнопку Вычислить и проверьте ответ. У вас должно получится 4800 см 3.
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>
ввести текстовое поле,
в которое будут записываться результаты
вычисления объема:
Объем (см<sup>3</sup>):
<input type="text" size=7 name="res">
5. Сохранить файл tEST2.htm и проверить правильность вычисления объема.
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() и посмотрите, как изменится работа функции после нажатия кнопки РЕКОРД.
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 раза по кнопке.
1. Откройте документ RaspZan.htm. Проверьте его работу, наводя курсор мыши на названия различных занятий. Перейдите в браузере к редактированию HTML кода
2. Поменяйте названия занятий на Мат-Мех факультете на названия занятий на ХимФаке. Замените значения переменных s1 - s5 на соответствующие занятиям на ХимФаке.
3. Проверьте работу исправленной страницы с расписанием на ХимФаке.
1. Откройте файл
Filter.htm
проверьте функционирование кнопок работы с текстом.
Изменение текста достигается с помощью фильтров
- методов работы с текстовыми блоками. Подробнее
с фильтрами можно познакомиться, изучив код HTML
документа
Filter.htm.
Фильтры не работают в
браузерах Mozilla и
Netscape, поэтому для настройки фильтров
используйте браузер Internet Explorer.
2. Поменяйте параметры функций blur, shadow и wave и посмотрите, как меняются эффекты при обработке текста.
3. Измените тип события в последнем ряду кнопок с нажатия кнопки на наведение курсора на кнопку. Проверьте работу кнопок.
4. Добавьте событие onmouseover (удаление курсора мыши с кнопки) таким образом, чтобы при наведении курсора на кнопку выполнялось написанное на кнопке действие, а при ее перемещении в другое место исходный вид текста восстанавливался. Проверьте, правильно ли работают кнопки.