Стефан Кох - Введение в JavaScript для Мага

В скрипте мы определяем переменную myWin . И с ее помощью можем получать доступ к новому окну. Обратите пожалуйста внимание, что в данном случае мы не можем воспользоваться для этой цели именем окна ( displayWindow ).

После того, как мы открыли окно, наступает очередь открыть для записи объект document. Делается это с помощью команды:

// открыть объект document для последующей печати

myWin.document.open();

Здесь мы обращаемся к open() — методу объекта document. Однако это совсем не то же самое, что метод open() объекта window! Эта команда не открывает нового окна — она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку myWin , чтобы получить возможность писать в новом окне.

В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:

// генерировать новый документ

myWin.document.write("

myWin.document.write("

");

Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML! При этом Вы можете использовать абсолютно любые тэги HTML.

По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой:

// закрыть документ — (но не окно!)

myWin.document.close();

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

parent.frame2.document.open();

parent.frame2.document.write("Here goes your HTML-code");

parent.frame2.document.close();

Динамическое создание VRML-сцен

Чтобы продемонстрировать гибкость языка JavaScript, давайте теперь попытаемся динамически создать сцену на языке VRML. Напомним, что аббревиатура VRML расшифровывается как язык моделирования виртуальной реальности . То есть это язык для создания трехмерных сцен. Можно, например, взять очки виртуальной реальности и наслаждиться прогулкой по таким сценам… Возьмем самый простой пример — голубой куб.

Тем не менее, чтобы рассмотреть его, понадобится программная приставка VRML к Вашему браузеру (plug-in). Предлагаемый Вашему вниманию скрипт не проверяет, а доступен ли браузеру plug-in VRML (впрочем сделать это — вовсе не проблема).

Исходный код скрипта:

function vrmlScene() {

vrml= open("", «displayWindow»,

"width=500,height=400,status=yes,toolbar=yes,menubar=yes");

// открыть document для последующего вывода информации

vrml.document.open("x-world/x-vrml");

vr= vrml.document;

// создать сцену VRML

vr.writeln("#VRML V1.0 ascii");

// Освещение

vr.write("Separator { DirectionalLight { ");

vr.write("direction 3–1 -2.5 } ");

// Камера

vr.write("PerspectiveCamera { position -8.6 2.1 5.6 ");

vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 ");

vr.write("focalDistance 10.84 } ");

// Куб

vr.write("Separator { Material { diffuseColor 0 0 1 } ");

vr.write("Transform { translation -2.4.2 1 rotation 0 0.5 1.9 } ");

vr.write("Cube {} } }");

// Закрыть document — (но не окно!)

vrml.document.close();

}

// — >

Как видно, текст скрипта совершенно такой же, как и в предыдущем примере. Сперва открывается новое окно. Затем мы открываем document для вывода него информации. Рассмотрим поподробнее соответствующую команду:

// открыть document для последующего вывода информации

vrml.document.open("x-world/x-vrml");

В предыдущих примерах мы не указывали в скобках ничего. Что же тогда означает новая запись "x-world/x-vrml" ? На самом же деле, с помощью этой инструкции мы задаем тип MIME для документа, который хотим создать. То есть, тем самым мы сообщаем браузеру, какого типа данные будут ему сейчас переданы. Если же мы в этом месте не определили в скобках конкретный тип MIME, то по умолчанию для нового документа будет выбран тип "text/html" (а это как раз и есть тип MIME для файлов HTML).

(Есть несколько способов выяснить, что же означает тот или иной тип MIME — в самом же браузере содержится список распознаваемых MIME. Вы можете извлечь этот список из пунктов меню option или preference.)

Для создания трехмерной сцены мы должны составить инструкцию vrml.document.write() . Но поскольку это кажется слишком длинным, то мы просто определяем переменную vr= vrml.document . И затем вместо vrml.document.write() мы пишем просто vr.write() .

Закончив это, мы можем писать обычные инструкции на языке VRML. Я не собираюсь описывать здесь элементы сцен VRML. А для желающих познакомиться с ними в Интернет имеется несколько хороших источников информации. Обычный же текст на языке VRML выглядит следующим образом:

#VRML V1.0 ascii

Separator {

DirectionalLight { direction 3–1 -2.5 }

PerspectiveCamera {

position -8.6 2.1 5.6

orientation -0.1352 -0.9831 -0.1233 1.1417

focalDistance 10.84

}

Separator {

Material {

diffuseColor 0 0 1

}

Transform {

translation -2.4.2 1

rotation 0 0.5 1.9

}

Cube {}

}

}

А это как раз и есть тот код, который мы выводим на экран с помощью команды document.write() .

Впрочем, совершенно бессмысленно динамически создать сцену, которую с тем же успехом можно загрузить и как обычный VRML-файл (cube.wrl). Интереснее будет, если Вы, например, сделаете форму, где пользователь будет иметь выбор из различных объектов — например, между сферой, цилиндрому, конусом и т. д. — а JavaScript на основе этих данных всего лишь сгенерирует соответствующую трехмерную сцену (например, так я поступаю в своей книге о JS).

Строка состояния

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

Данный скрипт выглядит следующим образом:

function statbar(txt) {

window.status = txt;

}

// — >

Итак, мы создаем форму с двумя кнопками. Обе эти кнопки вызывают функцию statbar(). Вызов от клавиши Писать! выглядит следующим образом:

statbar('Привет! Это окно состо\яни\я!);

В скобках мы написали строку: 'Привет! Это окно состо\яни\я! . Это как раз и будет текст, передаваемый функции statbar(). В свою очередь, можно видеть, что функция statbar() определена следующим образом:

function statbar(txt) {

window.status = txt;

}

В заголовке функции в скобках мы поместили слово txt . Это означает, что строка, которую мы передали этой функции, помещается в переменную txt .

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