Вступление
Недавно я завершил свой первый проект в Flatiron School, которым очень горжусь! Не стесняйтесь прочитать о нем подробнее здесь. Во время рассмотрения моего проекта мне было дано задание по кодированию в реальном времени. Задача была проста: добавить счетчик в DOM, который будет прибавлять 1 к числу при нажатии на кнопку.
Звучит просто, верно? Особенно после завершения довольно большого проекта. Но, к сожалению, это вызвало у меня небольшие затруднения. Я довольно быстро понял, из каких частей состоит решение, но собрать их вместе на месте оказалось непросто.
Почувствовав себя немного подавленным тем, как я справился с этим упражнением, я понял, насколько важно было получить такое задание. Хотя само задание было простым, в нем было нечто большее, чем кажется на первый взгляд.
Впервые мне пришлось объяснять свой ход мыслей вслух незнакомому человеку, а также впервые мне пришлось выполнять задание по кодированию в присутствии незнакомого мне человека.
После окончания Flatiron мне определенно придется кодить перед людьми, объясняя при этом ход своих мыслей — это будет происходить на каждом собеседовании по программированию. Это была моя первая попытка понять, каково это, хотя эта задача была намного проще, чем любое собеседование.
Это была отличная практика, а практика делает совершенным.
Итак, сегодня давайте поговорим о задаче, которую мне поставили, и о том, как ее решить. Надеюсь, кто-то наткнется на этот пост в трудную минуту!
Задача
Вот что нужно было сделать:
- Добавить кнопку на веб-страницу
- Добавить счетчик на страницу
- Когда кнопка нажата, добавить 1 к счетчику.
Мне было разрешено ввести число 0 для начала упражнения.
Кусочки
Итак, как мы можем разбить это на шаги, которые нам нужно предпринять для решения проблемы? Вот как я разбил ее на части:
- Нам нужно создать кнопку в HTML
- Нам также нужно создать место для счетчика в HTML.
- Мы добавим слушатель событий, чтобы связать JavaScript, который мы собираемся написать, с HTML.
- Нам понадобится событие JS click для запуска счетчика.
- При нажатии мы обновим счетчик.
HTML
В нашем файле index.html мы начнем со следующих действий, которые являются гораздо более подробными в отношении первых двух пунктов выше.
- В теле нашего HTML создайте div для размещения всего содержимого
- Создайте кнопку
- Напишите текст для описания нашего номера
- Создайте span с идентификатором «counter», чтобы мы могли сохранить его как переменную в нашем файле index.js.
- Включите наше начальное число 0
ПРИМЕЧАНИЕ: Я не буду описывать это здесь для простоты, но в вашем HTML-файле не забудьте ваш шаблон HTML и указать на ваш JavaScript-файл!
Вот как выглядят приведенные выше шаги HTML:
<div>
<button type="button">Click Me!</button>
Number of Clicks: <span id="counter">0</span>
</div>
JavaScript
Далее нам нужно добавить часть JavaScript. Она состоит из шагов 2 — 6 в разделе «Детали» выше. Более подробно, вот что мы будем делать:
- Создайте переменную для HTML-кнопки
- Создать переменную для счетчика HTML
- Добавим слушатель событий, чтобы иметь возможность отслеживать нажатие на кнопку, а затем использовать функцию обратного вызова для…
- Добавить 1 к существующему числу
Сначала нам нужно сохранить ссылку на кнопку из нашего HTML в JavaScript. Я использовал querySelector
, чтобы найти кнопку по ее атрибуту «type». Затем я добавил слушатель событий в переменную кнопки:
const button = document.querySelector("button")
Далее нам нужно сохранить счетчик как переменную, чтобы мы могли увеличивать его при нажатии на кнопку. Вместо того чтобы использовать querySelector
, давайте сохраним эту переменную с помощью getElementById
:
const counter = document.getElementById("counter")
Далее я добавил слушатель событий для этой кнопки:
button.addEventListener("click", () => clickHandler())
Когда кнопка нажимается, я вызываю функцию обратного вызова clickHandler
, которая будет содержать код, указывающий программе, какое действие предпринять при нажатии на кнопку. Именно на этой части упражнения по живому кодингу я споткнулся. Я обнаружил, что очень часто я случайно переусложняю вещи.
Первое, что я попытался сделать, это взять число внутри счетчика, используя свойство innerHTML
, и добавить к нему 1, что выглядело следующим образом:
function clickHandler() {
counter.innerHTML + 1
console.log(counter)
}
Проблема в том, что число, которое я пытаюсь увеличить, 0, на самом деле не является целым числом (цифрой). Я выяснил это с помощью оператора typeof
:
console.log(typeof counter.innerHTML)
Оказалось, что число 0, которое я добавил в HTML, на самом деле было строкой. Поэтому, когда я пытался добавить к ней 1, ничего не получалось, потому что типы данных не совпадали.
Решение более элегантно, поскольку решает сразу две проблемы. Оно будет использовать классический оператор инкремента (++) и в то же время будет преобразовывать строку «0» в целое число, устраняя несоответствие данных! Новая функция будет выглядеть следующим образом:
function clickHandler() {
counter.innerHTML++
}
Попробуйте сами!
Пока мы здесь, давайте посмотрим, как мы можем еще немного упростить эту задачу.
Рефактор
Мы можем рефакторить эту трехстрочную функцию в однострочную стрелочную функцию:
const clickHandler = () => counter.innerHTML++
Отлично! Это все еще работает и сокращает наш код, не делая его более трудным для чтения. Но можем ли мы пойти еще дальше?
Конечно, можем.
Помните созданный нами слушатель событий, который выглядел следующим образом?
button.addEventListener("click", () => clickHandler())
Так вот, поскольку мы смогли сократить нашу функцию до одной строки кода, мы можем просто продолжить и выполнить действие функции непосредственно в самом слушателе событий! Вот как это выглядит, когда вы редактируете слушатель событий для немедленного выполнения этого действия:
button.addEventListener("click", () => counter.innerHTML++)
Конечный продукт
Теперь мы успешно создали функциональную кнопку-счетчик, с которой наши пользователи могут взаимодействовать в DOM примерно в 10 строках кода, включая HTML и JavaScript (за вычетом кодового шаблона)!
Чтобы просмотреть, как выглядит окончательный код в целом, смотрите ниже!
HTML тело:
<body>
<div>
<button type="button">Click Me!</button>
Number of Clicks: <span id="counter">0</span>
</div>
<script src="./index.js"></script>
</body>
JavaScript:
const button = document.querySelector("button")
const counter = document.getElementById("counter")
button.addEventListener("click", () => counter.innerHTML++)
Демонстрация Gif:
Я надеюсь, что этот пост был полезен вам в вашем путешествии по кодингу, не стесняйтесь обращаться, если у вас есть какие-либо вопросы или комментарии. 🙂
-Trevor