IT1414: Программирование на языке JavaScript

Электронная версия курса

2019 © Бизнес-информатика

Сгенерировано для пользователя Фандорин Эраст Петрович

Выходные сведения

Этот документ является автоматически сгенерированной печатной версией электронного курса Бизнес-информатика

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

https://it.rfei.ru/course/~4EfD

Данная электронная книга сгенерирована системой EduTerra.pro в соответствии со спецификацией EPUB 3.0.1.

Получив данную печатную версию, Вы со своей стороны обязуетесь:

использовать предоставленные Вам ресурсы только лично;

не обращаться к помощи третьих лиц или технических средств для улучшения результатов взаимодействий;

использовать ресурсы системы исключительно в образовательных целях;

соблюдать требования действующего законодательства Вашей страны, в частности, в области защиты авторского права.

Документ автоматически сгенерирован 03 сентября 2019, 10:18:22

Подготовлено для двусторонней печати на бумаге формата A4.

Информация о курсе

Предлагаемый Вашему вниманию учебный курс поможет Вам освоить эффективные техники программирования на мультипарадигмальном языке JavaScript.

В отличие от большинства учебных материалов по JavaScript, которые Вы можете найти в Интернете или на книжных полках, данный курс не пытается научить Вас взаимодействию с программной средой браузера. Поскольку в настоящее время JavaScript широко используется вне браузера, возникает потребность в глубоком изучении самого языка отдельно от программных интерфейсов веб-браузеров (Web API interfaces).

К примеру, глобальные объекты window и document недоступны в серверном окружении (например, при разработке приложений на Node.js или в консоли MongoDB).

Исходя из этих соображений все практические упражнения данного курса можно выполнять сразу в двух средах исполнения: в консоли веб-браузера и в REPL-консоли Node.js, доступ к которой осуществляется через интерфейс командной строки.

Исходный уровень знаний

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

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

Значительно поможет знание любого другого языка программирования: Вы сможете проводить параллели между изучаемым предметом и тем, что уже знаете. Подобная аналитическая работа не только ускоряет освоение материала, но и позволяет подходить к обучению прагматично: Вы сможете пополнять свой арсенал теми решениями, которые больше импонируют Вашему стилю мышления или лучше подходят для решаемых Вами задач.

Формат

Практически весь учебный материал оформлен в виде слайдов с короткими тезисами. Такая форма изложения помогает избавиться от связующих лингвистических конструкций, выделяя только основные мысли и соответствующие им практические аспекты — фрагменты кода, сценарии и вопросы для самоподготовки.

Структура

Учебный курс состоит из модулей, которые содержат группы слайдов и промежуточные тесты для закрепления знаний.

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

Весь материал рекомендуется изучать последовательно, выполняя все методические указания слайдов, отвечая на вопросы для самоподготовки и выполняя тестовые задания.

Быстрый старт

Выполнив этот модуль, Вы:

научитесь использовать консоль веб-браузера для выполнения кода JavaScript;

научитесь выполнять программы на JavaScript в терминале с помощью среды исполнения Node.js;

освоите основные синтаксические правила языка JavaScript;

напишете несколько простых программ.

Веб-консоль

Веб-консоль

Попробуйте JavaScript прямо сейчас!

Веб-консоль — это интерактивный интерпретатор JavaScript, который есть в каждом браузере.

Консоль позволяет мгновенно выполнить JavaScript-код и получить результат.

Доступ к консоли

Google Chrome

Windows: Ctrl+Shift+J

Mac: Cmd+Alt+J

Firefox

Windows: Ctrl+Shift+K

Mac: Cmd+Alt+K

Safari

Включите режим разработчика: Preferences — Advanced — Show Develop in menu bar

Нажмите Cmd+Alt+C

Выполнение команд

Выполнение команд

Наберите код:

1 + 1

Нажмите Enter

Результат выполнения отображается на следующей строке.

2

История команд

Используйте и , чтобы найти введенные ранее команды.

Вывод в консоль

Попробуйте:

console.log('Hello World!');

Полезно для вывода отладочной информации и промежуточных результатов.

Форматированный вывод

Попробуйте:

console.log('Hello %s and %s', 'World', 'Everybody');

%s в строке форматирования заменяются на остальные аргументы (по порядку)

Экспериментируйте!

Поприветствуйте друга или подругу.

Посчитайте сумму чисел от 1 до 100 по формуле:

Sn=n⋅a1+an2

Выполняйте фрагменты кода по ходу работы с курсом.

JavaScript в терминале

JavaScript в терминале

Использование Node.js для выполнения программ в командной строке

Node.js

Node.js — это платформа, основанная на JavaScript V8, для создания серверных приложений.

