Если вы следили за этим, у вас должно быть хорошее знание HTML и CSS. По крайней мере, теоретически — позвольте мне сказать, что НИЧЕГО — это хорошая замена борьбе с реальным проектом, в котором используются новые методы или концепции. Всегда пытайтесь построить что-то после того, как узнали что-то новое, и обращайтесь за помощью, когда вам это нужно!

Теперь уместно перейти к большому делу — JavaScript.

Это будет огромный скачок для всех, кто не знаком с языками, полными по Тьюрингу. Понимание работ Алана Тьюринга на данном этапе не обязательно (хотя я призываю всех читать его жизнь), но Тьюринг-полнота — это концепция, которая отделяет ограниченные языки, такие как HTML и CSS, от таких языков, как JavaScript.

Подумайте об этом так: язык считается «полным по Тьюрингу», если его можно использовать для программирования любых вычислений, которые теоретически возможны. Это означает, что любая проблема, которая может быть решена компьютером, по существу может быть выражена этим типом языка.

С другой стороны, язык программирования, не являющийся полным по Тьюрингу, ограничен набором вычислений, которые он может выражать и выполнять. Эти языки проще в изучении и использовании, но они не так эффективны, как языки, полные по Тьюрингу.

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

Настройка

Подобно связыванию документов CSS, мы можем аналогичным образом связать файлы «скриптов» JS с нашим HTML. Бланк выглядит примерно так -

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset=”utf-8"> 
    <title>Page Title</title> 
  </head> 
  <body> 
    <! — Add your content here → >
    <script src=”path/to/script.js”></script>
  </body> 
</html>

Это должно показаться знакомым тем, кто читал мою статью о шаблонах HTML. Самая большая разница здесь в том, что тег «сценарий». Это то место, где ваш файл JS находится в вашем HTML.

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

Как только наш JS-файл будет связан, весь код внутри будет инициализирован при запуске нашего HTML — будут объявлены переменные, будут вызваны функции и т. д. Нам больше ничего не нужно делать!

Не волнуйтесь, если это слишком. HTML и CSS в начале выглядели больше, чем сейчас.

Простой пример

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

Не переживайте из-за того, что не знаете, как работает JS — сейчас важно знать, что он работает, когда связан с нашим HTML.

Кстати говоря, вот наш HTML -

<html> 
  <head> 
    <meta charset=”utf-8"> 
    <title>Changing Button</title> 
    <link rel="stylesheet" href="./your_css.css">
  </head> 
  <body> 
    <button id='btn' class='btn-blue'>Click Me</button>
    <script src=”path/to/script.js”></script>
  </body> 
</html>

Обратите внимание, что мы связали таблицу стилей. Вот и это тоже -

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  width: 200px;
  height: 100px;
  border-radius: 5px;
}

.btn-blue {
  background-color: blue;
}

.btn-red {
  background-color: red;
}

Рассматриваемые классы, как показано здесь, просто меняют цвет фона кнопки, как и было обещано. Но как бы мы изменили цвет кнопки? Вот где JS приходит -

const btn = document.getElementById('btn');

btn.addEventListener(‘click’, function() {
 if (btn.className.includes(‘btn-blue’)) {
   btn.classList.remove(‘btn-blue’);
   btn.classList.add(‘btn-red’);
 } else {
   btn.classList.remove(‘btn-red’);
   btn.classList.add(‘btn-blue’);
 }
});

Добавьте эти три файла в IDE по вашему выбору (для чего-то такого простого, и поэтому вам не нужно на самом деле создавать файлы, мне нравится CodePen), и вы сможете нажать эту кнопку сколько душе угодно и получить изменение цвета каждый раз.

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