Взаимодействие: alert, prompt, confirm

Послание № 2

Взаимодействие: alert, prompt, confirm

Так как мы будем использовать браузер как среду разработки, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert, prompt и confirm.

A lert

Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».

Синтаксис:

alert(message);

Этот код отобразит окно в браузере и приостановит дальнейшее выполнение скриптов до тех пор, пока пользователь не нажмёт кнопку «OK».

Например:

alert("Hello");

Prompt

Это окно с сообщением и полем для данных, пользователь может что-то напечатать и нажать OK. Он также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc.

Функция prompt принимает два аргумента:

result = prompt(title, [default]);

Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.

Аргумент title — текст для отображения в окне, чаще всего это какой-либо вопрос или запрос.

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

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

Например:

let age = prompt('Сколько тебе лет?', 100);

alert(`Тебе ${age} лет!`); // Тебе 100 лет!

Важно!

Для IE: всегда устанавливайте значение по умолчанию. Второй параметр является необязательным, но если не указать его, то Internet Explorer установит значение "undefined" в поле для ввода. Поэтому чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:

let test = prompt("Test", ' '); // <-- для IE

Confirm

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.

Результат true, если нажата кнопка OK. В других случаях – false.

Например:

let isBoss = confirm("Ты здесь главный?");

alert(isBoss); // true, если нажата OK

Ограничения alert, prompt, confirm

На все указанные методы распространяются два ограничения:

1. Расположение окон определяется браузером. Обычно окна находятся в центре.

2. Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.

Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатым функционалом для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.

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

Строки могут содержать специальные символы, которые форматируют текст прямо из кода. Самый часто используемый из таких символов – это «перевод строки». Он обозначается как \n, например:

alert('Привет\nМир'); // выведет "Мир" на новой строке

Есть и более редкие символы, вот их список:

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

Символ Описание \n New line \t Tab \uNNNN Символ в кодировке Юникод с шестнадцатеричным кодом `NNNN`. Например, `\u00A9` -- юникодное представление символа копирайт ©

Экранирование специальных символов

Если строка в одинарных кавычках, то внутренние одинарные кавычки внутри должны быть экранированы, то есть снабжены обратным слешем \', вот так:

var str = 'I\'m a JavaScript programmer';

В двойных кавычках – экранируются внутренние двойные:

var str = "I'm a JavaScript \"programmer\" ";

alert(str); // I'm a JavaScript "programmer"

Экранирование служит исключительно для правильного восприятия строки JavaScript. В памяти строка будет содержать сам символ без '\'.

Сам символ обратного слэша '\' является служебным, поэтому всегда экранируется, т.е пишется как \\:

var str = ' символ \\ ';

alert(str); // символ \

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

alert("\a"); // a

// идентично alert("a");

Операторы

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

Несколько операторов мы знаем со школы – это обычные арифметические действия (+, -, *, /), но есть и ряд особенных операторов, с которыми мы тоже должны познакомиться.

Термины: «унарный оператор», «бинарный оператор» и «операнд»

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

Операнд – то, к чему применяется оператор. Например, 5 * 2 – оператор умножения с левым и правым операндами, то есть 5 или 2 в данном случае — это операнд.

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

var x = 1;

x = -x;

alert(x); // -1, применили унарный минус

Бинарным оператором называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:

var x = 1, y = 3;

alert(y - x); // 2, бинарный минус

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

Приоритет

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

Из школы мы знаем, что умножение в выражении 2 + 2 * 2 выполнится раньше сложения, т.к. его приоритет выше, а скобки явно задают порядок выполнения. Но в JavaScript – гораздо больше операторов, поэтому существует целая таблица приоритетов. Она содержит как уже пройденные операторы, так и те, которые мы еще не проходили. В ней каждому оператору задан числовой приоритет. Тот, у кого число больше – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.

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

