Лабораторная работа №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. Мало того, пользователь мог сам, используя настройки браузера, менять стиль отображения различных тегов.

Каскадные таблицы стилей (C ascading S tyle S beets, сокращённо 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 «Простейшее использование стилей»

Дата добавления: 2015-06-28