Что такое JavaScript?

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

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

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

<button type="button">Player 1: Chris</button>

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

button {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgb(200 200 0 / 0.6);
  background-color: rgb(0 217 217 / 0.6);
  color: rgb(100 0 0 / 1);
  box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  cursor: pointer;
}

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

const button = document.querySelector("button");

button.addEventListener("click", updateName);

function updateName() {
  const name = prompt("Enter a new name");
  button.textContent = `Player 1: ${name}`;
}

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

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

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

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

Ещё более увлекательным является функциональность, созданная поверх основного языка 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, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)

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

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

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

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

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

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

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

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

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

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

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

1. Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.

2. Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.

3. Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом </head>:

   html

   <script>
     // здесь будет JavaScript
   </script>
   

4. Теперь добавим JavaScript внутрь элемента <script>, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript":

   js

   document.addEventListener("DOMContentLoaded", function () {
     function createParagraph() {
       let para = document.createElement("p");
       para.textContent = "You clicked the button!";
       document.body.appendChild(para);
     }
   
     const buttons = document.querySelectorAll("button");
   
     for (let i = 0; i < buttons.length; i++) {
       buttons[i].addEventListener("click", createParagraph);
     }
   });
   

5. Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создаётся новый абзац и помещается ниже.

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

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

2. Замените ваш текущий элемент <script> на следующий:

   html

   <script src="script.js" defer></script>
   

3. Внутри script.js добавьте следующий скрипт:

   js

   function createParagraph() {
     let para = document.createElement("p");
     para.textContent = "You clicked the button!";
     document.body.appendChild(para);
   }
   
   const buttons = document.querySelectorAll("button");
   
   for (let i = 0; i < buttons.length; i++) {
     buttons[i].addEventListener("click", createParagraph);
   }
   

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

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

function createParagraph() {
  var para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}

<button onclick="createParagraph()">Click me!</button>

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

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

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

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

const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}

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

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

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

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

  js

  // Я комментарий
  

• Комментарий на нескольких строках пишется между строками /* и */, например:

  js

  /*
    Я тоже
    комментарий
  */
  

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

// Функция: создаёт новый параграф и добавляет его вниз тела HTML.

function createParagraph() {
  var para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}

/*
  1. Получаем ссылки на все кнопки на странице в виде массива.
  2. Перебираем все кнопки и добавляем к ним отслеживатель события нажатия.

  При нажатии любой кнопки, будет выполняться функция createParagraph().
*/

var buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}

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

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

• Обзор: Первые шаги в JavaScript
• Далее