Установка Node.js

Зайдите на сайт nodejs.org

Скачайте и установите пакет для Вашей операционной системы.

Запустите интерпретатор в командной строке:

node

Интерактивный интерпретатор

Команда node запускает интерактивный интерпретатор, очень похожий на веб-консоль.

Выход из интерпретатора: Ctrl+C

Выполнение программ

Создайте файл hello.js:

console.log('Hello!');
console.log('This is a simple JavaScript program.');

Запустите её:

node ./hello.js

Применение Node.js

Обучение: удобно выполнять программы (в отличие от веб-консоли)

Создание серверных приложений (сайты, веб-сервисы и т.д.)

Создание утилит командной строки

Основы синтаксиса

Основные синтаксические правила

Комментарии

Строчные комментарии

Текст после // игнорируется до конца строки:

// Этот текст игнорируется
console.log("Hello world!");

Строчные комментарии

Здесь комментарии добавлены в конце каждой строки:

var a = 2 + 3  // 5
  , b = 3 - 7  // -4
  , c = 0 / 0; // NaN

Блочные комментарии

/* Весь этот текст будет пропущен средой исполнения.
Это удобно для больших объяснений по тексту программы.
*/

Операторы

(англ. statements)

Операторы

Любая программа — это набор операторов (инструкций).

Операторы выполняются последовательно друг за другом.

Операторы отделяются друг от друга точкой с запятой ;

Операторы бывают простыми и составными.

Пробелы

Лишние пробелы в операторах игнорируются:

// Не ошибка:
console    .  log ( 'Hello!'  )   ;

Использование пробелов в операторах регламентируется стандартом оформления кода (code style).

Перенос строк

Длинные операторы можно переносить, оставляя отступ на следующей строке:

var someVeryVeryLongName =
  'This name is some long text';

Обычно переносят код после символов (, , и =.

Перенос строк

Точку при вызовах переносят на следующую строку:

console
  .log('Hi!')

Отступы

Отступы улучшают визуальное восприятие блоков.

function mark(percentage) {
  if (percentage >= 95) {
    return '5+';
  } else if (percentage >= 90) {
    return '5';
  } else if (percentage >= 80) {
    return '4';
  } else if (percentage >= 70) {
    return '3';
  } else return '2';
}

Стандартная единица отступа — два пробела.

Переменные

Объявление и присваивание

var name;        // объявление
name = 'Alice';  // присваивание

Теперь переменная name содержит строку Alice:

console.log(name);  // Alice

Объявление

Ключевое слово var объявляет идентификатор (имя переменной).

Идентификаторы можно использовать только после объявления:

console.log(someUndefinedName);

ReferenceError: someUndefinedName is not defined

Присваивание

Значение объявленной переменной можно изменить:

name = 'Bob';

Обычно объявление новой переменной сочетают с присваиванием:

var name = 'Alice';

Простые операции

«Склеивание» строк

var greeting = 'Hello' + ' ' + 'World';
console.log(greeting);

Hello World

Программисты предпочитают термин конкатенация.

Конкатенация с переменной

var greeting = 'Hello';
greeting += ' World!';
// это то же самое, что и
// greeting = greeting + ' World!';
console.log(greeting);

Hello World!

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

// Сложение
2 + 2         // 4

// Вычитание
10 - 8        // 2

// Умножение
24 * 4        // 96

// Деление
60 / 5        // 12

// Остаток от деления
60 % 7        // 4

Сравнение чисел

Как в математике:

1 > 2   // больше
3 < 4   // меньше
5 >= 6  // больше или равно
7 <= 8  // меньше или равно
9 == 9  // равно
9 != 10 // не равно

Сравнение

Операции сравнения возвращают логическое значение типа Boolean.

true — истина (например, 2 == 2)

false — ложь (например, 2 != 2)

Не путать!

Один знак = — присваивание, два знака == — сравнение.

a = 1;    // в переменной a теперь единица
a == 1;   // сравнение с единицей (результат true)

Упражнения

Вычислите 6! по формуле

n!=1⋅2⋅…⋅n

Посчитайте количество часов, минут и секунд в одном невисокосном году.

Проверьте ответы

720

8760 часов, 525600 минут и 31536000 секунд

Управляющие структуры

Управляющие структуры

Условный переход, ветвление и циклы

Без управляющих структур невозможна автоматизация решения задач.

if

Оператор условного перехода (от англ. если)

Условный переход

var n = /* какое-то число */
if (n > 0) {
  console.log('n — положительное число');
}

Оператор if указывает альтернативные варианты выполнения программы, создавая точку разветвления (подобно развилке на дороге).

Условный переход

Блок из одного выражения можно записать без фигурных скобок:

if (n > 0)
  console.log('n — положительное число');

Альтернативная ветвь

if (n >= 0) {
  console.log('n — неотрицательное число');
} else {
  console.log('n — отрицательное число');
}

Цепочки условий

if (n == 0) {
  console.log('n равно нулю');
} else if (n > 0) {
  console.log('n — положительное число');
} else {
  console.log('n — отрицательное число');
}

switch

Оператор перехода по сопоставлению (от англ. переключатель)

Сопоставление по шаблону

var weekday = /* строка с днем недели */
switch (weekday) {
    case 'понедельник':
    case 'вторник':
    case 'среда':
    case 'четверг':
    case 'пятница':
      console.log('Рабочий день');
      break;
    case 'суббота':
    case 'воскресение':
      console.log('Выходной день');
      break;
    default:
      console.log('Неизвестный день');
  }

Недостатки switch

нельзя забывать break

сопоставляются только примитивные значения (строки, числа, логические значения)

используется точное сопоставление (воскресение и Воскресение — разные строки)

нельзя задать дополнительные условия

while

Цикл с предусловием (от англ. до тех пор пока)

Цикл с предусловием

var n = 10;
while (n > 0) {
  console.log(n);
  n -= 1;
}

Цикл while выполняется, пока значение в круглых скобках истинно.

Бесконечный цикл

Самый простой способ «повесить» браузер или интерпретатор:

while (true) {}

Если Вы попробовали так написать, завершите процесс средствами операционной системы и возвращайтесь :)

