Создайте свое первое веб-приложение: руководство для начинающих по созданию простого приложения для заметок и счетчика слов

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

Что вы построите

В этом уроке вы создадите простое веб-приложение, предназначенное для хранения текстовых заметок с подсчетом символов и слов в этих заметках.

Это приложение постоянно сохраняет данные, позволяя ему извлекать текст даже после обновления страницы или повторного открытия. Это практичное решение для поддержания быстрого доступа к важному тексту, будь то адреса, URL или что-либо еще.

Пример простого текстового веб-приложения, показывающего заметки, включая запись календаря и список URL-адресов.

Кроме того, приложение отслеживает количество символов и слов, предоставляя превосходное введение в манипуляции строками. Хотя приложение имеет базовый дизайн, это руководство дает вам фундаментальные навыки разработки веб-приложений, открывая огромные возможности в кодировании.

Как вы это построите

Хотя веб-приложения могут значительно различаться, они обычно интегрируют три основные технологии: HTML, CSS и JavaScript. Каждый из этих компонентов выполняет важную функцию в веб-разработке:

HTML: Это структура вашего веб-приложения, определяющая, как организован контент. HTML определяет, является ли текст абзацем, заголовком или элементом списка.
CSS: каскадные таблицы стилей добавляют стиль к вашему контенту, позволяя вам менять цвета, шрифты и макет. Вы можете использовать CSS, чтобы сделать элементы жирными, настроить границы и расположить элементы на экране.
JavaScript: Этот язык программирования является неотъемлемой частью внедрения функциональности в ваше веб-приложение. JavaScript может создавать интерактивные возможности, например, показывать/скрывать элементы или создавать сложные приложения, например игры.

Домашняя страница сайта web.dev с учебными ресурсами по HTML, CSS и JavaScript.

Структура приложения

Приложение, которое вы собираетесь создать, состоит из трех простых файлов: index.html, styles.css, и script.js.

Для запуска этого приложения не требуется дополнительных требований — достаточно веб-браузера. Поскольку это фронтенд-приложение, нет необходимости в бэкенд-языках сценариев, таких как PHP или локальные серверы. После завершения просто откройте index.htmlв браузере, чтобы увидеть свое приложение в действии.

Это приложение использует API веб-хранилища для сохранения текста, что позволяет сохранять информацию без необходимости записи в файлы на диске, поскольку JavaScript не имеет доступа к файловой системе.

Как создать блокнот для записей

Начните с создания трех необходимых файлов в одном каталоге. В качестве альтернативы вы можете загрузить файлы из этого репозитория GitHub .

Создание структуры с помощью HTML

Файл index.htmlописывает структуру контента вашего приложения. Он включает ссылки на файлы CSS и JavaScript, позволяя браузеру объединить их в единый опыт.

Как и любой HTML-документ, основная структура состоит из заголовка с метаданными и тела, содержащего содержимое:

<!DOCTYPE html> <html> <head> ...</head> <body> ...</body> </html>

Раздел заголовка содержит краткие метаданные, включая заголовок страницы (отображается в строке заголовка браузера) и ссылку на styles.cssфайл:

<title>Text</title> <link rel="stylesheet"href="styles.css"/>

Корпус более детализирован и включает ключевые компоненты:

<div id="counter"> words: <span id="words">0</span> / characters: <span id="chars">0</span> </div> <textarea id="text"autofocus="1"></textarea> <script src="script.js"></script>

Элемент div, обозначенный как «счетчик», содержит количество слов и символов. Он остается наверху и динамически обновляется по мере изменения текста.

Крайне важно обратить внимание на использование idатрибутов — их уникальные значения помогают стилизовать эти элементы и нацеливать их на функциональность.

Предоставляет textareaобласть для ввода текста пользователями с autofocusатрибутом, гарантирующим готовность к вводу при загрузке страницы. Наконец, HTML ссылается на script.jsфайл.

На этом этапе откройте index.htmlв браузере. Он пока не будет работать и может выглядеть не совсем правильно, но проверка прогресса на каждом этапе полезна.

Вид веб-приложения для создания заметок со стилями браузера по умолчанию, где все собрано в верхнем левом углу.

Как сделать так, чтобы вещи выглядели хорошо с помощью CSS

Хотя это базовое приложение не требует значительных изменений в дизайне, мы можем улучшить его макет с помощью некоторых стилей.

Сначала мы определяем стиль кузова, чтобы очертить общий вид:

body { margin: 0; padding: 0; display: grid; min-height: 100vh; grid-template-rows: min-content 1fr; }

Этот CSS использует макет сетки для размещения количества слов и символов в узкой строке над текстовой областью. grid-template-rowsСвойство определяет, что строка количества должна занимать наименьшее возможное пространство (min-content), в то время как текстовая область заполняет оставшееся пространство (1fr).

