4.3. Синтаксис JavaScript
Общие сведения о записи кода
Как и всякий современный язык программирования, JavaScript имеет традиционную часть, включающую операторы присваивания, математические и строковые функции, операторы и объектно-ориентированную часть, которая включает объекты, события, свойства и методы.
Одной из основных конструкций языка является функция. Она создается по следующему шаблону:
function ИмяФункции(параметр1, параметр2...) {
Текст программы
return выражение
}
Обязательными в данном шаблоне являются: слово function, круглые скобки и фигурные скобки, определяющие тело функции. Закрывающая фигурная скобка обозначает конец кода функции. Остальные элементы добавляются в случае необходимости. Функция является программой, для запуска которой достаточно указать ее имя в сценарии, например:
ИмяФункции(параметр);
Внутри функции могут находиться вызовы других функций. Если функция указана в качестве значения атрибута события HTML, она выполняется, когда происходит соответствующее событие.
С помощью оператора return функция может возвратить определенное значение любого типа или массив.
Функцию можно использовать в операциях присваивания или проверки условий.
Каждая команда должна заканчиваться точкой с запятой, хотя современные броузеры не фиксируют ошибку при отсутствии точки с запятой. Но этот разделитель обязателен, если несколько команд записаны в одной строке, например:
ris1 = new Image(); ris1.src = "risunok1.gif";
Фигурные скобки используются для обозначения блоков команд в функциях и сложных операторах.
Точка с запятой не ставится после фигурной скобки или когда используется только одна команда, например, для атрибута в коде HTML:
onMouseOver="this.style.color='green' ".
В JavaScript, в отличие от HTML или CSS, различаются строчные и заглавные буквы. Это имеет отношение, в первую очередь, к именам переменных и функций. В некоторых случаях важно правильное использование заглавных букв в именах атрибутов событий (см. выше).
Определение переменных и типов данных
В программе могут использоваться переменные различных типов. Если переменная определена вне функции, она является глобальной (доступной для всех функций страницы). Имена глобальных переменных должны быть уникальными для одной Web-страницы. Переменные, определенные внутри функции, являются локальными: действующими только в пределах функции. Разные функции могут независимо использовать локальные переменные с одинаковыми именами.
Для определения переменной используется ключевое слово var, хотя это не обязательно. Допустимы такие определения:
var Color01 = "red";
или
Color01 = "red";
В именах переменных можно использовать буквы латинского алфавита (различаются строчные и заглавные буквы), цифры, знак доллара и символ подчеркивания.
Тип переменной определяется в момент присвоения ей значения. После присвоения переменной некоторого значения ее тип может измениться, если будет присвоено новое значение другого типа.
При использовании операции сложения переменной присваивается символьный тип, если складывается символьное значение и число:
n = 15;
mess = "n равно " + n;
В этом случае переменная mess будет иметь символьный тип и значение «n равно 15».
В зависимости от операнда может изменяться смысл операции. Например, может выполняться строковая или математическая операция:
n = "15" - 5; // результат 10
n = "15" + 5; // результат 155
n = 15 + 5; // результат 20
Значение null
Существует стандартное значение null, которое может быть присвоено переменным. В зависимости от контекста, переменная с таким присвоением может иметь значение пустой строки, 0 или false.
Пример:
var n = null;
n = n * 15; // результат 0
Константы
Допускается создание именованных констант различных типов. Имена констант выбираются так же, как и имена переменных.
Примеры:
const stroka1 = "Добро пожаловать!"; // строковая константа
const mypi = 3.1415; // числовая константа
Свойство length
В зависимости от типа объекта, данное свойство имеет разный смысл.
Для определяемых пользователем переменных его можно применять для определения длины строк, например:
s1 = "Текстовый объект";
n1 = s1.length; // присвоение значения 16
Другой вариант — определение количества элементов массива.
Пример:
m1[0] = "Андрей"; // первый элемент массива
m1[1] = "Борис"; // второй элемент массива
n1 = m1. length; // присвоение значения 2
Это свойство часто используется и для объектов броузера или Web-страницы (строк и массивов).
Строковые данные. Объект String
Для обозначения строковых констант используются двойные или одинарные кавычки.
Строковые переменные определяются двумя способами:
s1 = "Текст"; // текстовый литерал
s2 = new String("Текст"); //объект String
Вне зависимости от того, как определена переменная, к ней можно применять методы и свойства объекта String. Например, можно определить длину строки:
dlina_stroki = s2.length;
В таблице приведены специальные символы, которые можно использовать в строках.
Обозначение |
Название |
\b |
Возврат на один символ |
\f |
Разрыв страницы |
\n |
Разрыв строки |
\r |
Возврат каретки |
\t |
Табуляция |
\v |
Вертикальная табуляция |
\' |
Одиночная кавычка |
\" |
Двойная кавычка |
\\ |
Обратный слэш (\) |
\XXX |
Символ стандарта Latin-1 (задается восьмеричным числом в пределах от 0 до 377) |
\xXX |
Символ стандарта Latin-1 (задается двухзначным шестнадцатеричным числом в пределах от 00 до FF) |
\uXXXX |
Символ Unicode (задается четырехзначным шестнадцатеричным числом) |
\u0008 |
Возврат на один символ назад (Backspace) |
\u0009 |
Табуляция |
\u000A |
Перевод строки |
\u000B |
Вертикальная табуляция |
\u000C |
Разрыв страницы |
\u000D |
Возврат каретки |
\u0020 |
Пробел |
\u0022 |
Двойная кавычка |
\u0027 |
Одиночная кавычка |
\u005C |
Обратный слэш (\) |
Некоторые символы можно задавать разными способами. Например, символ копирайта можно задать так: \251 (восьмеричное кодирование), \xA9 (шестнадцатеричное кодирование) или \u00A9 (стандарт Unicode).
Два типа кавычек необходимы на тот случай, когда строковая константа содержит символы кавычек, например:
WelcomeMessage = 'Добро пожаловать на сайт компании "Tip Top"';
С использованием обратного слэша ту же команду можно записать иначе (другие апострофы):
WelcomeMessage = "Добро пожаловать на сайт компании \"Tip Top\"";
Например, если надо задать строку с обратным слэшем ("c:\Program Files"), необходимо указать два слэша:
folder = "c:\\Program Files";
Операции со строками
Для строковых переменных используется операция конкатенации (сложения). Например:
s1 = "Строка 1";
s2 = "Строка 2";
s1 = s1 + s2;
Последнюю команду можно записать иначе:
s1 += s2;
Ниже приведены методы, используемы со строковыми переменными (объектами).
Методы anchor и link
Два метода (можно использовать любой) позволяют создать гиперссылку в коде страницы. Например, фрагмент,
<SCRIPT language="javascript">
s1 = "Сайт Алексея Гончарова";
s1 = s1.link("http://tekct.ru");
document.write(s1);
</SCRIPT>
помещенный внутри элемента BODY, создаст следующий HTML-код:
<A NAME="http://tekct.ru">Сайт Алексея Гончарова</A>
Методы для форматирования текста Web-страницы
Ряд методов используется для генерации HTML-кода и форматирования текста. Например, метод big() позволяет создать одноименный элемент.
Код на JavaScript:
<SCRIPT language="javascript">
s1 = "Строка";
s1 = s1.big();
document.write(s1);
</SCRIPT>
Созданный на странице код:
<BIG>Строка</BIG>
Другие подобные методы:
bold() — полужирное начертание (элемент B);
fixed() — моноширинный шрифт (элемент TT):
italics() — курсив (элемент I);
small() — уменьшенный размер букв (элемент SMALL);
strike() — зачеркнутый текст (элемент STRIKE);
sub() — нижний индекс (элемент SUB);
sup() — верхний индекс (элемент SUP).
Метод charAt
Возвращает указанный по номеру символ в строке. Отсчет символов производится от нуля.
Пример:
s1 = "Строка";
s2 = s1.charAt(2); // присваивается значение "р"
Метод charCodeAt
Возвращает числовой код указанного по номеру символа в строке. Отсчет символов производится от нуля.
Пример:
s1 = "Строка";
n = s1.charCodeAt(2); // присваивается значение 1088
Метод indexOf
Возвращает позицию указанной подстроки в строке. Отсчет символов производится от нуля. Возможно указание позиции, с которой следует начинать поиск. Если подстрока не найдена, возвращается значение -1.
Пример:
s1 = "Строка";
n = s1.indexOf("ок",2); // присваивается значение 3
Метод lastIndexOf
Возвращает позицию последнего вхождения указанной подстроки в строке (поиск справа налево). Отсчет символов производится от нуля. Возможно указание позиции, с которой следует начинать поиск. Если подстрока не найдена, возвращается значение -1.
Пример:
s1 = "Текстовый объект";
n1 = s1.lastIndexOf("ек"); //присваивается значение 13
n2 = s1.lastIndexOf("ек", 2); //присваивается значение 1
Метод concat
Объединение двух строк, указанных в качестве аргументов и присоединение результата к тому объекту, к которому применен метод.
Пример:
s1 = "Строка ";
s2 = s1.concat("Java", "Script");
//значение S2 "Строка JavaScript"
Метод fromCharCode
Формирование строки из последовательности кодов Unicode. Для использования метода необходим объект String.
Пример:
s1 = String.fromCharCode(1088,1089,1090); // значение "рст"
Метод split
Разделяет строку по элементам массива. В качестве аргументов указываются разделитель и максимальное число элементов (второй аргумент необязателен).
Пример. При выполнении следующего кода
s1 = "Текстовый объект";
m1 = s1.split(" ", 100);
будет создан массив m1 со следующими элементами:
m1[0] — "Текстовый ",
m1[1] — "объект".
Методы slice и substring
Возвращение части строки. В качестве аргументов указываются начальная и конечная позиции (начиная с нуля).
Пример:
s2 = "Текстовый объект";
s3 = "Текстовый объект";
s2 = s2.slice(3,6); // значение "сто"
s3 = s3.substring(3,6); // значение "сто"
Метод substr
Возвращает часть строки. Первый аргумент — начальная позиция (отсчет производится от нуля), второй аргумент — количество символов.
Пример:
s2 = "Текстовый объект";
s2 = s2.substr(3,6); // значение "стовый"
Методы toLowerCase и toUpperCase
Изменение регистра букв по принципу «все строчные» и «все заглавные».
Пример:
s2 = "Текстовый объект";
s2 = s2.toLowerCase();// значение "текстовый объект"
s2 = s2.toUpperCase();// значение "ТЕКСТОВЫЙ ОБЪЕКТ"
Операции с числами. Объект Number
Целые числа могут указываться в десятичной системе счисления, в восьмеричной системе (для чего необходимо использовать 0 в начале числа) или в шестнадцатеричной системе (где число должно предваряться конструкцией 0x). Восьмеричная система использует цифры 0-7. Шестнадцатеричная система использует цифры 0-9 и буквы A-F (на любом регистре).
Примеры
n1 = 99;
n2 = 015;
n3 = 0xA0;
Числовые значения с плавающий точкой могут задаваться разными способами:
c1 = 0.1;
myPI = 3.14159;
var21 = 3.584E-6;
p = .1e12;
Возможно определение числовой переменной как объекта, например:
n4 = new Number(10.8);
В математических выражениях могут применяться знаки арифметических действий, круглые скобки, константы, методы объекта Number и функции.
Арифметические операции выполняются следующим образом.
Сложение:
var01 = var02 + 3;
Вычитание:
var01 = var02 - 3;
Умножение:
var01 = var02 * 3;
Деление:
var01 = var02 / 3;
Вычисление со скобками:
var01 = 10 * (var02 - var03);
Список математических функций и констант приведен в следующем разделе.
Кроме традиционных операций, можно выполнять операцию поиска остатка от деления, например:
var01 = 9 % 4; // результат 1
Запись математических операций может осуществляться разными способами. В таблице ниже приведены варианты записи операций.
|
Математические операции
|
|
Вариант 1
|
Вариант 2
|
|
x += y
|
x = x + y
|
|
x++
|
x = x + 1
|
|
x -= y
|
x = x - y
|
|
x--
|
x = x - 1
|
|
x = -x
|
x = -1 * x
|
|
x *= y
|
x = x * y
|
|
x /= y
|
x = x / y
|
|
x %= y
|
x = x % y
|
|
x <<= y
|
x = x << y
|
|
x >>= y
|
x = x >> y
|
|
x >>>= y
|
x = x >>>
y
|
|
x &= y
|
x = x & y
|
|
x ^= y
|
x = x ^ y
|
|
x |= y
|
x = x | y
|
Для объектов-чисел существуют стандартные свойства, которые позволяют избежать ошибок при выполнении вычислений.
Имя свойства |
Комментарий |
MAX_VALUE |
Максимально возможное число |
MIN_VALUE |
Минимально возможное число |
NaN |
Значение «not a number» (не число) |
NEGATIVE_INFINITY |
Минус бесконечность |
POSITIVE_INFINITY |
Плюс бесконечность |
Значения «плюс бесконечность» и «минус бесконечность» используются при переполнении. Значение NaN позволяет не присваивать числовой переменной никакой численной величины, но анализировать ее в условных операторах.
Примеры:
biggestNum = Number.MAX_VALUE;
smallestNum = Number.MIN_VALUE;
infiniteNum = Number.POSITIVE_INFINITY;
negInfiniteNum = Number.NEGATIVE_INFINITY;
notANum = Number.NaN;
if (month < 1 || month > 12) month = Number.NaN;
if (isNaN(month)) alert("Неверно указан номер месяца");
К числовым объектам можно применять ряд стандартных методов. Большинство из них имеют необязательные целочисленные аргументы. Все эти методы используются, в первую очередь, для вывода информации, так как на вычисления формат числа не влияет.
Метод |
Назначение |
toExponential(n) |
Преобразование числа в экспоненциальную форму. Аргумент указывает количество знаков после десятичного разделителя (по умолчанию указываются все разряды) |
toFixed(n) |
Преобразование в формат с фиксированной точкой. Аргумент указывает количество знаков после десятичного разделителя (по умолчанию показывается только целая часть числа) |
toPrecision(n) |
Отображение указанного количества разрядов. По умолчанию отображаются все разряды |
toString(r) |
Преобразование числа в строку и представление его в определенной системе счисления. Аргумент — основание системы счисления (по умолчанию используется десятичная система) |
valueOf() |
«Примитивное значение» объекта. В данном случае — само число |
Примеры:
n1 = 134928;
document.write(n1.toExponential(3) + "<br>"); // 1.349e+5
document.write(n1.toFixed(3) + "<br>"); // 134928.000
document.write(n1.toPrecision(3) + "<br>"); // 1.35e+5
document.write(n1.toString(16) + "<br>"); // 20f10
document.write(n1.valueOf() + "<br>"); // 134928
Математические функции. Объект Math
Для вызова математических функций используется объект Math, например:
y = Math.sin(1.56); // вычисление синуса
Аргументы тригонометрических функций задаются в радианах.
Ниже приведены стандартные математические функции.
Функция (метод) |
Назначение |
abs(x) |
Абсолютная величина |
cos(x), sin(x), tan(x) |
Синус, косинус и тангенс |
acos(x), asin(x), atan(x) |
Арккосинус, арксинус, арктангенс |
atan2(x,y) |
Величина угла в полярных координатах (аргументами являются величины декартовых координат) |
exp(x) |
Экспонента ex |
log(x) |
Натуральный логарифм |
ceil(x) |
Ближайшее целое, большее или равное x |
floor(x) |
Ближайшее целое, меньшее или равное x |
min(x1,x2) |
Минимальный из двух аргументов |
max(x1,x2) |
Максимальный из двух аргументов |
pow(x,y) |
Возведение в степень: xy |
random() |
Случайное число в пределах от 0 до 1 |
round(x) |
Ближайшее целое |
sqrt(x) |
Квадратный корень |
В следующей таблице приведен перечень стандартных констант. Они используются как свойства объекта Math.
Константа |
Описание |
E |
Основание натурального логарифма (2.718) |
LN10 |
Натуральный логарифм 10 (~ 2.302) |
LN2 |
Натуральный логарифм 2 (~ 0.693) |
LOG10E |
Десятичный логарифм E (~ 0.434). |
LOG2E |
Логарифм E по основанию 2 (~ 1.442) |
PI |
Число «пи» (~ 3.14159) |
SQRT1_2 |
Квадратный корень из одной второй (~ 0.707) |
SQRT2 |
Квадратный корень из двух (~ 1.414) |
Примеры:
var01 = Math.sqrt(var02); // вычисление квадратного корня
L = Math.PI * r*r // полщадь круга
y = Math.sin(Math.PI/2 + x); // синус «пи пополам плюс икс»
y = x + Math.sqrt(x); // икс плюс корень из икс
Данные логического типа. Объект Boolean
Логические переменные могут принимать значения false (ложь) и true (истина).
Шаблон для определения переменной:
имя_переменной = new Boolean(начальное_значение);
В отличие от обычных логических величин, объекту типа Boolean можно присваивать значения не только логических типов, но переменная примет логическое значение. Например:
x = new Boolean(true); // true
x = new Boolean(false); // false
x = new Boolean(0); // false
x = new Boolean(1); // true
x = new Boolean(""); // false
x = new Boolean("Строка"); // true
При использовании логических величин в условных операторах нет необходимости использовать знаки сравнения (например, x == true), достаточно указать только логическую переменную:
if (x) {
alert("x равно true")
}
Массивы. Объект Array
Нумерация элементов массивов начинается с нуля. Для обращения к определенному элементу массива указывается его номер в квадратных скобках.
Задание элементов массивов может производиться двумя способами. Простейший способ — использование конструкции new Array() и указание значений элементов как аргументов. Например:
mas1 = new Array("Один", "Два", "Три");
Типы элементов не обязательно должны быть одинаковыми:
mas2 = new Array("Один", 2, 3);
Если элементов достаточно много, можно определить массив несколькими командами, например:
n = 7; // количество элементов
den = new Array(n);
den[0] = "Понедельник ";
den[1] = "Вторник";
den[2] = "Среда";
С помощью квадратных скобок определяются элементы массивов в операциях присваивания и в вычислениях, например:
x = mas1[2];
Операция присваивания может переопределить сразу несколько элементов массива:
cofe1 = ["В зернах", "Молотый", "Растворимый"];
Допускается определять не все элементы массива. В следующем примере второй элемент массива (den[1]) не определен:
den = ["Понедельник", , "Среда"];
Определение элементов массива не должно заканчиваться одиночной запятой. Например, конструкция
myList = ['home', , 'school', ];
определит только три элемента массива.
Количество элементов массива можно определить при помощи свойства length, например:
a = cofe1.length;
Объект Array имеет несколько методов.
Метод concat
Объединение нескольких массивов.
Пример. Один из объединяемых массивов используется в качестве объекта, а другие указываются как аргументы метода.
a = new Array("a1","a2","a3");
b = new Array("b1","b2","b3");
ab = a.concat(b); // массив ["a1","a2","a3","b1","b2","b3"]
Метод join
Объединение элементов массива в одну строку. В качестве аргумента метода может указываться разделитель (в строковом формате).
Пример.
a = new Array("a1","a2","a3");
s1 = a.join(" + "); // строка "a1 + a2 + a3"
Метод pop
Удаление последнего элемента массива и возвращение его значения.
Пример.
a = new Array("a1","a2","a3");
s1 = a.pop(); // присвоение значения "a3"
n1 = a.length; // присвоение значения 2
Метод push
Добавление одного или нескольких элементов массива и возвращение новой длины массива.
Пример.
a = new Array("a1","a2","a3");
s1 = a.push("a4","a5"); // присвоение значения 5
n1 = a.length; // присвоение значения 5
Метод reverse
Данный метод изменяет порядок расположения элементов на обратный.
a = new Array("a1","a2","a3");
a.reverse(); // массив ["a3","a2","a1"]
Метод shift
Метод удаляет первый элемент массива и возвращает его значение.
Пример.
a = new Array("a1","a2","a3");
s1 = a.shift(); // значение "a1"
n1 = a.length; // значение 2
Метод slice
Формирование нового массива из нескольких элементов существующего массива. Первый аргумент указывает индекс первого выбираемого элемента. Второй аргумент указывает индекс последнего выбираемого элемента, увеличенный на единицу. Если второй аргумент не указан, производится выборка элементов массива до последнего.
Пример.
a = new Array("a1","a2","a3","a4","a5");
a1 = a.slice(2,4); // массив ["a3","a4"]
n = a.length; // значение 5
n1 = a1.length; // значение 2
Метод sort
Сортировка элементов массива.
Пример 1.
a = new Array("a2","a3","a1");
a.sort(); // новый порядок элементов "a1","a2","a3"
По умолчанию происходит сортировка по общепринятым критериям для определенного типа данных, но имеется возможность использования нестандартной функции сортировки. Такая функция должна иметь два аргумента (например, x1 и x2), в качестве которых будут использоваться элементы массива. Функция должна возвращать следующие значения:
- отрицательное значение, если выбранные элементы находятся в отсортированном порядке относительно друг друга;
- нулевое значение, если значения аргументов равны (их перестановка не требуется);
- положительное значение, если выбранные элементы находятся не в отсортированном порядке относительно друг друга.
Пример 2. Функция, которая позволит отсортировать числа по убыванию, должна возвращать разницу между вторым и первым аргументом. Назовем эту функцию ubyvanie. Тогда ubyvanie(23, 6) должна возвращать отрицательное значение (6 23 = 17), так как аргументы уже находятся в отсортированном порядке.
Программный код может быть таким:
function ubyvanie(x1, x2) { return x2 - x1}
m1 = new Array(23,6,144,45);
m1.sort(ubyvanie) ; // новый порядок чисел 144,45,23,6
Обратите внимание, что в методе sort() имя сортирующей функции указывается без скобок и аргументов.
Пример 3. Функция, которая позволит отсортировать строковые элементы массива в порядке возрастания длины строки, может быть реализована так:
function vozr_dlin(x1, x2) {
return x1.length - x2.length
}
den = new Array("Понедельник","Вторник","Среда");
den.sort(vozr_dlin) ; // теперь "Среда","Вторник","Понедельник"
Пример 4. Для создания функции, сортирующей строки в порядке убывания их длин, достаточно в предыдущей функции поменять местами операнды:
function ubyv_dlin(x1, x2) {
return x2.length - x1.length
}
Метод splice
Добавление и удаление элементов массива.
Первый аргумент (обязательный) — индекс элемента, с которого начинается удаление или вставка.
Второй аргумент (обязательный) — количество удаляемых элементов. Если указан 0, элементы не удаляются.
Другие аргументы (необязательные) — значения элементов, которые надо вставить. Если они не указаны, происходит только удаление элементов.
Пример 1.
a = new Array("a1","a2","a3","a4","a5");
a.splice(1, 3, "b1","b2"); // массив ["a1","b1","b2","a5"]
n = a.length; // значение 4
Пример 2.
a = new Array("a1","a2","a3","a4","a5");
a.splice(1, 0, "b1","b2");
// массив a ["a1","b1","b2","a2","a3","a4","a5"]
n = a.length; // значение 7
Метод unshift
Добавление новых элементов в начало массива.
Пример.
a = new Array("a1","a2","a3");
a.unshift("b1","b2");
// массив a ["b1","b2","a1","a2","a3"]
Двухмерные массивы
Обращение к элементам двухмерного массива выполняется по принципу имя[i][j], где i и j — индексы. Двухмерный массив представляет собой одномерный массив, каждый элемент которого является массивом.
Ниже приводится пример кода, который позволяет сформировать массив размером 3x4 и вывести значения элементов в текст Web-страницы в виде матрицы.
m = 3; // количество строк
n = 4; // количество столбцов
mn = new Array(m);
for (i=0; i < m; i++) {
mn[i] = new Array(n);
document.write("<BR>");
for (j=0; j < n; j++) {
mn[i][j] = "m" + i + "n" +j;
document.write(mn[i][j] + " ");
}
}
В результате на экран будет выведено:
m0n0 m0n1 m0n2 m0n3
m1n0 m1n1 m1n2 m1n3
m2n0 m2n1 m2n2 m2n3
Массив аргументов функции arguments[i]
Существует стандартный массив arguments[i], который можно использовать внутри функции. Этот массив содержит переданные функции аргументы. Количество аргументов можно получить с помощью выражения arguments.length. Теоретически, в коде функции вместо имен аргументов можно использовать элементы массива: arguments[0] — первый аргумент, arguments[1] — второй аргумент и т.д.
Пример. Функция для вычисления квадрата числа.
function kvadrat(chislo) {
return arguments[0] * arguments[0];
}
Даты и время. Объект Date
Переменные, определяющие даты и время, являются объектами. Если для определения переменной (к примеру, d) использовать команду
d = new Date();
то переменная будет хранить текущее время на момент выполнения команды.
Вывод на экран значения этой переменной может быть таким:
Mon Nov 21 17:01:04 UTC+0300 2005
Возможно задание переменной с определенными параметрами даты и время. Ниже приведены примеры.
Вариант шаблона для задания только даты: год, месяц, число.
d = new Date(2005,11,25);
Можно использовать шаблон месяц число, год чч:мм:сс с заданием информации о дате в виде строки:
d = new Date("November 25, 2005 13:30:00");
Другой вариант шаблона с заданием только числовых величин: год, месяц, день, час, минуты, секунды.
d = new Date(2005,11,25,9,30,0);
Задание даты и времени с точностью до миллисекунды:
d = new Date(2006,11,30,23,59,59,999);
Создание переменной и присвоение ей значения может выполняться в разных командах. В данном случае требуется конвертация строкового значения даты в миллисекунды при помощи метода parse() (см. ниже). Присвоение выполняется при помощи метода setTime().
d = new Date();
d.setTime(Date.parse("Dec 9, 2005"));
В ранних версиях JavaScript даты отсчитывались от 1 января 1970 года, и более ранние даты использовать было нельзя. В версии JavaScript 1.3 это ограничение было снято.
Методы получения данных о времени
Для получения информации о времени, используются следующие методы:
Метод |
Возвращаемое значение |
getDate() |
Число (целое значение в пределах 1-31) |
getDay() |
День недели (0 — воскресенье, 1 — понедельник и т.д.) |
getHours() |
Час (целое число в пределах от 0 до 23) |
getMinutes() |
Минуты (целое число в пределах от 0 до 59) |
getMilliseconds() |
Миллисекунды (целое число в пределах от 0 до 999) |
getMonth() |
Месяц (0 — январь, 1 — февраль и т.д.) |
getSeconds() |
Секунды (целое число в пределах от 0 до 59) |
getTime() |
Количество миллисекунд, прошедших с 1 января 1970 00:00:00 до указанной в объекте даты |
getTimezoneOffset() |
Разница между установленным часовым поясом и гринвичским временем, выраженная в минутах |
getYear() |
Год (года до 1999 выводятся двумя цифрами, года, начиная с 2000 — четырьмя цифрами) |
getFullYear() |
Год (всегда выводится четырьмя цифрами) |
toLocaleString() |
Значение даты и времени в соответствии с настройками компьютера клиента (например, 2 декабря 2005 г. 0:00:00) |
toString() |
Представление даты и времени в виде строки. Например:
Thu Dec 8 19:32:29 UTC+0300 2005 |
valueOf() |
Аналог метода getTime() для переменных типа «дата/время» |
Пример. Вывод на Web-странице информации о текущей дате и времени (по шаблону Воскресенье, 1 января, 2006). Для использования русских названий месяцев и дней недели необходимо создать массивы. Функции getMonth() и getDay() возвращают целые числа, которые совпадают с индексами соответствующих массивов. Поскольку вывод информации происходит с помощью конструкции document.write(), данный код необходимо поместить именно там, где требуется вывести дату (в пределах элемента BODY).
<SCRIPT language=Javascript>
<!--
// Массив дней недели
var dayNames = new Array(
"Воскресенье","Понедельник","Вторник","Среда",
"Четверг","Пятница","Суббота");
// Массив названий месяцев
var monthNames = new Array(
"января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября",
"октября","ноября","декабря");
var now = new Date();
document.write(dayNames[now.getDay()] + ", " +
now.getDate() + " " + monthNames[now.getMonth()] +
", " + now.getYear());
// -->
</SCRIPT>
Метод parse
Получение интервала в миллисекундах между указанной датой (в строковом формате) и датой 01.01.1970 00:00:00. Данный метод выполняет те же действия, что и getTime(), но имеет следующие отличия в синтаксисе:
1. Исходную дату требуется задавать в определенном формате, с указанием трехбуквенного кода месяца на английском языке или в полном формате.
Возможные форматы даты-аргумента:
Mon DD, YYYY
Day, DD Mon YYYY HH:MM:SS TZN
2. Для данного метода обязательно использование объекта Date.
Пример:
n1 = Date.parse("Nov 25, 2006"); // значение 1164402000000
Методы для установки параметров времени
Для присвоения объектам типа «дата/время» необходимых значений, используются следующие методы:
Метод |
Устанавливаемое значение |
setDate(dateValue) |
Число (аргумент — целое число от 1 до 31) |
setHours(hoursValue) |
Час (аргумент — целое число от 0 до 23) |
setMinutes(minutesValue) |
Минуты (аргумент — целое число от 0 до 59) |
setMilliseconds(msecValue) |
Миллисекунды (аргумент — целое число от 0 до 999) |
setMonth(monthValue) |
Номер месяца (аргумент — целое число от 0 до 11; 0 — январь, 1 — февраль и т.д.) |
setSeconds(secondsValue) |
Секунды (аргумент — целое число от 0 до 59) |
setTime(timeValue) |
Установка всех параметров объекта «дата/время». В качестве аргумента используется число миллисекунд, прошедших с момента 01.01.1970 00:00:00 |
setYear(yearValue) |
Год (аргумент — целое число, больше чем 1900) |
Пример. Прибавление к текущей дате определенного количества дней. При выполнении подобных операций требуется выражать значение времени в миллисекундах.
dney = 25; // прибавить столько дней
d1 = new Date(); // текущая дата
d1.setTime(d1.getTime() + dney*24*60*60*1000); // новая дата
Методы для работы с универсальным временем
Ряд методов предназначен для работы с универсальным (гринвичским) временем, которое обозначается UTC или GMT.
Метод |
Возвращаемое значение |
UTC(yearValue, monthValue, dateValue, hoursValue, minutesValue, secondsValue) |
Количество миллисекунд, прошедших с момента January 1, 1970 at 00:00:00 GMT. Аргументы позволяют задать год, месяц, число, час, минуты и секунды в целых числах. Последние три аргумента необязательны. Требуется использовать объект Date. |
getUTCDate() |
Число (целое значение в пределах 1-31) |
getUTCDay() |
День недели (0 — воскресенье, 1 — понедельник и т.д.) |
getUTCFullYear() |
Год (всегда выводится четырьмя цифрами) |
getUTCHours() |
Час (целое число в пределах от 0 до 23) |
getUTCMilliseconds() |
Миллисекунды (целое число в пределах от 0 до 999) |
getUTCMinutes() |
Минуты (целое число в пределах от 0 до 59) |
getUTCMonth() |
Месяц (0 — январь, 1 — февраль и т.д.) |
getUTCSeconds() |
Секунды (целое число в пределах от 0 до 59) |
toGMTString() |
Перевод значения времени в строку. Например:
Thu, 1 Dec 2005 21:00:00 UTC |
toUTCString() |
Перевод значения времени в строку. Например:
Thu, 8 Dec 2005 16:36:10 UTC |
Пример. Использование метода UTC().
n1 = Date.UTC(2006,1,1); // значение 1138752000000
Для установки времени в универсальном формате служат следующие методы:
Метод |
Устанавливаемое значение |
setUTCDate(dateValue) |
Число (аргумент — целое число от 1 до 31) |
setUTCHours(hoursValue) |
Час (аргумент — целое число от 0 до 23) |
setUTCMinutes(minutesValue) |
Минуты (аргумент — целое число от 0 до 59) |
setUTCMilliseconds(msecValue) |
Миллисекунды (аргумент — целое число от 0 до 999) |
setUTCMonth(monthValue) |
Номер месяца (аргумент — целое число от 0 до 11;
0 — январь, 1 — февраль и т.д.) |
setUTCSeconds(secondsValue) |
Секунды (аргумент — целое число от 0 до 59) |
setYear(yearValue) |
Год (аргумент — целое число, больше чем 1900) |
setUTCFullYear(yearValue) |
Год (аргумент — целое число, больше чем 1900) |
Объектные переменные
JavaScript использует модель прототипов: при создании объекта определяются его свойства (значения) и методы (функции). В дальнейшем набор свойств и методов может быть изменен. Созданный один раз объект может служить образцом (прототипом) для других объектов. Изменение набора свойств и формирование новых объектов может происходить уже во время выполнения программы.
Кроме того, в JavaScript не всегда проводится четкое различие между объектными и простыми переменными. Для каждого стандартного типа данных существует аналогичный тип объектов. Если переменная не была определена как объект (а задавалась с помощью команды присваивания), то при попытке применить к ней допустимый метод, она автоматически конвертируется в объект.
Кроме того, возможно создание полностью оригинальных объектов со своими свойствами и методами.
Объектная переменная представляет собой набор именованных значений (свойств). Имена свойств и их значения задаются при определении объектной переменной и отделяются друг от друга запятой. Все определение заключается в фигурные скобки:
имя_объекта = {имя_свойства1:значение1, имя_свойства2:значение2,... }
В дальнейшем к свойствам объекта можно обращаться при помощи конструкции имя_объекта.имя_свойства
или
имя_объекта["имя_свойства"]
Пример:
Koshka1 = {imya:"Мурка", cvet: "серая"}
alert("Объект Koshka1 зовут " + Koshka1.imya);
Возможен вариант, когда создание объекта и назначение свойств производится разными командами. В любом случае свойства должны быть определены ДО их использования. Приведенный выше пример определения объекта можно записать так:
Koshka1 = new Object;
Koshka1.imya = "Мурка";
Koshka1.cvet = "серая";
Другой способ создания объектов заключается в создании функции (конструктора), определяющей свойства объекта. В данном шаблоне определяются два свойства:
function имя_функции(параметр1, параметр2) {
this. имя_свойства1 = параметр1;
this. имя_свойства2 = параметр2;
}
После этого объекты создаются при помощи вызова этой функции:
имя_объекта = new имя_функции(значение1, значение2);
Пример.
function Koshka (i, c){
this.imya = i;
this.cvet = c;
}
Koshka2 = new Koshka ("Баська", "белая");
Koshka3 = new Koshka ("Чушка", "черная");
Еще один способ создания объекта заключается в определении функции-конструктора без параметров. Например:
function KO (){
this.imya = "";
this.cvet = "";
}
В этом случае для создания нового объекта используется свойство prototype:
Koshka4.prototype = new KO;
Для определения свойств используются операции присваивания:
Koshka4.imya = "Белка";
Koshka4.cvet = "рыжая";
Кроме свойств, в объектах можно определять и методы. Как правило, метод реализуется с помощью некоторой функции.
В примере, приведенном ниже, создается объектная переменная yabloko и определяются ее свойства plod, sort и метод zrelost. Первое свойство определяется с помощью строковой константы, свойство sort повторяет значение обычной переменной. Метод zrelost создает строковое значение с помощью функции Zrelost1(vremya). Таким образом, программисту предоставляется возможность создавать самые разнообразные объекты.
<SCRIPT language="javascript">
var sortyabloka = "Антоновка";
var vremya = "осень";
function Zrelost1(vremya) {
switch (vremya) {
case "осень" :
return "зрелое";
case "зима" :
return "зрелое";
case "весна" :
return "гнилое";
case "лето" :
return "незрелое";
default :
return "неизвестно";
}
}
// Определение объектной переменной
yabloko = {plod: "фрукт", zrelost: Zrelost1(vremya), sort: sortyabloka}
// Вывод информации
document.write(yabloko.plod + "<br>"); // что за плод
document.write(yabloko.zrelost + "<br>"); // степень зрелости
document.write(yabloko.sort + "<br>"); // сорт
</SCRIPT>
Для объектных переменных можно создавать новые свойства уже после того, как объект создан. Например, можно добавить новое свойство к объекту yabloko:
yabloko.tsvet = "зеленое";
По аналогии, можно добавлять и новые методы с использованием шаблона:
имя_объекта.имя_метода = имя_функции;
Обратите внимание, что используется только имя функции, а круглые скобки и имена параметров не указываются.
Метод можно вызывать и при необходимости передать параметры функции:
имя_объекта.имя_метода(параметры_функции);
К значениям объектной переменной можно обращаться как элементам массива (с использованием квадратных скобок и порядкового номера), но только в том случае, если эти значения были определены соответствующим образом. Номера НЕ соответствуют определенным ранее именованным свойствам.
Пример. Если определено свойство объекта objekt (как строковое значение)
objekt[1] = "Первое свойство";
то присвоить переменной s это значение можно так:
s = objekt[1];
Оператор new. Стандартные типы переменных и объектов
Создание новой переменной заданного типа. Часто с помощью этого оператора определяется объектная переменная.
Шаблон:
имя_объекта = new тип_объекта ( параметр1 [,параметр2] ...);
В данной конструкции допускается использовать следующие стандартные типы:
Array — массив;
Boolean — логический тип;
Date — дата (время);
Function — функция;
Image — изображение;
Number — числовой тип;
Object — объект;
Option — элемент списка;
RegExp — регулярное выражение (с использованием шаблона);
String — строка.
Пример 1. Определение нового массива:
var browsers = new Array("FF","MO","MS","NS","OP");
Пример 2. Получение текущей даты (текущего времени):
var now = new Date();
Пример 3. Создание объекта-рисунка и предварительная (без отображения на Web-странице) загрузка изображения:
ris01 = new Image;
ris01.src = "dog01.jpg";
Объект-функция
Наряду с вышеописанным синтаксисом определения функций, существует альтернативный вариант — определение функции как объектной переменной.
Шаблон для определения функции следующий:
имя_функции = new Function ([arg1, arg2, ... argn], "набор_команд");
В данном случае — [arg1, arg2, ... argn] необязательный набор аргументов, а "набор_команд" — строка, содержащая все команды функции.
Особенностью данной конструкции является то, что функция может быть переопределена во время выполнения кода.
Недостаток заключается в сложности передачи параметров. Рекомендуется использовать вместо параметров глобальные переменные.
Пример. Функция для динамического изменения фона Web-страницы.
В элементе SCRIPT необходимо поместить определения:
clr = "green";
setBGColor = new Function("document.bgColor=clr");
В секции BODY можно поместить кнопку для запуска функции.
<INPUT name="k1" type="button" value="Тест функции-объекта" onClick="setBGColor()">
Метод valueOf
Метод valueOf() позволяет получить так называемое «примитивное» значение объекта. Тип возвращаемого значения изменяется в зависимости от типа объекта. Для числовых данных это величина, записанная в определенном формате. Для дат — число миллисекунд, характеризующих дату (числовой тип). Для строковых данных — сама строка. Для логических данных — константы true или false.
Примеры:
n1 = .35e-4;
v1 = n1.valueOf(); .// числовое значение 0.000035
d1 = new Date("May 2, 2006");
v1 = d1.valueOf(); // числовое значение 1146513600000
s1 = "Текст";
v1 = s1.valueOf(); // строковое значение "Текст"
L1 = true;
v1 = L1.valueOf(); // логическое значение true
Определение типа объекта (свойство constructor)
С помощью свойства constructor можно определить тип некоторых объектов JavaScript. В таблице приведены примеры использования этого свойства.
Определение объекта |
Выражение, возвращающее true |
m = new Array; |
m.constructor == Array |
m = [определение элементов массива]; |
m.constructor == Array |
l = new Boolean(); |
l.constructor == Boolean |
d = new Date(); |
d.constructor == Date |
n = new Number(15); |
n.constructor == Number |
s = new String(); |
s.constructor == String |
x = new Object; |
x.constructor == Object |
x = {определение свойств объекта} |
x.constructor == Object |
Оператор in
Оператор in создает условное выражение и позволяет проверить существование некоторого свойства или объекта.
Если mass — имя некоторого массива, то выражение для проверки существования третьего элемента этого массива выглядит так:
3 in mass
Проверка наличия свойства объекта выполняется по такому шаблону:
свойство in объект
В качестве примера приведен код для проверки существования строки и определения ее длины:
len = -1;
stroka = new String("Microsoft Internet Explorer")
if ("length" in stroka) {
len = stroka.length; // результат 27
}
Оператор instanceof
Данный оператор позволяет создать логическое выражение для проверки типа переменной. Общий шаблон для использования оператора следующий:
имя_переменной instanceof допустимый_тип;
Пример. Если переменная now имеет тип «дата/время», происходит вывод ее значения:
var now = new Date();
if (now instanceof Date) {
document.write(now + "<br>"); // вывод текущей даты
}
Оператор typeof
Возвращение типа переменной или объекта.
Пример:
var1 = "Microsoft Internet Explorer";
var2 = new String("Microsoft Internet Explorer");
s1 = typeof var1; // результат string
s2 = typeof var2; // результат object
В таблице приведены возможные значения оператора typeof:
Команда, тип или значение |
Значение typeof |
var m1 = new Function(); |
function |
var m2 = "Москва"; |
string |
var m3 = 15; |
number |
var m4 = new Date(); |
object |
неопределенная переменная |
undefined |
true |
boolean |
null |
object |
document.lastModified |
string |
window.length |
number |
Math.LN2 (константа) |
number |
blur() (функция) |
function |
parseInt (метод) |
function |
shape.split() |
function |
Оператор delete
Данный оператор позволяет удалить некоторую переменную или объект. Рассмотрим несколько примеров.
Удаление переменной:
delete имя_переменной;
Удаление элемента массива:
delete имя_массива[номер_элемента];
Удаление объекта:
delete объект;
Удаление свойства объекта:
delete объект.свойство;
Регулярные выражения. Объект RegExp
Регулярные выражения — это шаблоны для обработки текстовой информации. Они позволяют уменьшить число ошибок при наборе текста пользователем или преобразовать данные. Кроме того, существуют несколько методов, которые позволяют упростить написание кода, отвечающего диалог с пользователем. В регулярные выражения могут входить обычные текстовые фрагменты, спецсимволы, а также конструкции, которые задают правила написания строк, вводимых пользователем.
Для определения регулярных выражений используются два способа, например:
re = /ab+c/;
re = new RegExp("ab+c");
В операторах присваивания регулярное выражение заключается в слэши, а при использовании оператора new — в кавычки.
На рис. 4.2 показан пример регулярного выражения. В таком выражении указывается, какие символы может ввести пользователь (в данном примере — телефонный номер). По правилам такой шаблон заключается в слэши.