do ... while

Цикл с постусловием (от англ. делать ... до тех пор пока)

Цикл с постусловием

var n = 10;
do {
  console.log(n);
  n -= 1
} while(n > 0);

Похож на while(...) { ... }, но блок выполняется как минимум один раз.

for

Цикл с параметром (от англ. для [всех значений])

Цикл с параметром

for (var i = 0; i < 10; i++) {
  console.log(i);
}

В консоли появятся числа от 0 до 9 включительно.

Цикл с параметром

В круглых скобках записываются три выражения:

инициализация (что выполнить в начале)

условие завершения (как в while)

продвижение (что выполнять в конце каждой итерации)

Итерация — это одно выполнение блока цикла

Цикл с параметром

for (var i = 0; i < 10; i++) { /*...*/}

Инициализация: объявить переменную i, присвоить значение 0

Условие завершения: выполнять блок, пока i меньше 10

Продвижение: прибавлять единицу к i в конце каждого шага

Бесконечный цикл

Еще более простой способ «повесить» браузер или интерпретатор:

for (;;) {}

Задачи

Задача 1

Вычислить факториал произвольного числа n по формуле:

n!=1⋅2⋅…⋅n

Решение

var n = 10;  // замените на любое положительное число
var f = 1;
for (var i = 2; i <= n; i++)
  f = f * i;
console.log('%s! = %s', n, f);

Осторожно! Факториал — очень быстрорастущая функция.

Задача 2

Дано количество баллов от 0 до 100.

Вычислить оценку по правилам:

[85;100] баллов — отлично

[75;85) баллов — хорошо

[60;75) баллов — удовлетворительно

[0;60) баллов — неудовлетворительно

Решение

var score = 81;  // заменить на число от 0 до 100
if (score >= 85)
  console.log('отлично');
else if (score >= 75)
  console.log('хорошо');
else if (score >= 60)
  console.log('удовлетворительно');
else
  console.log('неудовлетворительно')

Задача 3

Вычислить сумму всех чисел от 0 до 100, кратных 3.

Решение

var sum = 0;
for (var i = 0; i <= 100; i++) {
  if (i % 3 == 0) // условие кратности 3
    sum += i;
}
console.log(sum);

Как оптимизировать это решение?

Тест «Быстрый старт»

Вам предлагается короткий тест по пройденному материалу для закрепления знаний.

Варианты заданий

Задание 1

Веб-консоль позволяет:

загрузить и выполнить JavaScript файл

писать программы на JavaScript и размещать их в Интернете

выполнять короткие фрагменты JavaScript кода в целях тестирования и отладки

выполнить файл JavaScript, доступный в Интернете

Задание 2

if (n % 3 == 0) {
  console.log('Число %s кратно 3.', n);
} else if (n % 2 == 0) {
  console.log('Число %s кратно 2.', n);
} else {
  console.log('Число %s не кратно ни 2, ни 3.', n);
}

Какая строка отобразится в консоли, если n принимает значение 93?

Число 93 кратно 3.

Число 93 кратно 2.

Число 93 не кратно ни 2, ни 3.

Задание 3

Составьте оператор объявления и присваивания значения переменной.

var

greeting

