Вопросы и задания
1. Надеемся, для вас не составит труда написать оставшуюся пару операторов и отладить программу теперь уже целиком.
2. Используйте вашу таблицу для решения транспортной задачи и распределите груз между машинами примерно поровну.
Конечно, наша электронная таблица выглядит не очень-то профессионально: - во-первых, поля количества и веса груза никак не защищены от ввода, а во-вторых, настоящая электронная таблица по умолчанию пересчитывает значения в ячейках, не дожидаясь нажатия на специальную кнопочку.
Улучшить нашу таблицу достаточно просто, но для этого необходимо познакомиться с новым объектом.
Оказывается, контейнер <td></td> может быть объектом, иметь специфические свойства и реагировать на действия. Итак, вместо
<td> <input size=”6” id=”kolvo1” value=11> </td>
запишем:
<td id=”kolvo1”> 11 </td>
Сразу после этого вместо поля для ввода в ячейке появится обычное число 11, которое при решении транспортной задачи изменить уже невозможно. Очевидно, такими же необходимо сделать все оставшиеся ячейки второго, третьего и шестого столбцов.
У вас наверняка возник вопрос: каким же образом можно обратиться к содержимому такой ячейки-объекта в программе на языке JavaScript?
Оказывается, у этого объекта есть известное вам свойство — innerText. Так, при расчете данных для последнего столбца необходимо вместо
k13.value=kolvo1.value-k11.value-k12.value;
записать оператор:
k13.innerText=kolvo1.innerText - k11.innerText - k12.innerText;
Видимо, вы уже догадались, как изменятся операторы, рассчитывающие груз в машинах. Теперь осталось последнее. Как сделать автоматический перерасчет при изменении данных в ячейках четвертого и пятого столбцов.
Для этого необходимо знать о событии onBlur, происходящем тогда, когда из поля для ввода убирается текстовый курсор. Событие сработает, даже если в поле ничего не менялось. Значит, для автоматического перерасчета необходимо вместо описания
<td> <input size=”6” id=”k21”> </td>
записать
<td> <input size=”6” id=”k21” onBlur=”raschet()”> </td>
Правда, пока вы не уберет текстовый курсор из поля, перерасчета не произойдет. Впрочем, в настоящей электронной таблице после изменения данных для этого тоже
необходимо нажать клавишу Enter.
З. Подправьте электронную таблицу так, как написано выше, и получите почти профессиональный вариант (см. рис. 20):
Рис. 20. Улучшенная электронная таблица
Лабораторная работа №14 «Календарь знаменательных дат»
Многие используют разнообразные “напоминальнички”. Иногда это просто бумажные перекидные календари или стикеры, иногда — весьма навороченные компьютерные программы. На многих сайтах также ведутся автоматические календари знаменательных и памятных дат.
Безусловно, такая информация будет нелишней и на вашем личном сайте. Как здорово, скажем, получить вот такое сообщение (см. рис. 21):
Рис. 21. Сообщение о знаменательной дате
Не позаботься вы о календаре заранее — и праздник бы промелькнул незамеченным. А дни рождения родных, приятелей, знакомых, учителей и одноклассников? Всем приятно получать поздравления.
Поэтому, недолго думая, засучим рукава и займемся поначалу HTML-страничкой. Прежде всего надо разместить на страничке объект, содержимое которого и будет меняться:
<font color=”red” id=”vrema”> </font><br>
<font color=”purple” id=”vrema3”> </font><br>
<font color=”blue” id=”vrema2”> </font><br>
Напомним, что в контейнере vrema отображаются текущие календарные данные вместе с ежесекундно изменяющимся временем, а в контейнере vrema2 — рассчитанное время до конца текущего урока или перемены. Соответственно, в контейнер, бесхитростно названный vrema3, мы и будем помещать сообщение о текущем празднике.
Давайте теперь напишем функцию ura(), которая и будет отвечать за наполнение этого контейнера, пока оставив в стороне вопрос о том, каким образом она будет запускаться.
Разумеется, начать надо с того, чтобы запасти памятные даты и соответствующие сообщения к ним. И здесь возникает небольшая проблема, Как известно, настоящие программисты ужасно не любят лишней работы, особенно если это касается написания операторов. Порой они готовы убить половину рабочего дня, чтобы сократить программный код на пару-другую операторов. Вот и нам, чтобы проверить совпадения дат, заданных в стандартном виде, нужно хранить месяц и число. Ни один настоящий программист до этого не опустится, и если вы вспомните лабораторную работу №10, то легко поймете, что надо делать.
Итак, преобразуем дату из стандартного вида, содержащего два числа, в вид, содержащий одно число. На пример, это можно сделать так:
9 Мая → 9.05 → 905
Иными словами, число надо умножить на 100 и добавить к нему номер месяца.
Теперь создадим массив, содержащий знаменательные даты:
function ura()
{
dates=new Array(105,705,905);
В нашем массиве — всего лишь три знаменательные даты. Не сомневаемся, что у вас их будет на порядок больше. Не ограничивайте себя.
Разумеется, каждому знаменательному событию должно соответствовать и подобающее сообщение:
mess=new Array(“1 Мая!”,”День Радио!”,”День Победы!”);
Из следующих двух операторов функции ura()
d=new Date();
for (x in dates)
один вам хорошо знаком, а вот второй мы подробно разберем.
В языке JavaScript имеется оператор цикла следующего вида:
for (имя переменой in имя массива)
{
операторы тела цикла
}
Переменная цикла принимает все значения индексов элемента массива. То есть в нашем случае она будет принимать значения 0, 1, 2.
Легко понять, что цикл будет выполняться столько раз, сколько элементов в массиве. В нашем случае — в массиве dates. Дальнейшее понятно и без комментариев:
for (x in dates)
{
if (dates[x]==d.getDate()*100+d.getMonth()+1)
{vrema3.innerText=”Сегодня - ”+mess[x]}
}
Остался лишь один вопрос: как же вызвать такую замечательную подпрограмму? Неужели создавать для этого специальную кнопку? Разумеется, можно обойтись и без этого. Дело в том, что при загрузке показанной странички с ходу вызывается функция time(). Ну а из нее ничего не стоит вызвать функцию ura():
function time()
{
ura();
setTimeout(“time()”,1000);
Как обычно, жирным шрифтом выделена новая строка.
Вопросы и задания
1. Создайте на своей страничке календарь памятных дат.
2. Зачем при преобразовании даты к придуманному нами виду в конце выражения добавляется единичка?
Лабораторная работа №15 «Генератор мудрых мыслей» — часть 1
Сегодня мы займемся конструированием на нашей страничке генератора мудрых мыслей.
В наше суматошное время люди и к великим истинам стали относиться суетно, без должного уважения. А все потому, что информация стала даваться очень легко. Чтобы исправить такое положение, на первом этапе работы мы создадим хоть и небольшое, но препятствие на пути создания нашего генератора. Его преодоление заставит посетителя странички с большим уважением отнестись к нашей сокровищнице мысли. Итак, наша страничка должна выглядеть примерно следующим образом (см. рис. 22).
Специфика изображенных кнопочек состоит в том, что при наведении мышки на ту из них, на которой в данный момент написано слово “Да”, надписи меняются местами. Стало быть, теперь, чтобы подтвердить свою готовность приобщиться к мудрости, требуется нажать уже другую кнопку, не ту, над которой расположена мышка.
Рис. 22. Преддверие к генератору мудрости
Соответственно, если нажимается кнопочка со словом “Нет”, надпись на странице изменяется (см. рис. 23).
Рис. 23. Жаль, но мудрые мысли не нужны
Легко понять, что нужно сделать следующее:
1. На страничке создать пару объектов типа “кнопка”. Они должны реагировать на два события: “щелчок мышкой” — onclick и “наведение мышки” — onmouseover
2. Написать пару программ, одна из которых будет менять местами надписи на кнопках, а вторая — выражать сожаление в письменном виде или, напротив, радовать мудрыми мыслями.
З. Ах, да, чуть не забыли, что на страничке нужно создать еще два объекта-контейнера, в которые будут выводиться сообщение и очередная мудрость.
Начнем с работы на HTML-страничке, т.е. с первого и третьего пунктов.
<h2 id=”md”>
Хочешь ли ты приобщиться к мудрости? <br>
</h2>
<input type=”button” value=” Да ” onClick=”test(‘1’)” onmouseover=”change(‘1’)” id=”knop1”>
<input type=”button” value=” Нет ” onClick=”test(‘2’)” onmouseover=”change(‘2’)” id=”knop2”>
<br>
<h3 id=”mm”> </h3>
<br>
Контейнеры-объекты md и mm предназначены, как легко увидеть, для сообщения на страничке и вывода мудрой мысли. Они имеют свойство innerText, которое и будет активно использоваться в программах. Заметим, что в начальный момент
md. innerText=”Хочешь ли ты приобщиться к мудрости?”
Перейдем к кнопкам. Для простоты мы используем одни и те же программы, отвечающие за обработку событий “щелчок мышки” и “наведение мышки”. Но у этих программ есть параметры, позволяющие нам узнать, от какой кнопки вызвана та или иная программа.
Теперь настала пора программ. Рассмотрим для начала программу change(a). Она выглядит следующим образом:
function change(a)
{
switch(a)
{
case “1”:
knop1.value=” Нет ”;
knop2.value=” Да ”;
break;
case “2”:
knop1.value=” Да ”;
knop2.value=” Нет ”;
break;
}
}
Мы приводим ее полностью и сейчас очень подробно разберем, поскольку здесь встретилась новая конструкция языка JavaScript switch. Она позволяет выполнять ту или иную группу операторов в зависимости от значения какой-либо переменной. Аналогичные конструкции есть во всех языках программирования, так что, надеемся, проблем с пониманием принципа работы не возникнет. Итак, в общем виде оператор-ветвление switch выглядит следующим образом:
switch (переменная)
{
case “одно из значений переменной”:
группа операторов, выполняющихся для данного значения переменной
break;
case “другое значение переменной”:
группа операторов, выполняющихся для данного значения переменной
break;
…
следует столько блоков case, сколько необходимо
}
Надеемся, после столь подробного объяснения вам стал полностью понятен смысл нашей программы change(а).
Несмотря на то что обычно вопросами и заданиями мы заканчиваем текст лабораторной работы, хотелось бы порекомендовать сразу же написать и отладить эту программу, а лишь затем переходить к следующей.
Итак, вторая программа, test(), очень похожа на программу change(а), а чтобы не перегружать ее операторами, затрудняя понимание, мы воспользуемся возможностью вызова подпрограммы из программы, оставив подпрограмме ms1(а)генерирование мудрых мыслей.
Вот как выглядит один из двух блоков case программы test():
case “1”:
if (knop1.value==” Нет ”)
{md.innerText=”Ну, если не хочешь – не надо!”}
else {ms1()}
break;
Обратите внимание на то, что и в программе change(), и в программе test()мы для красоты использовали надписи на кнопках с пробелами в начале и в конце. Естественно, в обеих программах надписи на кнопках должны полностью совпадать.
Вопросы и задания
1. Напишите и отладьте обе программы.
2. Как вы думаете, сообщение о какой ошибке должно появиться при нажатии на кнопку с надписью “Да”?
3. Все же попробуйте нажать на кнопку, когда на ней написано слово “Да”.
Лабораторная работа №16 «Генератор мудрых мыслей» — часть 2
Надеемся, вы поняли, что нужно воспользоваться всей мощью клавиши Tab, для того чтобы нажать на кнопку с надписью “Да”. И, конечно же, в первый раз получили сообщение об ошибке “Ожидается функция ms1”. А хотелось бы получить совсем другую картинку. Ну, скажем, изображенную на рис. 24.
Что ж, давайте вплотную займемся функцией, отвечающей за источник мудрости.
Рис. 24. Мудрая мысль на страничке
Аналогично лабораторной работе №14, нам тоже надо предварительно подготовить массив с мудрыми мыслями. Ну, скажем, такой:
function msl()
{
mysl=new Array(11);
mysl[0]=”Чем дальше в лес — тем своя рубашка ближе к телу”;
mysl[1]=”Не рой другому яму сам”;
mysl[2]=”Жизнь трудна. По счастью коротка”;
mysl[3]=”Не можешь жить — займись чем-нибудь другим”;
mysl[4]=”Нет такой последней черты, за которую бы не ступала нога русского человека”;
mysl[5]=”Жизнь нужно прожить так, чтобы не было больно”;
mysl[6]=”Если бы комплименты были правдой, то это были бы уже не комплименты, а просто информация”;
mysl[7]=”Излил душу вытри за собой”;
mysl[8]=”Плохо, когда наступаешь на грабли. Хуже только тогда, когда их ручка лежала в навозе”;
mysl[9]=”Шутка должна быть смешной и неожиданной, как удар дубиной в темноте”;
mysl[10]=”Лучше курица в супе, чем журавль в небе”;
Обратите внимание на то, что мы задали массив по другому. А именно, вначале объявили только количество элементов в массиве, а уж затем каждому элементу присвоили некоторое значение.
В нашем примере приведены всего лишь десяток мудрых мыслей. Надеемся, у вас их будет на порядок больше. Не ограничивайте себя.
Теперь перед нами встала задача случайной выборки какого-либо элемента из этого массива. Чтобы не залезать в дебри объекта Math, в котором есть датчик случайных чисел, воспользуемся добрым старым принципом русской рулетки, оставив вышеупомянутый объект на потом.
Напомним, что в русской рулетке можно пронумеровать все патроны и зарядить их в барабан револьвера, после чего следует крутануть барабан произвольным образом. До определенной степени можно считать, что револьвер выстрелит пулей со случайным номером.
А реализуем мы принцип русской рулетки с помощью новой для вас конструкции JavaScript — оператора цикла while:
d=new Date();
i=0;
j=0;
while (j<d.getSeconds()+1)
{
mes=mysl[i];
i++;
j++;
if (i>=mysl.length) {i=0}
}
mm.innerText=mes;
}
Прокомментируем эту программу. В качестве основного механизма русской рулетки выступает оператор
mes=mysl[i];
Именно он выполняется много раз подряд при раз личных значениях переменной i. Что же касается самой этой переменной, то ей посвящены целых три оператора, обеспечивающих последовательное изменение ее значения от 0 до n-1 (где n — количество элементов в массиве), а затем снова начинается отсчет с нуля. Вот эти операторы:
i=0;
i++;
if (i>=mysl.length) {i=0}
Первый из этих операторов присваивает начальное значение переменной при начале работы программы.
Второй это уже знакомый нам оператор JavaScript обеспечивающий увеличение переменной на единицу.
И, наконец, третий оператор обеспечивает “зацикливание”: переменная принимает начальное значение, как только ее значение становится равным количеству элементов массива. И второй, и третий операторы выполняются в цикле.
Теперь понятно, что значение переменной i, а вместе с ним и значение переменной mes, в которую попадает очередная мудрая мысль, напрямую зависят от того, сколько раз будет выполняться цикл, моделирующий в нашей программе вращение барабана револьвера.
В качестве величины, определяющей количество оборотов, мы, недолго думая, выбрали показания секунд на системных часах компьютера. Разумеется, для полного понимания не хватает еще и описания работы нового для вас оператора цикла while. Он достаточно прост и аналогичен таким же операторам в любом другом языке программирования:
while (условие)
{
Операторы тела цикла;
}
Операторы тела цикла выполняются до тех пор, пока верно условие в заголовке цикла. В нашем случае условием цикла является следующее:
j<d.getSeconds()+1
В самом же цикле переменная j, равная поначалу нулю, увеличивается на единицу. Естественно, в какой-то момент ее значение превысит количество секунд, которое не может быть больше 59, и цикл закончит свою работу.
Вопросы и задания
1. Зачем в условии к секундам добавлена еще и единица? Сколько раз будет выполнен цикл?
2. Напишите и отладьте программу ms1() , используя в ней свои любимые мудрые мысли.
«Каскадные таблицы стилей» (дополнительный материал)
Каскадные таблицы стилей являются одной из составных частей так называемого “DHTML” (динамического языка гипертекстовой разметки страничек) и в принципе существуют совершенно независимо от языка JavaScript. Но JavaScript — тоже составная часть DHTML, внутри которого и обеспечивается интеграция этих компонентов. Использование возможностей каскадных таблиц стилей позволяет средствами JavaScript создавать на страничке самые разнообразные эффекты. Именно поэтому вкратце рассмотрим, с чем же мы будем иметь дело в дальнейшем.
Сама по себе идея каскадных таблиц стилей родилась довольно давно. Связано это было с тем, что в различных браузерах один и тот же HTML-документ смотрелся по-разному. В первую очередь из-за того, что этими программами по-разному интерпретировались теги оформления. Скажем, тег <h1> в одном случае отображал текст шрифтом “Times New Roman” размера 16, а в другом — шрифтом “Arial” размера 14. Мало того, пользователь мог сам, используя настройки браузера, менять стиль отображения различных тегов.
Каскадные таблицы стилей (Cascading Style Sbeets, сокращённо CSS) — это технология, разработанная для форматирования HTML-документов и придания им определенного, задуманного автором стиля Они представляют собой набор правил, в соответствии с которыми происходит форматирование текста и других HTML-элементов на экране. Правила хранятся либо в самом HTML-документе, либо в отдельном текстовом файле, имеющем, как правило, разрешение CSS.
Самый первый их стандарт появился в декабре 1996 года, а в мае 1998 года существенно расширенный стандарт CSS2 предоставил разработчикам сайтов возможность точно располагать объекты на странице, достигая безукоризненного вида своих страничек на компьютерах всех пользователей.
Самым простым примером применения CSS является, например, следующее определение:
<STYLE type=”text/css ”>
H1 {color: red}
</STYLE >
Оно цвет всех заголовков первого уровня в документе. Кроме цвета, можно также задавать положение элементов на экране, размер шрифта, величину отступа абзаца и многое другое.
К наиболее ярко выраженным достоинствам каскадных таблиц стилей относятся следующие:
1. Разделение информации на две части: собственно HTML-код и таблица стилей. Во многих случаях это позволяет существенно уменьшить размеры файлов, так как информация о стилях всех страниц хранится в одном файле, а не во всех HTML-документах. Это же позволяет одновременно применять одну и ту же каскадную таблицу к большому числу HTML-документов. Изменение стиля, таким образом, сводится к изменению одного файла.
2. Наличие в каскадных таблицах стилей дополнительных, по сравнению с языком разметки, методов управления элементами.
Указанные выше преимущества CSS определили их широкое применение в глобальной сети.
Для задания CSS внутри документа служит контейнер <STYLE></STYLE> внутри которого содержится описание правил. Правило (rule) состоит из селектора и блока деклараций, заключенного в фигурные скобки, например:
H1 {
font-weight: bold;
font-size: 12pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
}
Возможно, вы пока и не увидели чего-то особо выдающегося в каскадных таблицах стилей. Но давайте вспомним об упомянутой выше интеграции HTML, CSS и JavaScript в рамках DHTML. Одним из следствий стало появление у контейнеров HTML целого нового блока свойств.
Чтобы понять, о чем речь, попробуйте, например, добавить следующее в описание контейнера vrema (см. лабораторную работу №14):
<center> Лабораторная работа №14 <br>
Добра пожаловать!<br>
<font color=”red” id=”vrema” onmouseover=”vrema.style.color=’green’”>
</font>
<br>
Теперь при наведении мышки на сообщение о текущей дате и времени оно изменит цвет с красного на зеленый вопреки основному контейнеру <font>. То есть все те дополнительные свойства, о которых мы говорили, перечисляя достоинства CSS, доступны нам и без того, чтобы описывать на своей страничке таблицу стилей в явном виде.
Разумеется, это лишь ничтожная часть возможностей CSS, но и этого вполне достаточно для выполнения дальнейших лабораторных работ.
Лабораторная работа №17 «Простейшее использование стилей»
Переливающийся заголовок
Давайте используем новые возможности, о которых мы узнали, для создания простого, но достаточно эффективного элемента — мерцающей надписи. Ну, например, заставим переливаться заголовок к рассказу “Мое лето”, расположенному на одной из ваших страничек (см. рис. 25);
Рис. 25. Переливающаяся надпись на страничке
На самой страничке работы почти что нет. Надо всего лишь озаглавить контейнер, в котором находится заголовок:
<h2 id=”leto”> Моё лето</h2>
Теперь напишем программу, обеспечивающую постоянную смену цвета этого объекта. Для этого нам требуется, во-первых, организовать массив, содержащий названия цветов, а во-вторых, обеспечить обращение к очередному элементу массива с каждым вызовом функции. Это можно сделать, например, следующим образом:
k=0;
function color()
{
setTimeout(“color()”,100);
cvet=new Array(“red”,”green”,”blue”,”purple”,”gold”,”orange”,”navy”,”maroon”);
leto.style.color=cvet[k]; k++;
if (k==cvet.length) {k=0}
}
Обратите внимание лишь на то, что оператор располагается вне функции. Это позволяет выполнить его один-единственный раз — при загрузке страницы. В противном случае он выполнялся бы каждый раз при ее вызове, и цвет нашего заголовка был бы всегда один и тот же.