Для чего используется javascript в разработке сайтов

Что такое JavaScript?

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

Для чего используется JavaScript?

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

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

Как работает JavaScript?

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

Движок JavaScript

Движок JavaScript – это компьютерная программа, которая выполняет код JavaScript. Первые движки JavaScript были всего лишь интерпретаторами, но все современные движки используют для повышения производительности JIT-компиляцию или компиляцию во время выполнения.

JavaScript на стороне клиента

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

Разработчики веб-приложений пишут код JavaScript с разными функциями, связанными с различными событиями, такими как щелчок мыши или наведение курсора. Эти функции вносят изменения в HTML и CSS.

Ниже представлен обзор того, как работает JavaScript на стороне клиента.

1. Браузер загружает веб-страницу, когда вы ее посещаете.

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

3. Движок JavaScript браузера преобразует код JavaScript в байткод. Этот код является посредником между синтаксисом JavaScript и машиной.

4. Различные события, такие как щелчок мыши по кнопке, вызывают выполнение связанного блока кода JavaScript. Затем движок интерпретирует байткод и вносит изменения в DOM.

5. Браузер отображает новую DOM.

JavaScript на стороне сервера

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

Сторона клиента и сторона сервера

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

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

Что такое библиотеки JavaScript?

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

Ниже приведены примеры использования библиотек JavaScript.

Визуализация данных

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

В таких библиотеках, как Chart.js, ApexCharts и Algolia Places, есть встроенные функции, которые можно использовать для создания веб-приложений, отображающих данные в виде графиков и карт.

Манипулирование DOM

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

Формы

Математические и текстовые функции

Многие веб-приложения должны решать математические уравнения, обрабатывать даты, время и текст. Вместо того чтобы отправлять все такие запросы на сервер, эффективнее обрабатывать некоторые из них на стороне клиента. Веб-разработчики делают это с помощью библиотек JavaScript, таких как Date.js, Sylvester и JavaScript URL Library.

Что такое фреймворки JavaScript?

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

Вот некоторые примеры использования фреймворков JavaScript.

Разработка веб- и мобильных приложений

AngularJS – это фреймворк, который упрощает разработку и тестирование веб-приложений, таких как приложения электронной коммерции, приложения реального времени и видеоприложения. React Native – это еще один фреймворк, который поддерживает разработку мобильных приложений с естественным рендерингом для iOS и Android.

Веб-разработка с откликом

Веб-сайты с откликом обеспечивают постоянный пользовательский опыт на любом устройстве. Например, экраны мобильных устройств и планшетов меньше, чем экраны настольных компьютеров и ноутбуков. Вы хотите, чтобы сайт точно отображал и представлял данные даже на маленьком экране, не обрезая, например, концы сайта. Используя такие фреймворки, как Bootstrap и Ember.js, разработчики могут воспользоваться преимуществами отзывчивого дизайна и легко настроить внешний вид сайта на разных платформах.

Разработка приложений на стороне сервера

Node.js – это серверный фреймворк JavaScript с открытым исходным кодом, который запускает код JavaScript вне браузера. Разработчики используют его для создания масштабируемых, быстрых и надежных сетевых приложений на стороне сервера. Он может обрабатывать HTTP-запросы и потоки данных, поддерживать файловые системы и управлять несколькими внутренними процессами одновременно.

Что такое HTML и CSS?

Hypertext Markup Language (HTML) и Cascading Style Sheets (CSS) – два других языка программирования, которые разработчики используют при создании фронтенда. HTML – это основной строительный блок большинства веб-страниц. Все абзацы, разделы, изображения, заголовки и текст написаны на HTML. Контент появляется на сайте в том порядке, в котором он написан в HTML.

CSS – это язык стилевых правил, которые мы используем для применения стиля к содержимому HTML. Вы можете применять его для проектирования элементов сайта, таких как цвета фона, шрифты, колонки и границы.

HTML, CSS и JavaScript

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

