1. Основы JavaScript
1.1. Переменные
1.1.1. var message;
1.1.2. var message; message = 'Hello'; // сохраним в переменной строку
1.1.3. var message; message = 'Hello!'; alert( message ); // выведет содержимое переменной
1.1.4. var message = 'Hello!';
1.1.5. var user = 'John', age = 25, message = 'Hello';
1.1.6. var message; message = 'Hello!'; message = 'World!'; // заменили значение alert( message );
1.1.7. var hello = 'Hello world!'; var message; // скопировали значение message = hello; alert( hello ); // Hello world! alert( message ); // Hello world!
1.1.8. Имена переменных
1.1.8.1. var myName; var test123;
1.1.8.2. var $ = 1; // объявили переменную с именем '$' var _ = 2; // переменная с именем '_' alert( $ + _ ); // 3
1.1.9. Правильный выбор имени переменной
1.1.9.1. Никакого транслита. Только английский
1.1.9.2. Использовать короткие имена только для переменных «местного значения»
1.1.9.3. Переменные из нескольких слов пишутся вместеВотТак
1.1.9.3.1. var borderLeftWidth;
1.1.9.3.2. var border_left_width;
1.1.9.4. Имя переменной должно максимально чётко соответствовать хранимым в ней данным
1.1.9.5. «Лишняя» переменная – добро, а не зло.
1.1.10. Константы
1.1.10.1. var COLOR_RED = "#F00"; var COLOR_GREEN = "#0F0"; var COLOR_BLUE = "#00F"; var COLOR_ORANGE = "#FF7F00"; var color = COLOR_ORANGE; alert( color ); // #FF7F00
1.2. Шесть типов данных, typeof
1.2.1. Число «number»
1.2.1.1. var n = 123; n = 12.345;
1.2.1.2. alert( "нечисло" * 2 ); // NaN, ошибка
1.2.2. Строка «string»
1.2.2.1. var str = "Мама мыла раму"; str = 'Одинарные кавычки тоже подойдут';
1.2.3. Булевый (логический) тип «boolean»
1.2.3.1. var checked = true; // поле формы помечено галочкой checked = false; // поле формы не содержит галочки
1.2.4. Специальное значение «null»
1.2.4.1. var age = null;
1.2.5. Специальное значение «undefined»
1.2.5.1. var x; alert( x ); // выведет "undefined"
1.2.5.2. var x = 123; x = undefined; alert( x ); // "undefined"
1.2.6. Объекты «object»
1.2.6.1. var user = { name: "Вася" };
1.2.7. Оператор typeof
1.2.7.1. typeof undefined // "undefined" typeof 0 // "number" typeof true // "boolean" typeof "foo" // "string" typeof {} // "object" typeof null // "object" (1) typeof function(){} // "function" (2)
1.3. Основные операторы
1.3.1. Термины: «унарный», «бинарный», «операнд»
1.3.1.1. Операнд
1.3.1.2. Унарный
1.3.1.2.1. var x = 1; x = -x; alert( x ); // -1, применили унарный минус
1.3.1.3. Бинарный
1.3.1.3.1. var x = 1, y = 3; alert( y - x ); // 2, бинарный минус
1.3.2. Сложение строк, бинарный +
1.3.2.1. var a = "моя" + "строка"; alert( a ); // моястрока
1.3.2.2. alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21"
1.3.2.3. alert( 2 - '1' ); // 1 alert( 6 / '2' ); // 3
1.3.3. Преобразование к числу, унарный плюс +
1.3.3.1. alert( +1 ); // 1 alert( +(1 - 2) ); // -1
1.3.3.2. var apples = "2"; var oranges = "3"; alert( apples + oranges ); // "23", так как бинарный плюс складывает строки
1.3.3.3. var apples = "2"; var oranges = "3"; alert( +apples + +oranges ); // 5, число, оба операнда предварительно преобразованы в числа
1.3.4. Приоритет
1.3.4.1. Приоритет Название Обозначение … … … 15 унарный плюс + 15 унарный минус - 14 умножение * 14 деление / 13 сложение + 13 вычитание - … … … 3 присваивание = … … …
1.3.5. Присваивание
1.3.5.1. var x = 2 * 2 + 1; alert( x ); // 5
1.3.5.2. var a, b, c; a = b = c = 2 + 2; alert( a ); // 4 alert( b ); // 4 alert( c ); // 4
1.3.5.3. var a = 1; var b = 2; var c = 3 - (a = b + 1); alert( a ); // 3 alert( c ); // 0
1.3.6. Взятие остатка %
1.3.6.1. alert( 5 % 2 ); // 1, остаток от деления 5 на 2 alert( 8 % 3 ); // 2, остаток от деления 8 на 3 alert( 6 % 3 ); // 0, остаток от деления 6 на 3
1.3.7. Инкремент/декремент: ++, --
1.3.7.1. var i = 2; i++; // более короткая запись для i = i + 1. alert(i); // 3
1.3.7.2. var i = 2; i--; // более короткая запись для i = i - 1. alert(i); // 1
1.3.7.3. var i = 1; var a = ++i; // (*) alert(a); // 2
1.3.7.4. Постфиксная форма i++ отличается от префиксной ++i тем, что возвращает старое значение, бывшее до увеличения.
1.3.7.4.1. var i = 1; var a = i++; // (*) alert(a); // 1
1.3.7.4.2. var i = 0; i++; ++i; alert( i ); // 2
1.3.7.4.3. var i = 0; alert( ++i ); // 1
1.3.8. Побитовые операторы
1.3.8.1. AND(и) ( & ) OR(или) ( | ) XOR(побитовое исключающее или) ( ^ ) NOT(не) ( ~ ) LEFT SHIFT(левый сдвиг) ( << ) RIGHT SHIFT(правый сдвиг) ( >> ) ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( >>> )
1.3.9. Сокращённая арифметика с присваиванием
1.3.9.1. var n = 2; n = n + 5; n = n * 2;
1.3.9.2. var n = 2; n += 5; // теперь n=7 (работает как n = n + 5) n *= 2; // теперь n=14 (работает как n = n * 2) alert( n ); // 14
1.3.9.3. var n = 2; n *= 3 + 5; alert( n ); // 16 (n = 2 * 8)
1.3.10. Оператор запятая
1.3.10.1. var a = (5, 6); alert( a );
1.3.10.2. // три операции в одной строке for (a = 1, b = 3, c = a*b; a < 10; a++) {
1.4. Операторы сравнения и логические значения
1.4.1. Операторы сравнения
1.4.1.1. Больше/меньше: a > b, a < b.
1.4.1.2. Больше/меньше или равно: a >= b, a <= b.
1.4.1.3. Равно a == b. Для сравнения используется два символа равенства '='. Один символ a = b означал бы присваивание.
1.4.1.4. «Не равно». В математике он пишется как ≠, в JavaScript – знак равенства с восклицательным знаком перед ним !=.
1.4.2. Логические значения
1.4.2.1. true – имеет смысл «да», «верно», «истина».
1.4.2.2. false – означает «нет», «неверно», «ложь».
1.4.2.3. alert( 2 > 1 ); // true, верно alert( 2 == 1 ); // false, неверно alert( 2 != 1 ); // true
1.4.2.4. var a = true; // присваивать явно var b = 3 > 4; // или как результат сравнения alert( b ); // false alert( a == b ); // (true == false) неверно, выведет false
1.4.3. Сравнение строк
1.4.3.1. alert( 'Б' > 'А' ); // true
1.4.3.2. alert( 'а' > 'Я' ); // true, строчные буквы больше прописных
1.4.3.3. alert( 'Банан' > 'Аят' );
1.4.3.4. alert( 'Вася' > 'Ваня' ); // true, т.к. 'с' > 'н'
1.4.3.5. alert( 'Привет' > 'Прив' ); // true, так как 'е' больше чем "ничего".
1.4.3.6. alert( "2" > "14" ); // true, неверно, ведь 2 не больше 14
1.4.3.7. alert( +"2" > +"14" ); // false, теперь правильно
1.4.4. Сравнение разных типов
1.4.4.1. alert( '2' > 1 ); // true, сравнивается как 2 > 1 alert( '01' == 1 ); // true, сравнивается как 1 == 1 alert( false == 0 ); // true, false становится числом 0 alert( true == 1 ); // true, так как true становится числом 1.
1.4.5. Строгое равенство
1.4.5.1. alert( 0 == false ); // true
1.4.5.2. alert( '' == false ); // true
1.4.5.3. alert( 0 === false ); // false, т.к. типы различны
1.5. Условные операторы: if, '?'
1.5.1. Оператор if
1.5.1.1. var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ''); if (year != 2011) alert( 'А вот и неправильно!' );
1.5.1.2. if (year != 2011) { alert( 'А вот..' ); alert( '..и неправильно!' ); }
1.5.1.3. Преобразование к логическому типу
1.5.1.3.1. if (0) { // 0 преобразуется к false ... }
1.5.1.3.2. if (1) { // 1 преобразуется к true ... }
1.5.1.4. Неверное условие, else
1.5.1.4.1. var year = prompt('Введите год появления стандарта ECMA-262 5.1', ''); if (year == 2011) { alert( 'Да вы знаток!' ); } else { alert( 'А вот и неправильно!' ); // любое значение, кроме 2011 }
1.5.1.5. Несколько условий, else if
1.5.1.5.1. var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', ''); if (year < 2011) { alert( 'Это слишком рано..' ); } else if (year > 2011) { alert( 'Это поздновато..' ); } else { alert( 'Да, точно в этом году!' ); }
1.5.2. Оператор вопросительный знак „?“
1.5.2.1. условие ? значение1 : значение2
1.5.2.2. access = (age > 14) ? true : false;
1.5.2.3. var age = prompt('возраст?', 18); var message = (age < 3) ? 'Здравствуй, малыш!' : (age < 18) ? 'Привет!' : (age < 100) ? 'Здравствуйте!' : 'Какой необычный возраст!'; alert( message );
1.5.2.3.1. if (age < 3) { message = 'Здравствуй, малыш!'; } else if (age < 18) { message = 'Привет!'; } else if (age < 100) { message = 'Здравствуйте!'; } else { message = 'Какой необычный возраст!'; }
1.6. Взаимодействие с пользователем: alert, prompt, confirm
1.6.1. alert
1.6.1.1. alert(сообщение)
1.6.1.2. alert( "Привет" );
1.6.2. prompt
1.6.2.1. result = prompt(title, default);
1.6.2.2. var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')
1.6.2.3. var test = prompt("Тест");
1.6.2.3.1. var test = prompt("Тест", ''); // <-- так лучше
1.6.3. confirm
1.6.3.1. result = confirm(question);
1.6.3.2. var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );
1.7. Логические операторы
1.7.1. || (ИЛИ)
1.7.1.1. result = a || b;
1.7.1.2. alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false
1.7.1.3. Обычно оператор ИЛИ используется в if, чтобы проверить, выполняется ли хотя бы одно из условий, например: var hour = 9; if (hour < 10 || hour > 18) { alert( 'Офис до 10 или после 18 закрыт' ); }
1.7.1.4. var hour = 12, isWeekend = true; if (hour < 10 || hour > 18 || isWeekend) { alert( 'Офис до 10 или после 18 или в выходной закрыт' ); }
1.7.2. && (И)
1.7.2.1. result = a && b;
1.7.2.2. alert( true && true ); // true alert( false && true ); // false alert( true && false ); // false alert( false && false ); // false
1.7.2.3. Пример с if: var hour = 12, minute = 30; if (hour == 12 && minute == 30) { alert( 'Время 12:30' ); }
1.7.3. ! (НЕ)
1.7.3.1. var result = !value;
1.7.3.2. alert( !true ); // false alert( !0 ); // true
1.7.3.3. alert( !!"строка" ); // true alert( !!null ); // false
1.8. Преобразование типов для примитивов
1.8.1. Строковое преобразование
1.8.1.1. var a = true; alert( a ); // "true"
1.8.1.2. Можно также осуществить преобразование явным вызовом String(val): alert( String(null) === "null" ); // true
1.8.1.3. alert( true + "test" ); // "truetest" alert( "123" + undefined ); // "123undefined"
1.8.2. Численное преобразование
1.8.2.1. var a = +"123"; // 123 var a = Number("123"); // 123, тот же эффект
1.8.2.2. Значение Преобразуется в... undefined NaN null 0 true / false 1 / 0 Строка Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то 0, иначе из непустой строки "считывается" число, при ошибке результат NaN.
1.8.2.3. // после обрезания пробельных символов останется "123" alert( +" \n 123 \n \n" ); // 123
1.8.2.4. Логические значения: alert( +true ); // 1 alert( +false ); // 0
1.8.2.5. Сравнение разных типов – значит численное преобразование: alert( "\n0 " == 0 ); // true
1.8.2.6. alert( null >= 0 ); // true, т.к. null преобразуется к 0 alert( null > 0 ); // false (не больше), т.к. null преобразуется к 0 alert( null == 0 ); // false (и не равен!), т.к. == рассматривает null особо.
1.8.3. Логическое преобразование
1.8.3.1. Все значения, которые интуитивно «пусты», становятся false. Их несколько: 0, пустая строка, null, undefined и NaN.
1.8.3.2. Остальное, в том числе и любые объекты – true.
1.8.3.3. Значение Преобразуется в... undefined, null false Числа Все true, кроме 0, NaN -- false. Строки Все true, кроме пустой строки "" -- false Объекты Всегда true
1.9. Циклы while, for
1.9.1. Цикл while
1.9.1.1. while (условие) { // код, тело цикла }
1.9.1.2. var i = 0; while (i < 3) { alert( i ); i++; }
1.9.1.3. var i = 3; while (i) { // при i, равном 0, значение в скобках будет false и цикл остановится alert( i ); i--; }
1.9.2. Цикл do…while
1.9.2.1. do { // тело цикла } while (условие);
1.9.2.2. var i = 0; do { alert( i ); i++; } while (i < 3);
1.9.3. Цикл for
1.9.3.1. for (начало; условие; шаг) { // ... тело цикла ... }
1.9.3.2. var i; for (i = 0; i < 3; i++) { alert( i ); }
1.9.3.2.1. Начало: i=0 выполняется один-единственный раз, при заходе в цикл. Условие: i<3 проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход. Тело: alert(i). Шаг: i++ выполняется после тела на каждой итерации, но перед проверкой условия. Идти на шаг 2.
1.9.3.2.2. начало → (если условие → тело → шаг) → (если условие → тело → шаг) → … и так далее, пока верно условие
1.9.3.3. for (var i = 0; i < 3; i++) { alert(i); // 0, 1, 2 }
1.9.3.4. Пропуск частей for
1.9.3.4.1. var i = 0; for (; i < 3; i++) { alert( i ); // 0, 1, 2 }
1.9.3.4.2. var i = 0; for (; i < 3;) { alert( i ); // цикл превратился в аналог while (i<3) }
1.9.3.4.3. for (;;) { // будет выполняться вечно }
1.9.3.4.4. При этом сами точки с запятой ; обязательно должны присутствовать, иначе будет ошибка синтаксиса.
1.9.4. Прерывание цикла: break
1.9.4.1. var sum = 0; while (true) { var value = +prompt("Введите число", ''); if (!value) break; // (*) sum += value; } alert( 'Сумма: ' + sum );
1.9.5. Следующая итерация: continue
1.9.5.1. for (var i = 0; i < 10; i++) { if (i % 2 == 0) continue; alert(i); }
1.9.6. Метки для break/continue
1.9.6.1. outer: for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { var input = prompt('Значение в координатах '+i+','+j, ''); // если отмена ввода или пустая строка - // завершить оба цикла if (!input) break outer; // (*) } } alert('Готово!');
1.9.6.2. Метка имеет вид "имя:", имя должно быть уникальным. Она ставится перед циклом, вот так: outer: for (var i = 0; i < 3; i++) { ... }
1.9.6.3. Можно также выносить её на отдельную строку: outer: for (var i = 0; i < 3; i++) { ... }
1.10. Конструкция switch
1.10.1. Синтаксис
1.10.1.1. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] }
1.10.2. Пример работы
1.10.2.1. var a = 2 + 2; switch (a) { case 3: alert( 'Маловато' ); break; case 4: alert( 'В точку!' ); break; case 5: alert( 'Перебор' ); break; default: alert( 'Я таких значений не знаю' ); }
1.10.2.2. Пример без break:
1.10.2.2.1. var a = 2 + 2; switch (a) { case 3: alert( 'Маловато' ); case 4: alert( 'В точку!' ); case 5: alert( 'Перебор' ); default: alert( 'Я таких значений не знаю' ); }
1.10.2.3. var a = 1; var b = 0; switch (a) { case b + 1: alert( 1 ); break; default: alert('нет-нет, выполнится вариант выше') }
1.10.3. Группировка case
1.10.3.1. var a = 2+2; switch (a) { case 4: alert('Верно!'); break; case 3: // (*) case 5: // (**) alert('Неверно!'); alert('Немного ошиблись, бывает.'); break; default: alert('Странный результат, очень странный'); }
1.10.4. Тип имеет значение
1.10.4.1. var arg = prompt("Введите arg?") switch (arg) { case '0': case '1': alert( 'Один или ноль' ); case '2': alert( 'Два' ); break; case 3: alert( 'Никогда не выполнится' ); default: alert('Неизвестное значение: ' + arg) }
1.11. Функции
1.11.1. Объявление
1.11.1.1. function showMessage() { alert( 'Привет всем присутствующим!' ); }
1.11.1.2. function showMessage() { alert( 'Привет всем присутствующим!' ); } showMessage(); showMessage();
1.11.2. Локальные переменные
1.11.2.1. function showMessage() { var message = 'Привет, я - Вася!'; // локальная переменная alert( message ); } showMessage(); // 'Привет, я - Вася!' alert( message ); // <-- будет ошибка, т.к. переменная видна только внутри
1.11.2.2. function count() { // переменные i,j не будут уничтожены по окончании цикла for (var i = 0; i < 3; i++) { var j = i * 2; } alert( i ); // i=3, последнее значение i, при нём цикл перестал работать alert( j ); // j=4, последнее значение j, которое вычислил цикл }
1.11.2.3. Неважно, где именно в функции и сколько раз объявляется переменная. Любое объявление срабатывает один раз и распространяется на всю функцию.
1.11.3. Внешние переменные
1.11.3.1. var userName = 'Вася'; function showMessage() { var message = 'Привет, я ' + userName; alert(message); } showMessage(); // Привет, я Вася
1.11.3.2. var userName = 'Вася'; function showMessage() { userName = 'Петя'; // (1) присвоение во внешнюю переменную var message = 'Привет, я ' + userName; alert( message ); } showMessage(); alert( userName ); // Петя, значение внешней переменной изменено функцией
1.11.3.3. Конечно, если бы внутри функции, в строке (1), была бы объявлена своя локальная переменная var userName, то все обращения использовали бы её, и внешняя переменная осталась бы неизменной.
1.11.4. Параметры
1.11.4.1. function showMessage(from, text) { // параметры from, text from = "** " + from + " **"; // здесь может быть сложный код оформления alert(from + ': ' + text); } showMessage('Маша', 'Привет!'); // ** Маша **: Привет! showMessage('Маша', 'Как дела?'); // ** Маша **: Привет!
1.11.4.2. function showMessage(from, text) { from = '**' + from + '**'; // меняем локальную переменную from alert( from + ': ' + text ); } var from = "Маша"; showMessage(from, "Привет"); alert( from ); // старое значение from без изменений, в функции была изменена копия
1.11.5. Аргументы по умолчанию
1.11.5.1. showMessage("Маша");
1.11.5.2. function showMessage(from, text) { if (text === undefined) { text = 'текст не передан'; } alert( from + ": " + text ); } showMessage("Маша", "Привет!"); // Маша: Привет! showMessage("Маша"); // Маша: текст не передан
1.11.5.3. function showMessage(from, text) { text = text || 'текст не передан'; ... }
1.11.5.4. Если аргументов передано больше, чем надо, например showMessage("Маша", "привет", 1, 2, 3), то ошибки не будет. Но, чтобы получить такие «лишние» аргументы, нужно будет прочитать их из специального объекта arguments, который мы рассмотрим в главе Псевдомассив аргументов "arguments".
1.11.6. return
1.11.6.1. function calcD(a, b, c) { return b*b - 4*a*c; } var test = calcD(-4, 2, 1); alert(test); // 20
1.11.6.2. function checkAge(age) { if (age > 18) { return true; } else { return confirm('Родители разрешили?'); } } var age = prompt('Ваш возраст?'); if (checkAge(age)) { alert( 'Доступ разрешен' ); } else { alert( 'В доступе отказано' ); }
1.11.6.3. function showMovie(age) { if (!checkAge(age)) { return; } alert( "Фильм не для всех" ); // (*) // ... }
1.11.6.4. Значение функции без return и с пустым return
1.11.6.4.1. function doNothing() { /* пусто */ } alert( doNothing() ); // undefined
1.11.6.4.2. function doNothing() { return; } alert( doNothing() === undefined ); // true
1.11.7. Выбор имени функции
1.11.7.1. showMessage(..) // префикс show, "показать" сообщение
1.11.7.2. getAge(..) // get, "получает" возраст calcD(..) // calc, "вычисляет" дискриминант createForm(..) // create, "создает" форму checkPermission(..) // check, "проверяет" разрешение, возвращает true/false
1.11.7.3. Одна функция – одно действие
1.11.7.4. Сверхкороткие имена функций
1.12. Функциональные выражения
1.12.1. function sayHi() { alert( "Привет" ); } alert( sayHi ); // выведет код функции
1.12.2. Функцию можно скопировать в другую переменную:
1.12.2.1. function sayHi() { // (1) alert( "Привет" ); } var func = sayHi; // (2) func(); // Привет // (3) sayHi = null; sayHi(); // ошибка (4)
1.12.3. Объявление Function Expression
1.12.3.1. var f = function(параметры) { // тело функции };
1.12.3.2. var sayHi = function(person) { alert( "Привет, " + person ); }; sayHi('Вася');