Вопросы и задания
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 будет найден элемент, соответствующий этому самому номеру, и он будет подставлен в выражение. В нашем случае получим
мая