Методи об'єкта document

clear () очистка поточного документа (у деяких броузерах цей метод працює некоректно, тому рекомендується очищувати вікно методами open() і close());

ореn () відкриває документ для запису;

write (string) запис рядка string в документ. У рядку може знаходитись як звичайний текстовий рядок, так і HTML-

код, і, навіть, цілий HTML-документ зі сценаріями. У процесі запису перехід на новий рядок не відбувається;

writeln () працює аналогічно до методу write(), проте після виводу текстового рядка у вікно броузера автоматично виконується перехід на новий рядок;

close () закриває документ для запису.

Оскільки методи write() i writeln() записують текст в броузер у HTML-форматі, можна створювати будь-який HTML-документ динамічно, включаючи готові програми мовою JavaScript. Наприклад, наступний фрагмент коду очистить поточний документ і створить новий порожній документ, який виводить вікно із повідомленням:

Лістинг 2.8

document.ореn ();

document.writeln("<SCRIPT>"+

"alert('Hello World! ' )" +

"</SCRIPT>");

document.close ();

На завершення подамо код двох HTML-документів, в яких використано сценарії, що часто використовуються на Web-сторінках.

У наступному прикладі створюється зображення, яке буде реагувати на наведення миші і змінюватись на інше. Якщо декілька таких зображень об'єднати разом, то можна отримати гарне і функціональне меню:

Лістинг 2.9

<HTML>

<HEAD>

// спочатку завантажуємо необхідні зображення

image1 =new Image ();

image1.src="main1. gif"

image2=new Image ();

image2.src="main2.gif"

//функція міняє місцями зображення,

// імена яких передаємо в параметрах

function change(x, y)

{

if (document.images)

document.images[x].src=eval(y+.src)

// метод eval дозволяє обчислювати вирази,

// які можуть містити змінні та властивості об'єктів.

}

</SCRIPT>

</HEAD>

<BODY>

<IMG SRC="main1.gif" NAME="image"

onMouseOver="change('image','image2')"

onMouseOut="change('image','image1')">

</BODY>

</HTML>

У наступному прикладі використано скрипт, розв'язання стандартної задачі «біжучий рядок».

Лістинг 2.10

<HTML>

<HEAD>

<ТІТLЕ>Біжучий рядок</ ТІТLЕ >

<!--

var pos=1;

var text= "JavaScript-потужний інструмент"

+ "Web-програмування";

function scroll1 ()

//документ буде містити форму running і текстове

//поле в ній - text

//виділимо підрядок із цього поля

document, running.text.value=text.substring(0,pos);

if(pos>=text.length)

{

pos=1;

window. setTimeOut('scrollin2()', 300);

}

else

{

pos++;

window. setTimeOut(' scroll1!(), 50);

}

function scrooll2()

document, running.text.value=text.substring(pos, text.length);

if (pos>=text.length)

{

pos=1;

window.setTimeOut('scrol!2()',50);

}

</SCRIPT>

</HEAD>

</CENTER>

</FORM>

</BODY>

</HTML>