Если есть статистика, которая проливает свет на влияние и важность JavaScript в веб-разработке, то 98,3% всех веб-сайтов используют его в качестве клиентского языка программирования.

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

Но что делает JavaScript?

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

Статические и динамические веб-страницы

Мы живем в эпоху «социальной сети», где господствуют пользовательский контент и интерактивность.

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

Например, посмотрите на веб-страницу по умолчанию для дистрибутива Fedora.

Возможна ли какая-либо интерактивность?

Явно нет. Он содержит в основном информацию только для чтения, которая будет одинаковой, независимо от того, кто обращается к этой странице.

Фактически, независимо от того, сколько раз вы загружаете https://getfedora.org/en/, вы обнаружите, что изображение и контент на странице остаются неизменными.

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

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

Проще говоря, всякий раз, когда пользователь загружает гиперссылку https://www.youtube.com/, он видит целый список видео в стандартном макете YouTube, созданном специально для их нужд.

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

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

Как упоминалось в предыдущем сообщении в блоге, существует три строительных блока, из которых состоит Всемирная паутина, где HTML и CSS составляют первые два.

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

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

Что касается характеристик языка программирования, JavaScript — это язык с динамической и слабой типизацией, который можно добавить в HTML-документ между тегами ‹script› вставьте код js здесь ‹script/›. Конечно, вы можете добавить код JS прямо между этими тегами. Или даже поместите свой код в файл .js и добавьте это имя файла между тегами скрипта.

Давайте рассмотрим простой пример функциональности JavaScript, которая по своей природе интерактивна:

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

После этого окно предупреждения с надписью «Успех» загружается через 2 секунды. Вот результат:

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

Теперь, если вы хотите узнать больше о JavaScript, какие основные темы вы освещаете с точки зрения синтаксиса? Давайте узнаем, а?

Изучение JavaScript: 7 основных концепций для рассмотрения

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

Теперь в этом разделе мы рассмотрим 7 основных концепций JavaScript, которые должны изучить новички:

#1: Переменные и типы данных
Поскольку переменные — это самый простой способ хранения и изменения состояния, давайте начнем с того, как объявить и инициализировать переменные в JavaScript. В этом вам помогут ключевые слова let и var, как показано ниже:

Получив вывод в консоли, мы должны получить 4. Конечно, переменные x и y могут содержать строки и числа с плавающей запятой наряду с целыми числами. Другие типы данных включают BigInts, boolean, null и объекты.

#2: Поток управления
Существует четыре типа потока управления, а именно выбор, итерация, процедурная абстракция и рекурсия.

Среди четырех выбор является самым простым и реализуется с помощью оператора if-else, как показано ниже:

Как вы можете заметить, вывод этого фрагмента кода JavaScript будет оператором, заключенным в оператор «if», как показано ниже:

Вы можете узнать больше об итерации, абстракции процедур и рекурсии, изучив циклы for и while, вызовы функций и рекурсивные функции в JavaScript.

#3: Функции
По определению, функция пишется так, чтобы выполнять одну задачу и повторно использоваться, выполняя простые вызовы функций, как в последнем операторе в приведенном ниже фрагменте кода:

Как видите, в выводе консоли отображается следующее сообщение:

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

#4: Массивы
Структуры данных, такие как массивы, пригодятся, когда вам нужно объявить и инициализировать несколько переменных. Допустим, вам нужно было найти конкретное имя среди 250 аспирантов университета.

Таким образом, вместо того, чтобы использовать 250 переменных для всех имен, вы можете добавить все имена в массив, который во многом похож на список, как показано ниже:

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

#5: Объекты
Если переменные содержат одну точку данных, массивы могут содержать несколько. С другой стороны, объекты могут содержать набор точек данных, которые имеют семантическую связь друг с другом. Как показано ниже, объект студента содержит данные, относящиеся как к имени студента, так и к курсу, которые имеют смысл в реальном мире.

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

#6: Обработка ошибок
Неважно, насколько вы хороши как программист, совершение ошибок — неотъемлемая часть разработки. Это справедливо как для кода в JavaScript, так и для других языков. Таким образом, чтобы иметь дело с такими экземплярами, использование блока кода try-catch должно помочь.

Без конструкции обработки ошибок try-catch мы не смогли бы найти эту ошибку ссылки, которая возникает, когда имеет место неправильная ссылка на y.

#7: Асинхронное программирование
По определению, асинхронное программирование предполагает параллельное выполнение функций, а не последовательное выполнение кода.

Как видно из приведенного ниже вывода, вторая команда console.log выполняется во время работы функции setTimeout. После этого мы получаем вывод функции displayTimeOutMsg.

Из такого примера мы можем сделать вывод, что во время работы функции displayTimeOutMsg вторая команда console.log также выполняется параллельно. Если бы выполнение было последовательным, вывод displayTimeOutMsg появился бы перед выводом второй команды console.log.

Более пристальный взгляд на управление DOM

Из трех технологий, используемых для создания веб-страниц, только JavaScript считается подлинным языком программирования. Конечно, причина, по которой был включен JavaScript, связана с появлением динамических веб-страниц, которые поощряли анимацию и интерактивность. Как вы, возможно, уже знаете, это делается путем манипулирования объектной моделью документа (DOM).

Итак, что же такое DOM, спросите вы?

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

Кстати говоря, как мы используем JavaScript для выполнения манипуляций с DOM? Вот два примера:

Получить HTML-текст из DOM

Рассматриваемый элемент HTML:

Результат:

Добавить новый HTML-элемент

В этом случае элемент HTML с тремя элементами списка включает:

Результат:

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

Вот рассматриваемый элемент HTML:

Результат:

Теперь, в частности, jQuery был разработан, чтобы предлагать функции манипулирования DOM, обработку событий, встроенные эффекты анимации, взаимодействие AJAX, помимо поддержки базового синтаксиса XPATH и селекторов CSS3. Если уж на то пошло, это упрощает выполнение разработчиками таких действий за счет уменьшения объема кода, написанного для указанного действия.

Тем не менее, вы можете использовать определенные фреймворки JavaScript как для фронтенда, так и для бэкенда.

Заметка о JavaScript-фреймворках для внешнего интерфейса

Ничто в фронтенд-разработке не было бы прежним без фреймворков JavaScript, которые остаются популярными среди разработчиков. Некоторые из этих опций включают React, Vue и Angular, в то время как используются другие, такие как Svelte и Ember.

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

Как изучение JavaScript поможет в разработке Web3?

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

Говоря об этом, изучение того, как использовать HTML и CSS в сочетании с JavaScript, должно сделать эти страницы динамичными и интерактивными. Другими словами, сделать пользовательский опыт таким же богатым и увлекательным в web3, как это было в web2 уже много лет.

Тем не менее, мы создаем метавселенную, ориентированную на разработчиков, чтобы вы могли учиться, зарабатывать и нанимать. Зарегистрируйтесь, чтобы присоединиться к белому списку Lumos Metaverse для эксклюзивного доступа:
https://forms.lumoslabs.co/whitelist