Строка счетчика получает базовое оформление, чтобы отличить ее от текстовой области, в первую очередь, с помощью фона:

#counter { font-family: sans-serif; background-color: #f7f7f7; text-align: center; width: 100%; padding: 0 0.5em 0; }

Текстовая область оформлена так, чтобы текст был удобочитаемым, с достаточным количеством свободного пространства:

textarea { width: 100%; height: 100%; font-size: 16pt; padding: 1em; box-sizing: border-box; outline: 0; border: none; border-top: 1px solid #999; }

Приложение для создания заметок с настраиваемыми стилями отображает счетчик вверху и полноразмерную текстовую область внизу.

Добавление функциональности с помощью JavaScript

Заложив основу, пришло время добавить в ваше приложение функциональность — код, который вдохнет в него жизнь!

Прежде чем погрузиться в кодирование, важно очертить предполагаемую функциональность. Для этого приложения вы сосредоточитесь на двух основных целях:

Сохраните и перезагрузите введенный текст.
Динамическое обновление количества символов и слов.

Эти функции требуют обновления определенных элементов документа. Поэтому начните с получения ссылок на эти узлы с помощью getElementByIdметода:

const words = document.getElementById("words"); const chars = document.getElementById("chars"); const textarea = document.getElementById("text");

Здесь , words, charsи textareaсоответствуют соответствующим разделам в документе, идентифицируемым их атрибутами ID.

Далее добавьте интерактивности, настроив приложение на реакцию при изменении текста:

textarea.addEventListener("input", function(ev) { localStorage.setItem("text", ev.target.value); update_counts(ev.target.value); });

Метод addEventListenerпривязывает функцию к запуску при возникновении указанного события. В этом случае, как только пользователь взаимодействует с текстовой областью, событие «input» запускает функцию.

Далее API веб-хранилища используется для сохранения текущего содержимого текстовой области, доступ к которому осуществляется через ev.target.value. setItemМетод связывает ключ с данными, которые необходимо сохранить.

Чтобы гарантировать загрузку текста при инициализации или обновлении приложения, добавьте еще один прослушиватель:

window.addEventListener("load", function(ev) { var text = localStorage.getItem("text"); textarea.value = text; update_counts(text); });

Этот слушатель реагирует на событие загрузки окна. При загрузке окна он извлекает сохраненный текст и устанавливает значение текстовой области соответствующим образом, вызывая update_counts()обновление количества слов и символов.

Остальная функциональность заключена в update_counts()функции, которая выглядит следующим образом:

function update_counts(text) { chars.innerHTML = text.length; words.innerHTML = text.split(' ').length; }

В отличие от текстовой области, простой текст не имеет атрибута значения; поэтому innerHTMLвместо него используется свойство. lengthСвойство строки извлекает общее количество символов.

Чтобы разбить текст на слова, мы используем text.split(' '), который делит строку на каждом символе пробела, создавая массив слов. Свойство length результирующего массива предоставляет количество слов.

Однако при использовании этого кода вы можете столкнуться с несколькими проблемами:

Он не будет правильно подсчитывать отдельные слова в строке без окружающих их пробелов.
Если текст отсутствует, то из-за особенностей splitработы будет неточно передано одно слово.

Чтобы решить первую проблему, рассмотрите возможность разделения регулярного выражения для учета пробельных символов: \s. Чтобы решить вторую проблему, отфильтруйте все пустые строки:

words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;

Веб-приложение с примером текста, показывающим точное количество символов и слов.

Создание полезных веб-приложений может быть достигнуто всего лишь с несколькими базовыми файлами! Вы можете расширить это простое приложение для создания заметок, интегрировав дополнительные функции, такие как использование свойства window.location для доступа к URL-адресам или разрешение сохранять несколько заметок, изменяя имена, передаваемые в localStorage.setItem.

Дополнительные идеи

1. Каковы предварительные условия для этого руководства по веб-приложению?

Все, что вам нужно, это базовые знания HTML, CSS и JavaScript. Такие инструменты, как текстовый редактор (например, VSCode) и веб-браузер также будут полезны.

2. Могу ли я изменить это веб-приложение, чтобы добавить больше функций?

Конечно! Этот урок дает основу. Вы можете добавить такие функции, как сохранение нескольких заметок, категоризация заметок или даже реализация функции поиска!

3. Как работает API веб-хранилища?

API веб-хранилища позволяет веб-приложениям хранить данные в браузере. Он сохраняет данные в парах ключ-значение, которые сохраняются даже после закрытия браузера, что позволяет легко извлечь их позже.

Источник и изображения