Современные веб-технологии позволяют создавать интерактивные и адаптивные веб-страницы, которые отлично работают на различных устройствах, включая смартфоны и планшеты.
Использование JavaScript и HTML5 открывает новые возможности для создания динамичных пользовательских интерфейсов, поддерживающих сенсорные экраны. В этой статье мы рассмотрим, как с помощью JavaScript можно создать таблицу, реагирующую на касания экрана, и адаптировать её для полноценного использования на мобильных устройствах.
Здесь мы с вами создадим пример в виде пошагового руководства по написанию кода, который позволяет реализовать анимацию и отображение координат на сенсорных экранах, таких как планшеты и смартфоны.
Включим также примеры для обеспечения корректного отображения и взаимодействия с таблицей как на сенсорных, так и на не сенсорных устройствах. Этот подход обеспечит удобство и функциональность вашего веб-проекта для пользователей с разными типами устройств.
Пример использования JavaScript для реализации сенсорных нажатий
Сначала мы объясним отдельные участки кода или верстки отдельно, а затем дадим полную версию готовой страницы.
Суть примера: создать таблицу 5 на 5, каждое поле которой имеет свою координату: по горизонтали A, B, C, D, E и по вертикали 1, 2, 3, 4, 5, что-то наподобие шахмат. При сенсорном нажатии на любую ячейку будет применяться простая анимация и будут отображаться координаты данной ячейки.
Версия JS: ECMAScript 6 (ES6), также известный как ECMAScript 2015.
Использование const и let для объявления переменных было введено в ES6. В коде const используется для создания неизменяемых переменных (table, letters), а let может быть использован для переменных, которые могут изменяться в ходе выполнения (i, j).
Шаблонные строки:
Шаблонные строки, использованные для создания текста внутри span, также появились в ES6. Они позволяют вставлять переменные и выражения в строки с помощью ${}.
Стрелочные функции:
Стрелочные функции, используемые в setTimeout(() => { ... }), появились в ES6. Они позволяют более компактное определение функций и имеют некоторые отличия в поведении this.
Методы Array.prototype.forEach:
Методы для работы с массивами, такие как forEach, также являются частью ES6.
Итак, начнем.
Начало кода, думаем, объяснять не нужно. Все это мы уже разбирали в прошлом примере, когда писали змейку на JavaScript. Здесь же объясним лишь те HTML тэги, которые тогда не затрагивали.
Здесь прервемся, так как использовали новые теги, которые крайне важны для мобильной версии сайта, смотрите подробнее по этой ссылке, мы уже это обсуждали. Продолжим, распишем стили:
font-family: Arial, sans-serif;: Устанавливает шрифт для всего текста на странице. Arial будет использоваться в первую очередь, а если он недоступен, применится любой другой шрифт без засечек (sans-serif).
display: flex;: Устанавливает, что элементы на странице будут располагаться в формате флекс-контейнера. Это позволяет легко выравнивать и распределять элементы внутри контейнера.
justify-content: center;: Выравнивает содержимое контейнера по горизонтали по центру.
align-items: center;: Выравнивает содержимое контейнера по вертикали по центру.
height: 100vh;: Устанавливает высоту контейнера равной 100% высоты видимого окна браузера (viewport height).
margin: 0;: Убирает стандартные отступы вокруг элемента body.
background-color: #f0f0f0;: Устанавливает фоновый цвет для всего body. В данном случае это светло-серый цвет.
width: 80vmin;: Устанавливает ширину элемента #table-container равной 80% от меньшего размера видимого окна (высота или ширина, в зависимости от того, что меньше).
height: 80vmin;: Устанавливает высоту элемента #table-container равной 80% от меньшего размера видимого окна.
@keyframes touchAnimation { ... }: Определяет анимацию с названием touchAnimation. Анимация изменяет цвет фона от жёлтого (#ffcc00) к белому (#fff) на протяжении времени анимации.
animation: touchAnimation 0.5s ease-out;: Применяет анимацию touchAnimation к ячейкам таблицы с классом touch. Анимация длится 0.5 секунды и имеет эффект замедления (ease-out).
Верстка HTML 5, что приведена выше, уже обсуждалась, когда мы писали змейку, а вот код ниже будет новым:
<table id="touch-table">
<tbody>
<!-- Таблица будет создана динамически -->
</tbody>
</table>
<script>
<table id="touch-table">
table – это HTML элемент, который используется для создания таблицы на веб-странице.
id="touch-table" – это атрибут id, который задаёт уникальный идентификатор таблице. Этот идентификатор позволяет ссылаться на таблицу в JavaScript или CSS. В данном случае, идентификатор таблицы – touch-table.
<tbody>
tbody – это элемент, который используется для группировки тела таблицы. Он содержит строки таблицы (tr) и ячейки таблицы (td). Этот элемент помогает разделить структуру таблицы на логические части: заголовок (thead), тело (tbody) и подвал (tfoot).
В этом примере, tbody используется, чтобы динамически добавлять строки и ячейки таблицы через JavaScript. С помощью JavaScript вы можете легко вставлять или изменять содержимое внутри этого элемента.
<!-- Таблица будет создана динамически -->
Это комментарий в HTML, который не отображается на веб-странице. Комментарии используются для пояснения кода и могут быть полезны для разработчиков. В этом комментарии указано, что таблица будет создана динамически, то есть с помощью JavaScript, а не зафиксирована в HTML-коде.
</table>
Закрывающий тег </table> завершает элемент table. Все содержимое, относящееся к таблице, должно находиться между открывающим <table> и закрывающим </table> тегами.
<script> и </script>
Эти теги используются для включения JavaScript-кода на веб-странице. Всё, что находится между этими тегами, интерпретируется как JavaScript-код.
Далее пойдет JavaScript часть, собственно, основная часть нашего примера:
Этот код создаёт таблицу 5×5, где каждая ячейка будет иметь координаты в формате A1, B1, и т.д., до E5. Таблица создаётся динамически при загрузке страницы:
document.addEventListener – метод, который позволяет добавлять обработчики событий для документа. В данном случае, он слушает событие DOMContentLoaded.
'DOMContentLoaded' – это событие, которое происходит, когда весь HTML документ был полностью загружен и разобран, но перед загрузкой стилей и изображений. Это идеальный момент для выполнения JavaScript кода, который должен взаимодействовать с DOM (Document Object Model).
function() { ... } – анонимная функция, которая будет выполнена, когда событие DOMContentLoaded сработает.
document.getElementById('touch-table') – метод, который ищет HTML элемент с указанным id. В данном случае, это элемент <table> с id="touch-table".
const table – создаёт переменную table, в которую сохраняется найденный элемент таблицы. const означает, что значение переменной не будет изменяться.
const letters = ['A', 'B', 'C', 'D', 'E'];
const letters – создаёт массив, который хранит буквы от ‘A’ до ‘E’. Эти буквы будут использоваться в качестве координат для столбцов таблицы.
for (let i = 0; i < 5; i++) { ... }
Цикл for – конструкция для многократного выполнения блока кода. В этом цикле i изменяется от 0 до 4 (всего 5 итераций). Он используется для создания строк таблицы.
const row = table.insertRow();
table.insertRow() – метод, который добавляет новую строку в таблицу. Эта строка будет вставлена в конец таблицы. const row – переменная для хранения созданной строки.
for (let j = 0; j < 5; j++) { ... }
Вложенный цикл for – используется для создания ячеек внутри строки. j изменяется от 0 до 4 (всего 5 итераций). Он используется для создания ячеек в строке.
const cell = row.insertCell();
row.insertCell() – метод, который добавляет новую ячейку в строку. Эта ячейка будет вставлена в конец строки. const cell – переменная для хранения созданной ячейки.
cell.dataset.row = i;
cell.dataset.row – это способ добавить пользовательский атрибут к элементу. В данном случае, атрибут data-row будет иметь значение i, которое соответствует номеру строки.
cell.dataset.col = j;
cell.dataset.col – аналогично предыдущему, это пользовательский атрибут data-col, который получает значение j, соответствующее номеру столбца.
const span = document.createElement('span');
document.createElement('span') – метод, который создаёт новый HTML элемент span. Этот элемент будет использоваться для отображения текста внутри ячейки.
span.textContent = ${letters[j]}${i + 1};
span.textContent – свойство, которое задаёт текстовое содержимое элемента span. В данном случае, текст будет формироваться как комбинация буквы из массива letters и номера строки (i + 1).
cell.appendChild(span);
cell.appendChild(span) – метод, который добавляет элемент span в ячейку. Это делает так, что текстовый элемент будет отображаться внутри ячейки таблицы.
});
Закрывающая скобка для анонимной функции и метода addEventListener.
// Проверка на сенсорный экран
function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}
Этот код позволяет определить, поддерживает ли устройство сенсорный экран. Если одно из условий истинно, функция возвращает true, иначе false:
function isTouchDevice() { ... }
function – ключевое слово для создания функции в JavaScript. Функция isTouchDevice будет выполнять проверку и возвращать результат.
isTouchDevice – имя функции. Вы можете вызывать эту функцию в других частях кода для проверки, поддерживается ли сенсорный экран на устройстве.
return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
return – ключевое слово, которое указывает, что функция должна вернуть результат. Этот результат будет отправлен обратно в место, где функция была вызвана.
'ontouchstart' in window – это выражение проверяет, существует ли свойство ontouchstart в объекте window. Если оно существует, это значит, что устройство поддерживает сенсорные события. ontouchstart – это событие, которое срабатывает, когда пользователь касается экрана.
navigator.maxTouchPoints > 0 – проверяет, сколько максимальных точек касания поддерживает устройство. Если значение больше 0, это также указывает на наличие сенсорного экрана. navigator.maxTouchPoints возвращает число, которое показывает, сколько одновременных касаний поддерживает устройство.
||
Логический оператор “ИЛИ”. Он используется для проверки нескольких условий. Если одно из условий истинно, результат выражения будет true. В этом случае, если либо 'ontouchstart' существует в window, либо navigator.maxTouchPoints больше 0, функция вернёт true.
if (isTouchDevice()) {
table.addEventListener('touchstart', function(event) {
if (event.target.tagName === 'TD') {
const cell = event.target;
cell.classList.add('touch');
cell.classList.add('show-span');
setTimeout(() => {
cell.classList.remove('touch');
cell.classList.remove('show-span');
}, 500); // Удалить класс после анимации
}
});
} else {
alert('Этот скрипт работает только на мобильных устройствах.');
}
if (isTouchDevice()) { ... }
Это условный оператор if. Он проверяет результат функции isTouchDevice(). Если функция возвращает true (то есть устройство поддерживает сенсорный экран), тогда выполняется код внутри фигурных скобок { ... }.
table.addEventListener – метод, который добавляет обработчик событий к элементу. В данном случае, к таблице (table).
'touchstart' – это тип события, которое мы хотим отслеживать. Оно срабатывает, когда пользователь касается экрана.
function(event) { ... } – это функция-обработчик события. Она выполняется каждый раз, когда срабатывает событие touchstart. Параметр event содержит информацию о событии, которое произошло.
if (event.target.tagName === 'TD') { ... }
Внутри функции-обработчика проверяем, на какой элемент был совершен касание. event.target – это элемент, на который было нацелено событие. tagName возвращает тип элемента (например, 'TD' для ячейки таблицы).
Если элемент является ячейкой таблицы (TD), выполняется код внутри фигурных скобок { ... }.
const cell = event.target;
Создаем переменную cell, которая хранит ссылку на элемент, на который пользователь коснулся. Это делает код более читабельным.
cell.classList.add('touch');
Метод classList.add добавляет класс touch к элементу. Класс touch используется для применения CSS-анимации.
cell.classList.add('show-span');
Аналогично, добавляем класс show-span, чтобы показать текст внутри ячейки (если это предусмотрено стилями).
setTimeout(() => { ... }, 500);
setTimeout – метод, который позволяет запланировать выполнение функции через заданный промежуток времени (в данном случае, 500 миллисекунд или 0.5 секунды).
cell.classList.remove('touch');
Внутри функции, которая выполнится через 500 миллисекунд, удаляем класс touch из ячейки, чтобы прекратить анимацию.
cell.classList.remove('show-span');
Также удаляем класс show-span, чтобы скрыть текст после завершения анимации.
} else { alert('Этот скрипт работает только на мобильных устройствах.'); }
Если функция isTouchDevice() возвращает false (то есть устройство не поддерживает сенсорный экран), выполняется код внутри else. В данном случае, показывается сообщение (alert) с текстом, что скрипт работает только на сенсорных устройствах.
</script>
</body>
</html>
И, наконец, полная версия нашего HTML 5 + JS кода, который реагирует на сенсорный экран, сохраните его в формате “имя_файла.html”. Напомним, что на ПК он работать не будет:
Я, Ирина Петрова-Левин, выпускница Московского Технического Университета Связи и Информатики, где получила образование в области информационных технологий. Мой профессиональный путь связан с JavaScript, PHP и Python, а также с глубоким интересом к тому, как современные технологии влияют на повседневную жизнь. Я стараюсь объяснять сложные процессы так, чтобы они становились понятными каждому, без потери точности и сути.
С 2019 года живу в Далласе, что позволяет мне сочетать опыт российской инженерной школы с американским технологическим подходом. В своих материалах я стремлюсь показывать реальные механизмы работы технологий и предметов вокруг нас, делая информацию одновременно доступной, практичной и структурированной.
