Для новичка в JavaScript кодирование может быть довольно сложным! Мы можем видеть конечный результат кода каждый раз, когда используем наши телефоны, играем в видеоигры или даже переходим к этому сообщению в блоге. При этом существует так много разных подходов к кодированию в JavaScript, что может быть трудно понять, с чего начать.
Давайте сделаем глубокий вдох и начнем сверху. Взгляните на эту милую фотографию моего кота, которую я разместил в социальных сетях на днях.
Теперь я знаю, что вы УМИРАЕТЕ нажать на кнопку «Нравится» в моем Instagram, но было бы здорово узнать, как это работает? Ниже вы найдете краткое пошаговое руководство по увеличению количества лайков!
Вы новичок, не волнуйтесь, я не забыл! Мы сосредоточимся на основах и проигнорируем всю причудливую чепуху, которую, я уверен, вы узнаете позже о серверах, о том, как сохранить лайки, ограничить количество лайков на человека и т. д.
Кодирование начинается! Следите за собой в Visual Studio Code (VSC), чтобы увидеть, как это работает.
Шаг 1: Определите HTML-элементы, которые вам нужно будет использовать. Обязательно скопируйте и вставьте весь код в свой HTML-файл.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<button id="like-btn">Like</button>
<p id="like-amount">0</p>
</body>
<script src="./index.js"></script>
</html>
Посмотрите на body в этом коде — у нас есть элемент кнопки с идентификатором like-btn и абзац с идентификатором like-amount с текстовым содержимым 0 в вашем HTML-файле. Откройте свой терминал в VSC и запустите команду explorer.exe index.html, чтобы увидеть кнопку «Нравится» и цифру 0 в вашем браузере.
Шаг 2: Создайте свои переменные и добавьте прослушиватель событий к вашему элементу. Мы делаем это в JavaScript.
const likeBtn = document.querySelector('#like-btn')
const likeAmount = document.querySelector('#like-amount')
likeBtn.addEventListener('click', function() {
// add code to handle click event here
}
Здесь мы создали переменные likeBtn и likeAmount, нацелив наши два элемента, используя document.querySelector() с # для нацеливания на элемент с идентификатором. Убедитесь, что вы не перепутали их, они близки, но разные! Наконец, мы используем .addEventListener, чтобы добавить наш прослушиватель событий к этой переменной с дескриптором события click.
Шаг 3: Наконец, пришло время сообщить нашему событию (нажав кнопку «Мне нравится»), что мы хотим, чтобы оно делало!
function () {
likeAmount.textContent = parseInt(likeAmount.textContent) + 1
}
Хотим изменить количество лайков, чтобы быть самой себе ПЛЮС один! Мы используем .textContent, чтобы определить, что в данный момент находится в этом элементе, а затем устанавливаем его равным самому себе + 1, чтобы при запуске события — то есть при нажатии кнопки — число увеличивалось на 1! Но подождите… что тогда там делает parseInt? Ну, textContent нашего likeAmount технически является строкой! Мы пишем такую функцию, чтобы она преобразовывала строку в целое число (если это имеет смысл), а затем добавляла 1 к этому целому числу.
ПУХ. Я знаю, что это много, но как здорово, что теперь вы знаете, как добавлять лайки к кнопке? Теперь вы можете думать о моем милом коте каждый раз, когда лайкаете пост в социальных сетях. Добро пожаловать!
Если вы все еще немного запутались, это нормально. Ниже я связал несколько статей, которые вы можете прочитать, чтобы лучше понять, что здесь происходит!
