Основы JavaScript для начинающих разработчиков

Основы JavaScript для начинающих разработчиков

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

Что такое JavaScript?​

JavaScript является скриптовым языком программирования, который позволяет добавлять интерактивность на веб-сайты.​ Этот язык разработки основан на стандарте ECMAScript и поддерживается всеми современными веб-браузерами.​ JavaScript может также выполняться в средах, отличных от браузера, таких как Node.js.​

Основные концепции JavaScript

JavaScript основан на объектно-ориентированной парадигме программирования.​ Основными концепциями являются⁚

  • Переменные⁚ Переменные используются для хранения значений.​ Они должны быть объявлены с помощью ключевого слова var, let или const.​
  • Типы данных⁚ JavaScript поддерживает различные типы данных, такие как числа, строки, булевы значения и объекты.​
  • Функции⁚ Функции в JavaScript используются для выполнения определенных действий.​ Они могут принимать аргументы и возвращать значения.​
  • Условные операторы⁚ Условные операторы, такие как if и switch, позволяют выполнять различные операции в зависимости от условий.​
  • Циклы⁚ Циклы позволяют выполнять определенный блок кода несколько раз.​ Наиболее распространенные циклы в JavaScript ー это for и while.​
  • Объекты⁚ В JavaScript объекты используются для хранения данных и связанных с ними методов.​ Они представляют собой коллекцию свойств с ключами и значениями.​

Примеры кода

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

Пример 1⁚ Приветствие пользователя


var name = prompt("Введите ваше имя");
alert("Привет, " + name);

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

Пример 2⁚ Вычисление суммы чисел


var a = 5;
var b = 10;
var sum = a + b;
console.​log(sum);

В этом примере мы объявляем две переменные a и b, затем складываем их значения и выводим результат в консоль с помощью функции console.​log.​

JavaScript ⏤ мощный язык программирования, который позволяет создавать интерактивные веб-сайты и приложения.​ В этой статье мы рассмотрели основы JavaScript, такие как переменные, типы данных, функции, условные операторы, циклы и объекты.​ Благодаря этому руководству, вы теперь обладаете базовыми знаниями JavaScript и можете начать создавать собственные программы.​

Материал, который мы публикуем сегодня, посвящен основам JavaScript и ориентирован на начинающих разработчиков. Его также можно рассматривать как небольшой справочник по основным структурам JS. В частности, он охватывает систему типов данных, переменные, таблицы, функции, объекты объектов и другие свойства языка.

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

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

Единственный номер, доступный в JavaScript, — это двойной номер мобильного подразделения. Это делает оценку некоторых выражений численно неверной. Вы, наверное, уже знаете, что цена 0,1 + 0,2 в JS не равна 0,3. Напротив, с целыми числами таких проблем не возникает. То есть, 1 + 2 === 3.

В JavaScript есть числа, которые представляют собой объекты Number Price Object. Объекты Number можно создавать с помощью команды var a = new Number (10) или полагаясь на автоматическое поведение, описанное выше. Это позволяет вызывать методы, хранящиеся в number.prototype, особенно при применении к элементу грамматики number.

ЧИТАТЬ ЕЩЁ:  Создаем интуитивно понятный интерфейс для сайта

Существуют общие функции, предназначенные для преобразования значений других типов в числовые выражения. Это parsint (), parsefloat () и number (). В этом случае они функционируют как обычные преобразования типов.

Если в результате числового действия получается что-то, что не является числом (во время вычисления или при попытке преобразовать что-то в число), JavaScript не выдает ошибку, а представляет результат такого действия как NAN (Not-Anumber). Чтобы проверить, является ли значение NAN, можно использовать функцию ISNAN ().

Обратите внимание, что арифметические операции в JS работают примерно так же, но оператор + может создавать как числа, так и строковые союзы.

В основном.