'Hello World'

=

;

Задание 4

for (var i = 0; i < 10;)
  console.log(i);
console.log('Done');

Что делает програма?

Выводит в консоль числа от 0 до 10 включительно, затем Done

Выводит в консоль числа от 0 до 9 включительно, затем Done

Выводит в консоль числа от 1 до 9 включительно, затем Done

Выводит в консоль числа от 1 до 10 включительно, затем Done

Запускает бесконечный цикл

Задание 5

Отметьте корректные способы комментирования кода.

code(); # комментарий

code(); <!-- комментарий -->

code(); комментарий

code(); // комментарий

code(); /* комментарий */

Выберите два правильных ответа.

Задание 6

Отметьте корректные фрагменты кода.

console . log ( 'Hello' ) ;

console. log ('Hello')

c o n s o l e . l o g ( 'Hello' ) ;

con sole . log ('Hello')

Выберите два правильных ответа.

Задание 7

Имеем:

var one = 'One';
var two = 'Two';

Как соединить две строки, чтобы получить 'One Two'?

one ' ' two

one || ' ' || two

one + ' ' + two

one + two

one || two

Задание 8

Как вывести значение переменной text в консоль?

println(text)

print(text)

console.log(text)

puts(text)

log(text)

Задание 9

Как выйти из интерпретатора node?

Escape

Ctrl+C

Ctrl+Q

Ctrl+X

Alt+F4

Задание 10

Node.js — это

библиотека для создания пользовательских интерфейсов на JavaScript

платформа для создания серверных приложений на JavaScript

среда разработки программ на JavaScript

текстовый редактор с подсветкой синтаксиса для JavaScript

Перейти к выполнению заданий

Работа с данными

Концептуальное предназначение любой программы — это обработка данных.

Освоив данный модуль, Вы:

научитесь разбираться в примитивных типах данных JavaScript,

узнаете о функциях и объектах,

узнаете о правилах приведения типов.

Примитивные типы данных

Примитивные типы

Тип данных определяет допустимое множество значений, а также набор операций, применимых к этим значениям.

Динамическая типизация

JavaScript — это язык с динамической типизацией, т.е. тип переменной не указывается явно и может быть изменен в процессе выполнения программы.

B.O.N.U.S. + F.

boolean, object, number, undefined, string,
function

Стандартные типы

boolean — логический тип (true или false)

number — целое или дробное число

string — текстовая строка

function — функция

object — объект (универсальный тип)

undefined — специальный тип для необъявленных переменных или несуществующих значений

string

// Можно в одинарных кавычках
'This is a cat.'
// Можно в двойных кавычках
"This is a dog."

string

JavaScript использует кодировку UTF-16 для строк.

"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어"

string

Специальные символы:

'\n'      // перенос строки
'\t'      // знак табуляции
'\''      // одинарная кавычка
'\"'      // двойная кавычка
'\uXXXX'  // символ Unicode
// где XXXX -- шестнадцатеричный код символа

boolean

Логический тип (например, результат сравнения) принимает два значения true и false.

// к строке
true + ''          // 'true'
true.toString()    // 'true'
// из строки
str == 'true'

number

Числа в JavaScript имеют двойную точность.

Примеры

100500      // Целые числа
0.5         // Десятичные дроби
.5          // (можно опустить 0)
1 / 3       // Периодические дроби
123e10      // 1230000000000
Math.exp(1) // 2.718281828459045

number

«Особые» числа:

NaN           // not-a-number (не число)
+Infinity     // положительная бесконечность
-Infinity     // отрицательная бесконечность

isNaN(number) // проверка на NaN

number

// к строке
'' + 5           // '5'
5..toString()    // '5'
// из строки
parseInt('5')    // 5
parseInt('Hi!')  // NaN

null

null — специальное значение типа object, обозначающее пустоту, неопределенность или отсутствие значения или результата.

Пример

Функция find возвращает первый элемент списка, удовлетворяющий условию, или null, если ни один элемент не удовлетворяет условию.

null vs. undefined

Почти одно и то же:

var a = null;
a.something;
// TypeError: Cannot read property 'something' of null
somethingUndefined.something
// ReferenceError: somethingUndefined is not defined

null vs. undefined

null приводится к undefined при обычных сравнениях:

null == undefined     // true
null != undefined     // false

Определение типа

Оператор typeof

Определение типа

Оператор typeof возвращает строковое значение типа переменной.

var a = 0;
typeof(a);         // 'number'
// Можно без скобок
typeof a;

typeof null

Запомните:

typeof null   // 'object'

Задания для самоподготовки

Назовите основные типы данных в JavaScript.

Приведите примеры числовых, строковых и логических констант.

