WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


, и . Коллекция cells со держит все элементы таблицы, созданные с помощью тегов и , а для доступа к ячейке — значение ID в теге или 4.8. Таблицы и простые базы данных а Моя таблица Фамилия Имя Иванов Иван Директор Петров Петр Заместитель директора Сидорова Эллочка Секретарша Федоров Федор Водитель Рис. 4.25. Пример таблицы Ниже приведено несколько примеров ссылок на элементы таблицы из сценария:

// ссылка на строку заголовков столбцов // ссылка на первую строку данных ] /* другой способ ссылки на первую строку данных */ /* ссылка на ячейку, содержащую "Фамилия" */ // ссылка на ячейку, содержащую "Иванов" // ссылка на ячейку, содержащую "Иван" // ссылка на ячейку, содержащую "Петров" Чтобы обратиться к строке или ячейке следует учесть иерархию объек тов: сначала мы обращаемся к коллекции всех элементов документа, затем к таблице и только после этого — к элементу таблицы. Обратите внимание, что эти ссылочные выражения возвращают не содержимое элементов таблицы (строк или ячеек), а лишь ссылки на элементы как на объекты.

Каждая строка таблицы (элемент коллекции rows), являясь объектом, имеет свою собственную коллекцию ячеек, которая называется cells, так же как и коллекция всех ячеек таблицы. Однако нумерация ячеек в этой коллекции происходит в пре делах одной строки начиная с 0. Например, в случае трехстолбцовой таблицы ячей ки из коллекции cells для одной строки имеют индексы 2.

Глава 4. Примеры сценариев Примеры all /* ссылка на содержащую "Фамилия" */ document all rows [1].cells[0] /* ссылка на содержащую "Иванов" */ document all cells[l] ссылка на содержащую all rows[2].cells[0] /* ссылка на содержащую "Петров" */ document all /* ссылка на содержащую "Петр" */ Выше мы рассмотрели создание ссылок на элементы таблицы. Эти ссылки при меняются для чтения и изменения содержимого таблицы. В IE4+ для этой цели можно использовать свойства innerText и innerHTML С помощью свойства innerText читается и изменяется обычное текстовое содержимое ячеек. В случае когда в ячейке находится HTML-код, для его изменения необходимо аналогичным об разом воспользоваться свойством innerHTML. Впрочем, если содержимое ячейки является обычным текстом, то вполне можно использовать и innerHTML. Таким образом, свойство innerHTML универсальнее, чем innerText. Если таблица выводит ся в окно браузера (то есть видима), изменение содержимого ее ячеек отобразит ся автоматически.

// ИвановИванДиректор // Иванов // Директор /* Изменяем текстовое содержимое ячейки: */ = "Сторож" /* Заменяем текстовое содержимое ячейки на изображение: */ = Следует иметь в виду, что изменять содержимое таблицы необходимо по ячей кам, а не по строкам. Иначе говоря, попытка использовать выражение вида:

= новое_значение приведет к удалению строки и, возможно, к ошибкам выполнения сценария.

Коллекции строк и ячеек, как и любой массив, обладает свойством length, значе нием которого является количество элементов в коллекции.

Примеры // количество всех строк // количество всех ячеек /* количество ячеек в строке с индексом 2 */ 4.8.2. Добавление и удаление строк таблицы Добавление новой строки в таблицу производится с помощью метода Этот метод возвращает ссылку на вновь созданную строку, которая затем исполь зуется для вставки ячеек. Ячейки вставляются в строку с помощью метода Данный метод возвращает ссылку на созданную ячейку, которая затем используется для задания содержимого ячейки. Ячейки вставляются в строку по порядку без пропусков начиная с нулевой. Так, нельзя создать ячейку 4.8. Таблицы и простые базы данных с индексом 3, если ячейки с индексами и 2 еще не созданы. С другой стороны, вы можете последовательно создать любое количество ячеек в строке.

Таким образом, новая строка создается в три этапа: сначала к таблице добавляет ся новая строка, затем в нее вставляются ячейки, после чего они заполняются зна чениями. Ниже приведен пример добавления строки к существующей таблице и заполнения ее ячеек значениями:

newrow = all.mytab. // добавляем новую строку // вставляем ячейку с индексом // заполняем ячейку значением (1) Для удаления строки таблицы служит метод Параметр указывает номер удаляемой строки. Например:

4.8.3. Генерация таблиц с помощью сценария Один из неприятных моментов в создании таблиц посредством тегов HTML состоит в большом количестве этих тегов и необходимости тщательно следить за правильной их расстановкой. При этом коррекция содержимого ячеек больших таблиц оказыва ется весьма хлопотным делом. Облегчить работу в ряде случаев помогает хранение содержимого ячеек в массивах и генерация таблицы с помощью сценария.

В следующем примере предполагается, что содержимое строк таблицы хранится в отдельных массивах. С помощью операторов цикла формируется строка, содер жащая теги таблицы, а затем эта строка записывается в HTML-документ.

Глава 4. Примеры сценариев 4.8.4. Простые базы данных Достаточно эффективный способ формирования таблиц — использование специ ального элемента управления ActiveX, называемого Simple Tabular Data (STD — простые табличные данные). Этот элемент вставляется в HTML-документ с по мощью тега ECT> и позволяет легко управлять данными, хранящимися в обыч ном текстовом файле. Вы можете изменять, добавлять, удалять, сортировать, ис кать и фильтровать (выбирать) данные. Но главное достоинство применения STD заключается в простоте создания больших таблиц, например каталога ссылок.

Собственно данные хранятся на диске в текстовом файле. При этом их табличная структура поддерживается с помощью символов-разделителей. В качестве разде лителя строк обычно используется невидимый символ перевода строки (клавиша Enter). Однако можно задать любой символ в качестве разделителя строк. Данные различных ячеек отделяются друг от друга произвольным символом, не исполь зуемым в каких-нибудь других служебных целях (например, запятая или верти кальная черта). Если запятая встречается в значениях данных, то ее не следует выбирать в качестве разделителя. Создавать такие файлы можно вручную с по мощью текстового редактора (например, Блокнота Windows). Кроме в боль шинстве систем работы с базами данных возможно преобразование специфиче ских файлов в текстовые.

В первой строке текстового файла записываются через символьный разделитель имена столбцов. Они не обязательно должны совпадать с теми заголовками стол бцов, которые вы хотите видеть на экране. Главное их назначение в том, чтобы обеспечить доступ к данным. Это так называемые имена полей базы данных, или, другими словами, идентификаторы полей. Правила их образования такие же, как и для имен переменных. На рис. 4.26 первая строка содержит имена полей, а ос тальные — собственно данные. Разделителем полей здесь является вертикальная черта.

