LEKCIJA_10

ЛЕКЦИЯ 10

СОЗДАНИЕ ИНТЕРАКТИВНЫХ WEB-ДОКУМЕНТОВ

План лекции

1. Описание языка программирования JavaScript

2. Включение JavaScript в HTML- документы

3. Использование объектов Navigator'а

1. Описание языка программирования JavaScript

Типы данных, переменные и литералы

Типы данных. JavaScript распознает следующие типы:

- Numbers, такие как 17 или 3.1415928

- Logical (Boolean), true или false

- Strings, такие как "Hello!"

- null, специальное ключевое слово для обозначения пустого значения.

Нет явного различия между целыми и действительными данными. Нет явного типа date, но есть возможность использовать объект date и его методы для обращения с датами.

Преобразование типов данных

В JavaScript необязательно определять тип данных данных и они преобразуются автоматически в процессе выполнения программы. Так, например, можно определить переменную var str15 = 42, а позже можно присвоить этой же переменной строковое значение str15 = "This is new value..." и это не вызовет ошибки. В выражениях, где используются одновременно числовые и строковые значения, JavaScript преобразует числовое значение к строковому. Например, в следующих операторах

x = "This is new value - " + 42

y = 42 + " - is new value"

первый возвратит строку " This is new value - 42", второй - "42 -is new value".

В JavaScript имеются специальные функции для манипулирования строковыми и числовыми значениями:

- eval - пытается конвертировать строковое значение к типу number;

- parseInt - преобразует строковое значение в целое, если это возможно;

- parseFloat - преобразует строковое значение в число с плавающей запятой, если это возможно.

Переменные

Имена переменных в JavaScript должны начинаться с буквы или подчеркивания("_"), последующие символы могут быть также и цифрами (0-9). Следует учитывать, что JavaScript чувствителен к регистру. Некоторые примеры правильных имен - Number_hits, temp99, и _name.

Переменные можно объявить двумя способами: просто назначая это значение, например, x = 42 или же с ключевым словом var, например, var x = 19.

Различают глобальные и локальные переменные. Если переменная объявлена вне функции, то это глобальная переменная и ее можно использовать везде в текущем документе. Локальная переменная доступна только в пределах функции. Использование var необязательно, но нужно использовать это ключевое слово, если желаете иметь локальную переменную с таким же именем как у глобальной. Имеется доступ к глобальным переменным одного окна или фрейма в другом окне или фрейме через их имя. Например, если переменная phoneNumber обьявлена в родительском фрейме, можно обратиться к этой переменной из дочернего фрейма как parent.phoneNumber.

Литералы

Литералы - это константы различных типов.

Целые. Целые могут выражаться десятичным числом (основание системы счисления-10), шестнадцатеричным (16), и восьмеричным (8). Различаются он следующим образом: десятичное обязательно начинается не с нуля, предшествующий нуль означает, что это восьмеричное число, а предшествующие 0x ( или 0X ) означают шестнадцатеричное. Шестнадцатеричное целое может включать цифры (0-9) и символы a-f и A-F. Восьмеричное целое только цифры 0-7. Некоторые примеры целых литералов: 17, 0xFFF, и -345.

Литералы с плавающей точкой. Они могут иметь следующие части: десятичное целое число, десятичная точка ("."), дробная часть (десятичное целое), признак порядка ("e" или "E") и порядок (десятичное целое со знаком). Некоторые примеры литералов с плавающей точкой - 3.1415, -3.1E1, .107e2, и 2E-10.

Литералы Boolean. Тип Boolean имеет два значение: true и false.

