Динамическое создание документов
Теперь рассмотрим, как с помощью JavaScript можно динамически создавать новые документы. То есть новая HTML-страницf будет формироваться в зависимости от различных ситуаций по заданным вами параметрам. Например, бывает необходимо оптимизировать страницу для различного разрешения экрана. Или вам захотелось, чтобы вид документа менялся в зависимости от определенной даты. Но для начала создадим простой HTML-документ, который будет выводиться в новом окне. Рассмотрим следующий скрипт:
<html>
<head>
<script language="JavaScript">
<!--
function NewWin()
{
// создать новое окно
NewDoc=window.open("", "NewWindow",
"width=500,height=200,status=yes,toolbar=yes,menubar=yes");
// открыть объект document для последующей печати
NewDoc.document.open();
// генерировать новый документ
NewDoc.document.write("<html>");
NewDoc.document.write("<head>");
NewDoc.document.write("<title>Пример динамического ");
NewDoc.document.write("создания документов</title>");
NewDoc.document.write("</head>");
NewDoc.document.write("<body>");
NewDoc.document.write("<center>");
NewDoc.document.write("<font size=+3>");
NewDoc.document.write("Этот HTML-документ создан ");
NewDoc.document.write("с помощью JavaScript!");
NewDoc.document.write("</font>");
NewDoc.document.write("</center>");
NewDoc.document.write("</body>");
NewDoc.document.write("</html>");
// закрыть документ - (но не окно!)
NewDoc.document.close();
}
// -->
</script>
</head>
<body>
<center>
<input type=button value="Новый документ" onClick="NewWin()">
</center
</body>
</html>
Пример выполнения данного скрипта представлен на рисунке 11.
Рисунок 11 – Динамическое создание документа
В данном примере формирование нового документа выполняется функцией NewWin(). Рассмотрим ее действие. Сначала с помощью метода open() открывается новое окно браузера. Первый параметр метода является пустой строкой (""), так как мы не желаем в данном случае указывать конкретный адрес URL. После того, как мы открыли окно, наступает очередь открыть для записи объекта document. Делается это с помощью команды:
// открыть объект document для последующей печати
NewDoc.document.open();
Здесь мы обращаемся к open() – методу объекта document. Однако это совсем не то же самое, что метод open() объекта window. Эта команда не открывает нового окна – она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку NewDoc, чтобы получить возможность писать в новом окне. В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:
// генерировать новый документ
NewDoc.document.write("<html>");
NewDoc.document.write("<head>");
NewDoc.document.write("<title>Пример динамического ");
NewDoc.document.write("создания документов</title>");
NewDoc.document.write("</head>");
NewDoc.document.write("<body>");
NewDoc.document.write("<center>");
NewDoc.document.write("<font size=+3>");
NewDoc.document.write("Этот HTML-документ создан ");
NewDoc.document.write("с помощью JavaScript!");
NewDoc.document.write("</font>");
NewDoc.document.write("</center>");
NewDoc.document.write("</body>");
NewDoc.document.write("</html>");
Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML. При этом Вы можете использовать абсолютно любые тэги HTML. По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой:
// закрыть документ – (но не окно!)
NewDoc.document.close();
Теперь нам только остается в нужном месте вызвать функцию командой
<input type=button value="Новый документ" onClick="NewDoc()">
или, например, указав ссылку:
<a href='javascript:NewDoc()'>Новый документ</a>
Переменные в JavaScript
В JavaScript не существует таких понятий переменных, как в обычных языках программирования. Все переменные, пусть они даже являются целыми числами, считаются строковыми или так называемыми литералами.
Целые числа
Целые числа это типа 123, 15, -2. Как и везде могут задаваться в разных основаниях счисления: в десятичном, шестнадцатеричном и восьмеричном.
<script language="JavaScript">
<!--
i=16;
document.write("i=",i,"<br>");
i=0x10;
document.write("i=",i,"<br>");
i=020;
document.write("i=",i,"<br>");
//-->
</script>
Вещественные числа
Пример скрипта с вещественными числами:
<script language="JavaScript">
<!--
i=13.141516;
document.write("i=",i,"<br>");
i=13141516e-6;
document.write("i=",i,"<br>");
i=.13141516e+2;
document.write("i=",i,"<br>");
//-->
</script>
Строковые переменные
Строки задаются так же как в языке Си. Могут заключаться в одинарные и двойные кавычки, разницы нет. При этом все кавычки внутри строки надо делать через "\".
i='true "or" false';
document.write("i=",i,"<br>");
i="true \"or\" false";
document.write("i=",i,"<br>");
Этот код выведет две строки:
true "or" false
Обратите внимание на использование кавычек!!!
Операции в языке
Нам осталось только рассмотреть операции сравнения и присваивания, так что давайте приступим к ним.
Таблица 3 – Операции сравнения
| < | Меньше |
| > | Больше |
| <= | Меньше либо равно |
| >= | Больше либо равно |
| == | Равно |
| != | Неравно |
| ?: | Условный выбор |
Все операции сравнения возвращают логический тип, т.е. true или false. Очень интересно использование условного выбора, который является достаточно сложным оператором. Даже в Си программах его используют не все программисты.
Перед знаком вопрос идет логическое условие, а затем два блока программы, разделенных двоеточием. Смысл в том, что если условие верно, то выполняется первый блок, иначе блок идущий после разделителя. Можно рассмотреть небольшой пример.
temperature = (gradus<=10) ? "cold" : "hot";
В этом примере если значение переменной gradus будет меньше 10, то temperature получит значение "cold", иначе "hot".
При создании больших логических выражений требуются сравнивать логические величины. Для этого служат логические операции сравнения И и ИЛИ, они обозначаются как &&(И) и ||(ИЛИ).
Таблица 4 – Операции присваивания
| = | обычная операция присваивания |
| +=, -= | присваивание со сложением или вычитанием |
| *=, /=, %= | присваивание с умножением или делением |
| <<=, >>=, >>>= | присваивание со сдвигами |
| &=, |=, ^= | присваивание с побитовыми операциями |
Все операции, кроме первой, являются некими расширителями возможностей языка, которые позволяют короче записать операцию присваивания.
Краткость заключается в том, что если Вам надо выполнить операцию присваивания A=A+B Вы можете ее записать гораздо короче A+=B. Так же работают все остальные операции.
Как и в любом другом языке программирования очень важными являются операторы создания циклов. Циклы бывают нескольких типов: с предусловием, с постусловием и заданными параметрами. В JavaScript реализованы только два типа циклов: с предусловием и заданными параметрами.
Операторы языка
Цикл с параметрами записывается следующим образом:
for (нач_знач; условия; приращение)
//..блок операторов..
};
Данный цикл выполняется заданное количество раз. Начальные значения переменных цикла задаются выражением нач_знач. Условия задают условия выхода из цикла и записываются в виде логических выражений. Выражение приращение задает изменение параметров цикла за одну итерацию.
Пример:
for (k=1;k<10;k+=2) {document.writeln("<br>K=",k);
};
for (i=0,j=2;i<10,j<5;i++,j++) {
document.writeln("<br>I=",i," J=",j)
};
Условный оператор
Последним важным оператором языка является условный оператор, который позволяет разветвить программу в зависимости от какого-либо условия. Записывается он следующим образом:
if (условие) {
// код для истинного условия
}
else
{
// код для ложного условия
};
Данный оператор также может быть записан более коротко без использования else:
if (условие) {
// код для истинного условия
};
Этот оператор используется очень часто и даже является составной частью циклов.
Объектная модель
Структура документа HTML, и вобщем-то сам язык, обязывает браузер иметь некую объектную модель, с помощью которой доступ ко всем объектам был бы прост.
В JavaScript за область html документа отвечает объект document. Он также является самым главным среди всей иерархии объектов браузера, к которым Вы способны обратится посредством скрипта. Этот объект позволяет получить доступ ко всем элементам страницы, таким как формы, изображения, ссылки и т.д.
При создании страницы браузер нумерует все элементы и создает из них массив, хотя правильнее сказать такая структура предназначена для самого скрипта и облегчения работы с объектами. Давайте рассмотрим пример:
<html>
<body>
<img src=0.gif alt="images[0]"><br>
<img src=1.gif alt="images[1]"><br>
<img src=2.gif alt="images[2]"><br>
<form>
<input type=text>
</form>
<img src=3.gif alt="images[3]"><br>
<form>
<input type=text>
</form>
</body>
</html>
Из всего документа браузер создает несколько массивов объектов. Вот какие эти массивы:
- Массив форм документа – forms.
- Массив элементов формы – elements.
- Массив элементов для выбора тега <select> – options.
- Массив изображений документа – images.
- Массив якорей документа – anchors.
- Массив гиперссылок документа – links.
Каждый такой массив содержит в себе все соответствующие элементы документа. Нумерация в массивах начинается с 0. Чтобы получить, например, доступ к самому первому изображению в документе нужно составить такое имя:
document.images[0]
В примере выше, чтобы показать какое изображение какой имеет номер приписывался атрибут alt.
Для того чтобы облегчить доступ к объектам в html существует атрибут тега name. Если Вы напишете так:
<img src=1.gif name=ris1 alt="images[1]">
То после такого определения тега изображения Вы сможете обращаться к изображению 1.gif двумя способами:
document.images[1]
или
document.ris1
Как видите для простоты и мобильности правильнее будет использовать атрибут name для всех тегов, к которым впоследствии Вы планируете обращаться внутри сценариев JavaScript.