Для записи текста в HTML-формате в браузер иногда применяют функцию document.writeln(). Например, можно динамически создавать теги изображений, выводя изображения на экран посредством следующего:
document.open();
document.writeln("<img sr='myimage.gif'>");
document.close();
С помощью JavaScript программ, а в частности при помощи объекта document, можно создавать законченные HTML-документы и другие JavaScript программы. Например:
document.open();
document.writeln("<script “>"+"alert('Hello World!')"+"</script>");
document.close();
Первая строка примера открывает документ для записи. Здесь проблем возникнуть не должно. Наиболее важна вторая строка: в ней в документ выводиться следующая строка:
<script > alert('Hello World!') </script>
Заметим, что данная строка сформирована при помощи операции сложения +. Этот способ удобно применять, когда строки текста программы слишком длинны, чтобы поместиться в редактируемом окне, или когда сложные строки необходимо разбить на несколько простых строк. Как можно видеть данная строка представляет собой код, написанный на языке JavaScript. И этот текст будет интерпретироваться обозревателем как обычный java-код. Аналогичная ситуация была бы, если бы выводимый текст содержал HTML-теги (обозреватель интерпретирует текст, содержащий HTML-теги, именно как код HTML). Именно этот метод write даёт возможность динамически создавать документы.
Для лучшего понимания рассмотрим примеры:
Пример_9
…
<script>
function testloop() {
var String1 = '<hr align="center" width="' ;
document.open;
for (var size = 5; size <= 50; size+=5)
document.writeln (String1+ size+'%">');
document.close;}
</script>
…
Функция testloop() сформирует новый документ. Разберёмся как: переменная String1 содержит следующий текст:
<HR ALIGN="CENTER" WIDTH="
Как видно, данная строка представляет собой HTML-форматирование, которое создаст полоску, расположенную в центре документа, но параметр ширина (WIDTH) не задан. Затем мы открыли документ для записи. В следующей строке организуется цикл по переменной size от 5 до 50 с шагом 5 (итого цикл будет выполнен 10 раз). В теле цикла происходит запись в документ текстовой строки, содержащийся в переменной String1 вместе с переменной size и %, т.е. на первом шаге будет записана такая строка:
<HR ALIGN="CENTER" WIDTH=”5%”>
На втором шаге:
<HR ALIGN="CENTER" WIDTH=”10%”>
И так далее, 10 раз. В результате будет создан документ, содержащий 10 полосок размером от 5 до 50 с шагом 5, расположенных в центре. В конце не забываем закрывать документ. Если просмотреть HTML-код созданного документа, то он будет выглядеть следующим образом.
<hr align="center" width="5%">
<hr align="center" width="10%">
<hr align="center" width="15%">
<hr align="center" width="20%">
<hr align="center" width="25%">
<hr align="center" width="30%">
<hr align="center" width="35%">
<hr align="center" width="40%">
<hr align="center" width="45%">
<hr align="center" width="50%">
Рассмотрим ещё один пример.
Пример 10
Код скрипта выглядит слежующим образом:
<script>
function ftable(inum)
{var iloop = 1;
document.writeln ("Таблица умножения: <b>" + inum + "</b><hr><pre>");
while (iloop <= 10)
{document.writeln(iloop + " x "+ inum + " = " + (iloop*inum));
iloop ++;}
document.writeln("</pre>");}
ftable(prompt ("Введите число: ", 10));
</script>
Данный код состоит из функции FTABLE с параметром INUM и строки, которая вызывает данную функцию. Давайте рассмотрим сначала строку, вызывающую функцию FTABLE.
...
ftable(prompt ("Введите число: ", 10));
...
Как видно, данная функция вызывается со значением парметра, которое будет возвращено методом объекта window – promt. Как мы уже знаем, данный метод возвращает ведённое пользователем значение. По умолчанию значение будет равным 10. Итак, после того как пользователь ввёл начение в диалоговое окно, созданное методом promt, вызывается функция FTABLE с введённым значением. Например, пользователь ввёл число 12. Следовательно, значение переменной inum в функции FTABLE будет равно 12.
Затем, с помощью метода write объекта документ печатается заголовок документа:
…
document.writeln ("Таблица умножения: <b>" + inum + "</b><hr><pre>");
…
Так как, данный метод сохраняет HTML-форматирование, а переменная inum имеет значеие 12, то в окне обозревателя отобразится следующее:
Таблица умножения: 12
и горизонтальная строка, наличие которой обусловлено тегом <HR> в строке параметров метода write.
Затем внутри цикла, который будет выполняться 10 раз по перменной ILOOP (ILOOP изменяется от 1 до 10) выполняется следующая строка:
…
document.writeln(iloop + " x "+ inum + " = " + (iloop*inum));
…
Имено эта строка, по сути, и формирует всю таблицу умножения. Это выполняется следующим образом:
При первом прохождении цикла переменная ILOOP имеет значение 1, то есть печатается 1.
Затем выводиться рядом символ «х», который обеспечивает зрительное впечатление знака умножения.
После выводиться значение переменной INUM, которое равно 12 (см. выше).
Печатается знак равенства – «=».
И после знака равенства, выводиться значение результата умножения переменной ILOOP и INUM, то есть 1*12=12.
Затем всё повторяется, но уже с увеличенным значением переменной ILOOP (до тех пор, пока ILOOP не станет равной 10).
Пример_11
Предположим, что мы задали атрибуты тега body следующим образом:
<body
bgcolor="red"
text="white"
link=#FFEBCD
vlink="red"
alink=#FFEBCD
LEFTMARGIN=10
rightmargin="100"
topmargin="20"
bottommargin="20"
scroll="yes" >
</body>
Тогда рассмотрим действие следующего скрипта:
<script>
function def()
{
f.outerHTML="Bgcolor = " +document.body.bgcolor+
'<br>'+"Text = " +document.body.text+'<br>'+
"Link = " +document.body.link+'<br>'+
"Vlink = " +document.body.vlink+'<br>'+
"Alink = " +document.body.alink+'<br>'+
"Leftmargin = " +document.body.LEFTMARGIN+'<br>'+
"Rightmargin= " +document.body.RIGHTMARGIN+'<br>'+
"Topmargin = " +document.body.TOPMARGIN+'<br>'+
"bottommargin= " +document.body.bottommargin+'<br>'+
"Scroll = " +document.body.scroll+'<br>';
}
Как видно мы используем в первой строке функции DEF() свойство outerHtml объекта с именем (идентификатором) F (просмотрев HTML-код увидим, что это абзац, для вывода текста.). Используя это свойство, мы сможем вывести необходимый нам текст, с любым HTML- форматированием в абзац, с именем F. А выводим мы следующий текст:
“Bgcolor = “ +document.body.bgcolor+ “<br>”
Т.е. выводится символьная строка «BGCOLOR =», затем выводиться значение, которое нам вернёт свойство BGCOLOR, объекта BODY, который как мы уже знаем, является дочерним объектом объекта document, (дальше мы не будем на это акцентировать внимание). Таким образом, мы должны получить значение фонового цвета. Как показывает пример, мы действительно получили значение цвет в шестнадцатеричном формате. Символьная строка “<BR>” используется для перевода на следующую строку при выводе новой строки.
Следующая строка выглядит следующим образом:
“Text = ” +document.body.text+'<br>'
Т.е. после строки «Text = » выведется значение атрибута text объекта body.
И так далее. Таким образом, мы получим значения всех атрибутов тега-объекта body.
Используя эти же свойства, мы можем менять значения атрибутов тега BODY. Это демонстрирует следующий скрипт:
…
function change()
{document.body.text=coltext.value;
document.body.bgColor=colstr.value;
document.body.leftMargin=lgr.value;
document.body.rightMargin=Pgr.value;
document.body.topMargin=Vgr.value;
document.body.bottomMargin=Ngr.value;
document.body.scroll=Scr.value;
def()}
…
Каждому свойству объекта body присваивается определенное значение (в данном случае значения берутся из элементов форм, предназначенных для ввода текстовой информации). После переприсваивания снова вызывается функция def(), чтобы обновить новые значения атрибутов тега body.
Разберём ещё один небольшой пример.
Пример_12
На странице имеется четыре гиперссылки, созданных следующим образом:
…
<p><a href="javascript:showTopic(1)"> Пункт 1 </a></p>
<p><a href="javascript:showTopic(2)"> Пункт 2 </a></p>
<p><a href="javascript:showTopic(3)"> Пункт 3 </a></p>
<p><a href="javascript:showTopic(4)"> Пункт 4 </a></p>
При щелчке на той или иной ссылку будет вызвана функция ShowTopic с параметром, указывающим на номер нажатой гиперссылки. Текст функции выглядет следующим образом:
…
function showTopic(n)
{ var cdesc;
switch (n)
{case 1:
cdesc="Пункт первый: <big> большой </big> и <b>страшный</b>";
break;
case 2:
cdesc="Пункт второй: <small> маленький </small> и <i>смешной</i>";
break;
case 3:
cdesc='Пункт третий: <font color="red"> внимание <font>!!!'
break;
case 4:
cdesc='Пункт четвёртый: толска <font color="green"> зелёная <font>!!!'
break;
default:
cdesc="<U> По гиперссылкам </u> щёлкать надо" }
desc.innerHTML=cdesc;}
Легко видеть, что в зависимости от значения параметра n переменной cdesc будет присвоено одно из текстовых значений, причём текстовый значения содержат и HTML – форматирование. Данное текстовое значение присваивается свойству innerHtml объекта, с именем desc (абзац, для вывода сообщения). Таким образом, в зависимости от нажатой ссылки, будет выведено сообщение, содержащее различное HTML-форматирование.
Рассмотрим пример на работу с изображениями. Как известно изображения на странице представлены тегом <img>. Зная это, мы можем работать с изображением на странице как с объектом. Получить доступ к всем изображениям в HTML –странице можно используя коллекцию Images
Пример_13
Изначально на странице расположено два парных рисунков:
<TABLE cellSpacing=2 cellPadding=2 width=100 border=2>
<tr><td>
<p onmouseover="msover('roll','pic/i3.gif');" onmouseout="msout('roll','pic/i2.gif');">
<IMG height=100 src="pic/i1.gif" width=100 border=0 name=image1></p>
</td>
<td>
<IMG height=100 src="pic/i2.gif" width=100 border=0 name=roll>
</td></tr></table>
<P>Cмена двух картинок<BR>
<TABLE cellSpacing=2 cellPadding=2 width=100 border=2>
<tr><td>
<p onmouseover="msover2('image2','pic/i4.gif','roll2','pic/i3.gif');
"onmouseout="msout2('image2','pic/i1.gif','roll2','pic/i2.gif');" >
<IMG height=100 src="pic/i1.gif" width=100 border=0 name=image2></p>
</td><td>
<IMG height=100 src="pic/i2.gif" width=100 border=0 name=roll2>
</TD></TR></TABLE>
Нет необходимости вдаваться в подробности HTML-форматирования, для нас важно следующее:
есть абзац, помеченный тегом <p>, для этого абзаца заданы два обработчика событий: onmouseover и onmouseout. Событие onmouseover наступает когда пользователь помещает курсор на элемент страницы, событие onmouseout наступает когда пользователь убирает курсор мыши с элемента. Для этих двух событий заданы два обработчика в виде функций: msover и msout (т.е. эти функции будут вызваны при наступлении соответствующих событий). В этом абзаце расположен рисунок с именем Image1 и адресом – источником pic/i1.gif. Таким образом, при наведении на рисунок с именем Image1 будет вызвана функция msover с параметрами 'roll','pic/i3.gif'. А эта функция делает следующее:
function msover(img,ref)
{document.images[img].src = ref;}
Т.е. данная функция элементу с именем, содержащимся в переменной Img коллекции Images (коллекция изображений) присваивает значение адреса равное значению, содержащемуся в переменной Ref. Таким образом, с учётом переданных параметров, объект-изображение с именем roll получит значение атрибута src равное pic/i3.gif – по сути в объект-изображение с именем roll будет загружено новое изображение с именем файла i3.gif. А если посмотреть на HTML код, то видно, что изображение с именем roll – это соседнее изображение с именем файла i2.gif. Т.е. при наведении курсора на первое изображение, будет изменено изображение во второй картинке. Чтобы вернуть прежнюю картинку если пользователь уберёт указатель мыши с первого изображения, предназначена вторая функция. Она будет вызвана, когда курсор мыши покинет первый рисунок.
function msout(img,ref)
{document.images[img].src = ref;}
Это функция вызывается со следующими параметрами: roll, pic/i2.gif. Данная функция аналогична предыдущей, по сути можно было бы использовать и предыдущую функцию с новыми параметрами, но вторая функция введена для наглядности. В этой функции тому же объекту-изображению с именем roll, атрибуту src присвоено прежнее значение – i2.gif. Т.е. при вызове данной функции будет восстановлена прежняя картинка.
Аналогично проводится работа с двумя другими картинками: но при наведении на первую (третью) картинку смена изображений происходит сразу в обоих картинках. За это отвечают функции msover2 и msout2, содержащие больше параметров:
function msover2(img1,ref1,img2,ref2)
{document.images[img1].src = ref1;
document.images[img2].src = ref2;}
function msout2(img1,ref1,img2,ref2)
{document.images[img1].src = ref1;
document.images[img2].src = ref2;}
Первый и второй параметр указывают на первую (третью) картинку и адрес ресурса изображения; третий и четвёртый параметры предназначены для смены изображения во второй (четвёртой ) картинке – указывают на имя второго (четвёртого) изображения и определяют адрес источник файла для этого изображения. Смена происходит аналогично, как и в первом случае: через коллекцию объектов Image и их свойства src.
В дальнейшем мы будем знакомиться с новыми свойствами и методами объекта document, а теперь перейдём к следующему объекту – location.