• О нас
  • Анонсировать
  • Политика конфиденциальности
  • Связаться с нами
Новости MasterTrend
  • Дом
    • БЛОГ
    • ТЕХНИЧЕСКОЕ ОБСЛУЖИВАНИЕ
    • МАГАЗИН
  • Учебники
  • Hardware
  • игры
  • мобильные телефоны
  • Безопасность
  • Windows
  • ИИ
  • Software
  • Сети
  • Новости
Нет результата
Посмотреть все результаты
  • Дом
    • БЛОГ
    • ТЕХНИЧЕСКОЕ ОБСЛУЖИВАНИЕ
    • МАГАЗИН
  • Учебники
  • Hardware
  • игры
  • мобильные телефоны
  • Безопасность
  • Windows
  • ИИ
  • Software
  • Сети
  • Новости
Нет результата
Посмотреть все результаты
Новости MasterTrend
Нет результата
Посмотреть все результаты
Начало работы Учебники

Создайте свое первое веб-приложение и освойте программирование без стресса 🚀💻

MasterTrend Insights к MasterTrend Insights
13 мая 2025 г.
в Учебники
Время чтения:Лекция 10 минут
К К
0
Создайте свои первые заметки + счетчик для веб-приложения легко и быстро
1
ОБЩИЙ
4
Просмотры
Поделиться на FacebookПоделиться в Твиттере

Contents

  1. Создайте свое первое веб-приложение: заметки + счетчик легко и быстро 📝⚡
  2. Что вы собираетесь построить
  3. Как вы собираетесь это построить?
  4. Структура приложения
  5. Как создать блокнот для записей
    1. Создание структуры с помощью HTML
    2. Сделайте их красивыми с помощью CSS
    3. Добавление функциональности с помощью JavaScript
    4. Похожие публикации

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

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

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

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

Приложение сохранит данные, поэтому оно запомнит текст при перезагрузке или повторном открытии страницы. Это значит, что у вас будет удобный способ сохранить любой текст, на который вы захотите сослаться позже, например адреса, 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(' ') разбивает строку по пробелам, возвращая результат в виде массива строк. Как и строки, массивы имеют свойство длины, которое дает нам количество элементов в массиве.

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

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

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

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

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

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

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

Поделитесь этим:
49FacebookLinkedInPinterestXRedditTumblrБлюскиThreadsShare
49
АКЦИИ

Похожие публикации

  • Как исправить ошибку «Что-то пошло не так в Твиттере»
  • Как скачать встроенное видео бесплатно в 2024 году
  • Лучшие инструменты диагностики для Windows 10/11
  • AMD Radeon RX 7000 5 и 6 нанометров
  • Скины Intel Alder Lake P и U
  • Скорость с твердотельным накопителем SSD — ПК и ноутбук
  • Boston Dynamics Atlas в действии
  • Объяснение структуры каталогов Linux
Теги: EvergreenСодержаниеТехнические советы
Предыдущий пост

Как показать или скрыть библиотеки в Windows 11: пошаговое руководство 🚀🔒

Следующая публикация

Стратегические игры в реальном времени: почему крупные студии отказываются от них? 🎮🔥

MasterTrend Insights

MasterTrend Insights

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

Следующая публикация
Стратегические игры в реальном времени: 5 инди-игр, в которых стратегия остается актуальной

Стратегические игры в реальном времени: почему крупные студии отказываются от них? 🎮🔥

5 2 голоса
Article Rating
Подписаться
Доступ
Уведомить о
гость

гость

0 Comments
Самый старый
Самый новый Наибольшее количество голосов
онлайн-комментарии
Посмотреть все комментарии

Оставайтесь на связи

  • 976 Фанаты
  • 118 Последователи
  • 1.4к Последователи
  • 1.8k Подписчики

  • Тенденции
  • Комментарии
  • Последний
Как добавить часы на рабочий стол Windows 11: 3 верных совета!

Как добавить часы на рабочий стол Windows 11: успевайте больше за считанные минуты! ⏱️

1 мая 2025 г.
12 лучших альтернатив Lucky Patcher для Android

Альтернативы Lucky Patcher: 12 лучших и простых приложений! 🎮⚡

12 мая 2025 г.
Как использовать AdGuard DNS на Android в 2024 году

Как использовать AdGuard DNS на Android в 2025 году