Назовите оператор, с помощью которого можно определить тип переменной.

Объясните отличие null от undefined.

Тест «Примитивные типы данных»

Варианты заданий

Задание 1

Укажите корректные способы задания числового значения 0,45.

.45

,45

45e-2

45 / 100

45.

Задание 2

Укажите константы типа boolean.

yes

no

true

false

+

-

Задание 3

Отметьте корректные способы задания строкового литерала:

'this is a string'

'this is a string"

«this is a string»

"this is a string"

Перейти к выполнению заданий

Функции

Функции

Функция — это именованный фрагмент кода, к которому можно обратиться из другого места программы.

Функции — это альфа и омега языка JavaScript. C помощью функций решается огромное количество различных задач.

Определение функции

function sayHello() {
  console.log('Hello!');
}

Вызов функции

sayHello();
// Hello!

Аргументы

Функция может принимать произвольное количество аргументов, которые передаются в нее в момент вызова.

function sayHello(name) {
  console.log('Hello, %s!', name);
}

sayHello('Alice');   // Hello, Alice!

Возвращаемое значение

Функция также может вернуть результат вычислений с помощью return.

function sum(a, b) {
  return a + b;
}

console.log('3 + 7 = %s', sum(3, 7));
// 3 + 7 = 10

Функции первого класса

JavaScript поддерживает функции первого класса, т.е.:

функцию можно передать как аргумент другой функции

функцию можно вернуть как результат выполнения другой функии

функцию можно записать в переменную

Анонимная функция

Имя функции можно опустить, если объявление функции является частью другого оператора (например, вызова или присваивания).

[1,2,3].map(function(i) { return i + 1 });
// [2,3,4]

Здесь в функцию map передается анонимная функция, которая вызывается для каждого элемента массива.

Функция как аргумент

function sayHelloAsync(name, cb) {
  console.log('Hello, %s!', name);
  cb();
}

Функция sayHelloAsync, закончив основную работу, вызывает переданную функцию cb (от callback — функция обратного вызова).

Пример: функция как аргумент

function sayHelloAsync(name, cb) {
  console.log('Hello, %s!', name);
  cb();
}

sayHelloAsync('Alice', function() { // без имени
  console.log('How are you?');
});
// Hello, Alice!
// How are you?

Функция как значение переменной

var mul2 = function(n) {
  return n * 2;
};

mul2(16); // 32

Проверьте самостоятельно: чему равно значение typeof mul2?

Функция как результат вычисления

Эта техника применяется во многих шаблонах проектирования (например, в Factory), а также в функциональном программировании.

function createSummator(increment) {
  return function(number) {
    return number + increment;
  }
}
var sum5 = createSummator(5);
sum5(7);   // 12

Задания для самоподготовки

Приведите пример функции:

без аргументов,

с одним аргументом,

с двумя аргументами.

Объясните, в каких случаях можно опустить имя функции?

Тест «Функции»

Варианты заданий

Задание 1

Укажите три контекста, где при объявлении функции можно не указывать ее имя:

объявление функции с помощью ключевого слова function

присваивание функции переменной

передача функции в качестве аргумента другой функции

возврат функции в качестве результата вычисления другой функции

вызов функции, объявленной с помощью ключевого слова function

Задание 2

function isEven(number) {
  return number % 2 == 0;
}

Что делает эта функция?

Возвращает true, если аргумент — нечетное число (т.е. не делится на 2 нацело), и false в остальных случаях.

Возвращает true, если аргумент — четное число (т.е. делится на 2 нацело), и false в остальных случаях.

Возвращает true, если аргумент не равен двум, и false в остальных случаях.

Задание 3

Выберите корректное определение функции sum, которая возвращает сумму двух чисел.

function sum(a, b) { a + b }

function sum(a, b) { return a + b }

function sum(a, b) = a + b

function sum(a, b) = { a + b }

Перейти к выполнению заданий

Объекты

Объекты

JavaScript и ООП

JavaScript — это объектно-ориентированный язык программирования.

Объект — центральное понятие ООП.

Объект — это произвольная структура данных, предназначенная для моделирования процессов и явлений реального мира.

Каждый объект характеризуется состоянием и поведением.

Состояние

Состояние объекта задается с помощью полей — переменных, закрепленных за объектом.

var alice = {
  firstName: 'Alice',
  lastName: 'Smith'
}

Состояние объекта alice задается двумя полями: firstName и lastName.

Поведение

Поведение объектов задается методами — функциями, закрепленными за объектами.

var cat = {
  say: function() {
    console.log('Meowww!');
  }
}

Объект cat может мяукать в консоль с помощью метода say.

Доступ к полям и методам объектов осуществляется с помощью оператора точка .