Например, блок кода сценария на HTML-странице может содержать JavaScript. Затем браузер может обрабатывать как HTML, так и внутренний код JavaScript, когда HTML-страница загружается в браузере.

В чем заключаются преимущества языка JavaScript?

Простота освоения и использования

Независимость от платформы

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

Снижение нагрузки на сервер

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

Улучшение пользовательского интерфейса

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

Поддержка параллелизма

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

Какие ограничения актуальны для JavaScript?

В языках программирования переменные используются в качестве держателей для фактических значений данных. Например, в блоке кода разработчик может написать x=5 и y=x+1. Когда код будет запущен, компьютер автоматически изменит x и y на 5 и 6, соответственно, для выполнения функций над ними. Данные могут быть различных типов, например строка текста, число или дата. Именно поэтому большинство языков программирования позволяют определить тип переменной. После определения типа переменной он не меняется; вы не можете хранить числа в строковых переменных.

Например, если вы скажете программе, что x и y – это числа, а затем выполните операцию x+y, компьютер будет знать, что нужно получить два числа и сложить их. С другой стороны, если вы определите x и y как строки, оператор + сложит две строки вместе, чтобы создать более длинное слово.

Слабо типизированный язык

JavaScript является слабо типизированным языком, что означает, что он не позволяет программисту определять тип переменной. Во время выполнения переменная может хранить любой тип данных, а операции принимают тип переменной. Результат также может быть приведен к другому типу данных (например, операция может вернуть результат в виде строки 5 вместо числа 5). Это может привести к случайным ошибкам в кодировании и ошибкам в коде из-за неправильного типа.

Что такое TypeScript?

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

Что такое AWS SDK для JavaScript?

AWS SDK для JavaScript – это набор бесплатных библиотек JavaScript с открытым исходным кодом для интеграции с сервисами AWS. Они поддерживают разработку API, абстракции более высокого уровня и три типа приложений:

JavaScript для браузера
Node.js для сервера
React Native для разработки мобильных приложений

AWS SDK для JavaScript полностью написан на TypeScript, а затем скомпилирован в JavaScript. Таким образом, вы получаете все преимущества TypeScript, не беспокоясь об обратной совместимости.

Вы можете начать работу с AWS SDK для Java, прочитав примеры кода и руководство по миграции или установив его непосредственно из GitHub.

Что такое JavaScript и зачем он нужен, где применяется

Тетрис

JavaScript — это язык программирования для широкого круга применения. Но, чаще всего, он применяется как сценарный язык — для программирования функциональности компонентов веб-страниц, создания их интерактивности. Именно в вебе этот язык задействуется наиболее часто. Современная веб-разработка без JavaScript не могла бы существовать в том виде, в котором она существует сегодня. Чуть реже JavaScript используется для создания букмарклетов, офисных и серверных приложений. Также на нём выполняются манипуляции объектами приложений, разрабатываются мобильные приложения и прикладное ПО, а также создаются виджеты.

Простыми словами, JavaScript — это универсальный, мультипарадигменный язык программирования для решения широкого круга задач.

Как работает JavaScript в 2023 году

Внимание: не стоит путать язык с языком Java. Это абсолютно разные языки, хоть и заимствующие элементы языка С.

Краткое ревью: характеристики языка

Гибкость языка достигается за счёт использования продуманного синтаксиса функций, наличия деструктуризации, SPRED- и REST-операторов. Универсальный набор модулей классов делает JavaScript выразительным и понятным языком. А благодаря поддержке объектно-ориентированного подхода (ООП), функционального и императивного программирования, этот язык можно рекомендовать специалистам с разным стеком технологий и разным уровнем знаний. Характерные маркеры JavaScript: представление функции в качестве объектов 1-класса, динамическая типизация, прототипирование, продуманная сборка мусора. Кроме того, язык характеризуется наличием слабой типизации. Язык JS популярен не только во фронтенде, но и в бэкенде, а также в гибридных приложениях. Используется язык и при создании программ для встраиваемых устройств и других сценариев.

