|
|
|
|
Для того чтобы использовать обратный слеш внутри строки необходимо использовать двойной обратный слеш. Например, чтобы определить путь к файлу (c:\temp) как строку следует указать var home = "c:\\temp"
1.2 Выражения и простые операторы. Выражение - любой, имеющий значение набор литералов, переменных, операторов, и выражений, который приводит к единственному значению. Значение может быть числом, строкой или Boolean. Специальное ключевое слово null обозначает пустое значение. Следует различать null и переменные, которым не были присвоены значения, последние не определены и будут вызывать ошибку во время выполнения, если используются как числовые переменные. Однако элементы массива, которым не было присвоено значение оцениваются как false. В следующем примере исполняется оператор str="Hello !", потому что элемент массива не определен: myArray=new Array() if (!myArray["notThere"]) str="Hello !" Условное выражение может иметь одно из двух значений, в зависимости от условия. Его синтаксис таков: (condition)? value1: value2 Если условие (condition) истинно, выражение имеет значение value1, иначе - value2. Можно использовать условное выражение везде, где допустимо стандартное выражение. Например, status = (age >= 50) ? "old" : "young" Оператор присваивания (=) присваивает значение правого операнда левому. То есть x =y присваивает x значение y. Существует сокращенная форма оператора присваивания, общий вид которой: <переменная> <знак операции> = <выражение> при этом подразумевается выполнение следующего оператора присваивания: <переменная>=<переменная><знак операции><выражение> Знаком операции могут быть: +(сложение), -(вычитание), *(умножение), /(деление), %(деление по модулю), <<(сдвиг влево), >>(сдвиг вправо), >>>(сдвиг вправо с заполнением нулями), &(побитовое И), ^(побитовое исключающее ИЛИ), |(побитовое ИЛИ). Операторы сравнения сравнивают операнды и возвращают логическое значение, основанное на истинности сравнения. Операнды могут быть числовые или строковые. Когда используются строковые значения операндов, сравнение проводится с помощью стандартного лексикографического анализа. Операторы приведены в следующей таблице:
1.2.4 Арифметические операторы. Стандартные арифметические операторы - сложение(+), вычитание(-), умножение (*) и деление (/). Эти операторы работают также, как и в других языках программирования. Деление по модулю (%). Оператор деления по модулю используется следующим образом:var1 % var2, возвращается остаток от деления var1 на var2. Например, 12%5 возвращает 2. Приращение(++)(инкремент). Оператор приращения используется следующим образом: var++ или ++var. Этот оператор увеличивает (добавляет единицу) операнд и возвращает значение. Если используется постфиксная форма, то сначала возвращается значение, затем происходит увеличение. При использовании префиксной формы сначала происходит увеличение, затем возращение значения. Например, если x=3, тогда выражение y=x++ приведет к тому, что у=3 и х=4, а выражение у=++х к тому, что х=4 и у=4. Уменьшение(--)(декремент). Оператор уменьшения используется следующим образом: var -- или --var. Этот оператор уменьшает (вычитает единицу) операнд и возвращает значение. Если используется постфиксная форма, то сначала возвращается значение, затем происходит уменьшение. При использовании префиксной формы сначала происходит уменьшение, затем возращение значения. Например, если x=3, тогда выражение y=x-- приведет к тому, что у=3 и х=2, а выражение у=--х к тому, что х=2 и у=2. Одноместное отрицание (-). Одноместное отрицание предшествует операнду и инвертирует его. Например, x =-x инвертирует значение x; то есть если x было равно 3, станет -3. Битовые операторы обращаются с их операндами как с набором бит (нулями и единицами), несмотря на то, каким было исходное число - десятичным, шестнадцатеричным или восьмеричным, оно предварительно преобразуется к тридцатидвухбитовому целому. Возращается стандартное числовое значение. В следующей таблице приведено описание битовых операторов.
Логические операторы должны иметь логические операнды и возвращают логический результат.
В дополнение к операторам сравнения, которые могут использоваться для сравнения строк, имеется оператор конкатенации, который используется для слияния строк. Например, "two " + "words" возвращает значение "two words". Оператор присваивания += может также использоваться при конкатенации, например, если переменная mystring имеет значение "alpha" и вычисляется выражение mystring+="bet", то возвращается результат равный "alphabet", который присваивается переменной mystring. new. Можно использовать оператор new, для того чтобы создать объект, встроенный или определенный пользователем, встроенные объекты могут иметь тип Array, Boolean, Date, Function, Math, Number, или String. Синтаксис этого оператора следующий: name = new typ( param1 [,param2] ...[,paramN] ) где name - имя вновь созданного объекта, typ - его тип и param - параметры. typeof. Оператор typeof может быть записан следующим образом:
Возвращается строковое значение, описывающее тип операнда. Предположим имеются следующие переменные:
Оператор typeof возвратит следующие результаты для них.
Для ключевых слов true и null, оператор typeof возвратит результаты:
Для числа или строки результат будет выглядеть следующим образом:
Свойства объектов (см. далее) оцениваются следующим образом:
Для методов и функций возвращается результат:
Для объектов возвращается результат: typeof Date is function typeof Function is function typeof Math is function typeof Option is function void. Синтаксис оператора:
Оператор void определяет выражение, которое не возвращает никакого значения. Круглые скобки необязательны, но их использование является хорошим стилем. Можно использовать оператор void, чтобы определить гипертекстовую ссылку, по которой будет что-нибудь выполнено, но перехода по ссылке не последует. Следующий оператор создает ссылку, которая ничего не делает, когда пользователь активизирует ее. <A HREF="javascript:void(0)">Click here to do nothing</A> Следующая таблица описывает приоритеты операторов, сверху вниз от самого высокого до самого низкого, операторы в одной строке имеют равный приоритет: () [] . ++ -- ~ ! / % + - >> << >>> > >= < <= == != & ^ | && || ?: = 1.3 Управляющие операторы JavaScript. Операторы подразделяются на следующие категории: - условный оператор: if...else - операторы цикла: for, while, break, and continue - оператор манипулирования объектами: for...in, new,this, and with - комментарии:(//) и(/*...*/)
Синтаксис: if (condition) { statements1 [ } else { statements2 ] } Если условие condition истинно, выполняется оператор statements1, иначе statements2. Условие может быть любым JavaScript-выражением, которое можно оценить как истинное или ложное. Операторы, которые нужно выполнить, могут быть любыми JavaScript-операторами, включая условные. Более чем один оператор должен быть заключен в фигурные скобки, { }. В следующем примере функция checkData возвращает true, если число символов в объекте Тext равно трем, в противном случае выводит аварийный бокс и возвращает false. function checkData () {
if (document.form1.threeChar.value.length == 3) {
return true
} else {
alert("Enter exactly three characters. " +
document.form1.threeChar.value + " is not valid.")
return false
}
}
Цикл - набор команд, который выполняется неоднократно до выполнения указанного условия. JavaScript поддерживает два вида оператора цикла - for и while. Внутри операторов могут быть использованы break и continue. Оператор for ... in также является оператором цикла, но используется для манипулирования объектом (см. ниже) Оператор for. Цикл повторяется до тех пор, пока специфицированное условие не станет false. Синтаксис: for ( [начальное выражение]; [условие]; [выражение приращения] ) {операторы} При выполнении цикла происходит следующее:
Пример. Следующий фрагмент программы содержит операторы, которые подсчитывают количество отбираемых опций в списке. Оператор цикла объявляет переменную i и инициализирует ее нулем. Проверяет чтобы i была меньше, чем число опций в объекте, если это так, исполняется оператор if. После каждого прохода i увеличивается на единицу.
var numberSelected=0
for (var i=0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected==true)
numberSelected++
}
Оператор while. Цикл повторяется до тех пор, пока условие истинно (true). Синтаксис: while (условие) {операторы} Если условие становится ложным (false), цикл прекращается и управление передается операторам после цикла. Условие проверяется не непрерывно, а первоначально и после выполнения всех операторов цикла. Пример 1. Следующий цикл выполняется, пока n - меньше 3: n = 0
x = 0
while( n < 3 ) {
n ++
x += n
}
С каждой итерацией, n увеличивается на 1 и добавляется к x. Поэтому, x и n принимают следующие значения:
После завершения третьего прохода, условие n < 3 не выполняется, поэтому цикл заканчивается. Пример 2: Бесконечный цикл. Необходимо удостовериться, что условие в цикле в конечном счете становиться ложным; иначе, цикл никогда не будет закончен, как это происходит в данном примере. while (true) {alert("Hello, world")} Оператор break. Этот оператор прерывает цикл for или while и передает управление оператору, следующему за оператором цикла. Пример. В следующем фрагменте программы оператор break прерывает цикл, когда i=3 , и передает управление опера- тору z=i*x. var i = 0
while (i < 6) {
if (i == 3)
break
i++
}
z= i*x
Оператор continue. Этот оператор прерывает выполнение операторов внутри цикла (while или for) и продолжает выполнение цикла с новой итерации. В противоположность оператору break выполнение цикла не заканчивается, вместо этого : - в цикле while происходит переход к проверке условия; - в цикле for происходит переход к выражению приращения. В следующем примере приведен оператор while с continue, который выполняется, когда значение i равно 3. Таким образом n принимает значения 1, 3, 7 и 12. i = 0
n = 0
while (i < 5) {
i++
if (i == 3)
continue
n += i
}
1.3.3 Оператор манипулирования объектами. Таким оператором в JavaScript являются for..in. Оператор for..in используется для итерирования по всем свойствам объекта. Для каждого свойства выполняется тело цикла. Выглядит оператор следующим образом: for (переменная in объект) {операторы}
Комментарии - примечания автора, которые объясняют сценарий. Комментарии игнорируются интерпретатором. JavaScript поддерживает комментарии в стиле языка Java: -комментарий, распространяющийся на одну строку, этому комментария предшествует двойной слеш (//). -многострочный комментарий, начинающийся с символов /* и заканчивающийся символами */. Следующий пример показывает два комментария: // Это - однострочный комментарий. /* Это - многострочный комментарий. Он может иметь любую длину. */
Функции - один из фундаментальных блоков JavaScript. Функция - JavaScript-процедура - набор операторов, который исполняет определенную задачу. Чтобы использовать функцию, необходимо сначала определить ее. Определение функции состоит из ключевого слова function, за которым следуют:
Операторы могут включать в себя вызовы функций. определенных в текущем приложении. Различие между определением и вызовом функции традиционно для языков программирования. Определение функции просто называет функцию и задает выполняемые ею действия. Запрос функции исполняет указанные действия с фактическими параметрами. Следует определять функции для страницы в разделе HEAD документа. В этом случае все функции будут определены прежде, чем показано содержание документа. Иначе, в то время как страница еще не полностью загружена, пользователь мог бы исполнить действие, которое вызывает еще не загруженную функцию, что привело бы к ошибке. Пример простой функции: function simplefun(str) {
document.write("<HR><P>" + str)
}
Эта функция получает строку str, как аргумент, добавляет некоторые HTML-признаки к ней с помощью оператора конкатенации и выводит результат в текущем документе с помощью метода write.
В Navigator’е можете использовать любую функцию, определенную в текущей странице. Можно также использовать функции, определенные в других поименованных окнах и фреймах. В LiveWire-приложениях можно использовать любую функцию скомпилированную с приложением. Как уже было сказано, определение функции не исполняет ее. Для того, чтобы функция выполнилась ее необходимо вызвать. Предположим функция simplefun была определена в разделе HEAD документа, тогда выполнить ее можно, например, следующим образом: <SCRIPT> simplefun(«Call function simplefun») </SCRIPT> Аргументы функции не ограничиваются строками и числами, можно передавать в качестве аргументов также и целые объекты. Функция может быть в том числе и рекурсивной, то есть может вызывать сама себя. Например, имеется функция, которая вычисляет факториал: function factorial(n) {
if ((n == 0) || (n == 1))
return 1
else {
result = (n * factorial(n-1) )
return result
}
}
Можно вывести результат от одного до пяти следующим образом: for (x = 0; x < 5; x++) { document.write("<BR>", x, " factorial is ", factorial(x)) } Результаты:
1.4.2 Использование массива аргументов. Аргументы функции хранятся в массиве. Внутри функции можно адресоваться к параметрам следующим образом: functionName.arguments [i] где functionName - имя функции и i - порядковый номер аргумента, начинающийся с нуля. Так, первый аргумент функции, названной myfunc, есть myfunc.arguments [0]. Общее число аргументов обозначается переменной arguments.length. При использовании массива аргументов, можно вызывать функцию с большим количеством аргументов, чем объявлено. Это часто полезно в том случае, когда заранее не известно, сколько аргументов будут переданы функции. Чтобы определить число аргументов фактически переданных функции, можно использовать arguments.length Например, рассмотрим функцию, которая создает списки в HTML-документе. Единственный формальный аргумент функции - строка, которая имеет значение "U" для ненумерованного списка или "O" для нумерованного. Определение функции: function list(type) {
document.write("<" + type + "L>") // начало списка
// цикл по аргументам
for (var i = 1; i < list.arguments.length; i++)
document.write("<LI>" + list.arguments[i])
document.write("</" + type + "L>") // end list
}
Можно обращаться к функции с любым числом аргументов и она будет выводить список указанного типа. Например, следующий запрос к функции list("О", "one", 1967, "three", "etc., etc...") выводит информацию в виде пронумерованного списка, так как первый аргумент равен О:
JavaScript основан на простой объектно-ориентируемой парадигме. Объект строят со свойствами, которые являются переменными JavaScript или другими объектами. Объект также имеет функции, связанные с ним, которые называются методами объекта. В дополнение к объектам, которые встроены в Navigator клиента и LiveWire server, можно определить свои собственные объекты.
Свойства объектов JavaScript доступны следующим образом: NameObject.Property где NameObject- имя объекта, Property - его свойство. Предположим имеется объект с именем department(отдел). Можно определить свойства этого объекта: название(name), руководитель(chief), число сотрудников(number_of_workers) следующим образом: department.name = "rk6" department.chief = "Norenkov I.P." department.number_of_workers = 23; Второй способ доступа к свойствам - через массивы. Свойства и массивы в JavaScript - довольно близки, фактически они представляют собой различные интерфейсы к одной и той же структуре данных. Так, например, можно определить свойства объекта department следующим образом: department["name"] = "rk6" department["chief"] = "Norenkov I.P." department["number_of_workers "] = 23 Этот тип массива известен как ассоциативный, потому что каждый индекс является строкой. Следующая функция выводит свойства объекта, когда ей передается объект и имя объекта в качестве аргументов. function show_props(obj, obj_name) {
var result = ""
for (var i in obj)
result += obj_name + "." + i + " = " + obj[i] + "\n"
return result
}
Так функция, show_props(department, "department") выведет следующий результат: department.name = rk6 department.chief = Norenkov I.P. department.number_of_workers = 23
1.5.2 Создание новых объектов. И клиент и сервер JavaScript имеют набор предопределенных объектов. Кроме этого, есть возможность создавать свои собственные объекты, для этого необходимо:
Для того, чтобы определить тип объекта, создается функция, в которой определяется имя, свойства, и методы объекта. Например, предположим, что мы хотим создать объект типа отдел. Мы хoтим, чтобы он назывался department и имел свойства - название(name), руководитель(chief), число сотрудников(number_of_workers) и тема над которой работает отдел(theme). Функция будет выглядеть следующим образом: function department(name, chief, number_of_workers, theme)
{ this.name = name
this.chief = chief
this.number_of_workers = number_of_workers
}
Заметим, что значения свойств объекта определяются значениями, переданными функции. Теперь создадим объект типа department с именем ourdep: ourdep = new department("rk6", "Norenkov I.P.", 23)
В том операторе объекту ourdep назначаются следующие свойства: ourdep.name присваивается строковое значение "rk6", ourdep. number_of_workers - целое 23 и т.д. Можно создать любое количество таких объектов, еще один пример: iu6dep = new department("iu6", "Smirnov U.M", 34). Объект может иметь свойства, которые являются свойствами другого объекта. Предположим мы определяем объект person: function person(name, age, sex) {
this.name = name
this.age = age
this.sex = sex
}
и создаем два экземпляра этого объекта: fed = new person("Fedoruk V.G.", 43, "M") trudon = new person("Trudonoshin V.A.", 46, "M") Теперь мы хотим переопределить объект department, чтобы он включал новое свойство - сотрудников: function department(name, chief,number_of_workers, collab)
{ this.name = name
this.chief = chief
this.number_of_workers = number_of_workers
this.collab =collab }
Создаем новые объекты типа department: ourdep = new department("rk6", "Norenkov I.P.", 23,trudon) iu6dep = new department("iu6", "Smirnov U.M", 34,fed) Можно обратить внимание, что при создании объектов типа department, им в качестве аргументов передаются имена объектов. Теперь, если мы хотим найти имя сотрудника отдела iu6, то можем воспользоваться следующей записью: iu6.collab.name Заметим, что всегда можно добавить свойства к ранее определенному объекту, например оператор rk6.theme = "rk6-07" добавит свойство theme к rk6, и назначит ему значение "rk6-07". Однако это не повлияет на другие объекты, для добавления новых свойств ко всем объектам данного типа необходимо изменить определение объекта.
1.5.3 Использование индексов для свойств объекта. В Navigator 2.0, можно обратиться к свойствам объекта по их названию или по их порядковому индексу. В Navigator3.0, если первоначально свойство определено с помощью названия, то при обращении к нему нужно использовать название, если первоначально воспользовались индексом, то и обращение должно быть с индексом. Исключением из этого правила - объекты типа form, к ним можно обратиться как к элементу массива в соответствии с их порядковым номером (он определяется порядком появления формы в документе) или по имени. Например, если второй тег <FORM> в документе имеет аттрибут NAME "myForm", можно обратиться к этой форме двумя способами: document.forms[1] document.forms["myForm"]
1.5.4 Определение свойств объекта по умолчанию. Используя свойство prototype можно назначать свойства всем представителям данного типа, после этого их можно индивидуально переопределить. В следующем примере имена всех руководителей отделов (объект типа department) определяется как null, затем они могут быть изменены department.prototype.chief=null
Определение методов. Метод - функция, связанная с объектом. Метод определяется таким же способом, что и стандартная функция, для ассоциации с существующим объектом используется следующий синтаксис: object.methodname = function_name где object - существующий объект, methodname - имя, которое назначается методу, function_name - имя функции. Метод вызывается следующим образом: Object.methodname (params); Можно определить методы для объекта в его конструкторе, например можно определить функцию, которая выводит свойства ранее определенного объекта department: function displayDep() {
var result = " this.name + " " + this.chief
+ " " + this.number_of_workers
show_props (result)
}
где show_props - функция из раздела “Функции” Можно включить эту функцию в качестве метода department, добавив в конструктор строку this.displayDep = displayDep; То есть полное определение объекта department будет выглядеть так: function department(name, chief, number_of_workers, collab) {
this.name = name
this.chief = chief
this.number_of_workers = number_of_workers
this.collab =collab
this.displayDep = displayDep
}
Тогда вызов метода displayDep для конкретных экземпляров выполняется следующим образом : ourdep.displayDep() iu6dep.displayDep()
1.6.1 Использование this для ссылок на объект. JavaScript имеет специальное ключевое слово this, которое можно использовать в пределах метода по отношению к текущему объекту. Например, предположим, что имеем функцию, названную validate, которая проверяет значение объекта на нахождение его в заданных пределах, если значение объекта не входит в указанные пределы, выводится аварийный бокс: function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
Теперь можно вызвать validate в обработчике событий (см.далее) onChange при заполнении формы: <INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)"> Здесь this относится к вызывающему объекту. При комбинировании со свойствами формы this может относиться к текущей форме родительского объекта. В следующем примере форма myForm содержит объекты text и button. Когда пользователь нажимает кнопку, значение объекта text устанавливается равным имени формы. Обработчик событий onClick использует this.form для ссылки на родительскую форму myForm. <FORM NAME="myForm"> Form name:<INPUT TYPE="text" NAME="text1" VALUE="Moscow"> <P> <INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" onClick="this.form.text1.value=this.form.name"> </FORM>
В JavaScript для Navigator 2.0 нельзя удалять объекты - они существуют, пока вы не покинете страницу, содержащую объект. В JavaScript для Navigator 3.0, можно удалять объекты, устанавливая ссылку на пустой указатель (если это - последняя ссылка на объект) в этом случае объект удаляется немедленно.
1.7 Встроенные объекты и их методы. Некоторые объекты встроены в JavaScript и могут использоваться как в клиенте, так и на сервере. Ими являются объекты типа Array, Boolean, Date, Function, Math, Number, and String.
JavaScript не имеет явного типа данных -массив(array). Однако, можно использовать встроенный объект Array и его методы и работать с массивами в приложениях. Объект Array имеет методы для соединения, перевертывания и сортировки массивов. У него есть свойство для определения длины массива. Массив есть упорядоченный набор значений, к которым можно обратиться по имени и индексу. Создание массивов:
аrrayObjectName является или названием нового объекта или свойством существующего объекта, аrrayLength - начальная длина множества. Можно получить доступ к этому значению используя свойство length; elementn - список значений для элементов множества, когда использована вторая форма инициализации массива, его длина определяется количеством аргументов. Объект Array имеет следующие методы: - join - связывает все элементы массива в строку; - reverse переворачивает элементы массива: первый элемент становится последним и наоборот; - sort сортирует элементы массива. Например, предположим, что мы определяем следующий массив: myArray = new Array("Wind","Rain","Fire") тогда myArray.join() возвратит "Wind,Rain,Fire"; myArray.reverse преобразует массив так, что myArray[0] есть"Fire", myArray[1] есть "Rain", и myArray[2] есть "Wind". myArray.sort сортирует элементы массива в лексикографическом порядке, так что myArray[0] есть "Fire", myArray[1] есть "Rain", и myArray[2] есть "Wind". Определение элементов массива. Можно определять элементы массива с помощью оператора присваивания, например: emp[1] = "Casey Jones" emp[2] = "Phil Lesh" emp[3] = "August West" Можно это сделать при при создании массива: myArray = new Array("Hello", myVar, 3.14159) В следующем примере создается двумерный массив и выводится на экран. a = new Array(4)
for (i=0; i < 4; i++) {
a[i] = new Array(4)
for (j=0; j < 4; j++) {
a[i][j] = "["+i+","+j+"]"
}
}
for (i=0; i < 4; i++) {
str = "Row "+i+":"
for (j=0; j < 4; j++) {
str += a[i][j]
}
document.write(str,"<p>")
}
Этот пример показывает следующие результаты: Row 0:[0,0][0,1][0,2][0,3] Row 1:[1,0][1,1][1,2][1,3] Row 2:[2,0][2,1][2,2][2,3] Row 3:[3,0][3,1][3,2][3,3] Можно обратиться к элементам массива используя значение элемента или его индекс. Например, в следующем примере myArray = new Array("Wind","Rain","Fire") Можно обратиться к первому элементу массива как myArray [0] или myArray ["Wind"].
Встроенные объекты Boolean нужно использовать тогда, когда необходимо преобразовать не-boolean значение в boolean значение. Можно использовать Boolean в любом месте JavaScript, где ожидается значение такого типа. JavaScript возвращает значение объекта Boolean автоматически вызывая метод valueOf. Создание объектa Boolean: booleanObjectName = new Boolean(value) booleanObjectName - или имя нового объекта или свойство существующего, value - начальное значение объекта. Значение преобразуется к типу boolean, если необходимо. Если значение опущено или 0, null, false или пустая строка "", объект инициализируется значением false, Во всех других случаях, включая строку "false", создается объект с начальным значением true. В следующем примере создаются два объекта Boolean bfalse = new Boolean(false) btrue = new Boolean(true)
JavaScript не имеет данных типа date. Однако, можно использовать объект Date и его методы для работы с датами и временами в приложениях. Объект Date имеет большое количество методов для установки, получения, и управления датами. У него нет свойств. JavaScript обращается с датами подобно языку Java. Эти два языка имеют много одинаковых методов и хранят даты как число миллисекунд. прошедших с 1 января 1970г, 00:00:00. Примечание. В настоящее время нельзя работать с датами до 1 января 1970г. Создание объекта Date: dateObjectName = new Date([parameters]) где dateObjectName - имя создаваемого объекта, это может быть новый объект или свойство существующего объекта. Параметры могут задаваться следующим образом: - опущены: создается текущие дата и время, например, today= new Date(); - определяется строка в формате “месяц день, год часы:минуты:секунды”, например, Xmas95 =new Date("December 25, 1995 13:30:00"). Если опускаются часы, минуты или секунды они устанавливаются в нуль; - задается целое значение года, месяца и дня, например, Xmas95 = new Date(95,11,25). - задается целое значение года, месяца, дня, часов, минут, секунд. Методы объекта Date. Методы для обработки дат и времен можно разделить на следующие категории:
С помощью "get" и "set" методов можно получать и устанавливать секунды, минуты, часы, дни месяца, дни недели, месяцы, и годы независимо друг от друга. Имеется метод getDay, возвращающий день недели, но нет соответствующего метода setDay, поскольку день недели устанавливается автоматически. В методах используются следующие целые значения:
Например, если вы установили следующую дату: Xmas95 = new Date("December 25, 1995") то Xmas95.getMonth() возвратит 11, а Xmas95.getYear() возвратит 95. Методы getTime и setTime полезны для сравнения дат. Метод getTime возвращает число миллисекунд начиная с 01.01.1970. Следующий пример выводит число дней, прошедших в текущем году: today = new Date() endYear = new Date("December 31, 1990") // Установили день и месяц endYear.setYear(today.getYear()) // Установили текущий год msPerDay = 24 * 60 * 60 * 1000 // Число миллисекунд за день daysLeft = (endYear.getTime() - today.getTime()) / msPerDay daysLeft = Math.round(daysLeft) document.write("Number of days left in the year: " + daysLeft) В этом примере создается объект Date c именем today, который содержит текущую дату. endYear определяет начало текущего года. Тогда, используя число миллисекунд за день, вычисляем число дней между today и endYear, используя getTime, и округляем число дней до целого. Метод parse полезен для присваивания даты существующему объекту из строкового значения. Например, следующий пример использует parse и setTime для назначения даты объекту mydate: mydate = new Date() mydate.setTime(Date.parse("Aug 9, 1995")) Пример использования объекта Date. В этом примере в HTML области показываются непрерывно обновляемые цифровые часы. Это осуществимо, поскольку есть возможность динамически изменить содержание области текста в JavaScript (в отличие от обычного текста, который нельзя модернизировать без перезагрузки документа). Вывод в навигаторе выглядит следующим образом: Раздел <BODY> документа выглядит так: <BODY onLoad="JSClock()"> <FORM NAME="clockForm"> The current time is <INPUT TYPE="text" NAME="digits" SIZE=12 VALUE=""> </FORM> </BODY> Тег <BODY> включает обработчик событий onLoad. Когда страница загружается обработчик вызывает функцию JSClock, определяемую в разделе <HEAD>. Форма clockForm включает простое текстовое поле digits, в котором инициализирована пустая строка. В разделе <HEAD> документа JSClock определяется следующим образом: <HEAD> <SCRIPT language="JavaScript"> <!-- function JSClock() { var time = new Date() var hour = time.getHours() var minute = time.getMinutes() var second = time.getSeconds() var temp = "" + hour temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second document.clockForm.digits.value = temp id = setTimeout("JSClock()",1000) } //--> </SCRIPT> Функция JSClock сначала создает новый объект Date, с именем time; так как аргументы не заданы, устанавливаются текущие значения. Запросы к getHours, getMinutes, и getSeconds выделяют значение текущего часа, минуты и секунды. Следующие четыре оператора строят строковое значение времени. Полученное значение присваивается области текста: document.clockform.digits.value = temp, тем самым время будет показано в документе. Конечный оператор в функции - рекурсивный запрос к JSClock: id=setTimeout("JSClock()",1000) Встроенная в JavaScript функция setTimeout определяет время задержки для для обращения к JSClock. Второй аргумент указывает задержку в 1000 миллисекунд. Таким образом модернизируется показ времени в форме с интервалом одна секунда. Обратите внимание, функция возвращает значение присваиваемое id, которое в данном случае нигде не используется, но может быть использовано в методе clearTimeout для обнуления.
Создание объекта Function: functionObjectName = new Function ([arg1, arg2, ... argn], functionBody) functionObjectName - имя переменной или свойство существующего объекта. При использовании свойств функции, functionObjectName должен быть или именем существующего объекта или свойством существующего объекта. аrg1, arg2, ... argn - аргументы, которые используются функцией как формальные параметры. Каждый из параметров должен быть строкой, которая допустима в JavaScript как идентификатор; например " x "или"theForm ". functionBody - строка, специфицирующая JavaScript-коды, которые нужно компилировать как тело функции. Объекты function обрабатываются каждый раз, когда они используются. Это менее эффективно, чем объявление функции и их вызов, потому что объявленные функции компилируются. Следующий пример назначает функцию переменной setBGColor. Эта функция устанавливает цвет фона текущего документа. var setBGColor = new Function("document.bgColor='antiquewhite'") Для вызова объекта Function, нужно специфицировать имя переменной, как будто это функция, например: var colorChoice="antiquewhite" if (colorChoice=="antiquewhite") {setBGColor()} Можно назначить функцию обработчиком событий следующими способами:
Создание переменной setBGColor похоже на обычное декларирование функции. function setBGColor() { document.bgColor='antiquewhite' } Назначение функции переменной подобно объявлению функции, но есть различия: когда для функции назначается переменная setBGColor = new Function("..."), setBGColor является переменной, текущее значение которой относиться к функции, созданной с помощью new Function(), когда создается функция с помощью function setBGColor() {...}, setBGColor не является переменной, это имя функции.
Встроенный объект Math имеет свойства и методы для ма- тематических констант и функций. Например, свойство PI объекта Math имеет значение 3.141..., который можно использовать как Math.PI Стандартные математические функции являются методами Math. Они включают тригонометрические, логарифмические, показательные, и другие функции. Например, если нужно использовать синус, следует писать Math.sin (1.56) Обратите внимание что все тригонометрические методы Math используют аргументы в радианах. В следующей таблице приведены методы Math.
Часто удобно использовать оператор with, когда есть раздел, в котором используется набор констант и методов, чтобы не повторять слово "Math". Например: with (Math) { a = PI * r*r; y = r*sin(alfa); x = r*cos(alfa) }
Этот объект имеет свойства для цифровых констант такие как максимальное значение, неопределенность, бесконечность. Эти свойства можно использовать следующим образом: biggestNum = Number.MAX_VALUE smallestNum = Number.MIN_VALUE infiniteNum = Number.POSITIVE_INFINITY negInfiniteNum = Number.NEGATIVE_INFINITY notANum = Number.NaN В следующей таблице приведены свойства Number:
У JavaScript нет типа данных string. Однако можно пользоваться объектом String и его методами для работы со строками в прилoжениях. Этот объект имеет множество методов и одно свойство - длину строки. Создание объекта String: stringObjectName = new String(string) stringObjectName - имя нового объекта String, string - любая строка. Например, следующий оператор создает объект String, названный mystring: mystring = new String ("Hello, World!") аналогичные действия выполняет и оператор: mystring="Hello, World!" Строковые литералы также являются объектами String. Свойство length для строки указывает число символов в ней, так x = mystring.length присвоит значение х равное тринадцати, потому что "Hello, World!" имеет 13 символов. Объект String имеет два типа методов - те, которые возвращают в качестве результата преобразованную исходную строку (как, например, подстроку или строку, у которой все символы переведены в верхний регистр) и те, которые возвращают строку в формате HTML (например link). Например mystring.toUpperCase() and "hello,world!".toUpperCase() возвратят строку "HELLO, WORLD!". Метод substring имеет два аргумента и возвращает подстроку, располагающуюся между указанными номерами, например, mystring.substring(4, 9) возратит строку "o,Wo". Методы bold и link используются для HTML- форматирования, первый создает жирный текст, второй гипертекстовую ссылку. Например, для создания ссылки к гипотетическому URL с помощью метода link можно воспользоваться следующим оператором: mystring.link("http://www.helloworld.com") Следующая таблица показывает методы объектов Sring:
Функция оценивает аргумент на неопределенность. Синтаксис: isNaN(testValue) где testValue -значение, которое вы хотите оценить. На платформах, которые поддерживают NaN, функции parseFloat и parseInt (см. ниже) возвращают "NaN", когда значение не является числом. isNaN возвращает true если "NaN," и false в другом случае. В следующей программе оценивается значение floatValue и вызывается соответствующая процедура: floatValue=parseFloat(toFloat) if (isNaN(floatValue)) { notFloat() } else { isFloat() }
1.8.2 Функции parseInt и parseFloat. Эти функции возвращают числовое значение строкового аргумента. Синтаксис parseFloat: parseFloat(str) parseFloat выполняет лексикографический разбор строки и, если это возможно, возвращает число с плавающей точкой. Если в строке встречаются символы отличные от знака (+ или -), цифры (0-9), десятичной точки или экспоненты, разбор прекращается и возвращается значение, полученное до этого момента, остальные символы игнорируются. Если самый первый символ не может быть преобразован в число возвращается"NaN" (not a number). Синтаксис parseInt: parseInt(str [, radix]) parseInt выполняет лексикографический разбор первого аргумента - строки str, и возвращает целое по основанию, заданным вторым необязательным аргументом radix. Например radix 10 показывает, что строку нужно преобразовывать в десятичное число, 8 в восьмеричное, 16 в шестнадцатиричное и так далее. При основании больше десяти для обозначения цифр используются буквы в алфавитном порядке. Преобразование выполняется до первого недопустимого символа, остальные символы игнорируются, если первый символ не может быть преобразован возвращается "NaN".
2. Глава. Включение JavaScript в HTML- документы. Существуют следующие способы подключения JavaScript- программ к HTML документу:
2.1 Использование тега SCRIPT. Тег <SCRIPT> - расширение к HTML, который может включать любое число JavaScript-операторов. <SCRIPT> JavaScript операторы ... </SCRIPT> Документ может иметь любое количество тегов SCRIPT. В теге SCRIPT можно определить версию браузера, для которого предназначены операторы JavaScript: <SCRIPT LANGUAGE= "JavaScript"> определяет JavaScript для Navigator 2.0. <SCRIPT LANGUAGE= "JavaScript1.1"> определяет JavaScript для Navigator 3.0. Операторы в пределах тега <SCRIPT> игнорируются, если браузер пользователя не имеет уровня поддержки JavaScript, указанного в признаке LANGUAGE. Если признак LANGUAGE опущен, Navigator 2.0 принимает LANGUAGE="JavaScript". Navigator 3.0 предполагает LANGUAGE="JavaScript1.1". Поскольку появился VBScript (альтернатива JavaScript, базирующаяся на Visual Basic, разработка Microsoft) , то признак LANGUAGE становиться обязательным. Можете использовать признак LANGUAGE, для написания программ, которые содержат особенности Navigator 3.0, и эти программы не будут приводить к ошибкам, если пользоваться Navigator 2.0. Следующие примеры показывают некоторые методы ис- пользования признака LANGUAGE. Пример 1. Этот пример показывает, как определить функции дважды, для JavaScript 1.0, и для JavaScript 1.1. < SCRIPT LANGUAGE= "JavaScript" > // функции для JavaScript 1.0 </SCRIPT> < SCRIPT LANGUAGE= "JavaScript1.1" > // те же функции,для JavaScript 1.1 // функции только для версии 1.1 </SCRIPT> <FORM > <INPUT TYPE="button" onClick="doClick(this)" ...> . . . </FORM> Пример 2. Этот пример показывает, как использовать две отдельных версии JavaScript документа, для JavaScript 1.0 и для JavaScript1.1. По умолчанию документ загружается для JavaScript 1.0. Если пользователь имеет Navigator 3.0, то replace-метод заменит страницу. < SCRIPT LANGUAGE= "JavaScript1.1" > // Замена страницы при работе с версией 1.1
location.replace("js1.1/mypage.html" ) </SCRIPT>
[здесь продолжается страница с 1.0-совместимыми операторами ... ]
Пример 3. Этот пример показывает, как проверить браузер с помощью navigator.userAgent, чтобы определить его версию. <SCRIPT LANGUAGE="JavaScript"> if (navigator.userAgent.indexOf("3.0")!= -1) jsVersion = "1.1" else jsVersion = "1.0" </SCRIPT> [ После этого, проверяете переменную jsVersion перед использованием любых расширений для JavaScript 1.1]
2.1.1 Сокрытие программ в пределах признаков комментария. Только начиная с версии 2.0 Netscape Navigator распознает JavaScript. Чтобы гарантировать, что другой браузер будет игнорировать JavaScript, можно размещать SCRIPT-операторы в пре- делах HTML-комментариев, как это показано ниже: <SCRIPT> <! - Здесь начинаются SCRIPT-операторы, которые нужно скрыть от старого браузера. JavaScript операторы ... // здесь заканчивается сокрытие. - > </SCRIPT> Navigator должным образом интерпретирует признаки SCRIPT и игнорирует строки в программе, начинающиеся двойным слешем (//). В настоящее время большинство пользователей имеют браузеры, интерпретирующие программы на JavaScript, но если вы не хотите доставить неприятности для пользователей со старыми браузерами, следует использовать эту технику. Примечание. Для простоты, некоторые из примеров в этой книге не скрывают программ, то есть написаны определенно для Navigator 2.0. Пример: <HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- Скрываем текст от старых браузеров.
document.write ("I am from JavaScript!")
// Заканчиваем сокрытие -->
</SCRIPT>
<P>This is HTML-text.
</BODY>
Этот SCRIPT показывает в Navigator’е следующее: I am from JavaScript! This is HTML-text. Заметим, что для клиента нет никакого различия в появлении первой строки, произведенной с помощью JavaScript, и второй строкой, выполненной с помощью HTML. Точка с запятой (;) в конце оператора необходима только в том случае, если он является не единственным на этой строке.
2.2 Определение файла для JavaScript. Признак SRC тега <SCRIPT> позволяет вам определять файл как источник операторов JavaScript. Например: <HEAD> <TITLE>My Page</TITLE> <SCRIPT SRC="myprog1.js"> ... </SCRIPT> </HEAD> <BODY> ... Этот признак особенно полезен для разделения функций при большом количестве страниц. JavaScript операторы в пределах тега <SCRIPT> с признаком SRC игнорируются, если в файле нет ошибок. Например, вы можете поместить следующий оператор между <SCRIPT SRC="..." > и </ SCRIPT >: document.write("Included JS file not found")
Этот оператор будет выполняться только в том случае, если при загрузке файла произойдет какая-либо ошибка. Признак SRC может определить любой URL, относительный или абсолютный. Например: < SCRIPT SRC= "http://home.netscape.com/functions/jsfuncs.js "> Внешние файлы JavaScript должны содержать только JavaScript определения функций и операторы, в них не может быть HTML-тегов. Внешние файлы JavaScript должны иметь расширение .js, и сервер, на котором они располагаются должен быть специальным образом настроен.
2.3 Использование JavaScript-выражения как значения HTML-атрибутов. При использовании JavaScript можно определить JavaScript- выражение как значение для тега HTML. Это позволяет создавать более гибкие HTML-страницы, потому что признаки одного HTML элемента могут зависеть от ранее размещенных на странице элементов. Для включения в текст документов символов, имеющих специальный смысл в языке HTML, стандарт языка предлагает специальную конструкцию в вид последовательности из трех объектов: - символ & (амперсанд); - числовой код или символьное имя; - символ ; (точка с запятой). Например, можно включить символ "больше" ( > ) с помощью последовательности $GT; и "меньше" ( < ) с помощью $LT;. Применение таких последовательностей связано с тем, что указанные символы являются зарезервированными в языке HTML. JavaScript-объекты также начинаются с символом & и заканчиваются точкой с запятой(;). Вместо имени или номера используется JavaScript-выражение, заключенное в фигурные скобки { }. Можно использовать JavaScript-объекты только там, где употребимо значение тега HTML. Например, пусть в документе определена средствами JavaScript переменная barWidth, имеющая значение равное 50. Теперь можно создать горизонтальную линию на половину окна следующим образом: <HR WIDTH="&{barWidth};%" ALIGN="LEFT">
Как и для других HTML-элементов, после того, как расположение произошло, образ страницы может измениться, после ее перезагрузки. Следующий пример определяет простую функцию в части HEAD документа и вызывает ее в части BODY документа: <HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Скрываем от старых браузеров
function myfunc(number) { return number + number}
// Конец сокрытия -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write("Two arguments is ", myfunc(7), ".")
</SCRIPT>
<P> OK !
</BODY>
Функция myfunc имеет один аргумент, названный number. Состоит она из одного оператора return number+number, который должен возвратить удвоенное значение аргумента функции. Вызывается функция с аргументом 7. Результат, выводимый на экран выглядит следующим образом: Two arguments is 14. OK ! В функции myfunc использовался оператор document.write(...) для вывода результата в Navigator’е. Этот оператор вызывает write-метод для объекта document в стандартной нотации: objectName.methodName(arguments...) где objectName есть имя объекта, methodName есть имя метода, и arguments есть список аргументов метода, отделяемых запятыми.
2.3.1 Использование write-метода. С помощью write-метода можно выводить информацию в окно навигатора, в общем-то так же, как и с помощью HTML- операторов, но write-метод обладает большими возможностями, например можно работать с переменными аргументами. По этим причинам, write - один из наиболее часто используемых JavaScript-методов. write-метод работает с любом числом строковых аргументов, которые могут быть строковыми литералами или переменными. Можно также использовать строковую конкатенацию - оператор ( + ), чтобы создать одну строку из нескольких. Рассмотрим следующий пример, который производит динамический HTML: <HEAD> <SCRIPT>
<!--- Скрываем от старого браузера
// Эта функция выводит горизонтальную линию заданной ширины
function bar(widthPct) { document.write("<HR ALIGN='left'
WIDTH=" + widthPct + "%>")}
// Эта функция показывает заголовок указанного уровня и неко-
// торый текст
function output(headLevel, headText, text) {
document.write("<H", headLevel, ">", headText, "</H",
headLevel, "><P>", text)
}
// конец сокрытия-->
</SCRIPT> </HEAD>
<BODY>
<SCRIPT>
<!--- начало сокрытия
bar(25)
output(2,"Это заголовок 2-го уровня", "JavaScript это очень просто...")
// конец сокрытия -->
</SCRIPT>
<P> Это стандартный HTML, в отличие от предыдущей строки,
которая сгенерирована.
</BODY>
Раздел HEAD этого документа определяет две функции: -bar - функция выводит горизонтальную линию заданной ширины -output - функция показывает заголовок указанного уровня и некоторый текст Раздел BODY вызывает обе функции с фактическими параметрами и результат вызова показан ниже. Это стандартный HTML, в отличие от предыдущей строки,которая сгенерирована. Следующий оператор выводит линию заданной ширины: Document.write ("<HR ALIGN='left' WIDTH=", widthPct, "%>") Замечание: здесь использованы одинарные кавычки внутри двойных. Это нужно делать всякий раз, когда хотите указать строку в кавычках внутри строкового литерала. Тогда вызов bar с аргументом двадцать пять производит продукцию эквивалентную следующему HTML: < HR ALIGN= "left" WIDTH=25 % > Имеется вариант write - writeln, который добавляет перевод строки. Поскольку HTML вообще игнорирует перевод строки, то нет разницы между write и writeln, кроме раздела .
2.4 Обработка событий в JavaScript. Приложения JavaScript в Navigator’е в значительной степени управляются событиями. Например, нажатие кнопки мыши, изменение области текста, перемещение мыши по ссылке и т.п.- события. Можно определить события, на которые будет реагировать ваша программа. Список событий, обрабатываемых в JavaScript приведен в следующей таблице.
Название программы-обработчика события обычно состоит из названия самого события, которому предшествует “on” Например, программа-обработчик получения фокуса ввода называется onFocus. Чтобы создать программу-обработчик события для HTML тега, нужно добавить обработчик события к тегу, указав в двойных кавычках программу-обработчик. Аргументы программы обработчика, если таковые имеются, задаются в круглых скобках. Типовой синтаксис имеет вид: <ТЕГ обработчик события="Имя программы-обработчика (аргументы) "> Предположим, что вы создали функцию JavaScript, названную myobr. Можно заставить Navigator исполнять эту функцию, когда пользователь нажмет на кнопку. Нажатие кнопки сопровождается событием Click, обработчиком этого события является onClick, которой соответствует программа compute <INPUT TYPE="button" VALUE="Calculate" onClick="myobr(this.form)"> Если хотите включить более чем один оператор для обработки события, то их следует разделять точкой с запятой (;). В предыдущем примере this.form относится к текущей форме. Ключевое слово this относится к кнопке. OnClick-обработчик обращаетcя к compute, с текущей формой как аргументом. Выделение функций для обработки событий является хорошим стилем, поскольку делает построение программы модульным, позволяет использовать одну и ту же функцию с различными аргументами, и делает программы более читабельными. В следующем примере, можно ввести выражение (например, 2+3 ) в первой области текстового ввода, и после нажатия кнопки во второй текстовой области получить результат (например, 5).
Navigator покажет следующее:
HEAD документа определяет единственную функцию, compute, с одним аргументом f. Функция использует диалоговый бокс для подтверждения ввода с кнопками OK и Cancel. Если пользователь нажимает OK, подтверждая правильность ввода, вызывается встроенная функция eval(f.expr.value). Если пользователь нажимает Cancel, происходит выход из функции. Обратите внимание на использование значения полей NAME в функции, эти имена входят составной частью в имена переменных в функции.
2.4.1 Явный запрос программ-обработчиков событий. В JavaScript для Navigator 3.0, можно повторно переопределить программу-обработчик события, как это показано ниже: <SCRIPT LANGUAGE="JavaScript">
function fun1() { ... }
function fun2() { ... }
</SCRIPT>
<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton"
onClick="fun1()"> </FORM> <SCRIPT> document.myForm.myButton.onclick=fun2
</SCRIPT>
Обратите внимание, что новая программа-обработчик записывается как fun2, не fun2()
2.5 Проверка правильности заполнения формы. Проверка правильности заполнения формы у клиента полезна, так как:
Пример функции с проверкой правильности заполнения форм <HEAD> <SCRIPT LANGUAGE="JavaScript"> function isaPosNum(s) {
return (parseInt(s) > 0) }
function qty_check(item, min, max) {
var returnVal = false
if (!isaPosNum(item.value))
alert("Please enter a postive number" )
else
if (parseInt(item.value) < min) alert("Please enter a "
+ item.name + " greater than " + min)
else if (parseInt(item.value) > max)
alert("Please enter a " + item.name
+ " less than " + max)
else returnVal = true return returnVal
}
function validateAndSubmit(theform){
if (qty_check(theform.quantity,0, 999))
{ alert("Order has been Submitted") return true }
else { alert("Sorry, Order Cannot Be Submitted!") return false } }
</SCRIPT> </HEAD> isaPosNum - простая функция, которая возвращает TRUE, если аргумент -положителен, и FALSE - иначе. qty_check имеет три аргумента: item - соответствующий элементу формы и минимальное и максимальное допустимое значение. Эта функция проверяет значение item, которое должно находиться между min и max, и вызывает alert-бокс, если это не так. validateAndSubmit имеет в качестве аргумента форму и использует qty_check, чтобы проверить значение элемента формы и принимает форму, если она заполнена правильно, или вызывает alert-бокс и не принимает форму. В следующем примере выполняется вызов этих функций: qty_check- как программы-обработчика onChange для текстового поля и validateAndSubmit- как обработчика onClick для клавиши <BODY>
<FORM NAME="widget_order" ACTION="lwapp.html"
METHOD="post">How many widgets today?
<INPUT TYPE="text" NAME="quantity"
onChange="qty_check(this, 0, 999)">
<BR> <INPUT TYPE="button"
VALUE="Enter Order" onClick="validateAndSubmit(this.form)">
</FORM>
</BODY>
Форма выглядит следующим образом: Эта форма задает значение для LiveWire-приложения, названного lwapp.html.
3. Глава. Использование объектов Navigator'а Излагаемый здесь материал относится в основном к JavaScript-клиенту.
Объекты Navigator’а имеют следующую иерархию:
При загрузке документа выполняется порядковая нумерация однотипных объектов и полное имя объекта формируется с использованием названия объекта и его номера. Например, первая форма в документе получит название form1. Поскольку она является дочерним элементом объекта document, обратиться к ней можно следующим образом: document.form1. Каждая страница имеет следующие объекты:
В зависимости от содержания, документ может иметь и другие объекты.: например, каждая форма (определяемая в теге FORM) в документе представляет объект Form. Следующая ссылка относится к свойству value текстового поля с именем text1 в форме, названной myform, текущего документа: document.myform.text1.value Когда объект включен в форму, для обращения к нему необходимо указывать имя формы, даже в том случае, когда объект может существовать вне формы. Например рисунок (image) может существовать вне формы, но если он в нее включен, то обращение должно выглядеть следующим образом: document.imageForm.aircraft.src='f15e.gif' В том случае, если рисунок вне формы, обращение будет следующим: document.aircraft.src='f15e.gif' 3.1.1 Примеры свойств документа. Предположим мы создали страницу, поименованную simple.html, со следующим содержимым: <HEAD><TITLE>My Document</TITLE>
<SCRIPT>
function update(form) {
alert("Form being updated")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="foo.cgi" METHOD="get" >
Enter a value:
<INPUT TYPE="text" NAME="text1" VALUE="everything"
SIZE=20>
Check if you want:
<INPUT TYPE="checkbox" NAME="Check1" CHECKED
onClick="update(this.form)"> Option #1
<P>
<INPUT TYPE="button" NAME="button1" VALUE="Press Me"
onClick="update(this.form)">
</FORM>
</BODY>
Базовые объекты могут иметь следующие свойства:
Значение document.title определяется содержимым тега TITLE, значения document.fgColor и document.bgColor явным образом не определены, поэтому они выбираются по умолчанию из установок диалогового бокса Preferences (когда пользователь выбирает General Preferences из меню Options). Полные имена объектов в выше приведенном документе будут следующими:
Объект myform имеет свойства, основывающиеся на аттрибутах тега FORM: - action есть http://www.sampson.com/samples/foo.cgi, URL, на который указывает форма. - method есть "get" как указано в аттрибуте METHOD . - length равна 3, поскольку в форме три элемента ввода. Объект Form имеет дочерние объекты button1 и text1, эти объекты обладают своими собственными свойствами, например: button1.value имеет значение "Press Me" , button1.name - "Button1" text1.value - "everything" text1.name - "text1". На эти свойства следует ссылаться, используя полные имена, например: document.myform.button1.value.
3.2 Исполнение JavaScript-программ Чтобы понимать исполнение JavaScript-программы, важно знать как они исполняются Navigator'ом - то есть как Navigator преобразует HTML теги в графическое отображение. В общем случае Navigator исполняет файл HTML сверху вниз. Например, предположим, что определена форма с двумя элементами ввода текста: <FORM NAME="statform"> <INPUT TYPE = "text" name = "userName" size = 20> <INPUT TYPE = "text" name = "Age" size = 3> Эти элементы формы определены как JavaScript-объекты и их можно использовать после того, как форма определена следующим образом: document.statform.userName и document.statform.Age. Например, можно показать значение этих объектов в программе после заполнения формы: <SCRIPT> document.write(document.statform.userName.value) document.write(document.statform.Age.value) </SCRIPT> (Чтобы увидеть только что введенные значения необходимо перезагрузить документ.) Однако, если попробовать сделать это перед определением формы (выше заполнения формы в HTML странице), получите ошибку, потому что объекты не существуют еще в Navigator’е. Аналогично, если расположение объекта на экране произошло, то установка нового значения не приведет к изменению изображения. Например, предположим заголовок документа определен следующим образом: <TITLE>My JavaScript Page</TITLE> Для JavaScript это значение переменной document.title. Navigator выводит этот заголовок в своей верхней строке. Если позже попытаться изменить значение этой переменной, то это не вызовет изменение изображения, не приведет к изменению переменной и может вызвать ошибку. Имеются некоторые важные исключения из этого правила: Можно модернизировать значения элементов формы динамически. Например, следующее описание определяет область текста, который первоначально показывает строку "Source value". Когда вы нажимаете кнопку, добавляется новый текст "...Updated". <FORM NAME="demoForm"> <INPUT TYPE="text" NAME="mytext" SIZE="40" VALUE="Source value "> <P><INPUT TYPE="button" VALUE="Click to Update Text Field" onClick="document.demoForm.mytext.value += '...Updated ' "> </FORM> Это простой пример обновления элемента формы после расположения. При использовании программ-обработчиков событий можно также изменить некоторые другие свойства после того, как расположение произошло, например, document.bgcolor.
3.3 Ключевые объекты Navigator'a. Этот раздел описывает некоторые наиболее полезные объекты Navigator’а, включая окна, фреймы, документ, формы, местоположение, и историю.
Объект window - "родительский" объект для всех других объектов в Navigator’е. Можно создать несколько окон с помощью JavaScript-приложений. Объект Frame - определяется с помощью тега FRAME в разделе FRAMESET. Frame имеет те же свойства и методы, что и window и отличаются только способом вывода. Объект window имеет многочисленные полезные методы: open и close: Открывает и закрывает окно, можно специфицировать размер окна, его контекст - имеет ли кнопки, ссылки и другие атрибуты. alert: Выводит аварийный бокс с сообщением. confirm: Выводит диалоговый бокс с кнопками OK и Cancel. prompt: Выводит диалоговый бокс с текстовым полем для ввода значения. blur и focus: Убирает или дает фокус окну. scroll: Скроллирует окно к указанной координате. setTimeout: Оценивает выражения после указанного времени window имеет также два свойства, которые могут быть полезны:location и status. Можно направить клиента к другому URL. Например, следующее предложение направляет клиента к домашней странице Netscape, как будто он воспользовался гиперссылкой или загрузил URL: location = "http://home.netscape.com" status можно использовать, чтобы послать сообщение в строку статуса, находящуюся внизу клиентского окна.
Поскольку write и writeln методы генерируют HTML, объект document- один из наиболее полезных объектов Navigator’а. Страница имеет только один объект класса document. Он имеет ряд свойств, которые отражают цвет фона, текста, и ссылок на странице: bgColor, fgColor, linkColor, alinkColor, и vlinkColor. Другие полезные свойства документа включают lastModified - дату последнего изменения документа, referrer- предыдущий URL, посещенный клиентом, и URL - URL самого документа. Объект document - предок для Anchor, Applet,Area, Form, Image, Link, and Plugin объектов в странице. Каждая форма в документе создает объект класса form. Поскольку документы можут содержать более, чем одну форму, они храняться в виде массива. Первая форма (верхняя в странице ) - form[0], вторая form[1], и так далее. То есть в дополнение к обращению к форме по имени, можно обращаться и с использованием индекса, например к первой форме в документе можно обратиться следующим образом: document.forms [0] Аналогично, элементы в форме, типа текстовых полей, радио-кнопок, и так далее, организованы в массивы элементов. Так, можно обратиться к первому элементу (независимо от того, какой это элемент) в первой форме как document.forms[0].elements[0]. Каждый элемент формы имеет возможность сослаться на родительскую форму. Это осбенно полезно в программах- обработчиках событий, где можно обратиться к другому элементу текущей формы. В следующем примере, форма myForm содержит объект text и button. Когда пользователь нажимает кнопку, значение объекта text меняется на название формы. onClick программа- обработчик событий использует this.form, чтобы обратиться к родительской форме, myForm. <FORM NAME="myForm"> Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> <P> <INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" onClick="this.form.text1.value=this.form.name"> </FORM> 3.4 Использование окон и фреймов. JavaScript позволяет создавать окна и фреймы и управлять ими, что необходимо для организации HTML-страниц. Объект window - самый верхний объект в иерархии клиентов JavaScript; frame- похожие на window объекты, но соответствуют “подокнам”, созданным с тегом FRAME в разделе FRAMESET. 3.4.1 Открытие и закрытие окон. Окно создается автоматически, когда запускается Navigator; можно открыть другое окно, выбирая New Web Browser от меню File. Можно также открыть и закрыть окно программно с помощью JavaScript. Открытие окна. Можно создать окно с помощью метода open. Следующий оператор создает окно, называемое msgWindow, которое выводит содержимое файла sesame.html: msgWindow=window.open("sesame.html")
Еще один пример: создается окно, которое называется homeWindow, которое выводит домашнюю страницу Netscape: homeWindow=window.open("http://home.netscape.com")
Окна могут иметь два имени. Следующий оператор создает окно сдвумя именами. Первое имя msgWindow, можно использо- вать для определения свойств окна, его методов, второе имя displayWindow, может использоваться для указания форм: msgWindow=window.open("sesame.html","displayWindow")
Имя окна не требуется при его создании. Но, если необходимо обратиться к нему из другого окна, то имя обязательно. Когда окно открывается, можно определить его высоту и ширину, указать содержит ли окно toolbar - линейку с набором кнопок для управления, location - строку, в которой выводится URL текущей страницы, или scrollbars - средство для скроллинга. Следующий оператор создает окно без toolbar, но с scrollbars: MsgWindow=window.open ( "sesame.html", "displayWindow", "toolbar=no, scrollbars=yes " ) Закрытие окна. Можно закрыть окно с помощью метода close. Нельзя закрыть frame без закрытия родительского окна. Каждое из следующих утверждений закрывает текущее окно: Window.close ( ) self.close ( ) // нельзя использовать следующий оператор в программе-обработчике событий close() Следующей оператор закрывает окно, названное msgWindow msgWindow.close() Фрейм- специальный тип окна. Несколько фреймов могут быть показаны на экране одновременно с независимыми линейками прокрутки, каждый может ссылаться на свой URL. В следующем примере на экране изображаются три фрейма. Образ этого экрана показан на рисунке.
Фрейм слева вверху, имеет имя listFrame; фрейм справа вверху, имеет имя contentFrame; и фрейм внизу, имеет имя navigateFrame. Верхние фреймы занимают 90% высоты, левый фрейм занимает 30% ширины. <FRAMESET ROWS="90%,10%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=category.html NAME="listFrame">
<FRAME SRC=titles.html NAME="contentFrame">
</FRAMESET>
<FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>
Следующая диаграмма показывает иерархию фреймов. Все три фрейма имеют одного и того же родителя, несмотря на то, что два из них определены в отдельном frameset. Это потому, что родитель фрейма - родительское окно, a не frameset.
К предыдущим фреймам можно обратиться следующим образом. ListFrame - top.frames [0] contentFrame - top.frames [1] navigateFrame -top.frames [2] Пример 2. Можно создать образ экрана подобно предыдущему примеру, но два верхних фрейма будут иметь родителя отдельно от navigateFrame. <FRAMESET ROWS="90%,10%"> <FRAME SRC=muskel3.html NAME="upperFrame"> <FRAME SRC=navigate.html NAME="navigateFrame"> </FRAMESET> В этом FRAMESET определяются верхний и нижний фреймы, у которых родителем будет окно. Файл muskel3.html содержит следующую информацию: <FRAMESET COLS="30%,70%"> <FRAME SRC=category.html NAME="listFrame"> <FRAME SRC=titles.html NAME="contentFrame"> </FRAMESET> Следующая диаграмма показывает иерархию структур. UpperFrame и navigateFrame имеют родителем окно верхнего уровня, для ListFrame и contentFrame родителем является upperFrame. Вершина
|
| +--listFrame (Category.html)
| |
+--upperFrame (Muskel3.html) --+
| |
| +--contentFrame (Titles.html)
+--navigateFrame (Navigate.html)
Можно обратиться к предыдущим фреймам следующим образом: UpperFrame - top.frames [0] navigateFrame - top.frames [1] listFrame - upperFrame.frames [0] или Top.frames [0] .frames [0] contentFrame - upperFrame.frames [1] или top.frames [0] .frames [1] Можно изменять содержимое фреймов, используя свойство location, для установки нового URL. Например предположим, что мы хотим позволить пользователю закрывать все фреймы, и видеть только аннотации учебников. В этом случае необходимо добавить следующую клавишу в navigateFrame: <INPUT TYPE="button" VALUE="Titles Only" onClick="top.location='annotation.html'"> Когда пользователь нажмет эту клавишу, файл annotation.html загрузиться в текущее окно, а фреймы navigateFrame, listFrame и contentFrame закроются и больше не существуют. Пример создания и обновления фреймов. Предположим, что: -файл category.html, загружается во фрейм listFrame, содержит список авторов учебников, рассортированных по категориям. -файл titles.html, загружается во фрейм contentFrame, содержит алфавитный список авторов и названия учебников. -файл navigate.html, загружается во фрейм navigateFrame, содержит гипертекстовые ссылки, пользователь может выбрать способ вывода авторов - по алфавиту или по категориям. Этот файл содержит также гипертекстовые ссылки, для того чтобы пользователь мог вызвать описание каждого учебника. В дополнительном файле alphabet.html содержится список авторов учебников, отсортированных по алфавиту. Этот файл выводится в listFrame, когда пользователь выбирает ссылку для алфавитного списка. Файл category.html может выглядеть следующим образом: <P><FONT SIZE=+4>Каталог:</FONT></P> <P>Физика</P> <LI><A HREF=titles.html#0005 TARGET="contentFrame">Дж.Орир</A> <LI><A HREF=titles.html#0001 TARGET="contentFrame">В.Демкович</A> <LI><A HREF=titles.html#0002 TARGET="contentFrame">В.Зубов</A> <LI><A HREF=titles.html#0010 TARGET="contentFrame">В.Шальнов</A> <P>Математика</P> <LI><A HREF=titles.html#0011 TARGET="contentFrame">М.Сканави</A> <LI><A HREF=titles.html#0003 TARGET="contentFrame">А.Кутасов</A> <LI><A HREF=titles.html#0012 TARGET="contentFrame">Т.Яковлева</A> <P>Информатика</P> <LI><A HREF=titles.html#0006 TARGET="contentFrame">Ю.Семенов</A> <LI><A HREF=titles.html#0004 TARGET="contentFrame">П.Нотон</A> Файл alphabet.html : <LI><A HREF=titles.html#0001 TARGET="contentFrame">В.Демкович</A> <LI><A HREF=titles.html#0002 TARGET="contentFrame">В.Зубов</A> <LI><A HREF=titles.html#0003 TARGET="contentFrame">А.Кутасов</A> <LI><A HREF=titles.html#0004 TARGET="contentFrame">П.Нотон</A> <LI><A HREF=titles.html#0005 TARGET="contentFrame">Дж.Орир</A> <LI><A HREF=titles.html#0006 TARGET="contentFrame">Ю.Семенов</A> ... Файл navigate.html; <A HREF=alphabet.html TARGET="listFrame"> <B>Алфавитный</B></A> <A HREF=category.html TARGET="listFrame"> <B>По предме- там</B></A> <A HREF=annotation.html TARGET=_parent> <B>Аннотация</B></A> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Titles Only" onClick="top.location='annotation.html'"> </FORM> Файл titles.html; <A NAME="0001"><H3>В.Демкович</H3></A> <P>Сборник вопросов и задач по физике <A NAME="0002"><H3>В.Зубов</H3></A> <P>Задачи по физике <A NAME="0003"><H3>А.Кутасов</H3></A> <P>Пособие по математике <A NAME="0004"><H3>П.Нотон</H3></A> <P>Пособие по JAVA <A NAME="0005"><H3>Дж.Орир</H3></A> <P>Физика ... Работающую иллюстрацию этого примера можно посмотреть по кнопке
|
