Rembrandt
15 февраля 2022 17:48

Учебник JavaScript

Источник – http://code.mu


Введение в язык JavaScript для новичков

1. Введение

Язык JavaScript предназначен для выполнения в браузере наряду с HTML и CSS. Но, если эти языки предназначены для верстки структуры сайта, то JavaScript позволяет “оживлять” web-страницы – делать их реагирующими на действия пользователя или демонстрировать некоторую динамичность (к примеру, смена картинок в блоке или красивые плавно выпадающие менюшки).

Как запустить JavaScript

JavaScript код пишется прямо на HTML странице внутри тега script:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Это заголовок тайтл</title>

<script>

здесь пишем JavaScript код
</script>

</head>

<body>

Это основное содержимое страницы.
</body>

</html>

Тег script можно располагать в любом месте страницы – как в <head>, так и в <body>.

Напишем первую программу

Давайте напишем нашу первую программу на JavaScript. Вот она:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Моя первая программа</title>

<script>

alert('Привет, мир!');

</script>

</head>

<body>

моя первая программа
</body>

</html>

Скопируйте этот код и разместите в HTML файле. Затем открой этот файл в браузере – и вы увидите диалоговое окошко с текстом.

Разберем код программы

Давайте разберем код написанной нами выше программы. Первым понятием, которое вам нужно узнать, являются функции. Функции позволяют выполнять некоторые действия. В нашем примере есть функция alert(), которая выводит текст на экран в виде диалогового окошка.

Функция состоит из имени (в нашем случае это alert) и круглых скобок, написанных после этого имени. В этих круглых скобках следует писать параметры функции. В нашем случае параметром является текст, который выводится на экран.

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

Замечание

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

alert('Привет, мир!');

Строгий режим

Изучите теорию по следующей ссылке: https://learn.javascript.ru/strict-mode. Перепишем наш код в строгом режиме:

"use strict";

alert('Привет, мир!');

В дальнейшем для простоты я не буду указывать то, что код работает в строгом режиме (но подразумевается, что да, и вы всегда первой строчкой пишите “use strict”).

Комментарии

Подобно языкам HTML и CSS в языке JavaScript можно оставлять комментарии. Они бывают однострочными и многострочными.

Вот пример однострочного комментария:

alert('Привет, мир!'); // комментарий

Вот пример многострочного комментария:

/*

комментарий

*/

alert('Привет, мир!');

2. Переменные

Переменные в JavaScript

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

Каждая переменная должна иметь имя, которое может состоять из латинских букв, чисел, символов $ и знаков подчеркивания. Примеры названий переменных: str, my_str, myStr, a1, $, $a, $$a.

Чаще всего имена ваших переменных будут состоять из букв, реже – из букв с добавлением чисел.

Учтите, что первый символ имени переменной не должен быть цифрой, то есть, к примеру, имя 1a будет некорректным.

Использование переменных

Для того, чтобы использовать переменную, ее сначала необходимо объявить: написать перед ее именем ключевое слово let. Давайте объявим, например, переменную с именем a:

let a;

После объявления переменной в нее можно записать (говорят присвоить ей) какое-либо значение, например, какое-либо число или строку.

Запись данных в переменную осуществляется с помощью операции присваивания =. Давайте, например, запишем в переменную a число 3:

let a = 3;

А теперь давайте выведем содержимое этой переменной на экран с помощью функции alert:

let a = 3; // объявляем переменную и задаем ей значение

alert(a); // выведет 3

Не обязательно записывать значение в переменную сразу после объявления. Можно сначала объявить переменную, а потом присвоить ей значение:

let a; // объявим переменную

a = 3; // присвоим ей значение

alert(a); // выведем значение переменной на экран

Как вы видите, let перед именем переменной пишется только один раз – при объявлении этой переменной. Затем, чтобы использовать переменную, нужно просто писать имя этой переменной.

Задача 1js.Pm.Bs.Vr

Создайте переменную num и присвойте ей значение 123. Выведите значение этой переменной на экран с помощью функции alert.

Объявление нескольких переменных

Давайте объявим несколько переменных:

let a = 1;

let b = 2;

let c = 3;

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

let a = 1, b = 2, c = 3;

Можно вначале объявить все переменные, а потом присваивать им значения:

let a, b, c; // объявляем все 3 переменные// Присваиваем переменным значения:

a = 1;

b = 2;

c = 3;

Задача 2

Самостоятельно опробуйте все описанные способы объявления переменных.

 

Изменения значений переменных

Пусть у нас есть переменная, которой мы присвоили какое-то значение. Мы затем можем выполнить операцию присваивания еще раз и присвоить переменной другое значение:

let a; // объявляем переменную

a = 1; // записываем в нее значение 1

alert(a); // выведет 1

a = 2; // записываем теперь значение 2, затирая значение 1

alert(a); // выведет 2

То есть значение переменной не является чем-то жестко привязанным к ней. Мы можем свободно записывать какие-то данные в переменную, прочитывать их, потом еще что-то записывать – и так далее.


Задача 3

Создайте переменную a. Запишите в нее значение 10, выведите его на экран. Затем запишите в нее значение 20, выведите его на экран.

Несколько let для одной переменной

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

let a = 1;

alert(a);

let a = 2;

alert(a);

Здесь есть два варианта решения проблемы. Можно просто ввести две разных переменных:

let a = 1;

alert(a);

let b = 2;

alert(b);

А можно вначале объявить переменную a, а затем делать операции с нею:

let a;a = 1;

alert(a);

a = 2;alert(a);

3. Числа и операции над ними

Числа и операции над ними в JavaScript

В JavaScript можно выполнять математические операции над числами. Смотрите примеры:

let a = 1 + 2; // выполняем сложение

alert(a);// выведет 3

let b = 3 - 2; // выполняем вычитание

alert(b); // выведет 1

let c = 3 * 2; // выполняем умножение

alert(c); // выведет 6

let d = 4 / 2; // выполняем деление

alert(d); // выведет 2

Задача 1

Создайте переменную a. Запишите в нее сумму чисел 1, 2 и 3. С помощью функции alert выведите на экран содержимое переменной a.

 

Замечания

Чтобы вывести результат операции на экран, не обязательно вводить переменную. Можно просто выполнить нужные операции внутри функции alert:

alert(2 + 3); // выведет 5

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

alert(2 + 3 + 4); // выведет 9

Задача 2

Выведите с помощью функции alert сумму чисел 1, 2 и 3.

 

Операции над переменными

Математические операции можно производить не только над числами, но и над переменными. Сложим, к примеру, значения двух переменных:

let a = 1;

let b = 2;

alert(a + b); // выведет 3

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

let a = 1;

let b = 2;

let c = a + b; // запишем сумму в переменную c

alert(c); // выведет 3

Задача 3

Создайте переменную a со значением 10 и переменную b со значением 2. Выведите на экран их сумму, разность, произведение и частное (результат деления).


Задача 4

Создайте переменную c со значением 10 и переменную d со значением 5. Просуммируйте их, а результат присвойте переменной result. Выведите на экран значение переменной result.


Задача 5

Создайте переменную a со значением 1, переменную b со значением 2 и переменную c со значением 3. Выведите на экран их сумму.


Задача 6

Создайте переменную a со значением 10 и переменную b со значением 5. Отнимите от a переменную b и результат присвойте переменной c.

Затем создайте переменную d, присвойте ей значение 7. Сложите переменные c и d, а результат запишите в переменную result. Выведите на экран значение переменной result.

 

Приоритет операций

Математические операции JavaScript имеют такой же приоритет, как в обычной математике. То есть в начале выполняется умножение и деление, а потом уже сложение и вычитание.

В следующем примере вначале 2 умножится на 2 и затем к результату прибавится 3:

let a = 2 * 2 + 3;

alert(a); // выведет 7 (результат 4 + 3)

Задача 7

Не запуская код, определите, что выведется на экран:

let a = 5 + 5 * 3;

alert(a);

Задача 8

Не запуская код, определите, что выведется на экран:

let a = 5 + 5 * 3 + 3;

alert(a);

Задача 9

Не запуская код, определите, что выведется на экран:

let a = 8 / 2 + 2;

alert(a);

Задача 10

Не запуская код, определите, что выведется на экран:

let a = 8 + 2 / 2;

alert(a);

Равный приоритет

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

let a = 8 / 2 * 4;

alert(a); // выведет 16 (результат 4 * 4)

Если же переставить знаки местами, то вначале выполнится умножение, а потом деление:

let a = 8 * 2 / 4;

alert(a); // выведет 4 (результат 16 / 4)

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

let a = 16 / 2 / 2 / 2;

alert(a); // выведет 2

Задача 11

Не запуская код, определите, что выведется на экран:

let a = 8 / 2 * 2;

alert(a);

Задача 12

Не запуская код, определите, что выведется на экран:

let a = 8 * 4 / 2 / 2;

alert(a);

Группирующие скобки

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

let a = 2 * (2 + 3);

alert(a); // выведет 10 (результат 2 * 5)

Примечание: скобок может быть любое количество, в том числе и вложенных друг в друга:

let a = 2 * (2 + 4 * (3 + 1));

alert(a);

В скобки можно заключить операции, обладающие приоритетом – это не будет ошибкой. Например, заключим в скобки произведение чисел:

let a = (2 * 2) + 3;

alert(a); // выведет 7 (результат 4 + 3)

В данном случае скобки получаются лишними (у умножения ведь и так приоритет), но код является допустимым.

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

let a = 8 / 2 * 4;

alert(a);

Как вы уже знаете, в нем вначале выполнится деление, а потом умножение. Но с первого взгляда это может быть не слишком очевидно.

Можно использовать группирующие скобки, чтобы явно показать приоритет:

let a = (8 / 2) * 4;

alert(a);

Задача 13

Не запуская код, определите, что выведется на экран:

let a = (2 + 3) * (2 + 3);

alert(a);

Задача 14

Не запуская код, определите, что выведется на экран:

let a = (2 + 3) * 2 + 3;

alert(a);

Задача 15

Не запуская код, определите, что выведется на экран:

let a = 2 * (2 + 4 * (3 + 1));

alert(a);

Задача 16

Не запуская код, определите, что выведется на экран:

let a = 2 * 8 / 4;

alert(a);

Задача 17

Не запуская код, определите, что выведется на экран:

let a = (2 * 8) / 4;

alert(a);

Задача 18

Не запуская код, определите, что выведется на экран:

let a = 2 * (8 / 4);

alert(a);

Дроби

Ранее мы с вами работали только с целыми числами. Но в JavaScript также существуют и десятичные дроби. При этом целая и дробная части отделяются друг от друга точкой. Смотрите пример:

let a = 0.5;

alert(a); // выведет 0.5

Смотрите еще пример:

let a = 0.5 + 0.5;

alert(a); // выведет 1

Задача 19

Запишите в переменную a число 1.5, а в переменную b – число 0.75. Найдите сумму значений этих переменных и выведите ее на экран.

 

Отрицательные числа

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

let a = -1;

