Основы JavaScript презентация

2014 © EPAM Systems, RD Dep.
Содержание
Общие сведения о JavaScript
Что нужно для работы JavaScript
Общий синтаксис JavaScript
Переменные и типы данных JavaScript
Определение и преобразование типов данных
Основные функции JavaScript, с которых надо начать
Операторы и управляющие конструкции JavaScript
Математические функции JavaScript
Функции JavaScript, определяемые пользователем
Работа с массивами в JavaScript

2014 © EPAM Systems, RD Dep.
Содержание
Работа со строками в JavaScript
Функции JavaScript по работе с датой и временем
Обработка событий в JavaScript, работа с DOM
Отложенное выполнение функций в JavaScript
Работа с XML / JSON в JavaScript
Обработка ошибочных ситуаций и исключений в JavaScript
ООП в JavaScript
Регулярные выражения в JavaScript
Использование XMLHttpRequest
Кроссдоменные запросы

2014 © EPAM Systems, RD Dep.
Disclaimer: этот материал является кратким вводным курсом в JavaScript. Пожалуйста, не считайте его полным исчерпывающим руководством. Очень многие темы мы будем рассматривать упрощённо, на уровне, минимально достаточном для решения тривиальных задач.
Фактически, этот материал является ответом на вопрос «что надо знать о JavaScript, чтобы писать на PHP (или ином сервероориентированном высокоуровневом языке)» ☺.

ОБЩИЕ СВЕДЕНИЯ О JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения о JavaScript
2014 © EPAM Systems, RD Dep.
JavaScript (JS) – язык программирования, предназначенный в первую очередь для расширения возможностей клиентской части веб-приложений.
Основные факты:
Программы на JS хранятся в виде исходного текста.
Большая часть синтаксиса JS пришла по наследию из языка C.
JS – прототипно-ориентированный (об этом чуть позже), нестроготипизированный, интерпретируемый.
В основном используется в браузерах (или иных клиентах), но существует и серверная реализация.

Что можно сделать с помощью JavaScript
2014 © EPAM Systems, RD Dep.
JS
Работа на стороне клиента
Работа на стороне сервера
«Экзотическое использование»
Например, в браузере
Например, Node.js
Даже для программирования микроконтроллеров ☺

ЧТО НУЖНО ДЛЯ РАБОТЫ JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Что нужно для работы JavaScript
2014 © EPAM Systems, RD Dep.
Поскольку мы будем в основном рассматривать JavaScript для работы с браузером, то нам понадобится:
Браузер ☺.
Редактор с подсветкой синтаксиса или полноценная IDE.
См. примеры в папке 01_js_samples_misc

Что нужно для работы JavaScript
2014 © EPAM Systems, RD Dep.
Говоря «браузер», мы подразумеваем Firefox, т.к. в нём доступно множество удобных инструментов, основной из которых для нас – Firebug (http://getfirebug.com)

Что нужно для работы JavaScript
2014 © EPAM Systems, RD Dep.
Также для работы с JavaScript можно использовать:
PhpStorm
WebStorm
Eclipse
NetBeans
И т.д.

Запуск в браузере
2014 © EPAM Systems, RD Dep.
Код JavaScript можно писать «внутри HTML» или подключать как внешние файлы:
JavaScript: первый пример
<br> alert('Hi!');<br>
window.onload=function(){document.getElementById('sample').innerHTML='Hi again!';};
См. пример в файле 01_js_samples_misc\01_first_sample.html

Запуск в браузере
2014 © EPAM Systems, RD Dep.
Поскольку наш курс посвящён основам JavaScript, мы не будем погружаться в дебри, и в процессе рассмотрения примеров будем использовать редактор с подсветкой синтаксиса для написания JavaScript-кода и браузер для его выполнения.
Приступим к рассмотрению самого JavaScript…

ОБЩИЙ СИНТАКСИС JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Команды JavaScript
2014 © EPAM Systems, RD Dep.
Как уже было сказано, код на JavaScript можно заключать в тег
или подключать из внешних файлов
.
В отличие от PHP,
нельзя «разрывать», т.е. вот так – НЕЛЬЗЯ:<br><p><script><br>if (1==1)<br> {<br>
<br> alert('OK');<br> }<br>

Комментарии в JavaScript
2014 © EPAM Systems, RD Dep.
JavaScript предоставляет два способа вставки комментариев.
x=9; // комментарий
/*
и это тоже комментарий
*/

Регистрочувствительность
2014 © EPAM Systems, RD Dep.
JavaScript чувствителен к регистру – везде: в именах функций, переменных, объектов и т.д.
<br> var1 = 'A';<br> vAr1 = 'B';<br> alert(var1+vAr1);<br>
Это – РАЗНЫЕ переменные! Пусть отличие и заключается всего лишь в регистре одной буквы. Частая ошибка: написать getelementbyid() вместо getElementById() и удивляться, что ничего не работает.

Точки с запятыми в JavaScript
2014 © EPAM Systems, RD Dep.
В JavaScript НАДО писать точки с запятыми в конце строк. НАДО! Несмотря на то, что они являются опциональными, вы рискуете получить такой интересный эффект:
function f1()
{
return
{
x: 99
}
}
f1()
function f2()
{
return {
x: 99
}
}
f2()
function f3()
{
return; {
x: 99;
}
}
f3();
undefined
Object { x=99}
undefined

Точки с запятыми в JavaScript
2014 © EPAM Systems, RD Dep.
Вторая частая ошибка – отсутствие «;» после «присвоения функции переменной»:
var func = function() { return false; };
Да, здесь нужна «;». Да, иногда работает и без неё. Нет, не всегда.

ПЕРЕМЕННЫЕ И ТИПЫ ДАННЫХ JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Переменные в JavaScript
2014 © EPAM Systems, RD Dep.
ВАЖНО!
JavaScript – нестроготипизированный язык: переменные в нём могут менять свой тип в процессе выполнения программы.
JavaScript не накладывает строгих ограничений на участие в выражениях переменных разных типов.
Переменные не нужно объявлять отдельно, они «объявляются» через инициализацию при первом использовании.

Переменные в JavaScript
2014 © EPAM Systems, RD Dep.
Имя переменной может состоять из букв, цифр, символов «$» и «_», при этом первый символ не должен быть цифрой.
var someVariable;
var newVariable15;
var $ = 15;
var _ = 17;

Переменные в JavaScript
2014 © EPAM Systems, RD Dep.
Вопросы области видимости переменных мы рассмотрим чуть позже, но пока важно запомнить одно правило: всегда объявляйте ваши локальные переменные в функциях с использованием ключевого слова var:
var someVariable;
var newVariable15;
var $ = 15;
var _ = 17;

Типы данных в JavaScript
2014 © EPAM Systems, RD Dep.
JavaScript поддерживает следующие типы данных: объектные и элементарные (которые тоже можно трактовать как объектные).
Элементарные
Объектные
Boolean
Number
String
null
Object
Array
undefined
Function
String
И т.д. ☺
Для каждого элементарного типа есть соответствующий объект, но использовать их не рекомендуется. Элементарные типы автоматически интерпретируются как объекты при вызовах методов.
alert(typeof "test"); // string
alert(typeof new String("test")); // object
Хорошая дополнительная информация:
http://habrahabr.ru/post/150730/

Элементарные типы данных: Boolean
2014 © EPAM Systems, RD Dep.
Boolean используется для хранения только двух логических значений: «истина» или «ложь».
a = true; // Не TRUE
b = false; // Не FALSE

Элементарные типы данных: Number
2014 © EPAM Systems, RD Dep.
Number используется для хранения чисел и, фактически, представляет собой float64 (8-мибайтную дробь). Эта особенность приводит к очень неприятным последствиям при вычислениях.
a = 1;
b = 2;
c = a + b; // 3
a = 0.1;
b = 0.2;
c = a + b; // 0.30000000000000004

Элементарные типы данных: Number
2014 © EPAM Systems, RD Dep.
В отличие от множества других языков в JavaScript операции с числами никогда не приводят к явному сообщению об ошибке, вместо этого используются специальные значения:
x = 1/0; // Infinity
x = -1/0; // -Infinity
x = Number('lalala'); // NaN

Элементарные типы данных: Number
2014 © EPAM Systems, RD Dep.
Q: И как тогда получить вменяемый результат при работе с дробями?
A: Через методы toFixed(), Math.floor(), Math.round(), Math.ceil().
a = 0.1;
b = 0.2;
c = a + b; // 0.30000000000000004
d = c.toFixed(2); // "0.30"
e = Math.round(c*100)/100; // 0.3
Math.round(число) округляет число до целых.

Элементарные типы данных: String
2014 © EPAM Systems, RD Dep.
String используется для хранения строк. Строки в JavaScript должны быть заключены в одинарные или двойные кавычки. В отличие от PHP, между этими вариантами НЕТ разницы.
a = "Text";
b = 'Text';
c = 'Hotel \'Minsk\'';
d = "Hotel 'Minsk'";
e = "Hotel \"Minsk\"";
f = "Long \
line";
Если в строке содержится такая же кавычка, какими строка обрамлена, её надо экранировать.
Если строку надо «разорвать» для «продолжения со следующей строки», место разрыва «экранируется».

Элементарные типы данных: String
2014 © EPAM Systems, RD Dep.
Напомним, что в JavaScript элементарные данные автоматически интерпретируются как объекты при вызове методов, т.е.:
a = "Text";
b = a.length; // 4
c = "Lalala".length; // 6
d = '\u1553'; // "ᕓ"
e = d.length; // 1

Элементарные типы данных: null
2014 © EPAM Systems, RD Dep.
null говорит о том, что переменная не содержит допустимых Number, String, Boolean, Array или Object. Т.е. переменная ЕСТЬ, но значения у неё НЕТ.
ВАЖНО! null в JavaScript – НЕ то же самое, что null в PHP (в котором «переменной нет» === «переменная равна null»).
ВАЖНО! null в JavaScript – это объект, но НЕ экземпляр Object ☹.
var x = null;
Хорошее пояснение – здесь:
http://habrahabr.ru/post/171359/

Элементарные типы данных: undefined
2014 © EPAM Systems, RD Dep.
Переменная равна undefined в случае, если она не существует, или была объявлена, но не проинициализирована.
var x;
if (x == undefined)
{
// Какой-то код ☺.
}

Элементарные типы данных: разница между null и undefined
2014 © EPAM Systems, RD Dep.
Итак, ещё раз:
undefined – переменной нет, или ей не было присвоено значение.
null – переменная есть, но её значение – «пустота».
var a;
var b = document.getElementById('non_existing_element');
var c = 999;
c = null;
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
if (a == null)
{
console.log('a is null');
}
if (a == undefined)
{
console.log('a is undefined');
}
if (b == null)
{
console.log('b is null');
}
if (b == undefined)
{
console.log('b is undefined');
}
if (c == null)
{
console.log('c is null');
}
if (c == undefined)
{
console.log('c is undefined');
}
undefined
object
object
a is null
a is undefined
b is null
b is undefined
c is null
c is undefined

Объектные типы данных: Object
2014 © EPAM Systems, RD Dep.
Object в JavaScript – это коллекция свойств и методов. В общем случае можно выделить такие типы объектов:
внутренние объекты (например, Array, String и т.д.);
создаваемые объекты;
объекты среды (например, window, document и т.д.);
объекты ActiveX (не актуально для не MSIE).
ВАЖНО! Объекты в JavaScript – НЕ то же самое, что классические объекты в других языках программирования! Они НЕ создаются на основе описания классов!

Объектные типы данных: Object
2014 © EPAM Systems, RD Dep.
Например, такое прекрасно работает в JavaScript, но не в других языках:
var someObject = new Object();
someObject.name = "SomeFruit";
someObject.price = 999;
someObject.getPrice =
function ()
{
return this.price;
};
console.log(someObject.name);
console.log(someObject.price);
console.log(someObject.getPrice());
SomeFruit
999
999

Объектные типы данных: Array
2014 © EPAM Systems, RD Dep.
Array – специальный объект для хранения данных (в т.ч. разных типов). Многомерные массивы не поддерживаются в явном виде, но легко эмулируются.
ВАЖНО! JavaScript считает размером (длиной) массива «последний числовой ключ + 1» вне зависимости от реального положения дел.
Рассмотрим на примере…

Объектные типы данных: Array
2014 © EPAM Systems, RD Dep.
Пример работы с массивами в JavaScript:
var names = new Array();
names[0] = "John";
names[1] = "Anna";
names[999] = "Jack";
names['test'] = "Test";
console.log(names[1]);
console.log(names.length);
console.log(names[555]);
Anna
1000
undefined

Объектные типы данных: Array
2014 © EPAM Systems, RD Dep.
Если нужен многомерный массив…
var names = new Array();
names[0] = new Array("Иванов", "Иван", "Иванович");
names[1] = new Array("Петров", "Пётр", "Петрович");
console.log(names[0]);
console.log(names[1][1]);
console.log(names[1][999]);
["Иванов", "Иван", "Иванович"]
Пётр
undefined

Объектные типы данных: Array
2014 © EPAM Systems, RD Dep.
И, наконец: если вы хотите получить «нормальный ассоциативный массив», вам для этого надо использовать… объект! ☺
var something = new Object();
something.name = "Test";
something.price = 100;
something.weight = 11.55;
for (var key in something)
{
console.log(something[key]);
}
Test
100
11.55

Объектные типы данных: Array
2014 © EPAM Systems, RD Dep.
Q: Можно ли в JavaScript обращаться к элементам массива напрямую в процессе вызова функции, возвращающей массив?
A: Да.
var fnc = function()
{
return new Array(10, 20, 30);
}
console.log(fnc()[1]);
20

Объектные типы данных: Function
2014 © EPAM Systems, RD Dep.
В JavaScript существует множество встроенных функций и возможность создавать собственные. Раз мы говорим о типах данных, рассмотрим пока вот такой пример:
var fnc = function()
{
return "Test";
}
console.log(typeof(fnc));
fnc();
function
"Test"

Константы в JavaScript
2014 © EPAM Systems, RD Dep.
Ранее JavaScript не поддерживал константы, и такой код может не сработать в старых версиях браузеров.
const a = 99;
console.log(a);
99

ОПРЕДЕЛЕНИЕ И ПРЕОБРАЗОВАНИЕ ТИПОВ ДАННЫХ
2014 © EPAM Systems, RD Dep.

Определение типа переменной
2014 © EPAM Systems, RD Dep.
Для определения типа переменной используется оператор
string typeof var
который возвращает тип переменной в виде строки:
boolean;
nember;
string;
object;
function;
null;
undefined.

Определение типа переменной
2014 © EPAM Systems, RD Dep.
Пример использования:
console.log(typeof 37); // number
console.log(typeof 3.14); // number
console.log(typeof Math.LN2); // number
console.log(typeof Infinity); // number
console.log(typeof NaN); // number (хоть Nan -- это и Not-A-Number)
console.log(typeof Number(1)); // number
console.log(typeof ""); // string
console.log(typeof "bla"); // string
console.log(typeof (typeof 1)); // string
console.log(typeof String("abc")); // string
console.log(typeof true); // boolean
console.log(typeof false); // boolean
console.log(typeof Boolean(true)); // boolean
console.log(typeof undefined); // undefined
console.log(typeof lalala); // undefined
console.log(typeof {a:1}); // object
console.log(typeof [1, 2, 4]); // object (используйте Array.isArray или Object.prototype.toString.call
// для различения объектов и массивов)
console.log(typeof new Date()); // object
console.log(typeof new Boolean(true)); // object
console.log(typeof new Number(1)); // object
console.log(typeof new String("abc")); // object
console.log(typeof function(){}); // function
console.log(typeof Math.sin); // function
console.log(typeof null); // object

Определение типа переменной
2014 © EPAM Systems, RD Dep.
Пример распознавания типа объекта:
var arr = new Array(10, 20, 30);
if (typeof arr === "object")
{
console.log("Да, это массив, но массив -- это ведь объект.");
}
if (Array.isArray(arr))
{
console.log("Теперь мы точно знаем, что это -- массив.");
}
if (Object.prototype.toString.call(arr) === "[object Array]")
{
console.log("Так тоже работает!");
}
Да, это массив, но массив -- это ведь объект.
Теперь мы точно знаем, что это -- массив.
Так тоже работает!

Определение принадлежности классу
2014 © EPAM Systems, RD Dep.
Для определения того, является ли переменная экземпляром некоторого класса, используется оператор
boolean instanceof var
который возвращает true или false.
var someString = new String();
var someDate = new Date();
console.log(someString instanceof String); // true
console.log(someString instanceof Object); // true
console.log(someString instanceof Date); // false
console.log(someDate instanceof Date); // true
console.log(someDate instanceof Object); // true
console.log(someDate instanceof String); // false

Преобразование типа переменной
2014 © EPAM Systems, RD Dep.
Для преобразования типа переменной используется синтаксис
переменная = Тип(переменная)
например
var a=1;
console.log(typeof a);
a = String(a);
console.log(typeof a);
Внимание! В большинстве случаев преобразование типа МЕНЯЕТ значение переменной!
number
string
Обязательно прочитайте: http://jibbering.com/faq/notes/type-conversion/

Преобразование к Boolean
2014 © EPAM Systems, RD Dep.
false
true
false
0
0.0
NaN
Пустая строка
null
true
Непустая строка
Всё остальное, что не перечислено слева.
undefined
+/- Infinity

Преобразование к Number
2014 © EPAM Systems, RD Dep.
Из boolean
Из Number
false ? 0
true ? 1
См. далее ☺.
Из string
См. далее ☺.
Из null
null ? 0
Из undefined
undefined ? NaN
Из Object
Object ? NaN

Преобразование к Number
2014 © EPAM Systems, RD Dep.
var str = "99";
var int = 1;
console.log(str+int); // 991, конкатенация
console.log((+str)+int); // 100, сложение
Самым простым способом преобразования переменной к числу является её использование в математической операции:
Использование унарного + является одним из самых простых и быстрых способов преобразования переменной к числу, равно как использование двойного отрицания, т.е. !!, является одним из самых простых и быстрых способов преобразования к boolean.

Преобразование к Number
2014 © EPAM Systems, RD Dep.
var str = "99.9";
parseInt(str); // 99
parseFloat(str); // 99.9
var str = " 99.9 lalala";
parseInt(str); // 99
parseFloat(str); // 99.9
var b = true;
parseInt(b); // NaN
Также для преобразования к числу можно использовать parseInt() и parseFloat()
Как и PHP, JavaScript пытается извлечь из строки число, стоящее в её начале (пробелы перед числом игнорируются). Но! Если PHP в любом случае получает число (0, если извлекать нечего), то JavaScript получает NaN во всех случаях, когда из строки не удалось извлечь число.

Преобразование к String
2014 © EPAM Systems, RD Dep.
Из Boolean
Из Array, Object, Function
true ? “true”
false ? “false”
Array ? строка с элементами
Object ? “[object Object]”
Function ? текст функции
Из null
null ? “null”
Неявное преобразование к string происходит при выводе переменной в выходной поток.
Из undefined
? “undefined”

Преобразование к Array
2014 © EPAM Systems, RD Dep.
Из Boolean, String, null, undefined
Из Object и Function
Массив с одним элементом – исходным значением.
Массив с одним элементом – исходным значением.
Из целого числа
Массив соответствующего размера с undefined элементами.
Из дроби
Ошибка создания массива.

Преобразование к Array
2014 © EPAM Systems, RD Dep.
var i = 2;
var d = 55.5;
var dt = new Date();
var obj = new Object;
obj.x = 100;
obj.y = 200;
var n = null;
var u;
Array(i); // [undefined, undefined]
Array(d); // RangeError: invalid array length
Array(dt); // [Date {Thu Feb 27 2014 11:00:57 GMT+0300
(Kaliningrad Standard Time)}]
Array(obj); // [Object { x=100, y=200}]
Array(n); // [null]
Array(u); // [undefined]

Преобразование к Object
2014 © EPAM Systems, RD Dep.
Из Function
Пустой объект.
Переменная остаётся функцией.
Из Boolean, Number, null, undefined
Фактически – массив. Объект с нумерованными свойствами (символами строки).
Из String
Эти нумерованные свойства-символы – ReadOnly! См. http://msdn.microsoft.com/en-us/library/ecczf11c%28v=vs.94%29.aspx
и
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Важно!
2014 © EPAM Systems, RD Dep.
Преобразование типов в JavaScript достаточно нетривиально, а потому:
Обязательно почитайте дополнительный материал, книги.
Старайтесь не использовать преобразование там, где в этом нет необходимости.
Обязательно тестируйте свой код. Могут быть очень неожиданные сюрпризы.
См. пример в файле 01_js_samples_misc\02_var_compare.html

Преобразование и переключение типов
2014 © EPAM Systems, RD Dep.
В JavaScript существует два механизма изменения типов данных:
преобразование – переменная меняет тип (и, возможно, значение);
переключение – копия переменной подвергается преобразованию, а сама переменная остаётся незатронутой.
Переключение
Преобразование
a = 10;
a = String(a);
a = 10;
b = true;
c = a + b;

Гибкое (мягкое) сравнение (==)
2014 © EPAM Systems, RD Dep.

Жёсткое (строгое) сравнение (===)
2014 © EPAM Systems, RD Dep.

Небольшая задача для закрепления материала
2014 © EPAM Systems, RD Dep.
В обоих вариантах вам предлагается выяснить, чему равно значение переменной c после выполнения кода.
a="10 cats";
b="5a dogs";
c=a/b;
a="10 cats";
b='5a dogs';
c=a/b;
Вариант 1:
Вариант 2:
NaN
NaN
a=true;
b="5a dogs";
c=a/b;
Вариант 3:
NaN

ОСНОВНЫЕ ФУНКЦИИ JAVASCRIPT, С КОТОРЫХ НАДО НАЧАТЬ
2014 © EPAM Systems, RD Dep.

Функции, которые нужны всегда
2014 © EPAM Systems, RD Dep.
В JavaScript существует несколько функций (и конструкций), которые нужны буквально с первого дня программирования. Рассмотрим их в сравнении с PHP:
echo $var;
print_r($var);
isset($arr[$elem]);
unset($var, $arr[$elem]);
include($filename);
exit(‘Some message…’);
?>
<br>// ??? ☺<br>
См. пример в файле 01_js_samples_misc\03_basic_functions.html

Вывод данных в выходной поток
2014 © EPAM Systems, RD Dep.
Для вывода данных в выходной поток (в PHP за это отвечает конструкция echo) используется несколько вариантов:
В консоли – просто указание переменной, результат последнего присваивания или console.log(x).
В документе: document.write(x) или document.getElementById('id').innerHTML=x;
Быстрый вывод в всплывающем окне: alert(x);
document.write('ABC');
document.getElementById('sample').innerHTML = 'OK';
console.log('Yes');
alert('!!!');

Отладочный вывод данных
2014 © EPAM Systems, RD Dep.
При работе с консолью в Firebug вы можете анализировать в том числе сложные типы данных:
obj = new Object();
obj.a = 99;
obj.b = "ABC";
obj.c = new Array(1, 2 ,3);
obj.d = new Object();
obj.d.a = 555;
console.log(obj);
В PHP аналогичный эффект дают функции print_r() и var_dump().

Проверка существования
2014 © EPAM Systems, RD Dep.
Проверка существование элемента массива или переменной осуществляется сравнением с undefined (НЕ строкой "undefined“!!!) (аналог в PHP – isset() ):
var a = 99;
var b = null;
var c;
if (a === null) {console.log('a is null');}
if (a === undefined) {console.log('a is undefined');}
if (b === null) {console.log('b is null');}
if (b === undefined) {console.log('b is undefined');}
if (c === null) {console.log('c is null');}
if (c === undefined) {console.log('c is undefined');}
b is null
c is undefined

Проверка существования
2014 © EPAM Systems, RD Dep.
ВАЖНО! Нельзя обращаться к элементу в иерархии «через голову» его родителей:
var obj = new Object();
obj.x = 5;
if (obj.x === undefined) {console.log('obj.x is undefined');}
if (obj.y === undefined) {console.log('obj.y is undefined');}
if (zzz.y === undefined) {console.log('zzz.y is undefined');}
obj.y is undefined
ReferenceError: zzz is not defined
Ошибка!

Удаление переменных и элементов массива
2014 © EPAM Systems, RD Dep.
Удаление переменных и элементов массива осуществляется немного по-разному (аналог в PHP – unset() ):
// Ещё один способ инициализации
var arr = [100, 200, 300, 400, 500];
arr.splice(3, 1);
console.log(arr); // [100, 200, 300, 500]
delete arr[2];
console.log(arr); // [100, 200, undefined, 500]
function Fnc(){};
Fnc.prototype = { x: 123 };
var example = new Fnc();
console.log(example.x); // 123
example.x = 456;
console.log(example.x); // 456
delete example.x;
console.log(example.x); // 123 (обращение к родительскому свойству)
z = 555;
delete z;
console.log(z); // 555 (не удаляется; особенно это относится к объявлению с var)
z = undefined;
console.log(z); // undefined

Досрочное прекращение выполнения скрипта
2014 © EPAM Systems, RD Dep.
Для досрочного прекращения выполнения скрипта (аналог в PHP – exit() или die() ) есть несколько альтернативных решений.
function fnc()
{
console.log('Step 1');
return false; // Выход из функции (тут классика).
console.log('Step 2');
}
fnc();
// Остановка скрипта.
throw new Error('Script terminated');
console.log('Step 3');

Сборка скрипта из нескольких файлов
2014 © EPAM Systems, RD Dep.
Прямых аналогов PHP-функций include_*/require_* в JavaScript нет. Решения по сборке скриптов из частей таковы:
Подключить к HTML несколько JS-файлов.
Использовать eval() (но это опасно).
Использовать создание функции из её текста.
var someCode1 = 'console.log("First");'
eval(someCode1);
var someCode2 = 'return "Second";';
var fnc = new Function(someCode2);
console.log(fnc());
First
Second

Несколько очень простых примеров…
2014 © EPAM Systems, RD Dep.
Сейчас в дополнение к уже показанному мы рассмотрим несколько примеров простых и часто используемых в JavaScript действий.
Итак…

Несколько очень простых примеров…
2014 © EPAM Systems, RD Dep.
Определение информации о браузере:
br = navigator.userAgent.toLowerCase();
"mozilla/5.0 (windows nt 6.1; wow64; rv:27.0) gecko/20100101 firefox/27.0"
Это очень упрощённый способ. Погуглите полный. ВНИМАНИЕ! Любые попытки «напрямую» определить версию браузера ненадёжны. Гуглите способы косвенного определения по поведению и поддерживаемым возможностям.

Несколько очень простых примеров…
2014 © EPAM Systems, RD Dep.
Генерация случайных чисел в диапазоне:
function getRandomDouble (min, max)
{
return Math.random() * (max - min) + min;
}
function getRandomInteger (min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandomDouble(100, 200));
console.log(getRandomInteger(100, 200));
150.1573960629088
145

Несколько очень простых примеров…
2014 © EPAM Systems, RD Dep.
Изменение фона всех td на странице:
JavaScript: обработка элементов документа
<br> function makeCellsGreen()<br> {<br> var list=document.getElementsByTagName("td");<br> for (var cell_key in list)<br> {<br> if (list[cell_key].style !== undefined)<br> {<br> list[cell_key].style.backgroundColor = 'green';<br> } <br> }<br> }<br>
Link
См. пример в файле 01_js_samples_misc\04_scan_all_elements.html

ОПЕРАТОРЫ И УПРАВЛЯЮЩИЕ КОНСТРУКЦИИ JAVASCRIPT
2014 © EPAM Systems, RD Dep.

ОПЕРАТОРЫ JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Виды операторов в JavaScript
2014 © EPAM Systems, RD Dep.
Операторы в JavaScript бывают:
Унарными – с одним операндом:
Бинарными – с двумя операндами (таких – абсолютное большинство):
Тернарными – с тремя операндами (такой оператор в JavaScript только один):
b = ! b;
i++;
c = a + b;
x = 10;
y = (x>=10) ? "OK" : "No";

Краткая выдержка из документации
2014 © EPAM Systems, RD Dep.
delete
function
in
instanceof
new
this
typeof
void
Аксессоры: object.property и object["property"]
Арифметические: +, -, *, /, %, ++, --
Запятая: ,
Логические: &&, ||, !
Присваивания: =, +=, -=, *=, /=, >>=, <<=, >>>=, &=, |=, ^=
Сравнения: ==, !=, ===, !==, >, >=, <, <=
Побитовые: &, |, ^, ~, <<, >>, >>>
Строковые: +, +=
Условный: condition ? ifTrue : ifFalse
http://javascript.ru/manual/operator

Выражения с несколькими операторами
2014 © EPAM Systems, RD Dep.
Для простоты рекомендуется запомнить два правила:
JavaScript правильно учитывает приоритет арифметических операций.
В любых иных случаях или не используйте несколько операторов (особенно – разного типа) в одном выражении, или пользуйтесь скобками.
Для желающих понять суть проблемы глубже есть раздел документации, посвящённый ассоциативности операторов:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Оператор присваивания
2014 © EPAM Systems, RD Dep.
Оператор присваивания обозначается знаком = и активно используется для инициализации переменных и присваивания переменным и элементам новых значений:
a = 20;
document.getElementById('some_element').innerHTML = 'OK';
Для операций + - * / % (и многих других) поддерживается сокращённая форма записи оператора присваивания:
a = 2;
a += 1; // a = a + 1;
a %= 2; // a = a % 2;

Присваивание по ссылке
2014 © EPAM Systems, RD Dep.
В JavaScript присваивания по ссылке НЕТ.
Очень упрощённо идею ссылок в JavaScript можно выразить так:
Нельзя хранить объекты, можно хранить ссылки на объекты.
Нельзя передавать по ссылке, но передаются ссылки на объекты.
Ссылок на примитивные значения нет, они не имеют смысла.

Арифметические операторы
2014 © EPAM Systems, RD Dep.
Операции с числами производятся в дробной форме.

Операторы инкремента и декремента
2014 © EPAM Systems, RD Dep.
JavaScript поддерживает префиксные и постфиксные операторы инкремента и декремента числовых переменных. Инкрементирование или декрементирование логических переменных приводит их к числовому виду.

Небольшая задача для закрепления материала
2014 © EPAM Systems, RD Dep.
Что получится в результате выполнения такого кода?
i=2;
i += i++ + ++i;
console.log(i);
// 8
Сейчас будет пояснение…
А в PHP – 10.

Небольшая задача для закрепления материала – пояснение
2014 © EPAM Systems, RD Dep.
i=2;
i += i++ + ++i;
console.log(i);
i == 2;
Срабатывает префиксный инкремент ++i, выражение принимает вид:
i += i++ + 3;
Происходит подстановка закэшированного значения, выражение принимает вид:
i += 2 + 3; или: i += 5;
Происходит «разворачивание» «сокращённой записи сложения и присваивания» +=, выражение принимает вид:
i=2 + 5;
Выполнение выражения (п. 4) даёт i == 7;
Срабатывает постфиксный инкремент i++, который увеличивает значение i на единицу, т.е. теперь i == 8;

Поразрядные операторы
2014 © EPAM Systems, RD Dep.
Эта группа операторов работает с битовыми представлениями значений операндов. В основном эти операторы применяются для создания т.н. «битовых масок», для решения задач криптографии и при генерации изображений.

Логические операторы
2014 © EPAM Systems, RD Dep.
Эта группа операторов используется для определения логического значения выражения (в т.ч. с несколькими операндами). Подробнее мы рассмотрим их в разделе, посвящённом управляющим конструкциям.

Операторы сравнения
2014 © EPAM Systems, RD Dep.
Операторы сравнения позволяют сравнивать между собой значения переменных. Обратите внимание: при «мягком» сравнении («==») будет происходить переключение типов (см. две «большие таблицы» в разделе про типы данных).

Строковые операторы
2014 © EPAM Systems, RD Dep.
В JavaScript есть один строковый оператор – плюс (+). Это оператор конкатенации (склеивания) строк. Он поддерживает сокращённую запись (конкатенацию с присваиванием).
a = 'Hello';
b = a + ' world!';
console.log(b);
a = 'Hello';
a += ' world!';
console.log(a);
Hello world!
Hello world!

Оператор «запятая»
2014 © EPAM Systems, RD Dep.
Оператор «запятая» вычисляет оба операнда и возвращает значение второго, что позволяет включить несколько выражений в то место кода, где должно быть одно выражение.
for (var i=0, j=9; i <= 9; i++, j--)
{
console.log("a[" + i + "][" + j + "]= " + a[i][j]);
}

Оператор проверки принадлежности классу
2014 © EPAM Systems, RD Dep.
Для определения того, является ли переменная экземпляром некоторого класса, используется оператор
boolean instanceof var
который возвращает true или false.
var someString = new String();
var someDate = new Date();
console.log(someString instanceof String); // true
console.log(someString instanceof Object); // true
console.log(someString instanceof Date); // false
console.log(someDate instanceof Date); // true
console.log(someDate instanceof Object); // true
console.log(someDate instanceof String); // false

Оператор определения типа
2014 © EPAM Systems, RD Dep.
Для определения типа переменной используется оператор
string typeof var
который возвращает тип переменной в виде строки:
boolean;
nember;
string;
object;
function;
null;
undefined.
var a = 5;
console.log(typeof a); // "number"
var a = 'test';
console.log(typeof a); // "string"

Оператор доступа к свойству (аксессор)
2014 © EPAM Systems, RD Dep.
Для доступа к свойству объекта или элементу массива используются т.н. «аксессоры».
. или [ ]
Это проще показать на примере:
arr = new Array(100, 200, 300);
obj = new Object({x:111, y:222});
arr.a = 12345;
arr[b] = 67890;
obj.x = 11111;
// obj[y] = 33333; // Так нельзя, это не элемент массива.
console.log(arr.a); // 12345
console.log(arr[a]); // undefined
console.log(arr.b); // undefined
console.log(arr[b]); // 67890
// console.log(obj[x]); // Так нельзя, это не элемент массива.
console.log(obj.y); // 222

Оператор проверки наличия свойства
2014 © EPAM Systems, RD Dep.
Для проверки наличия свойства или метода у объекта или элемента (по индексу!) в массиве используется оператор
boolean in Object
Если этот оператор применить не к объекту, будет ошибка.
obj = new Object({ a: 5});
console.log("a" in obj); // true
console.log("b" in obj); // false
console.log("toString" in obj); // true, т.к toString есть в прототипе.
arr = new Array("a", "b", "c");
console.log(1 in arr); // true
console.log(22 in arr); // false
delete arr[1];
console.log(1 in arr); // false, т.к. элемент удалён.

Оператор удаления
2014 © EPAM Systems, RD Dep.
Для удаления переменной, элемента массива и т.д. используется оператор
boolean delete something
который возвращает false (если удаляемый объект существует и не может быть удалён) или true в любых других случаях..
x = 42; // "Обычные переменные" являются свойствами глобального объекта window.
var y = 43; // Переменная.
obj = new Number();
obj.x = 4; // Свойство объекта.
obj.y = 5; // Свойство объекта.
delete x; // true (x объявлено без var).
delete y; // false (объявлено с var, флаг DontDelete).
delete Math.PI;// false (встроенный объект, флаг DontDelete).
delete obj.x // true (пользовательское свойство).
with(obj)
{
delete y; // true (эквивалент delete obj.y).
}
delete obj; // true

Оператор исполнения
2014 © EPAM Systems, RD Dep.
Исполнения кода без возврата значения и воздействия на контекст используется оператор
void (код)
Например:
someCode = 'x=999;';
x = 1;
void(someCode);
console.log(x); // 1
eval(someCode);
console.log(x); // 999

Операторы function, new, this
2014 © EPAM Systems, RD Dep.
Оператор function используется для создания функций. Об этом будет подробно в разделе, посвящённом функциям.
Оператор new используется для создания объектов. Об этом будет подробно в разделе, посвящённом ООП.
Оператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Об этом будет подробно в разделе, посвящённом ООП.

УПРАВЛЯЮЩИЕ КОНСТРУКЦИИ JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Оператор условия
2014 © EPAM Systems, RD Dep.
Оператор условия (if) может использоваться в JavaScript в нескольких формах.
Самый простой вариант:
x = 10;
if (x == 10)
{
console.log("Десять.");
}

Оператор условия
2014 © EPAM Systems, RD Dep.
Оператор условия может содержать необязательную секцию else (PHP’шного elseif в JavaScript НЕТ!).
x = 10;
if (x == 10)
{
console.log("Десять.");
}
else
{
console.log("Не десять.");
}

Оператор условия
2014 © EPAM Systems, RD Dep.
Оператор условия может быть вложенным (в любой секции).
x = 10;
y = 20;
if (x == 10)
{
if (y == 20)
{
console.log("Десять. Двадцать.");
}
}

Оператор условия
2014 © EPAM Systems, RD Dep.
Условия могут быть сложными (составными), здесь пригодятся уже рассмотренные нами ранее логические операторы. Обратите внимание: в круглые скобки берётся как всё сложное условие целиком, так и каждое простое условие в его составе по отдельности:
x = 10;
y = 20;
if ((x == 10)&&(y==20))
{
console.log("Десять и двадцать.");
}

Оператор переключения
2014 © EPAM Systems, RD Dep.
Оператор переключения (switch) является наиболее удобным средством для организации т.н. «мультиветвления».
a = "One";
switch (a) // Любой тип данных, кроме массивов и объектов
{
case 10:
console.log('Десять.');
break; // Наличие break обязательно в конце каждого case
case 'One':
console.log('Один.');
break; // Наличие break обязательно в конце каждого case
default: // Эта секция может отсутствовать
console.log('Иное значение.');
}

Цикл с предусловием
2014 © EPAM Systems, RD Dep.
Цикл с предусловием может не выполниться ни разу, т.к. условие проверяется перед выполнением тела цикла:
i = 0;
while(++i <= 5)
{
console.log(i);
}

Цикл с постусловием
2014 © EPAM Systems, RD Dep.
Цикл с постусловием выполнится хотя бы один раз, т.к. условие проверяется после выполнения тела цикла:
i = 0;
do
{
console.log(i);
}
while (++i <= 5);

Итерационный цикл
2014 © EPAM Systems, RD Dep.
Итерационный цикл выполняется заданное количество раз, причём его синтаксис включает инициализацию счётчика, условие выхода и правило изменения счётчика:
var i;
for (i=0; i<=5; i++)
{
console.log(i);
}

Итерационный цикл
2014 © EPAM Systems, RD Dep.
Специальная модификация итерационного цикла (for) позволяет проходить по любому массиву (по одному уровню для многомерных массивов), на каждом шаге извлекая ключ элемента:
arr = new Array(100, 200, new Array(1, 2, 3), 300, 400);
for (key_one in arr)
{
if (Object.prototype.toString.call(arr[key_one]) !== '[object Array]')
{
console.log(arr[key_one]);
}
else
{
for (key_two in arr[key_one])
{
console.log(arr[key_one][key_two]);
}
}
}

Пропуск остатка итерации и выход из цикла
2014 © EPAM Systems, RD Dep.
JavaScript позволяет пропустить выполнение части тела цикла и сразу перейти на следующую итерацию с помощью оператора continue. Досрочный выход из цикла выполняется оператором break.
for (var i=0; i<999; i++)
{
if (i<500) continue;
console.log(i);
break;
}

Тернарный оператор
2014 © EPAM Systems, RD Dep.
Управление выполнением программы можно реализовывать и с помощью тернарного оператора – сокращённого аналога оператора if:
x = 10;
y = (x == 10) ? "Десять" : "Не десять";
(y == "Десять") ? console.log("Да") : console.log("Нет");

МАТЕМАТИЧЕСКИЕ ФУНКЦИИ JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Несмотря на то, что JavaScript редко используется для решения математических задач, есть ряд функций, использование которых может оказаться полезным.
Полный список математических функций, предоставляемых объектом Match, можно увидеть здесь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
Настоятельно рекомендуется ознакомиться с этим списком функций – хотя бы для того, чтобы знать, что они есть, и «не изобретать велосипеды».

Округление чисел
2014 © EPAM Systems, RD Dep.
Для округления чисел используются методы Math:
До ближайшего целого: Math.round().
До ближайшего меньшего целого: Math.floor().
До ближайшего большего целого: Math.ceil().
Math.round(55.7777); // 56
Math.floor(55.7777); // 55
Math.ceil(55.7777); // 56
Здесь есть отличный пример доработки для обеспечения округления с заданной точностью: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

Получение случайных чисел
2014 © EPAM Systems, RD Dep.
Для получения случайных чисел используется метод Math.random(), который возвращает дробь от 0 (включительно) до 1 (не включительно).
console.log(Math.random());
Как получить целое число или дробь в заданном диапазоне, мы уже рассматривали ранее.

Перевод чисел между системами счисления
2014 © EPAM Systems, RD Dep.
В JavaScript перевод между системами счисления проще всего выполнить так:
x = 255;
hexString = x.toString(16);
console.log(hexString); // ff
y = parseInt("0xFFFF", 16); // 65535
console.log(y);

Определение минимального и максимального значения
2014 © EPAM Systems, RD Dep.
Методы Math.max и Math.min позволяют искать минимальное и максимально значение в наборе чисел, а с небольшой доработкой – и в массиве чисел.
Math.max(10, 20, 5); // 20
Math.min(-10, -20); // -20
Math.max("ABC", "OK"); // NaN
function getMaxOfArray(numArray)
{
return Math.max.apply(null, numArray);
}
arr = new Array(1, 100, 5, 500);
console.log(getMaxOfArray(arr)); // 500

Определение корректности чисел
2014 © EPAM Systems, RD Dep.
В JavaScript многие операции с числами могут привести к переполнению разрядной сетки. Проверить результат выполнения операций с числами на корректность можно с помощью функций isFinite() и isNaN():
x = 1/0;
y = -1/0;
z = 9e999999999999;
a = 5;
s = "Test";
console.log(isFinite(x)); // false
console.log(isFinite(y)); // false
console.log(isFinite(z)); // false
console.log(isFinite(a)); // true
console.log(isFinite(s)); // false
console.log(isNaN(x)); // false
console.log(isNaN(y)); // false
console.log(isNaN(z)); // false
console.log(isNaN(a)); // false
console.log(isNaN(s)); // true

ФУНКЦИИ JAVASCRIPT, ОПРЕДЕЛЯЕМЫЕ ПОЛЬЗОВАТЕЛЕМ
2014 © EPAM Systems, RD Dep.

Небольшое введение
2014 © EPAM Systems, RD Dep.
Прежде чем продолжить рассмотрение библиотечных функций JavaScript, нужно научиться писать свои собственные функции.
JavaScript следует такой логике при работе с функциями:
Тип возвращаемых значений не указывается и может быть любым.
Тип предаваемых параметров не указывается и может быть любым.
Поддерживается переменное количество параметров.
НЕ поддерживается указание значений параметров по умолчанию.
НЕ поддерживается свободный выбор варианта передачи по ссылке или значению (объекты всегда передаются по ссылке, примитивы – по значению).

Объявление и вызов функции
2014 © EPAM Systems, RD Dep.
В самом простом случае объявление и вызов функции выглядит так:
function sqr(x)
{
return x*x;
}
console.log(sqr(2)); // 4

Область видимости переменных
2014 © EPAM Systems, RD Dep.
В отличие от PHP в JavaScript переменная, используемая в функции без ключевого слова var, является ГЛОБАЛЬНОЙ.
a = 10;
b = 20;
function test()
{
a = 1000;
var b = 2000;
var c = 40;
d = 50;
}
console.log(a); // 10
console.log(b); // 20
test();
console.log(a); // 1000
console.log(b); // 20
//console.log(c); // Ошибка, переменная не существует вне функции.
console.log(d); // 50

Передача параметров по значению и по ссылке
2014 © EPAM Systems, RD Dep.
В JavaScript нельзя выбрать, как передавать параметр в функцию. Действует правило: если параметр – объект, то передаётся ссылка, иначе – значение.
a = 10;
b = new Object();
function test(one, two)
{
one = 50;
two.z = 999;
}
test(a, b);
console.log(a); // 10
console.log(b); // Object { z=999 }

Параметры со значением по умолчанию
2014 © EPAM Systems, RD Dep.
Несмотря на то, что в JavaScript нельзя указать значение параметра по умолчанию, это поведение можно эмулировать:
function fnc(a, b)
{
a = typeof a !== 'undefined' ? a : 999;
b = typeof b !== 'undefined' ? b : "Test";
console.log(a, b);
}
fnc(); // 999 Test
fnc(5); // 5 Test
fnc(7, "Yes"); // 7 Yes

Передача переменного количества параметров
2014 © EPAM Systems, RD Dep.
В JavaScript в функцию можно передать больше параметров, чем указано при её объявлении. Внутри функции к параметрам можно получить доступ с помощью свойства arguments:
function fnc(a, b)
{
console.log(a, b); // A B
for (var i = 0; i < arguments.length; i++)
{
console.log(arguments[i]); // A B C D
}
}
fnc("A", "B", "C", "D");

Рекурсия
2014 © EPAM Systems, RD Dep.
Понятие рекурсии относится к базовым понятиям информатики.
Но если надо его напомнить – говорите. Рассмотрим и запишем.
function fact(x)
{
if (x == 0)
{
return 1;
}
return x*fact(x-1);
}
console.log(fact(5)); // 120

Анонимные функции и замыкания
2014 © EPAM Systems, RD Dep.
JavaScript поддерживает:
анонимные функции – функций, которые объявляются в месте использования и не получают уникального идентификатора для доступа к ним.
замыкания – функции, в теле которых присутствуют (не в качестве параметров) ссылки на переменные, объявленные вне тела этой функции. Такие функции ссылаются на свободные переменные в своём контексте.
Очень полезно:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

Анонимные функции и замыкания
2014 © EPAM Systems, RD Dep.
Создание и использование анонимных функций и замыканий выглядит так:
JavaScript: анонимные функции и замыкания
<br>// Просто функция, которая сработает по факту загрузки документа.<br> function doIt()<br> {<br> // Анонимная функция<br> var sqr = function(x){return x*x};<br> document.getElementById('sample').innerHTML += sqr(2) + '<br>';<br>// Использование замыкания<br> var add5 = makeAdder(5);<br> var add10 = makeAdder(10);<br> document.getElementById('sample').innerHTML += add5(2) + '<br>';<br> document.getElementById('sample').innerHTML += add10(2) + '<br>';<br> }<br>// Замыкание <br> function makeAdder(x)<br> {<br> return function(y)<br> {<br> return x + y;<br> };<br> }<br>
Test me
См. пример в файле 01_js_samples_misc\05_anonymous_and_closures.html

Пространства имён в JavaScript
2014 © EPAM Systems, RD Dep.
Q: Поддерживает ли JavaScript т.н. «пространства имён» (namespaces)?
A: Явным образом – нет. Но их можно эмулировать так:
var yourNamespace = {
fnc1: function() {
},
fnc2: function() {
}
};
...
yourNamespace.fnc1();
Почитать подробнее:
http://msdn.microsoft.com/en-us/magazine/gg578608.aspx

РАБОТА С МАССИВАМИ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Если немного расширить ранее озвученный набор фактов о массивах в JavaScript, получим, что они:
Бывают только динамическими (причём меняться может и мерность массива, но не так легко, как в PHP).
Могут содержать одновременно данные любых типов.
В качестве ключей (индексов) могут использовать как числа, так и строки.
Могут быть использованы для хранения таких классических структур как очереди, стеки, деревья и т.д.

Общие сведения
2014 © EPAM Systems, RD Dep.
Небольшой пример, поясняющий «многомерность массивов» в JavaScript:
var arr = new Array();
//arr[5][7] = 'Test'; // Ошибка!
arr[5] = new Array();
arr[5][7] = 'Test'; // Так – работает.

Общие сведения
2014 © EPAM Systems, RD Dep.
Q: В чём разница объявления массива разными способами?
A: Рассмотрим на примере.
var arr1 = new Array(5); // Массив с пятью undefined элементами
var arr2 = Array(3); // Массив с тремя undefined элементами
var arr3 = []; // Пустой массив
var arr4 = Array(); // Пустой массив
var arr5 = new Array(); // Пустой массив
var arr6 = new Array('A', 'B', 'C'); // Массив с элементами 'A', 'B', 'C'
var arr7 = Array('A', 'B', 'C'); // Массив с элементами 'A', 'B', 'C'
Случаи 1, 5, 6 являются классическими и наиболее рекомендуемыми.

Функции по работе с массивами
2014 © EPAM Systems, RD Dep.
Сейчас мы рассмотрим основные функции по работе с массивами в JavaScript.
Полный их перечень можно увидеть, например, здесь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Важно! В JavaScript рекомендуется использовать Array только для «классических строгоиндексированных» массивов, для ассоциативных лучше использовать Object.

Определение количества элементов в массиве
2014 © EPAM Systems, RD Dep.
Для определения размера массива используется свойство length, которое «реагирует» не на реальное количество элементов, а возвращает «последний индекс + 1».
var arr = new Array(5);
arr[999] = 'Test';
console.log(arr.length); // 1000

Определение, является ли переменная массивом
2014 © EPAM Systems, RD Dep.
Для определения того, является ли переменная массивом, можно использовать Array.isArray():
// Все эти примеры вернут true
Array.isArray([]);
Array.isArray([1]);
Array.isArray( new Array() );
Array.isArray( Array.prototype );
// Все эти пример вернут false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray("Array");
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__ : Array.prototype });

Поиск элемента в массиве
2014 © EPAM Systems, RD Dep.
Для поиска элемента по ключу используется ранее рассмотренное решение со сравнением элемента с undefined. Для поиска элемента по значению используется Array.indexOf(searchElement[, fromIndex]).
var arr = [2, 5, 9, 5];
if (arr[999] === undefined)
{
console.log('Element 999 is not set.')
}
console.log(index = arr.indexOf(5)); // 1
console.log(index = arr.indexOf(555)); // -1
Также см. Array.lastIndexOf(searchElement[, fromIndex])

Поиск элемента в массиве
2014 © EPAM Systems, RD Dep.
Ещё одним способом проверки существования или некоего свойства элементов массива является использование Array.every() и Array.some(), проверяющие с помощью вызова функции тот факт, что все или хотя бы один элемент удовлетворяют некоторому критерию.
function isPositive(element, index, array)
{
return (element > 0);
}
var arr = [2, -5, 8, 1, 4];
console.log(arr.some(isPositive)); // true (числа > 0 есть)
console.log(arr.every(isPositive)); // false (не все числа > 0)

Обработка всех элементов массива
2014 © EPAM Systems, RD Dep.
Для обработки всех элементов массива можно использовать цикл for, а также методы Array.filter() и Array.forEach():
function saveOnlyPositive(element)
{
return element > 0;
}
var arr = [12, -5, -8, -130, 44];
arr = arr.filter(saveOnlyPositive); // [12, 44]
function sqrArrayElements(element, index, array)
{
array[index] = element*element;
}
arr.forEach(sqrArrayElements);
console.log(arr); // [144, 1936]

Обработка всех элементов массива
2014 © EPAM Systems, RD Dep.
И ещё один способ – использование Array.map() позволяет создать новый массив на основе существующего:
var arr = Array('A', 'B', 'C');
var codes = arr.map(function(x) { return x.charCodeAt(0); })
console.log(arr); // ["A", "B", "C"]
console.log(codes); // [65, 66, 67]

Объединение массивов или значений в массивы
2014 © EPAM Systems, RD Dep.
Использование Array.concat() позволяет объединить несколько массивов или несколько отдельных значений в массив:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
nums = nums.concat(999, 1000, 1001);
console.log(nums);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 999, 1000, 1001]

Объединение элементов массива в строку
2014 © EPAM Systems, RD Dep.
Использование Array.join() позволяет объединить элементы массива в строку (используя разделитель, если это необходимо):
var arr = new Array(new Array('Иванов', 'Иван', 'Иванович'), new Array('Петров', 'Пётр', 'Петрович'));
var str1 = arr.join(' ');
var str2 = arr[0].join(' ');
var str3 = arr[1].join();
// Иванов,Иван,Иванович Петров,Пётр,Петрович
console.log(str1);
console.log(str2); // Иванов Иван Иванович
console.log(str3); // Петров,Пётр,Петрович

Сортировка массива
2014 © EPAM Systems, RD Dep.
Для сортировки массива применяется Array.sort() и (если необходимо) Array.reverse():
var arr = new Array('Один', 'Два', 'Три');
function compareByLengthReverse(a, b)
{
if (a.length > b.length)
{
return -1;
}
else
{
if (a.length < b.length)
{
return 1;
}
else
{
return 0;
}
}
}
arr.sort();
console.log(arr); // ["Два", "Один", "Три"]
arr.sort(compareByLengthReverse);
console.log(arr); // ["Один", "Два", "Три"]
arr.reverse();
console.log(arr); // ["Три", "Два", "Один"]

Работа с массивом как со стеком
2014 © EPAM Systems, RD Dep.
В JavaScript есть готовые решения для работы с массивом как со стеком: Array.push() добавляет элемент в конец массива и возвращает новую длину массива, Array.pop() удаляет элемент из конца массива и возвращает значение этого элемента.
var arr = Array(10, 20, 30);
console.log(arr.push(999)); // 4
console.log(arr); // [10, 20, 30, 999]
console.log(arr.pop()); // 999
console.log(arr); // [10, 20, 30]

Работа с массивом как со стеком
2014 © EPAM Systems, RD Dep.
Вторым способом работы с массивом как со стеком является использование Array.unshift() и Array.shift(), которые работают аналогично Array.push() и Array.pop(), но добавляют/удаляют элемент в начале массива:
var arr = Array(10, 20, 30);
console.log(arr.unshift(999)); // 4
console.log(arr); // [999, 10, 20, 30]
console.log(arr.shift()); // 999
console.log(arr); // [10, 20, 30]

Работа с массивом как с очередью
2014 © EPAM Systems, RD Dep.
Соответственно, использование Array.unshift()/Array.pop() и Array.push()/Array. shift(), позволяет работать с массивом как с очередью:
var arr = Array(10, 20, 30);
console.log(arr.unshift(999)); // 4
console.log(arr); // [999, 10, 20, 30]
console.log(arr.pop()); // 30
console.log(arr); // [999, 10, 20]
console.log(arr.push(555)); // 4
console.log(arr); // [999, 10, 20, 555]
console.log(arr.shift()); // 999
console.log(arr); // [10, 20, 555]

Извлечение и удаление части массива
2014 © EPAM Systems, RD Dep.
Для извлечения части массива используется Array.slice(), а для модификации массива (в т.ч. удаления части элементов) – Array.splice().
var arr = Array(10, 20, 30, 40, 50);
arr_new = arr.slice(2, 4);
console.log(arr_new); // [30, 40]
arr.splice(2, 0, 'Test'); // Добавить после 2-го элемента.
console.log(arr); // [10, 20, "Test", 30, 40, 50]
arr.splice(2, 1); // Удалить второй элемент.
console.log(arr); // [10, 20, 30, 40, 50]
arr.splice(3, 1, 'ABC'); // Заменить 3-й элемент строкой.
console.log(arr); // [10, 20, 30, "ABC", 50]

Задача для закрепления материала
2014 © EPAM Systems, RD Dep.
Для лучшего понимания того, как работают массивы, рекомендуется выполнить следующее задание.
Дано: многомерный массив произвольной мерности и произвольного размера (в т.ч. в любом измерении).
Сделать: удалить из массива все строки, а каждое отрицательное число возвести в квадрат.

РАБОТА СО СТРОКАМИ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Если немного расширить ранее озвученный набор фактов о строках в JavaScript, получим, что:
на длину строки нет никаких искусственных ограничений (только объём памяти, доступный скрипту);
JavaScript умеет рассматривать строки как массивы символов.

Функции по работе со строками
2014 © EPAM Systems, RD Dep.
Сейчас мы рассмотрим основные функции по работе со строками в JavaScript.
Полный их перечень можно увидеть здесь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
В JavaScript большое количество задач решается путём выполнения операций над строками, потому рассмотрим это подробно.

Мультибайтовая кодировка строк, определение длины
2014 © EPAM Systems, RD Dep.
JavaScript считает, что строки представлены в кодировке UTF-16, и считает длину строки в символах, а не в байтах (за определение длины строки отвечает свойство length):
var str = new String("한국어");
console.log(str.length); // 3

Экранирование символов
2014 © EPAM Systems, RD Dep.
В некоторых случаях некоторые символы строк должны быть экранированы, чтобы строка могла быть использована в нужном контексте.
В JavaScript нет готового аналога PHP’шной функции htmlspecialchars(), но есть альтернативные решения:
// Вариант 1 – написание своей функции
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/ .replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
var text_string = '
';
// Вариант 2 – через «трюк» с HTML
var div = document.createElement('div');
var text = document.createTextNode(text_string);
div.appendChild(text);
console.log(div.innerHTML); // <htmltag/>
console.log(escapeHtml(text_string)); // <htmltag/>

Работа с отдельными символами строки
2014 © EPAM Systems, RD Dep.
Для получения символа строки или его кодового представления можно использовать String.charAt() и
String.charCodeAt(), а также обращение к строке как к массиву символов:
var str = 'Тест';
console.log(str.charAt(1)); // е
console.log(str.charCodeAt(1)); // 1077
console.log(str[1]); // е
str[1] = '-'; // Так -- не работает!
console.log(str); // Тест

Поиск, замена, разбиение и склеивание строк
2014 © EPAM Systems, RD Dep.
Для поиска вхождения подстроки в строку можно использовать String.indexOf() и String.lastIndexOf():
var str = 'Тестовая строка';
console.log(str.indexOf('т')); // 3
console.log(str.lastIndexOf('т')); // 10
console.log(str.indexOf('abc')); // -1
console.log(str.lastIndexOf('abc')); // -1

Поиск, замена, разбиение и склеивание строк
2014 © EPAM Systems, RD Dep.
Для «вырезания» части строки или разбиения строки в массив подстрок используются: String.slice(), String.substr(), String.substring(), String.split().
var str = 'Тестовая строка';
console.log(str.slice(3, 7)); // това
console.log(str.substr(3, 2)); // то
console.log(str.substring(3, 7)); // това
console.log(str.split(' '));
// ["Тестовая", "строка"]
console.log(str.split(''));
// ["Т", "е", "с", "т", "о", "в", "а", "я",
// " ", "с", "т", "р", "о", "к", "а"]

Поиск, замена, разбиение и склеивание строк
2014 © EPAM Systems, RD Dep.
Для замены подстроки в строке используется String.replace(), для «склеивания строк» – String.concat(), для очистки строки от концевых пробелов – String.trim().
var str = 'Тестовая строка';
console.log(str.replace('ст', '***'));
console.log(str = str.concat('. И ещё одна. '));
console.log(str.trim());
Те***овая строка
Тестовая строка. И ещё одна.~~~~~
Тестовая строка. И ещё одна.
Тильды символизируют пробелы, которых на экране не видно ☺.

Управление регистром
2014 © EPAM Systems, RD Dep.
Для управления регистром строки используются String.toLowerCase() и String.toUpperCase():
var str = 'Тестовая строка';
console.log(str.toLowerCase());
// тестовая строка
console.log(str.toUpperCase());
// ТЕСТОВАЯ СТРОКА

Преобразование строки в веб-ссылку
2014 © EPAM Systems, RD Dep.
Для автоматизации получения из строки полноценной гиперссылки и «ссылки-закладки» используются String.link() и String.anchor().
var humanText = "Tut.by";
var URL = "http://tut.by/";
console.log(humanText.link(URL));
var contentsStart = "Table of Contents";
console.log(contentsStart.anchor("contents_anchor"));
Tut.by
Table of Contents

Работа с регулярными выражениями
2014 © EPAM Systems, RD Dep.
О регулярных выражениях будет чуть позже, но пока отметим, что для применения их к строке используются String.match(), String.search() и String.replace().
var str = "Индекс: 220001";
var regex1 = /\d{6}/;
var regex2 = /\d{10}/;
console.log(str.match(regex1)); // см. ниже
console.log(str.match(regex2)); // null
console.log(str.search(regex1)); // 8
console.log(str.search(regex2)); // -1
console.log(str.replace(regex1, '------')); // Индекс: ------
console.log(str.replace(regex2, '------')); // Индекс: 220001
["220001"]
0 "220001"
index 8
Input "Индекс: 220001"
null
8
-1
Индекс: ------
Индекс: 220001

Хэш-функции
2014 © EPAM Systems, RD Dep.
Q: Есть ли в JavaScript поддержка хэш-функций?
A: Встроенной нет. Но есть вот такое: https://code.google.com/p/crypto-js/

Задания для закрепления материала
2014 © EPAM Systems, RD Dep.
Дан текст (о регистре символов в котором мы ничего не знаем).
Привести текст к виду: “Каждая Первая Буква Слова В Верхнем Регистре, Остальные В Нижнем”.
Привести текст к виду: “Только первая буква – в верхнем регистре, остальные – в нижнем”.
Привести текст к виду: “кАЖДАЯ пЕРВАЯ бУКВА сЛОВА в нИЖНЕМ рЕГИСТРЕ, оСТАЛЬНЫЕ в вЕРХНЕМ”.

Задания для закрепления материала
2014 © EPAM Systems, RD Dep.
Определить, сколько раз в строке встречается каждый из присутствующих там символов (например, в слове test: t = 2, e = 1, s = 1).
Определить длину самого короткого и самого длинного слова в строке, вывести все самые короткие и самые длинные слова.
Определить среднюю длину слова в строке.

ФУНКЦИИ JAVASCRIPT ПО РАБОТЕ С ДАТОЙ И ВРЕМЕНЕМ
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Для работы с датой и временем в JavaScript используется объект Date.
Как и PHP, JavaScript работает с датой-временем в формате UNIXTIME, но отсчитывает с 1-го января 1970-го года не секунды, а милисекунды.
Полную информацию по работе с датой и временем см. здесь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Получение текущих даты и времени
2014 © EPAM Systems, RD Dep.
Для получения информации о текущей дате и текущем времени используется статический метод Date.now().
console.log(Date.now()); // 1393925189676

Получение текущих даты и времени
2014 © EPAM Systems, RD Dep.
Для получения «человекочитаемой» информации о текущей дате и текущем времени огромное количество методов объекта Date, из которых мы на примере рассмотрим основные:
dt = new Date();
console.log(dt.getDate()); // 4 (4-е число)
console.log(dt.getDay()); // 2 (вторник)
console.log(dt.getFullYear()); // 2014
console.log(dt.getHours()); // 12
console.log(dt.getMilliseconds()); // 233
console.log(dt.getMinutes()); // 32
console.log(dt.getMonth()); // 2 (март, нумерация с 0)
console.log(dt.getSeconds()); // 29
console.log(dt.getTime()); // 1393925549233 (unixtime)
console.log(dt.getTimezoneOffset()); // -180 (-3 часа в минутах)

Создание определённого значения даты-времени
2014 © EPAM Systems, RD Dep.
Для создания определённого значения даты-времени используется огромное количество сеттеров, из которых мы также рассмотрим основные:
dt = new Date();
dt.setDate(31);
dt.setFullYear(2015);
dt.setHours(23);
dt.setMilliseconds(0);
dt.setMinutes(30);
dt.setMonth(11);
dt.setSeconds(15);
console.log(dt);
// Date {Thu Dec 31 2015 23:30:15 GMT+0300 (Kaliningrad Standard Time)}

Получение даты-времени в разных форматах
2014 © EPAM Systems, RD Dep.
И, наконец, рассмотрим на примерах получение даты-времени в нескольких наиболее распространённых форматах:
console.log(dt);
console.log(dt.toDateString());
console.log(dt.toISOString());
console.log(dt.toJSON());
console.log(dt.toLocaleDateString());
console.log(dt.toLocaleString());
console.log(dt.toLocaleTimeString());
console.log(dt.toString());
console.log(dt.toTimeString());
console.log(dt.toUTCString());
Date {Thu Dec 31 2015 23:30:15 GMT+0300 (Kaliningrad Standard Time)}
Thu Dec 31 2015
2015-12-31T20:30:15.000Z
2015-12-31T20:30:15.000Z
Thursday, December 31, 2015
Thursday, December 31, 2015 23:30:15
23:30:15
Thu Dec 31 2015 23:30:15 GMT+0300 (Kaliningrad Standard Time)
23:30:15 GMT+0300 (Kaliningrad Standard Time)
Thu, 31 Dec 2015 20:30:15 GMT

Дата и время: Q&A
2014 © EPAM Systems, RD Dep.
Q: Можно ли сразу «создать нужную дату»?
A: Да.
new Date(year, month [, day, hour, minute, second, millisecond])
Q: Есть ли в JavaScript аналог функции PHP date()?
A: Нет.
Q: И checkdate() нет?
A: Нет.
Q: И sleep() / usleep() нет?
A: Нет.

Задача для закрепления материала
2014 © EPAM Systems, RD Dep.
Написать скрипт, который строит календарь за указанный год с указанием дней недели.
[Упрощённый вариант] Календарь может представлять собой просто «ленту дат».
[Усложнённый вариант] Календарь должен представлять собой таблицу 3x4, где каждая ячейка представляет собой один месяц – т.е. «обычный календарь», который каждый из вас видел сотни раз в жизни.

ОБРАБОТКА СОБЫТИЙ В JAVASCRIPT, РАБОТА С DOM
2014 © EPAM Systems, RD Dep.

Общая информация
2014 © EPAM Systems, RD Dep.
Событие в JavaScript – это информация (как правило, от браузера) о том, что что-то произошло.
В общем случае можно выделить такие виды событий:
DOM-события, которые инициируются элементами DOM (например, click, mouseover и т.д.); см. о событиях в HTML-элементах в предыдущем разделе.
События окна (например, resize при изменении размера окна браузера).
Прочие события (например load, readystatechange и т.д.)
Отличное, очень полное и простое пояснение работы событий:
http://javascript.ru/tutorial/events/intro

Обработчики событий
2014 © EPAM Systems, RD Dep.
Чтобы иметь возможность реагировать на возникновение события, нужно назначить для него обработчик. Это можно сделать несколькими способами:
Через атрибут HTML-тега.
Через свойство объекта.
Через специальные решения (в общем случае делящиеся на W3C-совместимые и Microsoft-совместимые).

Обработчики событий: установка через атрибут HTML-тега
2014 © EPAM Systems, RD Dep.
Самый простой способ установки обработчика событий – через атрибут HTML-тега. Можно использовать анонимную функцию или указывать существующую функцию (это – лучше и удобнее).
Кликни здесь (будет alert).
Кликни здесь (ссылка поменяет цвет).
Кликни здесь (будет ещё один alert).
См. пример в файле 01_js_samples_misc\06_events_01.html

Обработчики событий: установка через свойство объекта
2014 © EPAM Systems, RD Dep.
Чуть более хитрый способ навесить обработчик – модифицировать соответствующее свойство элементов. Если надо навесить обработчик на много элементов, удобно использовать замыкания.
<br> function addHandlers()<br> {<br> spanlist = document.getElementsByTagName("span");<br> for (var i=0; i<spanlist.length; i++)<br> {<br> spanlist[i].onclick = microLog;<br> spanlist[i].ondblclick = function()<br> {<br> document.getElementById('message').innerHTML += 'Вы выполнии двойной клик по слову<br>';<br> //this.style.color='red'; Тут это НЕ сработает!<br> }<br> spanlist[i].onmouseover = (function (elem) {<br> return function() {<br> this.style.color='red';<br> // Или: elem.style.color='red';<br> };<br> })(spanlist[i]);<br>spanlist[i].onmouseout = (function (elem) {<br> return function() {<br> this.style.color='black';<br> // Или: elem.style.color='red';<br> };<br> })(spanlist[i]); <br> }<br> }<br>function microLog()<br> {<br> document.getElementById('message').innerHTML += 'Вы кликнули по слову<br>';<br> }<br>
См. пример в файле 01_js_samples_misc\07_events_02.html

Обработчики событий: специальные решения
2014 © EPAM Systems, RD Dep.
Самый правильный способ – использование специальных решений. Сначала – Microsoft-style:
elem = document.getElementById('some_id');
handler = function() {
alert('OK');
};
elem.attachEvent("onclick", handler) // Навесить обработчик.
elem.detachEvent("onclick", handler) // Снять обработчик.

Обработчики событий: специальные решения
2014 © EPAM Systems, RD Dep.
Теперь – W3C-style:
element.addEventListener(имя_события, обработчик, стадия);
element.removeEventListener(имя_события, обработчик, стадия);
Стадия (фаза) перехвата = true, стадия (фаза) всплывания = false. Об этом – совсем скоро. Обычно ставится false.

Обработчики событий: специальные решения
2014 © EPAM Systems, RD Dep.
Пример W3C-style:
function addHandlers()
{
var spanlist = document.getElementsByTagName("span");
for (var i=0; i
{
spanlist[i].addEventListener("click", microLog, false);
// Здесь заодно вспомним о замыканиях.
// Можно получить функцию отдельно...
var handler_red = makeRed(spanlist[i]);
spanlist[i].addEventListener("mouseover", handler_red, false);
// ... или сразу при указании обработчика.
spanlist[i].addEventListener("mouseout", makeBlack(spanlist[i]), false);
}
}
function makeRed(elem)
{
return function()
{
this.style.color='red';
};
}
function makeBlack(elem)
{
return function()
{
elem.style.color='black';
};
}
function microLog()
{
document.getElementById('message').innerHTML += 'Вы кликнули по слову
';
}
См. пример в файле 01_js_samples_misc\08_events_03.html

Порядок выполнения событий, стадии перехвата и всплытия
2014 © EPAM Systems, RD Dep.
В случае, если событие срабатывает на вложенном элементе, оно сработает и на его родителях.
Клик здесь…
… распространится сюда…
… и сюда.

Порядок выполнения событий, стадии перехвата и всплытия
2014 © EPAM Systems, RD Dep.
Если абстрагироваться от кроссбраузерной совместимости, то в общем случае событие «распространяется» в двух направлениях: сначала от самого внешнего элемента к внутреннему (стадия перехвата), а потом обратно (стадия всплытия).
Последовательность срабатывания обработчиков будет такой:
1) outer-catch
2) middle-catch
3) inner-bubble
4) inner-catch
5) middle-bubble
6) outer-bubble

Порядок выполнения событий, стадии перехвата и всплытия
2014 © EPAM Systems, RD Dep.
Вот код, который демонстрирует эту логику:
JavaScript: устновка обработчиков событий
<br> function addHandlers()<br> {<br> document.getElementById("inner").addEventListener("click", innerClickedBubble, false);<br> document.getElementById("middle").addEventListener("click", middleClickedBubble, false);<br> document.getElementById("outer").addEventListener("click", outerClickedBubble, false);<br>document.getElementById("inner").addEventListener("click", innerClickedCatch, true);<br> document.getElementById("middle").addEventListener("click", middleClickedCatch, true);<br> document.getElementById("outer").addEventListener("click", outerClickedCatch, true);<br> }<br> function innerClickedBubble()<br> {<br> document.getElementById('log').innerHTML += 'inner-bubble<br>';<br> }<br>function middleClickedBubble()<br> {<br> document.getElementById('log').innerHTML += 'middle-bubble<br>';<br> }<br>function outerClickedBubble()<br> {<br> document.getElementById('log').innerHTML += 'outer-bubble<br>';<br> }<br>function innerClickedCatch()<br> {<br> document.getElementById('log').innerHTML += 'inner-catch<br>';<br> }<br>function middleClickedCatch()<br> {<br> document.getElementById('log').innerHTML += 'middle-catch<br>';<br> }<br>function outerClickedCatch()<br> {<br> document.getElementById('log').innerHTML += 'outer-catch<br>';<br> }<br>
<br> #outer {<br> width: 100px;<br> height: 100px;<br> border: 1px solid black;<br> }<br>#middle {<br> width: 75px;<br> height: 75px;<br> margin-left: 12px;<br> margin-top: 12px;<br> border: 1px solid black;<br> }<br>#inner {<br> width: 50px;<br> height: 50px;<br> margin-left: 12px;<br> margin-top: 12px;<br> border: 1px solid black;<br> }<br>
См. пример в файле 01_js_samples_misc\09_events_04_event_order.html

Порядок выполнения событий, стадии перехвата и всплытия
2014 © EPAM Systems, RD Dep.
На обеих стадиях можно блокировать дальнейшее распространение события:
event.stopPropagation();
event.preventDefault();
Заодно упомянём полезную вещь – отключения события по умолчанию:
Если обработчик возвращает false, это тоже блокирует событие по умолчанию, но не останавливает дальнейшее распространение событий.
Важно! Другие обработчики этого же события на этом же элементе сработают в любом случае!

Порядок выполнения событий, стадии перехвата и всплытия
2014 © EPAM Systems, RD Dep.
Вот код, который демонстрирует блокировку распространения:
JavaScript: устновка обработчиков событий
<br> function addHandlers()<br> {<br> document.getElementById("inner").addEventListener("click", innerClickedBubble, false);<br> document.getElementById("middle").addEventListener("click", middleClickedBubble, false);<br> document.getElementById("outer").addEventListener("click", outerClickedBubble, false);<br>document.getElementById("inner").addEventListener("click", innerClickedCatch, true);<br> document.getElementById("middle").addEventListener("click", middleClickedCatch, true);<br> document.getElementById("outer").addEventListener("click", outerClickedCatch, true);<br> }<br> function innerClickedBubble(event)<br> {<br> document.getElementById('log').innerHTML += 'inner-bubble<br>';<br> event.stopPropagation();<br> }<br>function middleClickedBubble(event)<br> {<br> document.getElementById('log').innerHTML += 'middle-bubble<br>';<br> event.stopPropagation();<br> }<br>function outerClickedBubble(event)<br> {<br> document.getElementById('log').innerHTML += 'outer-bubble<br>';<br> event.stopPropagation();<br> }<br>function innerClickedCatch(event)<br> {<br> document.getElementById('log').innerHTML += 'inner-catch<br>';<br> event.stopPropagation();<br> }<br>function middleClickedCatch(event)<br> {<br> document.getElementById('log').innerHTML += 'middle-catch<br>';<br> event.stopPropagation();<br> }<br>function outerClickedCatch(event)<br> {<br> document.getElementById('log').innerHTML += 'outer-catch<br>';<br> event.stopPropagation();<br> }<br>
<br> #outer {<br> width: 100px;<br> height: 100px;<br> border: 1px solid black;<br> }<br>#middle {<br> width: 75px;<br> height: 75px;<br> margin-left: 12px;<br> margin-top: 12px;<br> border: 1px solid black;<br> }<br>#inner {<br> width: 50px;<br> height: 50px;<br> margin-left: 12px;<br> margin-top: 12px;<br> border: 1px solid black;<br> }<br>
См. пример в файле
01_js_samples_misc\10_events_05_event_order_no_propagation.html

Объект event и его свойства
2014 © EPAM Systems, RD Dep.
Мы снова опустим вопросы кроссбраузерной совместимости и скажем, что много полезной и интересной информации можно извлечь из свойств «самого события» (да, оно предаётся как объект).
Мы не станем разбирать все свойства события (их очень много), но доработаем наш пример для их показа и посмотрим, что там есть интересного…
Очень хороший дополнительный материал:
http://javascript.ru/tutorial/events/properties

Объект event и его свойства
2014 © EPAM Systems, RD Dep.
Этот код логирует события
в консоль:
JavaScript: устновка обработчиков событий
<br> function addHandlers()<br> {<br> document.getElementById("inner").addEventListener("click", innerClickedBubble, false);<br> document.getElementById("middle").addEventListener("click", middleClickedBubble, false);<br> document.getElementById("outer").addEventListener("click", outerClickedBubble, false);<br> }<br> function innerClickedBubble(event)<br> {<br> console.log(this.id);<br> console.log(event);<br> }<br>function middleClickedBubble(event)<br> {<br> console.log(this.id);<br> console.log(event);<br> }<br>function outerClickedBubble(event)<br> {<br> console.log(this.id);<br> console.log(event);<br> }<br>
<br> #outer {<br> width: 100px;<br> height: 100px;<br> border: 1px solid black;<br> }<br>#middle {<br> width: 75px;<br> height: 75px;<br> margin-left: 12px;<br> margin-top: 12px;<br> border: 1px solid black;<br> }<br>#inner {<br> width: 50px;<br> height: 50px;<br> margin-left: 12px;<br> margin-top: 12px;<br> border: 1px solid black;<br> }<br>
MOZ_SOURCE_CURSOR 4
MOZ_SOURCE_ERASER 3
MOZ_SOURCE_KEYBOARD 6
MOZ_SOURCE_MOUSE 1
MOZ_SOURCE_PEN 2
MOZ_SOURCE_TOUCH 5
MOZ_SOURCE_UNKNOWN 0
NONE 0
buttons 0
defaultPrevented false
mozInputSource 1
mozMovementX 72
mozMovementY 154
mozPressure 0
multipleActionsPrevented false
getModifierState getModifierState()
initNSMouseEvent initNSMouseEvent()
stopImmediatePropagation stopImmediatePropagation()
altKey false
bubbles true
button 0
cancelBubble false
cancelable true
clientX 72
clientY 76
ctrlKey false
currentTarget div#middle
detail 1
eventPhase 3
explicitOriginalTarget div#inner
isChar false
isTrusted true
layerX 72
layerY 76
metaKey false
originalTarget div#inner
pageX 72
pageY 76
rangeOffset 0
rangeParent div#inner
relatedTarget null
screenX 72
screenY 176
shiftKey false
target div#inner
timeStamp 703677937
type "click"
view Window 11_events_06_event_object.html
which 1
getPreventDefault getPreventDefault()
initEvent initEvent()
initMouseEvent initMouseEvent()
initUIEvent initUIEvent()
preventDefault preventDefault()
stopPropagation stopPropagation()
ALT_MASK 1
AT_TARGET 2
BUBBLING_PHASE 3
CAPTURING_PHASE 1
CONTROL_MASK 2
META_MASK 8
SCROLL_PAGE_DOWN 32768
SCROLL_PAGE_UP -32768
SHIFT_MASK 4
См. пример в файле
01_js_samples_misc\11_events_06_event_object.html

Работа с DOM в контексте событий
2014 © EPAM Systems, RD Dep.
Мы уже рассмотрели множество примеров определения обработчиков событий и их функционирования. В завершение этого подраздела рассмотрим, как с помощью JavaScript можно модифицировать DOM-структуру документа (например, в ответ на событие).
Рассмотрим это на очень простом наборе примеров:
Вложенные div’ы.
Рамки вокруг надписей.
Управление таблицей.

Работа с DOM в контексте событий
2014 © EPAM Systems, RD Dep.
Вложенные div’ы (при клике на div мы будем добавлять внутрь него ещё один div):
JavaScript: примеры работы с DOM
<br> function addHandlers()<br> {<br> document.getElementById("div1").addEventListener("click", onClickListener, false);<br> }<br>function onClickListener(event)<br> {<br> var parent_div = event.currentTarget;<br> var child_div = document.createElement('div');<br>event.stopPropagation();<br> parent_div.removeEventListener('click', onClickListener);<br> child_div.style.width = '80%';<br> child_div.style.height = '80%';<br> child_div.style.border = '1px solid black';<br> parent_div.appendChild(child_div);<br> child_div.addEventListener("click", onClickListener, false);<br> }<br>
<br> #div1 {<br> width: 100px;<br> height: 100px;<br> border: 1px solid black;<br> }<br>
См. пример в файле
01_js_samples_misc\12_examples_01_divs.html

Работа с DOM в контексте событий
2014 © EPAM Systems, RD Dep.
При клике по надписям мы будем создавать вокруг них рамки:
JavaScript: примеры работы с DOM
<br> function addHandlers()<br> {<br> var spanlist = document.getElementsByTagName("span");<br> for (var i=0; i<spanlist.length; i++)<br> {<br> spanlist[i].addEventListener("click", makeBox(spanlist[i]), false);<br> }<br> }<br> function makeBox(elem)<br> {<br> var clickHandler = function()<br> {<br> this.style.border='1px solid black';<br> this.removeEventListener('click', clickHandler);<br> };<br> return clickHandler; <br> }<br>
Покликайте по этим словам:
Раз.
Два.
Три.
См. пример в файле
01_js_samples_misc\13_examples_02_boxes.html

Работа с DOM в контексте событий
2014 © EPAM Systems, RD Dep.
Мы сделаем кнопку добавления строки в таблицу, а также в каждой строке кнопку для её удаления:
JavaScript: примеры работы с DOM
<br> function deleteRow(row)<br> {<br> document.getElementById('tbl').deleteRow(row.rowIndex);<br> } <br>function addRow()<br> {<br> var row = document.getElementById('tbl').insertRow(0);<br> var cell1=row.insertCell(0);<br> var cell2=row.insertCell(1);<br> cell1.className='bordered';<br> cell2.className='bordered';<br>var txt = document.createElement('input');<br> txt.type = 'text';<br> txt.className = 'bordered';<br> cell1.appendChild(txt);<br>var remove_button = document.createElement('button');<br> remove_button.innerHTML = 'Удалить';<br> remove_button.onclick=function(){deleteRow(row)};<br> cell2.appendChild(remove_button);<br> }<br>
<br> .bordered {border: 1px solid black;}<br>
Добавить строку
См. пример в файле
01_js_samples_misc\14_examples_03_table.html

ОТЛОЖЕННОЕ ВЫПОЛНЕНИЕ ФУНКЦИЙ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Отложенное выполнение функций в JavaScript может использовать по множеству причин:
В текущий момент ещё не готовы объекты, с которыми должна работать функция.
Ещё просто не подошло время выполнения функции.
Нужно дождаться завершения некоторых операций.
И т.д. ☺
См. очень хороший и подробный материал:
http://javascript.ru/tutorial/events/timing

Отложенное выполнение с setTimeout и setInterval
2014 © EPAM Systems, RD Dep.
Две основных функции для отложенного выполнения кода – это:
timeoutID=setTimeout(expression, msec)
timeoutID=setInterval(expression, msec)
Для отмены их действия вызываются:
clearTimeout(timeoutID)
clearInterval(timeoutID)
ОЧЕНЬ ВАЖНО! setTimeout() предназначена для ОДНОКРАТНОГО выполнения кода через указанное время, а setInterval() – для многократного (до тех пор, пока не будет выполнен вызов clearInterval() ).

Отложенное выполнение с setTimeout и setInterval
2014 © EPAM Systems, RD Dep.
Ещё одним способом отложенного выполнения кода является использование обработчиков событий. Самый яркий пример – обработчик onload():
Такое решение позволяет произвести выполнение некоторого кода в момент, когда всё тело документа уже загружено и, соответственно, элементы внутри тела уже существуют.
Рассмотрим все три способа в одном примере: создадим таймер, который запускается через пять секунд после загрузки документа и работает до момента отключения.

Отложенное выполнение: setTimeout, setInterval, onload
2014 © EPAM Systems, RD Dep.
JavaScript: отложенное выполнение функции
<br> function prepareTimer()<br> {<br> setTimeout(startTimer, 5000);<br> } <br>function startTimer()<br> {<br> document.getElementById('timer').style.display = 'block';<br> showTimer();<br> interval = setInterval(showTimer, 1000); // НЕ var interval !!!<br> }<br>function showTimer()<br> {<br> var dt = new Date();<br> hours = ((h = dt.getHours())<10) ? '0'+h : h;<br> minutes = ((m = dt.getMinutes())<10) ? '0'+m : m;<br> seconds = ((s = dt.getSeconds())<10) ? '0'+s : s;<br> document.getElementById('hour').innerHTML = hours;<br> document.getElementById('minute').innerHTML = minutes;<br> document.getElementById('second').innerHTML = seconds;<br> }<br>function stopTimer()<br> {<br> document.getElementById('timer').style.display = 'none';<br> clearInterval(interval);<br> }<br>
<br> .bordered {border: 1px solid black;}<br>
Остановить таймер
:
:
См. пример в файле
01_js_samples_misc\15_timer.html

РАБОТА С XML / JSON В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Сейчас мы посмотрим на то, как его можно использовать в JavaScript. А ещё мы посмотрим на…
JSON (JavaScript Object Notation) – специальный текстовый формат обмена данными, основанный на JavaScript.

Зачем нужны эти форматы?
2014 © EPAM Systems, RD Dep.
В JavaScript использование XML или JSON связано, как правило, с обменом данными с сервером с использованием XMLHttpRequest. Какой из форматов выбирать – в большинстве случаев дело вкуса, но мы рассмотрим использование обоих вариантов на примере.
Итак: сервер (код на PHP) генерирует таблицу со случайным количеством рядов и строк, передаёт её скрипту на JavaScript в обоих форматах, а тот, в свою очередь, «парсит» данные и обновляет содержимое страницы.

Пример использования XML/JSON в JavaScript и PHP
2014 © EPAM Systems, RD Dep.
JavaScript: XML и JSON
<br> function loadXML()<br> {<br> if (typeof xmlhttp == 'undefined')<br> {<br> xmlhttp=new XMLHttpRequest();<br> }<br> xmlhttp.onload = updateWithXML;<br> xmlhttp.open("GET", "http://127.0.0.1/xml_and_json.php?xml=true", false);<br> xmlhttp.send();<br> }<br> function loadJSON()<br> {<br> if (typeof xmlhttp == 'undefined')<br> {<br> xmlhttp=new XMLHttpRequest();<br> }<br> xmlhttp.onload = updateWithJSON;<br> xmlhttp.open("GET", "http://127.0.0.1/xml_and_json.php", false);<br> xmlhttp.send();<br> }<br>function updateWithXML()<br> {<br> var tbl = document.getElementById('xml_table');<br> if ((typeof tbl != 'undefined')&&(tbl != null))<br> {<br> tbl.parentNode.removeChild(tbl);<br> }<br>tbl = document.createElement('table');<br> tbl.id = 'xml_table';<br> tbl.className = 'bordered';<br>var xmlDoc=xmlhttp.responseXML;<br> var rows = xmlDoc.getElementsByTagName('tr');<br> for (var i=0; i<rows.length; i++)<br> {<br> var row = rows[i];<br> var table_row = tbl.insertRow(-1);<br> for (var j=0; j<row.childNodes.length; j++)<br> {<br> var cell = row.childNodes[j];<br> var table_cell = table_row.insertCell(-1);<br> var text = cell.childNodes[0].textContent;<br> table_cell.className = 'bordered';<br> table_cell.innerHTML = text;<br> }<br> }<br> document.getElementById('xml_table_container').appendChild(tbl);<br> } <br>function updateWithJSON()<br> {<br> var tbl = document.getElementById('json_table');<br> if ((typeof tbl != 'undefined')&&(tbl != null))<br> {<br> tbl.parentNode.removeChild(tbl);<br> }<br>tbl = document.createElement('table');<br> tbl.id = 'json_table';<br> tbl.className = 'bordered';<br>var jsonDoc=JSON.parse(xmlhttp.responseText);<br> var rows = jsonDoc.tr;<br>// В JSON-формате вместо массива получается строка, если элемент один.<br> // Это первый вариант "хака" по обхождению такого поведения.<br> if (typeof rows.length == 'undefined')<br> {<br> rows[0] = new Array();<br> rows[0].td = rows.td;<br> rows.length = 1;<br> rows.td = null;<br> }<br>for (var i=0; i<rows.length; i++)<br> {<br> var row = rows[i];<br> var table_row = tbl.insertRow(-1);<br>// В JSON-формате вместо массива получается строка, если элемент один.<br> // Это второй вариант "хака" по обхождению такого поведения.<br> if (typeof row.td == 'string')<br> {<br> var save_value = row.td;<br> row.td = new Array();<br> row.td[0] = save_value;<br> }<br>for (var j=0; j<row.td.length; j++)<br> {<br> var cell_and_text = row.td[j];<br>var table_cell = table_row.insertCell(-1);<br> table_cell.className = 'bordered';<br> table_cell.innerHTML = cell_and_text;<br> }<br> }<br> document.getElementById('json_table_container').appendChild(tbl);<br> } <br>
<br> .bordered {border: 1px solid black;}<br>
Обновить таблицу на основе XML
Обновить таблицу на основе JSON
$tree = new SimpleXMLElement('
');
$rows = mt_rand(1, 5);
$cols = mt_rand(1, 5);
for ($i=0; $i<$rows; $i++)
{
$row = $tree->addChild('tr');
for ($j=0; $j<$cols; $j++)
{
$row->addChild('td', mt_rand(1, 100));
}
}
if (isset($_GET['xml']))
{
header("Content-type: application/xml");
echo $tree->asXML();
}
else
{
header("Content-type: text/plain");
echo json_encode($tree);
}
?>
См. примеры в папке
02_js_samples_xml_json
Слайд 198
ОБРАБОТКА ОШИБОЧНЫХ СИТУАЦИЙ И ИСКЛЮЧЕНИЙ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.
Слайд 199
Обработка ошибочных ситуаций
2014 © EPAM Systems, RD Dep.
Для обработки ошибочных ситуаций в JavaScript
в отличие от PHP существует, фактически, один универсальный способ – обработка исключений.
Мы здесь рассмотрим примеры обработки и порождения исключений.
Слайд 200
Пример обработки исключений с try … catch … finally
2014 © EPAM Systems, RD
Dep.
Итак, представим, что мы пытаемся установить значение несуществующего свойства несуществующего объекта.
try
{
non_existing_object.non_existing_property = 5;
}
catch(e)
{
console.log(e);
}
finally
{
console.log('Finally...');
}
ReferenceError: non_existing_object is not defined
Finally...
Слайд 201
Виды исключений
2014 © EPAM Systems, RD Dep.
Фактически, это и всё, что нам доступно.
Даже т.н. «условные исключения» (реакция на исключения разных типов) пока ещё не стандартизированы. Сам JavaScript порождает исключения следующих типов (см. объект Error: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error):
EvalError – возникает в процессе работы eval().
RangeError – возникает при нарушении диапазонов (массив отрицательной длины, Number.to*() на числах вне допустимого диапазона, не числах и т.д.)
ReferenceError – аозникает при обращении к несуществующему объекту или элементу.
SyntaxError – возникает в процессе анализа синтаксиса аргумента eval().
TypeError – возникает в случае, когда операция выполняется над элементом недопустимого типа.
URIError – возникает, если в функции encodeURI() или decodeURl() переданы неверные параметры.
Слайд 202
Порождение собственных исключений
2014 © EPAM Systems, RD Dep.
Мы можем порождать исключения любого из
только что перечисленных типов или свои собственные:
function test(x)
{
if (x<0)
{
throw new RangeError('x mut be >= 0'); // Ещё можно так: throw String('x mut be >= 0');
}
if (typeof x == 'string')
{
// В создаваемом объекте вы можете определять ЛЮБЫЕ свойства и методы.
throw {
name: 'Type Error',
level: 'Script stop',
message: 'x must be a number',
htmlMessage: '
No manual available
',
toString: function(){return this.name + ": " + this.message}
}
}
}
try
{
test(-1); // Закомментируйте эту строку, чтобы увидеть реакцию на второй случай.
test('abc');
}
catch (e)
{
console.log(e);
}
Слайд 203
ООП В JAVASCRIPT
2014 © EPAM Systems, RD Dep.
Слайд 204
Общие сведения об ООП
2014 © EPAM Systems, RD Dep.
ООП – парадигма программирования, в
которой основными концепциями являются понятия объектов и классов.
Настоятельно рекомендуется вдумчиво прочитать:
http://javascript.ru/tutorial/object/inheritance
http://javascript.ru/tutorial/object/thiskeyword
См. примеры в папке
03_js_samples_oop
Слайд 205
ООП в JavaScript – что не так?
2014 © EPAM Systems, RD Dep.
Итак, в
JavaScript реализовано не классическое ООП (с классами), а т.н. «прототипное наследование».
Логика ООП состоит не в создании классов и объектов, а в… создании объектов СРАЗУ, «из ничего».
Объект можно создать даже вот так:
obj = {a: 'Yes', b: 'No', sqr : function(x){return x*x}};
console.log(obj);
console.log(obj.sqr(5));
Object { a="Yes", b="No", sqr=function()}
25
Слайд 206
ООП в JavaScript, создание объектов
2014 © EPAM Systems, RD Dep.
Чуть более классический вариант
– создание функции (напоминаем, в JavaScript функция – тоже объект) с использованием ключевого слова new.
function Person(name, profession)
{
this.name = name;
this.profession = profession;
this.make_some_work = function(){return 'Done';};
}
var Pupkin = new Person('Pupkin', 'worker');
console.log(Pupkin.make_some_work());
Done
Слайд 207
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Как можно понять
из предыдущего примера, мы не можем создать «классический класс», не можем использовать модификаторы прав доступа (public, protected, private), не можем создавать «нормальные» статические методы и т.д.
В общем случае это – не проблема, т.к. для простых скриптов нет необходимости в сложных решениях, но мы всё же рассмотрим, как организуется наследование.
Слайд 208
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Итак, чтобы «унаследовать»
«класс» от объекта (не класс от класса!!!) надо сделать так:
// Объявляем первый "класс".
function Person(name, profession)
{
this.name = name;
this.profession_by_education = profession;
this.make_some_work = function(){return 'Done';};
}
// Объявляем второй "класс".
function Professional(name, profession)
{
this.name = name;
this.profession_in_real_life = profession;
this.make_good_work = function(){return 'Well done!';};
}
// Создаём первый экземпляр.
var pupkin = new Person('Pupkin', 'worker');
// Наследуем второй "класс" от _ЭКЗЕМПЛЯРА_ первого.
Professional.prototype = pupkin;
// Создаём второй экземпляр.
var smith = new Professional('Smith', 'programmer');
console.log(pupkin.make_some_work()); // Done
console.log(smith.make_good_work()); // Well done!
console.log(smith.make_some_work()); // Done
console.log(smith.profession_by_education); // worker
pupkin.profession_by_education = 'writer';
console.log(smith.profession_by_education); // writer
console.log(typeof pupkin); // object
console.log(typeof smith); // object
console.log(pupkin instanceof Person); // true
console.log(smith instanceof Person); // true
console.log(pupkin instanceof Professional); // false
console.log(smith instanceof Professional); // true
Слайд 209
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Ещё один способ
наследования – с использованием Object.create():
function Creature(name, type)
{
this.name = name;
this.type = type || 'unknown type';
}
Creature.prototype.getName = function()
{
return this.name;
}
Creature.prototype.getType = function()
{
return this.type;
}
function Human(name)
{
Creature.call(this, name, 'human');
this.name = name || 'No name';
}
Human.prototype = Object.create(Creature.prototype);
var pupkin = new Human('Pupkin');
var smith = new Human('Smith');
console.log(pupkin.getName()); // Pupkin
console.log(pupkin.getType()); // human
console.log(smith.getName()); // Smith
console.log(smith.getType()); // human
console.log(smith instanceof Human); // true
console.log(smith instanceof Creature); // true
Слайд 210
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Как в
JavaScript объявлять конструктор?
A: «Никак». Это просто код внутри «объекта-функции», работающий с this:
function Creature(name, type)
{
this.name = name;
this.type = type || 'unknown type';
}
alien = new Creature('Alien');
console.log(alien);
strange_alien = Creature('Strange alien');
console.log(strange_alien);
console.log(window.name);
Creature { name="Alien", type="unknown type"}
undefined
Strange alien
Без ключевого слова new указатель this будет указывать не на экземпляр «функции-класса», а на глобальный объект window.
Слайд 211
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Как защититься
от ошибок создания экземпляров без new?
A: Вот так:
function Creature(name, type)
{
// Если this -- не наш «класс»,
// создаём экземпляр «вручную» и возвращаем его.
if (!(this instanceof Creature))
{
return new Creature(name, type);
}
this.name = name;
this.type = type || 'unknown type';
}
Слайд 212
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Да что
вообще с этим this такое творится?!
A: Если очень кратко, то логика такая:
// Просто вызов функции
test_function('text'); // this == window
// Обращение к конструктору
var x = new TestFunction('text'); // this == новый объект
// Вызов метода
obj.test_function('text'); // this == obj
// Вызов apply или call
test_function.call(obj, params); // this == obj
test_function.apply(obj, params); // this == obj
// Вызов обработчика
// this == span
Слайд 213
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: А как
всё же сделать «классический ООП» -- со статическими методами и свойствами, константами классов, синглтонами и прочим-разным-привычным?
A: Не надо. Несмотря на то, что ответы на любую часть этого вопроса легко выгугливаются (даже реализация примесей (mixins)), всё же JavaScript используется «очень по-своему», и не надо пытаться «написать PHP/C#/Java на JavaScript».
Слайд 214
ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Я прочитал
всё это трижды и всё равно ничего не понял. Что делать?
A: Читать дальше. Вот здесь http://habrahabr.ru/post/131714/ есть ещё одно объяснение про «ООП в JS». Возможно, оно покажется более простым.
Слайд 215
Задание для закрепления материала
2014 © EPAM Systems, RD Dep.
Реализуйте с помощью JavaScript классическую
задачу «о геометрических фигурах»: есть «абстрактная фигура», от которой наследуется эллипс, прямоугольник и треугольник. От эллипса наследуется круг, от прямоугольника – квадрат, от треугольника – равносторонний и прямоугольный треугольники. Для всех фигур нужно вычислять периметр и площадь. Каждая фигура задаётся координатами вершин или координатами центра и радиусом (радиусами).
Слайд 216
РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.
Слайд 217
Общие сведения
2014 © EPAM Systems, RD Dep.
Регулярные выражения вы изучали раньше.
JavaScript почти следует
логике PCRE в своих регулярных выражениях, так что подавляющее большинство решений из PHP будет работать и в JavaScript.
Чтобы понять нюансы достаточно глубоко, смотрите документацию по JavaScript, а мы рассмотрим основное и вкратце.
Слайд 218
Объект RegExp
2014 © EPAM Systems, RD Dep.
Объект RegExp, отвечающий за работу с регулярными
выражениями, можно создать так:
// Классический способ:
var re = new RegExp("регулярное_выражение"[, модификаторы]);
// Perl-style способ:
var re = /регулярное_выражение/модификаторы;
// Классический способ:
var re_classic = new RegExp('/[a-z]+\\w/', 'i');
// Perl-style способ:
var re_perl = /[a-z]+\w/i;
Слайд 219
Использование объекта RegExp
2014 © EPAM Systems, RD Dep.
У объекта RegExp есть следующие методы:
exec
– выполнить поиск и вернуть массив с результатами и дополнительной информацией.
test – проверить на совпадение и вернуть true или false.
У объекта String есть следующие методы по работе с регулярными выражениями:
match – выполнить поиск и вернуть массив с результатами и дополнительной информацией (или null, если ничего не найдено).
search – проверить на совпадение и вернуть индекс совпадения или -1, если совпадения нет.
replace – произвести поиск и замену.
split – разрезать строку на массив подстрок, используя в качестве разделителя регулярное выражение или фиксированную строку.
Слайд 220
Использование RegExp.exec()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования RegExp.exec()
var text = 'Это
текст с кодами товаров: ABC-1000, def-2000.';
var re = new RegExp('([a-z]{3})-(\\d{4})', 'ig');
var result;
while ((result = re.exec(text)) !== null)
{
console.log(result);
}
["ABC-1000", "ABC", "1000"]
0 "ABC-1000"
1 "ABC"
2 "1000"
index 28
input "Это текст с кодами товаров: ABC-1000, def-2000."
["def-2000", "def", "2000"]
0 "def-2000"
1 "def"
2 "2000"
index 38
input "Это текст с кодами товаров: ABC-1000, def-2000."
Слайд 221
Использование RegExp.test()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования RegExp.test()
var text = 'Это
текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', '');
var re_5d = new RegExp('\\d{5}', '');
console.log(re_4d.test(text)); // true
console.log(re_5d.test(text)); // false
Слайд 222
Использование Sring.match()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.match()
var text = 'Это
текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', '');
var re_5d = new RegExp('\\d{5}', '');
console.log(text.match(re_4d)); // См. ниже.
console.log(text.match(re_5d)); // null
["1000"]
0 "1000"
index 32
input "Это текст с кодами товаров: ABC-1000, def-2000."
Слайд 223
Использование Sring.search()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.search()
var text = 'Это
текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', '');
var re_5d = new RegExp('\\d{5}', '');
console.log(text.search(re_4d)); // 32
console.log(text.search(re_5d)); // -1
Слайд 224
Использование Sring.replace()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.replace()
var text = 'Это
текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', 'g');
console.log(text.replace(re_4d, '?'));
// Это текст с кодами товаров: ABC-?, def-?.
// Без модификатора g (global) будет
// заменено только первое вхождение.
Слайд 225
Использование Sring.split()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.split()
var text = 'Это
текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', 'g');
console.log(text.split(re_4d));
// ["Это текст с кодами товаров: ABC-", ", def-", "."]
Слайд 226
Задание для закрепления материала
2014 © EPAM Systems, RD Dep.
Задачи:
1) Определить, содержит ли текст
хотя бы одно трёхзначное число.
2) Показать все двухзначные числа, стоящие строго в начале или строго в конце строки.
3) Для дат в формате [Д]Д.[М]М.[ГГ]ГГ выделить день, месяц, год.
4) Выделить в тексте дублирующиеся слова.
5) Определить числа с запятой или пробелом в качестве разделителя разрядов.
Слайд 227
ИСПОЛЬЗОВАНИЕ XMLHTTPREQUEST
2014 © EPAM Systems, RD Dep.
Слайд 228
Общие сведения
2014 © EPAM Systems, RD Dep.
XMLHttpRequest – специальное решение (фактически, API), позволяющее
выполнять т.н. фоновые запросы к веб-серверу, не обновляя всю страницу целиком.
XMLHttpRequest лежит в основе AJAX (Asynchronous Javascript and XML, асинхронный JavaScript и XML) – набора решений, позволяющих строить максимально интерактивные веб-приложения.
См. примеры в папке
04_js_samples_ajax
Слайд 229
Как это работает
2014 © EPAM Systems, RD Dep.
В классическом варианте любые изменения страницы,
требующие информации с сервера, приводят к повторной загрузке всей страницы целиком:
Сервер
Браузер
Запрос и данные
Новая страница
Запрос и данные
Новая страница
Запрос и данные
Новая страница
Запрос и данные
Новая страница
Слайд 230
Как это работает
2014 © EPAM Systems, RD Dep.
В случае использования AJAX картина становится
такой:
Сервер
Браузер
Запрос и данные
Новая страница
Запрос и данные
Порция данных
JavaScript
XMLHttpRequest
Запрос и данные
Порция данных
Запрос и данные
Порция данных
Слайд 231
Как это реализовать
2014 © EPAM Systems, RD Dep.
Общий принцип прост, и мы его
уже изучили (и даже видели пример в главе, посвящённой XML и JSON):
1) Написать код, вызываемый в результате реакции на какое-то событие (как вариант – по таймеру).
2) Создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ.
3) Обработать ответ и внести правки в страницу (или выполнить какие-то иные действия – JavaScript ведь может многое).
Слайд 232
Как это реализовать
2014 © EPAM Systems, RD Dep.
С первой и третей частями мы
уже хорошо познакомились в соответствующих главах (см. всё, что связано с обработкой событий и управлением DOM).
Потому – сразу переходим ко второй (создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ) и посмотрим, как это сделать максимально универсально и кроссбраузерно.
Итак…
Слайд 233
Как это реализовать
2014 © EPAM Systems, RD Dep.
Поскольку реализация XMLHttpRequestзависит от браузера, воспользуемся
таким решением:
function getXHR()
{
var xmlhttp = false;
var XMLHttpFactories = [
function () {return new XMLHttpRequest()},
function () {return new ActiveXObject("Msxml2.XMLHTTP")},
function () {return new ActiveXObject("Msxml3.XMLHTTP")},
function () {return new ActiveXObject("Microsoft.XMLHTTP")}];
for (var i=0;i
try
{
xmlhttp = XMLHttpFactories[i]();
}
catch (e)
{
continue;
}
break;
}
return xmlhttp;
}
Слайд 234
Как это реализовать
2014 © EPAM Systems, RD Dep.
Получив экземпляр XMLHttpRequest, следует его «настроить»:
указать обработчики изменения состояния. Это можно сделать через два свойства:
onreadystatechange – указывается функция, которая будет вызываться при любом изменении состояния (крайне не рекомендуется для синхронных запросов; впрочем, и сами синхронные запросы крайне не рекомендуются);
onload – указывается функция, которая будет вызываться после завершения выполнения запроса.
Слайд 235
Как это реализовать
2014 © EPAM Systems, RD Dep.
У XMLHttpRequest есть следующие состояния:
0 (UNSENT)
– метод open() ещё не был вызван.
1 (OPENED) – метод send() ещё не был вызван.
2 (HEADERS_RECEIVED) – метод send() был вызван, и уже доступен статус ответа и заголовки ответа.
3 (LOADING) – идёт загрузка, в свойстве responseText содержится часть полученных данных.
4 (DONE) – операция завершена.
Слайд 236
Как это реализовать
2014 © EPAM Systems, RD Dep.
Метод
инициализирует запрос. Здесь особо стоит отметить
параметр async, который в общем случае должен быть true, т.е. в противном случае (при долгих запросах-ответах) в зависимости от браузера можно получить низкую производительность или вовсе «замирание»/«подвисание» приложения или даже всего браузера.
void open(
DOMString method,
DOMString url,
optional boolean async,
optional DOMString user,
optional DOMString password
);
Слайд 237
Как это реализовать
2014 © EPAM Systems, RD Dep.
Метод
отправляет запрос и либо ждёт его
завершения (синхронный запрос), либо сразу же завершается (асинхронный запрос).
Из других полезных методов стоит отметить:
abort() – отмена всей операции.
getResponseHeader(String header) – возвращает указанный заголовок ответа или null, если заголовка нет, или он пока не получен.
setRequestHeader(String header, String value) – позволяет указать заголовок HTTP-запроса.
overrideMimeType(String mimetype) – позволяет принудительно указать MIME-тип документа (полезно, например, если нужно будет проанализировать XML-ответ, но сервер не выставил правильный заголовок).
void send();
Слайд 238
Как это реализовать
2014 © EPAM Systems, RD Dep.
Много полезной информации можно получить из
свойств:
readyState – текущее состояние операции (см. onreadystatechange).
status – код HTTP-ответа сервера (200, 404 и т.д.)
statusText – «текст кода HTTP-ответа», т.е. "OK" и т.д.
response – «тело ответа» (см. документацию, там много нюансов).
responseText – текст ответа сервера (как правило, или используется сам по себе для вставки в страницу, или содержит JSON).
responseXML – XML-вид ответа сервера (при условии, что сервер ДЕЙСТВИТЕЛЬНО передал в ответ XML-данные).
timeout – позволяет устанавливать таймаут в тысячных долях секунд (по умолчанию == 0, т.е. время выполнения запроса не ограничено).
ontimeout – позволяет указать функцию, которая будет вызвана при наступлении таймаута.
Слайд 239
Демонстрация на примере
2014 © EPAM Systems, RD Dep.
Теперь соберём всё это вместе и
посмотрим, как работает синхронный и асинхронный запрос:
JavaScript: AJAX
<br> function getXHR()<br> {<br> var xmlhttp = false;<br> var XMLHttpFactories = [<br> function () {return new XMLHttpRequest()},<br> function () {return new ActiveXObject("Msxml2.XMLHTTP")},<br> function () {return new ActiveXObject("Msxml3.XMLHTTP")},<br> function () {return new ActiveXObject("Microsoft.XMLHTTP")}];<br>for (var i=0;i<XMLHttpFactories.length;i++) {<br> try<br> {<br> xmlhttp = XMLHttpFactories[i]();<br> }<br> catch (e)<br> {<br> continue;<br> }<br> break;<br> }<br> return xmlhttp;<br> }<br>function sampleSync()<br> {<br> var xhr = getXHR();<br> xhr.onreadystatechange = createWatcher(xhr, 'Sync: ');<br>// ВАЖНО! AJAX-запросы НЕ работают "кросс-доменно"!!!!!<br> // Т.е. нельзя "просто открыть эту HTML'ку в браузере, и всё заработает". Надо открывать её как http://127.0.0.1/ajax.html<br> // При попытке выполнить кросс-доменный запрос, вы будете получать ошибку NS_ERROR_FAILURE, и запрос будет остановлен.<br> // Решений два:<br> // 1) Сервер при передаче HTML, в котором вызывается ваш запрос, должен вернуть заголовок header('Access-Control-Allow-Origin: *'); (это может всё равно не работать).<br> // 2) Создавать т.н. server-side-proxy -- скрипт, который будет перенаправлять ваши запросы на другие сайты и возвращать ответы.<br> xhr.open('get', 'http://127.0.0.1', false);<br> xhr.send();<br> }<br>function sampleAsync()<br> {<br> var xhr = getXHR();<br> xhr.onreadystatechange = createWatcher(xhr, 'Async: ');<br>// ВАЖНО! AJAX-запросы НЕ работают "кросс-доменно"!!!!!<br> // Т.е. нельзя "просто открыть эту HTML'ку в браузере, и всё заработает". Надо открывать её как http://127.0.0.1/ajax.html<br> // При попытке выполнить кросс-доменный запрос, вы будете получать ошибку NS_ERROR_FAILURE, и запрос будет остановлен.<br> // Решений два:<br> // 1) Сервер при передаче HTML, в котором вызывается ваш запрос, должен вернуть заголовок header('Access-Control-Allow-Origin: *'); (это может всё равно не работать).<br> // 2) Создавать т.н. server-side-proxy -- скрипт, который будет перенаправлять ваши запросы на другие сайты и возвращать ответы.<br> xhr.open('get', 'http://127.0.0.1', true);<br> xhr.send();<br> }<br>function createWatcher(xhr, msg)<br> {<br> return function()<br> {<br> document.getElementById('log').innerHTML += msg + xhr.readyState + '<br>';<br> if (xhr.readyState == 4)<br> {<br> var log = document.getElementById('log');<br> log.innerHTML += msg + 'Finished' + '<br>';<br> log.innerHTML += msg + 'AllResponseHeaders: ' + xhr.getAllResponseHeaders() + '<br>';<br> log.innerHTML += msg + 'Status: ' + xhr.status + '<br>';<br> log.innerHTML += msg + 'Status: ' + xhr.statusText + '<br>';<br> }<br> } <br> }<br>
Синхронный запрос
Асинхронный запрос
Слайд 240
КРОССДОМЕННЫЕ ЗАПРОСЫ
2014 © EPAM Systems, RD Dep.
Слайд 241
Суть проблемы
2014 © EPAM Systems, RD Dep.
Браузеры по соображениям безопасности ограничивают возможности скриптов
по взаимодействию с другими доменами, т.е. учитывают комбинацию схемы, имени хоста и порта для того, чтобы определить, откуда был загружен скрипт, и разрешить ему выполнять только запросы по тому же адресу.
Почитать подробнее:
http://en.wikipedia.org/wiki/Same-origin_policy
Слайд 242
Решение проблемы
2014 © EPAM Systems, RD Dep.
Однако иногда есть объективная необходимость выполнять такие
(т.н. «кроссдоменные») запросы. Сделать это помогает…
JSONP (JSON with padding) – расширение формата JSON, предоставляющее возможность запросить данные с «чужого домена».
Почитать подробнее:
http://en.wikipedia.org/wiki/JSONP
Слайд 243
Как это работает
2014 © EPAM Systems, RD Dep.
Сначала рассмотрим серверную часть. Здесь важны
две вещи:
1. Верные заголовки HTTP-ответа.
2. Правильное формирование контента.
Рассмотрим на примере выполнения кроссдоменного запроса (будем посылать запрос на виртуальную машину)…
См. примеры в папке
05_js_samples_jsonp
Слайд 244
Как это работает
2014 © EPAM Systems, RD Dep.
Серверная часть:
if (isset($_GET['callback']))
{
// Just for security
reasons.
$callback = preg_replace('/[^a-z0-9$_]/si', '', $_GET['callback']);
// Set headers.
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/javascript;charset=UTF-8');
// Collect some useful data.
$response = array('a' => '999');
// Create proper JSONP format response and send it.
$response = $callback.'('.json_encode($response).')';
echo $response;
}
?>
Слайд 245
Как это работает
2014 © EPAM Systems, RD Dep.
На клиентской части нужно сделать две
вещи:
1. Подготовить функцию, имя которой передано на сервер в качестве параметра запроса.
2. Динамически создать элемент
.<br>Идея состоит в том, что вы не ВЫПОЛНЯЕТЕ запрос к «чужому домену», а создаёте запрос, который загружает «скрипт» (JSON-данные, обёрнутые в вызов функции) с нужного вам домена. Как только этот «скрипт» загрузится, функция будет вызвана. А у вас в документе она уже есть – и всё.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide246" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/7597/slide-245.jpg" target="_blank" rel="noopener">Слайд 246</a><h3 class="slides-content text-center font-bold"><div><p>Как это работает<br><p>2014 © EPAM Systems, RD Dep.<br><p>Клиентская часть:<br><p><!DOCTYPE html><br> <html><br> <head><br> <meta</div></h3></h3><!----><!----><div class="slides-content">charset="UTF-8"><br> <title>JavaScript: JSONP</title><br> <script><br>function getCrossDomainData()<br> {<br> var script = document.createElement("script");<br> script.src = 'http://192.168.56.101/jsonp.php?callback=jsonptest';<br> document.body.appendChild(script);<br> }<br>function jsonptest(data)<br> {<br> console.log(data);<br> document.getElementById('log').innerHTML += data.a;<br> }<br>
Запросить занные
Слайд 247
Как это работает
2014 © EPAM Systems, RD Dep.
Итак, важное и ещё раз:
Это –
НЕ XMLHttpRequest! Да, это динамическая подгрузка данных, но она работает БЕЗ XMLHttpRequest.
Алгоритм такой:
Создать на клиенте функцию.
Добавить на клиенте в тело документа скрипт, …
Которому указать в SRC нужный адрес на «чужом» домене.
Когда скрипт загрузится, выполнится ваша клиентская callback-функция и получит в качестве аргумента присланные данные.
Слайд 248
С JavaScript – всё!
2014 © EPAM Systems, RD Dep.
О ещё некоторых небольших особенностях
работы с JavaScript мы поговорим в следующем разделе, посвящённом jQuery.
Имя файла: Основы-JavaScript.pptx
Количество просмотров: 159
Количество скачиваний: 0
Скачать
- Предыдущая
Связь web-страницы с базой данных
Следующая -
Операційні системи. Керування введенням-виведенням
Похожие презентации
Распределенные вычисления в Интернет
Информатика. Часть 1. Лекции по Microsoft Excel
Комп'ютерні публікації. Створення бюлетеня та буклета
Информационные технологии в самолетостроении
Системы автоматизированного проектирования
Презентация к уроку Компьютерные презентации. Анимация
Paint графикалық редакторы
Решение задач. Анализ программ с циклами и подпрограммами.
Компьютер болашақтың қожайыны
Антивирусные программы
Файлы и файловые структуры. (7 класс)
Microsoft word 2010. Форматирование страниц. Урок 6
Проектирование Базы данных
Информационные технологии в журналистике
Язык манипулирования данными. Data Manipulation Language, DML
Java-технологии
Технологии защиты от несанкционированного доступа
Сеть следующего поколения
Представление о Power Point
12 бұлтты сақтау орны
Разработка и создание информационной системы Автоматизация работы АЗС с использованием MS Excel и MS
Штриховое кодирование
Self-service BI
Продвижение в Instagram. Высокая вовлеченность пользователей
Урок по теме Создание кроссворда средствами Microsoft Word
Статический анализатор кода PVS-Studio
Школьный проект: история развития компьюторных игр
Безопасность интернет-проектов
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},categories:{result:[{id:G,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:G,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:H,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:7597,name:k,category:H,count:249,jpg:"jpg\u002F7597",hits:159,download:b,h1:"Основы JavaScript презентация",meta:{h1:k,title:k,description:"Основы JavaScript презентация на тему, доклад, Информатика",keywords:"Основы JavaScript, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основы JavaScript из раздела Информатика. Презентация на заданную тему содержит 249 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EОбщие сведения о JavaScript\u003Cbr\u003EЧто нужно для работы JavaScript\u003Cbr\u003EОбщий синтаксис JavaScript\u003Cbr\u003EПеременные и типы данных JavaScript\u003Cbr\u003EОпределение и преобразование типов данных\u003Cbr\u003EОсновные функции Jav",file:"Основы-JavaScript.pptx",texts:["\u003Cp\u003EПринципы выполнения программ. Основные структуры языка. Преобразование типов данных. Функции, отложенное выполнение функций. Принципы работы с массивами, объектами, this. Основы работы с DOM. Обработка событий. Основы XMLHttpRequest.\u003Cbr\u003E\u003Cp\u003EОСНОВЫ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003ESvyatoslav Kulikov\u003Cbr\u003ETraining And Education Manager\u003Cbr\[e-mail]\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EОбщие сведения о JavaScript\u003Cbr\u003EЧто нужно для работы JavaScript\u003Cbr\u003EОбщий синтаксис JavaScript\u003Cbr\u003EПеременные и типы данных JavaScript\u003Cbr\u003EОпределение и преобразование типов данных\u003Cbr\u003EОсновные функции JavaScript, с которых надо начать\u003Cbr\u003EОператоры и управляющие конструкции JavaScript\u003Cbr\u003EМатематические функции JavaScript\u003Cbr\u003EФункции JavaScript, определяемые пользователем\u003Cbr\u003EРабота с массивами в JavaScript\u003Cbr\u003E","\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EРабота со строками в JavaScript\u003Cbr\u003EФункции JavaScript по работе с датой и временем\u003Cbr\u003EОбработка событий в JavaScript, работа с DOM\u003Cbr\u003EОтложенное выполнение функций в JavaScript\u003Cbr\u003EРабота с XML \u002F JSON в JavaScript\u003Cbr\u003EОбработка ошибочных ситуаций и исключений в JavaScript\u003Cbr\u003EООП в JavaScript\u003Cbr\u003EРегулярные выражения в JavaScript\u003Cbr\u003EИспользование XMLHttpRequest\u003Cbr\u003EКроссдоменные запросы\u003Cbr\u003E","\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EDisclaimer: этот материал является кратким вводным курсом в JavaScript. Пожалуйста, не считайте его полным исчерпывающим руководством. Очень многие темы мы будем рассматривать упрощённо, на уровне, минимально достаточном для решения тривиальных задач.\u003Cbr\u003EФактически, этот материал является ответом на вопрос «что надо знать о JavaScript, чтобы писать на PHP (или ином сервероориентированном высокоуровневом языке)» ☺.\u003Cbr\u003E","\u003Cp\u003EОБЩИЕ СВЕДЕНИЯ О JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения о JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript (JS) – язык программирования, предназначенный в первую очередь для расширения возможностей клиентской части веб-приложений.\u003Cbr\u003E\u003Cp\u003EОсновные факты:\u003Cbr\u003EПрограммы на JS хранятся в виде исходного текста.\u003Cbr\u003EБольшая часть синтаксиса JS пришла по наследию из языка C.\u003Cbr\u003EJS – прототипно-ориентированный (об этом чуть позже), нестроготипизированный, интерпретируемый.\u003Cbr\u003EВ основном используется в браузерах (или иных клиентах), но существует и серверная реализация.\u003Cbr\u003E","\u003Cp\u003EЧто можно сделать с помощью JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJS\u003Cbr\u003E\u003Cp\u003EРабота на стороне клиента\u003Cbr\u003E\u003Cp\u003EРабота на стороне сервера\u003Cbr\u003E\u003Cp\u003E«Экзотическое использование»\u003Cbr\u003E\u003Cp\u003EНапример, в браузере\u003Cbr\u003E\u003Cp\u003EНапример, Node.js\u003Cbr\u003E\u003Cp\u003EДаже для программирования микроконтроллеров ☺\u003Cbr\u003E","\u003Cp\u003EЧТО НУЖНО ДЛЯ РАБОТЫ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EЧто нужно для работы JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПоскольку мы будем в основном рассматривать JavaScript для работы с браузером, то нам понадобится:\u003Cbr\u003EБраузер ☺.\u003Cbr\u003EРедактор с подсветкой синтаксиса или полноценная IDE.\u003Cbr\u003E\u003Cp\u003EСм. примеры в папке 01_js_samples_misc\u003Cbr\u003E","\u003Cp\u003EЧто нужно для работы JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EГоворя «браузер», мы подразумеваем Firefox, т.к. в нём доступно множество удобных инструментов, основной из которых для нас – Firebug (http:\u002F\u002Fgetfirebug.com)\u003Cbr\u003E","\u003Cp\u003EЧто нужно для работы JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EТакже для работы с JavaScript можно использовать:\u003Cbr\u003EPhpStorm\u003Cbr\u003EWebStorm\u003Cbr\u003EEclipse\u003Cbr\u003ENetBeans\u003Cbr\u003EИ т.д.\u003Cbr\u003E","\u003Cp\u003EЗапуск в браузере\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EКод JavaScript можно писать «внутри HTML» или подключать как внешние файлы:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: первый пример\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E alert('Hi!');\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cscript src=\"01_first_sample.js\"\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cspan id=\"sample\"\u003E\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003Ewindow.onload=function(){document.getElementById('sample').innerHTML='Hi again!';};\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\01_first_sample.html\u003Cbr\u003E","\u003Cp\u003EЗапуск в браузере\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПоскольку наш курс посвящён основам JavaScript, мы не будем погружаться в дебри, и в процессе рассмотрения примеров будем использовать редактор с подсветкой синтаксиса для написания JavaScript-кода и браузер для его выполнения.\u003Cbr\u003EПриступим к рассмотрению самого JavaScript…\u003Cbr\u003E","\u003Cp\u003EОБЩИЙ СИНТАКСИС JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EКоманды JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EКак уже было сказано, код на JavaScript можно заключать в тег \u003Cscript\u003E\u003C\u002Fscript\u003E или подключать из внешних файлов \u003Cscript src=\"script.js\"\u003E\u003C\u002Fscript\u003E.\u003Cbr\u003EВ отличие от PHP, \u003Cscript\u003E нельзя «разрывать», т.е. вот так – НЕЛЬЗЯ:\u003Cbr\u003E\u003Cp\u003E\u003Cscript\u003E\u003Cbr\u003Eif (1==1)\u003Cbr\u003E {\u003Cbr\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E\u003Cscript\u003E\u003Cbr\u003E alert('OK');\u003Cbr\u003E }\u003Cbr\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E","\u003Cp\u003EКомментарии в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript предоставляет два способа вставки комментариев.\u003Cbr\u003E\u003Cp\u003Ex=9; \u002F\u002F комментарий\u003Cbr\u003E\u002F* \u003Cbr\u003E и это тоже комментарий\u003Cbr\u003E*\u002F\u003Cbr\u003E","\u003Cp\u003EРегистрочувствительность\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript чувствителен к регистру – везде: в именах функций, переменных, объектов и т.д.\u003Cbr\u003E\u003Cp\u003E\u003Cscript\u003E\u003Cbr\u003E var1 = 'A';\u003Cbr\u003E vAr1 = 'B';\u003Cbr\u003E alert(var1+vAr1);\u003Cbr\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E\u003Cp\u003EЭто – РАЗНЫЕ переменные! Пусть отличие и заключается всего лишь в регистре одной буквы. Частая ошибка: написать getelementbyid() вместо getElementById() и удивляться, что ничего не работает.\u003Cbr\u003E","\u003Cp\u003EТочки с запятыми в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript НАДО писать точки с запятыми в конце строк. НАДО! Несмотря на то, что они являются опциональными, вы рискуете получить такой интересный эффект:\u003Cbr\u003E\u003Cp\u003Efunction f1()\u003Cbr\u003E {\u003Cbr\u003E return\u003Cbr\u003E {\u003Cbr\u003E x: 99\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003Ef1()\u003Cbr\u003E\u003Cp\u003Efunction f2()\u003Cbr\u003E {\u003Cbr\u003E return {\u003Cbr\u003E x: 99\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003Ef2()\u003Cbr\u003E\u003Cp\u003Efunction f3()\u003Cbr\u003E {\u003Cbr\u003E return; {\u003Cbr\u003E x: 99;\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003Ef3();\u003Cbr\u003E\u003Cp\u003Eundefined\u003Cbr\u003E\u003Cp\u003EObject { x=99}\u003Cbr\u003E\u003Cp\u003Eundefined\u003Cbr\u003E","\u003Cp\u003EТочки с запятыми в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВторая частая ошибка – отсутствие «;» после «присвоения функции переменной»:\u003Cbr\u003E\u003Cp\u003Evar func = function() { return false; };\u003Cbr\u003E\u003Cp\u003EДа, здесь нужна «;». Да, иногда работает и без неё. Нет, не всегда.\u003Cbr\u003E","\u003Cp\u003EПЕРЕМЕННЫЕ И ТИПЫ ДАННЫХ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EПеременные в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВАЖНО!\u003Cbr\u003EJavaScript – нестроготипизированный язык: переменные в нём могут менять свой тип в процессе выполнения программы.\u003Cbr\u003EJavaScript не накладывает строгих ограничений на участие в выражениях переменных разных типов.\u003Cbr\u003EПеременные не нужно объявлять отдельно, они «объявляются» через инициализацию при первом использовании.\u003Cbr\u003E","\u003Cp\u003EПеременные в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИмя переменной может состоять из букв, цифр, символов «$» и «_», при этом первый символ не должен быть цифрой.\u003Cbr\u003E\u003Cp\u003Evar someVariable;\u003Cbr\u003Evar newVariable15;\u003Cbr\u003Evar $ = 15;\u003Cbr\u003Evar _ = 17;\u003Cbr\u003E","\u003Cp\u003EПеременные в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВопросы области видимости переменных мы рассмотрим чуть позже, но пока важно запомнить одно правило: всегда объявляйте ваши локальные переменные в функциях с использованием ключевого слова var:\u003Cbr\u003E\u003Cp\u003Evar someVariable;\u003Cbr\u003Evar newVariable15;\u003Cbr\u003Evar $ = 15;\u003Cbr\u003Evar _ = 17;\u003Cbr\u003E","\u003Cp\u003EТипы данных в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript поддерживает следующие типы данных: объектные и элементарные (которые тоже можно трактовать как объектные).\u003Cbr\u003E\u003Cp\u003EЭлементарные\u003Cbr\u003E\u003Cp\u003EОбъектные\u003Cbr\u003E\u003Cp\u003EBoolean\u003Cbr\u003E\u003Cp\u003ENumber\u003Cbr\u003E\u003Cp\u003EString\u003Cbr\u003E\u003Cp\u003Enull\u003Cbr\u003E\u003Cp\u003EObject\u003Cbr\u003E\u003Cp\u003EArray\u003Cbr\u003E\u003Cp\u003Eundefined\u003Cbr\u003E\u003Cp\u003EFunction\u003Cbr\u003E\u003Cp\u003EString\u003Cbr\u003E\u003Cp\u003EИ т.д. ☺\u003Cbr\u003E\u003Cp\u003EДля каждого элементарного типа есть соответствующий объект, но использовать их не рекомендуется. Элементарные типы автоматически интерпретируются как объекты при вызовах методов.\u003Cbr\u003E\u003Cp\u003Ealert(typeof \"test\"); \u002F\u002F string\u003Cbr\u003Ealert(typeof new String(\"test\")); \u002F\u002F object\u003Cbr\u003E\u003Cp\u003EХорошая дополнительная информация:\u003Cbr\u003Ehttp:\u002F\u002Fhabrahabr.ru\u002Fpost\u002F150730\u002F \u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: Boolean\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EBoolean используется для хранения только двух логических значений: «истина» или «ложь». \u003Cbr\u003E\u003Cp\u003Ea = true; \u002F\u002F Не TRUE\u003Cbr\u003Eb = false; \u002F\u002F Не FALSE\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: Number\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003ENumber используется для хранения чисел и, фактически, представляет собой float64 (8-мибайтную дробь). Эта особенность приводит к очень неприятным последствиям при вычислениях.\u003Cbr\u003E\u003Cp\u003Ea = 1;\u003Cbr\u003Eb = 2;\u003Cbr\u003Ec = a + b; \u002F\u002F 3\u003Cbr\u003Ea = 0.1;\u003Cbr\u003Eb = 0.2;\u003Cbr\u003Ec = a + b; \u002F\u002F 0.30000000000000004\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: Number\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ отличие от множества других языков в JavaScript операции с числами никогда не приводят к явному сообщению об ошибке, вместо этого используются специальные значения:\u003Cbr\u003E\u003Cp\u003Ex = 1\u002F0; \u002F\u002F Infinity\u003Cbr\u003Ex = -1\u002F0; \u002F\u002F -Infinity\u003Cbr\u003Ex = Number('lalala'); \u002F\u002F NaN\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: Number\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: И как тогда получить вменяемый результат при работе с дробями?\u003Cbr\u003EA: Через методы toFixed(), Math.floor(), Math.round(), Math.ceil().\u003Cbr\u003E\u003Cp\u003Ea = 0.1;\u003Cbr\u003Eb = 0.2;\u003Cbr\u003Ec = a + b; \u002F\u002F 0.30000000000000004\u003Cbr\u003Ed = c.toFixed(2); \u002F\u002F \"0.30\"\u003Cbr\u003Ee = Math.round(c*100)\u002F100; \u002F\u002F 0.3\u003Cbr\u003E\u003Cp\u003EMath.round(число) округляет число до целых.\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: String\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EString используется для хранения строк. Строки в JavaScript должны быть заключены в одинарные или двойные кавычки. В отличие от PHP, между этими вариантами НЕТ разницы.\u003Cbr\u003E\u003Cp\u003Ea = \"Text\";\u003Cbr\u003Eb = 'Text';\u003Cbr\u003Ec = 'Hotel \\'Minsk\\'';\u003Cbr\u003Ed = \"Hotel 'Minsk'\";\u003Cbr\u003Ee = \"Hotel \\\"Minsk\\\"\";\u003Cbr\u003Ef = \"Long \\\u003Cbr\u003E line\";\u003Cbr\u003E\u003Cp\u003EЕсли в строке содержится такая же кавычка, какими строка обрамлена, её надо экранировать.\u003Cbr\u003E\u003Cp\u003EЕсли строку надо «разорвать» для «продолжения со следующей строки», место разрыва «экранируется».\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: String\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНапомним, что в JavaScript элементарные данные автоматически интерпретируются как объекты при вызове методов, т.е.:\u003Cbr\u003E\u003Cp\u003Ea = \"Text\";\u003Cbr\u003Eb = a.length; \u002F\u002F 4\u003Cbr\u003Ec = \"Lalala\".length; \u002F\u002F 6\u003Cbr\u003Ed = '\\u1553'; \u002F\u002F \"ᕓ\"\u003Cbr\u003Ee = d.length; \u002F\u002F 1\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: null\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Enull говорит о том, что переменная не содержит допустимых Number, String, Boolean, Array или Object. Т.е. переменная ЕСТЬ, но значения у неё НЕТ.\u003Cbr\u003EВАЖНО! null в JavaScript – НЕ то же самое, что null в PHP (в котором «переменной нет» === «переменная равна null»).\u003Cbr\u003EВАЖНО! null в JavaScript – это объект, но НЕ экземпляр Object ☹.\u003Cbr\u003E\u003Cp\u003Evar x = null;\u003Cbr\u003E\u003Cp\u003EХорошее пояснение – здесь:\u003Cbr\u003Ehttp:\u002F\u002Fhabrahabr.ru\u002Fpost\u002F171359\u002F \u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: undefined\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПеременная равна undefined в случае, если она не существует, или была объявлена, но не проинициализирована.\u003Cbr\u003E\u003Cp\u003Evar x;\u003Cbr\u003Eif (x == undefined)\u003Cbr\u003E{\u003Cbr\u003E \u002F\u002F Какой-то код ☺.\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EЭлементарные типы данных: разница между null и undefined\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИтак, ещё раз:\u003Cbr\u003Eundefined – переменной нет, или ей не было присвоено значение.\u003Cbr\u003Enull – переменная есть, но её значение – «пустота».\u003Cbr\u003E\u003Cp\u003Evar a;\u003Cbr\u003Evar b = document.getElementById('non_existing_element');\u003Cbr\u003Evar c = 999;\u003Cbr\u003Ec = null;\u003Cbr\u003Econsole.log(typeof(a));\u003Cbr\u003Econsole.log(typeof(b));\u003Cbr\u003Econsole.log(typeof(c));\u003Cbr\u003Eif (a == null)\u003Cbr\u003E{\u003Cbr\u003E console.log('a is null');\u003Cbr\u003E}\u003Cbr\u003Eif (a == undefined)\u003Cbr\u003E{\u003Cbr\u003E console.log('a is undefined');\u003Cbr\u003E}\u003Cbr\u003Eif (b == null)\u003Cbr\u003E{\u003Cbr\u003E console.log('b is null');\u003Cbr\u003E}\u003Cbr\u003Eif (b == undefined)\u003Cbr\u003E{\u003Cbr\u003E console.log('b is undefined');\u003Cbr\u003E}\u003Cbr\u003Eif (c == null)\u003Cbr\u003E{\u003Cbr\u003E console.log('c is null');\u003Cbr\u003E}\u003Cbr\u003Eif (c == undefined)\u003Cbr\u003E{\u003Cbr\u003E console.log('c is undefined');\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003Eundefined\u003Cbr\u003Eobject\u003Cbr\u003Eobject\u003Cbr\u003Ea is null\u003Cbr\u003Ea is undefined\u003Cbr\u003Eb is null\u003Cbr\u003Eb is undefined\u003Cbr\u003Ec is null\u003Cbr\u003Ec is undefined\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Object\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EObject в JavaScript – это коллекция свойств и методов. В общем случае можно выделить такие типы объектов:\u003Cbr\u003Eвнутренние объекты (например, Array, String и т.д.);\u003Cbr\u003Eсоздаваемые объекты;\u003Cbr\u003Eобъекты среды (например, window, document и т.д.);\u003Cbr\u003Eобъекты ActiveX (не актуально для не MSIE).\u003Cbr\u003E\u003Cp\u003EВАЖНО! Объекты в JavaScript – НЕ то же самое, что классические объекты в других языках программирования! Они НЕ создаются на основе описания классов!\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Object\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНапример, такое прекрасно работает в JavaScript, но не в других языках:\u003Cbr\u003E\u003Cp\u003Evar someObject = new Object();\u003Cbr\u003EsomeObject.name = \"SomeFruit\";\u003Cbr\u003EsomeObject.price = 999;\u003Cbr\u003EsomeObject.getPrice = \u003Cbr\u003E function ()\u003Cbr\u003E {\u003Cbr\u003E return this.price;\u003Cbr\u003E };\u003Cbr\u003Econsole.log(someObject.name);\u003Cbr\u003Econsole.log(someObject.price);\u003Cbr\u003Econsole.log(someObject.getPrice());\u003Cbr\u003E\u003Cp\u003ESomeFruit\u003Cbr\u003E999\u003Cbr\u003E999\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EArray – специальный объект для хранения данных (в т.ч. разных типов). Многомерные массивы не поддерживаются в явном виде, но легко эмулируются.\u003Cbr\u003EВАЖНО! JavaScript считает размером (длиной) массива «последний числовой ключ + 1» вне зависимости от реального положения дел.\u003Cbr\u003EРассмотрим на примере…\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПример работы с массивами в JavaScript:\u003Cbr\u003E\u003Cp\u003Evar names = new Array();\u003Cbr\u003Enames[0] = \"John\";\u003Cbr\u003Enames[1] = \"Anna\";\u003Cbr\u003Enames[999] = \"Jack\";\u003Cbr\u003Enames['test'] = \"Test\";\u003Cbr\u003Econsole.log(names[1]);\u003Cbr\u003Econsole.log(names.length);\u003Cbr\u003Econsole.log(names[555]);\u003Cbr\u003E\u003Cp\u003EAnna\u003Cbr\u003E1000\u003Cbr\u003Eundefined\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕсли нужен многомерный массив…\u003Cbr\u003E\u003Cp\u003Evar names = new Array();\u003Cbr\u003Enames[0] = new Array(\"Иванов\", \"Иван\", \"Иванович\");\u003Cbr\u003Enames[1] = new Array(\"Петров\", \"Пётр\", \"Петрович\");\u003Cbr\u003Econsole.log(names[0]);\u003Cbr\u003Econsole.log(names[1][1]);\u003Cbr\u003Econsole.log(names[1][999]);\u003Cbr\u003E\u003Cp\u003E[\"Иванов\", \"Иван\", \"Иванович\"]\u003Cbr\u003EПётр\u003Cbr\u003Eundefined\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИ, наконец: если вы хотите получить «нормальный ассоциативный массив», вам для этого надо использовать… объект! ☺\u003Cbr\u003E\u003Cp\u003Evar something = new Object();\u003Cbr\u003Esomething.name = \"Test\";\u003Cbr\u003Esomething.price = 100;\u003Cbr\u003Esomething.weight = 11.55;\u003Cbr\u003Efor (var key in something) \u003Cbr\u003E{ \u003Cbr\u003E console.log(something[key]);\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003ETest\u003Cbr\u003E100\u003Cbr\u003E11.55\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Можно ли в JavaScript обращаться к элементам массива напрямую в процессе вызова функции, возвращающей массив?\u003Cbr\u003EA: Да.\u003Cbr\u003E\u003Cp\u003Evar fnc = function()\u003Cbr\u003E{\u003Cbr\u003E return new Array(10, 20, 30);\u003Cbr\u003E}\u003Cbr\u003Econsole.log(fnc()[1]);\u003Cbr\u003E\u003Cp\u003E20\u003Cbr\u003E","\u003Cp\u003EОбъектные типы данных: Function\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript существует множество встроенных функций и возможность создавать собственные. Раз мы говорим о типах данных, рассмотрим пока вот такой пример:\u003Cbr\u003E\u003Cp\u003Evar fnc = function()\u003Cbr\u003E{\u003Cbr\u003E return \"Test\";\u003Cbr\u003E}\u003Cbr\u003Econsole.log(typeof(fnc));\u003Cbr\u003Efnc();\u003Cbr\u003E\u003Cp\u003Efunction\u003Cbr\u003E\"Test\"\u003Cbr\u003E","\u003Cp\u003EКонстанты в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРанее JavaScript не поддерживал константы, и такой код может не сработать в старых версиях браузеров.\u003Cbr\u003E\u003Cp\u003Econst a = 99;\u003Cbr\u003Econsole.log(a);\u003Cbr\u003E\u003Cp\u003E99\u003Cbr\u003E","\u003Cp\u003EОПРЕДЕЛЕНИЕ И ПРЕОБРАЗОВАНИЕ ТИПОВ ДАННЫХ\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОпределение типа переменной\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля определения типа переменной используется оператор\u003Cbr\u003E\u003Cp\u003Estring typeof var\u003Cbr\u003E\u003Cp\u003Eкоторый возвращает тип переменной в виде строки:\u003Cbr\u003Eboolean;\u003Cbr\u003Enember;\u003Cbr\u003Estring;\u003Cbr\u003Eobject;\u003Cbr\u003Efunction;\u003Cbr\u003Enull;\u003Cbr\u003Eundefined.\u003Cbr\u003E","\u003Cp\u003EОпределение типа переменной\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПример использования:\u003Cbr\u003E\u003Cp\u003Econsole.log(typeof 37); \u002F\u002F number\u003Cbr\u003Econsole.log(typeof 3.14); \u002F\u002F number\u003Cbr\u003Econsole.log(typeof Math.LN2); \u002F\u002F number\u003Cbr\u003Econsole.log(typeof Infinity); \u002F\u002F number\u003Cbr\u003Econsole.log(typeof NaN); \u002F\u002F number (хоть Nan -- это и Not-A-Number)\u003Cbr\u003Econsole.log(typeof Number(1)); \u002F\u002F number\u003Cbr\u003Econsole.log(typeof \"\"); \u002F\u002F string\u003Cbr\u003Econsole.log(typeof \"bla\"); \u002F\u002F string\u003Cbr\u003Econsole.log(typeof (typeof 1)); \u002F\u002F string\u003Cbr\u003Econsole.log(typeof String(\"abc\")); \u002F\u002F string\u003Cbr\u003Econsole.log(typeof true); \u002F\u002F boolean\u003Cbr\u003Econsole.log(typeof false); \u002F\u002F boolean\u003Cbr\u003Econsole.log(typeof Boolean(true)); \u002F\u002F boolean\u003Cbr\u003Econsole.log(typeof undefined); \u002F\u002F undefined\u003Cbr\u003Econsole.log(typeof lalala); \u002F\u002F undefined\u003Cbr\u003Econsole.log(typeof {a:1}); \u002F\u002F object\u003Cbr\u003Econsole.log(typeof [1, 2, 4]); \u002F\u002F object (используйте Array.isArray или Object.prototype.toString.call\u003Cbr\u003E \u002F\u002F для различения объектов и массивов)\u003Cbr\u003Econsole.log(typeof new Date()); \u002F\u002F object\u003Cbr\u003Econsole.log(typeof new Boolean(true)); \u002F\u002F object\u003Cbr\u003Econsole.log(typeof new Number(1)); \u002F\u002F object\u003Cbr\u003Econsole.log(typeof new String(\"abc\")); \u002F\u002F object\u003Cbr\u003Econsole.log(typeof function(){}); \u002F\u002F function\u003Cbr\u003Econsole.log(typeof Math.sin); \u002F\u002F function\u003Cbr\u003Econsole.log(typeof null); \u002F\u002F object \u003Cbr\u003E","\u003Cp\u003EОпределение типа переменной\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПример распознавания типа объекта:\u003Cbr\u003E\u003Cp\u003Evar arr = new Array(10, 20, 30);\u003Cbr\u003Eif (typeof arr === \"object\")\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Да, это массив, но массив -- это ведь объект.\");\u003Cbr\u003E}\u003Cbr\u003Eif (Array.isArray(arr))\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Теперь мы точно знаем, что это -- массив.\");\u003Cbr\u003E}\u003Cbr\u003Eif (Object.prototype.toString.call(arr) === \"[object Array]\")\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Так тоже работает!\");\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EДа, это массив, но массив -- это ведь объект.\u003Cbr\u003EТеперь мы точно знаем, что это -- массив.\u003Cbr\u003EТак тоже работает!\u003Cbr\u003E","\u003Cp\u003EОпределение принадлежности классу\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля определения того, является ли переменная экземпляром некоторого класса, используется оператор\u003Cbr\u003E\u003Cp\u003Eboolean instanceof var\u003Cbr\u003E\u003Cp\u003Eкоторый возвращает true или false.\u003Cbr\u003E\u003Cp\u003Evar someString = new String();\u003Cbr\u003Evar someDate = new Date();\u003Cbr\u003Econsole.log(someString instanceof String); \u002F\u002F true\u003Cbr\u003Econsole.log(someString instanceof Object); \u002F\u002F true\u003Cbr\u003Econsole.log(someString instanceof Date); \u002F\u002F false\u003Cbr\u003Econsole.log(someDate instanceof Date); \u002F\u002F true\u003Cbr\u003Econsole.log(someDate instanceof Object); \u002F\u002F true\u003Cbr\u003Econsole.log(someDate instanceof String); \u002F\u002F false\u003Cbr\u003E","\u003Cp\u003EПреобразование типа переменной\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля преобразования типа переменной используется синтаксис\u003Cbr\u003E\u003Cp\u003Eпеременная = Тип(переменная)\u003Cbr\u003E\u003Cp\u003Eнапример\u003Cbr\u003E\u003Cp\u003Evar a=1;\u003Cbr\u003Econsole.log(typeof a);\u003Cbr\u003Ea = String(a);\u003Cbr\u003Econsole.log(typeof a);\u003Cbr\u003E\u003Cp\u003EВнимание! В большинстве случаев преобразование типа МЕНЯЕТ значение переменной!\u003Cbr\u003E\u003Cp\u003Enumber\u003Cbr\u003Estring\u003Cbr\u003E\u003Cp\u003EОбязательно прочитайте: http:\u002F\u002Fjibbering.com\u002Ffaq\u002Fnotes\u002Ftype-conversion\u002F \u003Cbr\u003E","\u003Cp\u003EПреобразование к Boolean\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Efalse\u003Cbr\u003E\u003Cp\u003Etrue\u003Cbr\u003E\u003Cp\u003Efalse\u003Cbr\u003E\u003Cp\u003E0\u003Cbr\u003E\u003Cp\u003E0.0\u003Cbr\u003E\u003Cp\u003ENaN\u003Cbr\u003E\u003Cp\u003EПустая строка\u003Cbr\u003E\u003Cp\u003Enull\u003Cbr\u003E\u003Cp\u003Etrue\u003Cbr\u003E\u003Cp\u003EНепустая строка\u003Cbr\u003E\u003Cp\u003EВсё остальное, что не перечислено слева.\u003Cbr\u003E\u003Cp\u003Eundefined\u003Cbr\u003E\u003Cp\u003E+\u002F- Infinity\u003Cbr\u003E","\u003Cp\u003EПреобразование к Number\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИз boolean\u003Cbr\u003E\u003Cp\u003EИз Number\u003Cbr\u003E\u003Cp\u003Efalse ? 0\u003Cbr\u003E\u003Cp\u003Etrue ? 1\u003Cbr\u003E\u003Cp\u003EСм. далее ☺.\u003Cbr\u003E\u003Cp\u003EИз string\u003Cbr\u003E\u003Cp\u003EСм. далее ☺.\u003Cbr\u003E\u003Cp\u003EИз null\u003Cbr\u003E\u003Cp\u003Enull ? 0\u003Cbr\u003E\u003Cp\u003EИз undefined\u003Cbr\u003E\u003Cp\u003Eundefined ? NaN\u003Cbr\u003E\u003Cp\u003EИз Object\u003Cbr\u003E\u003Cp\u003EObject ? NaN\u003Cbr\u003E","\u003Cp\u003EПреобразование к Number\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Evar str = \"99\";\u003Cbr\u003Evar int = 1;\u003Cbr\u003Econsole.log(str+int); \u002F\u002F 991, конкатенация\u003Cbr\u003Econsole.log((+str)+int); \u002F\u002F 100, сложение\u003Cbr\u003E\u003Cp\u003EСамым простым способом преобразования переменной к числу является её использование в математической операции:\u003Cbr\u003E\u003Cp\u003EИспользование унарного + является одним из самых простых и быстрых способов преобразования переменной к числу, равно как использование двойного отрицания, т.е. !!, является одним из самых простых и быстрых способов преобразования к boolean.\u003Cbr\u003E","\u003Cp\u003EПреобразование к Number\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Evar str = \"99.9\";\u003Cbr\u003EparseInt(str); \u002F\u002F 99\u003Cbr\u003EparseFloat(str); \u002F\u002F 99.9\u003Cbr\u003Evar str = \" 99.9 lalala\";\u003Cbr\u003EparseInt(str); \u002F\u002F 99\u003Cbr\u003EparseFloat(str); \u002F\u002F 99.9\u003Cbr\u003Evar b = true;\u003Cbr\u003EparseInt(b); \u002F\u002F NaN\u003Cbr\u003E\u003Cp\u003EТакже для преобразования к числу можно использовать parseInt() и parseFloat()\u003Cbr\u003E\u003Cp\u003EКак и PHP, JavaScript пытается извлечь из строки число, стоящее в её начале (пробелы перед числом игнорируются). Но! Если PHP в любом случае получает число (0, если извлекать нечего), то JavaScript получает NaN во всех случаях, когда из строки не удалось извлечь число.\u003Cbr\u003E","\u003Cp\u003EПреобразование к String\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИз Boolean\u003Cbr\u003E\u003Cp\u003EИз Array, Object, Function\u003Cbr\u003E\u003Cp\u003Etrue ? “true”\u003Cbr\u003E\u003Cp\u003Efalse ? “false”\u003Cbr\u003E\u003Cp\u003EArray ? строка с элементами\u003Cbr\u003E\u003Cp\u003EObject ? “[object Object]”\u003Cbr\u003E\u003Cp\u003EFunction ? текст функции\u003Cbr\u003E\u003Cp\u003EИз null\u003Cbr\u003E\u003Cp\u003Enull ? “null”\u003Cbr\u003E\u003Cp\u003EНеявное преобразование к string происходит при выводе переменной в выходной поток.\u003Cbr\u003E\u003Cp\u003EИз undefined\u003Cbr\u003E\u003Cp\u003E? “undefined”\u003Cbr\u003E","\u003Cp\u003EПреобразование к Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИз Boolean, String, null, undefined\u003Cbr\u003E\u003Cp\u003EИз Object и Function\u003Cbr\u003E\u003Cp\u003EМассив с одним элементом – исходным значением.\u003Cbr\u003E\u003Cp\u003EМассив с одним элементом – исходным значением.\u003Cbr\u003E\u003Cp\u003EИз целого числа\u003Cbr\u003E\u003Cp\u003EМассив соответствующего размера с undefined элементами.\u003Cbr\u003E\u003Cp\u003EИз дроби\u003Cbr\u003E\u003Cp\u003EОшибка создания массива.\u003Cbr\u003E","\u003Cp\u003EПреобразование к Array\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Evar i = 2;\u003Cbr\u003Evar d = 55.5;\u003Cbr\u003Evar dt = new Date();\u003Cbr\u003Evar obj = new Object;\u003Cbr\u003Eobj.x = 100;\u003Cbr\u003Eobj.y = 200;\u003Cbr\u003Evar n = null;\u003Cbr\u003Evar u;\u003Cbr\u003EArray(i); \u002F\u002F [undefined, undefined]\u003Cbr\u003EArray(d); \u002F\u002F RangeError: invalid array length\u003Cbr\u003EArray(dt); \u002F\u002F [Date {Thu Feb 27 2014 11:00:57 GMT+0300 \u003Cbr\u003E (Kaliningrad Standard Time)}]\u003Cbr\u003EArray(obj); \u002F\u002F [Object { x=100, y=200}]\u003Cbr\u003EArray(n); \u002F\u002F [null]\u003Cbr\u003EArray(u); \u002F\u002F [undefined]\u003Cbr\u003E","\u003Cp\u003EПреобразование к Object\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИз Function\u003Cbr\u003E\u003Cp\u003EПустой объект.\u003Cbr\u003E\u003Cp\u003EПеременная остаётся функцией.\u003Cbr\u003E\u003Cp\u003EИз Boolean, Number, null, undefined\u003Cbr\u003E\u003Cp\u003EФактически – массив. Объект с нумерованными свойствами (символами строки).\u003Cbr\u003E\u003Cp\u003EИз String\u003Cbr\u003E\u003Cp\u003EЭти нумерованные свойства-символы – ReadOnly! См. http:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Flibrary\u002Fecczf11c%28v=vs.94%29.aspx \u003Cbr\u003Eи\u003Cbr\u003E https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FString \u003Cbr\u003E","\u003Cp\u003EВажно!\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПреобразование типов в JavaScript достаточно нетривиально, а потому:\u003Cbr\u003EОбязательно почитайте дополнительный материал, книги.\u003Cbr\u003EСтарайтесь не использовать преобразование там, где в этом нет необходимости.\u003Cbr\u003EОбязательно тестируйте свой код. Могут быть очень неожиданные сюрпризы.\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\02_var_compare.html\u003Cbr\u003E","\u003Cp\u003EПреобразование и переключение типов\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript существует два механизма изменения типов данных:\u003Cbr\u003Eпреобразование – переменная меняет тип (и, возможно, значение);\u003Cbr\u003Eпереключение – копия переменной подвергается преобразованию, а сама переменная остаётся незатронутой.\u003Cbr\u003E\u003Cp\u003EПереключение\u003Cbr\u003E\u003Cp\u003EПреобразование\u003Cbr\u003E\u003Cp\u003Ea = 10;\u003Cbr\u003Ea = String(a);\u003Cbr\u003E\u003Cp\u003Ea = 10;\u003Cbr\u003Eb = true;\u003Cbr\u003Ec = a + b;\u003Cbr\u003E","\u003Cp\u003EГибкое (мягкое) сравнение (==)\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EЖёсткое (строгое) сравнение (===)\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EНебольшая задача для закрепления материала\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ обоих вариантах вам предлагается выяснить, чему равно значение переменной c после выполнения кода.\u003Cbr\u003E\u003Cp\u003Ea=\"10 cats\";\u003Cbr\u003Eb=\"5a dogs\";\u003Cbr\u003Ec=a\u002Fb;\u003Cbr\u003E\u003Cp\u003Ea=\"10 cats\";\u003Cbr\u003Eb='5a dogs';\u003Cbr\u003Ec=a\u002Fb;\u003Cbr\u003E\u003Cp\u003EВариант 1:\u003Cbr\u003E\u003Cp\u003EВариант 2:\u003Cbr\u003E\u003Cp\u003ENaN\u003Cbr\u003E\u003Cp\u003ENaN\u003Cbr\u003E\u003Cp\u003Ea=true;\u003Cbr\u003Eb=\"5a dogs\";\u003Cbr\u003Ec=a\u002Fb;\u003Cbr\u003E\u003Cp\u003EВариант 3:\u003Cbr\u003E\u003Cp\u003ENaN\u003Cbr\u003E","\u003Cp\u003EОСНОВНЫЕ ФУНКЦИИ JAVASCRIPT, С КОТОРЫХ НАДО НАЧАТЬ\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EФункции, которые нужны всегда\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript существует несколько функций (и конструкций), которые нужны буквально с первого дня программирования. Рассмотрим их в сравнении с PHP:\u003Cbr\u003E\u003Cp\u003E\u003C?php\u003Cbr\u003Eecho $var;\u003Cbr\u003Eprint_r($var);\u003Cbr\u003Eisset($arr[$elem]);\u003Cbr\u003Eunset($var, $arr[$elem]);\u003Cbr\u003Einclude($filename);\u003Cbr\u003Eexit(‘Some message…’);\u003Cbr\u003E?\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cscript\u003E\u003Cbr\u003E\u002F\u002F ??? ☺\u003Cbr\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\03_basic_functions.html\u003Cbr\u003E","\u003Cp\u003EВывод данных в выходной поток\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля вывода данных в выходной поток (в PHP за это отвечает конструкция echo) используется несколько вариантов:\u003Cbr\u003EВ консоли – просто указание переменной, результат последнего присваивания или console.log(x).\u003Cbr\u003EВ документе: document.write(x) или document.getElementById('id').innerHTML=x;\u003Cbr\u003EБыстрый вывод в всплывающем окне: alert(x);\u003Cbr\u003E\u003Cp\u003Edocument.write('ABC');\u003Cbr\u003Edocument.getElementById('sample').innerHTML = 'OK';\u003Cbr\u003Econsole.log('Yes');\u003Cbr\u003Ealert('!!!');\u003Cbr\u003E","\u003Cp\u003EОтладочный вывод данных\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПри работе с консолью в Firebug вы можете анализировать в том числе сложные типы данных:\u003Cbr\u003E\u003Cp\u003Eobj = new Object();\u003Cbr\u003Eobj.a = 99;\u003Cbr\u003Eobj.b = \"ABC\";\u003Cbr\u003Eobj.c = new Array(1, 2 ,3);\u003Cbr\u003Eobj.d = new Object();\u003Cbr\u003Eobj.d.a = 555;\u003Cbr\u003Econsole.log(obj);\u003Cbr\u003E\u003Cp\u003EВ PHP аналогичный эффект дают функции print_r() и var_dump().\u003Cbr\u003E","\u003Cp\u003EПроверка существования\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПроверка существование элемента массива или переменной осуществляется сравнением с undefined (НЕ строкой \"undefined“!!!) (аналог в PHP – isset() ):\u003Cbr\u003E\u003Cp\u003Evar a = 99;\u003Cbr\u003Evar b = null;\u003Cbr\u003Evar c;\u003Cbr\u003Eif (a === null) {console.log('a is null');}\u003Cbr\u003Eif (a === undefined) {console.log('a is undefined');}\u003Cbr\u003Eif (b === null) {console.log('b is null');}\u003Cbr\u003Eif (b === undefined) {console.log('b is undefined');}\u003Cbr\u003Eif (c === null) {console.log('c is null');}\u003Cbr\u003Eif (c === undefined) {console.log('c is undefined');}\u003Cbr\u003E\u003Cp\u003Eb is null\u003Cbr\u003Ec is undefined\u003Cbr\u003E","\u003Cp\u003EПроверка существования\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВАЖНО! Нельзя обращаться к элементу в иерархии «через голову» его родителей:\u003Cbr\u003E\u003Cp\u003Evar obj = new Object();\u003Cbr\u003Eobj.x = 5;\u003Cbr\u003Eif (obj.x === undefined) {console.log('obj.x is undefined');}\u003Cbr\u003Eif (obj.y === undefined) {console.log('obj.y is undefined');}\u003Cbr\u003Eif (zzz.y === undefined) {console.log('zzz.y is undefined');}\u003Cbr\u003E\u003Cp\u003Eobj.y is undefined\u003Cbr\u003EReferenceError: zzz is not defined\u003Cbr\u003E\u003Cp\u003EОшибка!\u003Cbr\u003E","\u003Cp\u003EУдаление переменных и элементов массива\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EУдаление переменных и элементов массива осуществляется немного по-разному (аналог в PHP – unset() ):\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Ещё один способ инициализации\u003Cbr\u003Evar arr = [100, 200, 300, 400, 500];\u003Cbr\u003Earr.splice(3, 1);\u003Cbr\u003Econsole.log(arr); \u002F\u002F [100, 200, 300, 500]\u003Cbr\u003Edelete arr[2];\u003Cbr\u003Econsole.log(arr); \u002F\u002F [100, 200, undefined, 500]\u003Cbr\u003Efunction Fnc(){};\u003Cbr\u003EFnc.prototype = { x: 123 };\u003Cbr\u003Evar example = new Fnc();\u003Cbr\u003Econsole.log(example.x); \u002F\u002F 123\u003Cbr\u003Eexample.x = 456;\u003Cbr\u003Econsole.log(example.x); \u002F\u002F 456\u003Cbr\u003Edelete example.x;\u003Cbr\u003Econsole.log(example.x); \u002F\u002F 123 (обращение к родительскому свойству)\u003Cbr\u003Ez = 555;\u003Cbr\u003Edelete z;\u003Cbr\u003Econsole.log(z); \u002F\u002F 555 (не удаляется; особенно это относится к объявлению с var)\u003Cbr\u003Ez = undefined;\u003Cbr\u003Econsole.log(z); \u002F\u002F undefined\u003Cbr\u003E","\u003Cp\u003EДосрочное прекращение выполнения скрипта\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля досрочного прекращения выполнения скрипта (аналог в PHP – exit() или die() ) есть несколько альтернативных решений.\u003Cbr\u003E\u003Cp\u003Efunction fnc()\u003Cbr\u003E{\u003Cbr\u003E console.log('Step 1');\u003Cbr\u003E return false; \u002F\u002F Выход из функции (тут классика).\u003Cbr\u003E console.log('Step 2'); \u003Cbr\u003E}\u003Cbr\u003Efnc();\u003Cbr\u003E\u002F\u002F Остановка скрипта.\u003Cbr\u003Ethrow new Error('Script terminated');\u003Cbr\u003Econsole.log('Step 3'); \u003Cbr\u003E","\u003Cp\u003EСборка скрипта из нескольких файлов\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПрямых аналогов PHP-функций include_*\u002Frequire_* в JavaScript нет. Решения по сборке скриптов из частей таковы:\u003Cbr\u003EПодключить к HTML несколько JS-файлов.\u003Cbr\u003EИспользовать eval() (но это опасно).\u003Cbr\u003EИспользовать создание функции из её текста.\u003Cbr\u003E\u003Cp\u003Evar someCode1 = 'console.log(\"First\");'\u003Cbr\u003Eeval(someCode1);\u003Cbr\u003Evar someCode2 = 'return \"Second\";';\u003Cbr\u003Evar fnc = new Function(someCode2);\u003Cbr\u003Econsole.log(fnc());\u003Cbr\u003E\u003Cp\u003EFirst\u003Cbr\u003ESecond\u003Cbr\u003E","\u003Cp\u003EНесколько очень простых примеров…\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСейчас в дополнение к уже показанному мы рассмотрим несколько примеров простых и часто используемых в JavaScript действий.\u003Cbr\u003EИтак…\u003Cbr\u003E","\u003Cp\u003EНесколько очень простых примеров…\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОпределение информации о браузере:\u003Cbr\u003E\u003Cp\u003Ebr = navigator.userAgent.toLowerCase();\u003Cbr\u003E\u003Cp\u003E\"mozilla\u002F5.0 (windows nt 6.1; wow64; rv:27.0) gecko\u002F20100101 firefox\u002F27.0\"\u003Cbr\u003E\u003Cp\u003EЭто очень упрощённый способ. Погуглите полный. ВНИМАНИЕ! Любые попытки «напрямую» определить версию браузера ненадёжны. Гуглите способы косвенного определения по поведению и поддерживаемым возможностям.\u003Cbr\u003E","\u003Cp\u003EНесколько очень простых примеров…\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EГенерация случайных чисел в диапазоне:\u003Cbr\u003E\u003Cp\u003Efunction getRandomDouble (min, max)\u003Cbr\u003E{\u003Cbr\u003E return Math.random() * (max - min) + min;\u003Cbr\u003E}\u003Cbr\u003Efunction getRandomInteger (min, max)\u003Cbr\u003E{\u003Cbr\u003E return Math.floor(Math.random() * (max - min + 1)) + min;\u003Cbr\u003E}\u003Cbr\u003Econsole.log(getRandomDouble(100, 200));\u003Cbr\u003Econsole.log(getRandomInteger(100, 200));\u003Cbr\u003E\u003Cp\u003E150.1573960629088\u003Cbr\u003E145\u003Cbr\u003E","\u003Cp\u003EНесколько очень простых примеров…\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИзменение фона всех td на странице:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: обработка элементов документа\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function makeCellsGreen()\u003Cbr\u003E {\u003Cbr\u003E var list=document.getElementsByTagName(\"td\");\u003Cbr\u003E for (var cell_key in list)\u003Cbr\u003E {\u003Cbr\u003E if (list[cell_key].style !== undefined)\u003Cbr\u003E {\u003Cbr\u003E list[cell_key].style.backgroundColor = 'green';\u003Cbr\u003E } \u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"makeCellsGreen()\"\u003E\u003Cbr\u003E \u003Cdiv id=\"sample\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Ctable\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E&nbsp;\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"#\"\u003ELink\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\04_scan_all_elements.html\u003Cbr\u003E","\u003Cp\u003EОПЕРАТОРЫ И УПРАВЛЯЮЩИЕ КОНСТРУКЦИИ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОПЕРАТОРЫ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EВиды операторов в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператоры в JavaScript бывают:\u003Cbr\u003EУнарными – с одним операндом:\u003Cbr\u003E\u003Cbr\u003EБинарными – с двумя операндами (таких – абсолютное большинство):\u003Cbr\u003E\u003Cbr\u003EТернарными – с тремя операндами (такой оператор в JavaScript только один):\u003Cbr\u003E\u003Cp\u003Eb = ! b;\u003Cbr\u003Ei++;\u003Cbr\u003E\u003Cp\u003Ec = a + b;\u003Cbr\u003E\u003Cp\u003Ex = 10;\u003Cbr\u003Ey = (x\u003E=10) ? \"OK\" : \"No\";\u003Cbr\u003E","\u003Cp\u003EКраткая выдержка из документации\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Edelete\u003Cbr\u003Efunction\u003Cbr\u003Ein\u003Cbr\u003Einstanceof\u003Cbr\u003Enew\u003Cbr\u003Ethis\u003Cbr\u003Etypeof\u003Cbr\u003Evoid\u003Cbr\u003EАксессоры: object.property и object[\"property\"]\u003Cbr\u003EАрифметические: +, -, *, \u002F, %, ++, --\u003Cbr\u003EЗапятая: ,\u003Cbr\u003EЛогические: &&, ||, !\u003Cbr\u003EПрисваивания: =, +=, -=, *=, \u002F=, \u003E\u003E=, \u003C\u003C=, \u003E\u003E\u003E=, &=, |=, ^=\u003Cbr\u003EСравнения: ==, !=, ===, !==, \u003E, \u003E=, \u003C, \u003C=\u003Cbr\u003EПобитовые: &, |, ^, ~, \u003C\u003C, \u003E\u003E, \u003E\u003E\u003E\u003Cbr\u003EСтроковые: +, +=\u003Cbr\u003EУсловный: condition ? ifTrue : ifFalse\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fjavascript.ru\u002Fmanual\u002Foperator\u003Cbr\u003E","\u003Cp\u003EВыражения с несколькими операторами\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля простоты рекомендуется запомнить два правила:\u003Cbr\u003EJavaScript правильно учитывает приоритет арифметических операций.\u003Cbr\u003EВ любых иных случаях или не используйте несколько операторов (особенно – разного типа) в одном выражении, или пользуйтесь скобками.\u003Cbr\u003EДля желающих понять суть проблемы глубже есть раздел документации, посвящённый ассоциативности операторов:\u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002FOperator_Precedence \u003Cbr\u003E","\u003Cp\u003EОператор присваивания\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор присваивания обозначается знаком = и активно используется для инициализации переменных и присваивания переменным и элементам новых значений:\u003Cbr\u003E\u003Cp\u003Ea = 20;\u003Cbr\u003Edocument.getElementById('some_element').innerHTML = 'OK';\u003Cbr\u003E\u003Cp\u003EДля операций + - * \u002F % (и многих других) поддерживается сокращённая форма записи оператора присваивания:\u003Cbr\u003E\u003Cp\u003Ea = 2;\u003Cbr\u003Ea += 1; \u002F\u002F a = a + 1;\u003Cbr\u003Ea %= 2; \u002F\u002F a = a % 2;\u003Cbr\u003E","\u003Cp\u003EПрисваивание по ссылке\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript присваивания по ссылке НЕТ.\u003Cbr\u003EОчень упрощённо идею ссылок в JavaScript можно выразить так:\u003Cbr\u003EНельзя хранить объекты, можно хранить ссылки на объекты.\u003Cbr\u003EНельзя передавать по ссылке, но передаются ссылки на объекты.\u003Cbr\u003EСсылок на примитивные значения нет, они не имеют смысла.\u003Cbr\u003E","\u003Cp\u003EАрифметические операторы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОперации с числами производятся в дробной форме.\u003Cbr\u003E","\u003Cp\u003EОператоры инкремента и декремента\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript поддерживает префиксные и постфиксные операторы инкремента и декремента числовых переменных. Инкрементирование или декрементирование логических переменных приводит их к числовому виду.\u003Cbr\u003E","\u003Cp\u003EНебольшая задача для закрепления материала\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЧто получится в результате выполнения такого кода?\u003Cbr\u003E\u003Cp\u003Ei=2;\u003Cbr\u003Ei += i++ + ++i;\u003Cbr\u003Econsole.log(i);\u003Cbr\u003E\u003Cp\u003E\u002F\u002F 8\u003Cbr\u003E\u003Cp\u003EСейчас будет пояснение…\u003Cbr\u003E\u003Cp\u003EА в PHP – 10.\u003Cbr\u003E","\u003Cp\u003EНебольшая задача для закрепления материала – пояснение\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003Ei=2;\u003Cbr\u003Ei += i++ + ++i;\u003Cbr\u003Econsole.log(i);\u003Cbr\u003E\u003Cp\u003Ei == 2;\u003Cbr\u003EСрабатывает префиксный инкремент ++i, выражение принимает вид:\u003Cbr\u003Ei += i++ + 3;\u003Cbr\u003EПроисходит подстановка закэшированного значения, выражение принимает вид:\u003Cbr\u003Ei += 2 + 3; или: i += 5;\u003Cbr\u003EПроисходит «разворачивание» «сокращённой записи сложения и присваивания» +=, выражение принимает вид:\u003Cbr\u003Ei=2 + 5;\u003Cbr\u003EВыполнение выражения (п. 4) даёт i == 7;\u003Cbr\u003EСрабатывает постфиксный инкремент i++, который увеличивает значение i на единицу, т.е. теперь i == 8;\u003Cbr\u003E","\u003Cp\u003EПоразрядные операторы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЭта группа операторов работает с битовыми представлениями значений операндов. В основном эти операторы применяются для создания т.н. «битовых масок», для решения задач криптографии и при генерации изображений.\u003Cbr\u003E","\u003Cp\u003EЛогические операторы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЭта группа операторов используется для определения логического значения выражения (в т.ч. с несколькими операндами). Подробнее мы рассмотрим их в разделе, посвящённом управляющим конструкциям.\u003Cbr\u003E","\u003Cp\u003EОператоры сравнения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператоры сравнения позволяют сравнивать между собой значения переменных. Обратите внимание: при «мягком» сравнении («==») будет происходить переключение типов (см. две «большие таблицы» в разделе про типы данных).\u003Cbr\u003E","\u003Cp\u003EСтроковые операторы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript есть один строковый оператор – плюс (+). Это оператор конкатенации (склеивания) строк. Он поддерживает сокращённую запись (конкатенацию с присваиванием).\u003Cbr\u003E\u003Cp\u003Ea = 'Hello';\u003Cbr\u003Eb = a + ' world!';\u003Cbr\u003Econsole.log(b);\u003Cbr\u003Ea = 'Hello';\u003Cbr\u003Ea += ' world!';\u003Cbr\u003Econsole.log(a);\u003Cbr\u003E\u003Cp\u003EHello world!\u003Cbr\u003EHello world!\u003Cbr\u003E","\u003Cp\u003EОператор «запятая»\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор «запятая» вычисляет оба операнда и возвращает значение второго, что позволяет включить несколько выражений в то место кода, где должно быть одно выражение.\u003Cbr\u003E\u003Cp\u003Efor (var i=0, j=9; i \u003C= 9; i++, j--)\u003Cbr\u003E{\u003Cbr\u003E console.log(\"a[\" + i + \"][\" + j + \"]= \" + a[i][j]);\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОператор проверки принадлежности классу\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля определения того, является ли переменная экземпляром некоторого класса, используется оператор\u003Cbr\u003E\u003Cp\u003Eboolean instanceof var\u003Cbr\u003E\u003Cp\u003Eкоторый возвращает true или false.\u003Cbr\u003E\u003Cp\u003Evar someString = new String();\u003Cbr\u003Evar someDate = new Date();\u003Cbr\u003Econsole.log(someString instanceof String); \u002F\u002F true\u003Cbr\u003Econsole.log(someString instanceof Object); \u002F\u002F true\u003Cbr\u003Econsole.log(someString instanceof Date); \u002F\u002F false\u003Cbr\u003Econsole.log(someDate instanceof Date); \u002F\u002F true\u003Cbr\u003Econsole.log(someDate instanceof Object); \u002F\u002F true\u003Cbr\u003Econsole.log(someDate instanceof String); \u002F\u002F false\u003Cbr\u003E","\u003Cp\u003EОператор определения типа\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля определения типа переменной используется оператор\u003Cbr\u003E\u003Cp\u003Estring typeof var\u003Cbr\u003E\u003Cp\u003Eкоторый возвращает тип переменной в виде строки:\u003Cbr\u003Eboolean;\u003Cbr\u003Enember;\u003Cbr\u003Estring;\u003Cbr\u003Eobject;\u003Cbr\u003Efunction;\u003Cbr\u003Enull;\u003Cbr\u003Eundefined.\u003Cbr\u003E\u003Cp\u003Evar a = 5;\u003Cbr\u003Econsole.log(typeof a); \u002F\u002F \"number\"\u003Cbr\u003Evar a = 'test';\u003Cbr\u003Econsole.log(typeof a); \u002F\u002F \"string\"\u003Cbr\u003E","\u003Cp\u003EОператор доступа к свойству (аксессор)\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля доступа к свойству объекта или элементу массива используются т.н. «аксессоры».\u003Cbr\u003E\u003Cp\u003E. или [ ]\u003Cbr\u003E\u003Cp\u003EЭто проще показать на примере:\u003Cbr\u003E\u003Cp\u003Earr = new Array(100, 200, 300);\u003Cbr\u003Eobj = new Object({x:111, y:222});\u003Cbr\u003Earr.a = 12345;\u003Cbr\u003Earr[b] = 67890;\u003Cbr\u003Eobj.x = 11111;\u003Cbr\u003E\u002F\u002F obj[y] = 33333; \u002F\u002F Так нельзя, это не элемент массива.\u003Cbr\u003Econsole.log(arr.a); \u002F\u002F 12345\u003Cbr\u003Econsole.log(arr[a]); \u002F\u002F undefined\u003Cbr\u003Econsole.log(arr.b); \u002F\u002F undefined\u003Cbr\u003Econsole.log(arr[b]); \u002F\u002F 67890\u003Cbr\u003E\u002F\u002F console.log(obj[x]); \u002F\u002F Так нельзя, это не элемент массива.\u003Cbr\u003Econsole.log(obj.y); \u002F\u002F 222\u003Cbr\u003E","\u003Cp\u003EОператор проверки наличия свойства\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля проверки наличия свойства или метода у объекта или элемента (по индексу!) в массиве используется оператор\u003Cbr\u003E\u003Cp\u003Eboolean in Object\u003Cbr\u003E\u003Cp\u003EЕсли этот оператор применить не к объекту, будет ошибка.\u003Cbr\u003E\u003Cp\u003Eobj = new Object({ a: 5});\u003Cbr\u003Econsole.log(\"a\" in obj); \u002F\u002F true\u003Cbr\u003Econsole.log(\"b\" in obj); \u002F\u002F false\u003Cbr\u003Econsole.log(\"toString\" in obj); \u002F\u002F true, т.к toString есть в прототипе.\u003Cbr\u003Earr = new Array(\"a\", \"b\", \"c\");\u003Cbr\u003Econsole.log(1 in arr); \u002F\u002F true\u003Cbr\u003Econsole.log(22 in arr); \u002F\u002F false\u003Cbr\u003Edelete arr[1];\u003Cbr\u003Econsole.log(1 in arr); \u002F\u002F false, т.к. элемент удалён.\u003Cbr\u003E","\u003Cp\u003EОператор удаления\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля удаления переменной, элемента массива и т.д. используется оператор\u003Cbr\u003E\u003Cp\u003Eboolean delete something\u003Cbr\u003E\u003Cp\u003Eкоторый возвращает false (если удаляемый объект существует и не может быть удалён) или true в любых других случаях..\u003Cbr\u003E\u003Cp\u003Ex = 42; \u002F\u002F \"Обычные переменные\" являются свойствами глобального объекта window.\u003Cbr\u003Evar y = 43; \u002F\u002F Переменная.\u003Cbr\u003Eobj = new Number();\u003Cbr\u003Eobj.x = 4; \u002F\u002F Свойство объекта.\u003Cbr\u003Eobj.y = 5; \u002F\u002F Свойство объекта.\u003Cbr\u003Edelete x; \u002F\u002F true (x объявлено без var).\u003Cbr\u003Edelete y; \u002F\u002F false (объявлено с var, флаг DontDelete).\u003Cbr\u003Edelete Math.PI;\u002F\u002F false (встроенный объект, флаг DontDelete).\u003Cbr\u003Edelete obj.x \u002F\u002F true (пользовательское свойство).\u003Cbr\u003Ewith(obj)\u003Cbr\u003E{\u003Cbr\u003E delete y; \u002F\u002F true (эквивалент delete obj.y).\u003Cbr\u003E}\u003Cbr\u003Edelete obj; \u002F\u002F true\u003Cbr\u003E","\u003Cp\u003EОператор исполнения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИсполнения кода без возврата значения и воздействия на контекст используется оператор\u003Cbr\u003E\u003Cp\u003Evoid (код)\u003Cbr\u003E\u003Cp\u003EНапример:\u003Cbr\u003E\u003Cp\u003EsomeCode = 'x=999;';\u003Cbr\u003Ex = 1;\u003Cbr\u003Evoid(someCode);\u003Cbr\u003Econsole.log(x); \u002F\u002F 1\u003Cbr\u003Eeval(someCode);\u003Cbr\u003Econsole.log(x); \u002F\u002F 999\u003Cbr\u003E","\u003Cp\u003EОператоры function, new, this\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор function используется для создания функций. Об этом будет подробно в разделе, посвящённом функциям.\u003Cbr\u003EОператор new используется для создания объектов. Об этом будет подробно в разделе, посвящённом ООП.\u003Cbr\u003EОператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Об этом будет подробно в разделе, посвящённом ООП.\u003Cbr\u003E","\u003Cp\u003EУПРАВЛЯЮЩИЕ КОНСТРУКЦИИ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОператор условия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор условия (if) может использоваться в JavaScript в нескольких формах.\u003Cbr\u003EСамый простой вариант:\u003Cbr\u003E\u003Cp\u003Ex = 10;\u003Cbr\u003Eif (x == 10)\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Десять.\");\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОператор условия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор условия может содержать необязательную секцию else (PHP’шного elseif в JavaScript НЕТ!).\u003Cbr\u003E\u003Cp\u003Ex = 10;\u003Cbr\u003Eif (x == 10)\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Десять.\");\u003Cbr\u003E}\u003Cbr\u003Eelse\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Не десять.\");\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОператор условия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор условия может быть вложенным (в любой секции).\u003Cbr\u003E\u003Cp\u003Ex = 10;\u003Cbr\u003Ey = 20;\u003Cbr\u003Eif (x == 10)\u003Cbr\u003E{\u003Cbr\u003E if (y == 20)\u003Cbr\u003E {\u003Cbr\u003E console.log(\"Десять. Двадцать.\");\u003Cbr\u003E } \u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОператор условия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EУсловия могут быть сложными (составными), здесь пригодятся уже рассмотренные нами ранее логические операторы. Обратите внимание: в круглые скобки берётся как всё сложное условие целиком, так и каждое простое условие в его составе по отдельности:\u003Cbr\u003E\u003Cp\u003Ex = 10;\u003Cbr\u003Ey = 20;\u003Cbr\u003Eif ((x == 10)&&(y==20))\u003Cbr\u003E{\u003Cbr\u003E console.log(\"Десять и двадцать.\");\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EОператор переключения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОператор переключения (switch) является наиболее удобным средством для организации т.н. «мультиветвления». \u003Cbr\u003E\u003Cp\u003Ea = \"One\";\u003Cbr\u003Eswitch (a) \u002F\u002F Любой тип данных, кроме массивов и объектов\u003Cbr\u003E{\u003Cbr\u003E case 10:\u003Cbr\u003E console.log('Десять.');\u003Cbr\u003E break; \u002F\u002F Наличие break обязательно в конце каждого case\u003Cbr\u003E case 'One':\u003Cbr\u003E console.log('Один.');\u003Cbr\u003E break; \u002F\u002F Наличие break обязательно в конце каждого case\u003Cbr\u003E default: \u002F\u002F Эта секция может отсутствовать\u003Cbr\u003E console.log('Иное значение.');\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EЦикл с предусловием\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЦикл с предусловием может не выполниться ни разу, т.к. условие проверяется перед выполнением тела цикла:\u003Cbr\u003E\u003Cp\u003Ei = 0;\u003Cbr\u003Ewhile(++i \u003C= 5)\u003Cbr\u003E {\u003Cbr\u003E console.log(i);\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003EЦикл с постусловием\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЦикл с постусловием выполнится хотя бы один раз, т.к. условие проверяется после выполнения тела цикла:\u003Cbr\u003E\u003Cp\u003Ei = 0;\u003Cbr\u003Edo\u003Cbr\u003E {\u003Cbr\u003E console.log(i);\u003Cbr\u003E }\u003Cbr\u003Ewhile (++i \u003C= 5);\u003Cbr\u003E","\u003Cp\u003EИтерационный цикл\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИтерационный цикл выполняется заданное количество раз, причём его синтаксис включает инициализацию счётчика, условие выхода и правило изменения счётчика:\u003Cbr\u003E\u003Cp\u003Evar i;\r\nfor (i=0; i\u003C=5; i++)\r\n{\r\nconsole.log(i);\r\n}\u003Cbr\u003E","\u003Cp\u003EИтерационный цикл\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСпециальная модификация итерационного цикла (for) позволяет проходить по любому массиву (по одному уровню для многомерных массивов), на каждом шаге извлекая ключ элемента:\u003Cbr\u003E\u003Cp\u003Earr = new Array(100, 200, new Array(1, 2, 3), 300, 400);\u003Cbr\u003Efor (key_one in arr)\u003Cbr\u003E{\u003Cbr\u003E if (Object.prototype.toString.call(arr[key_one]) !== '[object Array]')\u003Cbr\u003E {\u003Cbr\u003E console.log(arr[key_one]);\u003Cbr\u003E }\u003Cbr\u003E else\u003Cbr\u003E {\u003Cbr\u003E for (key_two in arr[key_one])\u003Cbr\u003E {\u003Cbr\u003E console.log(arr[key_one][key_two]);\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПропуск остатка итерации и выход из цикла\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript позволяет пропустить выполнение части тела цикла и сразу перейти на следующую итерацию с помощью оператора continue. Досрочный выход из цикла выполняется оператором break.\u003Cbr\u003E\u003Cp\u003Efor (var i=0; i\u003C999; i++)\r\n{\r\n if (i\u003C500) continue;\r\n console.log(i);\r\n break;\r\n}\u003Cbr\u003E","\u003Cp\u003EТернарный оператор\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EУправление выполнением программы можно реализовывать и с помощью тернарного оператора – сокращённого аналога оператора if:\u003Cbr\u003E\u003Cp\u003Ex = 10;\u003Cbr\u003Ey = (x == 10) ? \"Десять\" : \"Не десять\";\u003Cbr\u003E(y == \"Десять\") ? console.log(\"Да\") : console.log(\"Нет\");\u003Cbr\u003E","\u003Cp\u003EМАТЕМАТИЧЕСКИЕ ФУНКЦИИ JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНесмотря на то, что JavaScript редко используется для решения математических задач, есть ряд функций, использование которых может оказаться полезным.\u003Cbr\u003EПолный список математических функций, предоставляемых объектом Match, можно увидеть здесь:\u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FMath \u003Cbr\u003EНастоятельно рекомендуется ознакомиться с этим списком функций – хотя бы для того, чтобы знать, что они есть, и «не изобретать велосипеды».\u003Cbr\u003E","\u003Cp\u003EОкругление чисел\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля округления чисел используются методы Math:\u003Cbr\u003EДо ближайшего целого: Math.round().\u003Cbr\u003EДо ближайшего меньшего целого: Math.floor().\u003Cbr\u003EДо ближайшего большего целого: Math.ceil().\u003Cbr\u003E\u003Cp\u003EMath.round(55.7777); \u002F\u002F 56\u003Cbr\u003EMath.floor(55.7777); \u002F\u002F 55\u003Cbr\u003EMath.ceil(55.7777); \u002F\u002F 56\u003Cbr\u003E\u003Cp\u003EЗдесь есть отличный пример доработки для обеспечения округления с заданной точностью: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FMath\u002Fround \u003Cbr\u003E","\u003Cp\u003EПолучение случайных чисел\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля получения случайных чисел используется метод Math.random(), который возвращает дробь от 0 (включительно) до 1 (не включительно).\u003Cbr\u003E\u003Cp\u003Econsole.log(Math.random());\u003Cbr\u003E\u003Cp\u003EКак получить целое число или дробь в заданном диапазоне, мы уже рассматривали ранее.\u003Cbr\u003E","\u003Cp\u003EПеревод чисел между системами счисления\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript перевод между системами счисления проще всего выполнить так:\u003Cbr\u003E\u003Cp\u003Ex = 255;\u003Cbr\u003EhexString = x.toString(16);\u003Cbr\u003Econsole.log(hexString); \u002F\u002F ff\u003Cbr\u003Ey = parseInt(\"0xFFFF\", 16); \u002F\u002F 65535\u003Cbr\u003Econsole.log(y);\u003Cbr\u003E","\u003Cp\u003EОпределение минимального и максимального значения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМетоды Math.max и Math.min позволяют искать минимальное и максимально значение в наборе чисел, а с небольшой доработкой – и в массиве чисел.\u003Cbr\u003E\u003Cp\u003EMath.max(10, 20, 5); \u002F\u002F 20\r\nMath.min(-10, -20); \u002F\u002F -20\r\nMath.max(\"ABC\", \"OK\"); \u002F\u002F NaN\r\n\r\nfunction getMaxOfArray(numArray)\r\n{\r\nreturn Math.max.apply(null, numArray);\r\n}\r\n\r\narr = new Array(1, 100, 5, 500);\r\nconsole.log(getMaxOfArray(arr)); \u002F\u002F 500\u003Cbr\u003E","\u003Cp\u003EОпределение корректности чисел\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript многие операции с числами могут привести к переполнению разрядной сетки. Проверить результат выполнения операций с числами на корректность можно с помощью функций isFinite() и isNaN():\u003Cbr\u003E\u003Cp\u003Ex = 1\u002F0;\u003Cbr\u003Ey = -1\u002F0;\u003Cbr\u003Ez = 9e999999999999;\u003Cbr\u003Ea = 5;\u003Cbr\u003Es = \"Test\";\u003Cbr\u003Econsole.log(isFinite(x)); \u002F\u002F false\u003Cbr\u003Econsole.log(isFinite(y)); \u002F\u002F false\u003Cbr\u003Econsole.log(isFinite(z)); \u002F\u002F false\u003Cbr\u003Econsole.log(isFinite(a)); \u002F\u002F true\u003Cbr\u003Econsole.log(isFinite(s)); \u002F\u002F false\u003Cbr\u003Econsole.log(isNaN(x)); \u002F\u002F false\u003Cbr\u003Econsole.log(isNaN(y)); \u002F\u002F false\u003Cbr\u003Econsole.log(isNaN(z)); \u002F\u002F false\u003Cbr\u003Econsole.log(isNaN(a)); \u002F\u002F false\u003Cbr\u003Econsole.log(isNaN(s)); \u002F\u002F true\u003Cbr\u003E","\u003Cp\u003EФУНКЦИИ JAVASCRIPT, ОПРЕДЕЛЯЕМЫЕ ПОЛЬЗОВАТЕЛЕМ\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EНебольшое введение\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПрежде чем продолжить рассмотрение библиотечных функций JavaScript, нужно научиться писать свои собственные функции.\u003Cbr\u003EJavaScript следует такой логике при работе с функциями:\u003Cbr\u003EТип возвращаемых значений не указывается и может быть любым.\u003Cbr\u003EТип предаваемых параметров не указывается и может быть любым.\u003Cbr\u003EПоддерживается переменное количество параметров.\u003Cbr\u003EНЕ поддерживается указание значений параметров по умолчанию.\u003Cbr\u003EНЕ поддерживается свободный выбор варианта передачи по ссылке или значению (объекты всегда передаются по ссылке, примитивы – по значению).\u003Cbr\u003E","\u003Cp\u003EОбъявление и вызов функции\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ самом простом случае объявление и вызов функции выглядит так:\u003Cbr\u003E\u003Cp\u003Efunction sqr(x)\u003Cbr\u003E{\u003Cbr\u003E return x*x;\u003Cbr\u003E}\u003Cbr\u003Econsole.log(sqr(2)); \u002F\u002F 4\u003Cbr\u003E","\u003Cp\u003EОбласть видимости переменных\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ отличие от PHP в JavaScript переменная, используемая в функции без ключевого слова var, является ГЛОБАЛЬНОЙ.\u003Cbr\u003E\u003Cp\u003Ea = 10;\u003Cbr\u003Eb = 20;\u003Cbr\u003Efunction test()\u003Cbr\u003E{\u003Cbr\u003E a = 1000;\u003Cbr\u003E var b = 2000;\u003Cbr\u003E var c = 40;\u003Cbr\u003E d = 50;\u003Cbr\u003E}\u003Cbr\u003Econsole.log(a); \u002F\u002F 10\u003Cbr\u003Econsole.log(b); \u002F\u002F 20\u003Cbr\u003Etest();\u003Cbr\u003Econsole.log(a); \u002F\u002F 1000\u003Cbr\u003Econsole.log(b); \u002F\u002F 20\u003Cbr\u003E\u002F\u002Fconsole.log(c); \u002F\u002F Ошибка, переменная не существует вне функции.\u003Cbr\u003Econsole.log(d); \u002F\u002F 50\u003Cbr\u003E","\u003Cp\u003EПередача параметров по значению и по ссылке\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript нельзя выбрать, как передавать параметр в функцию. Действует правило: если параметр – объект, то передаётся ссылка, иначе – значение.\u003Cbr\u003E\u003Cp\u003Ea = 10;\u003Cbr\u003Eb = new Object();\u003Cbr\u003Efunction test(one, two)\u003Cbr\u003E{\u003Cbr\u003E one = 50;\u003Cbr\u003E two.z = 999;\u003Cbr\u003E}\u003Cbr\u003Etest(a, b);\u003Cbr\u003Econsole.log(a); \u002F\u002F 10\u003Cbr\u003Econsole.log(b); \u002F\u002F Object { z=999 }\u003Cbr\u003E","\u003Cp\u003EПараметры со значением по умолчанию\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНесмотря на то, что в JavaScript нельзя указать значение параметра по умолчанию, это поведение можно эмулировать:\u003Cbr\u003E\u003Cp\u003E function fnc(a, b)\u003Cbr\u003E {\u003Cbr\u003E a = typeof a !== 'undefined' ? a : 999;\u003Cbr\u003E b = typeof b !== 'undefined' ? b : \"Test\";\u003Cbr\u003E console.log(a, b);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003Efnc(); \u002F\u002F 999 Test\u003Cbr\u003Efnc(5); \u002F\u002F 5 Test\u003Cbr\u003Efnc(7, \"Yes\"); \u002F\u002F 7 Yes\u003Cbr\u003E","\u003Cp\u003EПередача переменного количества параметров\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript в функцию можно передать больше параметров, чем указано при её объявлении. Внутри функции к параметрам можно получить доступ с помощью свойства arguments:\u003Cbr\u003E\u003Cp\u003Efunction fnc(a, b)\u003Cbr\u003E{\u003Cbr\u003E console.log(a, b); \u002F\u002F A B\u003Cbr\u003E for (var i = 0; i \u003C arguments.length; i++)\u003Cbr\u003E {\u003Cbr\u003E console.log(arguments[i]); \u002F\u002F A B C D\u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003Efnc(\"A\", \"B\", \"C\", \"D\");\u003Cbr\u003E","\u003Cp\u003EРекурсия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПонятие рекурсии относится к базовым понятиям информатики.\u003Cbr\u003EНо если надо его напомнить – говорите. Рассмотрим и запишем.\u003Cbr\u003E\u003Cp\u003Efunction fact(x)\u003Cbr\u003E{\u003Cbr\u003E if (x == 0)\u003Cbr\u003E {\u003Cbr\u003E return 1;\u003Cbr\u003E }\u003Cbr\u003E return x*fact(x-1);\u003Cbr\u003E}\u003Cbr\u003Econsole.log(fact(5)); \u002F\u002F 120\u003Cbr\u003E","\u003Cp\u003EАнонимные функции и замыкания\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript поддерживает:\u003Cbr\u003Eанонимные функции – функций, которые объявляются в месте использования и не получают уникального идентификатора для доступа к ним.\u003Cbr\u003Eзамыкания – функции, в теле которых присутствуют (не в качестве параметров) ссылки на переменные, объявленные вне тела этой функции. Такие функции ссылаются на свободные переменные в своём контексте.\u003Cbr\u003E\u003Cp\u003EОчень полезно:\u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FClosures \u003Cbr\u003E","\u003Cp\u003EАнонимные функции и замыкания\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСоздание и использование анонимных функций и замыканий выглядит так:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: анонимные функции и замыкания\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u002F\u002F Просто функция, которая сработает по факту загрузки документа.\u003Cbr\u003E function doIt()\u003Cbr\u003E {\u003Cbr\u003E \u002F\u002F Анонимная функция\u003Cbr\u003E var sqr = function(x){return x*x};\u003Cbr\u003E document.getElementById('sample').innerHTML += sqr(2) + '\u003Cbr\u003E';\u003Cbr\u003E\t\u003Cbr\u003E \u002F\u002F Использование замыкания\u003Cbr\u003E var add5 = makeAdder(5);\u003Cbr\u003E var add10 = makeAdder(10);\u003Cbr\u003E document.getElementById('sample').innerHTML += add5(2) + '\u003Cbr\u003E';\u003Cbr\u003E document.getElementById('sample').innerHTML += add10(2) + '\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E \u002F\u002F Замыкание \u003Cbr\u003E function makeAdder(x)\u003Cbr\u003E {\u003Cbr\u003E return function(y)\u003Cbr\u003E {\u003Cbr\u003E return x + y;\u003Cbr\u003E };\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"doIt()\"\u003E\u003Cbr\u003E \u003Cdiv id=\"sample\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C!-- ещё один пример использования анонимной функции\u003Cbr\u003E (здесь -- в качестве обработчика события) --\u003E\u003Cbr\u003E \u003Ca href=\"#\" onclick=\"(function(div){div.style.backgroundColor='yellow';})(this)\"\u003ETest me\u003C\u002Fa\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\05_anonymous_and_closures.html\u003Cbr\u003E","\u003Cp\u003EПространства имён в JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Поддерживает ли JavaScript т.н. «пространства имён» (namespaces)?\u003Cbr\u003EA: Явным образом – нет. Но их можно эмулировать так:\u003Cbr\u003E\u003Cp\u003Evar yourNamespace = {\u003Cbr\u003E fnc1: function() {\u003Cbr\u003E },\u003Cbr\u003E fnc2: function() {\u003Cbr\u003E }\u003Cbr\u003E};\u003Cbr\u003E...\u003Cbr\u003EyourNamespace.fnc1();\u003Cbr\u003E\u003Cp\u003EПочитать подробнее:\u003Cbr\u003Ehttp:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Fmagazine\u002Fgg578608.aspx \u003Cbr\u003E","\u003Cp\u003EРАБОТА С МАССИВАМИ В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕсли немного расширить ранее озвученный набор фактов о массивах в JavaScript, получим, что они:\u003Cbr\u003EБывают только динамическими (причём меняться может и мерность массива, но не так легко, как в PHP).\u003Cbr\u003EМогут содержать одновременно данные любых типов.\u003Cbr\u003EВ качестве ключей (индексов) могут использовать как числа, так и строки.\u003Cbr\u003EМогут быть использованы для хранения таких классических структур как очереди, стеки, деревья и т.д.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНебольшой пример, поясняющий «многомерность массивов» в JavaScript:\u003Cbr\u003E\u003Cp\u003Evar arr = new Array();\u003Cbr\u003E\u002F\u002Farr[5][7] = 'Test'; \u002F\u002F Ошибка!\u003Cbr\u003Earr[5] = new Array();\u003Cbr\u003Earr[5][7] = 'Test'; \u002F\u002F Так – работает.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: В чём разница объявления массива разными способами?\u003Cbr\u003EA: Рассмотрим на примере.\u003Cbr\u003E\u003Cp\u003Evar arr1 = new Array(5); \u002F\u002F Массив с пятью undefined элементами\u003Cbr\u003Evar arr2 = Array(3); \u002F\u002F Массив с тремя undefined элементами\u003Cbr\u003Evar arr3 = []; \u002F\u002F Пустой массив\u003Cbr\u003Evar arr4 = Array(); \u002F\u002F Пустой массив\u003Cbr\u003Evar arr5 = new Array(); \u002F\u002F Пустой массив\u003Cbr\u003Evar arr6 = new Array('A', 'B', 'C'); \u002F\u002F Массив с элементами 'A', 'B', 'C'\u003Cbr\u003Evar arr7 = Array('A', 'B', 'C'); \u002F\u002F Массив с элементами 'A', 'B', 'C'\u003Cbr\u003E\u003Cp\u003EСлучаи 1, 5, 6 являются классическими и наиболее рекомендуемыми.\u003Cbr\u003E","\u003Cp\u003EФункции по работе с массивами\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСейчас мы рассмотрим основные функции по работе с массивами в JavaScript.\u003Cbr\u003EПолный их перечень можно увидеть, например, здесь:\u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FArray \u003Cbr\u003EВажно! В JavaScript рекомендуется использовать Array только для «классических строгоиндексированных» массивов, для ассоциативных лучше использовать Object.\u003Cbr\u003E","\u003Cp\u003EОпределение количества элементов в массиве\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля определения размера массива используется свойство length, которое «реагирует» не на реальное количество элементов, а возвращает «последний индекс + 1».\u003Cbr\u003E\u003Cp\u003Evar arr = new Array(5);\u003Cbr\u003Earr[999] = 'Test';\u003Cbr\u003Econsole.log(arr.length); \u002F\u002F 1000\u003Cbr\u003E","\u003Cp\u003EОпределение, является ли переменная массивом\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля определения того, является ли переменная массивом, можно использовать Array.isArray():\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Все эти примеры вернут true\u003Cbr\u003EArray.isArray([]);\u003Cbr\u003EArray.isArray([1]);\u003Cbr\u003EArray.isArray( new Array() );\u003Cbr\u003EArray.isArray( Array.prototype );\u003Cbr\u003E\u002F\u002F Все эти пример вернут false\u003Cbr\u003EArray.isArray();\u003Cbr\u003EArray.isArray({});\u003Cbr\u003EArray.isArray(null);\u003Cbr\u003EArray.isArray(undefined);\u003Cbr\u003EArray.isArray(17);\u003Cbr\u003EArray.isArray(\"Array\");\u003Cbr\u003EArray.isArray(true);\u003Cbr\u003EArray.isArray(false);\u003Cbr\u003EArray.isArray({ __proto__ : Array.prototype });\u003Cbr\u003E","\u003Cp\u003EПоиск элемента в массиве\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля поиска элемента по ключу используется ранее рассмотренное решение со сравнением элемента с undefined. Для поиска элемента по значению используется Array.indexOf(searchElement[, fromIndex]).\u003Cbr\u003E\u003Cp\u003Evar arr = [2, 5, 9, 5];\u003Cbr\u003Eif (arr[999] === undefined)\u003Cbr\u003E{\u003Cbr\u003E console.log('Element 999 is not set.')\u003Cbr\u003E}\u003Cbr\u003Econsole.log(index = arr.indexOf(5)); \u002F\u002F 1\u003Cbr\u003Econsole.log(index = arr.indexOf(555)); \u002F\u002F -1\u003Cbr\u003E\u003Cp\u003EТакже см. Array.lastIndexOf(searchElement[, fromIndex])\u003Cbr\u003E","\u003Cp\u003EПоиск элемента в массиве\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕщё одним способом проверки существования или некоего свойства элементов массива является использование Array.every() и Array.some(), проверяющие с помощью вызова функции тот факт, что все или хотя бы один элемент удовлетворяют некоторому критерию.\t\u003Cbr\u003E\u003Cp\u003Efunction isPositive(element, index, array)\u003Cbr\u003E{\u003Cbr\u003E return (element \u003E 0);\u003Cbr\u003E}\u003Cbr\u003Evar arr = [2, -5, 8, 1, 4];\u003Cbr\u003Econsole.log(arr.some(isPositive)); \u002F\u002F true (числа \u003E 0 есть)\u003Cbr\u003Econsole.log(arr.every(isPositive)); \u002F\u002F false (не все числа \u003E 0)\u003Cbr\u003E","\u003Cp\u003EОбработка всех элементов массива\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля обработки всех элементов массива можно использовать цикл for, а также методы Array.filter() и Array.forEach():\u003Cbr\u003E\u003Cp\u003Efunction saveOnlyPositive(element)\u003Cbr\u003E{\u003Cbr\u003E return element \u003E 0;\u003Cbr\u003E}\u003Cbr\u003Evar arr = [12, -5, -8, -130, 44];\u003Cbr\u003Earr = arr.filter(saveOnlyPositive); \u002F\u002F [12, 44]\u003Cbr\u003E\u003Cbr\u003Efunction sqrArrayElements(element, index, array)\u003Cbr\u003E{\u003Cbr\u003E array[index] = element*element;\u003Cbr\u003E}\u003Cbr\u003Earr.forEach(sqrArrayElements);\u003Cbr\u003Econsole.log(arr); \u002F\u002F [144, 1936]\u003Cbr\u003E","\u003Cp\u003EОбработка всех элементов массива\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИ ещё один способ – использование Array.map() позволяет создать новый массив на основе существующего:\u003Cbr\u003E\u003Cp\u003Evar arr = Array('A', 'B', 'C');\u003Cbr\u003Evar codes = arr.map(function(x) { return x.charCodeAt(0); })\u003Cbr\u003Econsole.log(arr); \u002F\u002F [\"A\", \"B\", \"C\"]\u003Cbr\u003Econsole.log(codes); \u002F\u002F [65, 66, 67]\u003Cbr\u003E","\u003Cp\u003EОбъединение массивов или значений в массивы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИспользование Array.concat() позволяет объединить несколько массивов или несколько отдельных значений в массив:\u003Cbr\u003E\u003Cp\u003Evar num1 = [1, 2, 3];\u003Cbr\u003Evar num2 = [4, 5, 6];\u003Cbr\u003Evar num3 = [7, 8, 9];\u003Cbr\u003Evar nums = num1.concat(num2, num3);\u003Cbr\u003Enums = nums.concat(999, 1000, 1001);\u003Cbr\u003Econsole.log(nums);\u003Cbr\u003E\u002F\u002F [1, 2, 3, 4, 5, 6, 7, 8, 9, 999, 1000, 1001]\u003Cbr\u003E","\u003Cp\u003EОбъединение элементов массива в строку\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИспользование Array.join() позволяет объединить элементы массива в строку (используя разделитель, если это необходимо):\u003Cbr\u003E\u003Cp\u003Evar arr = new Array(new Array('Иванов', 'Иван', 'Иванович'), new Array('Петров', 'Пётр', 'Петрович'));\u003Cbr\u003Evar str1 = arr.join(' ');\u003Cbr\u003Evar str2 = arr[0].join(' ');\u003Cbr\u003Evar str3 = arr[1].join();\u003Cbr\u003E\u002F\u002F Иванов,Иван,Иванович Петров,Пётр,Петрович\u003Cbr\u003Econsole.log(str1);\u003Cbr\u003Econsole.log(str2); \u002F\u002F Иванов Иван Иванович\u003Cbr\u003Econsole.log(str3); \u002F\u002F Петров,Пётр,Петрович\u003Cbr\u003E","\u003Cp\u003EСортировка массива\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля сортировки массива применяется Array.sort() и (если необходимо) Array.reverse():\u003Cbr\u003E\u003Cp\u003Evar arr = new Array('Один', 'Два', 'Три');\u003Cbr\u003Efunction compareByLengthReverse(a, b)\u003Cbr\u003E{\u003Cbr\u003E if (a.length \u003E b.length)\u003Cbr\u003E {\u003Cbr\u003E return -1;\u003Cbr\u003E }\u003Cbr\u003E else\u003Cbr\u003E {\u003Cbr\u003E if (a.length \u003C b.length)\u003Cbr\u003E {\u003Cbr\u003E return 1;\u003Cbr\u003E }\u003Cbr\u003E else\u003Cbr\u003E {\u003Cbr\u003E return 0;\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003Earr.sort();\u003Cbr\u003Econsole.log(arr); \u002F\u002F [\"Два\", \"Один\", \"Три\"]\u003Cbr\u003Earr.sort(compareByLengthReverse);\u003Cbr\u003Econsole.log(arr); \u002F\u002F [\"Один\", \"Два\", \"Три\"]\u003Cbr\u003Earr.reverse();\u003Cbr\u003Econsole.log(arr); \u002F\u002F [\"Три\", \"Два\", \"Один\"]\u003Cbr\u003E","\u003Cp\u003EРабота с массивом как со стеком\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript есть готовые решения для работы с массивом как со стеком: Array.push() добавляет элемент в конец массива и возвращает новую длину массива, Array.pop() удаляет элемент из конца массива и возвращает значение этого элемента.\u003Cbr\u003E\u003Cp\u003Evar arr = Array(10, 20, 30);\u003Cbr\u003Econsole.log(arr.push(999)); \u002F\u002F 4\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, 30, 999]\u003Cbr\u003Econsole.log(arr.pop()); \u002F\u002F 999\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, 30]\u003Cbr\u003E","\u003Cp\u003EРабота с массивом как со стеком\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВторым способом работы с массивом как со стеком является использование Array.unshift() и Array.shift(), которые работают аналогично Array.push() и Array.pop(), но добавляют\u002Fудаляют элемент в начале массива:\u003Cbr\u003E\u003Cp\u003Evar arr = Array(10, 20, 30);\u003Cbr\u003Econsole.log(arr.unshift(999)); \u002F\u002F 4\u003Cbr\u003Econsole.log(arr); \u002F\u002F [999, 10, 20, 30]\u003Cbr\u003Econsole.log(arr.shift()); \u002F\u002F 999\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, 30]\u003Cbr\u003E","\u003Cp\u003EРабота с массивом как с очередью\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСоответственно, использование Array.unshift()\u002FArray.pop() и Array.push()\u002FArray. shift(), позволяет работать с массивом как с очередью:\u003Cbr\u003E\u003Cp\u003Evar arr = Array(10, 20, 30);\u003Cbr\u003Econsole.log(arr.unshift(999)); \u002F\u002F 4\u003Cbr\u003Econsole.log(arr); \u002F\u002F [999, 10, 20, 30]\u003Cbr\u003Econsole.log(arr.pop()); \u002F\u002F 30\u003Cbr\u003Econsole.log(arr); \u002F\u002F [999, 10, 20]\u003Cbr\u003Econsole.log(arr.push(555)); \u002F\u002F 4\u003Cbr\u003Econsole.log(arr); \u002F\u002F [999, 10, 20, 555]\u003Cbr\u003Econsole.log(arr.shift()); \u002F\u002F 999\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, 555]\u003Cbr\u003E","\u003Cp\u003EИзвлечение и удаление части массива\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля извлечения части массива используется Array.slice(), а для модификации массива (в т.ч. удаления части элементов) – Array.splice().\u003Cbr\u003E\u003Cp\u003Evar arr = Array(10, 20, 30, 40, 50);\u003Cbr\u003Earr_new = arr.slice(2, 4);\u003Cbr\u003Econsole.log(arr_new); \u002F\u002F [30, 40]\u003Cbr\u003Earr.splice(2, 0, 'Test'); \u002F\u002F Добавить после 2-го элемента.\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, \"Test\", 30, 40, 50]\u003Cbr\u003Earr.splice(2, 1); \u002F\u002F Удалить второй элемент.\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, 30, 40, 50]\u003Cbr\u003Earr.splice(3, 1, 'ABC'); \u002F\u002F Заменить 3-й элемент строкой.\u003Cbr\u003Econsole.log(arr); \u002F\u002F [10, 20, 30, \"ABC\", 50]\u003Cbr\u003E","\u003Cp\u003EЗадача для закрепления материала\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля лучшего понимания того, как работают массивы, рекомендуется выполнить следующее задание.\u003Cbr\u003EДано: многомерный массив произвольной мерности и произвольного размера (в т.ч. в любом измерении).\u003Cbr\u003EСделать: удалить из массива все строки, а каждое отрицательное число возвести в квадрат.\u003Cbr\u003E","\u003Cp\u003EРАБОТА СО СТРОКАМИ В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕсли немного расширить ранее озвученный набор фактов о строках в JavaScript, получим, что:\u003Cbr\u003Eна длину строки нет никаких искусственных ограничений (только объём памяти, доступный скрипту);\u003Cbr\u003EJavaScript умеет рассматривать строки как массивы символов.\u003Cbr\u003E","\u003Cp\u003EФункции по работе со строками\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСейчас мы рассмотрим основные функции по работе со строками в JavaScript.\u003Cbr\u003EПолный их перечень можно увидеть здесь:\u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FString \u003Cbr\u003EВ JavaScript большое количество задач решается путём выполнения операций над строками, потому рассмотрим это подробно.\u003Cbr\u003E","\u003Cp\u003EМультибайтовая кодировка строк, определение длины\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EJavaScript считает, что строки представлены в кодировке UTF-16, и считает длину строки в символах, а не в байтах (за определение длины строки отвечает свойство length):\u003Cbr\u003E\u003Cp\u003Evar str = new String(\"한국어\");\u003Cbr\u003Econsole.log(str.length); \u002F\u002F 3\u003Cbr\u003E","\u003Cp\u003EЭкранирование символов\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ некоторых случаях некоторые символы строк должны быть экранированы, чтобы строка могла быть использована в нужном контексте.\u003Cbr\u003EВ JavaScript нет готового аналога PHP’шной функции htmlspecialchars(), но есть альтернативные решения:\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Вариант 1 – написание своей функции\u003Cbr\u003Efunction escapeHtml(text) {\u003Cbr\u003E return text\u003Cbr\u003E .replace(\u002F&\u002Fg, \"&amp;\")\u003Cbr\u003E .replace(\u002F\u003C\u002Fg, \"&lt;\")\u003Cbr\u003E .replace(\u002F\u003E\u002Fg, \"&gt;\")\u003Cbr\u003E .replace(\u002F\"\u002Fg, \"&quot;\")\u003Cbr\u003E .replace(\u002F'\u002Fg, \"&#039;\");\u003Cbr\u003E}\u003Cbr\u003Evar text_string = '\u003Chtmltag\u002F\u003E';\u003Cbr\u003E\u002F\u002F Вариант 2 – через «трюк» с HTML\u003Cbr\u003Evar div = document.createElement('div');\u003Cbr\u003Evar text = document.createTextNode(text_string);\u003Cbr\u003Ediv.appendChild(text);\u003Cbr\u003Econsole.log(div.innerHTML); \u002F\u002F &lt;htmltag\u002F&gt;\u003Cbr\u003Econsole.log(escapeHtml(text_string)); \u002F\u002F &lt;htmltag\u002F&gt;\u003Cbr\u003E","\u003Cp\u003EРабота с отдельными символами строки\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля получения символа строки или его кодового представления можно использовать String.charAt() и \u003Cbr\u003EString.charCodeAt(), а также обращение к строке как к массиву символов:\u003Cbr\u003E\u003Cp\u003Evar str = 'Тест';\u003Cbr\u003Econsole.log(str.charAt(1)); \u002F\u002F е\u003Cbr\u003Econsole.log(str.charCodeAt(1)); \u002F\u002F 1077\u003Cbr\u003Econsole.log(str[1]); \u002F\u002F е\u003Cbr\u003Estr[1] = '-'; \u002F\u002F Так -- не работает!\u003Cbr\u003Econsole.log(str); \u002F\u002F Тест\u003Cbr\u003E","\u003Cp\u003EПоиск, замена, разбиение и склеивание строк\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля поиска вхождения подстроки в строку можно использовать String.indexOf() и String.lastIndexOf():\u003Cbr\u003E\u003Cp\u003Evar str = 'Тестовая строка';\u003Cbr\u003Econsole.log(str.indexOf('т')); \u002F\u002F 3\u003Cbr\u003Econsole.log(str.lastIndexOf('т')); \u002F\u002F 10\u003Cbr\u003Econsole.log(str.indexOf('abc')); \u002F\u002F -1\u003Cbr\u003Econsole.log(str.lastIndexOf('abc')); \u002F\u002F -1\u003Cbr\u003E","\u003Cp\u003EПоиск, замена, разбиение и склеивание строк\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля «вырезания» части строки или разбиения строки в массив подстрок используются: String.slice(), String.substr(), String.substring(), String.split().\u003Cbr\u003E\u003Cp\u003Evar str = 'Тестовая строка';\u003Cbr\u003Econsole.log(str.slice(3, 7)); \u002F\u002F това\u003Cbr\u003Econsole.log(str.substr(3, 2)); \u002F\u002F то\u003Cbr\u003Econsole.log(str.substring(3, 7)); \u002F\u002F това\u003Cbr\u003Econsole.log(str.split(' '));\u003Cbr\u003E\u002F\u002F [\"Тестовая\", \"строка\"]\u003Cbr\u003Econsole.log(str.split(''));\u003Cbr\u003E\u002F\u002F [\"Т\", \"е\", \"с\", \"т\", \"о\", \"в\", \"а\", \"я\",\u003Cbr\u003E\u002F\u002F \" \", \"с\", \"т\", \"р\", \"о\", \"к\", \"а\"]\u003Cbr\u003E","\u003Cp\u003EПоиск, замена, разбиение и склеивание строк\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля замены подстроки в строке используется String.replace(), для «склеивания строк» – String.concat(), для очистки строки от концевых пробелов – String.trim().\u003Cbr\u003E\u003Cp\u003Evar str = 'Тестовая строка';\u003Cbr\u003Econsole.log(str.replace('ст', '***'));\u003Cbr\u003Econsole.log(str = str.concat('. И ещё одна. '));\u003Cbr\u003Econsole.log(str.trim());\u003Cbr\u003E\u003Cp\u003EТе***овая строка\u003Cbr\u003EТестовая строка. И ещё одна.~~~~~ \u003Cbr\u003EТестовая строка. И ещё одна.\u003Cbr\u003E\u003Cp\u003EТильды символизируют пробелы, которых на экране не видно ☺.\u003Cbr\u003E","\u003Cp\u003EУправление регистром\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля управления регистром строки используются String.toLowerCase() и String.toUpperCase():\u003Cbr\u003E\u003Cp\u003Evar str = 'Тестовая строка';\u003Cbr\u003Econsole.log(str.toLowerCase());\u003Cbr\u003E\u002F\u002F тестовая строка\u003Cbr\u003Econsole.log(str.toUpperCase());\u003Cbr\u003E\u002F\u002F ТЕСТОВАЯ СТРОКА\u003Cbr\u003E","\u003Cp\u003EПреобразование строки в веб-ссылку\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля автоматизации получения из строки полноценной гиперссылки и «ссылки-закладки» используются String.link() и String.anchor().\u003Cbr\u003E\u003Cp\u003Evar humanText = \"Tut.by\";\u003Cbr\u003Evar URL = \"http:\u002F\u002Ftut.by\u002F\";\u003Cbr\u003Econsole.log(humanText.link(URL));\u003Cbr\u003Evar contentsStart = \"Table of Contents\";\u003Cbr\u003Econsole.log(contentsStart.anchor(\"contents_anchor\"));\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Ftut.by\u002F\"\u003ETut.by\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca name=\"contents_anchor\"\u003ETable of Contents\u003C\u002Fa\u003E\u003Cbr\u003E","\u003Cp\u003EРабота с регулярными выражениями\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EО регулярных выражениях будет чуть позже, но пока отметим, что для применения их к строке используются String.match(), String.search() и String.replace().\u003Cbr\u003E\u003Cp\u003Evar str = \"Индекс: 220001\";\u003Cbr\u003Evar regex1 = \u002F\\d{6}\u002F;\u003Cbr\u003Evar regex2 = \u002F\\d{10}\u002F;\u003Cbr\u003Econsole.log(str.match(regex1)); \u002F\u002F см. ниже\u003Cbr\u003Econsole.log(str.match(regex2)); \u002F\u002F null\u003Cbr\u003Econsole.log(str.search(regex1)); \u002F\u002F 8\u003Cbr\u003Econsole.log(str.search(regex2)); \u002F\u002F -1\u003Cbr\u003Econsole.log(str.replace(regex1, '------')); \u002F\u002F Индекс: ------\u003Cbr\u003Econsole.log(str.replace(regex2, '------')); \u002F\u002F Индекс: 220001\u003Cbr\u003E\u003Cp\u003E[\"220001\"]\u003Cbr\u003E0 \"220001\"\u003Cbr\u003Eindex 8\u003Cbr\u003EInput \"Индекс: 220001\"\u003Cbr\u003Enull\u003Cbr\u003E8\u003Cbr\u003E-1\u003Cbr\u003EИндекс: ------\u003Cbr\u003EИндекс: 220001\u003Cbr\u003E","\u003Cp\u003EХэш-функции\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Есть ли в JavaScript поддержка хэш-функций?\u003Cbr\u003EA: Встроенной нет. Но есть вот такое: https:\u002F\u002Fcode.google.com\u002Fp\u002Fcrypto-js\u002F \u003Cbr\u003E","\u003Cp\u003EЗадания для закрепления материала \u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДан текст (о регистре символов в котором мы ничего не знаем).\u003Cbr\u003EПривести текст к виду: “Каждая Первая Буква Слова В Верхнем Регистре, Остальные В Нижнем”.\u003Cbr\u003EПривести текст к виду: “Только первая буква – в верхнем регистре, остальные – в нижнем”.\u003Cbr\u003EПривести текст к виду: “кАЖДАЯ пЕРВАЯ бУКВА сЛОВА в нИЖНЕМ рЕГИСТРЕ, оСТАЛЬНЫЕ в вЕРХНЕМ”.\u003Cbr\u003E","\u003Cp\u003EЗадания для закрепления материала \u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОпределить, сколько раз в строке встречается каждый из присутствующих там символов (например, в слове test: t = 2, e = 1, s = 1).\u003Cbr\u003EОпределить длину самого короткого и самого длинного слова в строке, вывести все самые короткие и самые длинные слова.\u003Cbr\u003EОпределить среднюю длину слова в строке.\u003Cbr\u003E","\u003Cp\u003EФУНКЦИИ JAVASCRIPT ПО РАБОТЕ С ДАТОЙ И ВРЕМЕНЕМ\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля работы с датой и временем в JavaScript используется объект Date.\u003Cbr\u003EКак и PHP, JavaScript работает с датой-временем в формате UNIXTIME, но отсчитывает с 1-го января 1970-го года не секунды, а милисекунды.\u003Cbr\u003EПолную информацию по работе с датой и временем см. здесь:\u003Cbr\u003Ehttps:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FDate \u003Cbr\u003E","\u003Cp\u003EПолучение текущих даты и времени\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля получения информации о текущей дате и текущем времени используется статический метод Date.now().\u003Cbr\u003E\u003Cp\u003Econsole.log(Date.now()); \u002F\u002F 1393925189676\u003Cbr\u003E","\u003Cp\u003EПолучение текущих даты и времени\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля получения «человекочитаемой» информации о текущей дате и текущем времени огромное количество методов объекта Date, из которых мы на примере рассмотрим основные:\u003Cbr\u003E\u003Cp\u003Edt = new Date();\u003Cbr\u003Econsole.log(dt.getDate()); \u002F\u002F 4 (4-е число)\u003Cbr\u003Econsole.log(dt.getDay()); \u002F\u002F 2 (вторник)\u003Cbr\u003Econsole.log(dt.getFullYear()); \u002F\u002F 2014\u003Cbr\u003Econsole.log(dt.getHours()); \u002F\u002F 12\u003Cbr\u003Econsole.log(dt.getMilliseconds()); \u002F\u002F 233\u003Cbr\u003Econsole.log(dt.getMinutes()); \u002F\u002F 32\u003Cbr\u003Econsole.log(dt.getMonth()); \u002F\u002F 2 (март, нумерация с 0)\u003Cbr\u003Econsole.log(dt.getSeconds()); \u002F\u002F 29\u003Cbr\u003Econsole.log(dt.getTime()); \u002F\u002F 1393925549233 (unixtime)\u003Cbr\u003Econsole.log(dt.getTimezoneOffset()); \u002F\u002F -180 (-3 часа в минутах)\u003Cbr\u003E","\u003Cp\u003EСоздание определённого значения даты-времени\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля создания определённого значения даты-времени используется огромное количество сеттеров, из которых мы также рассмотрим основные:\u003Cbr\u003E\u003Cp\u003Edt = new Date();\u003Cbr\u003Edt.setDate(31);\u003Cbr\u003Edt.setFullYear(2015);\u003Cbr\u003Edt.setHours(23);\u003Cbr\u003Edt.setMilliseconds(0);\u003Cbr\u003Edt.setMinutes(30);\u003Cbr\u003Edt.setMonth(11);\u003Cbr\u003Edt.setSeconds(15);\u003Cbr\u003Econsole.log(dt);\u003Cbr\u003E\u002F\u002F Date {Thu Dec 31 2015 23:30:15 GMT+0300 (Kaliningrad Standard Time)}\u003Cbr\u003E","\u003Cp\u003EПолучение даты-времени в разных форматах\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИ, наконец, рассмотрим на примерах получение даты-времени в нескольких наиболее распространённых форматах:\u003Cbr\u003E\u003Cp\u003Econsole.log(dt);\u003Cbr\u003Econsole.log(dt.toDateString());\u003Cbr\u003Econsole.log(dt.toISOString());\u003Cbr\u003Econsole.log(dt.toJSON());\u003Cbr\u003Econsole.log(dt.toLocaleDateString());\u003Cbr\u003Econsole.log(dt.toLocaleString());\u003Cbr\u003Econsole.log(dt.toLocaleTimeString());\u003Cbr\u003Econsole.log(dt.toString());\u003Cbr\u003Econsole.log(dt.toTimeString());\u003Cbr\u003Econsole.log(dt.toUTCString());\u003Cbr\u003E\u003Cp\u003EDate {Thu Dec 31 2015 23:30:15 GMT+0300 (Kaliningrad Standard Time)}\u003Cbr\u003EThu Dec 31 2015\u003Cbr\u003E2015-12-31T20:30:15.000Z\u003Cbr\u003E2015-12-31T20:30:15.000Z\u003Cbr\u003EThursday, December 31, 2015\u003Cbr\u003EThursday, December 31, 2015 23:30:15\u003Cbr\u003E23:30:15\u003Cbr\u003EThu Dec 31 2015 23:30:15 GMT+0300 (Kaliningrad Standard Time)\u003Cbr\u003E23:30:15 GMT+0300 (Kaliningrad Standard Time)\u003Cbr\u003EThu, 31 Dec 2015 20:30:15 GMT\u003Cbr\u003E","\u003Cp\u003EДата и время: Q&A\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Можно ли сразу «создать нужную дату»?\u003Cbr\u003EA: Да.\u003Cbr\u003E\u003Cp\u003Enew Date(year, month [, day, hour, minute, second, millisecond])\u003Cbr\u003E\u003Cp\u003EQ: Есть ли в JavaScript аналог функции PHP date()?\u003Cbr\u003EA: Нет.\u003Cbr\u003E\u003Cp\u003EQ: И checkdate() нет?\u003Cbr\u003EA: Нет.\u003Cbr\u003E\u003Cp\u003EQ: И sleep() \u002F usleep() нет?\u003Cbr\u003EA: Нет.\u003Cbr\u003E","\u003Cp\u003EЗадача для закрепления материала\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНаписать скрипт, который строит календарь за указанный год с указанием дней недели.\u003Cbr\u003E[Упрощённый вариант] Календарь может представлять собой просто «ленту дат».\u003Cbr\u003E[Усложнённый вариант] Календарь должен представлять собой таблицу 3x4, где каждая ячейка представляет собой один месяц – т.е. «обычный календарь», который каждый из вас видел сотни раз в жизни.\u003Cbr\u003E","\u003Cp\u003EОБРАБОТКА СОБЫТИЙ В JAVASCRIPT, РАБОТА С DOM\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщая информация\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСобытие в JavaScript – это информация (как правило, от браузера) о том, что что-то произошло.\u003Cbr\u003EВ общем случае можно выделить такие виды событий:\u003Cbr\u003EDOM-события, которые инициируются элементами DOM (например, click, mouseover и т.д.); см. о событиях в HTML-элементах в предыдущем разделе.\u003Cbr\u003EСобытия окна (например, resize при изменении размера окна браузера).\u003Cbr\u003EПрочие события (например load, readystatechange и т.д.)\u003Cbr\u003E\u003Cp\u003EОтличное, очень полное и простое пояснение работы событий:\u003Cbr\u003Ehttp:\u002F\u002Fjavascript.ru\u002Ftutorial\u002Fevents\u002Fintro \u003Cbr\u003E","\u003Cp\u003EОбработчики событий\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЧтобы иметь возможность реагировать на возникновение события, нужно назначить для него обработчик. Это можно сделать несколькими способами:\u003Cbr\u003EЧерез атрибут HTML-тега.\u003Cbr\u003EЧерез свойство объекта.\u003Cbr\u003EЧерез специальные решения (в общем случае делящиеся на W3C-совместимые и Microsoft-совместимые).\u003Cbr\u003E","\u003Cp\u003EОбработчики событий: установка через атрибут HTML-тега\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСамый простой способ установки обработчика событий – через атрибут HTML-тега. Можно использовать анонимную функцию или указывать существующую функцию (это – лучше и удобнее).\u003Cbr\u003E\u003Cp\u003E\u003Cspan onclick=\"alertOnClick()\"\u003EКликни здесь (будет alert).\u003C\u002Fspan\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cspan onclick=\"(function(elem){elem.style.color='red';})(this)\"\u003EКликни здесь (ссылка поменяет цвет).\u003C\u002Fspan\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cspan onclick=\"(function(){alert('Сработал обработчик клика в виде анонимной функции.')}).call(this)\"\u003EКликни здесь (будет ещё один alert).\u003C\u002Fspan\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\06_events_01.html\u003Cbr\u003E","\u003Cp\u003EОбработчики событий: установка через свойство объекта\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЧуть более хитрый способ навесить обработчик – модифицировать соответствующее свойство элементов. Если надо навесить обработчик на много элементов, удобно использовать замыкания.\u003Cbr\u003E\u003Cp\u003E \u003Cscript\u003E\u003Cbr\u003E function addHandlers()\u003Cbr\u003E {\u003Cbr\u003E spanlist = document.getElementsByTagName(\"span\");\u003Cbr\u003E for (var i=0; i\u003Cspanlist.length; i++)\u003Cbr\u003E {\u003Cbr\u003E spanlist[i].onclick = microLog;\u003Cbr\u003E spanlist[i].ondblclick = function()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('message').innerHTML += 'Вы выполнии двойной клик по слову\u003Cbr\u003E';\u003Cbr\u003E \u002F\u002Fthis.style.color='red'; Тут это НЕ сработает!\u003Cbr\u003E }\u003Cbr\u003E spanlist[i].onmouseover = (function (elem) {\u003Cbr\u003E\t\t\treturn function() {\u003Cbr\u003E\t\t\tthis.style.color='red';\u003Cbr\u003E\t\t\t\u002F\u002F Или: elem.style.color='red';\u003Cbr\u003E\t\t\t};\u003Cbr\u003E\t\t\t})(spanlist[i]);\u003Cbr\u003E\t\t\t\t\t\u003Cbr\u003E spanlist[i].onmouseout = (function (elem) {\u003Cbr\u003E\t\t\treturn function() {\u003Cbr\u003E\t\t\tthis.style.color='black';\u003Cbr\u003E\t\t\t\u002F\u002F Или: elem.style.color='red';\u003Cbr\u003E\t\t\t};\u003Cbr\u003E\t\t\t})(spanlist[i]);\t\t\t\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function microLog()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('message').innerHTML += 'Вы кликнули по слову\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\07_events_02.html\u003Cbr\u003E","\u003Cp\u003EОбработчики событий: специальные решения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСамый правильный способ – использование специальных решений. Сначала – Microsoft-style:\u003Cbr\u003E\u003Cp\u003Eelem = document.getElementById('some_id');\u003Cbr\u003Ehandler = function() {\u003Cbr\u003E alert('OK');\u003Cbr\u003E};\u003Cbr\u003Eelem.attachEvent(\"onclick\", handler) \u002F\u002F Навесить обработчик.\u003Cbr\u003Eelem.detachEvent(\"onclick\", handler) \u002F\u002F Снять обработчик.\u003Cbr\u003E","\u003Cp\u003EОбработчики событий: специальные решения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EТеперь – W3C-style:\u003Cbr\u003E\u003Cp\u003Eelement.addEventListener(имя_события, обработчик, стадия);\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003Eelement.removeEventListener(имя_события, обработчик, стадия);\u003Cbr\u003E\u003Cp\u003EСтадия (фаза) перехвата = true, стадия (фаза) всплывания = false. Об этом – совсем скоро. Обычно ставится false.\u003Cbr\u003E","\u003Cp\u003EОбработчики событий: специальные решения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПример W3C-style:\u003Cbr\u003E\u003Cp\u003Efunction addHandlers()\u003Cbr\u003E {\u003Cbr\u003E var spanlist = document.getElementsByTagName(\"span\");\u003Cbr\u003E for (var i=0; i\u003Cspanlist.length; i++)\u003Cbr\u003E {\u003Cbr\u003E spanlist[i].addEventListener(\"click\", microLog, false);\u003Cbr\u003E\t\u003Cbr\u003E \u002F\u002F Здесь заодно вспомним о замыканиях.\u003Cbr\u003E \u002F\u002F Можно получить функцию отдельно...\u003Cbr\u003E var handler_red = makeRed(spanlist[i]);\u003Cbr\u003E spanlist[i].addEventListener(\"mouseover\", handler_red, false);\u003Cbr\u003E\t\u003Cbr\u003E \u002F\u002F ... или сразу при указании обработчика.\u003Cbr\u003E spanlist[i].addEventListener(\"mouseout\", makeBlack(spanlist[i]), false);\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E function makeRed(elem)\u003Cbr\u003E {\u003Cbr\u003E return function()\u003Cbr\u003E {\u003Cbr\u003E this.style.color='red';\u003Cbr\u003E };\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function makeBlack(elem)\u003Cbr\u003E {\u003Cbr\u003E return function()\u003Cbr\u003E {\u003Cbr\u003E elem.style.color='black';\u003Cbr\u003E };\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function microLog()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('message').innerHTML += 'Вы кликнули по слову\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\08_events_03.html\u003Cbr\u003E","\u003Cp\u003EПорядок выполнения событий, стадии перехвата и всплытия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ случае, если событие срабатывает на вложенном элементе, оно сработает и на его родителях.\u003Cbr\u003E\u003Cp\u003E\u003Cdiv id=\"outer\"\u003E\u003Cbr\u003E\t\u003Cdiv id=\"middle\"\u003E\u003Cbr\u003E\t\t\u003Cdiv id=\"inner\"\u003E\u003Cbr\u003E\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003EКлик здесь…\u003Cbr\u003E\u003Cp\u003E… распространится сюда…\u003Cbr\u003E\u003Cp\u003E… и сюда.\u003Cbr\u003E","\u003Cp\u003EПорядок выполнения событий, стадии перехвата и всплытия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕсли абстрагироваться от кроссбраузерной совместимости, то в общем случае событие «распространяется» в двух направлениях: сначала от самого внешнего элемента к внутреннему (стадия перехвата), а потом обратно (стадия всплытия).\u003Cbr\u003E\u003Cp\u003EПоследовательность срабатывания обработчиков будет такой:\u003Cbr\u003E1) outer-catch\u003Cbr\u003E2) middle-catch\u003Cbr\u003E3) inner-bubble\u003Cbr\u003E4) inner-catch\u003Cbr\u003E5) middle-bubble\u003Cbr\u003E6) outer-bubble\u003Cbr\u003E","\u003Cp\u003EПорядок выполнения событий, стадии перехвата и всплытия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВот код, который демонстрирует эту логику:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: устновка обработчиков событий\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function addHandlers()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById(\"inner\").addEventListener(\"click\", innerClickedBubble, false);\u003Cbr\u003E\tdocument.getElementById(\"middle\").addEventListener(\"click\", middleClickedBubble, false);\u003Cbr\u003E\tdocument.getElementById(\"outer\").addEventListener(\"click\", outerClickedBubble, false);\u003Cbr\u003E\t\u003Cbr\u003E\tdocument.getElementById(\"inner\").addEventListener(\"click\", innerClickedCatch, true);\u003Cbr\u003E\tdocument.getElementById(\"middle\").addEventListener(\"click\", middleClickedCatch, true);\u003Cbr\u003E\tdocument.getElementById(\"outer\").addEventListener(\"click\", outerClickedCatch, true);\u003Cbr\u003E }\u003Cbr\u003E function innerClickedBubble()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'inner-bubble\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function middleClickedBubble()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'middle-bubble\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function outerClickedBubble()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'outer-bubble\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function innerClickedCatch()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'inner-catch\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function middleClickedCatch()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'middle-catch\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function outerClickedCatch()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'outer-catch\u003Cbr\u003E';\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E #outer {\u003Cbr\u003E\twidth: 100px;\u003Cbr\u003E\theight: 100px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E\t#middle {\u003Cbr\u003E\twidth: 75px;\u003Cbr\u003E\theight: 75px;\u003Cbr\u003E\tmargin-left: 12px;\u003Cbr\u003E\tmargin-top: 12px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E\t#inner {\u003Cbr\u003E\twidth: 50px;\u003Cbr\u003E\theight: 50px;\u003Cbr\u003E\tmargin-left: 12px;\u003Cbr\u003E\tmargin-top: 12px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"addHandlers()\"\u003E\u003Cbr\u003E\t\u003Cdiv id=\"outer\"\u003E\u003Cbr\u003E\t\t\u003Cdiv id=\"middle\"\u003E\u003Cbr\u003E\t\t\t\u003Cdiv id=\"inner\"\u003E\u003Cbr\u003E\t\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003Cdiv id=\"log\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле 01_js_samples_misc\\09_events_04_event_order.html\u003Cbr\u003E","\u003Cp\u003EПорядок выполнения событий, стадии перехвата и всплытия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНа обеих стадиях можно блокировать дальнейшее распространение события:\u003Cbr\u003E\u003Cp\u003Eevent.stopPropagation();\u003Cbr\u003E\u003Cp\u003Eevent.preventDefault();\u003Cbr\u003E\u003Cp\u003EЗаодно упомянём полезную вещь – отключения события по умолчанию:\u003Cbr\u003E\u003Cp\u003EЕсли обработчик возвращает false, это тоже блокирует событие по умолчанию, но не останавливает дальнейшее распространение событий.\u003Cbr\u003EВажно! Другие обработчики этого же события на этом же элементе сработают в любом случае!\u003Cbr\u003E","\u003Cp\u003EПорядок выполнения событий, стадии перехвата и всплытия\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВот код, который демонстрирует блокировку распространения:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: устновка обработчиков событий\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function addHandlers()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById(\"inner\").addEventListener(\"click\", innerClickedBubble, false);\u003Cbr\u003E\tdocument.getElementById(\"middle\").addEventListener(\"click\", middleClickedBubble, false);\u003Cbr\u003E\tdocument.getElementById(\"outer\").addEventListener(\"click\", outerClickedBubble, false);\u003Cbr\u003E\t\u003Cbr\u003E\tdocument.getElementById(\"inner\").addEventListener(\"click\", innerClickedCatch, true);\u003Cbr\u003E\tdocument.getElementById(\"middle\").addEventListener(\"click\", middleClickedCatch, true);\u003Cbr\u003E\tdocument.getElementById(\"outer\").addEventListener(\"click\", outerClickedCatch, true);\u003Cbr\u003E }\u003Cbr\u003E function innerClickedBubble(event)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'inner-bubble\u003Cbr\u003E';\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function middleClickedBubble(event)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'middle-bubble\u003Cbr\u003E';\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function outerClickedBubble(event)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'outer-bubble\u003Cbr\u003E';\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function innerClickedCatch(event)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'inner-catch\u003Cbr\u003E';\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function middleClickedCatch(event)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'middle-catch\u003Cbr\u003E';\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function outerClickedCatch(event)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('log').innerHTML += 'outer-catch\u003Cbr\u003E';\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E #outer {\u003Cbr\u003E\twidth: 100px;\u003Cbr\u003E\theight: 100px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E\t#middle {\u003Cbr\u003E\twidth: 75px;\u003Cbr\u003E\theight: 75px;\u003Cbr\u003E\tmargin-left: 12px;\u003Cbr\u003E\tmargin-top: 12px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E\t#inner {\u003Cbr\u003E\twidth: 50px;\u003Cbr\u003E\theight: 50px;\u003Cbr\u003E\tmargin-left: 12px;\u003Cbr\u003E\tmargin-top: 12px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"addHandlers()\"\u003E\u003Cbr\u003E\t\u003Cdiv id=\"outer\"\u003E\u003Cbr\u003E\t\t\u003Cdiv id=\"middle\"\u003E\u003Cbr\u003E\t\t\t\u003Cdiv id=\"inner\"\u003E\u003Cbr\u003E\t\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003Cdiv id=\"log\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле\u003Cbr\u003E01_js_samples_misc\\10_events_05_event_order_no_propagation.html\u003Cbr\u003E","\u003Cp\u003EОбъект event и его свойства\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМы снова опустим вопросы кроссбраузерной совместимости и скажем, что много полезной и интересной информации можно извлечь из свойств «самого события» (да, оно предаётся как объект).\u003Cbr\u003EМы не станем разбирать все свойства события (их очень много), но доработаем наш пример для их показа и посмотрим, что там есть интересного…\u003Cbr\u003E\u003Cp\u003EОчень хороший дополнительный материал:\u003Cbr\u003Ehttp:\u002F\u002Fjavascript.ru\u002Ftutorial\u002Fevents\u002Fproperties \u003Cbr\u003E","\u003Cp\u003EОбъект event и его свойства\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЭтот код логирует события\u003Cbr\u003Eв консоль:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: устновка обработчиков событий\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function addHandlers()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById(\"inner\").addEventListener(\"click\", innerClickedBubble, false);\u003Cbr\u003E\tdocument.getElementById(\"middle\").addEventListener(\"click\", middleClickedBubble, false);\u003Cbr\u003E\tdocument.getElementById(\"outer\").addEventListener(\"click\", outerClickedBubble, false);\u003Cbr\u003E }\u003Cbr\u003E function innerClickedBubble(event)\u003Cbr\u003E {\u003Cbr\u003E\tconsole.log(this.id);\u003Cbr\u003E\tconsole.log(event);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function middleClickedBubble(event)\u003Cbr\u003E {\u003Cbr\u003E\tconsole.log(this.id);\u003Cbr\u003E\tconsole.log(event);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function outerClickedBubble(event)\u003Cbr\u003E {\u003Cbr\u003E\tconsole.log(this.id);\u003Cbr\u003E\tconsole.log(event);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E #outer {\u003Cbr\u003E\twidth: 100px;\u003Cbr\u003E\theight: 100px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E\t#middle {\u003Cbr\u003E\twidth: 75px;\u003Cbr\u003E\theight: 75px;\u003Cbr\u003E\tmargin-left: 12px;\u003Cbr\u003E\tmargin-top: 12px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E\t#inner {\u003Cbr\u003E\twidth: 50px;\u003Cbr\u003E\theight: 50px;\u003Cbr\u003E\tmargin-left: 12px;\u003Cbr\u003E\tmargin-top: 12px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"addHandlers()\"\u003E\u003Cbr\u003E\t\u003Cdiv id=\"outer\"\u003E\u003Cbr\u003E\t\t\u003Cdiv id=\"middle\"\u003E\u003Cbr\u003E\t\t\t\u003Cdiv id=\"inner\"\u003E\u003Cbr\u003E\t\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003Cdiv id=\"log\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EMOZ_SOURCE_CURSOR \t\t4\u003Cbr\u003EMOZ_SOURCE_ERASER \t\t3\u003Cbr\u003EMOZ_SOURCE_KEYBOARD \t\t6\u003Cbr\u003EMOZ_SOURCE_MOUSE \t\t1\u003Cbr\u003EMOZ_SOURCE_PEN \t\t2\u003Cbr\u003EMOZ_SOURCE_TOUCH \t\t5\u003Cbr\u003EMOZ_SOURCE_UNKNOWN \t\t0\u003Cbr\u003ENONE \t\t0\u003Cbr\u003Ebuttons \t\t0\u003Cbr\u003EdefaultPrevented\t\tfalse\u003Cbr\u003EmozInputSource\t\t1\u003Cbr\u003EmozMovementX\t\t72\u003Cbr\u003EmozMovementY\t\t154\u003Cbr\u003EmozPressure\t\t0\u003Cbr\u003EmultipleActionsPrevented\t\tfalse\u003Cbr\u003EgetModifierState\t\tgetModifierState()\u003Cbr\u003EinitNSMouseEvent\t\tinitNSMouseEvent()\u003Cbr\u003EstopImmediatePropagation\t\tstopImmediatePropagation()\u003Cbr\u003EaltKey\t\tfalse\u003Cbr\u003Ebubbles\t\ttrue\u003Cbr\u003Ebutton\t\t0\u003Cbr\u003EcancelBubble\t\tfalse\u003Cbr\u003Ecancelable\t\ttrue\u003Cbr\u003EclientX\t\t72\u003Cbr\u003EclientY\t\t76\u003Cbr\u003EctrlKey\t\tfalse\u003Cbr\u003EcurrentTarget\t\tdiv#middle\u003Cbr\u003Edetail\t\t1\u003Cbr\u003EeventPhase\t\t3\u003Cbr\u003EexplicitOriginalTarget\t\tdiv#inner\u003Cbr\u003EisChar\t\tfalse\u003Cbr\u003EisTrusted\t\ttrue\u003Cbr\u003ElayerX\t\t72\u003Cbr\u003ElayerY\t\t76\u003Cbr\u003EmetaKey\t\tfalse\u003Cbr\u003EoriginalTarget\t\tdiv#inner\u003Cbr\u003EpageX\t\t72\u003Cbr\u003EpageY\t\t76\u003Cbr\u003ErangeOffset\t\t0\u003Cbr\u003ErangeParent\t\tdiv#inner\u003Cbr\u003ErelatedTarget\t\tnull\u003Cbr\u003EscreenX\t\t72\u003Cbr\u003EscreenY\t\t176\u003Cbr\u003EshiftKey\t\tfalse\u003Cbr\u003Etarget\t\tdiv#inner\u003Cbr\u003EtimeStamp\t\t703677937\u003Cbr\u003Etype\t\t\"click\"\u003Cbr\u003Eview\t\tWindow 11_events_06_event_object.html\u003Cbr\u003Ewhich\t\t1\u003Cbr\u003EgetPreventDefault\t\tgetPreventDefault()\u003Cbr\u003EinitEvent\t\tinitEvent()\u003Cbr\u003EinitMouseEvent\t\tinitMouseEvent()\u003Cbr\u003EinitUIEvent\t\tinitUIEvent()\u003Cbr\u003EpreventDefault\t\tpreventDefault()\u003Cbr\u003EstopPropagation\t\tstopPropagation()\u003Cbr\u003EALT_MASK\t\t1\u003Cbr\u003EAT_TARGET\t\t2\u003Cbr\u003EBUBBLING_PHASE\t\t3\u003Cbr\u003ECAPTURING_PHASE\t\t1\u003Cbr\u003ECONTROL_MASK\t\t2\u003Cbr\u003EMETA_MASK\t\t8\u003Cbr\u003ESCROLL_PAGE_DOWN\t\t32768\u003Cbr\u003ESCROLL_PAGE_UP\t\t-32768\u003Cbr\u003ESHIFT_MASK\t\t4\u003Cbr\u003E\u003Cp\u003EСм. пример в файле\u003Cbr\u003E01_js_samples_misc\\11_events_06_event_object.html\u003Cbr\u003E","\u003Cp\u003EРабота с DOM в контексте событий\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМы уже рассмотрели множество примеров определения обработчиков событий и их функционирования. В завершение этого подраздела рассмотрим, как с помощью JavaScript можно модифицировать DOM-структуру документа (например, в ответ на событие).\u003Cbr\u003EРассмотрим это на очень простом наборе примеров:\u003Cbr\u003EВложенные div’ы.\u003Cbr\u003EРамки вокруг надписей.\u003Cbr\u003EУправление таблицей.\u003Cbr\u003E","\u003Cp\u003EРабота с DOM в контексте событий\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВложенные div’ы (при клике на div мы будем добавлять внутрь него ещё один div):\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: примеры работы с DOM\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function addHandlers()\u003Cbr\u003E {\u003Cbr\u003E\tdocument.getElementById(\"div1\").addEventListener(\"click\", onClickListener, false);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function onClickListener(event)\u003Cbr\u003E {\u003Cbr\u003E\tvar parent_div = event.currentTarget;\u003Cbr\u003E\tvar child_div = document.createElement('div');\u003Cbr\u003E\t\u003Cbr\u003E\tevent.stopPropagation();\u003Cbr\u003E\tparent_div.removeEventListener('click', onClickListener);\u003Cbr\u003E\tchild_div.style.width = '80%';\u003Cbr\u003E\tchild_div.style.height = '80%';\u003Cbr\u003E\tchild_div.style.border = '1px solid black';\u003Cbr\u003E\tparent_div.appendChild(child_div);\u003Cbr\u003E\tchild_div.addEventListener(\"click\", onClickListener, false);\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E #div1 {\u003Cbr\u003E\twidth: 100px;\u003Cbr\u003E\theight: 100px;\u003Cbr\u003E\tborder: 1px solid black;\u003Cbr\u003E\t}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"addHandlers()\"\u003E\u003Cbr\u003E\t\u003Cdiv id=\"div1\"\u003E\u003Cbr\u003E\t\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле\u003Cbr\u003E01_js_samples_misc\\12_examples_01_divs.html\u003Cbr\u003E","\u003Cp\u003EРабота с DOM в контексте событий\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПри клике по надписям мы будем создавать вокруг них рамки:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: примеры работы с DOM\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function addHandlers()\u003Cbr\u003E {\u003Cbr\u003E var spanlist = document.getElementsByTagName(\"span\");\u003Cbr\u003E for (var i=0; i\u003Cspanlist.length; i++)\u003Cbr\u003E\t {\u003Cbr\u003E spanlist[i].addEventListener(\"click\", makeBox(spanlist[i]), false);\u003Cbr\u003E }\u003Cbr\u003E }\u003Cbr\u003E function makeBox(elem)\u003Cbr\u003E {\u003Cbr\u003E var clickHandler = function()\u003Cbr\u003E {\u003Cbr\u003E\t this.style.border='1px solid black';\u003Cbr\u003E\t this.removeEventListener('click', clickHandler);\u003Cbr\u003E };\u003Cbr\u003E\treturn clickHandler; \u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload=\"addHandlers()\"\u003E\u003Cbr\u003E Покликайте по этим словам:\u003Cbr\u003E \u003Cspan\u003EРаз.\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cspan\u003EДва.\u003C\u002Fspan\u003E\u003Cbr\u003E \u003Cspan\u003EТри.\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле\u003Cbr\u003E01_js_samples_misc\\13_examples_02_boxes.html\u003Cbr\u003E","\u003Cp\u003EРабота с DOM в контексте событий\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМы сделаем кнопку добавления строки в таблицу, а также в каждой строке кнопку для её удаления:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: примеры работы с DOM\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function deleteRow(row)\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('tbl').deleteRow(row.rowIndex);\u003Cbr\u003E } \u003Cbr\u003E \u003Cbr\u003E function addRow()\u003Cbr\u003E {\u003Cbr\u003E\tvar row = document.getElementById('tbl').insertRow(0);\u003Cbr\u003E var cell1=row.insertCell(0);\u003Cbr\u003E var cell2=row.insertCell(1);\u003Cbr\u003E\tcell1.className='bordered';\u003Cbr\u003E\tcell2.className='bordered';\u003Cbr\u003E \u003Cbr\u003E\tvar txt = document.createElement('input');\u003Cbr\u003E\ttxt.type = 'text';\u003Cbr\u003E\ttxt.className = 'bordered';\u003Cbr\u003E\tcell1.appendChild(txt);\u003Cbr\u003E\t\u003Cbr\u003E var remove_button = document.createElement('button');\u003Cbr\u003E\tremove_button.innerHTML = 'Удалить';\u003Cbr\u003E\tremove_button.onclick=function(){deleteRow(row)};\u003Cbr\u003E cell2.appendChild(remove_button);\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E .bordered {border: 1px solid black;}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cbutton onclick='addRow()'\u003EДобавить строку\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Ctable id='tbl' class='bordered'\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле\u003Cbr\u003E01_js_samples_misc\\14_examples_03_table.html\u003Cbr\u003E","\u003Cp\u003EОТЛОЖЕННОЕ ВЫПОЛНЕНИЕ ФУНКЦИЙ В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОтложенное выполнение функций в JavaScript может использовать по множеству причин:\u003Cbr\u003EВ текущий момент ещё не готовы объекты, с которыми должна работать функция.\u003Cbr\u003EЕщё просто не подошло время выполнения функции.\u003Cbr\u003EНужно дождаться завершения некоторых операций.\u003Cbr\u003EИ т.д. ☺\u003Cbr\u003E\u003Cp\u003EСм. очень хороший и подробный материал:\u003Cbr\u003Ehttp:\u002F\u002Fjavascript.ru\u002Ftutorial\u002Fevents\u002Ftiming \u003Cbr\u003E","\u003Cp\u003EОтложенное выполнение с setTimeout и setInterval\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДве основных функции для отложенного выполнения кода – это:\u003Cbr\u003EtimeoutID=setTimeout(expression, msec)\u003Cbr\u003EtimeoutID=setInterval(expression, msec)\u003Cbr\u003EДля отмены их действия вызываются:\u003Cbr\u003EclearTimeout(timeoutID) \u003Cbr\u003EclearInterval(timeoutID) \u003Cbr\u003E\u003Cp\u003EОЧЕНЬ ВАЖНО! setTimeout() предназначена для ОДНОКРАТНОГО выполнения кода через указанное время, а setInterval() – для многократного (до тех пор, пока не будет выполнен вызов clearInterval() ).\u003Cbr\u003E","\u003Cp\u003EОтложенное выполнение с setTimeout и setInterval\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕщё одним способом отложенного выполнения кода является использование обработчиков событий. Самый яркий пример – обработчик onload():\u003Cbr\u003E\u003Cp\u003E\u003Cbody onload=\"addHandlers()\"\u003E\u003Cbr\u003E\u003Cp\u003EТакое решение позволяет произвести выполнение некоторого кода в момент, когда всё тело документа уже загружено и, соответственно, элементы внутри тела уже существуют.\u003Cbr\u003EРассмотрим все три способа в одном примере: создадим таймер, который запускается через пять секунд после загрузки документа и работает до момента отключения.\u003Cbr\u003E","\u003Cp\u003EОтложенное выполнение: setTimeout, setInterval, onload\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: отложенное выполнение функции\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function prepareTimer()\u003Cbr\u003E {\u003Cbr\u003E setTimeout(startTimer, 5000);\u003Cbr\u003E } \u003Cbr\u003E \u003Cbr\u003E function startTimer()\u003Cbr\u003E {\u003Cbr\u003E\tdocument.getElementById('timer').style.display = 'block';\u003Cbr\u003E\tshowTimer();\u003Cbr\u003E\tinterval = setInterval(showTimer, 1000); \u002F\u002F НЕ var interval !!!\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function showTimer()\u003Cbr\u003E {\u003Cbr\u003E var dt = new Date();\u003Cbr\u003E\thours = ((h = dt.getHours())\u003C10) ? '0'+h : h;\u003Cbr\u003E\tminutes = ((m = dt.getMinutes())\u003C10) ? '0'+m : m;\u003Cbr\u003E\tseconds = ((s = dt.getSeconds())\u003C10) ? '0'+s : s;\u003Cbr\u003E\tdocument.getElementById('hour').innerHTML = hours;\u003Cbr\u003E\tdocument.getElementById('minute').innerHTML = minutes;\u003Cbr\u003E\tdocument.getElementById('second').innerHTML = seconds;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function stopTimer()\u003Cbr\u003E {\u003Cbr\u003E document.getElementById('timer').style.display = 'none';\u003Cbr\u003E\tclearInterval(interval);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E .bordered {border: 1px solid black;}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody onload='prepareTimer()'\u003E\u003Cbr\u003E \u003Cdiv id='timer' style='display: none'\u003E\u003Cbr\u003E \u003Cbutton onclick='stopTimer()'\u003EОстановить таймер\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cspan id='hour'\u003E\u003C\u002Fspan\u003E:\u003Cspan id='minute'\u003E\u003C\u002Fspan\u003E:\u003Cspan id='second'\u003E\u003C\u002Fspan\u003E\u003Cbr\u003E \u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСм. пример в файле\u003Cbr\u003E01_js_samples_misc\\15_timer.html\u003Cbr\u003E","\u003Cp\u003EРАБОТА С XML \u002F JSON В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСейчас мы посмотрим на то, как его можно использовать в JavaScript. А ещё мы посмотрим на…\u003Cbr\u003EJSON (JavaScript Object Notation) – специальный текстовый формат обмена данными, основанный на JavaScript.\u003Cbr\u003E","\u003Cp\u003EЗачем нужны эти форматы?\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ JavaScript использование XML или JSON связано, как правило, с обменом данными с сервером с использованием XMLHttpRequest. Какой из форматов выбирать – в большинстве случаев дело вкуса, но мы рассмотрим использование обоих вариантов на примере.\u003Cbr\u003EИтак: сервер (код на PHP) генерирует таблицу со случайным количеством рядов и строк, передаёт её скрипту на JavaScript в обоих форматах, а тот, в свою очередь, «парсит» данные и обновляет содержимое страницы.\u003Cbr\u003E","\u003Cp\u003EПример использования XML\u002FJSON в JavaScript и PHP\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: XML и JSON\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function loadXML()\u003Cbr\u003E {\u003Cbr\u003E if (typeof xmlhttp == 'undefined')\u003Cbr\u003E\t{\u003Cbr\u003E xmlhttp=new XMLHttpRequest();\u003Cbr\u003E }\u003Cbr\u003E xmlhttp.onload = updateWithXML;\u003Cbr\u003E\txmlhttp.open(\"GET\", \"http:\u002F\u002F127.0.0.1\u002Fxml_and_json.php?xml=true\", false);\u003Cbr\u003E xmlhttp.send();\u003Cbr\u003E }\u003Cbr\u003E function loadJSON()\u003Cbr\u003E {\u003Cbr\u003E if (typeof xmlhttp == 'undefined')\u003Cbr\u003E\t{\u003Cbr\u003E xmlhttp=new XMLHttpRequest();\u003Cbr\u003E }\u003Cbr\u003E xmlhttp.onload = updateWithJSON;\u003Cbr\u003E\txmlhttp.open(\"GET\", \"http:\u002F\u002F127.0.0.1\u002Fxml_and_json.php\", false);\u003Cbr\u003E xmlhttp.send();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function updateWithXML()\u003Cbr\u003E {\u003Cbr\u003E var tbl = document.getElementById('xml_table');\u003Cbr\u003E if ((typeof tbl != 'undefined')&&(tbl != null))\u003Cbr\u003E {\u003Cbr\u003E\t tbl.parentNode.removeChild(tbl);\u003Cbr\u003E }\u003Cbr\u003E\t\u003Cbr\u003E\ttbl = document.createElement('table');\u003Cbr\u003E\ttbl.id = 'xml_table';\u003Cbr\u003E\ttbl.className = 'bordered';\u003Cbr\u003E\t\u003Cbr\u003E\tvar xmlDoc=xmlhttp.responseXML;\u003Cbr\u003E\tvar rows = xmlDoc.getElementsByTagName('tr');\u003Cbr\u003E for (var i=0; i\u003Crows.length; i++)\u003Cbr\u003E {\u003Cbr\u003E var row = rows[i];\u003Cbr\u003E\t var table_row = tbl.insertRow(-1);\u003Cbr\u003E\t for (var j=0; j\u003Crow.childNodes.length; j++)\u003Cbr\u003E\t {\u003Cbr\u003E\t var cell = row.childNodes[j];\u003Cbr\u003E\t var table_cell = table_row.insertCell(-1);\u003Cbr\u003E\t var text = cell.childNodes[0].textContent;\u003Cbr\u003E\t table_cell.className = 'bordered';\u003Cbr\u003E\t table_cell.innerHTML = text;\u003Cbr\u003E\t }\u003Cbr\u003E }\u003Cbr\u003E\tdocument.getElementById('xml_table_container').appendChild(tbl);\u003Cbr\u003E } \u003Cbr\u003E\u003Cbr\u003E function updateWithJSON()\u003Cbr\u003E {\u003Cbr\u003E var tbl = document.getElementById('json_table');\u003Cbr\u003E if ((typeof tbl != 'undefined')&&(tbl != null))\u003Cbr\u003E {\u003Cbr\u003E\t tbl.parentNode.removeChild(tbl);\u003Cbr\u003E }\u003Cbr\u003E\t\u003Cbr\u003E\ttbl = document.createElement('table');\u003Cbr\u003E\ttbl.id = 'json_table';\u003Cbr\u003E\ttbl.className = 'bordered';\u003Cbr\u003E\t\u003Cbr\u003E\tvar jsonDoc=JSON.parse(xmlhttp.responseText);\u003Cbr\u003E\tvar rows = jsonDoc.tr;\u003Cbr\u003E\t\u003Cbr\u003E\t\u002F\u002F В JSON-формате вместо массива получается строка, если элемент один.\u003Cbr\u003E\t\u002F\u002F Это первый вариант \"хака\" по обхождению такого поведения.\u003Cbr\u003E\tif (typeof rows.length == 'undefined')\u003Cbr\u003E\t{\u003Cbr\u003E\t\trows[0] = new Array();\u003Cbr\u003E\t\trows[0].td = rows.td;\u003Cbr\u003E\t\trows.length = 1;\u003Cbr\u003E\t\trows.td = null;\u003Cbr\u003E\t}\u003Cbr\u003E\t\u003Cbr\u003E for (var i=0; i\u003Crows.length; i++)\u003Cbr\u003E {\u003Cbr\u003E var row = rows[i];\u003Cbr\u003E\t var table_row = tbl.insertRow(-1);\u003Cbr\u003E\t \u003Cbr\u003E\t \u002F\u002F В JSON-формате вместо массива получается строка, если элемент один.\u003Cbr\u003E\t \u002F\u002F Это второй вариант \"хака\" по обхождению такого поведения.\u003Cbr\u003E\t if (typeof row.td == 'string')\u003Cbr\u003E\t {\u003Cbr\u003E\t\tvar save_value = row.td;\u003Cbr\u003E\t\trow.td = new Array();\u003Cbr\u003E\t\trow.td[0] = save_value;\u003Cbr\u003E\t }\u003Cbr\u003E\t \u003Cbr\u003E\t for (var j=0; j\u003Crow.td.length; j++)\u003Cbr\u003E\t {\u003Cbr\u003E\t var cell_and_text = row.td[j];\u003Cbr\u003E\t \u003Cbr\u003E\t var table_cell = table_row.insertCell(-1);\u003Cbr\u003E\t table_cell.className = 'bordered';\u003Cbr\u003E\t table_cell.innerHTML = cell_and_text;\u003Cbr\u003E\t }\u003Cbr\u003E }\u003Cbr\u003E\tdocument.getElementById('json_table_container').appendChild(tbl);\u003Cbr\u003E } \u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003Cstyle\u003E\u003Cbr\u003E .bordered {border: 1px solid black;}\u003Cbr\u003E \u003C\u002Fstyle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cbutton onclick='loadXML()'\u003EОбновить таблицу на основе XML\u003C\u002Fbutton\u003E \u003Cbutton onclick='loadJSON()'\u003EОбновить таблицу на основе JSON\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cdiv id='xml_table_container'\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003Cdiv id='json_table_container'\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003E\u003C?php\u003Cbr\u003E$tree = new SimpleXMLElement('\u003Ctable\u002F\u003E');\u003Cbr\u003E$rows = mt_rand(1, 5);\u003Cbr\u003E$cols = mt_rand(1, 5);\u003Cbr\u003Efor ($i=0; $i\u003C$rows; $i++)\u003Cbr\u003E{\u003Cbr\u003E\t$row = $tree-\u003EaddChild('tr');\u003Cbr\u003E\tfor ($j=0; $j\u003C$cols; $j++)\u003Cbr\u003E\t{\u003Cbr\u003E\t\t$row-\u003EaddChild('td', mt_rand(1, 100));\u003Cbr\u003E\t}\u003Cbr\u003E}\u003Cbr\u003Eif (isset($_GET['xml']))\u003Cbr\u003E{\u003Cbr\u003E\theader(\"Content-type: application\u002Fxml\"); \u003Cbr\u003E\techo $tree-\u003EasXML();\u003Cbr\u003E}\t\u003Cbr\u003Eelse\u003Cbr\u003E{\u003Cbr\u003E\theader(\"Content-type: text\u002Fplain\"); \u003Cbr\u003E\techo json_encode($tree);\u003Cbr\u003E}\t\u003Cbr\u003E?\u003E\u003Cbr\u003E\u003Cp\u003EСм. примеры в папке\u003Cbr\u003E02_js_samples_xml_json\u003Cbr\u003E","\u003Cp\u003EОБРАБОТКА ОШИБОЧНЫХ СИТУАЦИЙ И ИСКЛЮЧЕНИЙ В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбработка ошибочных ситуаций\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EДля обработки ошибочных ситуаций в JavaScript в отличие от PHP существует, фактически, один универсальный способ – обработка исключений.\u003Cbr\u003EМы здесь рассмотрим примеры обработки и порождения исключений.\u003Cbr\u003E","\u003Cp\u003EПример обработки исключений с try … catch … finally\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИтак, представим, что мы пытаемся установить значение несуществующего свойства несуществующего объекта.\u003Cbr\u003E\u003Cp\u003Etry\u003Cbr\u003E{\u003Cbr\u003E non_existing_object.non_existing_property = 5;\u003Cbr\u003E}\u003Cbr\u003Ecatch(e)\u003Cbr\u003E{\u003Cbr\u003E console.log(e);\u003Cbr\u003E}\u003Cbr\u003Efinally\u003Cbr\u003E{\u003Cbr\u003E console.log('Finally...');\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003EReferenceError: non_existing_object is not defined\u003Cbr\u003EFinally...\u003Cbr\u003E","\u003Cp\u003EВиды исключений\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EФактически, это и всё, что нам доступно. Даже т.н. «условные исключения» (реакция на исключения разных типов) пока ещё не стандартизированы. Сам JavaScript порождает исключения следующих типов (см. объект Error: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FError):\u003Cbr\u003EEvalError – возникает в процессе работы eval().\u003Cbr\u003ERangeError – возникает при нарушении диапазонов (массив отрицательной длины, Number.to*() на числах вне допустимого диапазона, не числах и т.д.)\u003Cbr\u003EReferenceError – аозникает при обращении к несуществующему объекту или элементу.\u003Cbr\u003ESyntaxError – возникает в процессе анализа синтаксиса аргумента eval().\u003Cbr\u003ETypeError – возникает в случае, когда операция выполняется над элементом недопустимого типа.\u003Cbr\u003EURIError – возникает, если в функции encodeURI() или decodeURl() переданы неверные параметры.\u003Cbr\u003E","\u003Cp\u003EПорождение собственных исключений\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМы можем порождать исключения любого из только что перечисленных типов или свои собственные:\u003Cbr\u003E\u003Cp\u003Efunction test(x)\u003Cbr\u003E{\u003Cbr\u003E if (x\u003C0)\u003Cbr\u003E {\u003Cbr\u003E throw new RangeError('x mut be \u003E= 0'); \u002F\u002F Ещё можно так: throw String('x mut be \u003E= 0');\u003Cbr\u003E }\u003Cbr\u003E if (typeof x == 'string')\u003Cbr\u003E {\u003Cbr\u003E \u002F\u002F В создаваемом объекте вы можете определять ЛЮБЫЕ свойства и методы.\u003Cbr\u003E throw { \u003Cbr\u003E name: 'Type Error', \u003Cbr\u003E level: 'Script stop', \u003Cbr\u003E message: 'x must be a number', \u003Cbr\u003E htmlMessage: '\u003Ca href=\"no_manual_sorry.html\"\u003ENo manual available\u003C\u002Fa\u003E',\u003Cbr\u003E toString: function(){return this.name + \": \" + this.message} \u003Cbr\u003E } \u003Cbr\u003E }\u003Cbr\u003E}\u003Cbr\u003Etry\u003Cbr\u003E{\u003Cbr\u003E test(-1); \u002F\u002F Закомментируйте эту строку, чтобы увидеть реакцию на второй случай.\u003Cbr\u003E test('abc');\u003Cbr\u003E}\u003Cbr\u003Ecatch (e)\u003Cbr\u003E{\u003Cbr\u003E console.log(e);\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EООП В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения об ООП\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EООП – парадигма программирования, в которой основными концепциями являются понятия объектов и классов.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EНастоятельно рекомендуется вдумчиво прочитать:\u003Cbr\u003Ehttp:\u002F\u002Fjavascript.ru\u002Ftutorial\u002Fobject\u002Finheritance\u003Cbr\u003Ehttp:\u002F\u002Fjavascript.ru\u002Ftutorial\u002Fobject\u002Fthiskeyword\u003Cbr\u003E\u003Cp\u003EСм. примеры в папке\u003Cbr\u003E03_js_samples_oop\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript – что не так?\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИтак, в JavaScript реализовано не классическое ООП (с классами), а т.н. «прототипное наследование».\u003Cbr\u003EЛогика ООП состоит не в создании классов и объектов, а в… создании объектов СРАЗУ, «из ничего».\u003Cbr\u003EОбъект можно создать даже вот так:\u003Cbr\u003E\u003Cp\u003Eobj = {a: 'Yes', b: 'No', sqr : function(x){return x*x}};\u003Cbr\u003Econsole.log(obj);\u003Cbr\u003Econsole.log(obj.sqr(5));\u003Cbr\u003E\u003Cp\u003EObject { a=\"Yes\", b=\"No\", sqr=function()}\u003Cbr\u003E25\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЧуть более классический вариант – создание функции (напоминаем, в JavaScript функция – тоже объект) с использованием ключевого слова new.\u003Cbr\u003E\u003Cp\u003Efunction Person(name, profession)\u003Cbr\u003E{\u003Cbr\u003E this.name = name;\u003Cbr\u003E this.profession = profession;\u003Cbr\u003E this.make_some_work = function(){return 'Done';};\u003Cbr\u003E}\u003Cbr\u003Evar Pupkin = new Person('Pupkin', 'worker');\u003Cbr\u003Econsole.log(Pupkin.make_some_work());\u003Cbr\u003E\u003Cp\u003EDone\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EКак можно понять из предыдущего примера, мы не можем создать «классический класс», не можем использовать модификаторы прав доступа (public, protected, private), не можем создавать «нормальные» статические методы и т.д.\u003Cbr\u003EВ общем случае это – не проблема, т.к. для простых скриптов нет необходимости в сложных решениях, но мы всё же рассмотрим, как организуется наследование.\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИтак, чтобы «унаследовать» «класс» от объекта (не класс от класса!!!) надо сделать так:\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Объявляем первый \"класс\".\u003Cbr\u003Efunction Person(name, profession)\u003Cbr\u003E{\u003Cbr\u003E this.name = name;\u003Cbr\u003E this.profession_by_education = profession;\u003Cbr\u003E this.make_some_work = function(){return 'Done';};\u003Cbr\u003E}\u003Cbr\u003E\u002F\u002F Объявляем второй \"класс\".\u003Cbr\u003Efunction Professional(name, profession)\u003Cbr\u003E{\u003Cbr\u003E this.name = name;\u003Cbr\u003E this.profession_in_real_life = profession;\u003Cbr\u003E this.make_good_work = function(){return 'Well done!';};\u003Cbr\u003E}\u003Cbr\u003E\u002F\u002F Создаём первый экземпляр.\u003Cbr\u003Evar pupkin = new Person('Pupkin', 'worker');\u003Cbr\u003E\u002F\u002F Наследуем второй \"класс\" от _ЭКЗЕМПЛЯРА_ первого.\u003Cbr\u003EProfessional.prototype = pupkin;\u003Cbr\u003E\u002F\u002F Создаём второй экземпляр.\u003Cbr\u003Evar smith = new Professional('Smith', 'programmer');\u003Cbr\u003Econsole.log(pupkin.make_some_work()); \u002F\u002F Done\u003Cbr\u003Econsole.log(smith.make_good_work()); \u002F\u002F Well done!\u003Cbr\u003Econsole.log(smith.make_some_work()); \u002F\u002F Done\u003Cbr\u003Econsole.log(smith.profession_by_education); \u002F\u002F worker\u003Cbr\u003Epupkin.profession_by_education = 'writer';\u003Cbr\u003Econsole.log(smith.profession_by_education); \u002F\u002F writer\u003Cbr\u003E\u003Cp\u003Econsole.log(typeof pupkin); \u002F\u002F object\u003Cbr\u003Econsole.log(typeof smith); \u002F\u002F object\u003Cbr\u003Econsole.log(pupkin instanceof Person); \u002F\u002F true\u003Cbr\u003Econsole.log(smith instanceof Person); \u002F\u002F true\u003Cbr\u003Econsole.log(pupkin instanceof Professional); \u002F\u002F false\u003Cbr\u003Econsole.log(smith instanceof Professional); \u002F\u002F true\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЕщё один способ наследования – с использованием Object.create():\u003Cbr\u003E\u003Cp\u003Efunction Creature(name, type)\u003Cbr\u003E{\u003Cbr\u003E this.name = name;\u003Cbr\u003E this.type = type || 'unknown type';\u003Cbr\u003E}\u003Cbr\u003ECreature.prototype.getName = function()\u003Cbr\u003E{\u003Cbr\u003E return this.name;\u003Cbr\u003E}\u003Cbr\u003ECreature.prototype.getType = function()\u003Cbr\u003E{\u003Cbr\u003E return this.type;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003Efunction Human(name)\u003Cbr\u003E{\u003Cbr\u003E Creature.call(this, name, 'human');\u003Cbr\u003E this.name = name || 'No name';\u003Cbr\u003E}\u003Cbr\u003EHuman.prototype = Object.create(Creature.prototype);\u003Cbr\u003Evar pupkin = new Human('Pupkin');\u003Cbr\u003Evar smith = new Human('Smith');\u003Cbr\u003Econsole.log(pupkin.getName()); \u002F\u002F Pupkin\u003Cbr\u003Econsole.log(pupkin.getType()); \u002F\u002F human\u003Cbr\u003Econsole.log(smith.getName()); \u002F\u002F Smith\u003Cbr\u003Econsole.log(smith.getType()); \u002F\u002F human\u003Cbr\u003Econsole.log(smith instanceof Human); \u002F\u002F true\u003Cbr\u003Econsole.log(smith instanceof Creature); \u002F\u002F true\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Как в JavaScript объявлять конструктор?\u003Cbr\u003EA: «Никак». Это просто код внутри «объекта-функции», работающий с this:\u003Cbr\u003E\u003Cp\u003Efunction Creature(name, type)\u003Cbr\u003E{\u003Cbr\u003E this.name = name;\u003Cbr\u003E this.type = type || 'unknown type';\u003Cbr\u003E}\u003Cbr\u003Ealien = new Creature('Alien');\u003Cbr\u003Econsole.log(alien);\u003Cbr\u003Estrange_alien = Creature('Strange alien');\u003Cbr\u003Econsole.log(strange_alien);\u003Cbr\u003Econsole.log(window.name);\u003Cbr\u003E\u003Cp\u003ECreature { name=\"Alien\", type=\"unknown type\"}\u003Cbr\u003Eundefined\u003Cbr\u003EStrange alien\u003Cbr\u003E\u003Cp\u003EБез ключевого слова new указатель this будет указывать не на экземпляр «функции-класса», а на глобальный объект window.\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Как защититься от ошибок создания экземпляров без new?\u003Cbr\u003EA: Вот так:\u003Cbr\u003E\u003Cp\u003Efunction Creature(name, type)\u003Cbr\u003E{\u003Cbr\u003E \u002F\u002F Если this -- не наш «класс»,\u003Cbr\u003E \u002F\u002F создаём экземпляр «вручную» и возвращаем его.\u003Cbr\u003E if (!(this instanceof Creature))\u003Cbr\u003E {\u003Cbr\u003E return new Creature(name, type);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E this.name = name;\u003Cbr\u003E this.type = type || 'unknown type';\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Да что вообще с этим this такое творится?!\u003Cbr\u003EA: Если очень кратко, то логика такая:\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Просто вызов функции\u003Cbr\u003Etest_function('text'); \u002F\u002F this == window\u003Cbr\u003E\u002F\u002F Обращение к конструктору\u003Cbr\u003Evar x = new TestFunction('text'); \u002F\u002F this == новый объект\u003Cbr\u003E\u002F\u002F Вызов метода\u003Cbr\u003Eobj.test_function('text'); \u002F\u002F this == obj\u003Cbr\u003E\u002F\u002F Вызов apply или call\u003Cbr\u003Etest_function.call(obj, params); \u002F\u002F this == obj\u003Cbr\u003Etest_function.apply(obj, params); \u002F\u002F this == obj\u003Cbr\u003E\u002F\u002F Вызов обработчика\u003Cbr\u003E\u003Cspan onclick=\"span_click(this)\"\u003E \u002F\u002F this == span\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: А как всё же сделать «классический ООП» -- со статическими методами и свойствами, константами классов, синглтонами и прочим-разным-привычным?\u003Cbr\u003EA: Не надо. Несмотря на то, что ответы на любую часть этого вопроса легко выгугливаются (даже реализация примесей (mixins)), всё же JavaScript используется «очень по-своему», и не надо пытаться «написать PHP\u002FC#\u002FJava на JavaScript».\u003Cbr\u003E","\u003Cp\u003EООП в JavaScript, создание объектов, наследование\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EQ: Я прочитал всё это трижды и всё равно ничего не понял. Что делать?\u003Cbr\u003EA: Читать дальше. Вот здесь http:\u002F\u002Fhabrahabr.ru\u002Fpost\u002F131714\u002F есть ещё одно объяснение про «ООП в JS». Возможно, оно покажется более простым.\u003Cbr\u003E","\u003Cp\u003EЗадание для закрепления материала\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРеализуйте с помощью JavaScript классическую задачу «о геометрических фигурах»: есть «абстрактная фигура», от которой наследуется эллипс, прямоугольник и треугольник. От эллипса наследуется круг, от прямоугольника – квадрат, от треугольника – равносторонний и прямоугольный треугольники. Для всех фигур нужно вычислять периметр и площадь. Каждая фигура задаётся координатами вершин или координатами центра и радиусом (радиусами).\u003Cbr\u003E","\u003Cp\u003EРЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В JAVASCRIPT\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРегулярные выражения вы изучали раньше.\u003Cbr\u003EJavaScript почти следует логике PCRE в своих регулярных выражениях, так что подавляющее большинство решений из PHP будет работать и в JavaScript.\u003Cbr\u003EЧтобы понять нюансы достаточно глубоко, смотрите документацию по JavaScript, а мы рассмотрим основное и вкратце.\u003Cbr\u003E","\u003Cp\u003EОбъект RegExp\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОбъект RegExp, отвечающий за работу с регулярными выражениями, можно создать так:\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Классический способ:\u003Cbr\u003Evar re = new RegExp(\"регулярное_выражение\"[, модификаторы]);\u003Cbr\u003E\u002F\u002F Perl-style способ:\u003Cbr\u003Evar re = \u002Fрегулярное_выражение\u002Fмодификаторы;\u003Cbr\u003E\u003Cp\u003E\u002F\u002F Классический способ:\u003Cbr\u003Evar re_classic = new RegExp('\u002F[a-z]+\\\\w\u002F', 'i');\u003Cbr\u003E\u002F\u002F Perl-style способ:\u003Cbr\u003Evar re_perl = \u002F[a-z]+\\w\u002Fi;\u003Cbr\u003E","\u003Cp\u003EИспользование объекта RegExp\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EУ объекта RegExp есть следующие методы:\u003Cbr\u003Eexec – выполнить поиск и вернуть массив с результатами и дополнительной информацией.\u003Cbr\u003Etest – проверить на совпадение и вернуть true или false.\u003Cbr\u003EУ объекта String есть следующие методы по работе с регулярными выражениями:\u003Cbr\u003Ematch – выполнить поиск и вернуть массив с результатами и дополнительной информацией (или null, если ничего не найдено).\u003Cbr\u003Esearch – проверить на совпадение и вернуть индекс совпадения или -1, если совпадения нет.\u003Cbr\u003Ereplace – произвести поиск и замену.\u003Cbr\u003Esplit – разрезать строку на массив подстрок, используя в качестве разделителя регулярное выражение или фиксированную строку.\u003Cbr\u003E","\u003Cp\u003EИспользование RegExp.exec()\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРассмотрим пример использования RegExp.exec()\u003Cbr\u003E\u003Cp\u003Evar text = 'Это текст с кодами товаров: ABC-1000, def-2000.';\u003Cbr\u003Evar re = new RegExp('([a-z]{3})-(\\\\d{4})', 'ig');\u003Cbr\u003Evar result;\u003Cbr\u003Ewhile ((result = re.exec(text)) !== null)\u003Cbr\u003E{\u003Cbr\u003E console.log(result);\u003Cbr\u003E}\u003Cbr\u003E\u003Cp\u003E[\"ABC-1000\", \"ABC\", \"1000\"]\u003Cbr\u003E0 \t\"ABC-1000\"\u003Cbr\u003E1 \t\"ABC\"\u003Cbr\u003E2 \t\"1000\"\u003Cbr\u003Eindex \t28\u003Cbr\u003Einput \t\"Это текст с кодами товаров: ABC-1000, def-2000.\"\u003Cbr\u003E[\"def-2000\", \"def\", \"2000\"]\u003Cbr\u003E0 \t\"def-2000\"\u003Cbr\u003E1 \t\"def\"\u003Cbr\u003E2 \t\"2000\"\u003Cbr\u003Eindex \t38\u003Cbr\u003Einput \t\"Это текст с кодами товаров: ABC-1000, def-2000.\"\u003Cbr\u003E","\u003Cp\u003EИспользование RegExp.test()\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРассмотрим пример использования RegExp.test()\u003Cbr\u003E\u003Cp\u003Evar text = 'Это текст с кодами товаров: ABC-1000, def-2000.';\u003Cbr\u003Evar re_4d = new RegExp('\\\\d{4}', '');\u003Cbr\u003Evar re_5d = new RegExp('\\\\d{5}', '');\u003Cbr\u003Econsole.log(re_4d.test(text)); \u002F\u002F true\u003Cbr\u003Econsole.log(re_5d.test(text)); \u002F\u002F false\u003Cbr\u003E","\u003Cp\u003EИспользование Sring.match()\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРассмотрим пример использования Sring.match()\u003Cbr\u003E\u003Cp\u003Evar text = 'Это текст с кодами товаров: ABC-1000, def-2000.';\u003Cbr\u003Evar re_4d = new RegExp('\\\\d{4}', '');\u003Cbr\u003Evar re_5d = new RegExp('\\\\d{5}', '');\u003Cbr\u003Econsole.log(text.match(re_4d)); \u002F\u002F См. ниже.\u003Cbr\u003Econsole.log(text.match(re_5d)); \u002F\u002F null\u003Cbr\u003E\u003Cp\u003E[\"1000\"]\u003Cbr\u003E0\t\"1000\"\u003Cbr\u003Eindex \t32\u003Cbr\u003Einput \t\"Это текст с кодами товаров: ABC-1000, def-2000.\"\u003Cbr\u003E","\u003Cp\u003EИспользование Sring.search()\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРассмотрим пример использования Sring.search()\u003Cbr\u003E\u003Cp\u003Evar text = 'Это текст с кодами товаров: ABC-1000, def-2000.';\u003Cbr\u003Evar re_4d = new RegExp('\\\\d{4}', '');\u003Cbr\u003Evar re_5d = new RegExp('\\\\d{5}', '');\u003Cbr\u003Econsole.log(text.search(re_4d)); \u002F\u002F 32\u003Cbr\u003Econsole.log(text.search(re_5d)); \u002F\u002F -1\u003Cbr\u003E","\u003Cp\u003EИспользование Sring.replace()\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРассмотрим пример использования Sring.replace()\u003Cbr\u003E\u003Cp\u003Evar text = 'Это текст с кодами товаров: ABC-1000, def-2000.';\u003Cbr\u003Evar re_4d = new RegExp('\\\\d{4}', 'g');\u003Cbr\u003Econsole.log(text.replace(re_4d, '?'));\u003Cbr\u003E\u002F\u002F Это текст с кодами товаров: ABC-?, def-?.\u003Cbr\u003E\u002F\u002F Без модификатора g (global) будет\u003Cbr\u003E\u002F\u002F заменено только первое вхождение.\u003Cbr\u003E","\u003Cp\u003EИспользование Sring.split()\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EРассмотрим пример использования Sring.split()\u003Cbr\u003E\u003Cp\u003Evar text = 'Это текст с кодами товаров: ABC-1000, def-2000.';\u003Cbr\u003Evar re_4d = new RegExp('\\\\d{4}', 'g');\u003Cbr\u003Econsole.log(text.split(re_4d));\u003Cbr\u003E\u002F\u002F [\"Это текст с кодами товаров: ABC-\", \", def-\", \".\"]\u003Cbr\u003E","\u003Cp\u003EЗадание для закрепления материала\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EЗадачи:\u003Cbr\u003E1) Определить, содержит ли текст хотя бы одно трёхзначное число.\u003Cbr\u003E2) Показать все двухзначные числа, стоящие строго в начале или строго в конце строки.\u003Cbr\u003E3) Для дат в формате [Д]Д.[М]М.[ГГ]ГГ выделить день, месяц, год.\u003Cbr\u003E4) Выделить в тексте дублирующиеся слова.\u003Cbr\u003E5) Определить числа с запятой или пробелом в качестве разделителя разрядов.\u003Cbr\u003E","\u003Cp\u003EИСПОЛЬЗОВАНИЕ XMLHTTPREQUEST\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EОбщие сведения\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EXMLHttpRequest – специальное решение (фактически, API), позволяющее выполнять т.н. фоновые запросы к веб-серверу, не обновляя всю страницу целиком.\u003Cbr\u003EXMLHttpRequest лежит в основе AJAX (Asynchronous Javascript and XML, асинхронный JavaScript и XML) – набора решений, позволяющих строить максимально интерактивные веб-приложения.\u003Cbr\u003E\u003Cp\u003EСм. примеры в папке\u003Cbr\u003E04_js_samples_ajax\u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ классическом варианте любые изменения страницы, требующие информации с сервера, приводят к повторной загрузке всей страницы целиком:\u003Cbr\u003E\u003Cp\u003EСервер\u003Cbr\u003E\u003Cp\u003EБраузер\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EНовая страница\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EНовая страница\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EНовая страница\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EНовая страница\u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EВ случае использования AJAX картина становится такой:\u003Cbr\u003E\u003Cp\u003EСервер\u003Cbr\u003E\u003Cp\u003EБраузер\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EНовая страница\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EПорция данных\u003Cbr\u003E\u003Cp\u003EJavaScript\u003Cbr\u003E\u003Cp\u003EXMLHttpRequest\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EПорция данных\u003Cbr\u003E\u003Cp\u003EЗапрос и данные\u003Cbr\u003E\u003Cp\u003EПорция данных\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОбщий принцип прост, и мы его уже изучили (и даже видели пример в главе, посвящённой XML и JSON):\u003Cbr\u003E1) Написать код, вызываемый в результате реакции на какое-то событие (как вариант – по таймеру).\u003Cbr\u003E2) Создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ.\u003Cbr\u003E3) Обработать ответ и внести правки в страницу (или выполнить какие-то иные действия – JavaScript ведь может многое).\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EС первой и третей частями мы уже хорошо познакомились в соответствующих главах (см. всё, что связано с обработкой событий и управлением DOM).\u003Cbr\u003EПотому – сразу переходим ко второй (создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ) и посмотрим, как это сделать максимально универсально и кроссбраузерно.\u003Cbr\u003EИтак…\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПоскольку реализация XMLHttpRequestзависит от браузера, воспользуемся таким решением:\u003Cbr\u003E\u003Cp\u003Efunction getXHR()\u003Cbr\u003E{\u003Cbr\u003E var xmlhttp = false;\u003Cbr\u003E var XMLHttpFactories = [\u003Cbr\u003E function () {return new XMLHttpRequest()},\u003Cbr\u003E function () {return new ActiveXObject(\"Msxml2.XMLHTTP\")},\u003Cbr\u003E function () {return new ActiveXObject(\"Msxml3.XMLHTTP\")},\u003Cbr\u003E function () {return new ActiveXObject(\"Microsoft.XMLHTTP\")}];\u003Cbr\u003E \u003Cbr\u003E for (var i=0;i\u003CXMLHttpFactories.length;i++) {\u003Cbr\u003E try\u003Cbr\u003E {\u003Cbr\u003E xmlhttp = XMLHttpFactories[i]();\u003Cbr\u003E }\u003Cbr\u003E catch (e)\u003Cbr\u003E {\u003Cbr\u003E continue;\u003Cbr\u003E }\u003Cbr\u003E break;\u003Cbr\u003E }\u003Cbr\u003E return xmlhttp;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EПолучив экземпляр XMLHttpRequest, следует его «настроить»: указать обработчики изменения состояния. Это можно сделать через два свойства:\u003Cbr\u003Eonreadystatechange – указывается функция, которая будет вызываться при любом изменении состояния (крайне не рекомендуется для синхронных запросов; впрочем, и сами синхронные запросы крайне не рекомендуются);\u003Cbr\u003Eonload – указывается функция, которая будет вызываться после завершения выполнения запроса.\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EУ XMLHttpRequest есть следующие состояния:\u003Cbr\u003E0 (UNSENT) – метод open() ещё не был вызван.\u003Cbr\u003E1 (OPENED) – метод send() ещё не был вызван.\u003Cbr\u003E2 (HEADERS_RECEIVED) – метод send() был вызван, и уже доступен статус ответа и заголовки ответа.\u003Cbr\u003E3 (LOADING) – идёт загрузка, в свойстве responseText содержится часть полученных данных.\u003Cbr\u003E4 (DONE) – операция завершена.\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМетод\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003Eинициализирует запрос. Здесь особо стоит отметить параметр async, который в общем случае должен быть true, т.е. в противном случае (при долгих запросах-ответах) в зависимости от браузера можно получить низкую производительность или вовсе «замирание»\u002F«подвисание» приложения или даже всего браузера.\u003Cbr\u003E\u003Cp\u003Evoid open(\u003Cbr\u003E DOMString method,\u003Cbr\u003E DOMString url,\u003Cbr\u003E optional boolean async,\u003Cbr\u003E optional DOMString user,\u003Cbr\u003E optional DOMString password\u003Cbr\u003E);\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМетод\u003Cbr\u003Eотправляет запрос и либо ждёт его завершения (синхронный запрос), либо сразу же завершается (асинхронный запрос).\u003Cbr\u003EИз других полезных методов стоит отметить:\u003Cbr\u003Eabort() – отмена всей операции.\u003Cbr\u003EgetResponseHeader(String header) – возвращает указанный заголовок ответа или null, если заголовка нет, или он пока не получен.\u003Cbr\u003EsetRequestHeader(String header, String value) – позволяет указать заголовок HTTP-запроса.\u003Cbr\u003EoverrideMimeType(String mimetype) – позволяет принудительно указать MIME-тип документа (полезно, например, если нужно будет проанализировать XML-ответ, но сервер не выставил правильный заголовок).\u003Cbr\u003E\u003Cp\u003Evoid send();\u003Cbr\u003E","\u003Cp\u003EКак это реализовать\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EМного полезной информации можно получить из свойств:\u003Cbr\u003EreadyState – текущее состояние операции (см. onreadystatechange).\u003Cbr\u003Estatus – код HTTP-ответа сервера (200, 404 и т.д.)\u003Cbr\u003EstatusText – «текст кода HTTP-ответа», т.е. \"OK\" и т.д.\u003Cbr\u003Eresponse – «тело ответа» (см. документацию, там много нюансов).\u003Cbr\u003EresponseText – текст ответа сервера (как правило, или используется сам по себе для вставки в страницу, или содержит JSON).\u003Cbr\u003EresponseXML – XML-вид ответа сервера (при условии, что сервер ДЕЙСТВИТЕЛЬНО передал в ответ XML-данные).\u003Cbr\u003Etimeout – позволяет устанавливать таймаут в тысячных долях секунд (по умолчанию == 0, т.е. время выполнения запроса не ограничено).\u003Cbr\u003Eontimeout – позволяет указать функцию, которая будет вызвана при наступлении таймаута.\u003Cbr\u003E","\u003Cp\u003EДемонстрация на примере\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EТеперь соберём всё это вместе и посмотрим, как работает синхронный и асинхронный запрос:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: AJAX\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E function getXHR()\u003Cbr\u003E {\u003Cbr\u003E var xmlhttp = false;\u003Cbr\u003E var XMLHttpFactories = [\u003Cbr\u003E function () {return new XMLHttpRequest()},\u003Cbr\u003E function () {return new ActiveXObject(\"Msxml2.XMLHTTP\")},\u003Cbr\u003E function () {return new ActiveXObject(\"Msxml3.XMLHTTP\")},\u003Cbr\u003E function () {return new ActiveXObject(\"Microsoft.XMLHTTP\")}];\u003Cbr\u003E \u003Cbr\u003E for (var i=0;i\u003CXMLHttpFactories.length;i++) {\u003Cbr\u003E try\u003Cbr\u003E {\u003Cbr\u003E xmlhttp = XMLHttpFactories[i]();\u003Cbr\u003E }\u003Cbr\u003E catch (e)\u003Cbr\u003E {\u003Cbr\u003E continue;\u003Cbr\u003E }\u003Cbr\u003E break;\u003Cbr\u003E }\u003Cbr\u003E return xmlhttp;\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function sampleSync()\u003Cbr\u003E {\u003Cbr\u003E\tvar xhr = getXHR();\u003Cbr\u003E\txhr.onreadystatechange = createWatcher(xhr, 'Sync: ');\u003Cbr\u003E\t\u003Cbr\u003E\t\u002F\u002F ВАЖНО! AJAX-запросы НЕ работают \"кросс-доменно\"!!!!!\u003Cbr\u003E\t\u002F\u002F Т.е. нельзя \"просто открыть эту HTML'ку в браузере, и всё заработает\". Надо открывать её как http:\u002F\u002F127.0.0.1\u002Fajax.html\u003Cbr\u003E\t\u002F\u002F При попытке выполнить кросс-доменный запрос, вы будете получать ошибку NS_ERROR_FAILURE, и запрос будет остановлен.\u003Cbr\u003E\t\u002F\u002F Решений два:\u003Cbr\u003E\t\u002F\u002F 1) Сервер при передаче HTML, в котором вызывается ваш запрос, должен вернуть заголовок header('Access-Control-Allow-Origin: *'); (это может всё равно не работать).\u003Cbr\u003E\t\u002F\u002F 2) Создавать т.н. server-side-proxy -- скрипт, который будет перенаправлять ваши запросы на другие сайты и возвращать ответы.\u003Cbr\u003E\txhr.open('get', 'http:\u002F\u002F127.0.0.1', false);\u003Cbr\u003E\txhr.send();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function sampleAsync()\u003Cbr\u003E {\u003Cbr\u003E\tvar xhr = getXHR();\u003Cbr\u003E\txhr.onreadystatechange = createWatcher(xhr, 'Async: ');\u003Cbr\u003E\t\u003Cbr\u003E\t\u002F\u002F ВАЖНО! AJAX-запросы НЕ работают \"кросс-доменно\"!!!!!\u003Cbr\u003E\t\u002F\u002F Т.е. нельзя \"просто открыть эту HTML'ку в браузере, и всё заработает\". Надо открывать её как http:\u002F\u002F127.0.0.1\u002Fajax.html\u003Cbr\u003E\t\u002F\u002F При попытке выполнить кросс-доменный запрос, вы будете получать ошибку NS_ERROR_FAILURE, и запрос будет остановлен.\u003Cbr\u003E\t\u002F\u002F Решений два:\u003Cbr\u003E\t\u002F\u002F 1) Сервер при передаче HTML, в котором вызывается ваш запрос, должен вернуть заголовок header('Access-Control-Allow-Origin: *'); (это может всё равно не работать).\u003Cbr\u003E\t\u002F\u002F 2) Создавать т.н. server-side-proxy -- скрипт, который будет перенаправлять ваши запросы на другие сайты и возвращать ответы.\u003Cbr\u003E\txhr.open('get', 'http:\u002F\u002F127.0.0.1', true);\u003Cbr\u003E\txhr.send();\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function createWatcher(xhr, msg)\u003Cbr\u003E {\u003Cbr\u003E return function()\u003Cbr\u003E\t{\u003Cbr\u003E document.getElementById('log').innerHTML += msg + xhr.readyState + '\u003Cbr\u003E';\u003Cbr\u003E\t if (xhr.readyState == 4)\u003Cbr\u003E\t {\u003Cbr\u003E\t var log = document.getElementById('log');\u003Cbr\u003E\t log.innerHTML += msg + 'Finished' + '\u003Cbr\u003E';\u003Cbr\u003E\t log.innerHTML += msg + 'AllResponseHeaders: ' + xhr.getAllResponseHeaders() + '\u003Cbr\u003E';\u003Cbr\u003E\t log.innerHTML += msg + 'Status: ' + xhr.status + '\u003Cbr\u003E';\u003Cbr\u003E\t log.innerHTML += msg + 'Status: ' + xhr.statusText + '\u003Cbr\u003E';\u003Cbr\u003E\t }\u003Cbr\u003E\t} \u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cbutton onclick='sampleSync()'\u003EСинхронный запрос\u003C\u002Fbutton\u003E \u003Cbutton onclick='sampleAsync()'\u003EАсинхронный запрос\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cdiv id='log'\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EКРОССДОМЕННЫЕ ЗАПРОСЫ\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E","\u003Cp\u003EСуть проблемы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EБраузеры по соображениям безопасности ограничивают возможности скриптов по взаимодействию с другими доменами, т.е. учитывают комбинацию схемы, имени хоста и порта для того, чтобы определить, откуда был загружен скрипт, и разрешить ему выполнять только запросы по тому же адресу.\u003Cbr\u003E\u003Cp\u003EПочитать подробнее:\u003Cbr\u003Ehttp:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSame-origin_policy \u003Cbr\u003E","\u003Cp\u003EРешение проблемы\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EОднако иногда есть объективная необходимость выполнять такие (т.н. «кроссдоменные») запросы. Сделать это помогает…\u003Cbr\u003EJSONP (JSON with padding) – расширение формата JSON, предоставляющее возможность запросить данные с «чужого домена».\u003Cbr\u003E\u003Cp\u003EПочитать подробнее:\u003Cbr\u003Ehttp:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FJSONP \u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСначала рассмотрим серверную часть. Здесь важны две вещи:\u003Cbr\u003E1. Верные заголовки HTTP-ответа.\u003Cbr\u003E2. Правильное формирование контента.\u003Cbr\u003EРассмотрим на примере выполнения кроссдоменного запроса (будем посылать запрос на виртуальную машину)…\u003Cbr\u003E\u003Cp\u003EСм. примеры в папке\u003Cbr\u003E05_js_samples_jsonp\u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EСерверная часть:\u003Cbr\u003E\u003Cp\u003E\u003C?php\u003Cbr\u003Eif (isset($_GET['callback']))\u003Cbr\u003E{\u003Cbr\u003E\t\u002F\u002F Just for security reasons.\u003Cbr\u003E\t$callback = preg_replace('\u002F[^a-z0-9$_]\u002Fsi', '', $_GET['callback']);\u003Cbr\u003E\t\u003Cbr\u003E\t\u002F\u002F Set headers.\u003Cbr\u003E\theader('Access-Control-Allow-Origin: *');\u003Cbr\u003E\theader('Content-Type: application\u002Fjavascript;charset=UTF-8');\u003Cbr\u003E\t\u002F\u002F Collect some useful data.\u003Cbr\u003E\t$response = array('a' =\u003E '999');\u003Cbr\u003E\t\u003Cbr\u003E\t\u002F\u002F Create proper JSONP format response and send it.\u003Cbr\u003E\t$response = $callback.'('.json_encode($response).')';\u003Cbr\u003E\techo $response;\u003Cbr\u003E}\t\u003Cbr\u003E?\u003E\u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EНа клиентской части нужно сделать две вещи:\u003Cbr\u003E1. Подготовить функцию, имя которой передано на сервер в качестве параметра запроса.\u003Cbr\u003E2. Динамически создать элемент \u003Cscript\u003E.\u003Cbr\u003EИдея состоит в том, что вы не ВЫПОЛНЯЕТЕ запрос к «чужому домену», а создаёте запрос, который загружает «скрипт» (JSON-данные, обёрнутые в вызов функции) с нужного вам домена. Как только этот «скрипт» загрузится, функция будет вызвана. А у вас в документе она уже есть – и всё.\u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EКлиентская часть:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E \u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"UTF-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EJavaScript: JSONP\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cscript\u003E\u003Cbr\u003E \u003Cbr\u003E function getCrossDomainData()\u003Cbr\u003E {\u003Cbr\u003E var script = document.createElement(\"script\");\u003Cbr\u003E script.src = 'http:\u002F\u002F192.168.56.101\u002Fjsonp.php?callback=jsonptest';\u003Cbr\u003E document.body.appendChild(script);\u003Cbr\u003E }\u003Cbr\u003E \u003Cbr\u003E function jsonptest(data)\u003Cbr\u003E {\u003Cbr\u003E console.log(data);\u003Cbr\u003E document.getElementById('log').innerHTML += data.a;\u003Cbr\u003E }\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cbutton onclick='getCrossDomainData()'\u003EЗапросить занные\u003C\u002Fbutton\u003E\u003Cbr\u003E \u003Cdiv id='log'\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EКак это работает\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EИтак, важное и ещё раз:\u003Cbr\u003EЭто – НЕ XMLHttpRequest! Да, это динамическая подгрузка данных, но она работает БЕЗ XMLHttpRequest.\u003Cbr\u003EАлгоритм такой:\u003Cbr\u003EСоздать на клиенте функцию.\u003Cbr\u003EДобавить на клиенте в тело документа скрипт, …\u003Cbr\u003EКоторому указать в SRC нужный адрес на «чужом» домене.\u003Cbr\u003EКогда скрипт загрузится, выполнится ваша клиентская callback-функция и получит в качестве аргумента присланные данные.\u003Cbr\u003E","\u003Cp\u003EС JavaScript – всё!\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003EО ещё некоторых небольших особенностях работы с JavaScript мы поговорим в следующем разделе, посвящённом jQuery.\u003Cbr\u003E","\u003Cp\u003EОсновы JavaScript\u003Cbr\u003E\u003Cp\u003E2014 © EPAM Systems, RD Dep.\u003Cbr\u003E\u003Cp\u003ESvyatoslav Kulikov\u003Cbr\u003ETraining And Education Manager\u003Cbr\[e-mail]\u003Cbr\u003E"],href:"\u002Finformatika\u002Fosnovy-javascript",href_category:"\u002Finformatika",date:1625609074,related:[{id:250248,name:"Распределенные вычисления в Интернет",href:"\u002Finformatika\u002Fraspredelennye-vychisleniya-v-internet",jpg:"jpg\u002F250248"},{id:106063,name:"Информатика. Часть 1. Лекции по Microsoft Excel",href:"\u002Finformatika\u002Finformatika-chast-1-lektsii-po-microsoft",jpg:"jpg\u002F106063"},{id:306087,name:"Комп'ютерні публікації. Створення бюлетеня та буклета",href:"\u002Finformatika\u002Fkompyutern-publkats-stvorennya-byuletenya-ta-bukleta",jpg:"jpg\u002F306087"},{id:97893,name:"Информационные технологии в самолетостроении",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-v-samoletostroenii",jpg:"jpg\u002F97893"},{id:527700,name:"Системы автоматизированного проектирования",href:"\u002Finformatika\u002Fsistemy-avtomatizirovannogo-proektirovaniya-5",jpg:"jpg\u002F527700"},{id:468603,name:"Презентация к уроку Компьютерные презентации. Анимация",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-kompyuternye-prezentatsii-animatsiya",jpg:"jpg\u002F468603"},{id:344581,name:"Paint графикалық редакторы",href:"\u002Finformatika\u002Fpaint-grafikaly-redaktory-1",jpg:"jpg\u002F344581"},{id:456340,name:"Решение задач. Анализ программ с циклами и подпрограммами.",href:"\u002Finformatika\u002Freshenie-zadach-analiz-programm-s-tsiklami",jpg:"jpg\u002F456340"},{id:344969,name:"Компьютер болашақтың қожайыны",href:"\u002Finformatika\u002Fkompyuter-bolashaty-ozhayyny",jpg:"jpg\u002F344969"},{id:353424,name:"Антивирусные программы",href:"\u002Finformatika\u002Fantivirusnye-programmy-7",jpg:"jpg\u002F353424"},{id:378989,name:"Файлы и файловые структуры. (7 класс)",href:"\u002Finformatika\u002Ffayly-i-faylovye-struktury-7-klass",jpg:"jpg\u002F378989"},{id:103061,name:"Microsoft word 2010. Форматирование страниц. Урок 6",href:"\u002Finformatika\u002Fmicrosoft-word-2010-formatirovanie-stranits-urok",jpg:"jpg\u002F103061"},{id:449121,name:"Проектирование Базы данных",href:"\u002Finformatika\u002Fproektirovanie-bazy-dannyh-1",jpg:"jpg\u002F449121"},{id:171389,name:"Информационные технологии в журналистике",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-v-zhurnalistike",jpg:"jpg\u002F171389"},{id:167682,name:"Язык манипулирования данными. Data Manipulation Language, DML",href:"\u002Finformatika\u002Fyazyk-manipulirovaniya-dannymi-data-manipulation-language",jpg:"jpg\u002F167682"},{id:151761,name:"Java-технологии",href:"\u002Finformatika\u002Fjava-tehnologii",jpg:"jpg\u002F151761"},{id:207921,name:"Технологии защиты от несанкционированного доступа",href:"\u002Finformatika\u002Ftehnologii-zashchity-ot-nesanktsionirovannogo-dostupa",jpg:"jpg\u002F207921"},{id:315865,name:"Сеть следующего поколения",href:"\u002Finformatika\u002Fset-sleduyushchego-pokoleniya",jpg:"jpg\u002F315865"},{id:294541,name:"Представление о Power Point",href:"\u002Finformatika\u002Fpredstavlenie-o-power-point-3",jpg:"jpg\u002F294541"},{id:7709,name:"12 бұлтты сақтау орны",href:"\u002Finformatika\u002F12-bltty-satau-orny",jpg:"jpg\u002F7709"},{id:587618,name:"Разработка и создание информационной системы Автоматизация работы АЗС с использованием MS Excel и MS",href:"\u002Finformatika\u002Frazrabotka-i-sozdanie-informatsionnoy-sistemy-avtomatizatsiya",jpg:"jpg\u002F587618"},{id:305762,name:"Штриховое кодирование",href:"\u002Finformatika\u002Fshtrihovoe-kodirovanie-2",jpg:"jpg\u002F305762"},{id:605006,name:"Self-service BI",href:"\u002Finformatika\u002Fself-service-bi",jpg:"jpg\u002F605006"},{id:329131,name:"Продвижение в Instagram. Высокая вовлеченность пользователей",href:"\u002Finformatika\u002Fprodvizhenie-v-instagram-vysokaya-vovlechennost-polzovateley",jpg:"jpg\u002F329131"},{id:467008,name:"Урок по теме Создание кроссворда средствами Microsoft Word",href:"\u002Finformatika\u002Furok-po-teme-sozdanie-krossvorda-sredstvami",jpg:"jpg\u002F467008"},{id:255202,name:"Статический анализатор кода PVS-Studio",href:"\u002Finformatika\u002Fstaticheskiy-analizator-koda-pvs-studio",jpg:"jpg\u002F255202"},{id:578046,name:"Школьный проект: история развития компьюторных игр",href:"\u002Finformatika\u002Fshkolnyy-proekt-istoriya-razvitiya-kompyutornyh-igr",jpg:"jpg\u002F578046"},{id:297110,name:"Безопасность интернет-проектов",href:"\u002Finformatika\u002Fbezopasnost-internet-proektov-1",jpg:"jpg\u002F297110"}],navigation:{next:"\u002Finformatika\u002Foperatsyn-sistemi-keruvannya-vvedennyam-vivedennyam",next_name:"Операційні системи. Керування введенням-виведенням",prev:"\u002Finformatika\u002Fsvyaz-web-stranitsy-s-bazoy-dannyh",prev_name:"Связь web-страницы с базой данных"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Основы JavaScript","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

ОБРАБОТКА ОШИБОЧНЫХ СИТУАЦИЙ И ИСКЛЮЧЕНИЙ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Обработка ошибочных ситуаций
2014 © EPAM Systems, RD Dep.
Для обработки ошибочных ситуаций в JavaScript в отличие от PHP существует, фактически, один универсальный способ – обработка исключений.
Мы здесь рассмотрим примеры обработки и порождения исключений.

Пример обработки исключений с try … catch … finally
2014 © EPAM Systems, RD Dep.
Итак, представим, что мы пытаемся установить значение несуществующего свойства несуществующего объекта.
try
{
non_existing_object.non_existing_property = 5;
}
catch(e)
{
console.log(e);
}
finally
{
console.log('Finally...');
}
ReferenceError: non_existing_object is not defined
Finally...

Виды исключений
2014 © EPAM Systems, RD Dep.
Фактически, это и всё, что нам доступно. Даже т.н. «условные исключения» (реакция на исключения разных типов) пока ещё не стандартизированы. Сам JavaScript порождает исключения следующих типов (см. объект Error: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error):
EvalError – возникает в процессе работы eval().
RangeError – возникает при нарушении диапазонов (массив отрицательной длины, Number.to*() на числах вне допустимого диапазона, не числах и т.д.)
ReferenceError – аозникает при обращении к несуществующему объекту или элементу.
SyntaxError – возникает в процессе анализа синтаксиса аргумента eval().
TypeError – возникает в случае, когда операция выполняется над элементом недопустимого типа.
URIError – возникает, если в функции encodeURI() или decodeURl() переданы неверные параметры.

Порождение собственных исключений
2014 © EPAM Systems, RD Dep.
Мы можем порождать исключения любого из только что перечисленных типов или свои собственные:
function test(x)
{
if (x<0)
{
throw new RangeError('x mut be >= 0'); // Ещё можно так: throw String('x mut be >= 0');
}
if (typeof x == 'string')
{
// В создаваемом объекте вы можете определять ЛЮБЫЕ свойства и методы.
throw {
name: 'Type Error',
level: 'Script stop',
message: 'x must be a number',
htmlMessage: '
No manual available
',
toString: function(){return this.name + ": " + this.message}
}
}
}
try
{
test(-1); // Закомментируйте эту строку, чтобы увидеть реакцию на второй случай.
test('abc');
}
catch (e)
{
console.log(e);
}

ООП В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения об ООП
2014 © EPAM Systems, RD Dep.
ООП – парадигма программирования, в которой основными концепциями являются понятия объектов и классов.
Настоятельно рекомендуется вдумчиво прочитать:
http://javascript.ru/tutorial/object/inheritance
http://javascript.ru/tutorial/object/thiskeyword
См. примеры в папке
03_js_samples_oop

ООП в JavaScript – что не так?
2014 © EPAM Systems, RD Dep.
Итак, в JavaScript реализовано не классическое ООП (с классами), а т.н. «прототипное наследование».
Логика ООП состоит не в создании классов и объектов, а в… создании объектов СРАЗУ, «из ничего».
Объект можно создать даже вот так:
obj = {a: 'Yes', b: 'No', sqr : function(x){return x*x}};
console.log(obj);
console.log(obj.sqr(5));
Object { a="Yes", b="No", sqr=function()}
25

ООП в JavaScript, создание объектов
2014 © EPAM Systems, RD Dep.
Чуть более классический вариант – создание функции (напоминаем, в JavaScript функция – тоже объект) с использованием ключевого слова new.
function Person(name, profession)
{
this.name = name;
this.profession = profession;
this.make_some_work = function(){return 'Done';};
}
var Pupkin = new Person('Pupkin', 'worker');
console.log(Pupkin.make_some_work());
Done

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Как можно понять из предыдущего примера, мы не можем создать «классический класс», не можем использовать модификаторы прав доступа (public, protected, private), не можем создавать «нормальные» статические методы и т.д.
В общем случае это – не проблема, т.к. для простых скриптов нет необходимости в сложных решениях, но мы всё же рассмотрим, как организуется наследование.

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Итак, чтобы «унаследовать» «класс» от объекта (не класс от класса!!!) надо сделать так:
// Объявляем первый "класс".
function Person(name, profession)
{
this.name = name;
this.profession_by_education = profession;
this.make_some_work = function(){return 'Done';};
}
// Объявляем второй "класс".
function Professional(name, profession)
{
this.name = name;
this.profession_in_real_life = profession;
this.make_good_work = function(){return 'Well done!';};
}
// Создаём первый экземпляр.
var pupkin = new Person('Pupkin', 'worker');
// Наследуем второй "класс" от _ЭКЗЕМПЛЯРА_ первого.
Professional.prototype = pupkin;
// Создаём второй экземпляр.
var smith = new Professional('Smith', 'programmer');
console.log(pupkin.make_some_work()); // Done
console.log(smith.make_good_work()); // Well done!
console.log(smith.make_some_work()); // Done
console.log(smith.profession_by_education); // worker
pupkin.profession_by_education = 'writer';
console.log(smith.profession_by_education); // writer
console.log(typeof pupkin); // object
console.log(typeof smith); // object
console.log(pupkin instanceof Person); // true
console.log(smith instanceof Person); // true
console.log(pupkin instanceof Professional); // false
console.log(smith instanceof Professional); // true

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Ещё один способ наследования – с использованием Object.create():
function Creature(name, type)
{
this.name = name;
this.type = type || 'unknown type';
}
Creature.prototype.getName = function()
{
return this.name;
}
Creature.prototype.getType = function()
{
return this.type;
}
function Human(name)
{
Creature.call(this, name, 'human');
this.name = name || 'No name';
}
Human.prototype = Object.create(Creature.prototype);
var pupkin = new Human('Pupkin');
var smith = new Human('Smith');
console.log(pupkin.getName()); // Pupkin
console.log(pupkin.getType()); // human
console.log(smith.getName()); // Smith
console.log(smith.getType()); // human
console.log(smith instanceof Human); // true
console.log(smith instanceof Creature); // true

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Как в JavaScript объявлять конструктор?
A: «Никак». Это просто код внутри «объекта-функции», работающий с this:
function Creature(name, type)
{
this.name = name;
this.type = type || 'unknown type';
}
alien = new Creature('Alien');
console.log(alien);
strange_alien = Creature('Strange alien');
console.log(strange_alien);
console.log(window.name);
Creature { name="Alien", type="unknown type"}
undefined
Strange alien
Без ключевого слова new указатель this будет указывать не на экземпляр «функции-класса», а на глобальный объект window.

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Как защититься от ошибок создания экземпляров без new?
A: Вот так:
function Creature(name, type)
{
// Если this -- не наш «класс»,
// создаём экземпляр «вручную» и возвращаем его.
if (!(this instanceof Creature))
{
return new Creature(name, type);
}
this.name = name;
this.type = type || 'unknown type';
}

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Да что вообще с этим this такое творится?!
A: Если очень кратко, то логика такая:
// Просто вызов функции
test_function('text'); // this == window
// Обращение к конструктору
var x = new TestFunction('text'); // this == новый объект
// Вызов метода
obj.test_function('text'); // this == obj
// Вызов apply или call
test_function.call(obj, params); // this == obj
test_function.apply(obj, params); // this == obj
// Вызов обработчика
// this == span

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: А как всё же сделать «классический ООП» -- со статическими методами и свойствами, константами классов, синглтонами и прочим-разным-привычным?
A: Не надо. Несмотря на то, что ответы на любую часть этого вопроса легко выгугливаются (даже реализация примесей (mixins)), всё же JavaScript используется «очень по-своему», и не надо пытаться «написать PHP/C#/Java на JavaScript».

ООП в JavaScript, создание объектов, наследование
2014 © EPAM Systems, RD Dep.
Q: Я прочитал всё это трижды и всё равно ничего не понял. Что делать?
A: Читать дальше. Вот здесь http://habrahabr.ru/post/131714/ есть ещё одно объяснение про «ООП в JS». Возможно, оно покажется более простым.

Задание для закрепления материала
2014 © EPAM Systems, RD Dep.
Реализуйте с помощью JavaScript классическую задачу «о геометрических фигурах»: есть «абстрактная фигура», от которой наследуется эллипс, прямоугольник и треугольник. От эллипса наследуется круг, от прямоугольника – квадрат, от треугольника – равносторонний и прямоугольный треугольники. Для всех фигур нужно вычислять периметр и площадь. Каждая фигура задаётся координатами вершин или координатами центра и радиусом (радиусами).

РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В JAVASCRIPT
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
Регулярные выражения вы изучали раньше.
JavaScript почти следует логике PCRE в своих регулярных выражениях, так что подавляющее большинство решений из PHP будет работать и в JavaScript.
Чтобы понять нюансы достаточно глубоко, смотрите документацию по JavaScript, а мы рассмотрим основное и вкратце.

Объект RegExp
2014 © EPAM Systems, RD Dep.
Объект RegExp, отвечающий за работу с регулярными выражениями, можно создать так:
// Классический способ:
var re = new RegExp("регулярное_выражение"[, модификаторы]);
// Perl-style способ:
var re = /регулярное_выражение/модификаторы;
// Классический способ:
var re_classic = new RegExp('/[a-z]+\\w/', 'i');
// Perl-style способ:
var re_perl = /[a-z]+\w/i;

Использование объекта RegExp
2014 © EPAM Systems, RD Dep.
У объекта RegExp есть следующие методы:
exec – выполнить поиск и вернуть массив с результатами и дополнительной информацией.
test – проверить на совпадение и вернуть true или false.
У объекта String есть следующие методы по работе с регулярными выражениями:
match – выполнить поиск и вернуть массив с результатами и дополнительной информацией (или null, если ничего не найдено).
search – проверить на совпадение и вернуть индекс совпадения или -1, если совпадения нет.
replace – произвести поиск и замену.
split – разрезать строку на массив подстрок, используя в качестве разделителя регулярное выражение или фиксированную строку.

Использование RegExp.exec()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования RegExp.exec()
var text = 'Это текст с кодами товаров: ABC-1000, def-2000.';
var re = new RegExp('([a-z]{3})-(\\d{4})', 'ig');
var result;
while ((result = re.exec(text)) !== null)
{
console.log(result);
}
["ABC-1000", "ABC", "1000"]
0 "ABC-1000"
1 "ABC"
2 "1000"
index 28
input "Это текст с кодами товаров: ABC-1000, def-2000."
["def-2000", "def", "2000"]
0 "def-2000"
1 "def"
2 "2000"
index 38
input "Это текст с кодами товаров: ABC-1000, def-2000."

Использование RegExp.test()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования RegExp.test()
var text = 'Это текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', '');
var re_5d = new RegExp('\\d{5}', '');
console.log(re_4d.test(text)); // true
console.log(re_5d.test(text)); // false

Использование Sring.match()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.match()
var text = 'Это текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', '');
var re_5d = new RegExp('\\d{5}', '');
console.log(text.match(re_4d)); // См. ниже.
console.log(text.match(re_5d)); // null
["1000"]
0 "1000"
index 32
input "Это текст с кодами товаров: ABC-1000, def-2000."

Использование Sring.search()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.search()
var text = 'Это текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', '');
var re_5d = new RegExp('\\d{5}', '');
console.log(text.search(re_4d)); // 32
console.log(text.search(re_5d)); // -1

Использование Sring.replace()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.replace()
var text = 'Это текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', 'g');
console.log(text.replace(re_4d, '?'));
// Это текст с кодами товаров: ABC-?, def-?.
// Без модификатора g (global) будет
// заменено только первое вхождение.

Использование Sring.split()
2014 © EPAM Systems, RD Dep.
Рассмотрим пример использования Sring.split()
var text = 'Это текст с кодами товаров: ABC-1000, def-2000.';
var re_4d = new RegExp('\\d{4}', 'g');
console.log(text.split(re_4d));
// ["Это текст с кодами товаров: ABC-", ", def-", "."]

Задание для закрепления материала
2014 © EPAM Systems, RD Dep.
Задачи:
1) Определить, содержит ли текст хотя бы одно трёхзначное число.
2) Показать все двухзначные числа, стоящие строго в начале или строго в конце строки.
3) Для дат в формате [Д]Д.[М]М.[ГГ]ГГ выделить день, месяц, год.
4) Выделить в тексте дублирующиеся слова.
5) Определить числа с запятой или пробелом в качестве разделителя разрядов.

ИСПОЛЬЗОВАНИЕ XMLHTTPREQUEST
2014 © EPAM Systems, RD Dep.

Общие сведения
2014 © EPAM Systems, RD Dep.
XMLHttpRequest – специальное решение (фактически, API), позволяющее выполнять т.н. фоновые запросы к веб-серверу, не обновляя всю страницу целиком.
XMLHttpRequest лежит в основе AJAX (Asynchronous Javascript and XML, асинхронный JavaScript и XML) – набора решений, позволяющих строить максимально интерактивные веб-приложения.
См. примеры в папке
04_js_samples_ajax

Как это работает
2014 © EPAM Systems, RD Dep.
В классическом варианте любые изменения страницы, требующие информации с сервера, приводят к повторной загрузке всей страницы целиком:
Сервер
Браузер
Запрос и данные
Новая страница
Запрос и данные
Новая страница
Запрос и данные
Новая страница
Запрос и данные
Новая страница

Как это работает
2014 © EPAM Systems, RD Dep.
В случае использования AJAX картина становится такой:
Сервер
Браузер
Запрос и данные
Новая страница
Запрос и данные
Порция данных
JavaScript
XMLHttpRequest
Запрос и данные
Порция данных
Запрос и данные
Порция данных

Как это реализовать
2014 © EPAM Systems, RD Dep.
Общий принцип прост, и мы его уже изучили (и даже видели пример в главе, посвящённой XML и JSON):
1) Написать код, вызываемый в результате реакции на какое-то событие (как вариант – по таймеру).
2) Создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ.
3) Обработать ответ и внести правки в страницу (или выполнить какие-то иные действия – JavaScript ведь может многое).

Как это реализовать
2014 © EPAM Systems, RD Dep.
С первой и третей частями мы уже хорошо познакомились в соответствующих главах (см. всё, что связано с обработкой событий и управлением DOM).
Потому – сразу переходим ко второй (создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ) и посмотрим, как это сделать максимально универсально и кроссбраузерно.
Итак…

Как это реализовать
2014 © EPAM Systems, RD Dep.
Поскольку реализация XMLHttpRequestзависит от браузера, воспользуемся таким решением:
function getXHR()
{
var xmlhttp = false;
var XMLHttpFactories = [
function () {return new XMLHttpRequest()},
function () {return new ActiveXObject("Msxml2.XMLHTTP")},
function () {return new ActiveXObject("Msxml3.XMLHTTP")},
function () {return new ActiveXObject("Microsoft.XMLHTTP")}];
for (var i=0;i
try
{
xmlhttp = XMLHttpFactories[i]();
}
catch (e)
{
continue;
}
break;
}
return xmlhttp;
}

Как это реализовать
2014 © EPAM Systems, RD Dep.
Получив экземпляр XMLHttpRequest, следует его «настроить»: указать обработчики изменения состояния. Это можно сделать через два свойства:
onreadystatechange – указывается функция, которая будет вызываться при любом изменении состояния (крайне не рекомендуется для синхронных запросов; впрочем, и сами синхронные запросы крайне не рекомендуются);
onload – указывается функция, которая будет вызываться после завершения выполнения запроса.

Как это реализовать
2014 © EPAM Systems, RD Dep.
У XMLHttpRequest есть следующие состояния:
0 (UNSENT) – метод open() ещё не был вызван.
1 (OPENED) – метод send() ещё не был вызван.
2 (HEADERS_RECEIVED) – метод send() был вызван, и уже доступен статус ответа и заголовки ответа.
3 (LOADING) – идёт загрузка, в свойстве responseText содержится часть полученных данных.
4 (DONE) – операция завершена.

Как это реализовать
2014 © EPAM Systems, RD Dep.
Метод
инициализирует запрос. Здесь особо стоит отметить параметр async, который в общем случае должен быть true, т.е. в противном случае (при долгих запросах-ответах) в зависимости от браузера можно получить низкую производительность или вовсе «замирание»/«подвисание» приложения или даже всего браузера.
void open(
DOMString method,
DOMString url,
optional boolean async,
optional DOMString user,
optional DOMString password
);

Как это реализовать
2014 © EPAM Systems, RD Dep.
Метод
отправляет запрос и либо ждёт его завершения (синхронный запрос), либо сразу же завершается (асинхронный запрос).
Из других полезных методов стоит отметить:
abort() – отмена всей операции.
getResponseHeader(String header) – возвращает указанный заголовок ответа или null, если заголовка нет, или он пока не получен.
setRequestHeader(String header, String value) – позволяет указать заголовок HTTP-запроса.
overrideMimeType(String mimetype) – позволяет принудительно указать MIME-тип документа (полезно, например, если нужно будет проанализировать XML-ответ, но сервер не выставил правильный заголовок).
void send();

Как это реализовать
2014 © EPAM Systems, RD Dep.
Много полезной информации можно получить из свойств:
readyState – текущее состояние операции (см. onreadystatechange).
status – код HTTP-ответа сервера (200, 404 и т.д.)
statusText – «текст кода HTTP-ответа», т.е. "OK" и т.д.
response – «тело ответа» (см. документацию, там много нюансов).
responseText – текст ответа сервера (как правило, или используется сам по себе для вставки в страницу, или содержит JSON).
responseXML – XML-вид ответа сервера (при условии, что сервер ДЕЙСТВИТЕЛЬНО передал в ответ XML-данные).
timeout – позволяет устанавливать таймаут в тысячных долях секунд (по умолчанию == 0, т.е. время выполнения запроса не ограничено).
ontimeout – позволяет указать функцию, которая будет вызвана при наступлении таймаута.

Демонстрация на примере
2014 © EPAM Systems, RD Dep.
Теперь соберём всё это вместе и посмотрим, как работает синхронный и асинхронный запрос:
JavaScript: AJAX
<br> function getXHR()<br> {<br> var xmlhttp = false;<br> var XMLHttpFactories = [<br> function () {return new XMLHttpRequest()},<br> function () {return new ActiveXObject("Msxml2.XMLHTTP")},<br> function () {return new ActiveXObject("Msxml3.XMLHTTP")},<br> function () {return new ActiveXObject("Microsoft.XMLHTTP")}];<br>for (var i=0;i<XMLHttpFactories.length;i++) {<br> try<br> {<br> xmlhttp = XMLHttpFactories[i]();<br> }<br> catch (e)<br> {<br> continue;<br> }<br> break;<br> }<br> return xmlhttp;<br> }<br>function sampleSync()<br> {<br> var xhr = getXHR();<br> xhr.onreadystatechange = createWatcher(xhr, 'Sync: ');<br>// ВАЖНО! AJAX-запросы НЕ работают "кросс-доменно"!!!!!<br> // Т.е. нельзя "просто открыть эту HTML'ку в браузере, и всё заработает". Надо открывать её как http://127.0.0.1/ajax.html<br> // При попытке выполнить кросс-доменный запрос, вы будете получать ошибку NS_ERROR_FAILURE, и запрос будет остановлен.<br> // Решений два:<br> // 1) Сервер при передаче HTML, в котором вызывается ваш запрос, должен вернуть заголовок header('Access-Control-Allow-Origin: *'); (это может всё равно не работать).<br> // 2) Создавать т.н. server-side-proxy -- скрипт, который будет перенаправлять ваши запросы на другие сайты и возвращать ответы.<br> xhr.open('get', 'http://127.0.0.1', false);<br> xhr.send();<br> }<br>function sampleAsync()<br> {<br> var xhr = getXHR();<br> xhr.onreadystatechange = createWatcher(xhr, 'Async: ');<br>// ВАЖНО! AJAX-запросы НЕ работают "кросс-доменно"!!!!!<br> // Т.е. нельзя "просто открыть эту HTML'ку в браузере, и всё заработает". Надо открывать её как http://127.0.0.1/ajax.html<br> // При попытке выполнить кросс-доменный запрос, вы будете получать ошибку NS_ERROR_FAILURE, и запрос будет остановлен.<br> // Решений два:<br> // 1) Сервер при передаче HTML, в котором вызывается ваш запрос, должен вернуть заголовок header('Access-Control-Allow-Origin: *'); (это может всё равно не работать).<br> // 2) Создавать т.н. server-side-proxy -- скрипт, который будет перенаправлять ваши запросы на другие сайты и возвращать ответы.<br> xhr.open('get', 'http://127.0.0.1', true);<br> xhr.send();<br> }<br>function createWatcher(xhr, msg)<br> {<br> return function()<br> {<br> document.getElementById('log').innerHTML += msg + xhr.readyState + '<br>';<br> if (xhr.readyState == 4)<br> {<br> var log = document.getElementById('log');<br> log.innerHTML += msg + 'Finished' + '<br>';<br> log.innerHTML += msg + 'AllResponseHeaders: ' + xhr.getAllResponseHeaders() + '<br>';<br> log.innerHTML += msg + 'Status: ' + xhr.status + '<br>';<br> log.innerHTML += msg + 'Status: ' + xhr.statusText + '<br>';<br> }<br> } <br> }<br>
Синхронный запрос
Асинхронный запрос

КРОССДОМЕННЫЕ ЗАПРОСЫ
2014 © EPAM Systems, RD Dep.

Суть проблемы
2014 © EPAM Systems, RD Dep.
Браузеры по соображениям безопасности ограничивают возможности скриптов по взаимодействию с другими доменами, т.е. учитывают комбинацию схемы, имени хоста и порта для того, чтобы определить, откуда был загружен скрипт, и разрешить ему выполнять только запросы по тому же адресу.
Почитать подробнее:
http://en.wikipedia.org/wiki/Same-origin_policy

Решение проблемы
2014 © EPAM Systems, RD Dep.
Однако иногда есть объективная необходимость выполнять такие (т.н. «кроссдоменные») запросы. Сделать это помогает…
JSONP (JSON with padding) – расширение формата JSON, предоставляющее возможность запросить данные с «чужого домена».
Почитать подробнее:
http://en.wikipedia.org/wiki/JSONP

Как это работает
2014 © EPAM Systems, RD Dep.
Сначала рассмотрим серверную часть. Здесь важны две вещи:
1. Верные заголовки HTTP-ответа.
2. Правильное формирование контента.
Рассмотрим на примере выполнения кроссдоменного запроса (будем посылать запрос на виртуальную машину)…
См. примеры в папке
05_js_samples_jsonp

Как это работает
2014 © EPAM Systems, RD Dep.
Серверная часть:
if (isset($_GET['callback']))
{
// Just for security reasons.
$callback = preg_replace('/[^a-z0-9$_]/si', '', $_GET['callback']);
// Set headers.
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/javascript;charset=UTF-8');
// Collect some useful data.
$response = array('a' => '999');
// Create proper JSONP format response and send it.
$response = $callback.'('.json_encode($response).')';
echo $response;
}
?>

Как это работает
2014 © EPAM Systems, RD Dep.
На клиентской части нужно сделать две вещи:
1. Подготовить функцию, имя которой передано на сервер в качестве параметра запроса.
2. Динамически создать элемент
.<br>Идея состоит в том, что вы не ВЫПОЛНЯЕТЕ запрос к «чужому домену», а создаёте запрос, который загружает «скрипт» (JSON-данные, обёрнутые в вызов функции) с нужного вам домена. Как только этот «скрипт» загрузится, функция будет вызвана. А у вас в документе она уже есть – и всё.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide246" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/7597/slide-245.jpg" target="_blank" rel="noopener">Слайд 246</a><h3 class="slides-content text-center font-bold"><div><p>Как это работает<br><p>2014 © EPAM Systems, RD Dep.<br><p>Клиентская часть:<br><p><!DOCTYPE html><br> <html><br> <head><br> <meta</div></h3></h3><!----><!----><div class="slides-content">charset="UTF-8"><br> <title>JavaScript: JSONP</title><br> <script><br>function getCrossDomainData()<br> {<br> var script = document.createElement("script");<br> script.src = 'http://192.168.56.101/jsonp.php?callback=jsonptest';<br> document.body.appendChild(script);<br> }<br>function jsonptest(data)<br> {<br> console.log(data);<br> document.getElementById('log').innerHTML += data.a;<br> }<br>
Запросить занные

Как это работает
2014 © EPAM Systems, RD Dep.
Итак, важное и ещё раз:
Это – НЕ XMLHttpRequest! Да, это динамическая подгрузка данных, но она работает БЕЗ XMLHttpRequest.
Алгоритм такой:
Создать на клиенте функцию.
Добавить на клиенте в тело документа скрипт, …
Которому указать в SRC нужный адрес на «чужом» домене.
Когда скрипт загрузится, выполнится ваша клиентская callback-функция и получит в качестве аргумента присланные данные.

С JavaScript – всё!
2014 © EPAM Systems, RD Dep.
О ещё некоторых небольших особенностях работы с JavaScript мы поговорим в следующем разделе, посвящённом jQuery.