«Привет мир» на JS (встроен в HTML-документ)

«Привет мир» на JS (встроен в HTML-документ)

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

Как работает движок JS

Язык является интерпретируемым. Это значит, что непосредственный исходный код никогда не компилируется в двоичный (перед выполнением). Если ваш компьютер находит стандартный текстовый сценарий (скрипт), то он сразу сможет выполнить его. Для этого и будет использован движок JS.

Функцию можно представлять в качестве свойства (для объекта)

Функцию можно представлять в качестве свойства (для объекта)

Движок, по сути, это программа, для выполнения кода JavaScript. И такие движки сегодня есть абсолютно в любом браузере. Конечно, у каждого браузера свой собственный движок JS. Наиболее известен в 2023 году V8 — он находится под капотом Google Chrome и других браузеров на основе Chromium, кроме того его использует Node.js. При попытке загрузить скрипт в браузер — движок JS начинает выполнять построчно файл целиком. Таким образом, движок JS разбирает код — строка за строкой, преобразовывая его в машинный код и только затем — движок приступает к его выполнению.

Схема работы движка JavaScript. Код выполняется построчно

Схема работы движка JavaScript. Код выполняется построчно

Движок JavaScript состоит из двух элементов:

Call Stack. Если дословно, то это стек вызовов, который мы уже упомянули выше. По сути — это место, где происходит фактическое выполнение написанного кода.
Memory Heap. Это такое место, где происходит распределение памяти необходимой для выполнения программы. Представляет из себя не-структурированный пул памяти, в котором временно хранятся все компоненты, которые нужны для приложения.

Как работает Runtime

Итак, мы поняли, что абсолютно любой движок JavaScript включает в себя Call Stack and Memory Heap. Но эти и другие компоненты не работают изолировано. Вместе они функционируют в так называемой JS Runtime Environment — именно эта среда делает язык асинхронным. Благодаря ней происходит асинхронное выполнение заголовочных запросов, кроме того — можно использовать метод listener (для событий).

JavaScript runtime environment состоит из пяти главных компонентов:

JS Engine. Это тот самый движок языка, который мы уже упомянули выше.
Web API. Это программный интерфейс приложения.
Callback queue or message queue. Это очередь обратных вызовов или очередь сообщений.
Event Table. Это таблица событий.
Event loop. Это уже знакомый нам цикл событий.

Call Stack

Это стек вызовов. По сути — просто структура данных, которая записывает конкретное место в программе, где мы находимся в данный момент. Если мы обращаемся к функции, то она находится на вершине стека. Если, например, мы наоборот возвращаемся от функции — она уходит с вершины стека. Вот так элементарно это всё работает.

Для наглядности — посмотрите на этот пример:

При начале выполнения этого примера стек вызовов будет пустым. Но сразу после — начнётся цикл из пяти шагов:

Последовательность «работы» Call Stack

Последовательность «работы» Call Stack

Каждый вход в стеке вызовов называется фреймом.

И поскольку JS является однопоточным Call Stack у него только один. Более того: выполнять больше одного действия за одно обращение — он не умеет. Но у такого подхода есть не только большой недостаток, но и и преимущество — отсутствуют ошибки, характерные для многопоточных сред.

Параллелизм и цикл событий

Когда в стеке накапливается сразу несколько вызовов может потребоваться продолжительное количество времени, чтобы функция была выполнена. Для примера возьмем самый частый сценарий — выполнение скрипта в браузере. В чём загвоздка? Всё очень просто: пока в стеке есть активная функция, которая должна быть выполнена, браузер будет заблокирован (до тех пор, пока эта функция не будет выполнена или не приведёт к ошибке, тогда браузер просто зависнет). Пока функция не будет выполнена браузер не может начать выполнять никакой другой код. Что говорить, если браузер начинает обрабатывать сразу большое количество задач в стеке? И это действительно является большой проблемой, если вы хотите получить хорошее юзабилити и плавный пользовательский интерфейс в приложении.

Особенности языка

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

