Рубрики
Без рубрики

Как думать как программист

Zell Liew Как думать как программист «Я не получаю JavaScript. Я не могу сделать компоненты с нуля. Мой разум выходит пустой, когда я смотрю в пустой файл JavaScript. Я думаю, я не могу сделать это, потому что я не понимаю не знаю, как думать как

Автор оригинала: FreeCodeCamp Community Member.

Zell Liew

«Я не получаю JavaScript. Я не могу сделать компоненты с нуля. Мой разум выходит пустой, когда я смотрю в пустой файл JavaScript. Я думаю, я не могу сделать это, потому что я не знаю, как думать как программист . “

Звучит знакомо? Ты не одинок, мой друг. Многие люди, которые пытаются забрать JavaScript, поскольку их первый язык программирования сталкивается с той же проблемой.

Черт возьми, даже разработчики, которые уже кодируют на другом языке, тоже сталкиваются с той же проблемой с JavaScript. Вместо того, чтобы «я не могу думать как программист», говорят: «Я не могу думать в JavaScript».

Но не больше. Пусть сегодня будет день, когда вы научитесь думать как программист.

Вы уже можете думать как программист.

Вы пробовали простые упражнения о JavaScript на таких местах, как FreeCodeCamp, код академии или кодовых войн?

Если у вас есть, вы уже знаете, как думать как программист.

Реальная причина вашего разума заголовка, когда вы сталкиваетесь с вашим файлом JavaScript, скорее всего из-за Блок кодера Отказ Вы напуганы, чтобы написать JavaScript, который не работает. Ты боишься лицом к ошибкам. Вы не знаете, как начать.

Преодоляющий блок кодера прост. Вы можете выполнить эти четыре шага:

  1. Разбить проблему в меньшие проблемы
  2. Найти решения ваших меньших проблем
  3. Соберите растворы согласованным образом
  4. Рефакторист и улучшить

Давайте приблизимся к каждому из этих шагов.

Шаг 1: Разбивайте проблему в меньшие проблемы.

Как вы положите слон в холодильник?

Вот что бы большинство людей ответили:

  1. Открыть холодильник
  2. Поставить слон в
  3. Закройте холодильник

Задача решена.

Этот ответ – лучший пример того, почему вы застряли, когда вы сталкиваетесь с пустым файлом JavaScript. Пропускает шаги Отказ

Если вы будете логически по поводу вопроса, вы увидите несколько явных проблем, которые остаются без ответа:

  1. О каком холодильнике мы говорим?
  2. О каком слоне мы говорим?
  3. Если слон слишком огромен, чтобы вписаться в холодильник, что вы делаете?
  4. Где вы найдете слона в первую очередь?
  5. Как вы транспортируете слон в свой холодильник?

Когда вы кодируете, вам нужно ответить на каждый маленький вопрос, о котором вы можете подумать. Вот почему первый шаг – сломать свою проблему на меньшие кусочки.

Шаг 2: Найдите решения ваших меньших проблем.

Второй шаг – найти решение для каждой из ваших небольших проблем. Здесь важно быть максимально подробным.

  1. Какой холодильник? – холодильник, который сидит на вашей кухне
  2. Какой слон? – Африканский Буш Слон
  3. Что если слон слишком большой? – Получите термоусадочную пистолет (?), Чтобы уменьшить слон (?).
  4. Где вы найдете слона? – Африка
  5. Как вы транспортируете слона? – Положите его в свою сумку после того, как вы сокращаете его, затем возьмите самолет домой.

Иногда вам нужно копать несколько слоев, чтобы получить вам необходимый ответ. В приведенном выше примере мы можем дрочить глубже в ответы 3 и 4.

  1. Где вы получаете термоусадочную пистолет? – брать у сумасшедшего ученого по соседству.
  2. Где в Африке вы можете найти свой слон? – Addo Stephant Park в Южной Африке.

Как только у вас есть ответы на все ваши меньшие проблемы, вы собираете их вместе, чтобы решить вашу большую проблему.

Шаг 3: Соберите растворы согласованным способом.

Таким образом, в приведенном введении в холодильнике Put-Elephant вы, вероятно, можете выполнить следующие шаги:

  1. Получить термоусадочную пистолет от ученого по соседству
  2. Летать в Южную Африку
  3. Путешествие в Аддо Слон Парк
  4. Найти слона в парке
  5. Стреляйте слона с уклоным пистолетом
  6. Положите сши собой слон в вашу сумку
  7. Путешествие обратно в аэропорт
  8. Возвращайся в свою страну
  9. Путешествовать в свой дом
  10. Положить слон в холодильник