Доступ к полям и методам

var cat = {
  say: function() {
    console.log('Meowww!');
  }
};
cat.say();   // Meowww!

Изменение объектов

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

Пример: измение поля

var alice = { name: 'Alice' };
alice.name = 'Alicia';
// { name: 'Alicia' }

Пример: добавление поля

var alice = { name: 'Alice' };
alice.sex = 'female';
// { name: 'Alice', sex: 'female' }

Удаление полей и методов

var alice = { name: 'Alice' };
delete alice.name;
// { }

Помните: структура объекта может быть изменена в процессе выполнения программы.

Это ключевое отличие языков с динамической типизацией (например, JavaScript) от языков со статической типизацией (например, Java).

Ссылочные типы

Объекты хранятся в переменных ссылочного типа.

В следующем примере на один и тот же объект указывают три ссылки.

var alice = { name: 'Alice' };
var girl = alice;
var person = alice;

Ссылочные типы

Доказать существование единственного объекта легко: достаточно изменить его поле и «посмотреть» на него через другие ссылки:

var alice = { name: 'Alice' };
var girl = alice;
var person = alice;
// Изменяем person
person.name = 'Bob';
// Проверяем другие ссылки
alice.name;  // 'Bob'
girl.name;   // 'Bob'

Ссылки vs. Копии

Сравните предыдущий пример с этим:

var alice = { name: 'Alice' };
var girl = { name: 'Alice' };
var person = { name: 'Alice' };
// Изменяем person
person.name = 'Bob';
// Проверяем другие ссылки
alice.name;  // 'Alice'
girl.name;   // 'Alice'

Задания для самоподготоки

Создайте объект в консоли, моделирующий любой предмет или явление на Ваш выбор.

Добавьте к объекту одно или несколько полей.

Добавьте к объекту метод, вызовите его.

Объясните смысл ссылочных типов.

Тест «Объекты»

Варианты заданий

Задание 1

var alice = { name: 'Alice', age: 26 };

var person = alice;
person.age = 27;

Чему равно значение alice.age?

26

27

undefined

Перейти к выполнению заданий

Массивы

Массивы

Массивы

Массивы — это упорядоченные наборы однотипных данных.

// Массив натуральных чисел от 1 до 10
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Элементы и индексы

Массив состоит из элементов, каждый элемент имеет свой индекс в массиве.

Индекс первого элемента массива — 0.

var names = ['Tom', 'John', 'Jane'];
names[0];  // 'Tom'
names[1];  // 'John'
names[2];  // 'Jane'

Длина массива

Каждый массив имеет свойство length, возвращающее его текущую длину (т.е. количество элементов в нем).

Таким образом, индекс последнего элемента массива array равен array.length - 1

var names = ['Tom', 'John', 'Jane'];
names[names.length - 1];   // 'Jane'

Произвольный доступ

Элементы массива могут быть заданы или изменены по индексу:

var names = ['Tom', 'John', 'Jane'];
names[2] = 'Jack';
names[3] = 'Tina';
names;  // ['Tom', 'John', 'Jack', 'Tina']

Добавление элементов

Метод push добавляет элементы в конец массива.

var names = ['Tom', 'John', 'Jane'];
names.push('Tina');
names; // ['Tom', 'John', 'Jane', 'Tina'];

Добавление элементов

Метод unshift добавляет элементы в начало массива.

var names = ['Tom', 'John', 'Jane'];
names.unshift('Tina');
names; // ['Tina', 'Tom', 'John', 'Jane'];

Удаление элементов

Метод pop удаляет последний элемент массива и возвращает его.

var names = ['Tom', 'John', 'Jane'];
names.pop();   // 'Jane'
names; // ['Tom', 'John'];

Удаление элементов

Метод shift удаляет первый элемент массива и возвращает его.

var names = ['Tom', 'John', 'Jane'];
names.shift();   // 'Tom'
names; // ['John', 'Jane'];

Конкатенация массивов

Метод concat возвращает новый массив, составленный из элементов первого и второго массивов.

var names = ['Tom', 'John', 'Jane'];
names.concat(['Tina', 'Loki']);
// ['Tom', 'John', 'Jane', 'Tina', 'Loki']

При этом исходные массивы остаются без изменений.

Подпоследовательность

Метод slice возвращает копию массива, чьи элементы взяты из исходного массива — от индекса начала (включительно) до индекса конца (не включительно).

var fib = [1, 1, 2, 3, 5, 8, 13, 21];
fib.slice(2, 5); // [2, 3, 5]

Цикл по элементам

При работе с массивами используется стандартный цикл с параметром:

var array = [ /* ... */ ];
for (var i = 0; i < array.length; i++) {
  var elem = array[i];
  // выполняем действия над элементом elem
}

Цикл в функциональном стиле

Аналогично с элементами можно работать в функциональном стиле с помощью метода forEach.

var array = [ /* ... */ ];
array.forEach(function(elem, i) {
  // выполняем действия над элементом elem
});

Задания для самоподготовки

Создайте в консоли массив чисел от 0 до 100, воспользовавшись циклом с параметром.

Удалите первый элемент.

Удалите последний элемент.

Выведите в консоль 59-й элемент.

Тест «Массивы»

Варианты заданий

Задание 1

Укажите методы, с помощью которых можно добавить элементы в массив:

push

pop

shift

unshift

add

new

Задание 2

var array = ['Tom', 'Bruce', 'Jane', 'Jared'];

Укажите индекс элемента Jane |
Укажите индекс последнего элемента |

Задание 3

Укажите методы, с помощью которых можно удалить элементы из массива:

remove

pop

shift

pull

Перейти к выполнению заданий

Приведение типов

Приведение типов

Приведение типа (type conversion) — это преобразование значения переменной одного типа в значение другого типа.

Явное и неявное приведение

Приведение типов бывает явным, когда для этого вызывается какая-либо функция, и неявным, когда преобразование происходит автоматически по мере необходимости.

Явное приведение

В JavaScript возможно три вида явных (explicit) приведений:

из любого типа к строке с помощью toString,

из строки в число с помощью parseInt или parseFloat

написание собственной функции, осуществляющей преобразование

Неявное приведение

Неявное (implicit) приведение типов происходит при употреблении значения или переменной в контексте, требующем определенный тип данных.

К примеру, в круглых скобках оператора if () должно быть условие типа boolean. Следовательно, любое значение в этом контексте будет приведено к типу boolean по определенным правилам.

Неявное приведение типов — Ваш друг!

Многие боятся использовать неявное приведение, считая эту концепцию ненадежной.

На самом деле приведение типов осуществляется по строгим правилам; правильное использование приведения типов делает программы более понятными и эффективными.

Приведение к логическому типу

Falsy & truthy

В JavaScript есть ровно шесть значений, которые обозначают ложь в логических высказываниях (falsey values).

false, null, undefined, 0, NaN и пустая строка ''

Все остальные значения приводятся к true (truthy values).

Примеры falsey-значений

if (false) { /* невыполнимый код */ }
if (null) { /* невыполнимый код */ }
if (undefined) { /* невыполнимый код */ }
if (NaN) { /* невыполнимый код */ }
if (0) { /* невыполнимый код */ }
if ('') { /* невыполнимый код */ }

Примеры truthy-значений

if (true) { /* код выполняется всегда */ }
if (' ') { /* код выполняется всегда */ }
if ('0') { /* код выполняется всегда */ }
if ({}) { /* код выполняется всегда */ }
if ([]) { /* код выполняется всегда */ }
if ('false') { /* код выполняется всегда */ }

Приведение при арифметических операторах

Оператор +

Оператор + обозначает как арифметическую операцию сложения, так и конкатенацию строк.

2 + 2 + 3                // 7
"Hello" + " " + "world!" // "Hello world!"

Оператор +

Если хотя бы один операнд — это строка или другой объект (не число), то происходит конкатенация.

'37' + 7 // '377'

Остальные операторы

Остальные операторы попытаются выполнить приведение к числовому типу; если это невозможно, результат будет NaN:

'37' - 7   // 30
'37' - 'a' // NaN

Приведение при сравнении

Строгое сравнение

Строгие операторы равенства === и неравенства !== не допускают неявного приведения типов, т.е. всегда возвращают false, если типы операндов не совпадают.

'1' === 1  // false
'1' !== 1  // true

Нестрогое сравнения

При нестрогом сравнении операнды приводятся к общему типу.

== | равно
!= | не равно
> | больше
>= | больше или равно
< | меньше
<= | меньше или равно

Сравнение примитивов

// Числа с числами
8 > 5            // true
5 <= 3           // false

// Строки со строками (в лексикографическом порядке)
"abc" < "xyz"    // true
"A" > "ABC"      // false
"a" > "A"        // true

Сравнение примитивов

// Строки с числами
"43" == 43       // true
0 > "-1"         // true

// но...
"a" > 1          // false
"a" < 1          // false
"a" == 1         // false

Сравнение ссылок

Ссылки можно сравнивать друг с другом с помощью операторов равенства == и неравенства !=.

Результат будет true, если обе переменные указывают на один и тот же объект.

var obj1 = { one: 1 };
var obj2 = { one: 1 };
obj1 == obj2; // false, т.к. объекты разные
obj1 = obj2;
obj1 == obj2; // теперь true