alert(a); // выведет -1

Знак минус можно писать как к числам, так и к переменным:

let a = 1;let b = -a; // записали в b содержимое a с обратным знаком

alert(b); // выведет -1

Или вот так:

let a = 1;

alert(-a); // выведет -1

Задача 20

Создайте переменную a со значением -100. Выведите это значение на экран.


Задача 21

Создайте переменную a, запишите в нее какое-нибудь положительное или отрицательное число. Выведите на экран это число с обратным знаком.

 

Плюс перед переменными

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

Фактически этот плюс ничего не делает, но вполне является допустимым, смотрите пример:

let a = +1;

alert(a); // выведет 1

Остаток от деления

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

alert(10 % 3); // выведет 1

Если одно число делится нацело на второе – остаток будет равен нулю:

alert(10 % 2); // выведет 0

Оператор %, конечно же, можно применять не только к числам, но и к переменным:

let a = 10;let b = 3;

alert(a % b); // выведет 1

Задача 22

Дана переменная a со значением 10 и переменная b со значением 3. Найдите остаток от деления a на b.

Возведение в степень

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

alert(10 ** 3); // выведет 1000

Давайте возведем в степень значение переменной:

let a = 10;

alert(a ** 3); // выведет 1000

Может быть такое, что и число, и степень будут содержаться в переменных:

let a = 10;let b = 3;

alert(a ** b); // выведет 1000

Задача 23

Возведите число 2 в 10-ю степень. Выведите результат на экран.

Приоритет возведения в степень

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

alert(2 * 2 ** 3);

Задача 24

Не запуская код, определите, что выведется на экран:

let a = 3 * 2 ** 3;

alert(a);

Задача 25

Не запуская код, определите, что выведется на экран:

let a = (3 * 2) ** 3;

alert(a);

Задача 26

Не запуская код, определите, что выведется на экран:

let a = 3 * 2 ** (3 + 1);

alert(a);

Задача 27

Не запуская код, определите, что выведется на экран:

let a = 2 ** 3 * 3;

alert(a);

Задача 28

Не запуская код, определите, что выведется на экран:

let a = 3 * 2 ** 3 * 3;alert(a);

4. Строки

Строки в JavaScript

Как уже упоминалось ранее, данные могут иметь различный тип. Один из типов – числа, мы уже немного изучили. Давайте теперь перейдем к строкам.

Строки создаются с помощью кавычек:

let str = 'abc';

alert(str); // выведет 'abc'

Кавычки могут быть не только одинарными, но и двойными:

let str = "abc";

alert(str); // выведет 'abc'

Между одинарными и двойными кавычками в JavaScript нет никакой разницы. Их использование зависит от ваших предпочтений. Я предпочитаю использовать одинарные кавычки, поэтому везде далее в учебнике будут стоять именно они.

 

Замечание

Здесь и далее, если результат вывода – строка, то я беру его в кавычки, чтобы показать, что это именно строка, вот так: выведет 'abc'. При выводе строки через alert никаких кавычек появляться не будет (то есть на экран выведется то, что у меня написано внутри кавычек).

 

Сложение строк

Для сложения строк, так же, как и для сложения чисел, используется оператор +:

let str = 'abc' + 'def'; // складываем две строки

alert(str); // выведет 'abcdef'

Строки также могут хранится в переменных:

let str1 = 'abc';

let str2 = 'def';

alert(str1 + str2); // выведет 'abcdef'

Можно также складывать переменные и строки:

let str1 = 'abc';

let str2 = 'def';

alert(str1 + '!!!' + str2); // выведет 'abc!!!def'

Пусть две строки хранятся в переменных, а при их сложении мы хотим вставить между ними пробел. Это делается так:

let str1 = 'abc';

let str2 = 'def';

alert(str1 + ' ' + str2); // выведет 'abc def'

Пусть переменная только одна:

let str = 'abc';

alert(str + ' ' + 'def'); // выведет 'abc def'

В этом случае нет смысла выделять пробел, как отдельную строку – вставим его как часть второго слагаемого:

let str = 'abc';

alert(str + ' def'); // выведет 'abc def'


Задача 1

Создайте переменную str и присвойте ей строку '!!!'. Выведите значение этой переменной на экран.


Задача 2

Создайте переменную с текстом 'java' и переменную с текстом 'script'. С помощью этих переменных и операции сложения строк выведите на экран строку 'javascript'.


Задача 3

Создайте переменную с текстом 'hello' и переменную с текстом 'world'. С помощью этих переменных и операции сложения строк выведите на экран строку 'hello
world'
.

 

Длина строки

Давайте теперь рассмотрим, как найти длину строки (говоря другими словами количество символов в этой строке). Это значение содержится в свойстве length:

let str = 'abcde';

alert(str.length); // выведет 5

Свойство length не обязательно применять к переменной, можно и вот так:

alert('abcde'.length); // выведет 5

Пробел также является символом:

alert('ab de'.length); // выведет 5

Задача 4

Запишите в переменную какую-нибудь строку. Выведите на экран длину вашей строки.

 

Косые кавычки

В ES6 появился новый тип кавычек – косые:

let str = `abc`;

alert(str); // выведет 'abc'

Косые кавычки работают так же, как и обычные, но обладают некоторыми дополнительными эффектами, которые мы рассмотрим ниже.

Многострочность

В JavaScript строках, созданных через одинарные или двойные кавычки, не допустим перенос строки. То есть вот так не будет работать:

let str = 'abc

df';// так не будет работать

И так не будет работать:

let str = "abc

def"; // так не будет работать

А вот косые кавычки специально предназначены для создания многострочных строк:

let str = `abc

def`; // так будет работать


Задача 5

Запишите в переменную str строку, состоящую из символов 'a', 'b', 'c', причем после каждого символа, кроме последнего, должен стоять перенос строки. Выведите значение переменной на экран.

5. Специальные значения

Специальные значения в JavaScript

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

Вот они: undefined, null, true, false, NaN, Infinity, -Infinity.

Значение undefined

Значение undefined обозначает неопределенность. Такое значение будет у переменной, если мы объявили ее, но не записали в нее значение:

let a;

alert(a); // выведет undefined

Это значение можно присвоить переменной явно:

let a = undefined;

alert(a); // выведет undefined


Задача 1

Объявите переменную, не задавая ей значения. Выведите значение созданной переменной на экран.

Значение null

Значение null обозначает “ничего”. К примеру, мы можем присвоить переменной такое значение в знак того, что там ничего не лежит:

let a = null;

alert(a); // выведет null


Задача 2

Присвойте переменной значение null. Выведите эту переменную на экран.

Значения true и false

Значения true и false обозначают истину и ложь соответственно. Они используются для таких вещей, которые предполагают два варианта ответа – да или нет.


Задача 3

Присвойте переменной значение true. Выведите эту переменную на экран.


Задача 4

Присвойте переменной значение false. Выведите эту переменную на экран.

Значение NaN

Значение NaN (Not-A-Number) обозначает не число. Такое значение получается тогда, когда вы пытаетесь делать математические операции не с числами, а с чем-то другим. К примеру, такое значение даст попытка умножить строку на число:

alert('abc' * 3); // выведет NaN

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

alert(NaN + 1); // выведет NaN

Задача 5

Сделайте две строки. Перемножьте их друг на друга. Выведите результат умножения на экран.

 

Значения Infinity и -Infinity

Значения Infinity и -Infinity обозначают соответственно бесконечность и минус бесконечность. Такие значения получаются, если какое-то число поделить на ноль – в этом случает JavaScript не выдает ошибку, как в других языках программирования, а возвращает эти значения:

alert( 1 / 0); // выведет Infinity

alert(-1 / 0); // выведет -Infinity


Задача 6

Поделите число 10 на 0. Выведите результат на экран.


Задача 7

Поделите число -10 на 0. Выведите результат на экран.

6. Работа с консолью

Посмотрите следующее видео, в котором автор показывает, как работать с отладчиком, который показывает ошибки JavaScript, и консолью:

 

7. Константы

Константы в JavaScript

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

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

const pi = 3.14;

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

const PI = 3.14;

Давайте попробуем изменить значение нашей константы:

const PI = 3.14;

PI = 3; // выдаст ошибку

Задача 1

Сделайте константу PI и с ее помощью вычислите длину какой-нибудь окружности по ее радиусу.

8. Примеры задач на переменные и операции

Примеры задач на переменные и операции

Количество секунд

Давайте узнаем сколько секунд в часе. Как известно, в минуте 60 секунд, а в часе – 60 минут. Следовательно, чтобы найти количество секунд в часе, необходимо 60 умножить на 60:

alert(60 * 60); // количество секунд в часе

Задача 1

Найдите количество секунд в сутках.


Задача 2

Найдите количество секунд в 30 сутках.


Задача 3

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


Задача 4

Найдите количество минут в сутках.


Задача 5

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

 

Перевод в байты и наоборот

Известно, что в килобайте содержится 1024 байт, в мегабайте – 1024 килобайт, в гигабайте – 1024 мегабайт, в терабайте – 1024 гигабайт.


Задача 6

Найдите количество байт в мегабайте.


Задача 7

Найдите количество байт в гигабайте.


Задача 8

Найдите количество байт в 10 гигабайтах.


Задача 9

Найдите количество байт в терабайте.


Задача 10

Найдите количество килобайт в терабайте.

 

Площади фигур


Задача 11

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


Задача 12

Пусть дана переменная a со стороной квадрата. Найдите площадь квадрата и запишите ее в переменную s. Выведите содержимое этой переменной на экран.


Задача 13

Пусть даны переменные a и b со сторонами прямоугольника. Найдите площадь прямоугольника и запишите ее в переменную s. Выведите содержимое этой переменной на экран.


Задача 14

Пусть даны переменные a и b со сторонами прямоугольника. Найдите периметр прямоугольника и запишите его в переменную p. Выведите содержимое этой переменной на экран.

 

Из Цельсия в Фаренгейты и наоборот


Задача 15

Пусть дана переменная tc с температурой в градусах Цельсия. По соответствующей формуле выполните перевод этой температуры в градусы Фаренгейта.


Задача 16

Пусть дана переменная tf с температурой в градусах Фаренгейта. По соответствующей формуле выполните перевод этой температуры в градусы Цельсия.

9. Автоматическое преобразование типов данных

Автоматическое преобразование типов данных

Как вы уже знаете, строки в JavaScript следует брать в кавычки. Может быть такое, что всеми символами строки будут являться цифры:

let a = '123';

В этом случае переменная a также является строкой, но с некоторым нюансом.

Суть нюанса в следующем: если над строкой с цифрами выполнить какую-либо математическую операцию – эта операция будет выполнена так, будто у нас действительно числа, а не строки:

alert('2' * '3'); // выведет 6

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

Он также видит, что фактически наши строки – это числа в кавычках. Поэтому JavaScript автоматически выполняет преобразование этих строк к числам и выполняет соответствующую математическую операцию над ними.

Такое работает, если в наших строках только цифры. Если там будет хотя бы одна буква – JavaScript посчитает операцию некорректной и сделает ее результатом значение NaN:

alert('2' * '3s'); // выведет NaN

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

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

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

let a = '1' + '2';

alert(a); // выведет '12' - произошло сложение строк

Если одно из слагаемых число, а другое – строка, то всегда побеждает строка:

let a = 1 + '2';

alert(a); // выведет '12'

В таких случаях JavaScript, наоборот, автоматически преобразует числа в строки и выполняет сложение строк.

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

В следующем примере вначале 2 и 3 сложатся как числа, а затем результат прибавится к строке '1' уже как строка '5', что в итоге даст строку '15':

let a = '1' + (2 + 3);

alert(a); // выведет '15'

Если же убрать скобки, то все будет складываться слева направо. То есть сначала к строке '1' прибавится число 2 и в результате получится строка '12'. Затем к этой строке прибавится число 3 и в результате получится строка '123':

let a = '1' + 2 + 3;

alert(a); // выведет '123'

А вот в следующем примере числа 2 и 3 написаны в начале, поэтому сначала они сложатся как числа, дав в результате число 5, а затем к этому числу прибавится строка '1', дав в итоге строку '51':

let a = 2 + 3 + '1';

alert(a); // выведет '51'

Задача 1

Не запуская код, определите, что выведется на экран:

let a = '5' + '2';

alert(a);

Задача 2

Не запуская код, определите, что выведется на экран:

let a = '5' + 2;

alert(a);

Задача 3

Не запуская код, определите, что выведется на экран:

let a = 5 + '2';

alert(a);

Задача 4

Не запуская код, определите, что выведется на экран:

let a = 5 + 2;

alert(a);

Задача 5

Не запуская код, определите, что выведется на экран:

let a = '5' * '2';

alert(a);

Задача 6

Не запуская код, определите, что выведется на экран:

let a = '5' - '2';

alert(a);

Задача 7

Не запуская код, определите, что выведется на экран:

let a = '5' / '2';

alert(a);

Задача 8

Не запуская код, определите, что выведется на экран:

let a = '5' % '2';

alert(a);

Задача 9

Не запуская код, определите, что выведется на экран:

let a = '5s' * '2';

alert(a);

Задача 10

Не запуская код, определите, что выведется на экран:

let a = '5s' + '2';

alert(a);

Задача 11

Не запуская код, определите, что выведется на экран:

let a = (-'5') + (-'2');

alert(a);

Задача 12

Не запуская код, определите, что выведется на экран:

let a = '5' * 1 + '2' * 1;

alert(a);

Задача 13

Не запуская код, определите, что выведется на экран:

let a = '5' * '1' + '2' * '1';

alert(a);

Задача 14

Не запуская код, определите, что выведется на экран:

let a = '' + 3 + 1;

alert(a);

10. Принудительное преобразование типов данных

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

Давайте рассмотрим следующий код:

let a = '2';let b = '3';

alert(a + b); // выведет '23'

Как вы видите, в нашем случае обе переменных содержат в себе строки и складываются, соответственно, как строки.

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

let a = '2';let b = '3';

alert(Number(a) + Number(b)); // выведет 5

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

let a = Number('2'); // в переменную запишется число 2

let b = Number('3'); // в переменную запишется число 3

alert(a + b); // выведет 5

Задача 1

Дана переменная a со значением '10' и переменная b со значением '20'. Сложите данные переменные как числа.

Задача 2js.Pm.Bs.FTC

Не запуская код, определите, что выведется на экран:

alert( Number('2') + Number('3') );

Задача 3

Не запуская код, определите, что выведется на экран:

alert( 2 + Number('3') );

Задача 4

Не запуская код, определите, что выведется на экран:

alert( '2' + Number('3') );

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

Рассмотрим следующий код с использованием функции Number:

let a = Number('2'); // в переменную запишется число 2

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

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

Однако, можно придумать операцию, не приводящую к изменению числа: например, умножать или делить его на 1:

let a = '2' * 1; // в переменную запишется число 2

Более распространенным является написание знака + перед нашей строкой. В этом случае + является просто обозначением положительного числа и, как уже упоминалось ранее, ничего не делает – но на самом деле не делает ничего математического, но тем не менее преобразует строку в число:

let a = +'2'; // в переменную запишется число 2

Очень часто прием с плюсом используется как альтернатива функции Number – для сокращения кода. Вот пример применения:

let a = +'2'; // в переменную запишется число 2

let b = +'3'; // в переменную запишется число 3

alert(a + b); // выведет 5

Вот еще пример:

let a = '2';

let b = +a; // в b запишется число 2

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

let a = '2';

let b = '3';

alert(+a + +b); // выведет 5

Здесь более уместно было бы использование функции Number.


Задача 5

Дан код:

let a = '2';

let b = '3';

alert(a + b); // выведет '23'

С помощью описанного приема с плюсом исправьте приведенный код так, чтобы в переменные a и b присваивалось число, а не строка, ну и результатом, соответственно, было не '23', а 5.

 

Number и нецифры

При попытке преобразовать строку, содержащую не только цифры, но и другие символы, функция Number вернет своим результатом значение NaN:

alert(Number('2s')); // выведет NaN

Выделение числа

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

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

Примером такой строки может быть значение в пикселях: '12px'. Пусть нам необходимо достать стоящее в начале число, отбросив строковую часть. Для такой операции существует функция parseInt. Давайте посмотрим ее работу на примере:

let num = parseInt('12px');

alert(num); // выведет 12

Пиксели, однако, иногда бывают дробными: '12.5px'. В этом случае функция parseInt пасует и выводит только целую часть:

let num = parseInt('12.5px');

alert(num); // все равно выведет 12

В общем-то, возможно такое поведение – это именно то, что вам нужно. Но если нет – используйте функцию parseFloat, которое извлекает число вместе с его дробной частью:

let num = parseFloat('12.5px');

alert(num); // выведет 12.5

Конечно же, отсутствие дробной части не мешает функции parseFloat работать корректно:

let num = parseFloat('12px');

alert(num); // выведет 12

Задача 6

Дана переменная со значением '5px' и переменная со значением '6px'. Найдите сумму пикселей из значений этих переменных и выведите ее на экран.


Задача 7

Дана переменная со значением '5.5px' и переменная со значением '6.25px'. Найдите сумму пикселей из значений этих переменных и выведите ее на экран.


Задача 8

Модифицируйте предыдущую задачу так, чтобы к выводящемуся результату добавлялись буквы 'px'. То есть, если наша сумма равна 11.75, то на экран пусть выведется '11.75px'.

 

Преобразование к строке

Иногда нужно выполнить обратное преобразование – из числа в строку. Для этого предназначена функция String:

let str = String(123); // теперь в переменной строка '123'

Еще пример:

let num1 = 1;

let num2 = 2;

alert(String(num1) + String(num2)); // выведет '12'

Задача 9

Даны две переменные с числами. Сложите значения этих переменных как строки и выведите результат на экран.

 

Применение преобразование к строке

Пусть у нас есть переменная num с каким-то числом:

let num = 12345;

Давайте найдем количество цифр в этом числе. Как вы уже знаете, чтобы найти длину строки, можно использовать свойство length.

Оно, однако, работает только со строками, а будучи применено к числу, не будет работать:

let num = 12345;

alert(num.length); // выведет undefined

Для решения проблемы преобразуем наше число к строке и найдем длину этой строки:

let num = 12345;

let str = String(num); // преобразуем наше число к строке

alert(str.length); // найдем длину строки

Можно не вводить промежуточную переменную str, а применить свойство length сразу к результату функции String:

let num = 12345;

alert(String(num).length); // найдем длину строки

Задача 10

Дана переменная с числом. Найдите количество цифр в этом числе.


Задача 11

Даны две переменные с числами. Найдите количество цифр в одном и во втором числе, результаты сложите и выведите на экран.

11. Преобразование логического типа

Преобразование логического типа в JavaScript

Сейчас мы с вами рассмотрим, как ведут себя специальные значения true и false при преобразовании их к строкам или числам. Эти знания вам потребуются в следующих уроках.

Итак, попробуем выполнить преобразование к строке, используя функцию String:

alert(String(true)); // выведет 'true'

alert(String(false)); // выведет 'false'

Как вы видите, значение true преобразуется в строку 'true', а значение false – в строку 'false'. То есть при попытке сложения строки и логического значения, это логическое значение преобразуется в строку и произойдет сложение строк:

alert('a' + true); // выведет 'atrue'

При приведении к числу значение true преобразуется в число 1, а значение false – в число 0:

alert(Number(true)); // выведет 1

alert(Number(false)); // выведет 0

Во всех математических операциях логические значения вначале преобразуются к числу. Пример:

alert(true + 1); // выведет 2

alert(true + true); // выведет 2

Задача 1

Не запуская код, определите, что выведется на экран:

alert(true + 3);

Задача 2

Не запуская код, определите, что выведется на экран:

alert(true + true);

Задача 3

Не запуская код, определите, что выведется на экран:

alert(true - true);

Задача 4

Не запуская код, определите, что выведется на экран:

alert(true + false);

Задача 5

Не запуская код, определите, что выведется на экран:

alert('1' + true);

Задача 6

Не запуская код, определите, что выведется на экран:

alert( String(true) + 1 );

Задача 7

Не запуская код, определите, что выведется на экран:

alert( String(true) + Number(true) );

12. Преобразование к логическому типу

Преобразование к логическому типу в JavaScript

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

  1. console.log(Boolean(0)); // false
  2. console.log(Boolean(-0)); // false
  3. console.log(Boolean(+0)); // false
  4. console.log(Boolean(null)); // false
  5. console.log(Boolean(false)); // false
  6. console.log(Boolean(NaN)); // false
  7. console.log(Boolean(undefined)); // false
  8. console.log(Boolean('')); // false

Все остальные значения в JavaScript (в других языках бывает не так) дают true. Вот значения, приводящиеся к true, но могущие вызвать у вас сомнения:

  1. console.log(Boolean(-1)); // true
  2. console.log(Boolean(Infinity)); // true
  3. console.log(Boolean(-Infinity)); // true

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

  1. console.log(Boolean('0')); // true
  2. console.log(Boolean('false')); // true
  3. console.log(Boolean('NaN')); // true
  4. console.log(Boolean('null')); // true
  5. console.log(Boolean('undefined')); // true

Задача 1

Не запуская код, определите, что выведется на экран:

let test = Boolean(3);

alert(test);


Задача 2

Не запуская код, определите, что выведется на экран:

let test = Boolean(0);alert(test);


Задача 3

Не запуская код, определите, что выведется на экран:

let test = Boolean(-1);

alert(test);


Задача 4

Не запуская код, определите, что выведется на экран:

let test = Boolean(-0);

alert(test);


Задача 5

Не запуская код, определите, что выведется на экран:

let test = Boolean(+0);

alert(test);


Задача 6

Не запуская код, определите, что выведется на экран:

let test = Boolean('abc');

alert(test);


Задача 7

Не запуская код, определите, что выведется на экран:

let test = Boolean('');

alert(test);


Задача 8

Не запуская код, определите, что выведется на экран:

let test = Boolean('0');

alert(test);


Задача 9

Не запуская код, определите, что выведется на экран:

let test = Boolean(true);

alert(test);


Задача 10

Не запуская код, определите, что выведется на экран:

let test = Boolean(false);

alert(test);


Задача 11

Не запуская код, определите, что выведется на экран:

let test = Boolean('true');

alert(test);


Задача 12

Не запуская код, определите, что выведется на экран:

let test = Boolean('false');

alert(test);


Задача 13

Не запуская код, определите, что выведется на экран:

let test = Boolean(null);

alert(test);


Задача 14

Не запуская код, определите, что выведется на экран:

let test = Boolean('null');

alert(test);


Задача 15

Не запуская код, определите, что выведется на экран:

let test = Boolean(undefined);

alert(test);


Задача 16

Не запуская код, определите, что выведется на экран:

let test = Boolean('undefined');

alert(test);


Задача 17

Не запуская код, определите, что выведется на экран:

let test = Boolean(NaN);

alert(test);


Задача 18

Не запуская код, определите, что выведется на экран:

let test = Boolean('NaN');

alert(test);


Задача 19

Не запуская код, определите, что выведется на экран:

let test = Boolean(3 * 'abc');

alert(test);


Задача 20

Не запуская код, определите, что выведется на экран:

let test = Boolean(Infinity);

alert(test);


Задача 21

Не запуская код, определите, что выведется на экран:

let test = Boolean(1 / 0);

alert(test);

13. Символы строки

Получение символов строки на JavaScript

Пусть у нас есть какая-то строка. Каждый символ в этой строке имеет свой порядковый номер: первый символ номер 0, второй символ – номер 1, третий символ номер 2 и так далее.

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

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

Давайте посмотрим на примере. Пусть у нас дана вот такая строка:

let str = 'abcde'; // строка

Давайте обратимся к каким-нибудь символам этой строки:

let str = 'abcde'; // строка

alert(str[0]); // выведет 'a'

alert(str[1]); // выведет 'b'

alert(str[2]); // выведет 'c'

Номер символа также может хранится и в переменной:

let str = 'abcde';

let num = 3; // номер символа в переменной

alert(str[num]); // выведет 'd'


Задача 1

Дана строка 'abcde'. Обращаясь к отдельным символам этой строки выведите на экран символ 'a', символ 'c', символ 'e'.


Задача 2

Дана переменная со строкой 'abcde'. Обращаясь к отдельным символам этой строки запишите в новую переменную символы этой строки в обратном порядке, то есть 'edcba'.


Задача 3

Дана переменная str со строкой 'abcde' и переменная num с номером символа. Выведите на экран символ, номер которого хранится в переменной num.

Последний символ строки

Давайте выведем последний символ строки. При этом сделаем так, чтобы наш скрипт сам определял номер последнего символа, не зависимо от длины строки.

Пусть у нас есть такая строка:

let str = 'abcde';

Как вы видите, количество символов в этой строке равно 5. Если немного подумать, то становится очевидным, что номер последнего символа этой строки будет на 1 меньше ее длины, так как нумерация символов начинается с нуля.

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

Как вы уже знаете, длину строки можно найти с помощью свойства length. Исходя из этого найдем номер последнего символа:

let str = 'abcde';

let last = str.length - 1;// номер последнего символа

Используем найденный номер для вывода символа на экран:

let str = 'abcde';

let last = str.length - 1; // номер последнего символа

alert(str[last]); // выведет 'e'

Промежуточную переменную last можно и не вводить:

let str = 'abcde';

alert(str[str.length - 1]); // выведет 'e'


Задача 4

Дана строка. Выведите на экран ее последний символ.


Задача 5

Дана строка. Выведите на экран ее предпоследний символ.


Задача 6

Дана строка. Выведите на экран ее предпредпоследний символ.

Строки с цифрами

Пусть теперь у нас есть строка, содержащая только цифры.

let test = '12345'; // строка с цифрами

Давайте найдем, например, сумму первого и второго ее символов:

let test = '12345';

alert(test[0] + test[1]); // выведет '12' - суммирует как строки

Как вы видите, символы нашей строки также являются строками и суммируются как строки. Пусть мы хотим суммировать их как числа. Используем для этого функцию Number:

let test = '12345'; // строка

alert(Number(test[0]) + Number(test[1])); // выведет 3


Задача 7

Дана строка '12345'. Найдите сумму цифр этой строки.

 

Обращение к цифрам числа

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

let test = 12345;

alert(test[0]); // выдаст undefined

Для решения проблемы преобразуем наше число в строку:

let test = String(12345); // строка

alert(test[0]); // выведет '1' - все работает

Пусть мы теперь хотим найти сумму первых двух цифр:

let test = String(12345); // строка

alert(test[0] + test[1]); // выведет '12' - суммирует как строки

Добавим функцию Number для того, чтобы символы суммировались как числа:

let test = String(12345); // строка

alert(Number(test[0]) + Number(test[1])); // выведет 3

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

let test = String(12345); // строка

alert(test[1] * test[2]); // выведет 6


Задача 8

Дано число 12345. Найдите сумму цифр этого числа.


Задача 9

Дано число 12345. Найдите произведение цифр этого числа.


Задача 10

Дано число 12345. Переставьте цифры этого числа в обратном порядке.

 

Неизменяемость строк в JavaScript

Строки в JavaScript (в отличие, например, от PHP) неизменяемы:

let str = 'abcde'; // строка

str[0] = '!'; // выдаст ошибку (в строгом режиме "use strict")

14. Сокращенные операции

Сокращенные операции в JavaScript

Над текущим значением переменной можно производить какие-то операции, а затем записывать результат обратно в эту же переменную. Смотрите пример:

let num = 1; // объявляем переменную num и записываем в нее значение 1

num = num + 2; // записываем в num ее саму плюс 2

alert(num); // выведет 3


Задача 1

Не запуская код, определите, что выведется на экран:

let num = 1;

num = num + 1;

num = num + 1;

alert(num);


Задача 2

Не запуская код, определите, что выведется на экран:

let num = 1;

num = num + 2;

num = num + 3;

alert(num);

Сокращенные операции

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

let num = 1;

num += 3; // эквивалентно num = num + 3;

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

let num = 2;

num -= 3; // эквивалентно num = num - 3;

let num = 2;

num *= 3; // эквивалентно num = num * 3;

let num = 2;

num /= 3; // эквивалентно num = num / 3;


Задача 3

Переделайте этот код так, чтобы в нем использовались описанные сокращенные операции:

let num = 47;

num = num + 7;

num = num - 18;

num = num * 10;

num = num / 15;

alert(num);

15. Инкремент и декремент

Операции инкремента и декремента в JavaScript

Рассмотрим следующий код:

let num = 0;

num = num + 1; // прибавляем к переменной num число 1

alert(num); // выведет 1

Как вы уже знаете, этот код можно переписать в сокращенном виде через оператор +=:

let num = 0;

num += 1; // прибавляем к переменной num число 1

alert(num); // выведет 1

На самом деле прибавление единицы в программировании встречается так часто, что для этой операции придуман еще более сокращенный синтаксис – специальный оператор инкремент ++, увеличивающий значение переменной на 1.

Перепишем наш код с его помощью:

let num = 0;

num++; // прибавляем к переменной a число 1

alert(num); // выведет 1

Есть также операция декремент --, уменьшающая значение переменной на 1. Смотрите пример:

let num = 0;

num--; // отнимаем от переменной num число 1

alert(num); // выведет -1


Задача 1

Переделайте этот код так, чтобы в нем операции инкремента и декремента:

let num = 10;

num = num + 1;

num = num + 1;

num = num - 1;

alert(num);

Префиксный и постфиксный тип

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

В первом способе операция записывается после имени переменной, вот так: a++, а во втором способе – перед именем переменной, вот так: ++a.

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

Пусть у нас есть код alert(a++) и код alert(++a).

В случае alert(a++) переменная сначала выведется, а потом увеличится на единицу, а в случае alert(++a) переменная сначала увеличится на единицу, а потом выведется.

В следующем примере первый alert выведет 0, так как вначале сработает вывод на экран, а уже затем переменная увеличится:

let num = 0;

alert(num++); // выведет 0

alert(num); // выведет 1

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

let num = 0;

alert(++num); // выведет 1 - переменная увеличилась сразу

Такое поведение справедливо не только для вывода на экран, но и для присваивания:

let num1 = 0;

let num2 = num1++; // в переменную num2 запишется 0

alert(num2); // выведет 0

alert(num1); // выведет 1 - переменная num1 поменялась после записи в num2

А теперь поменяем постфиксную форму на префиксную:

let num1 = 0;

let num2 = ++num1; // в переменную num2 запишется 1

alert(num2); // выведет 1

Если наша операция выполняется на отдельной строке, то разницы между префиксной и постфиксной формами нет:

let num = 0;

++num;num++;

alert(num); // выведет 2


Задача 2

Не запуская код, определите, что выведется на экран:

let num = 3;

alert(++num);


Задача 3

Не запуская код, определите, что выведется на экран:

let num = 3;

alert(num++);


Задача 4

Не запуская код, определите, что выведется на экран:

let num = 3;

alert(--num);


Задача 5

Не запуская код, определите, что выведется на экран:

let num = 3;

alert(num--);


Задача 6

Не запуская код, определите, что выведется на экран:

let num1 = 3;

let num2 = ++num1;

alert(num1);

alert(num2);


Задача 7

Не запуская код, определите, что выведется на экран:

let num1 = 3;

let num2 = num1++;

alert(num1);

alert(num2);


Задача 8

Не запуская код, определите, что выведется на экран:

let num1 = 3;

let num2 = --num1;

alert(num1);

alert(num2);


Задача 9

Не запуская код, определите, что выведется на экран:

let num1 = 3;

let num2 = num1--;

alert(num1);

alert(num2);


Задача 10

Не запуская код, определите, что выведется на экран:

let num1 = 3;

num1++;

let num2 = num1--;

alert(num1++);

alert(--num2);

16. Функция prompt

Функция prompt в JavaScript

Вы уже знаете о существовании функции alert, выводящей заданное сообщение на экран. Существует также похожая функция prompt, которая позволяет получить от пользователя какой-либо текст.

Давайте для примера спросим имя пользователя:

prompt('Ваше имя?');

Запустите приведенный выше код, чтобы увидеть окошко, выводимое функцией prompt. Вбейте ваше имя и нажмите на кнопку. Если вы проделали все описанные выше манипуляции, то введенное вами имя попадет в наш скрипт.

Для того, чтобы получить доступ к введенному имени, результат работы функции prompt нужно присвоить в какую-нибудь переменную, например, вот так:

let name = prompt('Ваше имя?');

Давайте на следующей строке кода выведем на экран введенное ранее имя, воспользовавшись функцией alert:

let name = prompt('Ваше имя?');

alert('Ваше имя: ' + name);

