В этом уроке мы изучим . Это тег, с помощью которого мы связываем JavaScript с веб-страницами одним из двух способов:
Инлайн-скрипты
Слово inline означает, что мы размещаем JavaScript прямо внутри HTML. Этот метод подходит для базовых сценариев с небольшим количеством кода:
constgreeting='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*newDate();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, поскольку для аналитических систем важно загружать их как можно раньше, чтобы отслеживать действия пользователя.
Внешние скрипты
Во фронтенд-приложениях инлайн-скриптинг не используется. Весь код грузится через подключаемые файлы. Загружаются внешние скрипты следующим образом:
Когда мы подключаем JavaScript таким образом, он проходит предварительную обработку системами сборки, например Webpack. Они оптимизируют код для браузеров, делают его меньше, удаляют ненужное и разбивают на файлы для ускорения загрузки. Подробнее об этом тут.
Порядок выполнения
По умолчанию тег выполняется в том порядке, в котором он появляется в HTML. Это работает одинаково независимо от того, работаем ли мы с внешним файлом или инлайн-скриптом. Поэтому местоположение имеет большое значение. Чем дальше мы разместим скрипт, тем быстрее пользователь увидит страницу на экране. Оптимально, все скрипты должны находиться непосредственно перед
.
Порядок загрузки можно контролировать с помощью атрибутов defer и async . Об этом можно прочитать здесь.
REPL
Есть и третий способ запуска JavaScript-кода на странице, который отлично подходит для отладки и экспериментов.
В браузере существует аналог REPL — Node.js. Чтобы воспользоваться им, найдите DevTools в меню браузера и запустите его. В нижней части экрана появится раздел с вкладкой Console. На этой вкладке вы можете выполнять любой код JavaScript, как и в серверном REPL.
Но это еще не все. Консоль связана со страницей, на которой она находится. Другими словами, отсюда мы можем управлять содержимым экрана. Обязательно обращайтесь к ней время от времени. Она понадобится нам для экспериментов в будущих уроках.
Особенности браузерного JavaScript
Браузерный и серверный JavaScript — это один и тот же язык. То есть Node.js по сути не относится к отдельным языкам программирования. Но у каждой среды есть свои особенности, о которых необходимо знать.
Модули
Большинство встроенных модулей в Node.js недоступны в браузере. Поэтому их приходится заменять библиотеками. Некоторые модули доступны как глобальные объекты. Например, URL доступен в браузере по умолчанию.
Версии
Версию JavaScript на сервере определяет программист, который ставит конкретную версию Node.js.
При фронтенд-разработке невозможно контролировать версию JavaScript, потому что мы не знаем, через какой браузер люди будут загружать страницу с нашим кодом. Что если это будет браузер, встроенный в телевизор или машину?
Вот поэтому нам не следует использовать новейшие возможности JavaScript в фронтенде. Эти функции могут не поддерживаться браузерами, поэтому некоторые пользователи вместо страницы увидят ошибки. Как решить эту проблему, мы узнаем в следующих уроках.
Браузер и контент
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
JavaScript — популярный язык программирования с широким спектром применения. Раньше его использовали в основном для интерактивности веб-страницам: например, для анимации или валидации форм. Сейчас же JS используется еще и во многих других областях: разработка серверных, мобильных приложений и так далее.
Из-за широкого спектра применения JavaScript можно запустить несколькими способами:
Через вкладку «Консоль» в браузере
В большинстве современных браузеров уже есть встроенные механизмы JavaScript, поэтому запустить код на JS можно прямо в браузере. Вот, как это сделать:
Шаг 1. Откройте любой браузер (мы будем использовать Google Chrome).
Шаг 2. Откройте инструменты разработчика. Для этого щелкните правой кнопкой мыши на пустой области и выберите пункт «Просмотреть код» (Inspect). Горячая клавиша: F12.
Шаг 3. В инструментах разработчика перейдите на вкладку «Консоль» (Console). Здесь уже можно писать код на JavaScript. Попробуйте ввести console.log(«Hello, world!») и нажмите Enter, чтобы запустить код.
С помощью Node.js
Node — среда выполнения кода JavaScript вне браузера. Вот, как запустить JS с помощью Node.js:
Шаг 1. Установите последнюю версию Node.js.
Шаг 2. Установите IDE или текстовый редактор. Мы будем использовать Visual Studio Code.
Шаг 3. В VS Code перейдите в Файл > Новый файл и напишите код на JS. Сохраните файл с расширением .js. Мы написали программу, которая выводит на экран строку «Hello, world!», поэтому файл будет называться helloworld.js.
Шаг 4. Откройте терминал/командную строку, перейдите к расположению файла (используйте команду cd ). Введите node helloworld.js и нажмите Enter. Вывод появится в терминале.
Примечание. JavaScript-код можно написать и запустить непосредственно в терминале. Для этого просто введите node и нажмите Enter.
С помощью веб-страницы
JavaScript изначально создавали для того, чтобы сделать веб-страницы интерактивными, поэтому JavaScript и HTML идут рука об руку. Вот, как запустить код на JS с помощью веб-страницы:
Шаг 1. Откройте VS Code. Перейдите в Файл > Новый файл. Сохраните файл с расширением .html. У нас это будет main.html.
Шаг 2. Скопируйте doctype, расположенный ниже. Это необходимый для запуска HTML-страницы код. Сохраните скопированный текст в файле.
Шаг 3. Аналогично создайте файл с расширением .js. Напишите в файле следующий JS-код и сохраните его. У нас это будет helloworld.js.
Шаг 4. Вернитесь к файлу main.html и на 11 строке впишите название JS-файла. В нашем случае это будет выглядеть так:
Шаг 5. Откройте main.html с помощью браузера.
Шаг 6. Чтобы проверить, запустился ли ваш JS-код, щелкните правой кнопкой мыши в свободной области, нажмите «Просмотреть код» и перейдите на вкладку «Консоль».
Теперь, когда вы знаете, как запустить JavaScript, приступим к изучению основ JS.
СodeСhick.io — простой и эффективный способ изучения программирования.
The easy-to-use and fast JavaScript compiler. Write JavaScript code and run it online. Save time & effort with live view results, ready-to-use templates.
* PlayCode has users with official emails from these companies.
Our JavaScript online Compiler is the perfect solution for beginner developers looking to streamline their workflow and improve productivity. With our cutting-edge online editor, you can write, compile, and view the live results of your code all in one place. Our JavaScript Compiler is designed to make your life easier, whether you’re a seasoned developer or just starting out.
The JavaScript Online Compiler offers an intuitive user interface, making it easy for beginners to learn and practice their coding skills. With ready-to-use templates, you can quickly kick-start your projects and learn by example. These templates cover a wide range of topics and are tailored to help you grasp essential JavaScript concepts effortlessly.
One of the key features of our JavaScript Online Compiler is the live view coding result. As you write your code, you can instantly see the outcome, making debugging and testing a breeze. This real-time feedback allows you to iterate faster and catch errors before they become a headache.
In addition to the live view, our JavaScript Compiler offers a rich library of resources to help you level up your coding skills. With comprehensive documentation, video tutorials, and a thriving community of developers, you’ll never feel lost or unsupported.
Don’t waste any more time juggling between different tools and platforms. Give our JavaScript Compiler a try and experience the convenience of coding, compiling, and viewing your JavaScript projects all in one place. Join thousands of satisfied developers who have already discovered the power and efficiency of our JavaScript Online Compiler. Get started today and unlock your full potential as a JavaScript developer!