Строковые литералы. Это ноль или больше символов, заключенных в двойные ( " ) или одинарные кавычки ('). Примеры строковых литералов: "row" , 'row' , "4321" , "one line \n another line" В дополнение к обычным символам, можно также включить специальные символы, как это показано в последнем элементе. В следующую таблицу внесены специальные символы, которые можно использовать в JavaScript.

Символ	Значение
\b	забой
\f	перевод страницы
\n	новая строка
\r	возврат каретки
\t	табуляция
\\	двойной обратный слеш

Для того чтобы использовать обратный слеш внутри строки необходимо использовать двойной обратный слеш. Например, чтобы определить путь к файлу (c:\temp) как строку следует указать var home = "c:\\temp".

Выражения и простые операторы

Выражение - любой, имеющий значение набор литералов, переменных, операторов, и выражений, который приводит к единственному значению. Значение может быть числом, строкой или 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. Существует сокращенная форма оператора присваивания, общий вид которой:

<переменная> <знак операции> = <выражение>

при этом подразумевается выполнение следующего оператора присваивания: <переменная>=<переменная><знак операции><выражение>

Знаком операции могут быть: +(сложение), -(вычитание), *(умножение), /(деление), %(деление по модулю), <<(сдвиг влево), >>(сдвиг вправо), >>>(сдвиг вправо с заполнением нулями), &(побитовое И), ^(побитовое исключающее ИЛИ), |(побитовое ИЛИ).

Операторы cравнения

Операторы сравнения сравнивают операнды и возвращают логическое значение, основанное на истинности сравнения. Операнды могут быть числовые или строковые. Когда используются строковые значения операндов, сравнение проводится с помощью стандартного лексикографического анализа. Операторы приведены в следующей таблице:

оператор	описание оператора	пример
Равно(==)	возвращает true, если операнды равны	x == y
не равно(!=)	озвращает true, если операнды не равны	x != y
больше(>)	возвращает true, если левый операнд больше	x > y
больше или равно(>=)	возвращает true, если левый операнд больше или равен правому	x >= y
меньше (<)	возвращает true, левый операнд меньше	x < y
меньше или равно (<=)	возвращает true, левый операнд меньше или равен правому	x <= y

Арифметические операторы

Стандартные арифметические операторы - сложение(+), вычитание(-), умножение (*) и деление (/). Эти операторы работают также, как и в других языках программирования.

Деление по модулю (%). Оператор деления по модулю используется следующим образом: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.

Битовые операторы

Битовые операторы обращаются с их операндами как с набором бит (нулями и единицами), несмотря на то, каким было исходное число - десятичным, шестнадцатеричным или восьмеричным, оно предварительно преобразуется к тридцатидвухбитовому целому. Возвращается стандартное числовое значение. В следующей таблице приведено описание битовых операторов.

Оператор	использование	описание
AND	a&b	возвращает 1 в каждый бит результата, если оба соответствующих бита операндов равны 1
OR	а|b	возвращает 1 в каждый бит результата, если хотя бы один из соответствующих битов операндов равен 1
XOR	a^b	возвращает 1 в битовую позицию, если биты операндов различны
NOT	~a	инвертирует биты операнда
Сдвиг влево	a<<b	операнд а сдвигается влево на b позиций, справа а заполняется нулями (соответствует умножению на 2)
Сдвиг вправо	a>>b	операнд а сдвигается вправо на b позиций, освобождающиеся разряды заполняются знаковым значением
беззнаковый сдвиг вправо	a>>>b	операнд а сдвигается вправо на b позиций, освобождающиеся разряды заполняются нулями

Логические операторы

Логические операторы должны иметь логические операнды и возвращают логический результат.

Оператор	использование	описание
AND	a&&b	возвращает true, если a=true и b=true
OR	a||b	возвращает false, если a=false и b=false
NOT	!a	возвращает true, если a=false и наоборот

Строковые операторы

В дополнение к операторам сравнения, которые могут использоваться для сравнения строк, имеется оператор конкатенации, который используется для слияния строк. Например, "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 может быть записан следующим образом:

1. typeof операнд

2. typeof (операнд)

Возвращается строковое значение, описывающее тип операнда. Предположим имеются следующие переменные:

1. var myFun = new Function("5+2")

2. var typ="round"

3. var count=1

4. var today=new Date()

Оператор typeof возвратит следующие результаты для них.

1. typeof myFun is object

2. typeof typ is string

3. typeof count is number

4. typeof today is object typeof dontExist is undefined

Для ключевых слов true и null, оператор typeof возвратит результаты:

1. typeof true is boolean

2. typeof null is object

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

1. typeof 745 is number

2. typeof 'Hello !' is string

Свойства объектов (см. далее) оцениваются следующим образом:

1. typeof document.lastModified is string

2. typeof window.length is number

3. typeof Math.LN2 is number

Для методов и функций возвращается результат:

1. typeof blur is function

2. typeof eval is function

3. typeof parseInt is function

4. typeof shape.split is function

Для объектов возвращается результат:

typeof Date is function

typeof Function is function

typeof Math is function

typeof Option is function

void.

Синтаксис оператора:

1. javascript:void (expression)

2. javascript:void expression

Оператор void определяет выражение, которое не возвращает никакого значения. Круглые скобки необязательны, но их использование является хорошим стилем. Можно использовать оператор void, чтобы определить гипертекстовую ссылку, по которой будет что-нибудь выполнено, но перехода по ссылке не последует. Следующий оператор создает ссылку, которая ничего не делает, когда пользователь активизирует ее. <A HREF="javascript:void(0)">Click here to do nothing</A>

Приоритеты операторов

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

() [] .

++ -- ~ !

/ %

+ -

>> << >>>

> >= < <=

== !=

&

^

|

&&

||

?:

=

Управляющие операторы 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 ( [начальное выражение]; [условие]; [выражение приращения] ) {операторы}

При выполнении цикла происходит следующее:

1. Инициализация начального выражения. Это выражение обычно содержит одну или несколько переменных цикла, но синтаксис позволяет выражение любой степени сложности.

2. Оценка условия. Если значение условия true, операторы цикла выполняются. Если значение условия false, цикл прекращается.

3. Исполняется выражение приращения.

4. Переход к шагу 2.

Пример. Следующий фрагмент программы содержит операторы, которые подсчитывают количество отбираемых опций в списке. Оператор цикла объявляет переменную 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 = 1 и x = 1;

- После второго прохода: n = 2 и x = 3;

- После третьего прохода: n = 3 и x = 6.

После завершения третьего прохода, условие 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 += 1;

}

