КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Лабораторная работа №4 «Объекты HTML» Часть 2 1 страница
|
|
|
|
Разумеется, нельзя пройти мимо такого интересного объекта, каким является тег <img>. У него есть несколько свойств, с частью которых вы уже знакомы. Это:
height - высота изображения в пикселях или процентах от высоты окна;
width — ширина изображения;
src — месторасположение файла с изображением.
На вашей страничке есть одно изображение. давайте с помощью подпрограммы на языке JavaScript снабдим его “зум-эффектом”, т.е. пусть при наведении мышки его размер увеличивается, скажем, в два раза.
Не сомневаемся, что вы уже представляете, как это сделать.
1. На HTML-страничке организуем новый объект и вместо строки
<img src=”pict.jpg” height=”300”>
напишем:
<img id=”ris1” src=”pict.jpg” height=”300”>
— ах, да, конечно же, нужно добавить обработку события “наведение мышки”. На всякий случай приведем полное содержимое HTML-файла, какое должно быть у вас к этому моменту. Новое выделено жирным:
<html>
<head>
<title> Лабораторная работа №4 </title>
<script src=”vasia.js”>
</script>
</head>
<body background=”fon1.gif”>
<h1>
<center> Лабораторная работа №4. <br> Добро пожаловать!
</h1> <br>
<input
id=”knopka1” type=”button” onclick=”C2F()”
value=”Перевод градусов из шкалы Цельсия в шкалу Фаренгейта”>
</center>
<h2> <center id=”itog”> А здесь получится результат </center> </h2>
<br> <br>
<img id=”ris1” src=”pict.jpg” height=”300” onmouseover=”zoom()”>
</body>
</html>
2. В файле с JavaScript-программами опишем новую функцию (выделена жирным шрифтом):
function C2f()
{
grad=prompt(“Перевод температуры”, “Введи сюда градусы по шкале Цельсия”);
itog.innerText=grad+” градусов по шкале Цельсия равно ”+ (1.8*grad + 32)+ “ градусов по шкале Фаренгейта”;
}
function zoom()
{
ris1.height=”600”;
}
Здесь тоже приведено полное содержимое файла, в котором содержится и подпрограмма для выполнения лабораторной работы №3. Обратите внимание на правильное расположение фигурных скобок, ограничивающих функции.
|
|
|
К сожалению, после того как мышка убрана с картинки, она не восстанавливает свой первоначальный размер. Для этого просто не заказан отклик объекта на другое событие — “убрать мышку”: onmouseout.
Приведем таблицу основных событий, на которые реагирует объект <img>:
| Событие | Возникнет |
| onclick | При щелчке мышкой на изображении |
| onmouseover | При наведении указателя мышки на изображение |
| onmouseout | При выходе курсора мишки из области над изображением |
| ondblclick | При двойном щелчке мышкой на изображении |
| oncopy | При копировании изображения |
| onmouseup | При отпускании левой клавиши мышки над изображением |
Вопросы и задания
Определите для объекта <img> реакцию еще на пару событий и обеспечьте:
а) возвращение исходного размера картинки после того, как мышка будет убрана из ее области;
б) изменение картинки в случае щелчка по изображению.
Естественно, что для каждого такого события должна быть написана соответствующая подпрограмма.
Лабораторная работа №5 «Интерактивное сочинение»
Возможно, вы хотя бы раз писали краткое сочинение с названием типа “Мое лето”. И в этом случае вам наверняка хотелось проиллюстрировать его фотографиями. Очень может быть, что теме летнего отдыха была даже посвящена HTML-страничка, сделанная ранее.
Предположим, что мы захотели бы объединить в одном HTML-документе десяток фотографий с хорошим разрешением (скажем, 500 пикселей по вертикали) и сочинение. Скорее всего выяснится, что с помощью стандартных средств это получается не слишком привлекательно: текст сочинения небольшой и просто теряется на фоне фотографий. Конечно, можно сделать к каждой фотографии подпись и этим ограничиться, но тогда теряет целостность восприятия рассказа. Можно, правда, написать сочинение на пару десятков тетрадных листов. Хорошо, хорошо, будем считать это неудачной шуткой... Лучше призовем на помощь уже известные нам объекты и их свойства.
|
|
|
Итак, мы собираемся добавить сочинение прямо на страничку, с которой работали ранее. Выглядеть, это будет следующим образом (см. рис. 5).
Как видите, само сочинение небольшое: всего-то не сколько строчек. Зато иллюстраций к нему аж целая дюжина, не считая самой первой фотографии, которую вы и видите на рис. 5.
«А где же остальные 12 фотографий? - наверняка заинтересуетесь вы. — Полос прокрутки вроде не видно. Может, страничка еще не доделана?”. Однако, как это ни удивительно, на рис. 5 изображена уже полностью сделанная работа.
Рис. 5. Сочинение на HTML-страничке
Если приглядеться внимательно, можно увидеть, что часть слов в сочинении выделена красным цветом. И, хотя это и не гиперссылки, по ним можно щелкнуть мышкой. На рис. 6 показан вид страницы после щелчка по слову “посвящение”.
Рис. 6. Вид страницы после щелчка по выделенному слову
Если вы самостоятельно делали предыдущие лабораторные работы, то, видимо, уже догадались, в чем здесь секрет: конечно же, изображение выступает в качестве изменяемого объекта, а выделенные слова, в свою очередь, расположены в контейнерах, реагирующих на событие мышкой”: onclick.
Заметим, что изображение еще в предыдущей лабораторной работе фигурировало под именем ris1; написать три строчки текста, разумеется, не составляет труда, поэтому обратим особое внимание на контейнер, в который помещаются выделенные слова.
Вполне логично выбрать в него теги с <font> … </font>, с помощью которых наиболее естественно меняется цвет букв. Вот часть текста:
Этим летом <font color=”red” onclick=”picture(1)”> я съездил </font> в археологическую экспедицию.
Видно, что при щелчке мышкой по содержимому контейнера (в нашем случае это слова “я съездил”) происходит вызов JavaScript-подпрограммы picture(1). Вроде бы тут все понятно. Неясно только, что это за единичка стоит внутри круглых скобок. До сих пор внутри скобок мы ничего не писали, и было даже не совсем понятно, зачем они нужны.
Те из вас, кто изучал программирование с помощью учебного исполнителя “Паркетчик” или с использованием профессиональных пакетов вроде Паскаля или Си, не могли не узнать механизм передачи параметров.
|
|
|
Итак, в подпрограмму picture передается фактический параметр, равный единице. Можно предположить, что это сделано для того, чтобы с помощью одной и той же подпрограммы обеспечить вызов на страничку любой фотографии. Действительно, изучая HTML дальше, в следующем предложении увидим:
Первые дни мы устанавливали <font color=”red” onclick=”picture(2)”> палатки </font>
То есть, изменяя значение фактического параметра, мы обеспечиваем загрузку на страничку каждый раз другой фотографии.
Сама же функция, расположенная в файле с JavaScript-программами, до неприличия проста, но, поскольку мы впервые столкнулись с передачей параметра в JavaScript программу, приведем ее полностью:
function picture(num)
{
ris1.src=”ex” + num + “.jpg”
}
Итак, когда мы вызываем функцию на HTML-страничке, в скобках обязательно указываем какое-либо значение параметра num. Так, в ранее приведенных строках он будет равен, соответственно, единице и двойке.
В подпрограмме это значение подставляется в правую часть оператора присваивания, в результате чего формируются текстовые константы “ех1.jpg” и “ех2.jpg”. Видимо, излишне говорить, что именно так называются файлы с первой и второй фотографиями.
Вопросы и задания
1. Почему лабораторная работа так странно называется? Постарайтесь узнать значение слова “интерактивный” применительно к HTML-страничкам.
2. Создайте на страничке свое интерактивное сочинение.
З. Вообще-то вместо программирования с изменением свойств объекта вполне можно было бы каждое выделенное слово сделать гиперссылкой, вызывающей точно такую же страничку, но с другой фотографией. Чем этот вариант плох?
4. Создайте интерактивную страничку, в правой части которой будут названия каких-либо иллюстраций, а в левой — эти самые иллюстрации будут появляться. Используйте для размещения материала таблицу. По возможности сделайте эту работу для использования на каком-либо уроке в качестве электронного наглядного пособия.
Лабораторная работа №6 “Секретная страничка”
|
|
|
В лабораторной работе №1 мы использовали оператор prompt — штатное средство ввода информации языка JavaScript. Справедливости ради надо отметить, что используется оно довольно редко, как правило, ввод данных организуется с помощью средств HTML.
Мы рассмотрим два элемента, которые используются для ввода данных: поля для ввода текста и кнопки. Функции кнопок могут быть самыми разнообразными. Чаще всего по нажатию кнопки запускается программа передачи информации на сервер для последующей обработки. Мы же воспользуемся полем ввода и кнопкой для организации “секретного” перехода на какую-либо HTML-страничку. Конечно, мы не случайно взяли слово секретного в кавычки, наш механизм таковым не является, но тем не менее хоть какое-то минимальное препятствие для нежелательных гостей он создает.
Итак, сразу же под рассказом о вашем лете должны расположиться поле для ввода “секретного” кода и кнопочка позволяющая перейти на заданную страничку. Это вполне может выглядеть так (см. рис. 7).
Рис. 7. Вид странички с полем для ввода “секретного” кода
Вас наверняка заинтересовали HTML-теги, с помощью которых можно вводить информацию. Код соответствующего фрагмента приведен ниже:
<center><h2>для перехода на страничку с игрушками введи код и нажми кнопку!<br>
<input id=”sekr”> <br>
<input type=”button” onclick=”test()” value=”Играем!”>
</h2> </center>
Отметим, что в принципе первый тег написан не совсем корректно. Следовало бы написать:
<input type=”text” size=”10” id=”sekr”>
Это означает, что, во-первых, тег предназначен для ввода одной строки текста размером не более 256 символов, а во-вторых, на страничке отображается рамочка, в которую помещаются лишь 10 символов. Но мы воспользовались тем, что и тот, и другой параметры принимаются по умолчанию.
Заметим также, что в дальнейшем мы предполагаем анализировать то, что будет введено в поле для ввода. Иными словами, будем анализировать какое-то свойство этого объекта. Именно поэтому он получил уникальный идентификатор sekr.
Параметры кнопочки, надеемся, для вас уже понятны. На всякий случай напомним:
type=button — тип объекта для ввода — кнопка;
value=”Играем!” — то, что будет написано на кнопке;
onclick=”test()” — при нажатии на кнопку будет вызвана программа test.
Мы не собираемся анализировать или изменять какие-либо параметры объекта “кнопочка”, именно поэтому ему не дано никакого дополнительного имени.
Если вы ранее изучали какой-либо язык программирования, то, наверное, уже примерно представляете, что должна делать программа test. Вот её запись на языке проектирования:
Если (в поле sekr введена правильная последовательность символов) то (Перейти на страничку с игрушками)
Программа выглядит простой, фактически она будет состоять из одного оператора. Но пока что мы не знаем, как организовать на языке JavaScript сравнение двух величин, а кроме того, непонятно, как с помощью операторов этого языка переходить на другую страничку.
Начнем со второго. Вспомним лабораторную работу №5, где мы изменяли картинку. Заметим, что объектом на HTML-страничке является отнюдь не какое-то конкретное изображение, а рамка под изображение. Именно она имеет свойства высота, ширина, путь к файлу с картинкой. Полной аналогией рамки является и “глобальный” объект window. Имеется в виду окно браузера. Именно в него загружается HTML-страничка. У него, как и у рамки, есть свойство путь к страничке. Называется оно location.
Свойство объекта в sekr, в котором содержится введенный в него текст, называется привычным словом value. Приведем вид нашей программы на языке JavaScript:
function test()
{
if (sekr.value==”yes!”)
{window.location=”new.htm”}
}
Обратите внимание, что сравнение в JavaScript отличается от оператора присваивания и обозначается двумя знаками равенства, которые записываются без пробела.
Вопросы и задания
1. Создайте новую страничку и обеспечьте к ней “секретный” доступ так, как это описано в данной лабораторной работе.
2. Если вы успешно сделали задание №1, то замети ли, что при вводе пароля он, к сожалению, отображается в поле для ввода и легко может быть подсмотрен. Чтобы этого не происходило, измените тип поля, добавив в его описание следующее (выделено жирным):
<input type=”password” id=”sekr”>
Вот теперь при вводе информации она отображается в виде звездочек, как и полагается паролю.
Лабораторная работа № 7 «Калькулятор»
Калькулятор - одна из стандартных и часто используемых программ. Калькуляторов имеется великое множество. Но, к сожалению, в стандартные калькуляторы нельзя добавить собственные кнопки и окошечки, что порой вовсе даже нелишне.
Воспользовавшись тем, что мы знаем, как вводить и обрабатывать информацию в объекты HTML создадим свой, поначалу простенький, калькулятор. Пусть он будет выглядеть так (см. рис. 8):
Рис. 8. Вид простейшего калькулятора на странице
Для красоты разместим его элементы в таблице, воспользовавшись ее параметром border:
<h2> Калькулятор</h2>
<table border=”2”>
<tr>
<td> <input id=”op1”> </td>
<td> <input type=”button” onclick=”plus()” value=”+”> </td>
<td> <input type=”button” onclick=”minus()” value=”-”> </td>
</tr>
<tr> <input id=”op2”> </td>
<td> <input type=”button” onclick=”umn()” value=”*”> </td>
<td> <input type=”button” onclick=”razd()” value=”/”> </td>
</tr>
<tr>
<td><input id=”rez”> </td>
<td></td>
<td></td>
</tr>
</table>
Видно, что для ввода операндов мы создали два поля — op1 и op2, а для результата предназначает поле rez.
Имея за плечами опыт предыдущей лабораторной работы, вы скорее всего без труда напишете программу, обеспечивающую сложение:
function plus()
{
rez.value=op1.value+op2.value;
}
Результат ее работы может поначалу несколько озадачить даже подготовленного человека:
3 + 4 = 34,
— но это только в том случае, если подготовленный человек не делал упражнение №3 из самой первой лабораторной работы. А если и делал — то почему-то не понял, что же происходило. Дело в том, что в JavaScript, как и во многих других языках программирования, определена операция конкатенации — слияния двух текстовых переменных и/или констант. Поскольку в поле для ввода текстовой информации по умолчанию вводится именно текст, то и знак “+,‘ рассматривается компилятором не как сложение, а как конкатенация.
Для того чтобы каким-то образом заставить-таки компьютер сложить числа, проще всего вспомнить математику (материал пятого класса) и записать выражение без знака “+”:
Rez.value=op1.value-(-1)*op2.value;
По счастью, остальные арифметические операции не преподносят каких-либо cсюрпризов и записываются совершенно стандартно:
“-“ — вычитание;
“*” — умножение;
“/”— деление.
Вопросы и задания
1. Допишите три подпрограммы, необходимые для работы калькулятора, и отладьте его.
2. В правой нижней части калькулятора осталось свободное место для дополнительных кнопок. Создайте, например, кнопки для расчета курса валют. Подумайте, как использовать в этом случае поля для ввода.
3. Создайте кнопку расчета процентов.
Лабораторная работа №8 «Объекты JavaScript»
До сих пор мы имели дело с объектами HTML. Они располагаются на страничке и видны невооруженным глазом. Совсем иное дело — объекты JavaScript. Как и в любых других объектно-ориентированных языках программирования, они служат для хранения и обработки разнородных данных. Функции обработки называются в JavaScript “методами”.
Первый объект, с которым мы познакомимся, это объект Date. Он используется для работы с календарными данными, и поначалу мы используем его для того, чтобы сообщить пользователю, когда он попал на нашу страничку. Внешне это будет выглядеть так:
Рис. 9. Сообщение о текущем времени
Положим, как вывести сообщение непосредственно на страничку, вы уже знаете. Кто забыл — прочитайте еще раз лабораторную работу №3. Отдельная проблема возникает с информацией о времени, которую надо от куда-то получить.
Вот тут-то и приходит на помощь объект Date. Приведем программу, обеспечивающую вывод требуемого сообщения:
function time()
{
d=new Date();
vrema.innerText=”Сейчас - ”+d.getHours()+”:”+d.getMinutes();
}
Объект, который мы скромно назвали одной буквой d, содержит не только информацию о времени, но и о годе, номере месяца, дне недели и еще много о чем. Для того чтобы воспользоваться этой информацией, служат методы, основные из которых приведены в таблице ниже. Обратите внимание на прописные и строчные буквы. Это важно.
getYear() — год;
getMonth() — номер месяца, причем январь имеет номер 0;
getDate() — число;
getDay() — номер дня недели. Учтите, что четверг, скажем, на самом деле имеет номер 4, но только потому, что номер 0 имеет воскресенье;
getHours() — часы;
getMinutes() — минуты;
getSeconds() — секунды.
Нам требуется, чтобы функция time выполнялась сразу при загрузке страницы. Это обеспечивается дополнительным параметром тега <body>:
<body background=”fon1.gif” onLoad=”time()”>
Как обычно, новый параметр выделен жирным.
Вопросы и задания
1. Используя материал этой лабораторной работы, выведите в верхней части своей странички текущее время.
2. Измените программу time так, чтобы, кроме времени, появлялась дата в российском стандарте (см. рис. 10):
Рис. 10. Вывод информации о дате и времени
Лабораторная работа №9 «Массивы JavaScript»
Дата в стандартном виде это, разумеется, хорошо, но как хочется получить вот такое человеческое сообщение (см. рис. 11):
Рис. 11. Сообщение о дате и времени
Но для такой неописуемой красоты требуется откуда-то взять наименование месяцев на русском языке. Логичнее всего хранить их в массиве.
Массивы в JavaScript ничем не отличаются от массивов в других языках программирования. Вот как выглядят описание и инициализация (присваивание значений элементам) требуемого массива:
mes= new Array(”января”, “февраля”, “марта”,
“апреля” “мая”, “июня” “июля”,
“августа”, “сентября”, “октября”,
“ноября”, “декабря”);
Обратите внимание на пробел между словами new и Array, а также на заглавную букву.
В скобках можно не перечислять элементы массива, а задать его длину. В нашем случае тип массива устанавливается по типу элементов в скобках. То есть это массив из строковых переменных. Нумерация элементов массива начинается с нуля. Именно поэтому январь в методе getMonth() считается нулевым месяцем.
функция же time, с учетом всего вышесказанного, выглядит следующим образом:
function time()
{
mes= new Array(”января”, “февраля”, “марта”,
“апреля” “мая”, “июня” “июля”,
“августа”, “сентября”, “октября”,
“ноября”, “декабря”);
d=new Date();
vrema.innerText=”Сегодня - ”+d.getDate()+”-e “+mes[(d.getMonth())]+” “+d.getYear()+”-го года, сейчас - ”+d.getHours()+”:”+d.getMinutes();
}
Особо прокомментируем следующее слагаемое:
mes[(d.getMonth())]
Как и человек, компьютер начинает вычислять выражение с самой внутренней скобки.
Метод d.getMonth() выдаст нам номер текущего месяца. Получим, например,
mes[4]
Далее, в массиве mes будет найден элемент, соответствующий этому самому номеру, и он будет подставлен в выражение. В нашем случае получим
мая
Вопросы и задания
1. В соответствии с текстом лабораторной работы измените текст программы time так, чтобы выдавалось сообщение, аналогичное показанному на рис. 10.
2. Это сообщение, разумеется, смотрится очень не плохо, но было бы еще лучше, если бы оно выглядело вот так (см. рис. 12).
Рис. 12. Сообщение о дне недели, дате и времени
3. Если вы внимательно присмотритесь к рис. 12, то заметите, что время у нас выдается не очень красиво. Подумайте, каким образом можно выдавать его в стандартном виде: “00:07”, и доработайте программу time. Для этого вам скорее всего потребуются дополнительные переменные. JavaScript не требует объявлять тип переменных, и можно просто написать:
h=d.geyHours();
Лабораторная работа №10 «Время до конца урока»
Появление на страничке календарной строки очень сильно ее украсило, но вот о полезности такой информации можно спорить. Вот если бы в заголовке появлялось рассчитанное время до конца урока! Ну, хотя бы так, как это изображено на рис. 13:
Рис. 13. Рассчитанное время до конца текущего урока
Естественно, для выдачи такого сообщения требуется, во-первых, добавить объект HTML, в который будет вы водиться сообщение, а во-вторых, доработать функцию time. И если с первой частью задания особых проблем не возникает, достаточно хотя бы написать нечто подобное (новые строчки, как обычно, выделены жирным):
<center> Лабораторная работа №10. <br>
Добро пожаловать!<br>
<font color=”red” id=”vrema”> </font>
<br>
<font color=”blue” id=”vrema2”> </font>
<br>
</center>
— то с доработкой функции дело обстоит отнюдь не так просто.
Понятно, что каким-то образом мы должны задать расписание звонков. Желательно, чтобы оно могло быть использовано в виде числовых интервалов, поскольку в дальнейшем мы планируем проверять, в который из них попадает текущее время (тоже, по возможности, заданное в виде одного числа).
Стало быть, стандартный вариант представления времени в виде часов и минут нас не очень-то устраивает. Проще всего задавать его в виде только минут, а чтобы не утруждать себя лишними расчетами на калькуляторе, определить следующие массивы начала и окончания уроков:
mes=new Array(”января”,”февраля”,”марта”,
“апреля”, “мая”, “июня”,
“июля”, “августа”, “сентября”,
“октября”, “ноября”, “декабря”);
var nur=new Array(8*60+30, 9*60+15, 10*60+10, 11*60+5);
var kur=new Array(9*60+10, 9*60+55, 10*60+50, 11*60+45);
d=new Date();
Так, в массиве nur задано время начала уроков. Соответственно, 8:30, 9:15, 10:10 и 11:05.
В массиве kur задано время окончания уроков: 9:10, 9:55, 10:50, 11:45.
Естественно, что и текущее время, которое мы получим, тоже необходимо преобразовать в “минутный” формат:
d=new Date();
tv=d.getHours()*60+d.getMinutes();
Далее, очевидно, требуется организовать цикл проверки, который бы определял, в какой именно интервал попадает текущее время, и выдавал соответствующее сообщение. На языке проектирования он выглядит следующим образом:
Делать от i=0 до 3
{ Если (nur[i]<tv<kur[i]) то
(Сообщить, что до конца (i+1)-го урока осталось kur[i]-tv минут)
}
Поскольку мы впервые столкнулись с циклом в языке JavaScript приведем вышеописанную конструкцию полностью:
for (i=0; i<4; i++)
{
if (tv>nur[i] && tv<kur[i])
{os=kur[i]-tv;
vrema2.innerText=”До конца ”+(i+1)+”-го урока осталось ”+os+” минут”;
}
}
Прокомментировать, видимо, надо только заголовок цикла. В круглых скобках поочередно записывается:
i=0 — начальное значение переменной цикла;
i<4 — условие окончания цикла;
i++ — приращение переменной. В нашем случае это аналогично записи i=i+1. Впрочем, те, кто изучал какой-нибудь язык, из С, прекрасно поняли, о чем речь.
Вопросы и задания
1. Доработайте программу time так, как это описано в лабораторной работе №10, задав собственное расписание уроков.
2. Почему было необходимо прибавлять к переменной цикла единицу, когда мы вычисляли номер урока?
3. Во время перемены наша подпрограмма не сработает. (Кстати, почему?) Допишите ее так, чтобы на перемене выдавалось сообщение о том, сколько минут остается до начала соответствующего урока.
4. Оператор JavaScript setTimeout(“time()”,1000); обеспечивает выполнение подпрограммы, написанной внутри скобок (в нашем случае — time), каждую секунду (время после запятой задается в тысячных долях секунды). Доработайте программу time таким образом, чтобы время в заголовке страницы выдавалось и в секундах, причем с ежесекундным же обновлением всей информации (см. рис. 14).
Рис. 14. Ежесекундно обновляемая информация
5. Добавьте отсчет секунд и в вычисляемое время до конца или начала урока.
Лабораторная работа №11 «Слайд-шоу»
Воспользуемся оператором setTimeout(…,…); о котором вы узнали в задании № 4 предыдущей лабораторной работы, для того чтобы устроить слайд-шоу. Иными словами, пусть картинка, находящаяся на вашей страничке, автоматически меняется, скажем, каждые пять секунд.
Для этого, наверное, лучше создать новую страничку, примерно такую, какая у нас была во время выполнения лабораторной работы №3 (см. рис. 15).
Рис. 15. Страничка со слайд-шоу
Некоторая новизна данной работы заключается лишь в том, что нам требуется переменная, начальное значение которой присваивается вне вызываемой функции. То есть соответствующая часть файла с JavaScript-программами будет выглядеть следующим образом:
x=0;
function slide()
{
pictures=new Array(“kry11.jpg”, “kry12.jpg”, “kry13.jpg”, ”kry14.jpg”, ”kry15.jpg”);
period=1000;
setTimeout(“slide()”, period);
ris1.src=pictures[x];
x++;
if (x>=pictures.length) {x=0};
}
Прокомментировать здесь можно лишь новое для вас свойство массива, называемое length Его использование позволяет не считать вручную количество элементов в массиве и не менять программу каждый раз, когда появляется новый элемент. Приведем также операторы сравнения языка JavaScript:
| == (двойное равенство без пробела) | Равно |
| != | Не равно |
| > | Больше |
| >= | Больше-равно |
| < | Меньше |
| <= | Меньше-равно |
Вопросы и задания
1. Организуйте на новой страничке слайд-шоу.
2. Добавьте ниже иллюстрации пару-другую кнопок, позволяющую ускорять, замедлять и практически остановить показ картинок.
З. Зачем, по-вашему, в объекте ris1 использовано свойство height?
4. Используйте слайд-шоу для создания мультимедийной презентации по какому-нибудь учебному предмету.
Лабораторная работа №12 «Интернет-магазинчик»
Наверняка все из вас знают о такой форме торговли, как продажа товаров через Интернет, а некоторые, быть может, даже ею пользовались. Конечно, настоящий интернет-магазин — довольно сложный программный комплекс, который не сделать за один урок. Но вполне можно создать простейший вариант очень небольшой его части, а именно, расчет стоимости выбранных товаров.
|
|
|
|
|
Дата добавления: 2015-06-28; Просмотров: 2551; Нарушение авторских прав?; Мы поможем в написании вашей работы!