Спасательный круг для тех, кто начинает писать на JavaScript — Журнал «Код» программирование без снобизма

Допустим, вы начали писать свою первую реально полезную программу на JavaScript. У вас появляются реальные задачи, и они намного сложнее, чем обойти массив и сложить два числа. Где искать ответы на вопросы, о которых вы раньше не подозревали? У кого заимствовать идеи? Как их вклеить в свой код? Что делать, если что-то не работает, хотя должно?

Вот об этом — в статье.

Как начать исполнять программы

Раньше вы могли исполнять код в браузере, прямо в консоли: открываете любую страницу, вызываете консоль, пишете код, исполняете.

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

Веб-страница с HTML — она будет отвечать за интерфейс программы и нести в себе код JavaScript.
Код JavaScript, встроенный в эту страницу или в отдельном файле.

Страницу нужно будет положить на компьютер или опубликовать в интернете.

HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). Проще говоря, это набор команд, которые говорят нашим браузерам, как рисовать сайты. Самая простая страница выглядит так:

Что такое HTML (и почему это важно)

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

</body>
</html>

На ней ничего нет, это просто шаблон, который можно наполнить своим содержимым — текстом, картинками, кнопками и скриптами.

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    img {
      max-width: 100%;
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Адаптивная вёрстка</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
      </div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
      </div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
        <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->

</html>

HTML-страница сама по себе просто показывает какой-то контент. Чтобы там началась какая-то работа программы, внутрь страницы нужно встроить скрипт. Его можно добавлять прямо в HTML-файл в раздел <script>:

<script>
<!-- Здесь будет наш скрипт -->
	// Заводим переменные под наши задачи
    	var List = $('#tdlApp ul');
  	var Mask = 'tdl_';
	var number_Id = 0;
</script>

Другой вариант — писать код в отдельном файле подключать его к странице так:

<script type=”text/javascript” src=”script.js“></script>

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

⚠️ Куда положить скрипт? Теоретически скрипт можно положить в любое место страницы. Но для корректной работы он должен находиться перед закрывающим тегом </body>. То есть сначала должны загрузиться все элементы интерфейса и все стили, а потом — скрипт. Если в скрипте идёт обращение к каким-то элементам страницы, но эти элементы ещё не загрузились, браузер может выдать ошибку, а программа не исполнится.

То есть правильно так:

<!–какой-то код HTML-страницы –> <script type=”text/javascript”>/*Тут ваш скрипт*/</script> </body> <!– Закончилась страница –> </html> <!– Закончился документ –>

Консоль

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

Почти во всех современных браузерах консоль можно открыть сочетанием клавиш Shift + Ctrl + J или Cmd + Alt + J. Справа или снизу появится дополнительное окно, в котором уже будет что-то происходить:

Спасательный круг для тех, кто начинает писать на JavaScript

Если у вас не открылась консоль, зайдите в верхнее меню и поищите слово «Консоль». Обычно этот пункт прячется в разделе «Инструменты разработчика».

Когда вы открываете консоль, она сразу готова выполнять ваши команды. Если в неё вставить программу, написанную на JavaScript, и нажать Enter, ваш браузер её исполнит. Если в коде есть ошибки, консоль сама подсветит их. Можно отправлять в неё программу кусками: браузер будет помнить всё, что происходило в вашей программе, пока вы не перезагрузите страницу.

Самые основы JavaScript

Напомним необходимый минимум, чтобы писать на JavaScript: переменные, типы данных, циклы и условия, функции.

Переменная — это небольшая часть оперативной памяти, которой можно дать своё имя, а потом что-то там хранить: числа, строки и всё остальное. Самый простой способ объявить переменную — написать:

var i; ← просто объявили переменную i;

или var i = 15; ← объявили переменную i и сразу положили туда число 15.

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

var a = 1; ← целое число;

var b = 0.75; ← дробное число;

var c = ‘Привет!’; ← строка;

var d = [1,2,3,4,5]; ← массив;

var f = true; ← логическое значение.

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

Вместо var вы часто встретите в чужом коде слово let. Это тоже объявление переменной, но локальной: как только выполнится текущий кусок кода (например, цикл или функция), эта переменная самоуничтожится. Обычно глобальные переменные для всей программы объявляют через var, а внутренние и временные переменные — через let.

Циклы. Если нам нужно, чтобы компьютер сделал что-то несколько раз подряд, используют циклы. Главное, за чем следят в цикле, — чтобы он точно когда-нибудь закончился. Если этого не предусмотреть, то цикл будет выполняться бесконечно и программа зависнет.

В JavaScript есть три вида циклов:

Цикл for. В общем виде он выглядит так:

for (начало; условие цикла; шаг) {
  // тело цикла
}

Начало — это с какого значения переменной мы начинаем работать в цикле, условие — до каких пор цикл будет выполняться, а шаг — это на какое значение будет меняться переменная цикла. Например, вот как можно вывести числа от 0 до 10 в цикле for:

for (let i = 0; i <= 10; i++) { 
  console.log(i);
}

Цикл while. Он сначала проверяет условие, потом выполняет то, что внутри цикла, потом снова идёт проверять условие, и так до тех пор, пока условие не станет ложным:

while (условие) {
  // тело цикла
}

Выведем те же числа от 0 до 10:

var i = 0;
while (i <= 10) {
  console.log(i);
  i++;
}

Цикл do..while. Работает так же, как предыдущий, только мы сначала хотя бы раз выполняем тело цикла, а потом идём проверять условие:

var i = 0;
do {
  console.log(i);
  i++;
} while (i <= 10)

Функции. В скриптах часто используют функции — это мини-программы, которые сначала описываются, а потом вызываются одной строкой. В общем виде функции выглядят так:

function название(аргументы) {
	// полезная работа
}

Например, эта функция выводит в консоль текущее время и дату:

function printCurrentDate() {
	var objToday = new Date(),
	weekday = new Array('Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'),
	dayOfWeek = weekday[objToday.getDay()],
	dayOfMonth =  objToday.getDate(),
	months = new Array('января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'),
	curMonth = months[objToday.getMonth()],
	curYear = objToday.getFullYear(),
	curHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? "0" + objToday.getHours() : objToday.getHours()),
	curMinute = objToday.getMinutes() < 10 ? "0" + objToday.getMinutes() : objToday.getMinutes(),
	curSeconds = objToday.getSeconds() < 10 ? "0" + objToday.getSeconds() : objToday.getSeconds(),
var today = curHour + ":" + curMinute + " " + dayOfWeek + " " + dayOfMonth + " " + curMonth + " " + curYear+ " г.";
return today;
}

