Как я научился писать на JavaScript
Казалось бы стоит освоить верстку (html + css) и ты станешь frontend разработчиком.
Но нет.
Основное отличие разработчика от верстальщика - умение делать сайты интерактивными.
Для этого нужно перестраивать мышление.
У меня долго не получалось это сделать. Я достаточно быстро освоил верстку, но вот с JS были сложности.
Я вроде бы понимал синтаксис: переменные, if/else, циклы, функции.
Но связать все в систему не получалось.
Вот ступор был и все. Это еще называется проблема «чистого листа». Когда есть задача, но как подступиться не понимаешь.
И было грустно. Тебе хочется двигаться, развиваться. А ты тупишь и стоишь на месте.
Но освоив несколько понятий я понял, что все просто и могу сделать любое приложение на JavaScipt.
Итак, что я выучил и это сильно помогло мне развиться как frontend разработчик:
1️⃣ Document Object Model (DOM).
Когда первый раз читаешь, звучит непонятно. Но на деле все очень просто.
Твоя html разметка имеет объектное представление в JavaScript.
Через методы в коде, ты можешь изменять html разметку.
Например, тебе нужно по нажатию на кнопку открыть попап.
У тебя в html коде описана верстка попапа и есть css класс, в котором прописаны стили открытого попапа.
Далее через JS мы по событию добавляем элементу класс
Бум, стили применяются и попап показался.
2️⃣ Связка Данные - Логика - Представление
Любое приложение можно разложить по такой связке.
Данные описывают основные сущности и их значения.
Логика описывает как эти данные могут менять.
А представление помогает отразить в UI изменения или инициировать новое изменение.
Классический пример - приложение список дел.
Есть исходный массив данных todos.
Есть метод логика добавления новой todo в функции addTodo.
И есть уровень представления: инпут + кнопка добавления + вывод списка
По нажатию на кнопку вызывается addTodo() и запускается перерисовка списка с обновленным todos.
Надеюсь, что эти две концепции помогут и тебе продвинуться дальше в освоении фронта.
Поделись в комментариях, а с какими сложностями сталкиваешься сейчас ты?
Казалось бы стоит освоить верстку (html + css) и ты станешь frontend разработчиком.
Но нет.
Основное отличие разработчика от верстальщика - умение делать сайты интерактивными.
Для этого нужно перестраивать мышление.
У меня долго не получалось это сделать. Я достаточно быстро освоил верстку, но вот с JS были сложности.
Я вроде бы понимал синтаксис: переменные, if/else, циклы, функции.
Но связать все в систему не получалось.
Вот ступор был и все. Это еще называется проблема «чистого листа». Когда есть задача, но как подступиться не понимаешь.
И было грустно. Тебе хочется двигаться, развиваться. А ты тупишь и стоишь на месте.
Но освоив несколько понятий я понял, что все просто и могу сделать любое приложение на JavaScipt.
Итак, что я выучил и это сильно помогло мне развиться как frontend разработчик:
1️⃣ Document Object Model (DOM).
Когда первый раз читаешь, звучит непонятно. Но на деле все очень просто.
Твоя html разметка имеет объектное представление в JavaScript.
Через методы в коде, ты можешь изменять html разметку.
Например, тебе нужно по нажатию на кнопку открыть попап.
У тебя в html коде описана верстка попапа и есть css класс, в котором прописаны стили открытого попапа.
Далее через JS мы по событию добавляем элементу класс
popup_opened.Бум, стили применяются и попап показался.
2️⃣ Связка Данные - Логика - Представление
Любое приложение можно разложить по такой связке.
Данные описывают основные сущности и их значения.
Логика описывает как эти данные могут менять.
А представление помогает отразить в UI изменения или инициировать новое изменение.
Классический пример - приложение список дел.
Есть исходный массив данных todos.
Есть метод логика добавления новой todo в функции addTodo.
И есть уровень представления: инпут + кнопка добавления + вывод списка
По нажатию на кнопку вызывается addTodo() и запускается перерисовка списка с обновленным todos.
Надеюсь, что эти две концепции помогут и тебе продвинуться дальше в освоении фронта.
Поделись в комментариях, а с какими сложностями сталкиваешься сейчас ты?