Приоритет	Тип оператора	Ассоциативность	Операторы
20	Группировка	не определено	(…)
17	Постфиксный инкремент	не определено	… ++
	Постфиксный декремент		… --
16	Унарный плюс	справа налево	+ …
	Унарный минус		- …
	Префиксный инкремент		++ …
	Префиксный декремент		-- …
	typeof		typeof …
14	Умножение	слева направо	… * …
	Деление		… / …
	Остаток		… % …
13	Сложение	слева направо	… + …
	Вычитание		… - …
3	Присваивание	справа налево	… = …
			… += …
			… -= …
			… **= …
			… *= …
			… %= …
1	Запятая / Последовательность	слева направо	…, …

Оператор запятая

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

let a = 1, b = 3, c = 40; // три операции в одной строке

Такие трюки используются JavaScript для укорачивания кода.

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

Обратим внимание, в таблице приоритетов также есть оператор присваивания =.

У него – один из самых низких приоритетов: 3. Поэтому, когда переменную чему-либо присваивают, например, x = 2 + 2 * 2 сначала выполнится арифметика, а уже затем – произойдёт присваивание.

var x = 2 * 2 + 1;

alert(x); // 5

Оператор "=" возвращает значение

Метод Number()

Number () используется для преобразования переменных JavaScript в числа, например:

Number(true); // returns 1

Number(false); // returns 0

Number("10"); // returns 10

Number("10 20"); // returns NaN

Number("John"); // returns NaN

Если число не может быть преобразовано, возвращается значение NaN (не число).

Очень часто метод Number(), используется при работе с датами, например:

Number(new Date("2017-09-30")); // returns 1506729600000

Метод Number () возвращает число миллисекунд с момента 1.1.1970.

Метод parseInt()

parseInt() анализирует строку и возвращает целое число.

Пробелы разрешены. Возвращается только первое число, например:

parseInt("10"); // returns 10

parseInt("10.33"); // returns 10

parseInt("10 20 30"); // returns 10

parseInt("10 years"); // returns 10

parseInt("years 10"); // returns NaN

Если число не может быть преобразовано, возвращается значение NaN (не число).

Метод parseFloat()

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

parseFloat("10.33"); // returns 10.33

parseFloat("years 10.25"); // returns NaN

Если число не может быть преобразовано, возвращается значение NaN (не число).

Числа

Так как мы уже кратко знакомились с числами, мы просто рассмотрим некоторые особенности при работе с ними

Деление на ноль, Infinity

Представьте, что вы собираетесь создать новый язык… Люди будут называть его «JavaScript» (или «LiveScript»… неважно).

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

Но создатель JavaScript решил пойти математически правильным путем. Ведь чем меньше делитель, тем больше результат. При делении на очень-очень маленькое число должно получиться очень большое. В математическом анализе это описывается через пределы, и если подразумевать предел, то в качестве результата деления на 0 мы получаем «бесконечность», которая обозначается символом ∞ (в JS - Infinity).

alert(1 / 0); // Infinity

alert(12345 / 0); // Infinity

Infinity – особенное значение, которое ведет себя в точности как математическая бесконечность ∞.

· Infinity больше любого числа.

· Добавление к бесконечности любого числа не меняет её.

alert(Infinity > 1234567890); // true

alert(Infinity + 5 == Infinity); // true

Бесконечность можно присвоить и в явном виде: var x = Infinity.

Бывает и минус бесконечность -Infinity:

alert(-1 / 0); // -Infinity

Бесконечность можно получить также, если сделать ну очень большое число, для которого количество разрядов в двоичном представлении не помещается в соответствующую часть стандартного 64-битного формата, например:

alert(1e500); // Infinity

NaN

Если математическая операция не может быть совершена, то возвращается специальное значение NaN (Not-A-Number).

Например, деление 0/0 в математическом смысле неправильно, поэтому его результат NaN:

alert(0 / 0); // NaN

Значение NaN используется для обозначения математической ошибки и обладает следующими свойствами:

· Значение NaN – единственное в своем роде, которое не равно ничему, включая себя.

· Значение NaN можно проверить специальной функцией isNaN(n), которая преобразует аргумент к числу и возвращает true, если получилось NaN, и false – для другого значения.

var n = 0 / 0;

alert(isNaN(n)); // true

alert(isNaN("12")); // false, строка преобразовалась к обычному числу 12

· Значение NaN «прилипчиво», т.е. любая операция с NaN возвращает NaN.

Неточные вычисления

Запустите этот пример:

alert(0.1 + 0.2 == 0.3);

Запустили? Если нет – все же сделайте это.

Ок, вы запустили его. Он вывел false. Результат несколько странный, не так ли? Возможно, ошибка в браузере? Поменяйте браузер, запустите еще раз.

Хорошо, теперь мы можем быть уверены: 0.1 + 0.2 это не 0.3. Но тогда что же это?

alert(0.1 + 0.2); // 0.30000000000000004

Как видите, произошла вычислительная ошибка, результат 0.1 + 0.2 немного больше, чем 0.3.

alert(0.1 + 0.2 > 0.3); // true

Всё дело в том, что в стандарте IEEE 754 на число выделяется 8 байт (64 бита), не больше и не меньше.

Число 0.1 (одна десятая) записывается просто в десятичном формате. Но в двоичной системе счисления это бесконечная дробь, так как единица на десять в двоичной системе так просто не делится. Также бесконечной дробью является 0.2 (2/10).

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

alert(0.1.toFixed(20)); // 0.10000000000000000555

Когда мы складываем 0.1 и 0.2, то две неточности складываются, получаем незначительную, но всё же ошибку в вычислениях. Конечно, это не означает, что точные вычисления для таких чисел невозможны. Они возможны. И даже необходимы. Например, есть два способа сложить 0.1 и 0.2:

1. Сделать их целыми, сложить, а потом поделить:

alert((0.1 * 10 + 0.2 * 10) / 10); // 0.3

Это работает, так как числа 0.1*10 = 1 и 0.2*10 = 2 могут быть точно представлены в двоичной системе.

2. Сложить, а затем округлить до разумного знака после запятой. Округления до 10-го знака обычно бывает достаточно, чтобы отсечь ошибку вычислений:

var result = 0.1 + 0.2;

alert(+result.toFixed(10)); // 0.3

Забавный пример

Привет! Я – число, растущее само по себе!

alert(9999999999999999); // выведет 10000000000000000

Причина та же – потеря точности.

Из 64 бит, отведённых на число, сами цифры числа занимают до 52 бит, остальные 11 бит хранят позицию десятичной точки и один бит – знак. Так что если 52 бит не хватает на цифры, то при записи пропадут младшие разряды.

Интерпретатор не выдаст ошибку, но в результате получится «не совсем то число», что мы и видим в примере выше. Как говорится: «как смог, так записал».

Ради справедливости заметим, что ошибка в точности для чисел с плавающей точкой сохраняется в любом другом языке, где используется формат IEEE 754, включая Java, C, PHP, Ruby, Perl, Python.

IsFinite(n)

Итак, в JavaScript есть обычные числа и три специальных числовых значения: NaN, Infinity и -Infinity.

Обычно если мы хотим от посетителя получить какое-нибудь число, то значения в виде Infinity или NaN нам не подходят. Для того чтобы отличить «обычные» числа от таких специальных значений, существует функция isFinite(), она преобразует аргумент к числу и возвращает true, если это не NaN/Infinity/-Infinity:

alert(isFinite(1)); // true

alert(isFinite(Infinity)); // false

alert(isFinite(NaN)); // false

Обертки простых типов

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

(1.23).toFixed(1); //"1.2"

"text".toUpperCase(); //"TEXT"

true.toString(); //"true"

При этом, конечно, значения примитивных типов объектами не являются.