Corner cases

Нестандартные случаи приведения типов

Нестандартные случаи

Рассмотрим некоторые неочевидные сценарии, которые часто приводят программистов в замешательство.

Сравнение объектов с не-объектами

{} == '[object Object]'  // true (??!)

Пустой объект {} приводится к строке с помощью метода toString.

Пустой массив и пустая строка

[] == '';  // true

Как и в предыдущем примере, [].toString() — это пустая строка.

Сравнение неопределенностей

Неопределенности null и undefined равны между собой.

null == undefined // true
null == null      // true
null == undefined // true

И больше они не равны ни с одним другим значением.

Сравнение с NaN

Любое сравнение NaN с чем бы то ни было — даже с другим NaN — всегда возвращает false:

NaN < NaN;    // false
NaN > NaN;    // false
NaN == NaN;   // false
NaN != NaN;   // false

Ноль, пустая строка и false

Пожалуй, самое странное правило:

0 == '' // true (?!!)

Происходит от приведения к false, чтобы сохранить транзитивность оператора равенства:

0 == false    // true
'' == false   // true

Задания для самоподготовки

Приведите примеры явного приведения типов.

В каких случаях происходит неявное приведение типов?

Назовите все значения, приводимые к false.

Тест «Приведение типов»

Варианты заданий

Задание 1

Отметьте выражения типа number:

"30" - 7

"30" + 7

"30" * 7

"30" / 7

Воспользуйтесь консолью, если затрудняетесь.

Задание 2

Отметьте выражения, приводимые к true:

0

1

2

-1

null

Задание 3

Отметьте выражения, приводимые к true:

'false'

NaN

{}

[]

undefined

Перейти к выполнению заданий

Итоговый тест «Работа с данными»

Варианты заданий

Задание 1

Дан объект:

var vehicle = {
  motor: '1.6 VTi',
  transmission: 'auto',
  currentSpeed: 1,
  accelerate: function(incr) {
    this.currentSpeed += incr;
  },
  break: function(decr) {
    this.currentSpeed -= decr;
  }
};

Определите его характеристики по соответствующим категориям.

motor — это

поле

метод

локальная переменная

transmission — это

поле

метод

локальная переменная

currentSpeed — это

поле

метод

локальная переменная

accelerate — это

поле

метод

локальная переменная

break — это

поле

метод

локальная переменная

Задание 2

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

f не имеет побочных эффектов

f передана в другую функцию в качестве аргумента

f вызывает другую функцию

f возвращена как результат из другой функцию

f не возвращает никакого значения

f не имеет аргументов

Выберите два правильных ответа.

Задание 3

Отметьте все варианты, в которых оператор + выполняет конкатенацию строк.

'43' + 3

43 + 3

'' + 3

3 + '43'

3 + 43

Выберите три правильных ответа.

Задание 4

var alice = { name: 'Alice'};
var person = alice
  , girl = alice;

Сколько объектов создано в этом примере?

1

2

3

Сколько ссылочных переменных определено в этом примере?

1

2

3

Задание 5

Какие из перечисленных типов относятся к примитивным?

unit

boolean

int

string

long

Выберите два правильных ответа.

Задание 6

Определение функции начинается с ключевого слова:

def

fun

func

function

define

Задание 7

Язык программирования поддерживает функции первого класса, если:

функцию можно передать как аргумент другой функции

функцию можно вернуть как результат выполнения другой функии

функцию можно записать в переменную

в теле функции можно определить другую функцию

функцию можно вызывать произвольное количество раз

Задание 8

Отметьте корректные строковые литералы.

'String'

"String'

'String"

"String"

Выберите два правильных ответа.

Задание 9

Отметьте значения, приводимые к false:

"0"

"false"

{}

[]

'' (пустая строка)

NaN

null

undefined

0

Задание 10

Отметьте истинные высказывания:

null == undefined

NaN == NaN

[] == ''

[] === ''

[] == {}

Выберите два правильных ответа.

Задание 11

Дан объект:

var tree = {
  height: 1.6,
  species: 'Pinus Migo',
  genus: 'Pinus',
  family: 'Pinaceae',
  division: 'Pinophyta',
  kingdom: 'Plantae',
  grow: function() {
    this.height += .1;
  }
};

Определите его характеристики по соответствующим категориям.

height — это

поле

метод

локальная переменная

species — это

поле

метод

локальная переменная

genus — это

поле

метод

локальная переменная

family — это

поле

метод

локальная переменная

division — это

поле

метод

локальная переменная

kingdom — это

поле

метод

локальная переменная

grow — это

поле

метод

локальная переменная

Перейти к выполнению заданий