Как запустить javascript в браузере

Знакомство с JavaScript. Подключение к странице

JavaScript (сокращённо JS) – это язык программирования , который изначально был придуман для браузера, чтобы придать страницам интерактивность и динамичность .

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

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

Данный язык изначально был создан Бренданом Айком в 1995 году для браузера Netscape и назывался он Mocha. Но после ряда переименований он обрёл окончательное имя – JavaScript . В начале он имел очень маленькую функциональность и в основном использовался для добавления на страницу интерактивности. Но со временем язык стал развиваться и позволять делать всё больше и больше.

В 1996 году язык JavaScript был стандартизован компанией Ecma, которая занимается стандартизацией информационных и коммуникационных технологий. Сама спецификация была названа ECMAScript или сокращённо ES. По сути, JavaScript является реализацией спецификации ECMAScript. Новые версии ECMAScript выходят ежегодно и добавляют в язык новые возможности.

• ECMAScript 1 – июнь 1997;
• ECMAScript 2 – июнь 1998;
• ECMAScript 3 – декабрь 1999;
• ECMAScript 5 – декабрь 2009;
• ECMAScript 5.1 – июнь 2011;
• ECMAScript 2015 (ES2015, ECMAScript 6, ES6) – июнь 2015;
• ECMAScript 2016 (ES2016, ECMAScript 7, ES7) – июнь 2016;
• ECMAScript 2017 (ES2017, ECMAScript 8, ES8) – июнь 2017;
• ECMAScript 2018 (ES2018, ECMAScript 9, ES9) – июнь 2018;
• ECMAScript 2019 (ES2019, ECMAScript 10, ES10) – июнь 2019;
• ECMAScript 2020 (ES2020, ECMAScript 11, ES11) – июнь 2020;
• ECMAScript 2021 (ES2021, ECMAScript 12, ES12) – июнь 2021.

ECMAScript – это стандарт JavaScript, который описывает полностью все функции JavaScript. Браузеры, Node.js применяют это стандарт и реализуют его поддержку.

Начиная с версии ES6 язык значительно преобразился, в нём появился новый синтаксис для написания сложных приложений (классы, модули, итераторы, циклы, генераторы в стиле Python, стрелочные функции, ключевые слова let , const и многое другое). С выходом версии ES6 весь код JavaScript принято делить на modern (современный) и классический (до ES6) .

В настоящее время JavaScript применяется не только в веб-браузере. С помощью него можно писать десктопные и мобильные приложения, использовать его на сервере (Node.js).

Язык JavaScript, как и другие языки программирования, имеет некоторые свои особенности. Среди основных – слабая типизация и динамическое приведение типов .

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

Виды браузеров и браузерных движков

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

Основные современные движки и браузеры, которые их используют:

• Blink (Google Chrome, Opera, Яндекс.Браузер и др.);
• Gecko (Mozilla Firefox, Waterfox и др);
• WebKit (Safari, Maxthon, Vivaldi и др.);
• EdgeHTML (Microsoft Edge).

Подключение JavaScript к странице

Добавление JavaScript на страницу выполняется с помощью тега <script> .

Первый способ – это вставка кода непосредственно на страницу . Выполняется это между открывающим и закрывающим тегом <script> .

Второй способ заключается в использовании отдельного файла с расширением js . В данный файл необходимо поместить код JavaScript, а затем подключить его к странице с помощью <script> . Путь к файлу задаётся с помощью атрибута src .

С помощью этого способа можно подключить JavaScript к большому количеству HTML страниц. Это позволяет при изменении кода не править его на каждой странице.

<script> можно поместить внутрь любого элемента, но рекомендуется непосредственно в <head> или <body> :

Если подключить скрипт с помощью атрибута src и дополнительно ещё указать некоторый код между открывающим и закрывающим тегом script , то код, который вы указали непосредственно, будет проигнорирован, т.е. он не выполнится.

Как выполняются скрипты на странице?

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

В этом примере используются 2 метода:

• alert() – для вывода на экран предупреждения с кнопкой «ОК»; данное предупреждение приостанавливает дальнейшую загрузку страницу;
• document.write() – для вывода текста в текущее место HTML, если страница ещё не загрузилась.

При загрузке этого документа, когда браузер встретит alert() , он выведет на экран предупреждение «HEAD: Hello, world!». Кроме этого, он приостановит дальнейшую загрузку страницы , пока пользователь не нажмёт на кнопку «ОК».

На этом этапе загрузки страницы:

После нажатия на кнопку «ОК» браузер продолжит загрузку страницы. Он выполнит метод document.write() , который выведет значение, указанное в скобках сразу после открывающего тега <body> . Затем тег <h1> и в завершении выполнит метод document.write() , который выведет текст «BODY: Hello, world!».