А чтобы выполнить всё это хозяйство, достаточно написать в консоли или вызвать в коде одну команду:

printCurrentDate();

Обратите внимание, что в коде выше в конце функции стоит слово return. Оно значит, что когда функция исполнится, она отдаст какое-то значение тому, что её вызвало. Если лично вы вызвали функцию из консоли, то лично вам в консоль вернётся значение текущей даты. А если вы хотите, чтобы эта дата вылезла в виде всплывающего окошка, нужно будет вызвать эту функцию вот так:

alert(printCurrentDate());

Что переводится как «Исполни функцию printCurrentDate без дополнительных аргументов, а её результат передай команде alert».

Кстати, как только функция выполняет команду return, она отдаёт нужные данные и перестаёт выполняться.

Аргументы функции. У функции могут быть аргументы: это способ сообщить что-то в функцию. Например, у вас может быть функция для проверки логина и пароля. Чтобы проверить их, вам нужно передать в функцию логин и пароль. Вы указываете при объявлении функции, что вам нужно передать в неё эти два параметра, и называете их по именам. Дальше внутри функции вы можете использовать эти имена. А при вызове функции вам нужно вместо имён передать уже настоящие данные.

Вот мы определили функцию, в которую передаются два параметра, а потом они проверяются:

function checkUserCredentials(username, password){ /*тут вы проверяете переменные username и password, например так:*/ if (username == secret1 && password == secret2){ return true; }else{ console.log(‘Неверный логин или пароль’); return false; } }

А теперь вызываем эту функцию, но уже с нужными данными:

var isValidUser = checkUserCredentials(‘admin’,’qwerty’);

Вместо конкретных строк admin и qwerty можно передать в функцию значения других переменных, а также целые объекты, массивы и что угодно ещё. Представьте, что это такое окошко, через которое вы передаёте что-то в функцию.

Как обратиться к чему-то на странице

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

document.getElementById() — находит элемент по его ID. Например, если у нас есть абзац <p id=”radio”>Это текст абзаца</p>, то обратиться к нему можно так:

var s = document.getElementById(“radio”);