11 февраля 2025 г.
Как хранить предметы в Oblivion Remastered: 5 трюков, которые вам нужно знать! 🗝️💼

Как хранить предметы в Oblivion Remastered, не теряя добычу 💎⚡

1 мая 2025 г.
Функции Gmail на Android: экономьте время с помощью 5 советов

Функции Gmail на Android: 5 трюков, о которых вы не знали! 📱✨

12
Ремонт материнской платы - Ремонт материнских плат

Ремонт материнской платы ноутбука

10
Установка Windows 11 Домашняя без Интернета

Установка Windows 11 Домашняя без Интернета

10
Как создать резервную копию драйверов в Windows 11/10 за 4 шага!

Как сделать резервную копию драйверов в Windows 11/10: избегайте ошибок! 🚨💾

10
Случайные имена пользователей Защитите свой аккаунт сегодня

Случайные имена пользователей: ключ к предотвращению массовых взломов 🛡️🚫

25 июня 2025 г.
Разблокируйте Ясукэ. Откройте для себя секретный Кофун, который изменит вашу игру!

Разблокируйте Ясукэ: откройте секретный Кофун, который сделает вас доминировать! 🥷💥

25 июня 2025 г.
Ускорьте свой ноутбук 🚀 с помощью 5 бесплатных приложений, которые стоит попробовать прямо сейчас

Ускорьте свой ноутбук ⚡️ и улучшите его производительность за 5 простых шагов

24 июня 2025 г.
Клавиши BIOS/UEFI: 10 лучших клавиш для быстрого доступа

Ключи BIOS/UEFI: узнайте, как войти легко и без ошибок ⚡🔑

24 июня 2025 г.

Последние новости

Случайные имена пользователей Защитите свой аккаунт сегодня

Случайные имена пользователей: ключ к предотвращению массовых взломов 🛡️🚫

25 июня 2025 г.
6
Разблокируйте Ясукэ. Откройте для себя секретный Кофун, который изменит вашу игру!

Разблокируйте Ясукэ: откройте секретный Кофун, который сделает вас доминировать! 🥷💥

25 июня 2025 г.
4
Ускорьте свой ноутбук 🚀 с помощью 5 бесплатных приложений, которые стоит попробовать прямо сейчас

Ускорьте свой ноутбук ⚡️ и улучшите его производительность за 5 простых шагов

24 июня 2025 г.
6
Клавиши BIOS/UEFI: 10 лучших клавиш для быстрого доступа

Ключи BIOS/UEFI: узнайте, как войти легко и без ошибок ⚡🔑

24 июня 2025 г.
5
Логотип MasterTrend News

MasterTrend Info — ваш источник технологий: новости, руководства и аналитика по оборудованию, программному обеспечению, играм, мобильным устройствам и искусственному интеллекту. Подпишитесь на нашу рассылку и не пропустите ни одной тенденции.

Подписывайтесь на нас

Просмотр по категории

  • игры
  • Hardware
  • ИИ
  • мобильные телефоны
  • Новости
  • Сети
  • Безопасность
  • Software
  • Учебники
  • Windows

Последние новости

Случайные имена пользователей Защитите свой аккаунт сегодня

Случайные имена пользователей: ключ к предотвращению массовых взломов 🛡️🚫

25 июня 2025 г.
Разблокируйте Ясукэ. Откройте для себя секретный Кофун, который изменит вашу игру!

Разблокируйте Ясукэ: откройте секретный Кофун, который сделает вас доминировать! 🥷💥

25 июня 2025 г.
  • О нас
  • Анонсировать
  • Политика конфиденциальности
  • Связаться с нами

Copyright © 2025 https://mastertrend.info/ - Все права защищены. Все товарные знаки являются собственностью их владельцев.

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
Нет результата
Посмотреть все результаты
  • игры
  • Hardware
  • ИИ
  • мобильные телефоны
  • Новости
  • Сети
  • Безопасность
  • Software
  • Учебники
  • Windows

Copyright © 2025 https://mastertrend.info/ - Все права защищены. Все товарные знаки являются собственностью их владельцев.

Comment Author Info
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_sad::wpds_exclamation::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_envy::wpds_shutmouth:
wpDiscuz
RedditБлюскиXМастодонтНовости хакеров
Поделитесь этим:
МастодонтВКWhatsAppТелеграммаSMSНовости хакеровЛинияПосланник
Ваш экземпляр Мастодонта