Пример синтаксиса JavaScript

Пример синтаксиса JavaScript

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

Давайте подытожим ключевые особенности JavaScript прямо сейчас.

Динамическая типизация. С технической точки зрения — это означает, что тип данных идентифицируется только когда происходит присвоение значения какой-либо переменной, либо — константе.
Большое количество сторонних инструментов, которые работают с языком. Например, генераторы, фреймворки, вспомогательные библиотеки и сборщики.
Универсальность. Если мы говорим о совместимости по отношению к современным браузерам, то JavaScript понимают и умеют интерпретировать абсолютно все браузеры, которые есть в 2023 году.
Интерпретируемость. Код программы может быть интерпретирован исключительно при обращении. При этом не нужна пре-компиляция кода.
Широкое сообщество. Огромное количество профессиональных разработчиков и любителей работают на JS и развивают его изо дня в день.
Полная поддержка объектно- ориентированного программирования.
Полная поддержка прототипного программирования.

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

В нашем уроке на JavaScript мы сделали настоящий калькулятор.

Создание калькулятора на JavaScript

Создание калькулятора на JavaScript

Кстати, на канале Loft вы найдёте и другие видеоуроки по программированию на JavaScript. Обязательно посмотрите их. У нас очень много интересного и полезного для не только для начинающих изучать этот язык.

А еще есть бесплатные статьи Основы программирования | LoftBlog. Они доступны всем, кто хочет изучить JavaScript быстро и с максимальной эффективностью.

Ну и конечно, нельзя не порекомендовать курс «Комплексное обучение JavaScript». Это комплексное, продуманное обучение, который подойдет веб-разработчикам с опытом от 1 года.

Программа и содержание первой недели курса

Программа и содержание первой недели курса

Где используется JavaScript

Главная область применения — это веб-приложения: AJAX, браузерные ОС и «Комет». Ну и конечно: представить современный веб, без скриптов на JavaScript, на всех сайтах — просто невозможно.

Класс – является разновидностью функции

Класс – является разновидностью функции

Также JavaScript используется при создании:

Букмарклетов. Это небольшие браузерные закладки, которые выполняют какую-либо функцию.
Скриптов в браузере. Такие скрипты выполняются в браузере пользователя при загрузке какого-либо веб-документа. Примеры сценариев пользовательских скриптов: добавление элементов, автоматическое заполнение форм, отображение содержимого, форматирование страницы, скрытие или показ содержимого.
Серверных приложений. JS приложения часто исполняются на серверах, которые написаны на других языках. Построить серверную логику без JavaScript, нередко, сложно (если от него зависят другие компоненты). Кроме того, некоторые серверные приложения используют специальные интерпретаторы, которые также не смогли бы работать без JS.
Мобильных приложений. Несмотря на то, что для мобильной разработки этот язык используется редко, такие случаи всё равно существуют.
Элементов графических интерфейсов. Например, виджетов. Программирование функциональности виджетов при помощи этого языка используют даже гиганты Google, Apple, Yahoo и «Майкрософт».
Прикладного ПО. Язык настолько гибок, что на нём создаются даже десктопные программы. Например, операционная система Google Chrome, свободная среда рабочего стола Gnome и браузер Mozilla Firefox на движке Quantum. Всё это работает на JavaScript.
Доступа к объектам приложений. Сценарий для манипуляций объектами есть в программах Adobe, например.
Офисных приложений. Такие программы, как OpenOffice или Microsoft Office нельзя представить без JavaScript. Там этот язык используется для создания макросов, настройки доступа к веб-службам, интерпретирования каких-либо объектов. И, конечно, этот язык используется для углубленного изучения информатики или в качестве универсального первого языка программирования.
Сборников классов и функций. Библиотек для JavaScriptочень много. По сути — это просто набор каких-либо популярных объектов или набор функций. Такие библиотеки используются для сокрытия деталей реализации какого-либо набора функций, построения кроссбраузерности, при создании любых веб-приложений.

Простейшая программа, которая показывает время и дату

