Создание приложения для диспетчера задач - это то, что в первую очередь должен сделать каждый начинающий программист. Раньше, когда я начал изучать программирование на PHP, традиционный echo “hello world”; был первым кодом, который меня заставляли писать.
Однако сегодня все изменилось. «Todo» превратилось в «Hello World!» сегодня.
В этом руководстве вы узнаете, как создать приложение todoApp на JavaScript с помощью localStorage.
Приготовься!
Подготовьте текстовый редактор. Я буду использовать скобки.
Вы знакомы с Git? Тебе стоит, я буду использовать его экономно.
Мы начнем с настройки нашего каталога и загрузки начальной загрузки (и, если вам нравится live-сервер). Примечание. Я не собираюсь использовать какой-либо фреймворк - только чистый JavaScript.
Создайте папку на рабочем столе:
Вы можете использовать любой метод, какой захотите, но в этом руководстве мы будем использовать команды git bash
Откройте git bash на рабочем столе и введите $ mkdir jstodo
Затем нажмите Enter. Теперь у вас на рабочем столе есть папка jstodo.
Затем создайте свой HTML-файл. введите $ touch index.html постарайтесь не добавлять знак доллара ($), он уже должен быть в вашей командной строке git bash.
Затем введите $ touch main.js.
Мы будем использовать Bootstrap для нашей разметки. Итак, загрузите Bootstrap - запустите эту команду $ npm install bootstrap@3 в той же папке, где у вас есть другие файлы.
Теперь ваша папка jstodo должна выглядеть так.
Это файлы, которые вам понадобятся для создания приложения todoApp. Теперь откройте ваш файл index.html, настройте его и добавьте эти две строки в заголовок s.
Затем добавьте содержимое тела
Теперь ваш файл Index.html должен выглядеть так.
Заметили, что я добавил JQuery? Я добавил его, потому что, если вы хотите использовать библиотеку Bootstrap JavaScript, вам понадобится JQuery. Итак, вы можете добавить его как есть. Перейдите на code.jquery.com, чтобы получить ссылку на CDN.
Учитывая, что наш приоритет в основном на JavaScript, я хотел бы опубликовать полный код index.html здесь, посмотрите на него. Если вы плохо разбираетесь в Bootstrap, я предлагаю вам изучить Bootsrap от Derek Banas на YouTube.
И результат должен выглядеть так:
В Chrome, потому что я использую браузер Chrome.
Теперь у нас есть базовая настройка HTML. Далее приступим к основной сделке. Но подождите, посмотрите на эту строку: <div id=”taskResults”> </div> вот где будет отображаться результат нашей задачи. Также заметил, что все входные теги имеют идентификаторы. Не волнуйтесь, мы будем использовать их в нашем JavaScript, чтобы ссылаться на них.
Теперь перейдем к вашему файлу main.js. Давай займемся главным.
Давайте создадим eventListener, который будет реагировать на нажатия кнопок.
document.getElementById(‘myForm’).addEventListener(‘submit’, saveTask);
SaveTask - это функция, которую нужно создать.
function saveTask(e){
//get form values
var taskName = document.getElementById(“taskName”).value;
var taskDescription = document.getElementById(“taskDescription”).value;
//create an object to store the variables
var task = {
name:taskName,
description:taskDescription
}
e.preventDefault();
}
Теперь, чтобы объяснить вышеупомянутую функцию: параметр e - это событие, которое мы будем, и мы добавили его туда, чтобы мы могли использовать его для предотвращения отправки нашей формы. вы заметите функцию e.preventDefault (), которая есть у нас дальше в блоке кода.
Эта строкаvar taskName = document.getElementById(“taskName”).value; получает значения, введенные в поле ввода taskName.
Аналогичным образом var taskDescription = document.getElementById(“taskDescription”).value; получает значения, введенные в поле описания.
Поскольку мы будем использовать localStorage, а данные хранятся в localStorage в виде строк объектов, нам придется преобразовать наши taskName и Descriptions в объекты.
Таким образом:
var tasks = {
name:taskName,
description:taskDescription
}
Затем давайте посмотрим, есть ли что-нибудь внутри LocalStorage, если нет, тогда мы добавляем значения, которые вводим из нашей формы.
if(localStroage.getItem(‘tasks’)==null){ localStorage.SetItem('tasks',JSON.stringyfy(task));
}
Теперь, если внутри localStorage ничего нет, все, что мы вводим, будет сохранено внутри localStorage. Помните, что localStorage основан на браузере, он работает с парами ключ-значение. и он будет доступен только в том браузере, в котором он запущен.
Как только вы попытаетесь запустить тот же сценарий в другом браузере, все данные, хранящиеся в localStorage, не пойдут с вашим сценарием, поэтому вы не найдете их в своем новом браузере.
Итак, localStorage на самом деле не является базой данных, но поскольку мы можем хранить в нем некоторые данные и извлекать их, мы все равно можем называть его базой данных.
чтобы проверить, что было сохранено в localStorage, щелкните правой кнопкой мыши и перейдите сюда
Y может видеть, что наша задача и ключ и значение были добавлены в localStorage.
Так что, если у нас есть данные внутри localStorage, что мы собираемся делать?
Прямо сейчас это не сработает. Так что давайте заставим это работать, если кто-то добавит что-то новое.
if(localStroage.getItem(‘tasks’)==null){
var task =[]; task.push(tasks);
localStorage.SetItem('task',JSON.stringyfy(task));
}else{
var myTask = localStorage.getItem('task')); myTask.push(task);
// then reset the localStorage
localStorage.setItem('task',JSON.stringify(myTask));
}
С помощью приведенного выше кода вы сможете добавлять элементы в свой localStorage столько, сколько захотите.
Вот что мы сделали.
Но в настоящее время мы не можем увидеть результат того, что мы добавили в наш localStorage в нашем приложении, если не проверим.
Итак, покажем результат. Для этого мы создадим функцию, которая будет выполнять эту работу за нас.
назовем это fetchTask. Я думаю, было бы здорово, если бы мы могли добавить это к нашему тегу body, чтобы он вызывал каждый раз при загрузке страницы. Итак, каждый раз, открывая веб-страницу, мы всегда находим свою задачу. Откройте файл Index.html и добавьте в тело tagonload=fetchTask() , поэтому он должен выглядеть так <body onload=”onload=fetchTask()”>
Наконец, у нас есть приведенный выше код. Наш todoApp должен отображать все наши действия так, как мы хотим. Вы можете настроить CSS, чтобы он стал лучше. или еще лучше улучшить код для личного использования. дайте мне знать, если у вас возникли проблемы с какой-либо частью кода.