Оператор манипулирования объектами

Таким оператором в JavaScript являются for..in. Оператор for..in используется для итерирования по всем свойствам объекта. Для каждого свойства выполняется тело цикла. Выглядит оператор следующим образом: for (переменная in объект) {операторы}

Комментарии

Комментарии - примечания автора, которые объясняют сценарий. Комментарии игнорируются интерпретатором. JavaScript поддерживает комментарии в стиле языка Java:

- комментарий, распространяющийся на одну строку, этому комментария предшествует двойной слеш (//).

- многострочный комментарий, начинающийся с символов /* и заканчивающийся символами */.

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

// Это - однострочный комментарий.

/* Это - многострочный комментарий.

Он может иметь любую длину. */

Функции

Функции - один из фундаментальных блоков JavaScript. Функция - JavaScript-процедура - набор операторов, который исполняет определенную задачу. Чтобы использовать функцию, необходимо сначала определить ее.

Определение функции состоит из ключевого слова function, за которым следуют:

• имя функции.

• список аргументов функции, заключенный в круглые скобки.Друг от друга аргументы отделяются запятыми.

• операторы JavaScript, заключенные в фигурные скобки {}.

Операторы могут включать в себя вызовы функций. определенных в текущем приложении. Различие между определением и вызовом функции традиционно для языков программирования. Определение функции просто называет функцию и задает выполняемые ею действия. Запрос функции исполняет указанные действия с фактическими параметрами. Следует определять функции для страницы в разделе 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)) }

Результаты:

0 factorial is 1

1 factorial is 1

2 factorial is 2

3 factorial is 6

4 factorial is 24

5 factorial is 120

Использование массива аргументов

Аргументы функции хранятся в массиве. Внутри функции можно адресоваться к параметрам следующим образом:

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) следующим образом: