Уже изучили основы javascript, но не знали, какой продукт можно сделать, используя только собственный javascript? Что ж, вы пришли в нужное место :)
Я создал статическое приложение кассира, используя только HTML, CSS и Javascript. Я думаю, что это приложение будет для вас лучшей практикой, потому что практика работы с собственным javascript напрямую, без включения какой-либо среды, отточит основы javascript, которые вы изучили… так что вы будете более уверенно изучать следующий уровень javascript, например, структуру для создания более сложный и профессиональный веб/приложение.
Описание приложения:
Это приложение использует базовый HTML и CSS в качестве интерфейса и имеет функцию CRUD (создание-чтение-обновление-удаление) и функцию оплаты кассира, обе созданы только с помощью собственного javascript.
Метод обучения:
Вы можете получить доступ к исходному коду прямо из моего Github: https://github.com/fatihlhz/native-js-cashier-app
Вы можете скопировать и вставить файлы HTML, CSS и Javascript в свою собственную IDE. Проанализируйте его, а затем попытайтесь сделать дубликат приложения в своем собственном стиле. Я разберу функцию в файле script.js, чтобы вам было легче ее понять. Но я не собираюсь разбирать HTML и CSS, чтобы сэкономить ваше время. Вы можете анализировать, дублировать и манипулировать им лично.
Разбивка функции CRUD
Это приложение имеет функцию CRUD для создания, чтения, обновления и удаления данных. Мы сохраняем его в массиве и манипулируем им с помощью функции.
- Форма «Создать» в HTML имеет два входных текста с именами «элемент» и «цена», а также кнопку отправки для вызова функции «Создать».
- Функция чтения будет считывать все данные в базе данных, а также манипулировать таблицей в HTML для отображения данных.
- Функция обновления будет запущена при нажатии кнопки редактирования, она использует подсказку (), чтобы открыть окно подсказки в браузере, чтобы получить новые данные от пользователя, а затем обновить их в базе данных.
- Функция Удалить будет запущена при нажатии кнопки удаления, она использует метод .pop() для удаления данных по указанному индексу в базе данных.
База данных:
Для функции CRUD я использую два массива, которые действуют как база данных для хранения данных. Первый называется itemData для хранения имени товара, а второй называется priceData для хранения цены товара.
Функция чтения:
Сначала создайте функцию чтения с именем showTable() для чтения данных из массивов itemData и priceData и отображения их в таблице HTML. Мы делаем это первым, потому что нам нужно будет читать и отображать данные во всех видах действий, всякий раз, когда мы создали, обновили или удалили данные. Далее вы увидите, что в этом случае эта функция будет вызываться в каждой функции CRUD.
Переменная table используется для доступа к элементу ‹table› из HTML с идентификатором table, а затем вызывает его с помощью .innerHTML для управления таблицей.
- Сначала мы вызываем table.innerHTML, чтобы добавить заголовок таблицы с атрибутами No, Item, Price, Count и Action.
- Затем мы снова вызываем его в области цикла for, чтобы отобразить данные об элементе, данные о цене, текстовый ввод для количества элементов и кнопку действия в каждой строке таблицы.
- Наконец, вызовите showTable() вне области действия, чтобы функция вызывалась при каждом запуске программы.
Создать функцию:
Затем создайте функцию Create с именем Add(), чтобы добавить новые данные в базу данных. Эта функция получит ввод из текстовых полей Введите элемент и Введите цену и сработает при нажатии кнопки Добавить элемент.
В этом случае функция получит данные из ‹ввода› текста (текстового поля) из HTML с именем item и price, идобавить его в массивы itemData и priceData. Затем вызовите showTable(), чтобы повторно прочитать все обновленные данные. И, наконец, очистите текстовое поле ввода и цены.
Мы также ограничиваем его в операторе if-else, чтобы определить, заполняет ли пользователь как входной элемент, так и входную цену. если он все еще пуст, а пользователь просто отправляет данные, появится предупреждение, чтобы напомнить пользователю заполнить оба поля.
Функция обновления:
Затем сделайте функцию «Обновить», чтобы отредактировать название или цену товара. Эта функция активируется кнопкой Редактировать товар и кнопкой редактирования Редактировать цену. Появится подсказка, чтобы попросить пользователя ввести новые данные. Мы делаем это отдельно, потому что окно подсказки может получить только одну строку ввода от пользователя, поэтому мы разделяем его на две функции (editItem и editPrice) с двумя кнопками. чтобы вызвать его.
Эта функция принимает один параметр с именем id, чтобы указать индекс данных, которые необходимо обновить. Мы объявляем переменную с именем editItem/Price, в которой хранятся данные, введенные функцией приглашения. Первым параметром prompt() будет сообщение, отображаемое во всплывающем окне, а вторым параметром будут данные, которые необходимо отредактировать. Мы также ограничиваем результат в операторе if-else, чтобы проверить, нажимает ли пользователь кнопку отмена при редактировании данных, потому что кнопка отмена во всплывающем окне подсказки вернется значение null, из-за которого данные будут обновлены как null. И, наконец, вызовите showTable(), чтобы отобразить обновленные данные в таблице.
Удалить функцию:
Наконец, создайте функцию Delete с именем remove() для удаления данных по определенному индексу в базе данных массива. Эта функция активируется кнопкой Удалить.
Эта функция принимает один параметр с именем id, чтобы указать индекс данных, которые нужно удалить. Затем примените метод pop() к itemData и priceData с id в качестве параметра. Наконец, вызовите showTable(), чтобы отобразить обновленные данные.
