Создайте свое первое веб-приложение: заметки + счетчик легко и быстро 📝⚡

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

Что вы собираетесь построить

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

Приложение сохранит данные, поэтому оно запомнит текст при перезагрузке или повторном открытии страницы. Это значит, что у вас будет удобный способ сохранить любой текст, на который вы захотите сослаться позже, например адреса, URL-адреса и т. д. 📄🔗

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

Он также подсчитывает символы и слова, что является хорошим введением в обработку строк (текста). Конечно, приложение очень простое: в этом и суть! Но с помощью этого руководства вы изучите основы разработки веб-приложений, и тогда весь мир будет у ваших ног. 🦪💻

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

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

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

Он вебсайт.dev (написано членами команды Chrome) и MDN, Сеть разработчиков Mozilla, являются двумя прекрасными источниками информации об основных веб-технологиях.

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

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

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

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

Важно отметить, что это приложение сохраняет ваш текст, не записывая его в определенный файл на диске, поскольку JavaScript не может получить доступ к файловой системе. Использует API веб-хранилища — мощную альтернативу файлам cookie. 🍪💾

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

Создайте следующие три файла в одном каталоге, а затем откройте index.html в веб-браузере. Кроме того, вы можете загрузить файлы с сайта этот репозиторий GitHub. 📥

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

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

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

html>
<html>
<голова>
    ...
голова>

<тело>
…
тело>
html>

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

    <заголовок>Текстзаголовок>
    <связь отн.="таблица стилей" href="стили.css" />

Тело более сложное, но в нем есть всего несколько важных частей:

    <див идентификатор="прилавок">
        слова: <охватывать идентификатор="слова">0охватывать>
        / символы: <охватывать идентификатор="символы">0охватывать>
    див>

<текстовая область идентификатор="текст" автофокус=«1»>текстовая область>

<сценарий источник=«скрипт.js»>сценарий>

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

Обратите внимание на атрибуты id, которые имеют решающее значение для операции. Значение идентификатора должно быть уникальным, чтобы приложение могло использовать его для идентификации конкретного элемента. Это может помочь нам стилизовать эти элементы, а также нацелиться на них при добавлении функциональности.

Текстовая область — это встроенный элемент формы, позволяющий вводить простой текст в браузер. Благодаря атрибуту автофокусировки вы будете готовы писать сразу после загрузки страницы. Наконец, страница ссылается на файл JavaScript, script.js.

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

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

Сделайте их красивыми с помощью CSS

CSS позволяет вам стилизовать части вашей веб-страницы, выбирая эти части и указывая значения для таких свойств, как размер шрифта и цвет фона. Этому примеру приложения не нужен особо изысканный дизайн, поскольку его интерфейс и так прост. Однако мы можем сгладить острые углы, добавив немного стиля. 🎨✨

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

тело {
    допуск: 0;
    прокладка: 0;
    отображать: сетка;
    мин-высота: 100вх;
    сетки-шаблоны-строки: мин-контент 1фр;
}

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

Счетчик имеет базовый стиль, который отличает его от остального текста, в основном за счет фона:

#счетчик {
    семейство шрифтов: без засечек;
    фоновый цвет: 1ТП5Тф7ф7ф7;
    выравнивание текста: центр;
    ширина: 100%;
    прокладка: 0.5эм 0;
}

Наконец, текстовая область оформлена так, чтобы отображать разборчивый текст и оставлять достаточно места для текста. Линия, отделяющая счетчики от текста, на самом деле является верхней границей этой текстовой области.

текстовая область {
    ширина: 100%;
    высота: 100%;
    размер шрифта: 16пт;
    прокладка: 1в;
    размер коробки: рамка-коробка;
    контур: 0;
    граница: никто;
    верхняя граница: 1пикс. твердый #999;
}

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

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

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

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

Сохраните введенный текст и перезагрузите его при необходимости.
Обновляйте количество символов и слов, чтобы предоставлять статистику в режиме реального времени. 📊

Оба требования подразумевают обновление элементов документа. Итак, скрипт начинается с получения ссылок на эти узлы с помощью метода getElementById:

константа слова = документ.getElementById("слова");
константа символы = документ.getElementById("символы");
константа текстовая область = документ.getElementById("текст");

Обратите внимание, что слова, символы и текст — это идентификаторы соответствующих им элементов в документе, назначенные в HTML-файле с помощью атрибута id.

Далее нам нужно, чтобы приложение реагировало на изменение текста:

textarea.addEventListener("вход", функция(ев) { localStorage.setItem("текст", ev.целевое.значение); update_counts(ev.target.value); });

Прослушиватель событий — это функция, которую JavaScript автоматически выполняет при возникновении определенного события. В этом случае мы присоединяем прослушиватель к узлу textarea, который выполняется при возникновении события «input». То есть, когда кто-то взаимодействует с текстовой областью.

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

Метод setItem принимает два параметра: имя ключа для связи с данными и фактические данные для хранения.

Далее мы вызываем update_counts(), передавая тот же текст. Мы объясним эту функцию чуть позже.

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

окно.addEventListener("нагрузка", функция(ев) {
    вар текст = localStorage.getItem("текст"); текстовая область.значение = текст; update_counts(текст); });

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

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

функция update_counts(текст) { chars.innerHTML = text.length; слова.innerHTML = текст.разделить(' ').длина; }

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

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

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

Он не будет правильно подсчитывать отдельное слово в строке, поскольку вокруг него нет пробелов.
При полном отсутствии текста будет выведено одно слово из-за принципа работы функции split.

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

    слова.innerHTML = текст.разделить(/\с/).фильтр(функция(н) { возвращаться н != ''; }).длина;

Если вы не совсем понимаете эту строку, посетите страницы MDN для расколоть и фильтр.

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

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