Простейшая программа, которая показывает время и дату

Кроме того, язык используется для:

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

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

Найти ошибку в выполняемом коде можно в консоли (инструменты разработчика) браузера

Найти ошибку в выполняемом коде можно в консоли (инструменты разработчика) браузера

Какие задачи способен решать JavaScript

Это целый спектр задач фронт- и бэкенда. На JavaScript возможно воплотить:

Мобильное приложение для любой операционной системы.
Клиентскую часть приложения. Практически все типичные задачи фронтэнда могут быть решены при помощи этого языка.
Серверную часть приложения. Аналогично, большое количество задач бэкенда успешно реализовывается при помощи JavaScript. Например, настройка пушей в десктопном браузере.

Пример инициализирования объекта методом constructor()

Пример инициализирования объекта методом constructor()

Вот несколько типовых сценариев для веба, которые вы можете решить с помощью JS:

JavaScript и SEO: проблемы и решения

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

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

JavaScript SEO — это отрасль технического SEO, связанная с оптимизацией сайтов, основанных на JavaScript или просто активно его использующих. Как показывают данные статистики, JS активно используют 97% всех современных сайтов.

Можно условно разделить все современные сайты на три основные категории:

Сайты, использующие JS в ограниченном объёме: для оформления небольших интерактивных элементов, анимации, дизайна, всплывающих окон, чатов, скриптов аналитики и т.п. Основной контент таких сайтов выводится в HTML и не зависит от javascript.
JS-rich сайты, активно использующие JavaScript и AJAX не только для оформления, но и для вывода значительной части основного контента.
SPA (single page application) – одностраничные приложения, работающие исключительно на JavaScript. Такие сайты значительно быстрее традиционных, поскольку не обращаются к серверу для загрузки дополнительного контента: все ресурсы кэшируются в локальном хранилище после первого обращения к серверу. Однако при первичном запросе клиент не получает никакого контента в рамках HTML – только JavaScript.

Последний сайт без JS из тех, что я видел, был «Библиотекой Мошкова», и было это примерно 25 лет назад. Даже если ваш сайт сделан примерно в прошлом веке – он так или иначе уже использует JavaScript. Если же он сделан недавно – он использует JS активно. А если вы используете конструкторы сайтов, или ваш сайт сделан на Angular JS, React или Vue – это может быть проблемой. Так исторически сложилось, что сайты чаще всего разрабатывают без участия SEO-специалистов, а критерии качества у разработчиков свои. А вам потом с этим сайтом как-то жить.

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

Но оптимизация сканирования и индексации сайтов на JS – не единственная сфера применения JavaScript SEO. Вот другие задачи этого направления технической оптимизации:

Диагностика и устранение проблем с ранжированием одностраничных предложений (SPA), построенных на платформах React, Vue, Angular и т.п.
Улучшение быстродействия и скорости загрузки страниц, использующих JS.
Обеспечение возможности обнаружить страницы сайта на JS с помощью перелинковки.

Современные разработчики сайтов уже пытаются любую проблему решить с помощью JS, даже те, что могут быть решены более простыми традиционными средствами HTML и CSS. В ряде случаев это напрямую влияет на SEO. Вот основные моменты, на которые нужно обращать внимание:

Текстовый контент, выводимый средствами JS
Формирование адаптивного шаблона сайта для смартфонов
Отложенная загрузка изображений (lazy-load)
Ссылки, реализованные через javascript
Формирование метаданных
Время загрузки страницы

Уровни сложности проблем меняются в зависимости от способа использования JavaScript на сайте: есть большая разница между добавлением анимации на статические страницы и формированием DOM средствами JavaScript в случае SPA-сайтов.

Необходимо точное понимание, где, как и для чего JS используется в шаблоне страницы. От этого зависит, как будет индексироваться контент, не будет ли загрузка вашего сайта намертво «вешать» смартфоны посетителей, не станет ли неоптимизированный JS серьёзной проблемой для быстродействия сайта.