Задача решена.

Настолько интересны на звуках, вы, скорее всего, не будете захватывать слонов и поместить их в холодильники с помощью JavaScript.

Давайте будем использовать реальный пример.

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

Первый шаг – сломай его

Разбивайте компонент на меньшие кусочки. Вот несколько проблем, которые вы можете идентифицировать:

  1. Какова разметка этой кнопки?
  2. Как выглядеть кнопка?
  3. Что происходит, когда кнопка нажала один раз?
  4. Что происходит, когда кнопка снова нажат?
  5. Что происходит, когда кнопка нажала в третий раз?
  6. Какова разметка этой боковой панели?
  7. Как выглядит боковая панель, когда это показано?
  8. Как выглядит боковая панель, когда она скрыта?
  9. Как появится боковая панель?
  10. Как боковая панель уходит?
  11. Если боковая панель появится, когда нагрузка страницы?

Второй шаг – создать решения для проблем

Для создания решений необходимо иметь знания о среде, которую вы создаете. В нашем случае вам нужно знать достаточно HTML, CSS и JavaScript.

Не волнуйтесь, если вы не знаете ответ на любой из этих вопросов. Если вы достаточно сломали их достаточно, вы сможете найти ответ через Google за пять минут.

Давайте ответим на каждый из вопросов:

Какова разметка этой кнопки?

Разметка – это < ; A> Тег с CLA СС. кнопка.

Как эта кнопка должна выглядеть?

Эта кнопка должна иметь следующие CSS:

.btn {  display: inline-block;  font-size: 2em;  padding: 0.75em 1em;  background-color: #1ce;  color: #fff;  text-transform: uppercase;  text-decoration: none;}

Что происходит, когда кнопка нажала один раз? Дважды? Три раза?

Боковая панель должна появляться, когда кнопка нажала один раз. Эта боковая панель затем уходит, когда кнопка нажала в другое время. Он снова появляется, когда кнопка снова нажимается.

Какова разметка этой боковой панели?

Боковая панель должна быть IV> Это содержит список ссылок:

Как выглядит боковая панель, когда это показано?

Боковая панель должна быть размещена справа от окна. Это должно быть исправлено на месте, поэтому пользователь видит его. Это должно быть шириной 300 пикселей.

Когда вы закончите решить проблему, вы можете в конечном итоге с CSS выглядит похоже на следующее:

.sidebar {  position: fixed;  top: 0;  bottom: 0;  right: 0;  width: 300px;  background-color: #333;}.sidebar ul {  margin: 0;  padding: 0;}.sidebar li {  list-style: none;}.sidebar li + li {  border-top: 1px solid white;}.sidebar a {  display: block;  padding: 1em 1.5em;  color: #fff;  text-decoration: none;}

Как выглядит боковая панель, когда она скрыта?

Боковая панель должна быть смещена 300 пикселей вправо, поэтому он не работает.

Когда вы отвечаете на этот вопрос, еще два могут выйти в ваш разум:

  1. Откуда вы знаете, показана ли боковая панель или скрыта?
  2. Как вы стилируете скрытую боковую панель?

Давайте ответим на них.

Откуда вы знаете, показана ли боковая панель или скрыта?

Если боковая панель имеет . - скрытый Класс, боковая панель должна быть скрыта с вида. В противном случае это должно быть видно.

Как вы стилируете скрытую боковую панель?

Мы используем translatex Чтобы сдвинуть боковую панель 300PX вправо с трансформировать является одним из лучших свойств для анимации. Твои стили тогда становится:

.sidebar.is-hidden {  transform: translateX(300px);}

Как появится боковая панель?

Боковая панель не может появиться немедленно. Необходимо перейти справа, где он скрыт от вида, слева, где он виден.

Если вы знаете свои CSS, вы сможете использовать Переход имущество. Если вы этого не сделаете, вы сможете найти свой ответ через Google.

.sidebar {  /* other properties */  transition: transform 0.3s ease-out;}

Как боковая панель исчезает?

Он должен исчезнуть так же, как оно появляется, в обратном направлении. С этим вам не нужно писать любой дополнительный код CSS.

Если боковая панель появится, когда нагрузка страницы?

Неа. Учитывая то, что у нас есть, мы можем добавить скрыт Класс в разметке боковой панели и боковой панель должен оставаться скрытым.

Теперь мы ответили почти все, кроме одного – что происходит, когда кнопка нажала один раз? Дважды? Три раза?

Наш ответ выше был слишком расплывчатым. Мы знаем, что боковая панель должна появиться при нажатии на него, но как? Боковая панель должна исчезнуть, когда вы снова нажимаете на него, но как?

На данный момент мы можем снова ответить на этот вопрос более подробно. Но до этого, как узнать, когда вы нажали на кнопку?

Как узнать, когда вы нажимаете на кнопку Отказ

Если вы знаете свой JavaScript, вы знаете, вы можете добавить слушатель событий на кнопку и прослушать Нажмите мероприятие. Если вы не знаете, вы сможете погладить это.

Прежде чем добавить слушатель событий, вам нужно найти кнопку из разметки с Queryselector Отказ

const button = document.querySelector('.btn')button.addEventListener('click', function() {  console.log('button is clicked!')})

Что происходит, когда кнопка нажала один раз?

Когда кнопка нажала один раз, мы должны удалить скрыт Класс, поэтому кнопка отображается. Удалить класс в JavaScript, мы используем Element.classlist.remove Отказ Это означает, что нам нужно сначала выбрать боковую панель.

const button = document.querySelector('.btn')const sidebar = document.querySelector('.sidebar')button.addEventListener('click', function() {  sidebar.classList.remove('is-hidden')})

Что происходит, когда кнопка нажала дважды?

Когда кнопка снова нажимается, мы должны добавить скрыт Класс обратно на боковую панель, поэтому он исчезает.

К сожалению, мы не можем обнаружить, сколько раз кнопка нажата с прослушивателем событий. Лучший способ, то, чтобы проверить, есть ли класс скрыт присутствует на боковой панели уже. Если это так, мы его удаляем. Если это не так, мы добавляем его.

const button = document.querySelector('.btn')const sidebar = document.querySelector('.sidebar')button.addEventListener('click', function() {  if (sidebar.classList.contains('is-hidden')) {    sidebar.classList.remove('is-hidden')  } else {    sidebar.classList.add('is-hidden')  }})

И с этим у вас есть начальный прототип компонента.

Четвертый шаг – рефакторист и улучшается.

Мы включили третий шаг, собрав наши решения согласованными по пути. Последний шаг – ревертировать и улучшить свой код. Этот шаг может не прийти естественным образом к вам прямо сейчас. Это требует усилий и практики, прежде чем вы сможете сказать, может ли ваш код быть улучшенным.

Итак, как только вы закончите с тремя ступенями, сделайте перерыв и работайте над чем-то еще. Когда вы поправляетесь с JavaScript, вы можете заметить, что вы пропустили несколько деталей, когда вы вернетесь.

В этом примере выше вы можете задать еще несколько вопросов:

  1. Как вы делаете этот компонент боковой панели доступен для пользователей, у которых есть визуальные нарушения?
  2. Как упростить этот компонент этой боковой панели для людей с клавиатурами?
  3. Можете ли вы улучшить код каким-либо образом?

На третий момент, если вы погрузитесь немного дальше, вы можете заметить, что есть Включить Способ, который удаляет класс, если он присутствует. Если класс не присутствует, Включить Метод добавляет его для нас:

const button = document.querySelector('.btn')const sidebar = document.querySelector('.sidebar')button.addEventListener('click', function() {  sidebar.classList.toggle('is-hidden')})

Обертывание

Думая, как программист прост. Ключ заключается в том, чтобы узнать, как нарушать проблемы вниз на более мелкие.

Когда вы закончите, нарушая проблему вниз, найдите решения для ваших небольших проблем и код. По пути вы обнаружите больше проблем, о которых вы не думали раньше. Решить их тоже.

К тому времени, когда вы закончите с написанием ваших ответов на каждую небольшую проблему, у вас будет ответ на вашу большую проблему. Иногда вам может потребоваться присоединиться к шагам, которые вы написали для ваших небольших проблем.

Наконец, работа не выполняется, когда вы создаете свое первое решение. Всегда собирается быть местом для улучшения. Однако, скорее всего, вы не сможете увидеть улучшения прямо сейчас. Сделайте перерыв, работайте над чем-то еще и вернемся позже. Вы сможете спросить еще лучшие вопросы.

Кстати, вы хотите узнать JavaScript, но не знаю, как начать? Если вы есть, попробуйте пройти через это JavaScript Roadmap. что я построил для тебя. В нем вы узнаете, как преодолеть свои барьеры для изучения JavaScript, и вы получите дорожное слово, чтобы правильно следить за JavaScript. Повеселись!

(Если вам понравилась эта статья, я был бы признателен, если вы дадите мне несколько хлопьев и поделиться этим .?) Спасибо!

Первоначально опубликовано https://zellwk.com/blog/think/ .