Вы должны понимать, что при вызове функции prompt дальнейшее выполнение скрипта блокируется, пока не будут введены соответствующие данные. В общем-то, также работает и функция alert, только она ожидает нажатия на соответствующую кнопку.

Кстати, использовать переменную не обязательно:

alert('Ваше имя: ' + prompt('Ваше имя?'));

Задача 1js.Pm.Bs.Pmt

Спросите возраст пользователя с помощью функции prompt. Выведите с помощью alert введенный пользователем возраст.

 

Проблема с типами

Учтите, что функция prompt всегда возвращает строку, даже если пользователь вводил число. Для примера рассмотрите следующий скрипт:

letnum1 = prompt('Введите первое число');

letnum2= prompt('Введите второе число');

alert(num1 + num2); // сложит числа как строки

Задача 2

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


Задача 3

С помощью функции prompt спросите у пользователя сторону квадрата. Выведите на экран площадь введенного квадрата.


Задача 4

С помощью двух функций prompt спросите у пользователя стороны прямоугольника. Выведите на экран периметр введенного прямоугольника.

Коллекции

17. Массивы

Массивы в JavaScript

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

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

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

let arr = []; // создаем массив arr

Пока созданный нами массив не содержит никаких данных. Заполним его названиями дней недели:

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

Каждое значение списка, который мы записали в массив, в нашем случае каждый день недели, называется элементом массива.

Элементы разделяются между собой запятой. После этой запятой можно ставить пробелы, а можно и не ставить (более принято ставить, ставьте).

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

let arr = [1, 2, 3];

Кроме строк и чисел в массиве можно хранить все допустимые типы данных JavaScript, а также смешивать их между собой в одном массиве, пример:

let arr = [1, 2, 'a', 'b', null, true, false];

Задача 1

Создайте массив с элементами 'a', 'b' и 'c'. Выведите его на экран с помощью функции alert, а также выведите его в консоль с помощью console.log.

Как вывести отдельный элемент массива

Обращение к элементам массива осуществляется подобно обращениям к символам строки. Каждый элемент массива имеет свой номер: первый элемент – номер 0, второй – номер 1 и так далее. Эти номера называются ключами элементов массива. Смотрите пример:

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

console.log(arr[0]); // выведет 'пн'

console.log(arr[1]); // выведет 'вт'

console.log(arr[2]); // выведет 'ср'


Задача 2

Создайте массив с элементами 'a', 'b', 'c'. Выведите на экран каждый из этих элементов.


Задача 3

Создайте массив с элементами массив с элементами 'a', 'b', 'c', 'd'. Выведите с его помощью на экран строку 'a+b+c+d'.


Задача 4

Создайте массив с элементами 1, 2 и 3. Выведите на экран сумму этих элементов.


Задача 5

Создайте массив с элементами 2, 5, 3, 9. Умножьте первый элемент массива на второй, а третий элемент на четвертый. Результаты сложите, присвойте переменной result. Выведите на экран значение этой переменной.

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

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

let arr = [1, 2, 3];

console.log(arr.length) // выведет 3


Задача 6

Создайте массив с произвольными элементами. Выведите на экран количество элементов в этом массиве.

Последний элемент массива

Последний элемент массива также получается аналогично последнему символу строки:

let arr = [1, 2, 3];

console.log(arr[arr.length - 1]) // выведет 3


Задача 7

Создайте массив с произвольными элементами. Выведите на экран последний элемент этого массива.

Изменение массива

Элементы массивов, в отличие от символов строк, можно изменять:

let arr = ['a', 'b', 'c'];

arr[0] = '!';

console.log(arr); // выведет ['!', 'b', 'c']


Задача 8

Создайте массив с элементами 'a', 'b', 'c'. Запишите вместо первого элемента число 1, вместо второго – 2, вместо третьего – 3.

Перезапись элементов

Можно также прочитывать текущее значение элемента, выполнять с ним какие-то операции и записывать измененное значение обратно в этот элемент:

let arr = ['a', 'b', 'c'];

arr[0] = arr[0] + '!';

arr[1] = arr[1] + '!';

arr[2] = arr[2] + '!';

console.log(arr); // выведет ['a!', 'b!', 'c!']

Предыдущий код можно переписать через оператор +=:

let arr = ['a', 'b', 'c'];

arr[0] += '!';

arr[1] += '!';

arr[2] += '!';

console.log(arr); // выведет ['a!', 'b!', 'c!']


Задача 9

Создайте массив с числами. Прибавьте к каждому элементу массива число 3. Выведите на экран измененный массив.

Инкремент и декремент

Можно также применять операции инкремента и декремента:

let arr = [1, 2, 3, 4];

arr[0]++;

++arr[1];

arr[2]--;

--arr[3];

console.log(arr); // выведет [2, 3, 2, 3]


Задача 10

Создайте массив с элементами 1, 2 и 3. С помощью оператора ++ увеличьте каждый элемент массива на единицу.

Заполнение массива

Элементы в массив не обязательно добавлять сразу в момент объявления этого массива. Можно вначале объявить этот массив пустым, а затем добавить в него необходимые элементы, вот так:

let arr = []; // создаем пустой массив

arr[0] = 'a'; // в ключ 0 добавим элемент 'a'

arr[1] = 'b'; // в ключ 1 добавим элемент 'b'

arr[2] = 'c'; // в ключ 2 добавим элемент 'c'

console.log(arr); // выведет ['a', 'b', 'c']

Массив не обязательно должен быть изначально пустым – там уже что-то может быть, но мы все равно можем добавлять новые элементы:

let arr = ['a', 'b', 'c']; // объявляем массив с элементами

arr[3] = 'd'; // добавляем еще один элемент

console.log(arr); // выведет ['a', 'b', 'c', 'd']


Задача 11

С помощью описанного приема создайте массив с элементами 1, 2 и 3.


Задача 12

Пусть дан такой массив:

let arr = [1, 2, 3];

Добавьте ему в конец элементы 4 и 5.

 

Несуществующие элементы

Обращение к несуществующему элементу массива вернет undefined. Никакой ошибки при этом не будет. Давайте посмотрим на примере.

Пусть у нас в массиве 3 элемента. Давайте обратимся к несуществующему элементу, например, к элементу с номером 10:

let arr = ['a', 'b', 'c'];

console.log(arr[10]); // выведет undefined

Разреженный массив

Пусть у нас есть некоторый пустой массив:

let arr = [1, 2, 3];

Давайте добавим к этому массиву еще один элемент:

let arr = [1, 2, 3];

arr[3] = '!';

console.log(arr); // выведет [1, 2, 3, '!']

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

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

let arr = [1, 2, 3];

arr[4] = '!';

console.log(arr); // выведет [1, 2, 3, undefined, '!']

А теперь запишем значение в элемент с ключом 5:

let arr = [1, 2, 3];

arr[5] = '!';

console.log(arr); // выведет [1, 2, 3, undefined, undefined, '!']

Как вы видите, новое значение добавляется в конец массива, но между уже существующими значениями и новым появляется дыра, которая заполняется значением undefined. На практике это означает увеличение длины массива:

let arr = [1, 2, 3];

arr[5] = '!';

console.log(arr.length); // выведет 6, хотя в нем 4 элемента!

Задача 13js.Pm.Cl.Ar

Пусть дан такой массив:

let arr = [];

arr[3] = 'a';

arr[8] = 'b';

Узнайте длину этого массива с помощью свойства length.

18. Объекты в JS

Объекты в JavaScript

Рассмотрим следующий массив:

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

Чтобы обратиться к нужному элементу этого массива, мы должны написать в квадратных скобках ключ этого элемента.

Как вы знаете, в массивах JavaScript сам определяет ключи для элементов – это их порядковые номера. Но иногда такое автоматическое определение может оказаться неудобным.

К примеру, если мы хотим вывести на экран название первого дня недели ('пн'), то должны написать в квадратных скобках цифру 0, а не 1.

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

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

Объекты создаются с помощью фигурных скобок { }, внутри которых пишутся элементы этого объекта в формате ключ: значение.

Давайте сделаем так, чтобы понедельник имел ключ 1, а не ноль, как было раньше, и всем остальным ключам дней прибавим единицу:

let obj = {1: 'пн', 2: 'вт', 3: 'ср', 4: 'чт', 5: 'пт', 6: 'сб', 7: 'вс'};

Теперь можно обратиться к понедельнику уже по ключу 1, а не 0. Сделаем это:

let obj = {1: 'пн', 2: 'вт', 3: 'ср', 4: 'чт', 5: 'пт', 6: 'сб', 7: 'вс'};

console.log(obj[1]); // выведет 'пн'


Задача 1

Создайте объект с ключами 1, 2 и 3 и значениями 'a', 'b' и 'c'. Выведите на экран все его элементы.

Неупорядоченность объектов

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

В объектах мы сами назначаем ключи, поэтому порядок следования элементов не имеет значения. То есть массивы являются упорядоченными списками, а объекты – нет.

Для примера рассмотрим вот такой объект:

let obj = {1: 'value1', 2: 'value2', 3: 'value3'};

console.log(obj[1]); // выведет 'value1'

console.log(obj[2]); // выведет 'value2'

console.log(obj[3]); // выведет 'value3'

Если переставить элементы этого объекта в произвольном порядке (конечно же, вместе с их ключами), то ничего от этого в работе нашего скрипта не изменится:

let obj = {3: 'value3', 1: 'value1', 2: 'value2'};

console.log(obj[1]); // выведет 'value1'

console.log(obj[2]); // выведет 'value2'

console.log(obj[3]); // выведет 'value3'

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

// Данный объект корректный:

let obj = {7: 'value1', 50: 'value2', 23: 'value3'};

Вывод всего объекта

Содержимое всего объекта нельзя нормально посмотреть через функцию alert:

let obj = {1: 'a', 2: 'b', 3: 'c'};

alert(obj); // выведет [Object object]

Конечно же, алертом можно вывести каждый отдельный элемент объекта. Но если нужно посмотреть содержимое всего объекта – выводите его в консоль:

let obj = {1: 'a', 2: 'b', 3: 'c'};

console.log(obj); // выведет сам объект

Строковые ключи

В объектах, в отличие от массивов, ключи могут быть не только числовыми, но и строковыми. При этом эти ключи-строки, в отличие от значений-строк, в кавычки брать не нужно:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

А вот, чтобы обратиться к элементу со строковым ключом, в квадратных скобках его уже нужно брать в кавычки:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

console.log(obj['key1']); // выведет 'a'


Задача 2

Создайте объект с ключами a, b и c и значениями 1, 2 и 3. Найдите сумму его элементов.

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

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

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

let obj = {'1key': 'a', 'key-2': 'b', key3: 'c'};

console.log(obj['1key']); // выведет 'a'

console.log(obj['key-2']); // выведет 'b'

console.log(obj['key3']); // выведет 'c'

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


Задача 3

Создайте объект с ключами 1a, 2b и с-с и значениями 1, 2 и 3. Найдите сумму его элементов.


