Редактор для HTML: пишем код, чтобы было удобно
Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.
Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если Mac OS или Linux — нажмите Other platforms.
Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.
Шаг 2. Запускаем редактор и осматриваемся
Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.
Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.
По шагам на скриншоте:
- Add workspace folder — открывает меню выбора папки.
- Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
- Нажмём Add.
После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.
Шаг 3. Добавляем файлы
После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.
Шаг 4. Делаем работу удобнее
Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.
Шаг 5. Добавляем код
Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.
Сайт начинающего верстальщика Взгляд упал на кота. Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.
Шаг 6. Запускаем код и смотрим на результат
Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html . Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.
Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.
Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.
После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.
Чтобы запустить код, нажмите кнопку Go Live на нижней панели.
Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.
Что мы сделали
- Установили и настроили редактор кода.
- Создали рабочую папку и добавили туда файлы нашего проекта.
- Научились редактировать и сохранять файлы с кодом.
- Установили расширение, чтобы сразу видеть результат вёрстки.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Подключение и выполнение JavaScript кода в браузере. Базовый синтаксис языка
В данном курсе код JavaScript будет запускаться в среде браузера, поэтому для дальнейшей разработки необходимо иметь базовое представление о структуре веб-страницы. Типичная веб-страница представляет собой текстовый файл в формате HTML (HyperText Markup Language) — язык разметки, который используется для формирования структуры веб-страниц. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега ). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
Текст между двумя тегами — открывающим и закрывающим. href="http://www.example.com">Здесь элемент содержит атрибут href, то есть гиперссылку. А вот пример пустого элемента: . Это тег переноса строки и поэтому у него нет ни содержания, ни закрывающего тега. Разметка HTML позволяет располагать контент страницы в необходимом вам порядке. Базовый шаблон HTML страницы выглядит так
charset="utf-8"> Заголовок Страницы Само содержание страницы Чтобы придать стиль отображения содержимому страницы, например, изменить цвет фона или размер шрифта, используется язык стилей CSS (Cascading Style Sheets, или каскадные таблицы стилей). Этот язык тоже имеет свой собственный синтаксис. Подробнее о HTML можно прочитать здесь, а о CSS — здесь. А JavaScript, в свою очередь, находит в браузерах широкое применение как язык сценариев для придания интерактивности веб-страницам.
Добавление JavaScript на страницу и запуск в браузере
Так как это курс сфокусирован на изучении самого языка JavaScript, понимание его основных концепций и тонкостей разработки на нём, то в рамках данного курса будет достаточно понимания того, каким образом можно добавить код JavaScript на HTML страницу, для дальнейшего его выполнения при запуске этой страницы в браузере. Код JavaScript можно встроить на HTML страницу с помощью тега , например
charset="utf-8"> Заголовок Страницы Само содержание страницы alert( "Код JavaScript запустился!" ); В данном случае тег содержит сам исполняемый код. Когда браузер доходит на странице до этого тега, он его не отображает, а выполняет. В данном коде вызывается встроенный в браузер метод alert(«Сообщение») , который отображает на странице модальное окно с указанным сообщением.
Чаще всего, программа JavaScript, которую необходимо выполнить на странице, содержит в себе много кода. Поэтому вместе того, чтобы добавлять его напрямую на HTML страницу, его выносят в отдельный файл с расширением .js и отдельно подключают к странице следующим образом:
charset="utf-8"> Заголовок Страницы Само содержание страницы src="/path/script.js"> В данном случае подключение происходит тоже с помощью тега , только в этом случае, вместо вставки в него кода, к нему добавляется атрибут src в котором прописывается путь к файлу JavaScript. Этот путь может быть как абсолютным, так и относительным к текущей странице. Когда браузер дойдет до этого тега, то сначала он загрузит этот файл, а потом выполнит. Исходники страниц с встроенным и внешним скриптом можно скачать по этой ссылке и потом запустить соответствующие HTML-страницы в браузере.
Базовый синтаксис JavaScript
Как и у других языков программирования, у JavaScript есть свой синтаксис. Исходный код скриптов сканируется слева направо и преобразуется в последовательность найденных элементов, которые несут в себе определенный смысл для языка JavaScript, например, ключевые слова ( if , else , while , return и прочие), литералы ( true , false , null и т.д.), пробелы, окончания строк или комментарии. А также JavaScript чувствителен к регистру и использует кодировку символов Unicode.
Каждая программа — это набор команд. В JavaScript команды разделяются точкой с запятой ( ; ). Если в коде после той или иной инструкции не стоит точка с запятой, то во время разбора кода, они будут расставляться автоматически, что может привести к некоторым ошибкам или неочевидной работе программы.
Чтобы упросить чтение и понимание кода используются комментарии. С их помощью можно добавлять подсказки, заметки, предложения или предупреждения. Для оформления однострочных комментариев используются // , многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */ .
// Это однострочный комментарий alert("Привет!"); /* Этот комментарий располагается на нескольких линиях. Обратите внимание, что вам не нужно обрывать комментарий, пока вы его не закончите*/ alert("Пока!"); /*Такой комментарий тоже может быть однострочным*/ При этом нельзя вкладывать друг в друга комментарии, это приведет к синтаксической ошибке
/* Нельзя вкладывать /* комментарии */ друг в друга */ > Uncaught SyntaxError: Unexpected identifier Дата изменения: February 26, 2023
Поделиться
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!
12 лучших онлайн-редакторов кода для веб-разработчиков
Перевод статьи «12 best online code editors for web-developers».
Онлайн-редактор кода это инструмент, находящийся на удаленном сервере, доступ к которому возможен при помощи браузера. Некоторые онлайн-редакторы кода обладают функционалом, схожим с обычными текстовыми редакторами, а другие больше напоминают полноценные IDE. В этой статье мы рассмотрим и те, и другие.
Когда и для чего используются онлайн-редакторы?
Давайте подумаем над тем, в каких случаях будет удобно воспользоваться онлайн-редактором.
Сотрудничество
Наладить совместную работу с другим человеком, используя десктопные IDE, довольно сложно. А онлайн-редакторы облегчают этот процесс. Работа с ними напоминает работу с Google Docs.
Возможность поделиться кодом
При помощи онлайн-редакторов можно поделиться кодом с коллегами, друзьями, да и целым миром. Вы можете размещать встраиваемые отрывки кода или ссылки на «песочницу» в своем блоге, руководствах, документации.
Быстрое размещение новых приложений
Некоторые редакторы кода имеют интеграцию с популярными хостингами, так что вы можете разработать простое приложение и буквально за считанные минуты разместить его на хостинге, чтобы протестировать.
Онлайн-собеседования и найм разработчиков
При помощи онлайн-редакторов кода можно проводить собеседования. Таким образом интервьюер может увидеть, как кандидат подходит к решению задач и как он работает с кодом.
Прототипирование
Идеи нужно тестировать как можно раньше и как можно чаще. Проверяя свои идеи, вы можете получать немедленный фидбэк от пользователей. Функционал, предназначенный для шеринга и совместной работы, поможет вам и с этим.
Обучение
В современной веб-разработке нужно постоянно следить за последними новостями, а еще лучше — испытывать новинки в реальных условиях. Онлайн-редакторы кода позволяют это делать быстро и без ненужной возни с настройками.
Как выбрать подходящий онлайн-редактор кода?
Самые известные онлайн-редакторы кода обладают сходным набором отличных функций. К числу этих функций можно отнести автодополнение, интеграцию git, поддержку плагинов, конвейеры CI/CD и пр. Но благодаря разным мелочам один редактор кода может подходить вам больше остальных.
Давайте пробежимся по нескольким аспектам, которые нужно иметь в виду, выбирая онлайн-редактор кода (или онлайн-IDE):
- скорость работы приложения;
- для бесплатных редакторов — сколько рекламы вам будут показывать;
- интеграции с менеджерами репозиториев;
- легкость настройки;
- поддержка языков;
- поддержка NPM;
- поддержка терминала.
Основной функционал онлайн-редакторов кода
Есть определенный базовый функционал, который обязательно должен быть в онлайн-редакторах:
- возможность делиться кодом;
- настройки макета;
- возможность работать над кодом совместно с другими людьми;
- настройки табуляции;
- комментирование;
- просмотр результатов;
- базовая файловая структура.
Достоинства и недостатки онлайн-редакторов кода
- Не нужно ничего настраивать. Вам не придется скачивать, устанавливать и настраивать IDE.
- Возможность поделиться кодом и совместно работать над ним. Начните писать код и отправьте коллеге ссылку, чтобы он мог продолжить начатое или помог с отладкой.
- Редакторами можно пользоваться бесплатно или за небольшую плату. Подавляющее большинство онлайн-редакторов имеют бесплатные версии, функционала которых будет достаточно для обычных повседневных задач.
- Цена на основе подписки. Может быть удобно платить за пользование редактором раз в месяц, а не покупать лицензию на год.
- Ограниченность функционала. В некоторых редакторах кода отсутствует даже базовый функционал, так что их даже редакторами кода сложно назвать.
- Проблемы с производительностью.
- Отсутствие контроля версий. Подавляющее большинство онлайн-редакторов кода не имеют никаких интеграций с инструментами git.
- Нет интернета — нет разработки. Чтобы работать с онлайн-редакторами, нужно быть онлайн:)
Обзор некоторых редакторов кода
Codesandbox
Вы можете начать с использования шаблонов для любого популярного фреймворка. React, Vue, Angular, Gatsby, Next и пр.
Codesandbox позиционирует себя как платформу для разработки. Сообщество Codesandbox создало множество шаблонов. Кроме того, вы можете с легкостью создавать собственные шаблоны для своих специфических нужд, с файловой структурой и зависимостями, как в IDE.
Этот инструмент интегрирован с GitHub, так что у ва сне возникнет проблем с созданием коммитов и открытием пул-реквестов. К тому же, вы можете деплоить ваше приложение в ZEIT или Netlify — этот функционал доступен «из коробки».
Для фронтенд-нинзя есть поддержка NPM. И, конечно, каждая песочница имеет безопасный URL с поддержкой HTTPS для шеринга и фидбэков.
Что касается совместной работы, вы можете работать с коллегами. Для общения есть чат. Также вы можете контролировать, кто имеет доступ к редактированию, а кто — только к просмотру кода.
Этот онлайн-редактор имеет много прекрасных функций:
- консоль;
- предпросмотр;
- встроенный терминал;
- автозапуск Jest-тестов;
- Hot module reloading;
- организация проекта;
- экспорт кода в виде zip-файла;
- встроенный линтер (Eslint).
Что касается цены, Pro-версия стоит 9 долларов. Она включает приватные GitHub-репозитории и неограниченные приватные песочницы.
Playcode
Playcode это простой инструмент для быстрого прототипирования и просмотра результатов кодинга. Он имеет классический трехоконный макет: редактор кода, консоль и окно просмотра результата. Продукт имеет базовую файловую структуру, но в нем нет контроля версий и прочих функций IDE.
Playcode поддерживает только JavaScript, HTML и CSS. В нем есть возможность выбрать стиль редактора, размер шрифта и прочие вещи, касающиеся редактирования текста.
Codepen
Codepen это, вероятно, самый популярный инструмент на рынке онлайн-редакторов кода. Эта платформа начала некоторым образом перерождаться в социальную сеть, подобную Pinterest. Разработчики могут делиться своими лучшими практиками и получать одобрение от других членов сообщества.
Внутри инструмента есть продуманный функционал поиска. Вы можете искать шаблоны, проекты, отрывки кода и интересующие вас темы.
Одна из важных особенностей Codepen — ориентация на изучение новых технологий и лучших подходов. Поиск пенов и работа с ними это отличный способ понять, как они устроены и как работает код.
Еще одна интересная деталь платформы — режим презентации кода. Это очень полезно на конференциях, митапах и собраниях.
Стоит отметить и другие особенности этой платформы:
- файловая система;
- автодополнение кода;
- приватные песочницы;
- деплоймент сайтов;
- режим совместной работы.
Цена варьируется от 8 до 26 долларов в месяц. Есть также ограниченная бесплатная версия продукта.
Stackblitz
Stackblitz очень похож на полноценную IDE. Он вам особенно понравится, если вы не можете расстаться с VS Code (поскольку этот инструмент построен на основе VS Code). Продукт имеет широкий спектр функций, позволяющих начать, продолжить и завершить full-stack разработку приложения.
Stackblitz автоматически, по мере того как вы вводите код, запускает установку зависимостей, компиляцию, сборку и hot reloading.
В веб-разработке большое значение имеет импорт библиотек, поэтому StackBlitz включает встроенный в браузер npm-клиент, поддерживающий одновременную установку нескольких пакетов и их специфических версий.
Главная особенность этого проекта — возможность офлайн-работы. Этот функционал доступен благодаря веб-серверу в браузере.
В Stackblitz предварительный просмотр и редактирование происходят в одном разделенном окне, что является преимуществом по сравнению с iframe и маленькими окошками других проектов.
Также стоит отметить подключение к Github для импорта и экспорта проектов, интеграцию с Google Firebase для создания full-stack проектов и возможность скачивания проекта в виде ZIP-файла.
Codeanywhere
Codeanywhere претендует на звание полноценной IDE в браузере и мобильном телефоне.
Вы можете с легкостью настроить собственную среду разработки для своего проекта на JavaScript, PHP, HTML и 72 других языках.
Основная фишка Codeanywhere в том, что этот инструмент подключается буквально к чему угодно. Ваш код может располагаться на FTP-сервере или других GitHub-источниках — это не помешает вам начать его редактировать и заниматься разработкой проекта на Codeanywhere.
В режиме редактора вам доступны следующие функции:
- дополнение кода;
- линтинг (js, CSS);
- несколько курсоров;
- code beautify.
Кроме того, вы можете менять макет и цветовой режим редактора.
В этом инструменте есть собственный встроенный терминал.
Что касается совместной работы, вы можете делиться с любым другим разработчиком целыми проектами, файлами или папками. Каждое такое расшаривание может иметь собственный уровень доступа.
Codeanywhere имеет функционал, позволяющий просматривать разницу между версиями и возвращаться к предыдущим состояниям кода.
Также есть глубокая интеграция с git-репозиториями и инструментами, облегчающими процесс разработки.
Этот продукт подходит для разработчиков, которые хотели бы перейти к работе в облаке и остаться там навсегда.
Jsfiddle
Jsfiddle это простой, но невероятно популярный, быстрый и эффективный онлайн-редактор кода. Он позволяет быстро делиться кодом и визуализировать результат его работы. Этот инструмент настолько популярен и прост, что с ним интегрируется StackOverflow.
Визуально интерфейс Jsfiddle, как и многих его конкурентов, разделен на 4 блока: для написания кода, для редактирования CSS, SCSS или sass, для HTML-разметки и для просмотра результатов работы.
Блок редактирования кода поддерживает:
- чистый JavaScript;
- React;
- Preact;
- Babel + JSX;
- Coffee script;
- Vue;
- Type script.
Также в этом блоке можно менять различные настройки, такие как тип загрузки, тип фреймворка и атрибут фреймворка.
Jsfiddle имеет очень хорошую и полную документацию, а также развитое сообщество. Члены сообщества путем голосования определяют, какой функционал будет принят для разработки следующим.
Из недостатков можно отметить то, что Jsfiddle предназначен для работы только с фронтендом. Он не поддерживает концепцию файлов и папок, кроме того, в нем нет возможности создавать конвейеры CI/CD.
В целом, это один из наиболее логичных и крутых вариантов для тестирования новых фреймворков, показа кода в статьях и демонстрации новых продуктов.
HTML Code Editor
Этот редактор кода подходит исключительно для редактирования HTML. Он совершенно бесплатный. Среди его функций стоит отметить:
- автодополнение;
- базовые теги в хедере;
- tag wizard;
- поиск и замена тегов;
- широкий спектр функций очистки.
Существенный недостаток этого редактора — обилие рекламы.
Repl.it
Repl.it это один из самых мощных онлайн-инструментов для разработки. Он поддерживает широкий спектр языков и фреймворков, включая популярные сейчас Haskell и Kotlin, а также широко известные Javascript, C++, Ruby и пр.
На главной странице вам сначала предложат выбрать язык, а затем одну из категорий: веб-разработка, геймдев и др. После этого вы создаете repl.
Даже в бесплатной версии Repl.it можно создавать файловую структуру, контролировать версии и устанавливать пакеты.
В настройках можно редактировать макет, тему, размер шрифта и отступов.
Что касается возможности поделиться кодом, это можно сделать при помощи встраиваемой или обычной ссылки и интеграции с сообществом dev.to. Также есть функционал социальной сети под названием «talk», где разработчики могут делить кодом и получать фидбэк.
Repl.it имеет еще одну важную особенность — Classrooms (классные комнаты). Вы можете создавать эти комнаты, приглашать в них учеников и отслеживать прогресс.
Repl используется такими компаниями и организациями как Facebook, MIT, Google и др.
Цена стартует от 7 долларов в месяц. За эти деньги вы получаете приватные repl-ы, неограниченное хранилище и более высокую скорость.
Json Editor Online
Json Editor Online это веб-инструмент для просмотра, редактирования и форматирования JSON. Он показывает ваши данные в параллельном виде — в понятной и редактируемой древовидной структуре или в редакторе кода. Документы можно хранить локально или в облаке.
Вы можете делиться документами при помощи ссылок, просматривать JSON-файл в качестве просто кода или дерева, делать запросы и, конечно, сохранять файл локально.
Это хорошая возможность отредактировать JSON-файл на любом устройстве, не занимаясь настройками текстовых редакторов.
Codeply
Codeply это еще один инструмент для быстрого редактирования JavaScript и его фреймворков. Этот продукт был запущен еще в 2014 году, а в 2019-м вышла 2-я версия.
Команда, стоящая за Codeply, утверждает, что их продукт подходит для быстрого прототипирования, создания макетов, учебы и изучения новых популярных библиотек, API, плагинов и фреймворков.
Стандартный набор функционала включает настройки макета, предпросмотр результатов, готовые шаблоны и элементы социальной сети. По сравнению с другими инструментами Codeply отличается скоростью.
Gitpod
Цель Gitpod — поддерживать ваш код в постоянно протестированном и обновленном состоянии. Он глубоко интегрирован с GitHub: при каждом обновлении кода запускаются тесты.
Продукт имеет VSCode-интерфейс и поддерживает все основные языки фронтенда и бэкенда, а также фреймворки (Django, Rails, Revel и т. д.).
Plnkr
Plunker это онлайн-сообщество, где вы можете выдвигать какие-то идеи по веб-разработке, делиться ими и совместно работать над ними.
Главное, что отличает Plunker, это скорость. Несмотря на сложность, этот редактор загружается меньше, чем за 2 секунды.
Из функционала стоит отметить:
- возможность совместной работы над кодом в режиме реального времени;
- полнофункциональный, настраиваемый редактор синтаксиса;
- предпросмотр изменений в коде (тоже в режиме реального времени);
- линтинг кода по мере его ввода;
- возможность делать форки, комментировать и делиться Plunk-ми.
- открытый исходный код (выложен на GitHub) и лицензия MIT.
Заключение
В наш список вошли самые жизнеспособные редакторы кода и IDE, запускаемые онлайн. Пользоваться ими легко, но проявляйте осторожность: не стоит начинать работу над огромными проектами в онлайн-редакторах.
Мы не включали в список редакторы, предназначенные исключительно для проведения собеседований или не имеющие достаточно функций, чтобы считаться законченными продуктами.
JavaScript в браузере — JS: DOM API
В этом уроке мы изучим . Это тег, с помощью которого мы связываем JavaScript с веб-страницами одним из двух способов:
- Инлайн-скриптинг
- Внешний скриптинг
Инлайн-скрипты
Слово inline означает, что мы размещаем JavaScript прямо внутри HTML. Этот метод подходит для базовых сценариев с небольшим количеством кода:
const greeting = 'hello, world!'; // Он выводит приветствие на экран в модальном окне браузера alert(greeting); // На странице может быть любое количество этих тегов
В примере используется функция alert() . Она выводит на экран модальное окно с указанным текстом. В реальном коде alert() почти не используется, но ее иногда используют для обучения. Нажмите сюда , чтобы увидеть результат выполнения этой функции.
Чаще всего, таким способом подключаются скрипты внешних сервисов, например, систем аналитик . Выглядит это так:
// Код минифицирован, чтобы занимать как можно меньше места // Это ускоряет загрузку (function(i,s,o,g,r,a,m)i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() (i[r].q=i[r].q||[]).push(arguments)>,i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) >)(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); Если вы откроете исходный код этой страницы, то увидите множество тегов с аналогичными вставками внутри HTML. Большинство этих вставок находится ближе к началу HTML, поскольку для аналитических систем важно загружать их как можно раньше, чтобы отслеживать действия пользователя.
Внешние скрипты
Во фронтенд-приложениях инлайн-скриптинг не используется. Весь код грузится через подключаемые файлы. Загружаются внешние скрипты следующим образом:
src="/assets/application.js"> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js">
Обычно такой javascript-код проходит предварительную обработку системами сборки, например Webpack. Они оптимизируют код для браузеров, делают его меньше, удаляют ненужное и разбивают на файлы для ускорения загрузки. Подробнее об этом тут.
Порядок выполнения
По умолчанию тег выполняется в том порядке, в котором он появляется в HTML. Это работает одинаково независимо от того, работаем ли мы с внешним файлом или инлайн-скриптом. Поэтому местоположение имеет большое значение. Чем дальше мы разместим скрипт, тем быстрее пользователь увидит страницу на экране. Оптимально, все скрипты должны находиться непосредственно перед