function doSomething(e) {
alert("Is this working?");
}
Использование метода alert, в общем-то, неплохой вариант, и он прекрасно работает в простых ситуациях. Но когда код усложняется, такой подход теряет свою эффективность. Как новичка вас, скорее всего, взбесят постоянные закрытия огромного количества диалоговых окон, появляющихся в процессе выполнения кода. Кроме того, потребуется удобный способ сохранять получаемые сообщения, а динамичная смена диалоговых окон alert изрядно затрудняет любые попытки журналирования.
В текущем уроке мы рассмотрим одно из величайших изобретений, помогающее нам лучше понять, что именно делает наш код. Если говорить точнее, мы приступаем к изучению консоли.
Поехали!
Знакомство с консолью
Даже если вы считаете, что пишете идеальный JS-код, то все равно будете проводить много времени в так называемой консоли. Если ранее вам не приходилось ею пользоваться, поясню, что она относится к инструментам разработчика и служит для вывода на экран текста и прочих данных, с которыми (иногда) можно взаимодействовать.
Выглядит она примерно так, как на рис. 11.1.
Рис. 11.1. Знакомство с консолью
Консоль помогает решать многие задачи на очень высоком уровне:
• читать сообщения, задав в коде их журналирование и вывод на экран;
• модифицировать состояние приложения, устанавливая (или переписывая) переменные и значения;
• просматривать значение элемента DOM, используемый стиль или доступный код, находящийся в области видимости;
• использовать ее как виртуальный редактор кода и записывать/выполнять определенный код просто ради интереса.
В этом разделе мы не будем заострять внимание на всех возможностях консоли. Вместо этого плавно, шаг за шагом, научимся использовать ее для простого отображения сообщений. Остальные невероятные возможности консоли мы успеем рассмотреть позже, поэтому не переживайте.
Отображение консоли
Первое, что мы сделаем, — запустим саму консоль. Она относится к браузерным инструментам разработки, доступ к которым вы можете получить либо через меню браузера, либо с помощью горячих клавиш. Находясь в браузере, нажмите комбинацию Ctrl + Shift + I, если работаете в Windows, или Cmd + Alt + I, работая на Mac.
В зависимости от платформы браузера каждый из инструментов разработки будет выглядеть несколько иначе. Нам же важно найти вкладку консоли и открыть ее.
На рис. 11.2. показана консоль Chrome.
Рис. 11.2. Консоль Chrome
В Safari консоль будет выглядеть, как на рис. 11.3.
Рис. 11.3. Консоль Safari
Консоль Firefox изображена на рис. 11.4.
Рис. 11.4. Консоль Firefox
Консоль Microsoft Edge показана на рис. 11.5.
Рис. 11.5. Консоль Edge
Хочу отметить, что не имеет значения, какой браузер вы используете. Консоль выглядит и работает почти одинаково в любом из них. Просто вызовите ее в своем любимом браузере и приготовьтесь использовать, пока читаете следующие разделы.
Для тех, кому важны детали
Сейчас вы можете просто прочесть несколько следующих разделов и изучить целую кучу информации, и пальцем не пошевельнув. Если такой вариант вам по душе, тогда пропустите этот раздел и переходите к следующему.
Но если вы хотите немного потренироваться и увидеть некоторые из особенностей консоли, создайте HTML-документ и добавьте в него следующий код HTML, CSS и JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Console Stuff</title>
<style> #container {
padding: 50px;
}
#myButton {
font-family: sans-serif;
font-size: 24px;
font-weight: lighter;
background-color: #FFF;
border: 3px #333 solid;
padding: 15px;
}
#myButton: hover {
background-color: aliceblue;
}
</style>
</head>
<body>
<div id="container">
<button id="myButton">click me</button>
</div>
<script>
let myButton = document.querySelector("#myButton");
myButton.addEventListener("click", doSomething, false);
function doSomething(e) {
alert("Is this working?");
}
</script>
</body>
</html>
Перед нами очень простая HTML-страница с кнопкой, по которой вы можете кликнуть. Когда вы это сделаете, появится диалоговое окно (такое же было описано ранее). Далее мы изменим этот пример, чтобы опробовать некоторые из возможностей консоли.