Сергей Дмитриевский | IT

Не получается писать на JS 🤯



Обычно html и css легко заходят. Есть несколько основных тегов и несколько базовых css правил.



Хоп-хоп и есть статичная страничка. Все хорошо.



Но «тупняк» наступает, когда начинается реализация приложений на JS.



❓Вообще, а почему это происходит именно на этапе JS.



Верстка — очень прямолинейное дело. Есть четкое правило, как выглядит html документ. Остается только тегов докинуть.



JS — это уже программирование. И способов реализовать одну задачу множество.



Поэтому важно мыслить системно, тогда и ступор перед пустым файлом index.js пройдет.



Итак, вот шаги при реализации любого приложения на JS. На примере стандартного to-do лист app



1️⃣ Определить, какие данные будут меняться в приложении.



Для to-do лист — это список дел. С точки зрения структур данных нам подойдет массив — множество элементов.



2️⃣ Заведи в коде переменную с нужным типом для сохранения данных.



Все просто. Первой строчкой в файле делаем let todos = [];.



3️⃣ Определи, как пользователь будет менять данные и опиши функции в коде для этого



Просто сценарий — мы просто будем добавлять задачу в список дел.



В коде появляется функция.



function addTodo(todo) { todos.push(todo); }



Кроме как изменения данных функция ничего делать не должна



4️⃣ Опиши визуальную часть



Можно завести функцию render(), которая будет собирать в строку весь html приложения и выводить в нужный div из index.html.



Для списка дела базово это сам список, <input /> для ввода новой задачи и кнопка добавления



5️⃣ Добавь addEventListener на клик по кнопке



Внутри функции достань текущее значение из поля ввода и вызови функцию addTodo()



6️⃣ Обнови интерфейс



После вызова addTodo(), вызови функцию render()



Таким образом логика внутри addEventListener свяжет наше представление и данные.



Это простейший подход к построению приложений. Но в любом приложении есть уровень данных, возможности изменения данных и уровень представления.



Надеюсь было полезно 🙏🏻



На связи)