После этого через переменную s можно работать с этим конкретным абзацем.

Кроме document.getElementById() ещё применяют:

document.getElementsByName() — поиск по имени элемента;
document.getElementsByClassName — по названию класса;
document.querySelector() — возвращает первый элемент с указанным CSS-стилем;
document.querySelectorAll() — возвращает все элементы с указанным CSS-стилем.

Как вставить чужой код и вызвать его

Наверняка у вас возникнет ситуация, что вы хотите решить какую-то задачу кодом, но вообще не знаете, как к ней подойти. Тогда:

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

Чтобы код заработал, помните о таких нюансах:

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

function solveMyProblem(){ /*тут непонятный код*/ }

Вы вставляете этот код в свою программу, но ничего не происходит. Причина в том, что вы вставили функцию, но не вызвали её. Теперь нужно её вызвать — например повесить исполнение этой функции на кнопку. Или для начала просто открыть консоль и выполнить эту функцию:

solveMyProblem();

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

document.getElementById(“myElement“);

Вместо myElement может быть что-то другое. Вот на место этого слова нужно вписать айдишник нужного вам объекта на странице. Если у нужного объекта нет айдишника, его нужно прописать. Например: <div id=”myElement”>…</div>.

Как повесить событие на кнопку или нажатие клавиши

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

Кнопка на странице:

Создаём кнопку на странице тегом <button>:
<button>Это кнопка</button>
Добавляем обработчик нажатия onclick — он сработает, когда мы нажмём на кнопку:
<button onclick=””>Это кнопка</button>
Внутри кавычек пишем JS-команду или функцию из нашего скрипта, который мы подключили к странице. Например, вызовем функцию test():

Сейчас при нажатии на кнопку у нас сработает функция test() — для этого страница пойдёт в скрипт, найдёт эту функцию и выполнит её. Можно посмотреть, как устроен проект по предсказанию курса крипты, — там мы тоже используем обработчик кнопок на странице.

Кнопка на клавиатуре:

Добавляем на страницу стандартный обработчик событий addEventListener().
Указываем, что будем следить за нажатиями на клавиатуре — пишем параметр ‘keydown’.
Внутри обработчика проверяем код кнопок и выполняем нужные действия, например, вызываем функции.

Например, вот так мы сделали управление платформой в пинг-понге на JavaScript:

// Отслеживаем нажатия клавиш
document.addEventListener('keydown', function (e) {
  // Если нажата клавиша вверх,
  if (e.which === 38) {
    // то двигаем правую платформу вверх
    rightPaddle.dy = -paddleSpeed;
  }
  // Если нажата клавиша вниз,
  else if (e.which === 40) {
    // то двигаем правую платформу вниз
    rightPaddle.dy = paddleSpeed;
  }
  // Если нажата клавиша W, 
  if (e.which === 87) {
    // то двигаем левую платформу вверх
    leftPaddle.dy = -paddleSpeed;
  }
  // Если нажата клавиша S,
  else if (e.which === 83) {
    // то двигаем левую платформу вниз
    leftPaddle.dy = paddleSpeed;
  }
});

Нужна ли здесь jQuery или какая-нибудь ещё библиотека?

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

Чаще всего из дополнительных библиотек при веб-разработке подключают jQuery — с ней многие вещи можно сделать проще и быстрее. Примерно в половине случаев, когда вы берёте чужой код, там используется jQuery. Самый верный признак этого — в коде есть знак доллара и конструкции типа:

Зачем вам jQuery

var $elem = $(“.SomeClass”) $elem.remove();

Чтобы такое заработало, нужно подключить jQuery на HTML-странице, добавив перед вызовом своего скрипта такую строку:

<script src=”https://yastatic.net/jquery/3.3.1/jquery.min.js” type=”text/javascript”></script>

Если знака доллара нет, но при запуске скрипт ругается на какую-то команду, то, скорее всего, нужно подключить что-то ещё. Самый простой способ узнать, что именно подключать, — набрать в Яндексе набрать название этой команды и добавить фразу «как работает». Например, если скрипт выдаёт ошибку на команде LUME.defineElements();, то первый же ответ в поиске даст нам нужную библиотеку:

Куда ходить за вопросами или помощью

Если нужно разобраться, как работает какая-то функция, библиотека или технология, — читайте «Код».

Если нужно быстрое решение — ищите его на StackOverflow.

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

Что дальше

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