Ж rib директора Федоров|Федор|[Водитель т Рис. 4.26. Пример текстового файла с табличными данными Элемент ActiveX STD, управляющий данными, встроен в браузер IE4+, а чтобы вставить его в HTML-документ, необходимо использовать следующие теги:

ID = CLASSID = NAME = 4.8. Таблицы и простые базы данных NAME = VALUE = NAME = VALUE = true> Контейнерный тег содержит множество тегов , с помощью кото рых задаются параметры. В примере мы указали лишь некоторые из них:

• — разделитель полей (ячеек);

в примере значением этого параметра является вертикальная черта • место расположения (URL-адрес) текстового файла с данными;

в примере мы указали просто имя файла mydb.txt;

• UseHeader — определяет, содержит ли первая строка в текстовом файле имена полей.

Значение атрибута ID тега выбирается произвольно, но оно обязательно должно быть указано. Если требуется установить символ, являющийся раздели телем строк данных в текстовом файле, то следует добавить еще один параметр:

Для просмотра всех параметров элемента управления STD, установленных по умол чанию, достаточно загрузить в браузер следующий HTML-документ (рис. 4.27):

.. '...

Рис. 4.27. Диалоговое окно, в котором показаны параметры элемента управления STD, установленные по умолчанию Чтобы отобразить в окне браузера таблицу с данными из текстового файла mydb.txt, достаточно в том же документе записать следующий HTML-код (рис. 4.28):

Pages:     | 1 |   ...   | 2 | 3 || 5 | 6 |

«Вадим Дунаев JavaScript Изучите один из популярнейших языков для самостоятельно издание Прочитав эту книгу, вы узнаете: ...»

-- [ Страница 4 ] --

Напомним, что плавающие фреймы создаются с помощью контейнерного тега

212 Глава 4. Примеры сценариев 4.3.1. Прямая линия Прежде всего выясним, как нарисовать точку. Из множества таких точек будет состоять любая кривая, которую нам нужно отобразить в окне браузера. В HTML для этого можно использовать следующий тег:

у, х — чи сла, указывающие положение графического файла в пикселах. Изображение точ ки размером пиксел можно создать в любом графическом редакторе. Из сооб ражений экономии его лучше всего сохранить в файле формата BMP, а не JPEG или GIF (при малых размерах изображения алгоритмы сжатия неэффективны).

Чтобы задать размеры отображения точки на экране, следует использовать атри буты WIDTH и HEIGHT и высота):

Теперь рассмотрим начальную версию функции, которая рисует прямую линию с заданными координатами х2, у2 ее начала и конца. Кроме координат функ ция будет принимать числовой параметр п, указывающий толщину линии. Вот вариант определения функции:

function yl, х2, у2, п){ /* Версия 0 */ /* xl, yl — начало линии х2, у2 - конец линии п - толщина линии */ var = + n + + n /* строка для учета толщины */ var xstr = // строка тегов для записи в HTML-документ var = + clinewidth + ' var k = (y2 - yl)/(x2 - xl) // коэффициент наклона линии var x = xl // начальное значение координаты х /* Формирование строки, содержащей теги

(x <= х2) { xstr += + + (yl + k*(x - + ': + x x++ } // запись в документ } Функция формирует строку, содержащую теги вывода экземпляров одного и того же графического изображения точки. При этом в цикле изменяются значе ния параметров top и left атрибута STYLE. Параметром цикла является горизон тальная координата, текущее значение которой присваивается параметру Та ким образом, мы используем горизонтальную развертку линии. Вертикальная координата (top) вычисляется с учетом ее наклона — коэффициента, равного тан генсу угла наклона. Сформированная строка записывается в документ и отобра жается в окне браузера.

4.3. Рисование линий Функция дает неплохие результаты, когда линия проходит слева направо под уг лом к горизонтали, меньшим 45° (рис. 4.10). При больших углах становится за метной дискретность линии, что показано на рисунке. Это связано с тем, что ко личество отображаемых точек определяется величиной х2 - Если мы хотим нарисовать вертикальную линию, то х2 = xl и, следовательно, количество отобра жаемых точек равно 0. Иначе говоря, для создания вертикальных линий рассмат риваемая версия функции не приспособлена. Кроме того, эта функция ри сует только линии, у которых начало находится левее и выше конца.

Ссылки Рис. Линии, нарисованные с помощью функции line() версии О В следующей версии функции реализована простая идея, заключающаяся в том, чтобы выбирать подходящую развертку. Если линия ближе к горизонтали, чем к вертикали, то используется горизонтальная развертка, в противном случае выбирается вертикальная развертка (рис. 4.11). Кроме того, мы определяем на правление развертки так, чтобы рисовать линии, у которых начало может быть как левее, так и правее конца (листинг Листинг 4.10. Код функции версии line(xl, х2,у2, п){ Версия 1 */ /* xl, yl - начало линии х2, у2 - конец линии п - толщина линии var = // определяющая толщину линии if (!n) clinewidth = ' + n + + // строка тегов для записи в HTML-документ продолжение Глава 4. Примеры сценариев Листинг 4. var = + + ' var x, k, direct var = - > if direct = (y2 > yl) // направление прямой x = yl k = (x2 - xl)/(y2 - yl) // коэффициент наклона прямой direct = (x2 > xl) // направление прямой if (direct) x = xl else x = x k = (y2 - yl)/(x2 - xl) // коэффициент наклона прямой while (true){ if (!vertical){ xstr += + + (yl + k*(x - + + if (x == x2) break if (direct) else }else{ xstr += + ' + + ';

+ x + if (x == y2) break if (direct) x++ I // запись в документ Теперь не мешало бы получить возможность рисовать, например, штриховые ли нии, а также задавать их цвет. Чтобы задать цвет линии, необходимо выбрать под Рис. Линии, нарисованные с помощью функции версии 4.3. Рисование линий ходящий графический файл с изображением точки. Можно заранее заготовить файлы точек с различными цветами. Впрочем, можно заготовить файлы не толь ко с изображениями точек, но и с произвольными изображениями. В конце кон цов, мы можем рисовать «линии», используя любые изображения в качестве точек.

Для рисования штриховых линий необходимо просто периодически не отобра жать заданное количество точек. В следующей версии функции добавлены два параметра: имя графического файла и длина штриха линии (листинг Предполагается, что длины штриха и паузы между соседними штрихами одина ковы. Если длина штриха не указана или равна 0, то линия сплошная.

Листинг 4.11. Код функции line() версии 2 (штриховые линии) function yl, x2, y2, n, s){ /* Версия 2 */ /* - имя графического файла xl, yl - начало линии y2 - конец линии n - толщина линии s - длина штриха и паузы */ if // файл с изображением точки pict_file = if (!s) // длина штриха и паузы s = var = // строка, определяющая толщину // линии if (!n) // толщина clinewidth = + n + + n xstr = // строка тегов для записи в HTML-документ var = pict_file + + + ' var x, k, direct var vertical = - yl) > - xl) if (vertical){ direct = (y2 > yl) // направление прямой x = yl k = (x2-xl)/(y2-yl) // коэффициент наклона прямой }else{ direct = (x2 > xl) // направление прямой if (direct) x = xl else x = x k = (y2 - yl)/(x2 - xl) // коэффициент наклона прямой } var i = 0 // счетчик точек штриха и паузы var draw = true // рисовать или пропускать if (!vertical){ if (draw) xstr += + + (yl + k*(x - + ';

+ x + if (x == x2) break if (direct) x++ else x- if (draw) продолжение Глава 4. Примеры сценариев Листинг 4.11 (продолжение) xstr += + + + k*(x - + ';

+ x + if (x == y2) break if (direct) else if (s>0&&i>s){ = = // запись в документ Вторая версия функции позволяет не только рисовать сплошные и штрихо вые прямые линии, но и располагать вдоль них изображения из графических фай лов (рис. 4.12). В последнем случае линии не видны, они выполняют лишь роль направляющих для расположения изображений. Подбирая изображения и длину штриха, можно получить интересные визуальные эффекты. Однако не следует забывать, что при больших размерах графического файла и значительном коли честве «точек» процесс отображения на экране может занять много времени.

:. •• Ссыпки я Рис. 4.12. Расположение изображений вдоль прямых штриховых линий 4.3. Рисование линий _ 4.3.2. Произвольная кривая А почему бы не создать функцию для рисования произвольных кривых, заданных некоторым выражением? На первый взгляд может показаться, что эта задача слож нее, чем рисование прямых линий. Но это не так. При написании кода функции мы используем большую часть опыта, полученного при решении задачи рисова ния прямых линий. Будем считать, что выражение, задающее кривую, содержит переменную, обозначенную строчной латинской буквой х. Тогда горизонтальная координата точки кривой вычисляется просто как значение переменной х, изме няемой в заданных пределах. Для вычисления вертикальной координаты исполь зуем функцию которой передадим в качестве параметра строку, содержа щую выражение (листинг Функция curve() для рисования кривой будет принимать следующие параметры:

имя графического файла с изображением точки (впрочем, это может быть любое изображение), задающее кривую, начала линии, количе ство точек линии, толщину линии и длину штриха (если потребуется штриховая линия) (рис. 4.13).

Листинг 4.12. Код функции для рисования кривых function x0, y0, t, n. s){ /* Версия 0 */ /* pict_file - имя графического файла - выражение с переменной х х0, у0 - координаты начала кривой t - точек кривой (значений переменной х) n - толщина линии s - длина штриха и паузы */ return null if = if (!s) s = if t = var = if clinewidth = n + + n var x = + pict_file + + clinewidth + STYLE = xstr = var i = 0, draw = true for(x = 0;

x < if (draw) xstr += + (y0 + + ';

+ (x0 + x) if (i > s&&s > 0) { draw = i = // запись в документ Глава 4. Примеры сценариев -1 - Microsoft., Рис. 4.13. Линии, нарисованные с помощью функции версии О Ниже приведено несколько примеров:

// ветвь параболы // синусоида Теперь модифицируем функцию curve() так, чтобы можно было рисовать замкну тые линии (например, окружность или эллипс). Для этого необходимо иметь воз можность задавать выражение не только для вертикальной, но и горизонтальной координаты. Такой способ задания линии в математике называют параметриче ским. В простейшем случае в качестве выражения для горизонтальной координа ты можно задать как "х" (листинг Тогда функция должна давать такой же результат, что и ее версия 0. Напомним, что в выражениях для координат точек линии переменная должна быть обозначена строчной латинской буквой х.

Листинг 4.13. Модифицированный код функции function yexpr, xexpr, y0, t, n, s){ /* Версия 1 */ - имя графического файла yexpr - выражение с переменной х для вертикальной координаты - выражение с переменной х для горизонтальной координаты у0 — координаты начала кривой t — количество точек кривой (значений переменной х) n — толщина линии s — длина штриха и паузы ;

return null if xexpr = if = 4.3. Рисование линий if (!s) s = if (! t) t = var = if (!n) clinewidth = + n + + n var x = + pict_file + + clinewidth + ' xstr = var i = 0, draw = true = 0;

x < t;

x++){ if (draw) xstr xstr0 + (y0 + + + (x0 + + (i > s&&s > 0) { draw = i = // запись в документ } Ниже приводятся несколько примеров так называемых фигур Лиссажу (рис.

HTM Я с Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции версии Глава 4. Примеры сценариев Фигуры получаются, если выражения для координат представляют собой синус и косинус некоторого выражения с переменной х. Наиболее интересные кри вые возникают, когда коэффициенты при переменной являются кратными друг другу.

Вместо изображения точки можно использовать любой другой рисунок. Подби рая графические файлы, вид кривой и длину штриха, можно получить интерес ные визуальные эффекты (рис. 4.15). Эти эффекты могут быть особенно впечат ляющими, если использовать анимационные GIF-файлы. Однако помните, что при больших размерах графического файла и многочисленности рисунков про цесс их отображения на экране может занять много времени.

HTM Файл Рис. 4.15. Расположение рисунков вдоль фигур Лиссажу 4.3.3. Графики заданных выражениями В принципе, у нас почти все готово, чтобы нарисовать график функции одной переменной в прямоугольной системе координат. Мы уже рассмотрели в преды дущих подразделах, как рисуются кривые, заданные выражением с одной пере менной, а также прямые линии, необходимые для отображения осей координат.

Теперь все это нужно собрать воедино.

Казалось бы, достаточно просто нарисовать две перпендикулярные прямые (оси координат), а затем кривую. Однако здесь возникают дополнительные задачи.

4.3. Рисование линий Во-первых, необходимо решить, как пересекаются координатные оси: какие квад ранты они образуют и сколько. Во-вторых, требуется определить длину каждой из осей, которая, очевидно, зависит от максимального и минимального значений выражения, описывающего кривую. Наконец, следует задать способ оцифровки осей. Код программы, решающей эти задачи, получается значительно объемнее, чем код, обеспечивающий собственно рисование линий. Попробуйте написать его самостоятельно в качестве упражнения. В результате вы получите функцию, с по мощью которой сможете рисовать графики различных зависимостей. Не забудь те при этом, что выше мы рассматривали отображение линий в экранной системе координат, в которой вертикальная ось направлена сверху вниз. В обычной прак тике рисования графиков вертикальную ось направляют, наоборот, снизу вверх.

4.3.4. Графики заданных массивами Как известно, зависимости между двумя величинами можно задавать в виде таб лиц, состоящих из двух столбцов, в одном из которых располагаются данные, со ответствующие аргументу зависимости, а в другом — ее значению. Аргументы отображаются на графике вдоль горизонтальной оси, а значения — вдоль верти кальной оси координат. Собственно зависимость обычно представляется либо точками на координатной плоскости, либо ломаной линией, проходящей через эти точки, либо вертикальными прямыми (столбиками). Возможны, конечно, и другие способы графического представления данных (например, в виде круго вой диаграммы). Здесь мы остановимся на задаче построения графиков в прямо угольной системе координат в виде ломаной линии.

Таблицы с данными можно представить с помощью одного двухмерного или двух одномерных массивов. Будем считать, что имеем дело с двумя одномерными мас сивами, в одном из которых содержатся аргументы, а во втором — значения зави симости. Например, в одном массиве содержатся даты, а в другом — соответству ющие этим датам среднесуточные (или какие-нибудь другие) значения темпера туры. Кривую зависимости между температурой и датой можно представить как ломаную линию, состоящую из отрезков прямых линий.

Легко догадаться, что для построения графика зависимости между элементами двух массивов в виде ломаной линии можно просто организовать в цикле вызов рассмотренной ранее функции При этом следует заранее определить рас стояние в пикселах между соседними точками по горизонтальной оси. Возникает задача масштабирования — перевода значений элементов массивов в пикселы эк ранных координат.

Прежде чем рассмотреть пример построения графика, немного модифицируем функцию Эта функция в том виде, как она была определена в подразделе «Прямая линия», не совсем подходит для наших целей. Сделаем так, чтобы она просто возвращала строку тегов, описывающую линию, а не записывала ее в до кумент. Для этого необходимо в определении функции line() заменить строку на return xstr.

В листинге 4.14 приводится код сценария, отображающего в окне браузера гра фик зависимости, заданной с помощью двух массивов (рис. 4.16).

222 Глава 4. Примеры сценариев - E Файл т Два Три Пять Рис. 4.16. График зависимости, заданной с помощью двух массивов Листинг Код сценария, отображающего в окне браузера график зависимости, заданной с помощью двух массивов В этом сценарии масштабирование не универсально, а выбрано вручную на осно ве анализа конкретных исходных данных. Однако можно написать более универ сальный код, автоматически формирующий масштабирующие коэффициенты на основе программного анализа исходных данных и (или) параметров, указанных пользователем. Попробуйте написать такой сценарий в качестве упражнения.

4.3.5. Динамические линии Допустим, требуется время от времени перерисовывать линии. Например, если стрелка на изображении циферблата часов создается с помощью сценария на ос нове функции то для создания эффекта движения необходимо удалить ра нее нарисованную стрелку и создать новую, положение которой соответствует текущему времени. В другом случае может потребоваться перерисовать график некой зависимости (например, курса валют от даты) при динамическом обновле нии данных. Иначе говоря, в общем случае перерисовывание линии состоит из удаления ранее нарисованного ее изображения и создания новой линии.

Рассмотренные выше коды функций и не вполне приспособлены к ре шению этой задачи из-за того, что они выполняют запись в документ сгенериро ванной строки HTML-тегов. Вообще говоря, это делать совсем не обязательно.

Вполне достаточно, чтобы функции line() и просто возвращали строку те гов, а записать ее в HTML-документ можно и во внешней программе. В той же программе мы можем удалить и всю совокупность тегов, формирующих линию (когда это понадобится).

Итак, прежде всего изменим определения функций lineQ и curve() следующим образом: заменим в них выражение на return xstr. В результате функции не будут ничего рисовать, а будут лишь создавать и возвращать данные для последующего рисования. Теперь, чтобы нарисовать произвольную линию, следует в сценарии написать такую строку кода:

Очевидно, вместо одной этой строки можно записать следующие две:

224 Глава 4. Примеры сценариев var xstr = Поскольку мы должны быть готовы удалить линию из документа, строку тегов, возвращаемую функциями и line(), сначала заключим в какой-нибудь кон тейнер, например

с атрибутом ID, а затем запишем в документ:

var ID = + // запись в документ Чтобы удалить линию из документа, достаточно содержимое контей нерного тега

на пустую строку:

= Здесь мы воспользовались свойством которое содержит весь HTML код, заключенный в указанный контейнер. Присвоение этому свойству нового значения сразу же изменяет соответствующий элемент в документе. В данном случае вся последовательность тегов.>, формирующая линию, заменяется пустой строкой, в результате чего изображение линии исчезает. При этом сам кон тейнер

с пустым содержимым остается. В случае необходимости его можно наполнить новыми данными. Это типичный прием динамического изменения эле ментов HTML-документов.

Чтобы вместо предыдущей линии нарисовать достаточно записать в сце нарии следующий код:

= В результате контейнер

заполнится последовательностью тегов..>, формирующих новую линию, а браузер ее отображает.

В качестве примера, позволяющего убедиться, что все это работает, я предлагаю следующий сценарий (листинг 4.15).

Листинг 4.15. Код динамических линий

и др. Вы разбиваете все про странство окна на прямоугольные ячейки с видимыми или невидимыми границами и размещаете в них элементы документа (изображения, тексты, ссылки, кнопки, другие таблицы и т. п.). Таким образом, таблицы выполняют роль каркаса доку мента. До появления CSS они оставались единственным средством точного пози ционирования элементов, но и сейчас широко используются как мощный инстру мент для понятной организации и эффектного представления информации.

4.8.1. Доступ к элементам таблицы Таблица как объект документа имеет две коллекции, посредством которых осу ществляется доступ к ее содержимому. Первая из них — коллекция строк rows, а вторая — коллекция ячеек Коллекция rows содержит все строки таблицы, включая разделы, соответствующие тегам

. Доступ к элементам коллекций осуществляется либо по индексу, либо по значению атри бута ID в соответствующем теге. Так, для доступа к строке таблицы можно ис пользовать значение ID в теге
. При использовании индекса (номера) следует иметь в виду, что нумерация начинается с 0. При этом ячейки таблицы нумеруются слева направо и сверху вниз.

Рассмотрим пример простой таблицы, содержащей три столбца и четыре строки (рис. 4.25):

ID =

Глава 4. Примеры сценариев <ТН>Портрет
Должность (Иван Рис. 4.28. Пример таблицы, созданной с помощью элемента управления STD Здесь в теге атрибут DATASRC в качестве значения имеет ссылку на элемент STD (значение ID в теге ECT>). Внутри тегов данных , в контейнерах , значениями атрибутов DATAFLD являются имена полей. Написание этих имен долж но в точности соответствовать указанным в первой строке текстового файла дан ных. Однако порядок следования и количество выводимых на экран полей может быть произвольным. Например, можно вывести не все поля или, наоборот, про дублировать некоторые из них. Кроме того, можно изменить порядок отображе ния полей. Этот порядок, а также состав отображаемых полей (столбцов) опреде ляется в теге .

ВНИМАНИЕ При использовании элемента управления STD описание таблицы с помощью тега

имеет небольшой объем. В теге
, по существу, описывается лишь структура таблицы, но не описывается ее содержимое. Описание данных содержится в текстовом файле.

Таким образом, при использовании STD мы организуем взаимодействие трех ком понентов: элемент управления STD устанавливает связь с источником данных (текстовым файлом), элемент

связывается с STD и источником данных, текстовый файл содержит собственно данные.

В текстовом файле с данными может содержаться не только текстовая информация, но и HTML-коды. Чтобы эти коды отображались в таблице не просто как текст, а интерпретировались, необходимо в теги

Обратите внимание, что атрибуты привязки данных DATASRC и DATAFLD совместно используются в одном и том же В листинге 4.20 приводится пример HTML кода, который выводит на страницу одну запись базы данных с кнопками навига ции (рис. 4.30). Здесь использовался тот же источник данных, что и в предыду щем примере.

Листинг 4.20. Код, выводящий одну запись базы данных с кнопками навигации формы STD

добавить атрибут ATAS 4.8. Таблицы и простые базы данных Вий Фамилия Имя Иван | Петров Сидорова | Федоров I Рис. 4.29. Пример таблицы, источник данных которой содержит теги изображения При этом если ячейка таблицы не содержит тегов, то будет отображаться простой текст, а в противном случае — результат выполнения HTML-кода. Это позволяет, например, вставлять в ячейки таблицы изображения, гиперссылки, кнопки и дру гие элементы (рис. 4.29). Ниже приведен пример:

252 Глава 4. Примеры сценариев
Файл с данными mydb.txt:

Как уже отмечалось выше, элемент управления STD имеет и другие параметры.

В частности, есть параметры, с помощью которых можно установить фильтр (вы борку) и сортировку данных.

Для установки фильтра предусмотрены следующие три параметра:

NAME = VALUE = NAME = VALUE =

имя_поля оператор_сравнения образец Например, если требуется отфильтровать из таблицы все строки, в которых поле Фамилия имеет значение "Иванов", то необходимо использовать следующие теги параметров:

(больше), < (меньше), >= (не больше), <= (не меньше).

Чтобы выключить (сбросить) фильтр и сделать доступными все строки таблицы, достаточно использовать условие, которому заведомо удовлетворяют все строки таблицы. Например, следующие параметры сбрасывают текущий посколь ку пустая строка содержится в любой строке:

Атрибут VALUE может принимать значения О/fatse (не зависит) или I/true (зависит).

Для сортировки (упорядочения) данных используется следующий параметр:

NAME = Сортировка строк производится по значениям ASCII-кода значений заданного поля базы данных. Например, если мы хотим, чтобы фамилии располагались по алфавиту, необходимо записать:

4.8. Таблицы и простые базы данных NAME = VALUE = По умолчанию сортировка производится по увеличению значения ASCII-кода символов. Однако порядок можно изменить на противоположный, если исполь зовать следующий параметр:

Атрибут VALUE=1 устанавливает режим сортировки, принятый по умолчанию.

Элемент управления STD предоставляет объект recordset, который поддерживает методы перемещения по строкам таблицы (по записям базы данных). Синтаксис следующий:

. од Например, перемещает указатель текущей записи на следующую запись.

Методы перемещения по записям базы данных:

• movePreviosQ — к предыдущей записи;

• — к следующей записи;

• moveFirstQ— к первой записи;

• — к последней записи.

Перед использованием методов moveNextQ и movePreviosQ следует проверять зна чения свойств eof (конец файла данных) и bof (начало файла данных). Так, если текущей является последняя строка таблицы, то нельзя использовать метод moveNextQ. Аналогично, если текущей является первая строка, то нельзя исполь зовать movePreviosQ. Разумеется, методы перемещения используются в сценари ях обработки событий, таких как, например, щелчок на кнопке. Это необходимо, если на экран выводятся не все записи (строки) таблицы, а только одна запись Формы Избранное I Фамилия Имя Фото Рис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками для перемещения по записям 254 _ Глава 4. Примеры сценариев (например, с помощью полей ввода). Перемещение по строкам таблицы исполь зуется при поиске данных в соответствии с некоторым критерием и при их обра ботке.

Если использовать поля ввода (например, при создании формы для просмотра и коррекции данных), то привязку данных к ним можно осуществить с помощью следующего фрагмента HTML-кода:

TYPE = "text" DATASRC = =

с атрибутом DATAFORMATAS = "html".

ВНИМАНИЕ Изменения данных в таблице сохраняются только в оперативной памяти компьютера и никак не влияют на содержимое текстового файла-источника данных. Чтобы обновить содержи мое таблицы, необходимо отредактировать текстовый файл и перекачать его на сервер, как это обычно делается при модификации страниц сайта.

Тем не менее рассмотренный здесь элемент STD оказывается очень полезным для организации обновления содержания веб-сайта. Вместо того что бы корректировать HTML-код всей страницы, выискивать в ней нужное место, вы можете редактировать только текстовые файлы с информацией, не занимаясь при этом вопросами композиции. Например, таким образом можно организовать разделы новостей сайта и текущей информации. В подразделе 4.8.7 будет рассмот рена система поиска по сайту, основанная на использовании STD.

4.8.5. Сортировка данных таблицы Рассмотрим сортировку строк таблицы по значениям того или иного столбца.

В нашем примере для сортировки необходимо просто щелкнуть на заголовке нуж ного столбца таблицы. Для этого кроме элемента управления STD и таблицы нам понадобится сценарий, содержащий функцию, обрабатывающую щелчок пу тем модификации тега (листинг 4.21). Здесь использован следующий хитрый прием. Сначала база данных показывается без всякой сортировки. Мы сохраняем блок тегов от до за исключением последнего, в пе ременной obj. При щелчке на заголовке таблицы вызывается функция сортиров ки которой передается имя поля. Эта функция дописывает к значению переменной obj строку, содержащую теги параметров, отвечающие за сортировку.

Далее функция заменяет в HTML-коде теги на те, которые содержат ся в переменной obj. Это делается с помощью свойства При этом элемент управления STD заново инициализируется с новыми параметрами. В результате таб лица перерисовывается в соответствии с новым порядком следования строк.

Глава 4. Примеры сценариев Листинг 4.21. Код сценария сортировки данных таблицы

Фото
В этом примере сортировать данные можно только по первым двум текстовым полям. Вы можете в качестве упражнения усовершенствовать этот код. Напри мер, сделайте так, чтобы при двойном щелчке на заголовке столбца таблицы сор тировка происходила в противоположном порядке. Для этого необходимо не уста навливать параметр .

4.8.6. Фильтрация данных таблицы Для организации фильтрации данных из таблицы по заданному критерию исполь зуется подход, аналогичный рассмотренному в предыдущем подразделе. В при веденном ниже примере (листинг 4.22) в окно браузера выводится таблица с данны ми и элементы, с помощью которых можно задать поле (столбец) и значение (образец) для формирования простого условия фильтра вида: = значение.

Имя поля выбирается из раскрывающегося списка, а значение вводится с клавиа туры. Для установки фильтра следует щелкнуть на кнопке Применить (рис. 4.31).

4.8. Таблицы и простые базы данных htm Exp...

Файл Поле Значение Рис. 4.31. Пример таблицы с элементами для установки фильтра Если поле ввода значения пусто, то при щелчке на этой кнопке фильтр выклю чится, а в таблице будут отображены все имеющиеся записи. Заметим, что ре зультат фильтрации в данном примере не зависит от регистра, в котором пользо ватель ввел значение.

Так же, как и при мы сохраняем в переменной часть информации о па раметрах элемента а затем модифицируем ее, чтобы учесть условие филь тра. Для установки фильтра используется свойство Листинг 4.22. Код для фильтрации данных таблицы Поле

Для тренировки усовершенствуйте рассмотренный выше код таким образом, что бы можно было выбирать оператор сравнения из раскрывающегося списка, а так же устанавливать режим зависимости или независимости от регистра.

4.8.7. Поиск по сайту Если ваш сайт содержит много страниц, то имеет смысл организовать поисковую систему. Здесь мы рассмотрим один простой вариант такой системы, использо ванный на моем сайте.

В основе поисковой системы положена база данных, содержащая соответствие между поисковыми образами (ключевыми словами) и ссылками на веб-страни цы. Эта поисковая база данных создана в обычном текстовом файле, который в на шем примере называется search.txt. В ней всего два поля (столбца) с именами 4.8. Таблицы и простые базы данных и р2. Первый столбец содержит ключевые слова, а второй — ссылки на HTML документы, в которых находятся соответствующие ключевые слова. В качестве разделителя полей в текстовом файле использовалась вертикальная черта. Таким образом, структура поисковой базы данных имеет следующий вид:

Ниже приводится фрагмент поисковой базы данных для моего сайта:

БД текстовая база данных 5TD Simple Tabular Data| Динамическая загрузка загрузка E-mail Email Электронная почта|<а Эллиптичекая траектория орбита движение эллипс|<а по эллипсу Звездные войны Подсветка мигание и Поиск по сайту карта сайта map search| Поиск в тексте поиск в текстовой области|<а в текстовой АФП выполнение выражения выражения в текстовой строке книги книга Сам себе web-дизайнер Здесь ключевые слова выбраны из заголовков и содержательной части текстов, расположенных на различных страницах сайта, посвященного веб-дизайну. На пример, такие слова, как «БД», «текстовая», «база» и «данных», содержатся в файле Хотя эти же слова можно встретить и на других страницах моего сайта, я сделал так, чтобы поиск этих слов приводил именно к документу db0.htm.

Прежде всего, необходимо тщательно продумать систему ключевых слов, чтобы поиск был эффективным. Затем следует разработать алгоритм работы поисковой системы. В частности, требуется решить, будет ли поиск зависеть от регистра, в ко тором пользователь ввел поисковый образ, выводить ли в качестве результата пер вый найденный документ или выводить только список ссылок на все найденные документы и т. п.

В рассматриваемом примере поиск не зависит от регистра введенного поискового образа. Система просматривает значения первого поля базы данных строка за стро кой, проверяя каждый раз, содержится ли введенный пользователем поисковый образ в значении первого поля. Если да, то поиск завершается;

в противном слу чае он продолжается. Результат поиска выводится в виде ссылки на документ.

Щелчок на данной ссылке выводит этот документ в окно браузера. Если поиск неудачен, то появляется соответствующее сообщение.

Интерфейс поисковой системы прост: поле ввода поискового образа и кнопка для запуска процедуры поиска. Результаты поиска отображаются ниже, под полем ввода (рис. 4.32).

Для работы с базой данных использованы два идентичных элемента управле ния связанные с одним и тем же текстовым файлом search.txt. К каждому из этих элементов STD привязана своя таблица. Одна из них, всегда невиди мая, необходима для служебных целей, а именно для операции поиска по всей базе данных. Она содержит только поле ключевых слов Вторая таблица предназначена для отображения результатов поиска и содержит только поле ссылок р2. При загрузке документа эта таблица не видна и отображается только при успешном поиске. Такой прием обусловлен тем, что стандартные для элемен та средства фильтрации (операторы сравнения) слишком примитивны для наших целей (см. подраздел 4.8.4). Нам было необходимо организовать проверку 260 Глава 4. Примеры сценариев Дунаев Вадим. Сам себе ;

1 и * вдпальаовано в а.

Рис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автора вхождения поискового образа в последовательность ключевых слов. Очевидно, что это недостижимо с помощью обычных операторов сравнения. Кроме того, мне не хотелось сбрасывать фильтр перед выполнением каждой операции поиска.

В листинге 4.23 приводится пример кода поисковой системы.

Листинг 4.23. Пример кода поисковой системы

Функция поиска сканирует записи базы данных, проверяя для каждой из них, содержит ли поле ключевых слов введенный пользователем поисковый образ. Если результат проверки положителен, то переменной присваивается значение поля ссылок р2. Это значение затем используется для формирования условия фильтра, а сканирование базы данных прекращается. Установка филь тра производится с помощью присвоения нового значения свойству outerHTML эле мента управления STD для таблицы ссылок. После установки фильтра мы дела ем таблицу ссылок видимой. Эта таблица будет содержать лишь одну ссылку.

Итак, мы рассмотрели простой вариант поисковой системы. Его можно усовер шенствовать по нескольким направлениям. Мы рассмотрим далее лишь одно из них. А именно, давайте сделаем так, чтобы система поиска сканировала все запи си базы данных и выводила в качестве результата все ссылки, соответствующие поисковому образу, а не только одну первую найденную. Для осуществления это го замысла нам потребуется один элемент управления STD и одна невидимая таб лица с двумя полями, и р2. Фильтрация данных нам не понадобится. Вместо нее мы просто будем формировать строку, содержащую найденные ссылки, кото рую затем присвоим свойству объекта result. При этом код даже упро щается по сравнению с исходным (листинг 4.24).

Листинг 4.24. Код усовершенствованной поисковой системы TYPE = "text" NAME = "WORD" VALUE = SIZE = 20> onclick = "f <В ID = Таблица поисковой базы данных > NAME = DATASRC = #fndl DATAFLD = > NAME = DATASRC = #fndl DATAFLD = DATAFORMATAS =
4.8. Таблицы и простые базы данных 4.8.8. Вставка HTML-документа в таблицу Документ из внешнего HTML-файла можно вставить в таблицу, находящуюся в текущем документе и управляемую элементом STD. Эта возможность основана на том, что HTML-файл является обычным текстовым файлом. Поскольку в пер вой строке этого файла указывается тег мы можем использовать его в ка честве имени поля базы данных. Признаюсь, эта простая мысль не сразу пришла мне в голову. Видимо, сказался стереотип образования имен переменных.

Таким образом, мы рассматриваем вставляемый HTML-файл как базу данных с единственным полем (столбцом). Основное требование к содержимому HTML файла: любой контейнерный тег должен полностью размещаться в одной строке этого файла.

Рассмотрим сначала пример вставки в таблицу одного HTML-документа:

DATASRC = WIDTH = 350>

Здесь предполагается, что в документе тег записан прописными буквами.

Если же он записан строчными буквами, то это должно быть отражено и в значе нии атрибута DATAFLD = Очевидно, вы можете задать атрибуты оформле ния таблицы (рамок, выравнивания, цвета и т. п.), а также стилевые параметры позиционирования.

264 Глава 4. сценариев Теперь рассмотрим случай вставки нескольких HTML-документов. В листин ге 4.25 приведен сценарий, который это выполняет.

Листинг 4.25. Код сценария вставки нескольких HTML-документов • Для пробы возьмем следующие два простых HTML-документа:

Файл htmll.htm:

<НЗ>Документ 1 - просто картинка - кнопка Файл <НЗ>Документ 2 - содержание документа из второго В нем только этот текст Тогда HTML-документ, содержащий лишь приведенный выше сценарий, будет выглядеть в окне браузера, как показано на рис. 4.33. Диалоговое окно с привет ствием появляется при щелчке на кнопке Щелкни.

Вы можете разместить в основном документе элементы управления (ссылки, кноп ки), с помощью которых в одну и ту же таблицу будут загружаться различные 4.8. Таблицы и простые базы данных это - просто картинка - кнопка Документ Это - содержание из второго файла.

В нем только текст Рис. 4.33. Результат вставки HTML-документов в таблицы HTML-документы. Для этого необходимо соответствующим образом изменять значение параметра DataURL.

Рассмотренный выше способ является еще одним средством (помимо плавающих фреймов вставки HTML-документов, осуществляемой на стороне кли ента, то есть браузером пользователя, а не сервером.

ВНИМАНИЕ В отличие от плавающих фреймов, этот способ не столь универсален. При его использова нии следует учитывать, в каком регистре записан тег во вставляемом документе, а также следить за тем, чтобы контейнерные теги (а их подавляющее большинство в HTML) записывались целиком в одной строке (без переносов).

4.8.9. Обработка табличных данных Нередко в базах данных хранят некоторые первичные данные, а отображают на экране (или используют как-то иначе) результаты их обработки. Обычно обра ботке подвергаются числовые данные. Например, требуется вычислить сумму всех значений столбца таблицы или найти максимальное или минимальное значение.

Бывают и более сложные задачи. В любом случае для их решения удобно, прежде всего, считать обрабатываемые данные из таблицы в массивы, для которых в JavaScript предусмотрены многочисленные методы обработки. Дополнительно 266 Глава 4. Примеры сценариев к этим методам можно создать свои специальные функции обработки. Некото рые из них были рассмотрены в подразделе 1.7.2.

Рассмотрим задачу считывания значений столбца таблицы в массив. Если табли ца с данными полностью создана с помощью тегов HTML (без использования элемента управления STD), то задача считывания проста. В этом случае требует ся с помощью оператора цикла присвоить элементам массива значения ячеек таб лицы из заданного столбца. Пусть, например, элемент имеет ID = и требуется считать в массив все значения столбца с индексом п. Далее предполо жим, что содержимым ячеек этого столбца являются числа, и мы собираемся про изводить числовые операции над элементами массива. Поскольку содержимое ячеек таблицы имеет строковый тип, постольку при считывании сразу же вос пользуемся функцией или Ниже приведен сценарий, реша ющий поставленную задачу:

myarray = new for(i = 0;

i< myarray[i ] = Здесь мы использовали для преобразования в числовой тип функцию чтобы сохранить дробную часть числа. Когда массив чисел создан, можно приме нить к нему статистическую обработку с помощью, например, функции описанной в подразделе 1.7.2.

Теперь рассмотрим задачу считывания в массив значений столбца таблицы, уп равляемой элементом Как известно, источником данных для такой таблицы является текстовый файл. В листинге 4.26 приводится пример HTML-документа с элементом управления STD, таблицей и сценарием, производящим чтение дан ных из столбца с одновременным переводом их в числовой тип, а также вычисля ющим сумму всех значений.

Листинг 4.26. Пример HTML-документа с элементом управления STD NAME = DATASRC = #mydatacontrol = onchange = <Р> Сумма выплат <В ID = Здесь предполагается, что источник данных находится в файле mydata.txt. В этом файле указано поле Зарплата, а поля разделены вертикальной чертой. Чтение дан ных поля Зарплата и вычисление суммы всех его значений происходит при загруз ке документа в браузер, а также при каждом изменении в этом поле. Результат вычисления суммы S вставляется как текст в заранее подготовленный для этой цели элемент <В ID = 4.8.10. Защита веб-страниц с помощью пароля Если мы хотим защитить сайт или его отдельную страницу с помощью пароля, то главное — обеспечить сохранность пароля, а также адреса защищаемой страницы.

Очевидно, они не должны фигурировать в HTML-документе и сценарии в явном виде. Достаточно простой и надежный способ решения этой задачи — совпадение пароля с именем (без расширения) какого-нибудь расположенного на сер вере. В этом случае к введенному пользователем, следует добавить расши рение имени файла и проверить, существует ли он на сервере. Если файл суще ствует, то введенный пользователем пароль верен, и можно открыть доступ к документу. В противном случае будет отказано в доступе. Обратите внимание, что имя файла в явном виде не упоминается. Проверку существования файла можно выполнить с помощью метода объекта файловой системы SystemObject), который рассмотрен в главе 5. Однако использование этого объ екта в сценарии для браузера сопряжено с появлением неприятного сообщения о том, что страница содержит элемент ActiveX, который может представлять опас ность. При этом пользователю предлагается принять решение о выполнении про граммы. Если он откажется от ее выполнения, то не получит доступа к защищае мой странице.

Другой вариант решения задачи защиты с помощью пароля тоже основан на совпадении пароля с именем файла. Однако в этом варианте используется не объ ект файловой системы, а безопасный элемент ActiveX управления текстовыми базами данных. Файл с именем, совпадающим с паролем, является текстовым файлом, содержащим базу данных с двумя столбцами (полями) и двумя строка ми (записями). В первой строке записаны идентификаторы полей базы данных, между которыми указан символ-разделитель. Во второй строке через такой же разделитель тоже записаны всего лишь два слова — имя этого текстового файла 268 Глава 4. Примеры сценариев без расширения и имя HTML-файла или URL-адрес страницы перехода. Пусть поля базы данных имеют идентификаторы password и Тогда содержи мое текстового файла с именем, например, должно иметь следую щий вид:

Здесь во второй строке во втором ее поле указан гипотетический URL-адрес стра ницы, на которую должен перейти браузер, если пользователь введет правиль ный пароль.

В следующем примере в HTML-документе размещается текстовое поле ввода и кнопка, щелчок на которой обрабатывается сценарием (листинг 4.27). Сцена рий создает элемент управления и невидимую таблицу, загружая в нее базу дан ных. В этой таблице всего две ячейки: одна с паролем, а другая с адресом перехо да. Далее слово, введенное пользователем, сравнивается со словом в таблице. Если они совпадают, то происходит переход на страницу с указанным адресом. В про тивном случае выдается сообщение о том, что введенный пароль неверен.

Листинг 4.27. Сценарий защиты мента с помощью пароля для членов Введите пароль:

ID = ID =

При желании рассмотренный выше сценарий можно усовершенствовать. Так, если введенный пользователем пароль оказался верным, то его можно сохранить в cookie-файле, с тем чтобы при следующем посещении страницы пользователю не пришлось снова его вводить. Об этом уже говорилось в разделе 2.9. Например, в загруженном в браузер документе имеется ссылка на защищенную паролем стра ницу. При щелчке на этой ссылке сценарий считывает из cookie-файла значение специальной записи, содержащей пароль. Далее в документ загружается соответ ствующий текстовый файл базы данных с паролем и производится проверка пра вильности пароля из cookie-записи. Если эта проверка оказалась успешной, то происходит переход по ссылке, указанной в базе данных (ссылка в документе не должна содержать адрес перехода в явном виде). В противном случае в те кущем документе появляется поле и кнопка для ввода пароля с клавиатуры.

Введенное пользователем слово сравнивается с паролем из базы данных. Если они совпали, нужная страница загружается в браузер, а пароль сохраняется в cookie-записи. В противном случае выдается сообщение, что введенный па роль неверен.

В листинге 4.28 приведен пример со сценарием, который пыта ется взять пароль из cookie-записи с именем myspecrecord.

Листинг 4.28. Пример HTML-документа со сценарием, который пытается взять пароль из cookie-записи для членов клуба <а ID

Тот факт, что имя файла (без расширения) базы данных и значение ее поля password совпадают со значением пароля, существенно усиливает защиту. Действительно, для доступа к защищенному документу необходимо не только существование на сервере файла с именем, совпадающим с паролем, но и чтобы этот файл в определенной структуре. А именно он должен содержать свое имя-пароль. Очевид но, далеко не всякий текстовый файл обладает таким свойством.

С точки зрения идеологии парольной защиты веб-страниц сама собой напраши вается следующая модернизация рассмотренных выше сценариев. Пусть пароль совпадает с именем файла текстовой базы данных, но сама база содержит несколько записей. В первом столбце базы данных записан не пароль, а условные имена пользователей (Login). На загруженной в браузер веб-странице пользователь вво дит свое имя (login) и пароль. Далее в текущий документ загружается невидимая база данных из текстового файла с именем, совпадающим с введенным паролем.

В этой базе производится поиск записи, соответствующей имени пользователя.

В случае успеха поиска в браузер загружается документ с адресом, указанным во втором поле. Таким образом на сайте можно хранить, например, индивидуальные сообщения для пользователей вашего клуба.

Заметим, что текстовый файл с базой данных паролей создается и поддерживает ся автором (владельцем) сайта. Он размещается на сервере вместе с другими фай лами сайта. Пароль передается посетителям по электронной почте или телефону.

4.9. Взаимодействие с Flash-мультфильмами Приложения, созданные в системе Macromedia Flash версий 5.0 и 6.0 (MX), могут взаимодействовать со сценариями на JavaScript. А именно они могут получать данные из сценария, написанного на языке JavaScript, и использовать их некото рым образом с помощью своего сценария, написанного на языке ActionScript.

С другой стороны, сценарии на ActionScript могут использовать сценарии (функ ции) на JavaScript. Чтобы организовать такое взаимодействие, необходимо преж Глава 4. Примеры сценариев де всего вставить приложение Flash (мультфильм, ролик, клип) в HTML-доку мент. Это делается с помощью контейнерного тега , инициирующего Flash-проигрыватель и загружающего в него мультфильм. В IE5+ этот проигры ватель уже встроен.

4.9.1. Передача данных из JavaScript в В качестве примера передачи данных из JavaScript в рассмотрим за дачу отображения текста в окне Используя большие изобра зительные возможности Flash, можно создать окно произвольной формы, а не толь ко прямоугольное, как в HTML. В нашем примере HTML-документ содержит Flash-проигрыватель с загруженным в него мультфильмом, поле ввода данных и сценарий, который передает во Flash-мультфильм содержимое поле ввода. При этом содержимое поля ввода данных (элемента отображается в окне Flash-мультфильма (рис. 4.34). В листинге 4.29 приведен соответствующий HTML-код.

т из в Привет Flash мультфильму от JavaScript Введите и он в Flash-мультфильме Flash-мультфильму от JavaScript Рис. 4.34. Текст в поле ввода в окне Flash-мультфильма Листинг 4.29. Пример передачи данных из JavaScript в ActionScipt

Введите текст в поле, и он отобразится во Здесь с помощью тега в браузер загружается элемент управления ActiveX, соответствующий Flash-проигрывателю версии 6.0 (MX), хотя для воспроизведе ния нашего мультфильма достаточно и версии 5.0. В этот проигрыватель, в свою очередь, загружается мультфильм из файла Атрибут CODEBASE тега содержит в качестве значения проигрывателя, если он не встроен в браузер пользователя. Заметим, что в IE5+ Flash-проигрыватель уже встроен. Вложенный контейнерный тег используется только ради брау зера Netscape Navigator. Далее в HTML-документе с помощью тега зада ется поле ввода данных. При изменении значения этого поля (событие onchange) вызывается функция getit(), определенная в сценарии JavaScript. В этой функции с помощью метода переменной inFlash присваивается значение поля ввода данных Этого вполне достаточно, чтобы передать значение поля ввода данных в мультфильм. Метод SetVariable() является методом объекта Flash-проигрывателя, который в данном примере имеет ID = "myflash". Имя пере менной inFlash (произвольное) задается как один из параметров Flash-мультфиль ма. Среди прочих параметров мультфильма отметим еще

Теперь рассмотрим, как сделать воспринимающий и отобра жающий данные из с помощью сценария, написанного на языке 274 Глава 4. Примеры сценариев JavaScript. В пакете Macromedia Flash MX создадим простой мультфильм, содер жащий два слоя. В первом, фоновом слое нарисуем окно. Это может быть любая фигура. В нашем примере я использовал инструмент Овал, чтобы нарисовать эл липс. Затем с помощью инструмента (белая стрелка) я преобразовал эллипс в некую причудливую форму, напоминающую облако. Более того, я залил ее радиальным градиентом. Далее необходимо создать второй слой, расположен ный над первым. В этом слое в пределах «облака», с помощью инструмента Text создается текстовое поле, параметры которого определяются в палитре Properties (Свойства). Эта палитра во Flash MX еще называется Инспектором свойств. Сна чала зададим тип текстового поля — Input Text (Ввод текста). Затем в поле Var (Пе ременная) введем имя переменной, принимающей текст, который должен отобра жаться в текстовом поле. В рассматриваемом примере я выбрал имя переменной Это важный момент, поскольку именно эта переменная указывается в сце нарии JavaScript как первый параметр метода Наконец, с помощью других органов управления палитры Properties задаем дополнительные парамет ры текстового поля (рис. 4.35). В частности, выбираем из раскрывающегося спис ка имя шрифта, режим отображения текста Multiline (Многострочный) и др.

щи - ', •' ' * • • ' Рис. 4.35. Создание Flash-мультфильма, отображающего текст из HTML-документа с помощью сценария на Внизу — палитра Properties 4.9. Взаимодействие с Flash-мультфильмами Исходный файл созданного мультфильма сохраним под именем Это необходимо, если нам потребуется в дальнейшем модифицировать его. Для вставки мультфильма в HTML-документ необходимо создать файл в формате SWF, то есть файл с расширением.swf. Этой цели служит так называемая операция публика ции мультфильма Publish, которая выбирается из меню File (Файл) в главном окне пакета Flash. Параметры публикации можно задать по команде File У Publish Settings (Файл Настройка публикации). В соответствующем диалоговом окне можно задать имя версию Flash-проигрывателя и другие параметры. Вы можете так же потребовать создание HTML-файла, который содержит фрагмент HTML-кода (элемент загружающий Flash-проигрыватель и мультфильм со всеми параметрами, указанными в диалоговом окне настроек. Этот фрагмент можно просто скопировать в создаваемый вашего проекта.

4.9.2. Вызов сценария JavaScript из сценария Script Язык для создания сценариев Flash-мультфильмов достаточно мощное средство программирования, поэтому он может обойтись и без JavaScript.

Тем не менее существует возможность вызывать фрагменты JavaScript-кода из сценария, написанного на ActionScript. Это удобно в тех случаях, когда у вас уже созданы программы на JavaScript. Например, зачем писать код функции представ ления чисел словами на ActionScript, если он уже написан (см. раздел 4.4) на JavaScript?

Вызов функции JavaScript из сценария ActionScript осуществляется следующим образом:

В нашем примере Flash-мультфильм содержит три кнопки, щелчки на которых обрабатываются функциями, написанными на JavaScript. Если уж быть точным, то щелчок на кнопке в мультфильме обрабатывается сценарием на ActionScript, который вызывает функцию на JavaScript.

HTML-документ содержит ECT>, загружающий Flash-проигрыватель вме сте с мультфильмом, и сценарий, в котором определены три функции: открытия нового окна, вывода диалогового окна с сообщением и закрытия окна. В листин ге 4.30 приведен соответствующий код.

Листинг 4.30. Вызов сценария JavaScript из сценария ActionScript = Content-Type content = "text/html;

charset = JavaScript из ActionScript Bo Flash-редакторе создадим простой мультфильм, содержащий три кнопки. Для этого можно воспользоваться встроенной библиотекой, содержащей множество уже готовых элементов управления. Каждой кнопке назначим следующие дей ствия (сценарии):

Кнопка 1 (открытие окна и загрузка в него файла temp.htm):

} Кнопка 2 (вывод сообщения):

из } Кнопка З (закрытие окна):

} Исходный файл созданного мультфильма сохраним под именем la. Это необходимо, если нам потребуется в дальнейшем модифицировать его. Для вставки мультфильма в необходимо создать файл в формате SWF, то есть файл Этой цели служит операция публикации мультфильма Publish, которая выбирается из меню File (Файл) в главном окне пакета Flash. Параметры публикации можно задать по команде File Publish Settings (Файл Настройка пуб ликации). В соответствующем диалоговом окне можно задать имя вер сию Flash-проигрывателя и другие параметры.

Глава 5. Работа с файловой системой и реестром Windows Операции с дисками, папками и файлами с помощью программ являются очень важными для программистов, поскольку серьезные проекты невозможны без вза имодействия с файловой системой (создание, перемещение, удаление папок и фай лов). В JavaScript эти операции имеют некоторые особенности по сравнению с другими языками.

Доступ к файловой системе с помощью языков на основе сценариев, таких как JavaScript и VBScript, в Windows обеспечивается через объект (FSO — объект файловой системы). Программы на JavaScript и VBScript, исполь зующие этот объект, могут интерпретироваться браузером IE5+, а также систе мой Windows Scripting Host (WSH), встроенной в Windows 98 SE и более позд ние версии (ее также называют Windows Based Script Host).

Операциям с файловой системой, выполняемым браузером пользователя с по мощью сценариев, даже при установленном самом низком уровне безопасности будут предшествовать предупреждающие сообщения о возможных неприятностях.

Предупреждения будут появляться и при работе на локальном без использования сети. Это сделано для того, чтобы недобросовестные посетители Интернета не могли нанести вред компьютеру пользователя. Именно поэтому рекомендуется использовать FSO не на клиентском компьютере, а на сервере (тех нология Active Server Pages, ASP). WSH, в отличие от браузера, позволяет сво бодно использовать FSO на локальном компьютере: вы просто создаете програм му на JavaScript в текстовом файле с расширением js и выполняете ее с помощью так называемого сервера сценариев Windows (файл wscript.exe, расположенный в папке Windows). Эта программа устанавливается по умолчанию как приложе ние для открытия (выполнения) файлов с расширением js. Аналогичная программа для запуска сценариев через командную строку MS DOS представлена файлом cscript.exe.

Следует иметь в виду, что некоторые антивирусные пакеты (например, Norton позволяют и рекомендуют устанавливать блокировку сценариев. Если блокировка установлена, то, в зависимости от настройки, сценарий не будет вы полняться либо будет выводиться окно с предупреждением и предложением вы бора возможных вариантов действий (например, запретить выполнение, разре шить выполнение один раз или всегда и др.).

Программы JavaScript, написанные для выполнения браузером и WSH, во мно гом похожи. Однако имеются и различия. Так, сценарии для браузера размеща 278 Глава 5. Работа с файловой системой и Windows ются в HTML-документе (обычно в контейнере


© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.