Функции

Зачастую нам надо повторять одно и то же действие во многих частях программы.

Чтобы не повторять один и тот же код во многих местах, придуманы функции. 
Функции являются основными «строительными блоками» программы.

Для создания функций мы можем использовать объявление функции.

Вначале идёт ключевое слово function, после него имя функции, затем список параметров в круглых скобках через запятую (в вышеприведённом примере он пустой) и, наконец, код функции, также называемый «телом функции», внутри фигурных скобок.

Наша новая функция может быть вызвана по её имени: showMessage().

#функции #function

Решайте практические тесты из собеседований на нашем втором канале @tests_js

prompt

Так как браузер используется как демо-среда, необходимо знать функцию prompt.

Функция prompt принимает два аргумента:
 - title
Текст для отображения в окне.
 - default
Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result. 
Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc. 
В этом случае значением result станет null.

#promt #фуекции

Побитовые операторы

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

Поддерживаются следующие побитовые операторы:
- AND (и) - &
- OR (или) - |
- XOR (исключающее или) - ^
- NOT (не) - ~
- LEFT SHIFT (левый сдвиг) - <<
- RIGHT SHIFT (правый сдвиг) - >>
- ZERO-FILL RIGHT SHIFT (правый сдвиг с заполнением нулями) - >>>

#побитовые_операторы #основы

Точка с запятой

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

В JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

Код на картинке выше выведет 6, потому что
JavaScript не вставляет здесь точку с запятой. 
Интуитивно очевидно, что, если строка заканчивается знаком "+", значит, это «незавершённое выражение», поэтому точка с запятой не требуется. 

И в этом случае всё работает, как задумано.

#точка_с_запятой #основы

Решайте практические тесты из собеседований на нашем втором канале @tests_js

Квадратные скобки в объекте

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

На примере выше JavaScript видит, что мы обращаемся к свойству user.likes, а затем идёт непонятное слово birds. В итоге синтаксическая ошибка.

Точка требует, чтобы ключ был именован по правилам именования переменных. То есть не имел пробелов, не начинался с цифры и не содержал специальные символы, кроме $ и _.

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

#квадратные_скобки #объекты

Условный оператор „?“

Иногда нам нужно определить переменную в зависимости от условия.

Так называемый «условный» оператор «вопросительный знак» позволяет нам сделать это более коротким и простым способом.

Оператор представлен знаком вопроса ?. Его также называют «тернарный», так как этот оператор, единственный в своём роде, имеет три аргумента.

Сначала вычисляется условие: если оно истинно, тогда возвращается значение1, в противном случае – значение2.

#условный_опрератор #основы

Решайте практические тесты из собеседований на нашем втором канале @tests_js

Комментарии

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

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

Однострочные комментарии начинаются с двойной косой черты //.
Часть строки после // считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.

Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */.
Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* … */, он не будет исполняться.

#коментарии #основы

alert

Так как браузер используется как демо-среда, необходимо знать функцию alert.
Эта функция показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».

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

alert принимает только один строковый аргумент!

#alert #функции

Синтаксис new Function

Существует ещё один вариант объявлять функции. Он используется крайне редко, но иногда другого решения не найти.

Функция создаётся с заданными аргументами arg1...argN и телом functionBody.

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

new Function позволяет превратить любую строку в функцию. Например, можно получить новую функцию с сервера и затем выполнить её.

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

#функции #new_function

Внутреннее устройство массива

Массив – это особый подвид объектов. 
Квадратные скобки, используемые для того, чтобы получить доступ к свойству arr[0] – это по сути обычный синтаксис доступа по ключу, как obj[key], где в роли obj у нас arr, а в качестве ключа – числовой индекс.

Массивы расширяют объекты, так как предусматривают специальные методы для работы с упорядоченными коллекциями данных, а также свойство length. 
Но в основе всё равно лежит объект.

Следует помнить, что в JavaScript существует 8 основных типов данных. 
Массив является объектом и, следовательно, ведёт себя как объект.

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

#массив #внутреннее_устройство_массива

Проверка isFinite и isNaN

Это специальные числовые значения:

 - Infinity — особенное численное значение, которое ведёт себя в точности как математическая бесконечность ∞.
 - NaN представляет ошибку.

Эти числовые значения принадлежат типу number, но они не являются «обычными» числами, поэтому есть функции для их проверки:

 - isNaN(value) преобразует значение в число и проверяет является ли оно NaN.
Нужна ли нам эта функция? Разве не можем ли мы просто сравнить === NaN? К сожалению, нет. 
Значение NaN уникально тем, что оно не является равным ни чему другому, даже самому себе.

 - isFinite(value) преобразует аргумент в число и возвращает true, если оно является обычным числом, т.е. не NaN/Infinity.

#isFinite #isNaN

Флаги свойств

Помимо значения value, свойства объекта имеют три специальных атрибута (так называемые «флаги»).

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

Обычно они скрыты. Когда мы создаём свойство «обычным способом», все они имеют значение true. 
Но мы можем изменить их в любое время.

Метод Object.getOwnPropertyDescriptor позволяет получить полную информацию о свойстве.
Синтаксис можете увидеть на картинке выше.

 - obj
Объект, из которого мы получаем информацию.
 - propertyName
Имя свойства.

Возвращаемое значение – это объект, так называемый «дескриптор свойства»: он содержит значение свойства и все его флаги.

#флаги_свойств #объекты

Рекурсия

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

В процессе выполнения задачи в теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова – когда функция вызывает сама себя. Это как раз и называется рекурсией.

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

На картинке выше когда функция pow(x, n) вызывается, исполнение делится на две ветви:

 - Если n == 1, тогда всё просто. Эта ветвь называется базой рекурсии, потому что сразу же приводит к очевидному результату: pow(x, 1) равно x.

 - Мы можем представить pow(x, n) в виде: x * pow(x, n - 1).

Эта ветвь – шаг рекурсии: мы сводим задачу к более простому действию (умножение на x) и более простой аналогичной задаче (pow с меньшим n).

Функция pow рекурсивно вызывает саму себя до n == 1.

#рекурсия #функции

innerHTML: содержимое элемента

Свойство innerHTML позволяет получить HTML-содержимое элемента в виде строки.

Мы также можем изменять его. Это один из самых мощных способов менять содержимое на странице.

На картинке выше содержимое document.body, скрипт полностью заменяет его.

#dom #браузер

Кавычки

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

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

Ещё одно преимущество обратных кавычек — они могут занимать более одной строки, как на картинке выше.

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

#кавычки #строки

Function Expression

Функция в JavaScript – это не магическая языковая структура, а особого типа значение.
Синтаксис, который часто используется называется Function Declaration (Объявление Функции).

Существует ещё один синтаксис создания функций, который называется Function Expression (Функциональное Выражение).

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

Смысл обоих примеров кода одинаков: "создать функцию и поместить её значение в переменную sayHi"

#функции #function_expression

Браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. 
Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий:

События мыши:
 - click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
 - contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
 - mouseover / mouseout – когда мышь наводится на / покидает элемент.
 - mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
 - mousemove – при движении мыши.

События на элементах управления:
 - submit – пользователь отправил форму <form>.
 - focus – пользователь фокусируется на элементе, например нажимает на <input>.

Клавиатурные события:
 - keydown и keyup – когда пользователь нажимает / отпускает клавишу.

#браузерные_события #DOM