Строки JavaScript представляют собой последовательности символов Unicode. Буквенно-цифровые символы создаются путем заключения помещаемого в них текста в двойные («) или простые (‘) кавычки. Как упоминалось выше, мы можем полагаться на буквенно-цифровые обозначения, чтобы предоставить оберткам множество полезных методов, таких как оригинальные substring(), indexof (), и concat ().

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

Разумные значения.

Логические типы данных JS представлены двумя значениями: true и false. Язык может автоматически преобразовывать различные значения в логические типы данных. Например, null, undefined, » (пустая строка), 0 и NaN являются ложными, за исключением логического значения false. Все остальное реально, включая все предметы. То, что вы считали истинным, становится истинным, а то, что вы считали ложным, становится ложным. См. следующий пример. Следуя вышеописанному принципу, пустой буквенно-цифровой символ преобразуется в false, а результатом выполнения кода является буквенно-цифровой символ. Это ложь.

Объекты

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

Самый простой способ создать объект — использовать синтаксис синтаксиса объекта.

Свойства объекта можно читать, добавлять, редактировать и удалять в любое время. Послушайте, как это делается:.

  • Чтение свойства: object.name, object[expression].
  • Запись данных в свойство (если доступное свойство не существует, добавляется новое свойство с указанным ключом): object.name = value , object[expression] = value.
  • Удаление свойства: delete object.name , delete object[expression].

Языковые объекты реализованы в виде хэш-таблиц. Простую хэш-таблицу можно создать с помощью команды Object.create(null).

Если объект должен быть неизменяемым, можно использовать команду Object.freeze().

Чтобы перечислить все свойства объекта, можно использовать команду Object.keys().

▍ Сравнение примитивных типов и значений объектов

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

Переменные

В JavaScript переменные могут быть объявлены с помощью ключевых слов var, let и const.

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

Ключевое слово let очень похоже на var, за исключением того, что переменные, объявленные с помощью ключевого слова let, являются блочными.

Учитывая, что переменные, объявленные с помощью ключевого слова const, также имеют область видимости блока и что значения этих переменных не могут быть изменены, их правильнее называть «константами». Ключевое слово const, которое замораживает значение объявленной переменной, можно сравнить с методом Object.freeze(), который замораживает объект.

Если переменная объявлена вне функции, ее область видимости является глобальной.

Массивы

Массивы в JavaScript реализуются с помощью объектов. Поэтому, когда мы говорим о массивах, мы на самом деле говорим о массивоподобных объектах. Указатели можно использовать для работы с элементами массива. Числовые указатели преобразуются в строки и используются в качестве имен для доступа к значениям элементов массива. Например, структура типа arr[1] похожа на структуру типа arr[‘1’], обе получают доступ к одному и тому же значению: arr[1] === arr[‘1’]. Согласно вышеизложенному, простой массив, объявленный командой let arr = [‘A’, ‘B’, ‘C’], представляется как объект вида

ЧИТАТЬ ЕЩЁ:  11 трендов веб-дизайна, которые мы хотели бы видеть

Удаление элементов массива с помощью команды delete оставляет в массиве пробелы. Чтобы обойти эту проблему, можно использовать команду delete(), но она работает медленнее, так как после удаления элемента оставшиеся элементы массива перемещаются влево, фактически в начало массива.

Методы массивов упрощают реализацию структур данных, таких как стеки и очереди.

Функции

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

Функции могут быть объявлены тремя способами

  • Традиционные объявления функций (объявления функций или декларации функций).
  • Использование выражений функций, также известных как литералы функций.
  • Использование синтаксиса функции Arrow.

▍ Классическое объявление функции.

При таком подходе к объявлению функции действуют следующие правила

  • Первым ключевым словом в строке объявления функции является function.
  • Функции должны быть названы.
  • Благодаря механизму поднятия объявления функции в начало области видимости, в которой она объявлена, функция может быть использована в коде до ее объявления.

▍ Функциональные выражения.

При использовании выражений функций обратите внимание на следующее

  • Ключевое слово function больше не является первым словом в строке объявления функции.
  • Вам не нужно давать имя функции. Можно использовать как неименованные, так и именованные функциональные выражения.
  • Команда вызова такой функции должна следовать за командой объявления.
  • Такие функции могут быть выполнены сразу после объявления с помощью синтаксиса IIFE (Immediately Invoked Function Expression).

Функции стрелок

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

▍ Как вызывать функции

Функции могут быть вызваны различными способами

Простые вызовы функций

Вызов функции как метода объекта

Вызов функции в качестве конструктора

Вызов функции в качестве метода apply()

Вызов функции в качестве метода bind()

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

Функции имеют два псевдопараметра: this и arguments.

▍ Ключевые слова.

Ключевое слово Это представляет собой основу функции. Значение, которое она представляет, зависит от того, как вызывается функция. Вот значения, которые принимает ключевое слово в зависимости от функции (это примеры кода, структура которого используется здесь и объяснена выше):.

  • Нормальный вызов функции — окно / не определено.
  • Вызов функции как метод объекта — TheObject.
  • Вызов функции как создатель — новый объект.
  • apply method () — вызов функции с объектом.
  • bind method () — вызов функции, использующей объект.

ceal Ключевые слова.

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

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

Оператор.

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

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

ЧИТАТЬ ЕЩЁ:  Недокументированные приемы CSS

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

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

Оператор typeof () можно использовать для поиска типа данных, хранящихся в переменной.

Однопоточная модель выполнения

Среда выполнения JavaScript является однопоточной. Это выражается, в частности, в том, что две функции не могут выполняться одновременно (за исключением асинхронного выполнения кода, которое здесь не рассматривается). Среда выполнения имеет очередь событий SO -CALLED, в которой хранится список задач, подлежащих обработке. В результате модель выполнения JS с использованием потоков не имеет проблем с блокировкой ресурсов и поэтому не требует механизма блокировки. Однако код, попавший в очередь, должен быть выполнен быстро. Когда основной поток перегружается в приложение браузера, страница приложения не отвечает, и браузеру рекомендуется закрыть страницу.

Обработка исключений

JavaScript имеет механизм для обработки исключений. Это работает очень обычным образом. Для борьбы с кодами ошибок используется структура Try/Catch. Код хранится в блоке Try, а ошибки обрабатываются в блоке Catch.

Интересно отметить, что JavaScript может не сообщать об ошибках, когда сталкивается с неожиданными ситуациями. Это связано с тем, что JS не выбрасывал ошибки до принятия ECMAScript 3.

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

Некоторые «тихие» ошибки JS отображаются в строгом режиме. Могу ли я активировать с помощью структуры ‘Use Strict’? .

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

Object.create () и ключевые ключи, лежащие в основе механизмов JS, такие как функции производителя, являются оригинальной системой. Рассмотрим следующий пример.

Здесь Object.create() был использован для создания объекта specialisedService и преобразования его прототипа в объект сервиса. В результате метод doSomething() может быть вызван с помощью ссылки на объект specialisedService. Это также означает, что свойство __proto__ объекта SpecialisedService указывает на объект сервиса.

Используйте ключевое слово class для создания аналогичного объекта.

Методы, объявленные в классе Service, добавляются в объект Service.prototype. Экземпляры класса Service имеют один и тот же прототип ( service.prototype ). Все экземпляры делегируют вызовы методов объекту Service.prototype. В результате метод объявляется только один раз в Service.prototype и оказывается «унаследованным» всеми экземплярами класса.

▍ оригинальная цепочка

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

О функциональном программировании в JavaScript

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

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

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

Функциональное программирование в JS рассматривается в ряде статей. Если вам интересно, посмотрите некоторые ресурсы по этой теме. К ним относятся функции первого класса, композиции, декораторы, замыкания и читаемость кода в стиле функций.

Итоги

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

Уважаемый читатель! Как вы думаете, какая функция JavaScript является самой раздражающей для новичков?

Оцените статью