Javascript для новичков на примерах - UPROGER

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

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

Переменные Javascript

Теперь мы можем сохранить некоторые данные в нашей программе! Что насчет динамики расчетов?

Функция прибавления 1 к указанному вами числу

Познакомьтесь с function. Это набор инструкций, направленных на то, чтобы сделать что-то полезное для нас. В приведенном выше примере функция addOneTo добавляет 1 к числу, которое мы предоставляем ей в качестве аргумента. Да, мы можем передавать данные функции, но это не обязательно. Это зависит от того, чего именно мы хотим достичь. Существует множество вариантов использования function.

Как мы можем увидеть результат выполнения этого кода? Давайте запишем следующее:

Зачем нам писать return внутри функции? Таким образом, наша функция фактически возвращает результат выполнения в том месте, где мы вызвали функцию. Если мы этого не сделаем, функция вычислит 1 + number и результат будет недействителен. О результате никто никогда не узнает.

Что означают скобки рядом с функцией Like addOneTo()? Таким образом мы вызываем функцию. Следовательно, код выполняется и дает нам результат.

Всегда ли нужно сохранять результат выполнения функции в переменную? Нет. Мы можем просто написать console.log(addToOne(1))и результат будет таким же.

Мы должны увидеть, что 2 в консоли браузера – результат выполнения. Перейдем к более реальному примеру

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

Почему вы вызываете const переменную? Это константа, и дать ей другое значение нельзя. Хотя мы можем изменить ее содержимое без переназначения. Например, вставка в массив, изменение свойств объекта. Я упрощаю это, поэтому называю это переменной. Есть еще несколько способов создать переменную: через let и var

Определим, как должны выглядеть данные. У нас есть список людей. У каждого из них есть электронная почта. Также могут быть другие свойства, такие как имя или возраст. Наша задача – получить только электронную почту человека. Итак, каждый человек – это объект.

Что такое объект в Javascript? Это тип данных, который содержит свойства или поля, связанные с сущностью. Как и в нашем случае.

Получение электронных писем людей

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

Зачем у аргумента array есть .map? Что это? array на самом деле является объектом. У всех объектов есть свойства. Поэтому .map – это свойство.

Присвоение свойств объекту

Массивы Javascript имеют встроенные свойства. Однако .map это не число или строка. Это функция! .map это функция, у которой есть один аргумент – другая функция.

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

Видите ли, мы передаем необработанную функцию в sumOf, но мы не вызываем их при передаче вот так: sumif(fn1(), fn2()). В этом случае нам нужно было бы переписать функцию sumOf следующим образом:

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

Что это такое person.email? Таким образом, мы считаем переменную person, которая является объектом для ее свойства email. Затем мы возвращаем электронное письмо человека.

.map возвращает новый преобразованный массив, который мы сохраняем в переменную emails и возвращаем.

С чем вы познакомились в данный момент:

Переменные. Вы можете указать своей программе, что сохранять в памяти во время выполнения.
Функции. Вы знаете, как передавать переменные в функции в качестве аргументов, как возвращать результат функции. Конечно, есть много языковых инструкций, которые нужно изучить, чтобы максимально использовать функции. Но теперь у вас есть основы и вы можете гуглить более узкие примеры.
Как записать вывод в консоль через console.log.
Массивы могут содержать много разных данных. То же применимо и к объектам.
У объектов есть свойства, которые можно назначить и переназначить, если нам это нужно. У них также есть встроенные свойства. Как .map для массивов.

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

Для работы с веб-страницей вам необходимо изучить DOM- часть Javascript. Приведем пример. Рассмотрим черный блок на веб-странице. Как только мы щелкнем по нему, его цвет изменится (если он черный, то станет красным, и наоборот).

Взгляните на нашу основную функцию там – toggleBlockColor. Она будет вызываться каждый раз, когда мы нажимаем на блок.

Измените цвет блока, если мы щелкнем по нему

Вы уже видели логическую переменную (человек, у которого была isEmployed собственность). Это может быть либо, true либо false. Новый способ объявления переменной – let. Это почти то же самое, что и const с одним большим отличием – ее можно переназначить.

И новая инструкция – использование if. Это позволяет нам выполнять код в зависимости от некоторых условий. Синтаксис следующий: if (CONDITION) {}где CONDITION– результат выполнения, который должен быть логическим – true или false. В скобках мы пишем код, который хотим выполнить, если CONDITION истина. У нас может быть else блок после него, если мы хотим выполнить другой фрагмент кода, если CONDITION ложь.

Алгоритм работы toggleBlackColor следующий:

Если isDefaultColorApplied это правда, мы меняем цвет блока на красный. И мы переназначаем isDefaultColorApplied на false. Таким образом, если в следующий раз мы щелкнем по блоку, выполнив часть кода else.
Если isDefaultColorApplied это ложь, мы меняем цвет блока на черный и переназначаем переменную на true. Так что в следующий раз мы поменяем цвет блока на красный.

Вы познакомились с:

использованием if. Теперь вы можете выполнять код в зависимости от некоторого условия
Некоторая часть Javascript, относящаяся к DOM, например document.getElementById, ищет элемент по его id на странице HTML.
Кроме того, у элемента есть некоторые методы обратного вызова, такие как onclick, который выполняется, если мы щелкаем по элементу.
Новый вид переменной – let. Его можно переназначить.