Рис. 4.2. Пример регулярного выражения
Первая группа знаков \(? означает, что на данном месте может находиться необязательная левая скобка. Обратный слэш необходим, чтобы показать, что скобка не является спецсимволом (без слэша такая скобка имела бы совсем другое значение), а знак вопроса указывает на необязательность.
Вторая группа знаков указывает, что далее должны следовать три цифры. Конструкция \d обозначает любую цифру, а конструкция {3} — повторение этого символа три раза.
Третья группа знаков обозначает необязательную правую скобку.
Четвертая группа знаков ([-\/\.]) указывает, что на этом месте может находиться дефис, слэш или точка. Поскольку слэш и точка имеют особый смысл в регулярных выражениях (т.е. являются спецсимволами), они предваряются обратными слешами, чтобы показать, что в данном случае слэш и точка используются как обычные символы). Квадратные скобки указывают на возможность использования только одного символа из трех, а круглые позволяют сослаться на данную конструкцию в дальнейшем и требуют от броузера отдельного сохранения данного фрагмента в памяти.
Пятая группа знаков \d{3} требует ввода еще трех цифр.
Шестая группа \1 ссылается на первое выражение, указанное в круглых скобках. В нашем примере такое выражение одно — позволяющее ввести дефис, слэш или точку. Такой подход позволяет использовать сложные конструкции в выражении только один раз и в дальнейшем только ссылаться на них.
Седьмая, последняя группа знаков \d{4} требует ввода четырех цифр.
В результате пользователю разрешается вводить десятизначные телефонные номера в следующих форматах.
(111)-222-3333
(111).222.3333
(111)/222/3333
111-222-3333
111.222.3333
111/222/3333
Это, безусловно, ограничивает количество возможных ошибок, но данный подход имеет свои недостатки. Например, введенная строка с одной скобкой (111-222-3333 будет опознана как правильная.
Код, позволяющий реализовать данное регулярное выражение, показан ниже. Такую Web-страницу можно использовать для тестирования регулярных выражений. Последнее задается при помощи оператора присваивания. Для получения данных из формы и поиска информации в строке используется метод exec(). Если введенный текст не соответствует шаблону, возвращается значение null. Если введенный текст соответствует шаблону, метод возвращает массив, первый элемент которого повторяет введенный текст (например, result[0]="(111)-222-3333"), а последующие содержат зафиксированные в памяти фрагменты, которые в регулярном выражении указаны в круглых скобках. В нашем примере это четвертая группа, а второй элемент массива таков: result[1]="-". Данный пример показывает, как можно получить значение разделителя, использованного в текстовой строке.
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<TITLE>Регулярные выражения</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
re = /\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;
function test_phone_number(s) {
result = re.exec(s); // вывод окна для набора текста
if (result != null)
alert("Выражение введено правильно: " + result[0]);
else
alert(s + " - это неправильный формат!");
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER><H1>Регулярные выражения</H1></CENTER>
Введите телефонный номер и нажмите кнопку
«Проверить»:
<FORM name="forma">
<INPUT TYPE="text" name="s1"><BR>
<INPUT TYPE="button" name="k1" value="Проверить"
onClick="test_phone_number(document.forma.s1.value);">
</FORM>
</BODY>
</HTML>
Ниже приведены спецсимволы для составления регулярных выражений. Определенную трудность в их использовании представляет роль обратного слэша. В шаблоне можно использовать спецсимволы «крышка», «доллар», «звездочка», «плюс», «знак вопроса» и «точка». Если в выражении эти символы надо использовать в традиционном понимании (как часть обычного текста), их надо предварять обратным слэшем.
Но другие спецсимволы используются с обратным слэшем, например: \d, \f, \n и др. Если соответствующие литеры (d, f, n) надо использовать именно как буквы обычного текста, обратный слэш не требуется.
Спецсимвол |
Описание |
abc |
Произвольный текстовый фрагмент позволяет вводить содержащие его строки, но возвращается значение только этого фрагмента. Например, регулярное выражение /abc/ позволит ввести строки "abc", "1abc", "abcs", но во всех случаях будет возвращено значение "abc" |
\ |
Изменение статуса символа. Если некий знак используется как спецсимвол, обратный слэш превращает спецсимвол в обычный символ. Пример:
* — спецсимвол, разрешающий использовать на этом месте любое количество символов;
\* — символ «звездочка»;
Другие спецсимволы требуют использования обратного слэша. Например:
\d — спецсимвол, требующий ввода одной цифры |
^ |
Признак, что строка должна начинаться с указанного фрагмента. Например, конструкция ^F требует, чтобы строка начиналась с буквы F ("Fantomas") |
$ |
Требование закончить строку определенным символом. Например, конструкция $s требует, чтобы строка заканчивалась буквой s ("Fantomas") |
* |
Звездочка используется в традиционном смысле: она указывает, что на этом месте может находиться любая последовательность символов (в том числе, символы могут отсутствовать) |
+ |
Допускается повторение указанного символа один и более раз. Например, регулярное выражение /a+/ позволит ввести строки "a", "aa", "aaa" и т.д. |
? |
Данный знак ставится после символа, ввод которого необязателен (см. пример со скобками выше) |
. |
Точка позволяет отобрать из строки указанный фрагмент и символ перед фрагментом. Например, регулярное выражение /.om/ позволит ввести строку "Fantomas" и возвратит "tom". Но то же выражение не позволит ввести строку "omas" |
(x) |
Здесь x — некоторый текстовый фрагмент. Строка считается набранной правильно, если в ней присутствует этот фрагмент. Возвращается только это значение. Кроме того, указанные фрагменты распределяются по элементам массива (см. пример с телефонным номером выше). Например, при задании регулярного выражения /(ab)(cd)/ и сроки ввода "abcdef" будет возвращено:
нулевой элемент массива — "abcd";
первый элемент массива — "ab";
второй элемент массива — "cd" |
(?:x) |
Здесь x — некоторый текстовый фрагмент. Строка считается набранной правильно, если в ней присутствует этот фрагмент. Возвращается только это значение. Но указанный фрагмент не помещается в отдельный элемент массива. Например, при задании регулярного выражения /(?:ab)(cd)/ и сроки ввода "abcdef" будет возвращено:
нулевой элемент массива — "abcd";
первый элемент массива — "cd" |
x|y |
Вертикальная черта указывает, что допускается ввод фрагмента x или y. Например, регулярное выражение /дом|сад/ позволит использовать при вводе строки: "дом", "домашний", "сад", "садовый", но возвратит (в зависимости от введенного текста) строку "дом" или "сад" |
x(?=y) |
Разрешает ввести строку, в которой фрагмент y следует за фрагментом x.
Пример 1. Регулярное выражение /мото(?=цикл)/ позволит ввести строку "мотоцикл", но возвратит строку "мото". Нельзя будет ввести строки "мото" или "мотоблок".
Пример 2. Регулярное выражение /мото(?=цикл|роллер)/ позволит ввести строки "мотоцикл" или "мотороллер", но возвратит строку "мото". |
x(?!y) |
Разрешает ввести строку, в которой фрагмент y не следует за фрагментом x. Возвращает фрагмент x.
Пример. Регулярное выражение /мото(?!цикл|роллер)/ не позволит ввести строки "мотоцикл" или "мотороллер", но определит как правильные строки "мото" или "мотоблок". В случае успешного ввода возвратит строку "мото". |
{n} |
Здесь n — целое положительное число. Данная конструкция располагается после указанного фрагмента и требует повтора этого фрагмента не менее n раз. Например, регулярное выражение /a{3}/ позволит ввести строку "aaaa", но возвратит строку "aaa". Регулярное выражение /ba{3}/ позволит ввести строку "baaaa", но возвратит строку "baaa". Регулярное выражение /(ba){3}/ позволит ввести строку "bababa", и возвратит в нулевом элементе массива строку "bababa", а в первом элементе массива — строку "ba" |
{n,} |
Здесь n — целое положительное число. Данная конструкция располагается после указанного фрагмента и требует повтора этого фрагмента не менее n раз. При этом возвращается любое количество повторенных фрагментов. Например, регулярное выражение /a{3,}/ позволит использовать строку "aaaaa" и возвратит ее же. |
{n,m} |
Здесь n и m — целые положительные числа. Данная конструкция располагается после указанного фрагмента и требует повтора этого фрагмента не менее n и не более m раз. Например, регулярное выражение /a{2,3}/ позволит использовать строку "aa" и возвратит ее же, а при использовании строки "aaaaa" возвратит "aaa" |
[abc] |
Требование ввода одного из перечисленных символов. Например, регулярное выражение /[abc]/ возвратит строку "a" при вводе строк "abc", "may" или "a1". При задании шаблона с большим количеством знаков допускается указывать диапазон с использованием дефиса, например [a-m] |
[^xyz] |
Запрет на использование в строке указанных символов. Например, для запрета латинских букв «a», «b» и «c» можно указывать такие шаблоны: [^abc] или [^a-c] |
[\b] |
Символ «backspace» (удаление символа слева от курсора) |
\b |
Требует наличия границы слова (например, пробела). При использовании шаблона /\b/ большинство строк опознаются как правильно введенные, но не возвращается никакое значение. Например, при использовании шаблона /n\b/ будет возвращена строка "n" при вводе строки "fun key". Данный спецсимвол не работает в сочетании с русскими буквами. |
\B |
Требование отсутствия границы слова. Например, при использовании регулярного выражения /n\B/ будет возвращено значение null при вводе строки " fun key " и значение "n" при вводе строки " funkey" |
\cX |
Здесь X — клавиша, которая используется в сочетании с клавишей Ctrl. Например, шаблон /\cM/ требует использования символа Ctrl+M |
\d |
Цифра. Для десятичной системы можно указать еще и так:
[0-9] |
\D |
Любой символ кроме цифры |
\f |
Символ разрыва страницы |
\n |
Символ разрыва строки |
\r |
Символ возврата каретки |
\s |
Одиночный пробел в широком смысле (white space). Могут использоваться символы «пробел», «табуляция», «разрыв страницы», «разрыв строки». Другая форма записи:
[ \f\n\r\t\v\u00A0\u2028\u2029] |
\S |
Любой символ, кроме символов категории «white space». Другая форма записи:
[ ^\f\n\r\t\v\u00A0\u2028\u2029]. |
\t |
Символ горизонтальной табуляции |
\v |
Символ вертикальной табуляции |
\w |
Латинская буква, цифра или символ подчеркивания. Другая форма записи:
[A-Za-z0-9_] |
\W |
Любой символ кроме латинской буквы, цифры или символа подчеркивания. Другая форма записи:
[^A-Za-z0-9_] |
\n |
Здесь n — целое положительное число. Обратная ссылка на один из фрагментов, указанных в круглых скобках. Данный спецсимвол позволяет не повторять одинаковые фрагменты (см. пример с телефонным номером выше) |
\0 |
Символ NUL |
\xhh |
Символ, закодированный двухразрядным шестнадцатеричным числом (hh) |
\uhhhh |
Символ, закодированный четырехразрядным шестнадцатеричным числом (hhhh) |
Ниже представлен список методов объекта RegExp.
Метод exec
Поиск необходимой подстроки в строке. Результаты возвращаются в виде массива (см. пример выше).
Метод test
Подобно методу exec выполняет поиск необходимой строки но, возвращает только значение true или false (в зависимости от результата поиска)
Пример. Функция для определения присутствия необходимого фрагмента (удовлетворяющему регулярному выражению) в строке. Первый аргумент — регулярное выражение, второй аргумент — строка. Оператор if полезен для отладки, но его можно убрать, и функция будет только возвращать логическое значение.
function testre(reg, stroka){
tst1 = reg.test(stroka);
if (tst1){
alert("Фрагмент найден");
}
else {
alert("Фрагмент НЕ найден");
}
return tst1;
}
Для проверки работы функции можно использовать форму. В ней для примера задано регулярное выражение /abc/.
<FORM name="forma">
<INPUT type="text" name="s1"><br>
<INPUT type="button" name="k2" value="Проверить testre() "
onClick="testre(/abc/, document.forma.s1.value);">
</FORM>
Метод match
С ключом g (см. пример ниже) данный метод работает так же, как и метод exec: в массив помещаются все найденные фрагменты. Без ключа метод возвращает только первый найденный фрагмент.
Пример. С помощью регулярных выражений можно создать функцию для выделения слов из текста. Поскольку спецсимвол \w определяет только латинские буквы, знак подчеркивания и цифры, шаблон необходимо дополнить дефисом и русскими буквами, а также добавить символ «плюс», разрешающий любое количество символов. Для выделения слова необходимо определить разделители, причем надо учитывать, что в конце текста разделитель обычно отсутствует. В результате получается следующее определение разделителей: \s{0,}. В приведенном ниже примере игнорируются знаки препинания в тексте.
<SCRIPT language="Javascript">
re1 = /[-А-Яа-я\w]+\s{0,}/g;
stroka = "Ну-ну, это просто фраза.";
mas = stroka.match(re1);
document.write(mas); // для отладки
</SCRIPT>
В результате работы данного кода массив получит следующие значения:
mas[0]="Ну-ну",
mas[1]="это ",
mas[2]="просто ",
mas[3]="фраза ".
Метод search
Поиск в строке фрагмента, удовлетворяющего регулярному выражению. В случае успеха метод возвращает 0, и -1, если фрагмент не найден.
Пример.
<SCRIPT language="Javascript">
re1 = /abc/;
stroka = "abcabc";
tst = stroka.search(re1);
document.write(tst); // вывод 0
</SCRIPT>
Метод replace
Поиск фрагмента в строке и замена его на новый.
Шаблоны метода:
replace(re, str)
replace(re, function),
где re — регулярное выражение, str — новый строковый фрагмент, function — функция, которая запускается во время выполнения метода и возвращает значение для замены.
В строковом выражении, определяющем замену, можно использовать дополнительные спецсимволы.
Спецсимвол |
Описание |
$$ |
Вставка знака доллара |
$& |
Вставка найденной строки |
$` |
Вставка части строки, которая находится перед найденной |
$´ |
Вставка части строки, которая находится после найденной |
$n |
Здесь n — целое положительное число. Вставка указанного по номеру фрагмента, которому в регулярном выражении соответствует код в круглых скобках |
Пример 1. Поменять местами два слова. В регулярном выражении использованы два ключа:
g — производить несколько замен;
i — не различать буквы верхнего и нижнего регистра.
<SCRIPT language="Javascript">
re2 = /([-А-Яа-я\w]+)\s([-А-Яа-я\w]+)/gi;
str1 = "Один Два"; // исходная строка
str2 = str1.replace(re2, "$2 $1");
document.write(str2); // вывод: Два Один
</SCRIPT>
Пример 2. Если в строке ввода набрано целое число, произвести с ним математическую операцию (в данном примере — умножение на 2). В противном случае строка остается неизменной. Результат выводится в модальном окне.
<SCRIPT language="Javascript">
function process1(s2){
st3 = s2;
re3 = /\d+/;
st3 = s2.replace(re3, function (s2) {
return 2*Number(s2);});
alert(" Было " + s2 + "\nСтало " + st3);
}
</SCRIPT>
Введите строку и нажмите кнопку
<FORM name="forma">
<INPUT type="text" name="s1">
<INPUT type="button" name="k1" value="Кнопка"
onClick="process1 (document.forma.s1.value);">
</FORM>
Метод split
Метод служит для разбиения строки на несколько фрагментов и помещения их в массив. Метод рассматривался в разделе, посвященном строковым данным. В этом примере в качестве разделителя используется регулярное выражение. В задачу входит очистка телефонного номера от символов, не являющихся цифрами. В методе join() в качестве аргумента (вид разделителя) необходимо указать пустую строку. Результат выводится в модальном окне (что можно использовать для отладки), хотя в реальной задаче результат может быть зафиксирован в переменной для последующего использования. К примеру, введенный телефонный номер
(111) 222-333-444
преобразуется в строку 111222333444.
Данный код можно поместить целиком внутри элемента BODY или перенести элемент SCRIPT в секцию HEAD Web-страницы.
<SCRIPT language="Javascript">
function process2(t2){
re4 = /[^\d]/; // возможный разделитель (не число)
st4 = t2.split(re4, 100);
t3 = st4.join("");
alert(t3); // вывод результата
}
</SCRIPT>
Введите телефонный номер и нажмите кнопку
<FORM name="forma2">
<INPUT type="text" name="t1">
<INPUT type="button" name="k1" value="Кнопка"
onClick="process2(document.forma2.t1.value);">
</FORM>
Операции, циклы и условные операторы
Логические операции
В условных операторах используется сравнение величин. Ниже приведены примеры использования операций сравнения.
Обозначение |
Описание |
Пример истинного выражения
|
== |
Равно (два знака равенства). Сравнение двух операндов. Если величины разного типа, они автоматически приводятся к одному типу |
3 == "3" |
!= |
Не равно. Сравнение двух операндов. Если величины разного типа, они автоматически приводятся к одному типу |
4 != "3" |
===
|
Строго равно (три знака равенства). Проверка величин двух операндов одного типа |
3 === 3 |
!== |
Строго не равно (восклицательный знак и два знака равенства). Проверка величин двух операндов одного типа |
3 !== '3' |
>
|
Больше |
4 > 3 |
>= |
Больше или равно |
4 >= 3 |
<
|
Меньше |
3 < 4 |
<= |
Меньше или равно |
3 <= 4 |
Для составления логического выражения можно использовать круглые скобки и следующие логические операторы:
! — логическое отрицание;
|| — логическое ИЛИ;
&& — логическое И.
Пример:
(a == b) && (c != d)
Бинарные операции
Бинарные операции позволяют работать с операндами как с двоичными числами, хотя на самом деле операнды задаются в восьмеричной, шестнадцатеричной или десятичной системах. Максимальная разрядность операндов, с которыми проводятся бинарные операции — 32 бита. Ниже приведены возможные бинарные операции.
Запись кода |
Операция |
Комментарий |
a & b |
Бинарное И |
В двоичном формате:
1100 & 1010 = 1000 |
a | b |
Бинарное ИЛИ |
В двоичном формате:
1100 | 1010 = 1110 |
a ^ b |
Операция XOR |
В двоичном формате:
1100 ^ 1010 = 0110 |
~ a
|
Бинарное НЕТ |
Инвертирование битов |
a << b |
Сдвиг влево |
Сдвиг влево битов операнда a на количество разрядов, указанное в операнде b (2 << 8 = 512) |
a >> b |
Сдвиг вправо с сохранением знака |
Сдвиг вправо битов операнда a на количество разрядов, указанное в операнде b. Знаковый разряд не изменяется (-512 >> 8 = -2) |
a >>> b |
Сдвиг вправо |
Сдвиг вправо операнда a на количество разрядов, указанных в операнде b. Например:
(4 >>> 1 = 2) |
Бинарные логические операции отличаются тем, что операция проводится поразрядно с числом в двоичном представлении.
Однократная операция сдвига влево эквивалентна умножению числа на 2.
Однократная операция сдвига вправо эквивалентна делению на 2 (с отбрасыванием дробной части) для неотрицательных чисел. Это относится к операциям >> и >>>.
При выполнении операции >>> для неотрицательного числа освободившиеся справа разряды заполняются нулями. При выполнении той же операции для отрицательного числа освободившиеся справа разряды заполняются единицами. Например:
-2 >>> 1 = 2147483647 (31 единица в двоичном формате)
Для тестирования бинарных операций можно использовать несложный код:
<SCRIPT language="javascript">
a = 12; // 1100
b = 10; // 1010
s = 0;
s = a & b;
</SCRIPT>
<INPUT type="button" value="Ответ" onClick="alert(s)">
Он помещается в секцию BODY и позволяет создать на Web-странице кнопку, при нажатии которой появляется результат операции в десятичном формате.
Последовательность выполнения операций
Ниже в таблице приведен список операций в порядке убывания приоритета при вычислении сложных выражений или проверке сложных условий.
|
Операция
|
Оператор
|
|
Выбор объекта
|
. []
|
|
Вычисление функций,
создание и определение переменных
|
() new
|
|
Инвертирование, инкремент,
декремент
|
!
~
-
+
++
--
typeof void delete
|
|
Умножение, деление
|
*
/
%
|
|
Сложение, вычитание
|
+
-
|
|
Бинарный сдвиг
|
<<
>>
>>>
|
|
Сравнение
|
<
<=
>
>= in instanceof
|
|
Проверка равенства
(неравенства)
|
==
!=
===
!==
|
|
Бинарное И
|
&
|
|
Бинарное XOR
|
^
|
|
Бинарное ИЛИ
|
|
|
|
Логическое И
|
&&
|
|
Логическое ИЛИ
|
||
|
|
Условие
|
?:
|
|
Присваивание
|
=
+=
-=
*=
/=
%=
<<=
>>=
>>>=
&=
^=
|=
|
|
Запятая
|
,
|
Оператор void
Оператор позволяет вычислить выражение или выполнить команду, но не возвращает никаких значений.
Шаблоны:
void (выражение_или_команда)
или
void выражение_или_команда
Пример 1. Создание гиперссылки, которая не вызывает реакцию броузера после щелчка на ней:
<A href="javascript:void(0)">Пустая гиперссылка</A>
Пример 2. Если Web-страница содержит форму с именованным элементом
<FORM action="действие" method="post" name="form1">
то можно создать гиперссылку для очистки этой формы:
<A href="javascript:void(document.form1.reset())">Очистка формы</A>
По аналогии можно создать гиперссылку для отправки данных формы, если вместо функции reset() использовать функцию submit().
Цикл do...while
Цикл do...while (дословно переводится «делать…пока») позволяет выполнять заключенный в него программный код до тех пор, пока выполняется условие.
do {
Набор команд
}
while (условие)
Обратите внимание, что тело сложного оператора, так же как и тело функции, выделяется при помощи фигурных скобок. Строки кода (команды, операции присвоения, вызовы функций и др.) завершаются (отделяются друг от друга) точкой с запятой.
Программный код данного цикла выполняется один раз, перед тем как будет проверено условие. После этого, если условие истинно, программный код выполняется еще раз (и затем снова происходит проверка условия). Если условие оказывается ложным, выполнение цикла прекращается и выполняется следующая после цикла команда.
Цикл while
Данный цикл записывается по следующему шаблону:
while (условие){
Набор команд
}
В цикле while сначала происходит проверка условия, и если оно истинно выполняется вложенный программный код. Поэтому в данном цикле (в отличие от цикла do...while) внутренние команды могут не выполняться ни разу.
Цикл for
Цикл for используют для того, чтобы выполнить программный код заданное число раз. В качестве примера показана программа, позволяющая создать числовой массив и заполнить его нулями.
var Massiv = new Array();
var n = 25;
for (i = 0; i < n; i++) {
Massiv[i] = 0;
}
В данном примере цикл использует три параметра: начальное значение счетчика, условие выполнения цикла и команду изменения значения счетчика. Это традиционный способ использования такого цикла, но ни один из параметров не является обязательным. Если отсутствует условие, то цикл станет выполняться до тех пор, пока не будет прерван другим способом. Если отсутствует команда изменения значения счетчика, ее может заменить аналогичная команда в теле цикла. Если количество параметров меньше трех, символы «точка с запятой» определяют, какой параметр используется.
Цикл может иметь и несколько счетчиков. В этом случае параметры разделяются запятой. Ниже приведен пример цикла для заполнения данными двух массивов.
var M1 = new Array();
var M2 = new Array();
var n = 25;
for (i = 0, j=100; i < n; i++, j++) {
M1[i] = 0;
M2[i] = j;
}
Оператор ? : (присвоение по условию)
Данная конструкция позволяет проверить условие и, в зависимости от результата, присвоить переменной одно из двух значений. Общий вид оператора такой:
условие ? величина_1 : величина_2;
Например, при проверке версии броузера можно сократить размер строки, хранящей название программы:
nav = navigator.appName; // проверка названия броузера
brows = (nav == "Microsoft Internet Explorer") ? "MS" : "Не MS";
В этом случае переменной brows будет присвоено значение «MS», если используется броузер корпорации Microsoft и «Не MS» в противном случае.
Условный оператор if...else
Условный оператор if...else (дословно переводится как «если…иначе») используется там, где выполнение программы надо поставить в зависимость от значения выражения (условия).
Шаблон:
if (условие) {
Набор команд 1
}
[else {
Набор команд 2
}]
Блок else не обязателен. Команды в этом блоке выполняются, если условие имеет значение false. Возможны несколько вариантов выполнения команд в этом условном операторе. Если блок else отсутствует, выполняется «набор команд 1», если условие истинно, или не выполняются никакие команды. При наличии блока else выполняется или «набор команд 1» или «набор команд 2», в зависимости от условия.
Пример. При заполнении форм можно организовать проверку заполнения полей. Если существует форма с именем f1 и текстовое поле в ней с именем p1 и названием «Адрес», то функция проверки может выглядеть так:
function Adres() {
if (document.f1.p1.value.length > 0) {
return true
}
else {
alert("Необходимо ввести адрес");
return false
}
}
Функция возвращает логическое значение, и сама может быть использована в условном операторе (в данном примере — для отправки данных формы).
function Send_form() {
if (Adres()) {
document.f1.submit(); // отправка данных
}
}
При выполнении функции Send_form() выполняется функция Adres(), и может быть выведено сообщение на экран.
Условный оператор switch...case
Оператор switch...case тоже является условным, но выражение, которое является его параметром, не обязательно должно быть логическим. Оно может принимать любые значения. Важно только, чтобы эти значения были указаны как метки в блоках case. Тогда будет выполнен один из многих вариантов кода. Если значение выражения не равно ни одной метке, выполняется блок default. Ниже приведен шаблон оператора. Обратите внимание, что фигурные скобки использованы только один раз, так как варианты кода разделены операторами case.
switch (выражение) {
case метка1 :
Набор команд 1
case метка2 :
Набор команд 2
...
default :
Набор команд n
}
Пример использования этого оператора приведен в разделе «Объектные переменные».
Оператор break
С помощью оператора break (который используется как обычная команда) можно прервать работу цикла.
Пример. С помощью цикла for выполняется перебор элементов массива M1. Цикл прерывается в том случае, когда один из элементов массива оказывается равен переменной var01. Переменная n сохраняет номер элемента массива. Если требуемого элемента не существует, переменная n сохраняет значение -1.
n = -1;
for (i = 0; i < M1.length; i++) {
if (M1[i] = var01) {
n = i;
break;
}
}
Оператор continue
Данный оператор используется в операторах цикла for, do…while и while для безусловного перехода к началу цикла (к команде проверки условия). Часто этот оператор используется, если внутри цикла есть условный оператор if или switch.
Например, во время выполнения данного цикла (он выполняется один раз) на экран будет выведено только сообщение «Alert 1»:
do {
alert("Alert 1");
continue;
alert("Alert 2");
}
while (false)
Метки
В документации по JavaScript декларирована возможность использования меток. В первую очередь метки должны использоваться в циклах.
Метка представляет собой имя и двоеточие, например:
metka :
Тогда для перехода к метке предусматривается использование операторов
continue metka;
или
break metka;
Но на самом деле большинство броузеров не поддерживают эту конструкцию.
Обработка ошибок. Операторы throw и try...catch
В тексте программы можно предусматривать генерацию идентификатора ошибки (или сообщение) при выполнении определенного условия. Для фиксации момента возникновения ошибки необходим оператор throw, а обработку ошибки осуществляет оператор try...catch.
В примере выводится окно с приглашением ввести некоторый текст. В том случае, когда функция prompt() возвращает пустую строку, выводится сообщение об ошибке.
<SCRIPT language="javascript">
function user_input() {
s1 = prompt("Введите текст", ""); // диалоговое окно
if (s1 != "") {
return s1;
}
else {
throw "Вы ничего не ввели"; // генерация кода ошибки
}
}
try {
stroka = user_input(); // попытка выполнить команду
}
catch (error1) { // обработка ошибки
stroka = " ";
alert(error1); // вывод сообщения об ошибке
}
</SCRIPT>
Для оператора try можно предусмотреть несколько блоков catch. Например, если существует несколько операторов генерации идентификатора ошибки, написанных по принципу:
throw "string_i";
где i — номер, то возможно использование шаблона:
try {
Команда, которая может вызвать ошибку
}
catch (err1 if err1 == " string _1") {
Обработка ошибки с кодом 1
}
catch (err1 if err1 == " string _2") {
Обработка ошибки с кодом 2
}
catch (err1 if err1 == " string _3") {
Обработка ошибки с кодом 3
}
catch (err1){
Обработка ошибки с неизвестным кодом
}
Есть еще несколько правил использования этих операторов.
1. Возможно использование одиночного блока catch:
catch (переменная) {
Код для обработки ошибки
}
2. Возможно использование вложенных блоков try...catch.
3. Блок try можно дополнить блоком finally, команды которого будут выполняться обязательно, вне зависимости от того, есть ошибка или нет:
try {
stroka = user_input(); // попытка выполнить команду
}
catch (error1) { // обработка ошибки
stroka = " ";
alert(error1); // вывод сообщения об ошибке
}
finally {
alert("Блок try отработал"); // обязательное сообщение
}
|