async и defer

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

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

defer – это ещё один атрибут для <script> , похожий на async . Он также указывает, что скрипт необходимо загрузить в фоне. Но в отличие от async , он будет выполнен после загрузки страницы, а точнее DOM. Кроме этого, стоит отметить, что скрипты, заданные с атрибутом async , выполняются перед вызовом события DOMContentLoaded .

Ещё одно отличие defer от async в том, что defer сохраняет очередность их выполнения:

Т.е. вне зависимости от того какой скрипт загрузится быстрее, они всё равно будут выполнены браузером в том порядке, в котором они расположены в коде. В данном примере, сначала выполнится «script-1.js», а затем «script-2.js» даже если второй загрузится быстрее, чем первый.

Если для <script> одновременно указать два атрибута, т.е. сразу async и defer , то будет работать только async .

Атрибуты async и defer можно использовать только для скриптов, подключаемых на страницу с использованием src .

Что такое JavaScript?

Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.

Необходимые навыки:	Базовая компьютерная грамотность, знание основ HTML и CSS.
Цели:	Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.

Определение высокого уровня

JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

— это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу. — это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид. язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.

Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:

Затем мы добавим немного CSS, что бы это выглядело симпатичнее:

И наконец, добавим немного JavaScript для придания динамического поведения:

Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

JavaScript может делать намного больше — давайте выясним это более детально.

Так что же он действительно может делать?

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

• Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной name .
• Операции над фрагментами текстов (известными в программировании как «строки»). В примере выше мы брали строку «Player 1: » и присоединили её к значению переменной name для получения полного текста, например: »Player 1: Chris».
• Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали click (en-US) событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.
• И многое другое!

Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

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

Они обычно делятся на две категории.

API-интерфейсы браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:

• API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.
• API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.
• API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии — см. Chrome Experiments и webglsamples.
• Аудио и видео API, такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)

Примечание: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей, для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по кроссбраузерному тестированию, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).

По умолчанию сторонние API-интерфейсы не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера:

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

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

Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

Что JavaScript делает на вашей странице?

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

Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).

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

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.

Безопасность браузера

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

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

Последовательность выполнения JavaScript

Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы многократно используемых блоков кода называются «функции») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — TypeError: para is undefined . Это значит, что объект para ещё не существует и вы не можете добавить к нему обнаружение событий.

Примечание: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

Интерпретируемый против компилируемого кода

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

С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

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

Серверный против клиентского кода

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

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

Слово динамический используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.

Веб-страница без динамического обновления контента называется статической — она просто показывает один и тот же контент все время.

Как добавить JavaScript на вашу страницу?

JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы <link> для внешних стилей и <style> для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент <script> . Давайте узнаем, как это работает.

Внутренний JavaScript

1. Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.
2. Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.
3. Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом </head> :

Примечание: Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как .html файл? Добавили ли ваш <script> элемент после тэга </body> ? Ввели ли вы JavaScript именно так, как показано? JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.

Примечание: вы можете увидеть эту версию на GitHub-е как apply-javascript-internal.html (посмотреть вживую).

Внешний JavaScript

Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.

1. Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его script.js — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
2. Замените ваш текущий элемент <script> на следующий:

Примечание: вы можете увидеть эту версию на GitHub-е как apply-javascript-external.html и script.js (посмотреть вживую).

Инлайновые JavaScript обработчики

Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:

Вы можете попробовать эту версию в нашей демонстрации ниже:

Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент <button> содержит встроенный обработчик onclick , который запускает функцию при нажатии кнопки.

Но пожалуйста, не делайте этого. Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут onclick=»createParagraph()» к каждой кнопке, к которой вы хотите подключить JavaScript.

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

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

Примечание: Попробуйте отредактировать вашу версию apply-javascript.html и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?

Стратегии загрузки скриптов

Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.

Комментарии

Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:

