JavaScript: Генерация HTML кода
После того, как мы с вами немного познакомились с основами программирования
на JavaScript (см. Замечания
по JavaScript для начинающих), перейдем к непосредственному использованию
полученных знаний (неиспользованное знание, как деньги в чулках - голова болит,
а пользы никакой). Чаще всего я применяю такую возможность JavaScript, как генерация
HTML кода на лету то же самое делается и с использованием серверных технологий
(CGI, PHP, SSI и т.д.), но, как правило, для других целей.
Если вы не знаете структуру HTML файла (теги, стили и все остальное), то читать
дальше не имеет смысла, поскольку все равно применить это вы не сможете (на самом
то деле мне не слишком то верится, что человек, решивший изучить JavaScript, не
знает хоть немного HTML). Так что будем исходить из предположения о том, что такие
знания у вас имеются. Лично я знаю три способа генерации HTML кода при помощи
javascript:
Во-первых, это само собой непосредственная генерация HTML кода еще в процессе
формирования страницы, то есть во время формирования HTML документа по запросу
к нему. Подобный вариант применен в моем дипломе (http://gnezdo.webscript.ru/design/article/www.kubsu.ru/~mschool/webtest/indtest1.htm
при формировании статистики по прохождению теста.)
Во-вторых, уже в процессе работы пользователя со страницей (или до начала таковой
после загрузки документа по желанию создателя) - создание нового окна с пустым
документом, куда на чистое поле заносится все, что пожелает автор (опять же нечто
подобное реализовано в моем дипломе при прохождении тренировки или непосредственно
теста, точнее при окончании таковых).
И соответственно, третье применение - при записи некоторой информации в слои,
что широко реализовано на моем сайте, http://pavlenty.by.ru/
(на основной странице и в разделе "ссылки").
Пару слов о мазохизме...
Более подробно о реализации этих возможностей я напишу чуть ниже, а пока хотелось
бы сделать пару замечаний, которые существенно облегчат вам жизнь и размер вашей
странички (при тех же, если не лучших возможностях).
Хотелось бы вернуться к истории того, как я до этого доходил: передо мной стояла
задача реализовать статистику на сайте диплома, причем использовать CGI было нельзя
(точнее можно было использовать только один скрипт, записывающий в некий файл
необработанные результаты тестирования (нам по блату маленький такой скриптик
написали)). До меня с подобной проблемой обходились первобытно-элементарно - перебивали
все результаты работы с тестом (разумеется пальчиками) в Excel-таблицу, после
чего данная таблица перегонялась в HTML. А вы знаете, как Microsoft любит везде
где нужно и не нужно пихать упоминание о себе? Да еще и вставлять кучу никому
ненужной информации (особенно это сказывается на результирующих исходниках HTML,
для которых размер является одним из важнейших параметров, влияющих на скорость
загрузки). Так вот, после подобной экзекуции создавался файл, размером около 80Кб
и это для 59 учащихся. Не слабо, если еще учесть, что данная информация была на
все 100% статической (если захочешь что-то изменить, то милости прошу в Excel,
либо копайся в HTML). Мне такой вариант никак не подходил (поскольку я человек
по натуре ленивый и не люблю делать работу, которая через 15 мин будет уже никому
не нужна, а потратить на нее приходится не менее 1.5 часа) из-за его абсолютной
несостоятельности. И сел я изучать скрипты (честно признаюсь, не все было так
легко, поскольку нормальной инфы никогда по скриптам не находил - может плохо
искал? Кое-что из того, что мне удалось узнать или придумать, я и покажу сейчас
вам.
Опознанный Подопытный Объект... ОПО!
В предыдущей статье я говорил об объекте document. Вот именно с ним мы и будем
работать при чистой генерации HTML (я говорю о первом и втором вариантах). Есть
у данного объекта четыре метода, которые нам и понадобятся:
- document.open()
- document.close()
- document.write(param)
- document.writeln(param)
document.open() - открытие документа для записи. При этом все, что было
в данном документе теряется безвозвратно. Я так ни разу и не применил данный метод,
впрочем, как и следующий.
document.close() - закрытие документа. После этого вносить какие-либо
изменения в данный документ уже невозможно. Точнее можно, но все записанные ранее
данные будут утеряны. При создании нового документа (в том числе и в процессе
его загрузки до завершения таковой) он открывается для записи. Если документ загружается,
то при возникновении события onload (при полном завершении загрузки страницы,
со всеми картинками и прочими присоединениями) документ закрывается для записи.
document.write(param) - запись в текущее положение текста (возможно
содержащего теги), определенного в строковой переменной param (как говорилось
в предыдущей статье, если нам это нужно, то и числа тоже могут быть строками,
нам за этим и следить даже не нужно). На самом деле все заносится во временный
поток, на основе которого и создается результирующая HTML страница. Принцип здесь
как при работе с текстовым файлом - занесли некоторую последовательность символов
начиная с текущего положения курсора и установили новое его положение справа от
последнего веденного символа.
document.writeln(param) - все как и у document.write(param),
единственное отличие в том, что курсор при этом переводится на следующую строку
(это имеет смысл в том случае, когда вы генерируете JavaScipt код без завершающих
";" или стили (на самом деле, стили можно создавать непосредственно при помощи
JavaScript, но об этом в другой раз).
Как вы наверное уже успели догадаться, мы будем работать с двумя последними
методами (я работаю в основном с document.writeln(param)) и здесь хотелось
бы рассказать про один маленький штришок. На самом деле не очень удобно набирать
document.writeln("Что-нибудь") каждый раз, как только собираемся что-либо
вносить (а генерация вряд ли обойдется парочкой вызовов этого метода), поэтому
как-то хотелось бы облегчить себе жизнь. Для этого мы описываем в заголовке документа
нашу функцию:
<script>
function dw(txt){document.writeln(txt)}
</script>
И вот к ней уже и обращаемся при необходимости вызова данного метода: dw("Что-нибудь").
Еще один способ немного облегчить себе жизнь, это занесение всего, что собираемся
сгенерировать в строковую переменную, а потом уже выдаем ее как параметр методу:
z="<h1>Заголовок</h1>"
for (i=2; i<=6; i++) z+="<h"+i+">"+i+"-ая строка"
document.writeln(z)
Посмотреть в действии!
Таким образом мы можем сгенерировать любую(!) последовательность HTML кода
на своей страничке еще в процессе ее загрузки. Теперь рассмотрим, что же нам нужно
изменить, для того, чтобы динамически создать окошко и в него внести уже все,
что мы не пожелаем (улучшение реакции на действия пользователя, в конце концов
в основном именно для него мы и создаем все эти примочки). Для этого нам необходимо
прежде всего открыть новое окошко:
winname=window.open("") - здесь winname - имя объекта "окно", с которым мы
и будем в дальнейшем работать Теперь для того, чтобы записать туда что-либо нам
необходимо лишь слегка модифицировать нашу функцию dw(txt следующим образом:
<script>
function dw(txt){winname.document.writeln(txt)}
</script>
То есть для того, чтобы что-то записать в дочернее окно (а именно таковым оно
и является по отношению к создавшему его окну), необходимо просто перед объектом
document поставить его имя, и потом можем делать с его внутренностями все,
что влезет в наши коварные мысли. Если возникнет большое желание, то можно даже
закрыть его после всех изменений winname.document.close(), но это на любителя,
поскольку все изменения итак неплохо в нем отобразятся. См. пример:
- Пример 1
-
Пример 2
Слоенный HTML или тортик для вебмастера...
А теперь давайте рассмотрим, как можно генерировать текст HTML и вставлять его
"не отходя от кассы" в слои. Для начала давайте рассмотрим, как можно добраться
до слоя в Эксплорере (в Нетскейпе немного по-другому, но для него я не пишу, поскольку
он уже свое отыграл на данный момент.
У каждого слоя, к которому вы хотите обратиться, должен быть свой уникальный ID
(идентификатор). Пример описания слоя с идентификатором:
<div ID='mylayer1' style="position:absolute; top:30px; left:30px">Содержимое
слоя</div>
Теперь мы можем обратиться к данному слою из JavaScript'а следующим образом:
document.all.mylayer
Нас в данном случае интересует атрибут данного объекта innerHTML, в который
мы в любое время можем заносить наш HTML текст. Например:
Посмотреть!
Здесь будет указано время
Точно такой же подход реализован в скрипте №1 - шрифты, где генерируется HTML
код на лету (*: Речь идет об одном из скриптов Автора). Там же есть
и такая возможность, не нашедшая отображения в самом скрипте, но имеющаяся в исходнике
(нужна была для отладки, а убирать не стал):
У слоя есть еще такой атрибут innerText, содержимое которого на самом деле
является и содержимым innerHTML, что позволяет нам сначала создать HTML
текст в слое, а затем его оттуда считать уже как обычный (теги будут отображаться
как текст, что позволяет нам просмотреть всю структуру). Как это применить на
деле, я пока еще не придумал.
Ну вот пожалуй и все, что я хотел сказать по этому поводу.
Автор статьи: Pavlenty
Информация взята с сайта pavlenty.by.ru
|
|