Общие правила.

На нашем сайте вы найдёте интересные статьи и руководства, которые помогут вам в изучении различных технологий! Вы можете оставлять свои комментарии и задавать различные вопросы.

Вы можете попросить ответа на интересующие вас вопросы и получить помощь, если у вас что-то не получается. Просто задайте свой вопрос на форуме и опишите, что вы хотели бы знать.

Пожалуйста, будьте культурны при общении на форуме.

Публикация своих статей

На сайте вы можете легко опубликовать вашу статью. Это всегда приветствуется!

Пара советов:

• Орфографически правильный текст удобнее и приятнее читать. В интернете есть множество сервисов, которые могут помочь вам с этим.
• «Оформляйте» свой текст. Использование картинок, красивое оформление текста и разбивание связанных строчек на абзацы делает текст лучше.

Удачи!

Обсуждение статей

Наш сайт — это форум. Вы всегда можете оценить статью, задать о ней вопрос и обсудить тему статьи.

Публикация вопросов

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

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

Форум и полезные статьи!

Добро пожаловать, Гость
Логин: Пароль: Запомнить меня
Забыли пароль? Забыли логин? Регистрация
Основное
Статьи, руководства, инструкции
Прочие руководства и статьи
Начальное руководство по HTML/CSS/JS. Создаём кликер на HTML. Часть пятая.
  • Страница:
  • 1

ТЕМА:

Начальное руководство по HTML/CSS/JS. Создаём кликер на HTML. Часть пятая. 2 года 5 мес. назад #26

  • Vlad_i_
  • Vlad_i_ аватар Автор темы
  • Не в сети
  • Администратор
  • Администратор
  • Сообщений: 18
  • Спасибо получено: 0
Продолжаем создавать свой мини-кликер с помощью HTML, CSS и JS.
В этой части мы напишем программный код для работы кликера с помощью JavaScript.
Предыдущая (четвёртая) часть.

Ещё немножко разукрасим нашу страничку.
Для начала увеличим размер шрифта у счётчика коинов — для этого используется CSS-свойство font-size.

.counter {
    text-align: center;
    margin-top: 250px;
    font-size: 50px;
}
Из этого получается:



Уже неплохо!

Пишем код на JavaScript.

Итак, наша небольшая заготовка готова. Теперь можно превратить её в кликер!
Для создания "интерактивного" сайта используется JavaScript. Он позволяет реагировать на различные действия пользователя, например, на нажатия кнопок. Файлы скриптов JavaScript имеют расширение .js

Подключение JavaScript.

Создадим в папке проекта файл script.js.
Для подключения файла JS в HTML используется тег <script>. Его нужно вставлять после закрывающего тега </body>. Путь к подключаемому файлу указывается в атрибуте src.
Подключим наш файл script.js:

<script src="script.js"></script>.
Готово! Проверим, что все работает!
Используем в файле script.js функцию вывода текста в консоль:

console.log("Hello, World!");
Этот код выведет в консоль строку Hello, World!
Для открытия консоли браузера нажмите F12 на клавиатуре и перейдите во вкладку Console (консоль).
Вот так будет выглядеть консоль в браузере Google Chrome:



Всё работает!
Чтобы программа знала, какой сейчас у нас счёт, нам нужна переменная с количеством коинов.
Переменная — «ячейка», в которой может храниться какое нибудь значение. Для определения (создания) переменной используется данная конструкция:

let название = значение
Имя переменной может содержать буквы, цифры и символы _ и $. Переменная не может быть каким-либо служебным словом (во избежание ошибок) и не может начинаться с цифры (по той же причине).
Создадим переменную coins с количеством коинов (пока что 0):

let coins = 0;
Для того, чтобы мы могли изменять текст у счётчика коинов и определять нажатия кнопки-кликера, мы должны найти их и добавить в переменную.
Для «нахождения» нужного элемента используется функция document.querySelector(). Эта функция найдет элемент с указанным селектором (будь то класс, id или тег). Если элементов с каким-нибудь селектором несколько, она определит самый первый (если нам нужно найти все элементы с определенным селектором, используется функция document.querySelectorAll(), но сейчас она нам не нужна).
Итак, определим переменную coinsCount и положим в нее элемент с классом .counter:

let coinsCount = document.querySelector(".counter");
И определим переменную clickerButton и положим в нее элемент с классом .clicker-button:

let clickerButton = document.querySelector(".clicker-button");
Готово! Проверим, правильно ли работает программа.
Попробуем в скрипте изменить текст coinsCount с 0 на 10. Изменение или считывание содержимого элемента выглядит так:

переменная.textContent = "Привет, мир!"; // текст в элементе будет изменён на "Привет, мир!".
Попробуем сделать это с coinsCount:

coinsCount.textContent = "10";
Получается:



Читать следующую часть.
Вложения:

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Последнее редактирование: от Vlad_i_.
  • Страница:
  • 1
Основное
Статьи, руководства, инструкции
Прочие руководства и статьи
Начальное руководство по HTML/CSS/JS. Создаём кликер на HTML. Часть пятая.