Задача 4

Дан объект:

let obj = {'1a': 1, 'b2': 2, 'с-с': 3, 'd4': 4};

Для каких ключей данного объекта кавычки обязательны, а для каких нет?

Альтернативный синтаксис

Давайте рассмотрим следующий объект:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

Выведем на экран значение какого-нибудь его элемента, например, с ключом key1:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

console.log(obj['key1']);

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

let obj = {key1: 'a', key2: 'b', key3: 'c'};

console.log(obj.key1); // альтернативный способ

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

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


Задача 5

Дан объект:

let obj = {key1: 1, key2: 2, key3: 3};

Найдите сумму его элементов. Обращайтесь к элементам с помощью изученного синтаксиса.


Задача 6

Дан объект:

let obj = {'1a': 1, 'b2': 2, 'eee-': 3, 'd4': 4};

К каким элементам этого объекта допустимо обращение через свойство, а к каким – нет?

Практика


Задача 7

Создайте объект user с ключами name, surname, patronymic и какими-то произвольными значениями. Выведите на экран фамилию, имя и отчество через пробел.


Задача 8

Создайте объект date с ключами year, month и day и значениями, соответствующими текущему дню. Выведите созданную дату на экран в формате год-месяц-день.

Заполнение

Объекты заполняются так же, как и массивы:

let obj = {};

obj['key1'] = 'a';

obj['key2'] = 'b';

obj['key3'] = 'c';

console.log(obj); // выведет {key1: 'a', key2: 'b', key3: 'c'}

Можно также использовать альтернативный синтаксис:

let obj = {};

obj.key1 = 'a';

obj.key2 = 'b';

obj.key3 = 'c';

console.log(obj); // выведет {key1: 'a', key2: 'b', key3: 'c'}

Задача 9

Создайте объект с ключами a, b и c и элементами 1, 2 и 3.

19. Ключи из переменных

Ключи из переменных в JavaScript

Пусть у нас дан вот такой массив:

let arr = ['a', 'b', 'c'];

Выведем на экран элемент с ключом 0:

let arr = ['a', 'b', 'c'];

console.log(arr[0]); // выведет 'a'

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

let arr = ['a', 'b', 'c'];

let key = 0; // запишем ключ в переменную

Используем теперь нашу переменную для вывода соответствующего элемента:

let arr = ['a', 'b', 'c'];

let key = 0; // запишем ключ в переменную

console.log(arr[key]); // выведет 'a'


Задача 1

Дан следующий массив:

let arr = ['a', 'b', 'c'];

Дана также переменная:

let key = 2;

Выведите на экран элемент, ключ которого хранится в переменной key.


Задача 2

Дан следующий массив:

let arr = [1, 2, 3, 4, 5];

Даны также переменные:

let key1 = 1;

let key2 = 2;

Найдите сумму элементов, ключи которых хранятся в наших переменных.

Ключи объектов

Ключи объектов также могут хранится в переменных, смотрите пример:

let obj = {key1: 'a', key2: 'b', key3: 'c'};

let key = 'key1'; // записываем ключ в переменную

console.log(obj[key]); // выведет 'a'


Задача 3

Дан следующий объект:

let obj = {'a': 1, 'b': 2, 'c': 3};

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

Нюансы объектов

Ключи из переменных в объектах имеют некоторые нюансы. Давайте изучим их вот на таком объекте, в котором для простоты будет только один элемент с ключом key:

let obj = {key: '!!!'};

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

let obj = {key: '!!!'};

console.log(obj['key']); // выведет '!!!'

Пусть теперь название нашего ключа хранится в переменной key:

let obj = {key: '!!!'};

let key = 'key'; // храним название в переменной

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

let obj = {key: '!!!'};let key = 'key';

console.log(obj[key]); // выведет '!!!'

То есть: при обращении к элементу по имени ключа мы должны это имя взять в кавычки, так как это строка. А при обращении по ключу, хранящемуся в переменной, кавычки будут лишними – так как переменные не нужно брать в кавычки.

Описанный нюанс часто является источником ошибок. Давайте посмотрим на примере, как возникают эти ошибки. Пусть дан вот такой объект:

let obj = {text: '!!!'};

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

let obj = {text: '!!!'};

console.log(obj[text]); // выдаст ошибку, так как переменной text нет

Еще хуже будет, если случайно совпало так, что переменная text у нас уже существует (для совсем других целей). В этом случае содержимое этой переменной и подставится вместо ключа.

Пусть для примера в переменной text лежит строка 'string'. Тогда JavaScript будет искать элемент с ключом string в нашем объекте, не найдет его и вернет undefined:

let text = 'string'; // переменная text с каким-то значением

let obj = {text: '!!!'};

console.log(obj[text]); // выведет undefined

А вот если так случайно окажется, что в нашем объекте по чистой случайности окажется ключ string – то на экран и выведется содержимое элемента с этим ключом string, а не с ключом text, как мы этого хотели:

let text = 'string'; // переменная text с каким-то значением

let obj = {text: '!!!', string: '???'};

console.log(obj[text]); // выведет '???' - содержимое элемента с ключом string

То есть наш код не будет выдавать ошибку в консоль, будет как-то работать, но делать не то, что мы хотели. Получим трудноуловимую ошибку и все потому, что мы забыли кавычки!

Нюансы альтернативного синтаксиса объектов

Пусть теперь у нас есть вот такой объект:

let obj = {text: '+++', key: '!!!'};

Давайте с помощью альтернативного синтаксиса выведем элемент с ключом text:

let obj = {text: '+++', key: '!!!'};

console.log(obj.text); // выведет '+++'

Пусть теперь мы ключ text будем хранить в переменной key:

let obj = {text: '+++', key: '!!!'};

let key = 'text'; // храним ключ в переменной

Давайте теперь выведем элемент, ключ которого хранится в переменной key. Если мы решим воспользоваться альтернативным синтаксисом – нас ждет сюрприз: вместо содержимого элемента с ключом text, мы увидим содержимое элемента с ключом key:

let obj = {text: '+++', key: '!!!'};

let key = 'text';

console.log(obj.key); // выведет '!!!'

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

Как вы уже поняли, я сделал в нашем объекте ключ, совпадающий с именем переменной. Если такого ключа не будет, то JavaScript будет искать элемент с ключом key, не найдет его и выведет undefined:

let obj = {text: '+++'};

let key = 'text';

console.log(obj.key); // выведет undefined

То есть наша переменная вообще никак не участвует в коде. Если ее убрать, то ничего и не поменяется:

let obj = {text: '+++'};

console.log(obj.key); // выведет undefined

20. Типизация примитивов и объектов

Типизация массивов и объектов в JavaScript

Давайте посмотрим, что выведет оператор typeof для объекта. Как и ожидалось, мы видим строку 'object'.

console.log(typeof {}); // выведет 'object'

А вот если проверить через typeof массив, то здесь поведение уже будет не очень ожидаемым – результатом также будет 'object', а не 'array', как можно было бы подумать:

console.log(typeof []); // тоже выведет 'object'

Дело в том, что на самом деле в JavaScript нет отдельного типа данных для массивов – каждый массив представляет собой частный случай объекта.

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

В JavaScript шесть примитивных типов данных: string, number, boolean, null, undefined, symbol. Запомните их количество и названия – это часто спрашивают на собеседованиях.


Задача 1

Не подсматривая в учебник перечислите все примитивные типы данных в JavaScript.


Задача 2

Не запуская код, определите, что выведется на экран в консоль:

console.log( typeof {a: 1, b: 2, c: 3} );

Задача 3

Не запуская код, определите, что выведется на экран в консоль:

console.log( typeof [1, 2, 3] );

Задача 4

Не запуская код, определите, что выведется на экран в консоль:

let arr = [1, 2, 3];

console.log( typeof arr );


Задача 5

Не запуская код, определите, что выведется на экран в консоль:

let arr = [1, 2, 3];

console.log( typeof arr[0] );


Задача 6

Не запуская код, определите, что выведется на экран в консоль:

let arr = ['1', '2', '3'];

console.log( typeof arr[0] );

Как определить массив ли объект

Как было указано выше, оператор typeof не позволяет различать массивы и объекты. Иногда, однако, это необходимо сделать.

На помощь придет функция Array.isArray():

console.log( Array.isArray([]) ); // выведет true

console.log( Array.isArray({}) ); // выведет false

Задача 7

Не запуская код, определите, что выведется на экран в консоль:

console.log( Array.isArray([1, 2, 3]) );

Задача 8

Не запуская код, определите, что выведется на экран в консоль:

console.log( Array.isArray({a: 1, b: 2, c: 3}) );

21. Передача объектов по ссылке

Передача объектов по ссылке в JavaScript

Массивы и объекты несколько отличаются от остальных примитивных типов данных. Сейчас мы посмотрим, в чем выражается это отличие.

Пусть у нас дан вот такой массив:

let a = [1, 2, 3];

Давайте скопируем этот массив в переменную b:

let a = [1, 2, 3];

let b = a;

Если бы мы имели дело с примитивами, то переменная b получила бы копию значения переменной a.

В случае с массивами и объектами все работает по другому. При такой операции, как вы выполнили выше, переменная b не копирует содержимое переменной a, а обе эти переменные начинают ссылаться на один и тот же массив.

На практике это означает то, что при изменении массива с помощью одной переменной, эти изменения автоматически появятся во второй переменной.

Смотрите пример:

let a = [1, 2, 3];

let b = a;

b[0] = '!'; // меняем массив из переменной b

console.log(a[0]); // выведет '!' - переменная a тоже поменялась

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

Если у нас есть две переменные, ссылающиеся на объект, то запись примитива в одну из переменных не повлияет на вторую переменную – она по-прежнему будет указывать на тот же объект:

let a = [1, 2, 3];

let b = a; // на объект ссылается и a, и b

a = 'primitive'; // запишем в a какой-то примитив

console.log(b); // выведет [1, 2, 3]

Кроме того, даже если записать в какую-то переменную другой массив или объект – это тоже не повлияет на вторую переменную:

let a = [1, 2, 3];

let b = a;

a = [3, 4, 5]; // запишем в a массив

console.log(b); // выведет [1, 2, 3]

console.log(a); // выведет [3, 4, 5]


Задача 1

Не запуская код, определите, что выведется в консоль:

let arr1 = [1, 2, 3];

let arr2 = arr1;

arr1[0] = 'a';

console.log(arr2);


Задача 2

Не запуская код, определите, что выведется в консоль:

let arr1 = [1, 2, 3];

let arr2 = arr1;

arr1[0] = 'a';

arr2[1] = 'b';

console.log(arr1);


Задача 3

Не запуская код, определите, что выведется в консоль:

let arr1 = [1, 2, 3];

let arr2 = arr1;

arr1[0] = 'a';

arr2[0] = 'b';

console.log(arr2);

22. Оператор in

Оператор in в JavaScript

С помощью оператора in можно проверять наличие свойства в объекте. Давайте посмотрим на примере. Пусть у нас дан вот такой объект:

let obj = {a: 1, b: 2, c: 3};

Давайте проверим наличие в нашем объекте какого-нибудь свойства:

console.log('b' in obj); // выведет true

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

console.log('x' in obj); // выведет false

Задача 1

Скажите, что выведется в консоль в результате выполнения следующего кода:

let obj = {a: 1, b: 2, c: 3, d: 4, e: 5};

console.log('e' in obj);

console.log('f' in obj);

23. Оператор delete

Оператор delete в JavaScript

Можно удалять элементы массивов и объектов с помощью оператора delete. Давайте посмотрим на примерах.

Объекты

Пусть у нас дан вот такой объект:

let obj = {a: 1, b: 2, c: 3};

Давайте удалим один из элементов нашего объекта:

delete obj.b;

Посмотрим, что у нас получилось:

console.log(obj); // выведет {a: 1, c: 3}

Задача 1

Скажите, что выведется в консоль в результате выполнения следующего кода:

let obj = {a: 1, b: 2, c: 3, d: 4, e: 5};

delete obj.e;

console.log('e' in obj);

24. Константы

Константы с массивами или объектами в JavaScript

Константы, содержащие массивы и объекты, работают интересным образом. JavaScript не разрешает изменять значения этих констант, но изменять свойства объектов и значения элементов массивов – можно.

Давайте посмотрим на примерах. Пусть у нас дан вот такой объект:

const obj = {a: 1, b: 2, c: 3};

Давайте попробуем записать в него что-то другое:

obj = 123; // ошибка

Давайте попробуем записать в константу другой объект:

obj = {x: 1, y: 2, z: 3};// ошибка

Однако, если мы попробуем изменить свойство объекта, то это сработает:

obj.a = '+'; // работает!

Задача 1

Что выведется в результате выполнения следующего кода:

const arr = ['a', 'b', 'c'];

arr[1] = '!';

console.log(arr);


Задача 2

Что выведется в результате выполнения следующего кода:

const arr = ['a', 'b', 'c'];

arr = [1, 2, 3];

console.log(arr);


Задача 3

Что выведется в результате выполнения следующего кода:

const arr = ['a', 'b', 'c'];

arr = ['a', 'b', 'c'];

console.log(arr);

25. Программирование через константы

Подход программирования через константы в JavaScript

В последнее время в JavaScript возник новый подход к объявлению переменных. Суть подхода в том, что вместо let мы везде используем const, кроме тех случаев, когда мы точно знаем, что значение будет переменным.

Смотрите пример:

const a = 1;

const b = 2;

const c = a + b;

console.log(c);

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

Я, однако, против этого модного подхода. Дело в том, что константы были придуманы для хранения значений типа числа Пи. То есть для таких значений, которые предопределены в вашей программе. Объявление же всех переменных константами противоречит этой идее.

Кроме того, не очень логично поведение массивов и объектов – мы объявляем их константами, при этом спокойно можем изменять их свойства. Что это за константы, если их можно изменять?

Часто объявление объектов константами используется для того, чтобы мы не смогли сменить тип данных – вместо объекта записать примитив. Но если нам нужен контроль типов, которого нет по умолчанию в JavaScript, то лучше воспользоваться его диалектом TypeScript.

В общем, вы можете пользоваться этим подходом, раз такая мода, но я против и дальше в учебнике переменные по-прежнему будут объявляться через let, как это было задумано авторами языка.


Задача 1

Перепишите следующий код через описанный подход:

let arr = [1, 2, 3, 4, 5];

let res = arr[1] + arr[2];

console.log(res);

Условия

26. Конструкция if-else

Конструкция if-else в JavaScript

Сейчас мы с вами изучим специальную конструкцию if-else, которая позволяет выполнять некоторый код в зависимости от выполнения какого-либо условия.

С помощью конструкции if-else мы можем задать программе, к примеру, вопрос “больше ли переменная a, чем переменная b“, и в зависимости от ответа выполнить или один код, или другой.

Синтаксис конструкции выглядит так:

if (операция сравнения) {

/*

расположенный здесь код выполниться,

если результат операция сравнения верный

*/

} else {

/*

расположенный здесь код выполниться,

если результат операция сравнения неверный

*/

}

Для операций сравнения в JavaScript существует много операторов. Давайте приступим к их изучению.

Операторы больше и меньше

Для проверки того, которое из значений больше, а которое меньше, используются операторы больше >, больше или равно >=, меньше <, меньше или равно <=.

Изучим их работу на практическом примере. Пусть у нас есть переменная test с каким-то значением:

let test = 1;

Давайте проверим, значение этой переменной больше нуля или нет:

let test = 1;

if (test > 0) {

alert('верно'); // сработает этотalert

} else {

alert('неверно');

}

А теперь поменяем значение переменной на отрицательное:

let test = -1; // поменяем значение переменной

if (test > 0) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert

}

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

let test = 0;

if (test > 0) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert

}

Давайте поменяем условие на больше или равно:

let test = 0;

if (test >= 0) {

alert('верно'); // сработает этот alert

} else {

alert('неверно');

}

Операторы меньше < и меньше или равно <= работают аналогично.


Задача 1

Если переменная test больше 10, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.


Задача 2

Если переменная test меньше 10, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.


Задача 3

Если переменная test больше или равна 10, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.


Задача 4

Если переменная test меньше или равна 10, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.

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

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

Давайте для примера проверим, что test переменная равна:

let test = 0; // пусть значение переменной равно 0

if (test == 0) {

alert('верно');// сработает этот alert, так как переменная равна 0

} else {

alert('неверно');

}

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

let test = 1; // пусть значение переменной равно 1

if (test == 0) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert, так как переменная НЕ равна 0

}

Задача 5

Если переменная test равна 10, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.

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

Существует также оператор !=, который наоборот, проверяет на неравенство. Давайте для примера проверим, что test переменная не равна 0:

let test = 1; // пусть значение переменной равно 1

if (test != 0) {

alert('верно'); // сработает этот alert, так как переменная НЕ равна 0

} else {

alert('неверно');

}

Поменяем значение переменной:

let test = 0; // пусть значение переменной равно 0

if (test != 0) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert, так как переменная равна 0

}

Задача 6

Если переменная test не равна 10, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.

Сравнение переменных

В примерах выше мы сравнивали переменную с каким-то числом. Но никто не запрещает нам сравнивать две переменные. Смотрите пример:

let test1 = 1;

let test2 = 2;

if (test2 > test1) {alert('верно'); // сработает этот alert, так как test2 больше test1} else {alert('неверно');

}

Задача 7

Даны переменные test1 и test2. Проверьте, что значение какой из этих переменных больше и выведите соответствующее сообщение на экран

27. Сравнение по типу данных

Типы данных и конструкция if-else в JavaScript

При использовании конструкции if можно сравнивать и строки. Для примера пусть в переменной test хранится какая-то строка, например 'abc':

let test = 'abc';

Давайте проверим, равно ли содержимое переменной test строке 'abc':

let test = 'abc';

if (test == 'abc') {

alert('верно'); // сработает этот alert, так как переменная равна 'abc'

} else {

alert('неверно');

}

Числа в кавычках

Как вы знаете, число в кавычках представляет собой строку. Например, '3' – это строка. Однако, при сравнении таких строк с настоящими числами JavaScript считает, что строка в кавычках равна такому же числу.

Давайте для примера сравним строку '3' и число 3:

if ('3' == 3) {

alert('верно'); // сработает этот alert - значения равны

} else {

alert('неверно');

}

Равенство по значению и типу

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

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

if ('3' === 3) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert

}

А вот при сравнении двух строк '3' на экран выведется 'верно':

if ('3' === '3') {

alert('верно'); // сработает этот alert

} else {

alert('неверно');

}

Так же, как и при сравнении чисел:

if (3 === 3) {

alert('верно'); // сработает этот alert

} else {

alert('неверно');

}

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

if (2 === 3) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert

}

Задача 1

Не запуская код, определите, что выведется на экран:

let test1 = '3';

let test2 = '3';