Однострочный комментарий пишется после двойного слеша (//), например:

Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:

Выводы

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

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

Name already in use

ru.javascript.info / 1-js / 02-first-steps / 01-hello-world / article.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

21 contributors

Users who have contributed to this file

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

В этой части учебника мы изучаем собственно JavaScript, сам язык.

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

Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.

Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега <script> .

Тег <script> содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.

Тег <script> имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:

Атрибут type : <script type=. > : Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге <script> . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.

Атрибут language : <script language=. > : Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.

Обёртывание скрипта в HTML-комментарии. : В очень древних книгах и руководствах вы сможете найти комментарии внутри тега <script> , например, такие:

Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.

Файл скрипта можно подключить к HTML с помощью атрибута src :

Здесь /path/to/script.js — это абсолютный путь до скрипта от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://github.com/javascript-tutorial/ru.javascript.info/blob/master/1-js/02-first-steps/01-hello-world/script.js» или src=»https://github.com/javascript-tutorial/ru.javascript.info/blob/master/1-js/02-first-steps/01-hello-world/script.js» будет означать, что файл «script.js» находится в текущей папке.

Можно указать и полный URL-адрес. Например:

Для подключения нескольких скриптов используйте несколько тегов:

««warn header В одном теге `<script>` нельзя использовать одновременно атрибут `src` и код внутри.

Что такое JavaScript и зачем он нужен

Знакомимся с главным языком фронтенд-разработки, сравниваем его с Java и запускаем первую программу.

Иллюстрация: Merry Mary для Skillbox Media

На JavaScript написан практически весь фронтенд — всё, что мы можем увидеть в интернете. А относительно недавно он обосновался в бэкенде, на смартфонах и даже в прошивках умных чайников. Язык востребован и регулярно занимает первое место в рейтинге Stack Overflow.

Разбираемся, чем хорош JavaScript, где применяется и подходит ли он новичкам.

Что ещё за скрипт такой

JavaScript — это язык управления элементами на сайте. Он умеет красить кнопки, запускать анимации, загружать эффекты, и всё это — без перезагрузки страницы. Например, вы нажали кнопку «Нравится» — вспыхнуло красное сердечко. Или навели курсор на три точки, и выпало меню. В обоих случаях на странице сработал скрипт . А JavaScript как раз главный по ним в интернете — отсюда и его название.

JavaScript появился в далёкие девяностые, когда интернет был совсем юным и состоял в основном из текста и гиперссылок. Тогда компания Netscape захотела себе новый язык для веба в дополнение к HTML и CSS.

На то было две причины:

• Благородная — чтобы люди в браузере могли не только читать текст, но и запускать разные меню, окошки, мигающие кнопки и так далее.
• Коммерческая — чтобы утереть нос Microsoft. В то время между Netscape Navigator и Internet Explorer шла «браузерная война», и Netscape решила привлечь разработчиков к работе в своём браузере с помощью нового языка.

После этого сайты стали выглядеть примерно так:

А ещё Netscape договорилась с Sun Microsystems, чтобы язык считался «младшим братом» Java для браузеров. Так появилось название JavaScript — не потому, что языки сильно похожи, а потому, что Java тогда был на хайпе. В общем, во всём вините маркетологов 🙂

Пишем первую программу

Для начала небольшой ликбез. Все языки программирования делятся на компилируемые и интерпретируемые. Чтобы запустить программу, написанную на компилируемом языке, код предварительно прогоняют через компилятор. А вот код на интерпретируемом языке прогонять не надо — передал интерпретатору, и тот его сразу же исполняет.

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

Вот как запустить скрипт в браузере:

1. Берём код.
2. Вставляем в браузер.
3. Запускаем.

Кажется, звучит несложно. Давайте что-нибудь напишем. Откроем консоль браузера (Ctrl + Shift + J или Cmd + Opt + J) и вставим туда вот этот код:

Введите своё имя и нажмите OK. Теперь сайт умеет с нами здороваться!

Возьмём задачу посложнее. Допустим, у вашего учителя музыки юбилей, и вы готовите ему в подарок небольшой сайт-открытку. Добавили туда красивую надпись, фотографии, стихи. Вроде всё есть, но чего-то не хватает — ну, точно, воздушных шариков! Непорядок. Берём этот код и вставляем в консоль:

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

Где ещё нужен JavaScript

Веселье весельем, но JavaScript — это серьёзный и мощный язык, на котором можно не только красивые анимации рисовать, но и писать сложные программы для бизнеса.

Веб-приложения

Возьмём, к примеру, «Google Документы». Вспомните, как много там функций: можно менять шрифт, выравнивать абзацы, вставлять картинки. Без JavaScript нам бы пришлось перезагружать страницу после каждого действия — проще плюнуть и уйти в Word. А так у нас есть удобная облачная альтернатива.

Бэкенд

JavaScript умеет запускаться на сервере и может быть полноценным бэкенд-языком — как Python, С# и Java. Подключаем к нему специальный движок Node.js, и можно писать вообще что угодно: чаты, соцсети, компьютерные программы и так далее. В Netflix, например, пишут на нём и серверную логику, и интерфейс.

Расширения для браузера

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

Мобильные приложения

Допустим, вы работаете тимлидом в небольшой IT-компании, создаёте облачное хранилище. Однажды к вам приходит продакт-менеджер и требует приложение для Android — чтобы клиенты могли заходить в хранилище с телефона. А у вас вообще-то стартап, и денег на Android-разработчика нет.

Можно пойти сложным путём и обучить команду программировать на Kotlin. А можно схитрить и попросить фронтендера написать программу на JavaScript. Потом просто компилируете её под Android с помощью React Native и получаете нативное приложение.

Игры

Помните динозаврика из Google Chrome? Который прыгает через кактусы, если пропал интернет. Вы тоже можете написать такого на JavaScript, и ещё много других простых игрушек: гонок, бродилок, головоломок, стратегий и так далее.

Чем JavaScript отличается от Java

Многие начинающие разработчики думают, что Java и JavaScript — родственники. Мол, сначала нужно выучить Джаву, а придачу к ней ещё Скрипт, и дело в шляпе 🙂 На самом деле это совсем разные языки — они по-разному устроены и используются для разных задач.

Типизация

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

А в JavaScript типизация динамическая, поэтому типы задавать не нужно. С одной стороны, свобода и рок-н-ролл, а с другой — возможны разные аномалии. Например, у JavaScript можно спросить, что больше — банан или 150, и получить ответ:

Java на такие фокусы начнёт ругаться:

Зато так безопаснее — язык защищает программиста от его собственных ошибок. Не сравнивайте бананы с числами!

Компиляция

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

Скрипты же сначала перехватывает интерпретатор, который делает примерно то же самое, но в режиме реального времени. То есть при каждом запуске скрипта код JavaScript переводится в машинный.

Применение

Магия языка Java — в его виртуальной машине (JVM). Виртуальная машина позволяет запускать код на любом устройстве, где она установлена. Удалось запустить машину — запустится и программа. Поэтому на Java удобно писать софт для самых разных устройств: серверов, компьютеров, смартфонов, банкоматов и даже роботов.

У JavaScript совсем другая задача — управлять элементами страницы. Можно написать полезный скрипт и добавить функций на сайт. А если ещё освоить Node.js, то вообще никакой другой язык не нужен — можно хоть розетку запрограммировать.

Что легче учить

Короткий ответ — JavaScript. Чтобы написать первый скрипт, не нужно тратить время на установку виртуальной машины и разбираться в типах данных. А из инструментов понадобятся лишь блокнот и браузер. Выбирайте его, если вы совсем новичок и хотите быстро вкатиться в разработку.

С Java на первых порах придётся попотеть, зато потом вы сможете запускать сложные системы. А ещё с Java легко перейти на другие языки — Kotlin или C#.

Сколько платят программистам

Программисты на JavaScript всегда востребованны — они нужны банкам, IT-компаниям, рекламным агентствам и всем, кто ведёт бизнес в интернете. Да и платить им готовы неплохо — в среднем 156 000 рублей в месяц (по данным «Хабр Карьеры»). А джун без опыта может получать около 60 000 рублей.

Если сравнивать разные грейды, то зарплаты JavaScript-разработчиков выглядят так:

• от 40 до 100 тысяч — джуны;
• от 80 до 225 тысяч — мидлы;
• от 200 до 450 тысяч — сеньоры.

Работы у «джаваскриптеров» хоть отбавляй. Согласно hh.ru, в Петербурге и Москве для них открыто 5000 вакансий — это больше, чем для программистов на Java, PHP или C#.

С чего начать?

Почитайте книгу «Выразительный JavaScript» Марейна Хавербеке — это отличное пособие по языку с примерами, заданиями и без воды. Хороший онлайн-учебник у программиста Ильи Кантора — по нему можно дойти от азов до продвинутых концепций вроде ООП и прототипов.

Дальнейший путь зависит от вашего стека. Если метите во фронтенд, начните с HTML и CSS. На сайте Code Basics есть бесплатные курсы по ним — с понятной теорией и тренажёрами. Потом разберитесь в работе браузера, сетевой безопасности и определитесь с фреймворком: React.js, Vue.js или Angular.JS.

Если больше нравится бэкенд, в первую очередь изучите Node.js — он позволяет разворачивать JavaScript на сервере. Во-вторых, освойте SQL-запросы, базы данных и сетевые протоколы. По последней теме посоветуем бессмертную классику Эндрю Таненбаума «Компьютерные сети», которая обновляется каждые 3–5 лет.

Резюмируем

JavaScript отлично подходит для «вкатывания» в IT. На первых порах с ним не нужно погружаться в технические детали и сложные концепции, а писать код можно в блокноте или простом редакторе. На JavaScript написан фронтенд большинства сайтов, а у некоторых — даже серверная часть. Поэтому программисты, которые освоили этот язык, будут востребованны, пока жив интернет 🙂