Для организации доступа к «свойствам» значений примитивных типов JavaScript, при необходимости, создаёт объекты-обёртки, которые, после того, как они оказываются ненужными, уничтожаются. Процесс создания и уничтожения объектов-обёрток оптимизируется JS-движком.

Объектные обёртки есть у значений числового, строкового и логического типов. Объекты соответствующих типов представлены функциями-конструкторами Number, String, и Boolean.

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

Num. toFixed (precision)

Существует также специальный метод num.toFixed(precision), который округляет число num до точности precision и возвращает результат в виде строки:

var n = 12.34;

alert(n.toFixed(1)); // "12.3"

Округление идёт до ближайшего значения, аналогично Math.round:

var n = 12.36;

alert(n.toFixed(1)); // "12.4"

Итоговая строка, при необходимости, дополняется нулями до нужной точности:

var n = 12.34;

alert(n.toFixed(5)); // "12.34000", добавлены нули до 5 знаков после запятой

Если нам нужно именно число, то мы можем получить его, применив '+' к результату n.toFixed(..):

var n = 12.34;

alert(+n.toFixed(5)); // 12.34

Объект Math

Объект Math является встроенным объектом, хранящим в своих свойствах и методах различные математические константы и функции.

В отличие от других глобальных объектов, все свойства и методы объекта Math являются статическими. Вы ссылаетесь на константу π через Math.PI и вызываете функцию синуса через Math.sin(x), где x является аргументом метода.

Константы в JavaScript определены с полной точностью действительных чисел.

Свойства объекта Math

На самом деле свойств намного больше, тут я представил лишь наиболее востребованные:

· Math.E — число Эйлера или Непера, основание натуральных логарифмов, равное 2,718.

· Math.PI — отношение длины окружности круга к его диаметру, приблизительно равно 3,14159.

Методы объекта Math

Как и со свойствами объекта Math, методов намного больше, я представил наиболее востребованные:

Math.ceil(x) —возвращает наименьшее целое число, большее, либо равное указанному числу.

Math.floor(x) — возвращает наибольшее целое число, меньшее, либо равное указанному числу.

Math.max([x[, y[, …]]]) — возвращает наибольшее число из своих аргументов.

Math.min([x[, y[, …]]]) — возвращает наименьшее число из своих аргументов.

Math.pow(x, y) — основание в степени экспоненты, значение выражения основания экспонента.

Math.random() — возвращает псевдослучайное число в диапазоне от 0 до 1.

Math.round(x) — возвращает значение числа, округлённое до ближайшего целого.

Math.sqrt(x) — возвращает положительный квадратный корень числа.

Послание № 2

Взаимодействие: alert, prompt, confirm

Так как мы будем использовать браузер как среду разработки, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert, prompt и confirm.

A lert

Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».

Синтаксис:

alert(message);

Этот код отобразит окно в браузере и приостановит дальнейшее выполнение скриптов до тех пор, пока пользователь не нажмёт кнопку «OK».

Например:

alert("Hello");

Prompt

Это окно с сообщением и полем для данных, пользователь может что-то напечатать и нажать OK. Он также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc.

Функция prompt принимает два аргумента:

result = prompt(title, [default]);

Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.

Аргумент title — текст для отображения в окне, чаще всего это какой-либо вопрос или запрос.

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

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

Например:

let age = prompt('Сколько тебе лет?', 100);

alert(`Тебе ${age} лет!`); // Тебе 100 лет!

Важно!

Для IE: всегда устанавливайте значение по умолчанию. Второй параметр является необязательным, но если не указать его, то Internet Explorer установит значение "undefined" в поле для ввода. Поэтому чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:

let test = prompt("Test", ' '); // <-- для IE

Confirm

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.

Результат true, если нажата кнопка OK. В других случаях – false.

Например:

let isBoss = confirm("Ты здесь главный?");

alert(isBoss); // true, если нажата OK