if (test1 == test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 2

Не запуская код, определите, что выведется на экран:

let test1 = '3';

let test2 = '3';

if (test1 === test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 3

Не запуская код, определите, что выведется на экран:

let test1 = 3;

let test2 = '3';

if (test1 == test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 4

Не запуская код, определите, что выведется на экран:

let test1 = 3;

let test2 = '3';

if (test1 === test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 5

Не запуская код, определите, что выведется на экран:

let test1 = 3;

let test2 = 3;

if (test1 === test2) {

alert('верно');

} else {

alert('неверно');

}

Неравенство по значению и типу

Кроме оператора != существует также оператор !==, учитывающий тип при сравнении. Давайте рассмотрим различия между ними на примерах.

Пусть с помощью оператора != сравниваются два числа 3. Данный оператор сравнивает значения на то, что они НЕ равны. Так как наши значения как раз-таки равны, то на экран выведется 'неверно':

if (3 != 3) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert, так как значения равны

}

Пусть теперь одно из наших значений будет в кавычках. В этом случае оператор != все равно посчитает их равными (так как совпадает значение, а тип не важен для данного оператора) и опять выведет 'неверно':

if ('3' != 3) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert, так как значения равны

}

Давайте теперь сравним два числа 3 с помощью оператора !==. Он также посчитает их равными и выведет 'неверно':

if (3 !== 3) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert, так как значения равны

}

А вот если теперь одну из троек взять в кавычки, то оператор !== посчитает наши тройки неравными, так как, хотя значения их и совпадают, но у них разный тип:

if ('3' !== 3) {

alert('верно'); // сработает этот alert, так как значения НЕ равны

} else {

alert('неверно');

}

Задача 6

Не запуская код, определите, что выведется на экран:

let test1 = '3';

let test2 = '3';

if (test1 != test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 7

Не запуская код, определите, что выведется на экран:

let test1 = '3';

let test2 = '3';

if (test1 !== test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 8

Не запуская код, определите, что выведется на экран:

let test1 = 3;

let test2 = '3';

if (test1 != test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 9

Не запуская код, определите, что выведется на экран:

let test1 = 3;

let test2 = '3';

if (test1 !== test2) {

alert('верно');

} else {

alert('неверно');

}

Задача 10

Не запуская код, определите, что выведется на экран:

let test1 = 3;

let test2 = 2;

if (test1 !== test2) {

alert('верно');

} else {

alert('неверно');

}

Нюансы

Обратите внимание на следующий код:

if (0 == '') {

alert('верно'); // выведет 'верно'

} else {

alert('неверно');

}

И на следующий:

if (0 == '0') {

alert('верно'); // выведет 'верно'

} else {

alert('неверно');}

28. Логическое И и ИЛИ

Сложные условия в if-else в JavaScript

Иногда может быть нужно составить какое-то сложное условие.

Для этого существуют операторы && (логическое И) и || (логическое ИЛИ).

Логическое И

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

let num = 3;

if (num > 0 && num < 10) {

alert('верно');

} else {

alert('неверно');

}

Условия могут налагаться не на одну переменную, а на разные. В следующем примере, если переменная num1 равна 2 и одновременно переменная num1 равна 3, только тогда выведется 'верно':

let num1 = 2;

let num2 = 3;

if (num1 == 2 && num2 == 3) {

alert('верно');

} else {

alert('неверно');

}

Если хотя бы одно из условий будет нарушено – то выведется 'неверно'.


Задача 1

Если переменная num больше нуля и меньше 5, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.


Задача 2

Если переменная num больше или равна 10 и меньше или равна 20, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.


Задача 3

Если переменная num1 равна или меньше 1, а переменная num2 больше или равна 3, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.

Логическое ИЛИ

Логическое ИЛИ требует выполнения хотя бы одного условия.

В следующем примере, если переменная num1 больше 0 или переменная num2 больше 0, то выведется 'верно' (достаточно выполнения хотя бы одного из условий):

let num1 = 10;

let num2 = -5;

if (num1 > 0 || num2 > 0) {

alert('верно'); // выведет 'верно'

} else {

alert('неверно');

}

Задача 4

Не запуская код определите, что выведется на экран:

let num1 = -10;

let num2 = -10;

if (num1 >= 0 || num2 >= 0) {

alert('верно');

} else {

alert('неверно');

}

Задача 5

Не запуская код определите, что выведется на экран:

let num1 = 0;

let num2 = 0;

if (num1 >= 0 || num2 >= 0) {

alert('верно');

} else {

alert('неверно');

}

Задача 6

Не запуская код определите, что выведется на экран:

let num1 = 0;

let num2 = 5;

if (num1 >= 0 || num2 >= 0) {

alert('верно');

} else {

alert('неверно');

}

Задача 7

Не запуская код определите, что выведется на экран:

let num1 = 5;

let num2 = 5;

if (num1 >= 0 || num2 >= 0) {

alert('верно');

} else {

alert('неверно');

}

Задача 8

Не запуская код определите, что выведется на экран:

let num1 = -5;

let num2 = 15;

if (num1 >= 0 || num2 >= 0) {

alert('верно');

} else {

alert('неверно');

}

Задача 9

Не запуская код определите, что выведется на экран:

let num = 1;

if (num == 0 || num == 1) {

alert('верно');

} else {

alert('неверно');

}

Задача 10

Не запуская код определите, что выведется на экран:

let num = 2;

if (num == 0 || num == 1) {

alert('верно');

} else {

alert('неверно');

}

Задача 11

Не запуская код определите, что выведется на экран:

let num = 2;

if (num == 0 || num == 1 || num == 2) {

alert('верно');

} else {

alert('неверно');

}

Приоритет операций сравнения

Операция && имеет приоритет над ||.

В следующем примере выведется 'верно', если переменная num от 0 до 5 ИЛИ от 10 до 20:

let num = 3;

if (num > 0 && num < 5 || num > 10 && num < 20) {

alert('верно');

} else {

alert('неверно');

}

Группировка условий

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

let num = 3;

if ( (num > 0 && num < 5) || (num > 10 && num < 20) ) {

alert('верно');

} else {

alert('неверно');

}

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


Задача 12

В приведенном ниже коде укажите приоритет операций в явном виде:

let num = 3;

if (num > 5 && num < 10 || num == 20) {

alert('верно');

} else {

alert('неверно');

}

Задача 13

В приведенном ниже коде укажите приоритет операций в явном виде:

let num = 3;

if (num > 5 || num > 0 && num < 3) {

alert('верно');

} else {

alert('неверно');

}

Задача 14

В приведенном ниже коде укажите приоритет операций в явном виде:

let num = 3;

if (num == 9 || num > 10 && num < 20 || num > 20 && num < 30) {

alert('верно');

} else {

alert('неверно');}

29. Инвертирование высказываний

Инвертирование высказываний в if-else

Рассмотрим следующий код:

if (num > 0 && num < 5) {

alert('верно');

} else {

alert('неверно');

}

Сейчас наше условие такое: num должно быть от 0 до 5. Давайте инвертируем это условие, то есть превратим его в его противоположность.

Противоположное условие получится таким: num должно быть меньше или равно 0 ИЛИ больше или равно 5:

if (num <= 0 || num >= 5) {

alert('верно');

} else {

alert('неверно');

}

Как вы видите, чтобы инвертировать условие, приходится несколько задуматься. Гораздо проще будет использовать оператор !, представляющий собой логическое НЕ. С помощью этого оператора нам достаточно поставить знак ! перед изначальным условием – и оно инвертируется само:

if ( !(num > 0 && num < 5) ) {

alert('верно');

} else {

alert('неверно');

}

Задача 1

Дан следующий код:

if (num1 >= 0 || num2 <= 10) {

alert('верно');

} else {

alert('неверно');

}

Используя оператор ! инвертируйте приведенное условие.

30. Конструкция if-else и булевы значения

Конструкция if-else и булевы значения

Пусть у нас есть какая-то булева переменная, которая может принимать значения true или false:

let test = true;

Давайте напишем if, проверяющий нашу переменную на значение true:

let test = true;

if (test === true) {

alert('верно');

} else {

alert('неверно');

}


Задача 1

Если переменная test равна true, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.


Задача 2

Если переменная test равна false, то выведите на экран слово 'верно', иначе выведите слово 'неверно'.

Логические значения и двойное равно

В предыдущем примере я использовал для сравнения оператор ===. В этом случае наша переменная сравнивалась на равенство true как по значению, так и по типу.

В нашей задаче можно использовать и оператор ==. Если в переменной test всегда будет одно из значений true или false, то ничего и не изменится:

let test = true; // тут пишем или true, или false

if (test == true) {

alert('верно');

} else {

alert('неверно');

}

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

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

Пусть, например, в переменной test будет число 1. В этом случае оно вначале преобразуется к логическому типу, то есть к true. И затем будет выполнено сравнение:

let test = 1;

if (test == true) {

alert('верно'); // сработает этот alert, тк 1 == true - это верно

} else {

alert('неверно');

}

А вот, к примеру, число 0 преобразуется к false. И наше условие в результате выведет 'неверно':

let test = 0;

if (test == true) {

alert('верно');

} else {

alert('неверно'); // сработает этот alert, тк 0 == true - это НЕверно

}

Напомню вам значения, которые при приведению к логическому типу дают false: 0, -0, +0, null, false, NaN, undefined, ” (пустая строка).


Задача 3

Не запуская код, определите, что выведется на экран:

let test = 1;

if (test == true) {

alert('верно');

} else {

alert('неверно');

}


Задача 4

Не запуская код, определите, что выведется на экран:

let test = 0;

if (test == true) {

alert('верно');

} else {

alert('неверно');

}

Задача 5js.Pm.Cd.BT

Не запуская код, определите, что выведется на экран:

let test = 1;

if (test == false) {

alert('верно');

} else {

alert('неверно');

}


Задача 6

Не запуская код, определите, что выведется на экран:

let test = 1;

if (test != true) {

alert('верно');

} else {

alert('неверно');

}


Задача 7

Не запуская код, определите, что выведется на экран:

let test = '';

if (test == false) {

alert('верно');

} else {

alert('неверно');

}


Задача 8

Не запуская код, определите, что выведется на экран:

let test;

if (test == true) {

alert('верно');

} else {

alert('неверно');

}


Задача 9

Не запуская код, определите, что выведется на экран:

let test = 3 * 'a';

if (test == true) {

alert('верно');

} else {

alert('неверно');

}

Сокращенный иф

Пусть, к примеру, мы хотим узнать, равна ли переменная test значению true. В этом случае конструкцию if можно записать так:

let test = true;

if (test == true) {

alert('верно');

} else {

alert('неверно');

}

При программировании такие проверки требуются очень часто, поэтому для них существует более изящная сокращенная форма: вместо if (test == true) можно написать просто if (test).

Давайте перепишем наш код в сокращенной форме:

let test = true;

if (test) { // эквивалентно if (test == true)

alert('верно');

} else {

alert('неверно');

}

Пусть теперь мы проверяем на то, что переменная test не равна true:

let test = true;

if (test != true) {

alert('верно');

} else {

alert('неверно');

}

В этом случае сокращенный синтаксис будет выглядеть так:

let test = true;

if (!test) { // используем логическое НЕ

alert('верно');

} else {

alert('неверно');

}

Аналогичное сокращение существует и для проверки на false.

Пусть дан вот такой код:

let test = true;

if (test == false) {

alert('верно');

} else {

alert('неверно');

}

Условие test == false на самом деле все равно, что test != true:

let test = true;

if (test != true) {// эквивалентноif (test == false)

alert('верно');

} else {

alert('неверно');

}

Ну, а такое условие мы уже научились сокращать в предыдущем примере. Сократим:

let test = true;

if (!test) {

alert('верно');

} else {

alert('неверно');

}


Задача 10

Перепишите следующий код с использованием сокращенного сравнения:

let test = true;

if (test == true) {

alert('верно');

} else {

alert('неверно');

}


Задача 11

Перепишите следующий код с использованием сокращенного сравнения:

let test = true;

if (test == false) {

alert('верно');

} else {

alert('неверно');

}


Задача 12

Перепишите следующий код с использованием сокращенного сравнения:

let test = true;

if (test != true) {

alert('верно');

} else {

alert('неверно');

}


Задача 13

Перепишите следующий код с использованием сокращенного сравнения:

let test = true;

if (test != false) {

alert('верно');

} else {

alert('неверно');

}

Нюанс

Учтите, что в сокращенных операциях сравнение идет по ==, а не по ===.


Задача 14

Не запуская код, определите, что выведется на экран:

let test = 3;

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 15

Не запуская код, определите, что выведется на экран:

let test = 'abc';

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 16

Не запуская код, определите, что выведется на экран:

let test = '';

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 17

Не запуская код, определите, что выведется на экран:

let test = 3 * 'abc';

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 18

Не запуская код, определите, что выведется на экран:

let test = null;

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 19

Не запуская код, определите, что выведется на экран:

let test = false;

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 20

Не запуская код, определите, что выведется на экран:

let test;

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 21

Не запуская код, определите, что выведется на экран:

let test = 0;

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 22

Не запуская код, определите, что выведется на экран:

let test = '0';

if (test) {

alert('верно');

} else {

alert('неверно');

}


Задача 23

Не запуская код, определите, что выведется на экран:

let test = -1;

if (test) {

alert('верно');

} else {

alert('неверно');

}

31.

Контент

 

 

Добавить комментарий

Belarusian BE Kazakh KK Russian RU Ukrainian UK
Авторизация
*
*
Регистрация
*
*
*
*
Открытый профиль общедоступен. (это не распространяется на вкладки вашего личного кабинета). Закрытый профиль закрывает все возможности найти или увидеть ваш личный кабинет посторонним. В любой момент, вы сможете изменить этот параметр в настройках личного кабинета.
Генерация пароля
логотип
Рекомендуем

Total Flow

Рекомендуем

Все самое интересное (Статьи)

Рекомендуем

Все самое вкусное (Рецепты)