не понимаю javascript что делать
7 ошибок, из-за которых вы отстаете в изучении JavaScript
Хочешь проверить свои знания по фронтенду?
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Перевод статьи «7 Mistakes That Keep You Behind».
Не всем нравится процесс изучения JavaScript, особенно он не по душе людям нетерпеливым. Иногда дело доходит до того, что человек начинает спрашивать себя, правильный ли карьерный путь он выбрал.
Так ведь никто и не обещал, что изучение JavaScript будет легким и приятным, как прогулка по парку!
Но есть и хорошие новости. Учебный процесс можно улучшить при помощи правильных подходов. В этой статье мы разберем семь ошибок, допускаемых разработчиками при изучении JavaScript. Это именно те ошибки, которые тормозят ваше продвижение вперед.
1. Вы слишком торопитесь при изучении концепций
Когда до вас начинает доходить суть таких концепций как замыкания и функции высшего порядка, не стоит сразу же переходить к следующему уроку, не закрепив свои знания на практике. Такая спешка практически никогда не бывает хорошей идеей.
Перейти к следующей теме это большой соблазн, я знаю. Это со всеми случается. Но поверьте мне, если вы сделаете паузу между темами и используете ее для тренировки в написании кода, это очень поможет вам в будущем: вам будет легче, когда дело дойдет до создания проектов. Зачастую все эти концепции лучше всего усваиваются и надолго запоминаются именно в процессе написания кода.
Спешка при изучении основных концепций приведет лишь к тому, что вы быстро их забудете и вам придется возвращаться к старым материалам в попытках освежить память. Такие случаи очень обескураживают, ведь вы теряете ценное время на изучение того, что уже «усвоили» ранее. А все эти негативные мысли впоследствии накапливаются у вас в голове.
Продвигайтесь вперед только когда чувствуете, что текущая тема вам уже совершенно понятна и легка.
2. Вы не владеете своим кодом
В последнее время люди становятся очень зависимы от работы других людей. Они копируют файлы, созданные авторами учебных курсов или, например, используют lodash-библиотеку буквально для всего.
В использовании lodash для многих ваших задач нет абсолютно ничего плохого. Однако, если вы еще не отработали на практике все изученные концепции, использование библиотеки замедлит вас в долгосрочной перспективе. Концепции это то, что будет применяться со многими инструментами, фреймворками и языками. В программировании концепции это подходы к мыслительному процессу.
Именно по этой причине на многих собеседованиях по-прежнему дают задачи на программирование. Интервьюеры хотят увидеть, как вы мыслите, как вы применяете все эти концепции для решения распространенных задач. Можно использовать библиотеки компонентов для создания красивого пользовательского интерфейса, а lodash – для применения алгоритмов, но если возникнут проблемы, вы должны суметь применить свои знания основных концепций, чтобы разобраться с ними. Библиотеки не будут искать и устанавливать другую библиотеку или пакет для решения задачи. Для этого нужны вы.
Вы заинтересованы в умении применять изученные вами концепции. Поэтому в целом будет хорошей идеей потратить немного времени на то, чтобы попрактиковаться. Вы должны владеть вашим кодом!
3. Вы проводите слишком много времени за обдумыванием и планированием
Сегодня можно найти массу обучающих ресурсов онлайн. И, конечно, перед тем как перейти к изучению новой темы, у вас может появиться желание сначала собрать все необходимые ресурсы.
Мне не встречались люди, которым удалось бы таким образом быстрее и лучше научиться чему-либо. Тем не менее, нас просто тянет к такому подходу, нам хочется иметь перед глазами всю имеющуюся информацию, чтобы распланировать все до конца года.
Но это лишь игры вашего разума.
Не увлекайтесь процессом сбора 80 руководств, 6 книг и коллекции из 50 закладок в браузере. Не пытайтесь охватить все это одновременно, следуя своему желанию почувствовать себя королем веб-разработки.
Если вы изучаете JavaScript, учитесь на практике. Просто начните писать что-нибудь. Используйте то, что изучили за прошлый час, и напишите маленький пример кода чисто для себя. Это принесет вам больше пользы, чем марафонское чтение всех собранных вами материалов.
4. Вы перегружаете себя лишней информацией
Когда вы проводите большую часть своего времени, потребляя информацию (вместо того чтобы почаще прерываться на написание кода), вы наверняка забудете большую ее часть и вам придется постоянно возвращаться к пройденному материалу.
Проводить все время за учебой это страшная ловушка, потому что при этом вам кажется, что вы учитесь. Но что будет через пару месяцев, когда вы начнете все это забывать? Вы обнаружите, что вы почему-то неспособны применить на практике концепции и материалы, изученные совсем недавно.
Могу посоветовать проводить за написанием кода хотя бы 15 минут на каждый час усвоения информации.
5. Вы сравниваете себя с более опытными разработчиками
Когда вы сравниваете себя с другими, вы не думаете о том, как они достигли такого уровня, вы думаете лишь о самом этом уровне.
Люди смотрят на успешных программистов вроде Дэна Абрамова и автоматически предполагают, что те изначально писали чистый код.
Просто фокусируйтесь на том, что изучаете, и по мере продвижения вперед ваш уровень будет постоянно повышаться. И тогда (довольно скоро) уже другие новички будут думать о том, как вам удалось достичь таких высот.
6. Изучение инструментов и фреймворков, созданных поверх JavaScript
То есть, вам нужно изучить JavaScript, но вместо этого вы сразу переходите к изучению React/jQuery/Angular/Vue. Но что будет, когда выйдет новый революционный инструмент и вам придется переключиться на него? Вы будете вынуждены обращаться к кому-нибудь, чтобы разобраться в различных тонкостях, и надеяться, что этот человек поделится с вами своими знаниями, потому что он изучил JavaScript, а вы – нет!
Если вы не приложили достаточно усилий для изучения «ванильного» JavaScript, я настоятельно советую действительно изучить этот язык. Потому что, сделав это, вы сможете понимать инструменты, построенные на его основе, понимать, зачем они были созданы и какие задачи они решают. Изучение всех «почему?» также поможет вам избежать неудачных решений при проектировании кода.
В свое время я начал изучать jQuery до того, как освоил JavaScript, и это стало одной из самых прискорбных моих ошибок за всю карьеру. Когда появился React, я поддался повальному увлечению и тоже начал его изучать. Однако, после того как я осознал, что вообще не знаю, зачем мне использовать React и почему другие люди его используют, мой учебный процесс стал весьма тяжелым. Он внезапно превратился в простое запоминание react-кода.
В инструментах и фреймворках JavaScript есть много важных и при этом скрытых частей, которые вам нужно увидеть, но без хорошего знания языка это сделать невозможно.
7. Вы не делите концепции на меньшие кусочки
Изучение JavaScript подобно изучению математики в школе. Вы сможете перейти к сравнению чисел, основам алгебры и т. д. только когда научитесь складывать, вычитать, делить и умножать. Если вы обнаруживаете, что вам сложно что-то понять, зачастую это означает, что вы где-то что-то «перепрыгнули» вместо того чтобы продвигаться маленькими шажками. Но перейти к изучению алгебры без знания основ математики просто невозможно.
Если вы продвигаетесь постепенно, но все равно сталкиваетесь с проблемами при изучении более сложной концепции, вам будет гораздо проще получить помощь, ведь вы будете знать весь предыдущий материал по этой теме.
Лайфхак: в какой последовательности изучать JavaScript
Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расскажем, как изучать JavaScript, и предоставим полезные ссылки.
Сперва следует понять, для чего вам нужен JavaScript
JavaScript (JS) – нативный язык, база, а библиотеки и JavaScript фреймворки – все то, что уже «накладывается» сверху. Язык программирования JavaScript клиентский и выполняется на стороне браузера. Грубо говоря, вся нагрузка ложится именно на ПК пользователя, а не на сервер, как было бы в случае с PHP. Поэтому кривой скрипт также будет затрагивать напрямую клиента, а не сервер: хорошо для вас, да плохо для пользователя.
Подробнее о том, что такое JavaScript, вы сможете узнать из данного видео:
Определиться со стеком
Не упускайте из виду JavaScript фреймворки, библиотеки и прочие инструменты.
Теперь давайте условимся: идеальной последовательности не существует. Все напрямую зависит от того, чем вы занимаетесь и на что ориентированы: фронтенд или full-stack. Если первое, делайте меньший упор на взаимодействие с серверной частью, а если второе – напротив. Изучать JavaScript вы можете и по своему плану. Наш – лишь одна из возможных вариаций, которая, тем не менее, имеет право на существование.
Выстраиваем последовательность
1. JavaScript основы
Книги по JavaScript для начинающих и аналогичные видеоуроки, которые разбудят в вас веб-разработчика. Массивы, коллекции, строки и прочий базис обязательны к изучению на старте. Список литературы солидный, поэтому в первую очередь загляните сюда:
И еще много чего интересного в нашей статье 16 бесплатных книг по JavaScript.
2. jQuery
Рекомендуем ознакомиться с серией видео «Уроки jQuery» от Web Developer Blog. Вы узнаете все о jQuery, начиная синтаксисом и заканчивая практической реализацией того, что может потребоваться.
3. JavaScript: углубленное изучение
Начинаем изучать JavaScript более серьезно.
В этом поможет неплохой видеокурс от loftblog под названием «Продвинутый JavaScript»:
4. Node.js
И вот мы переходим к самому «вкусному». В сети немало материалов по Node.js, но мы предлагаем сперва ознакомиться с нашими статьями:
Далее посмотрите серию уроков Node.js от ITVDN:
Ребята излагают материал максимально доступно, так что никто не уйдет «обиженным» 😉
5. npm
Менеджер пакетов, который входит в Node.js. Нужен, важен и нередко украшает требования вакансий. У Дмитрия Лаврика есть хорошее видео, разбирающее по косточкам npm в рамках основ:
Захотите узнать больше – обязательно найдете на его канале дополнительные видео, посвященные данному менеджеру.
6. Gulp
Исчерпывающий ответ на вопрос «Что это такое» дает Современный учебник JavaScript: Скринкаст по Gulp. Все выпуски скринкаста собраны в одном месте, что безумно удобно.
7. Webpack
За основой по Webpack вам на канал WebForMySelf:
8. Angular/Vue/React
Выше уже упоминалось, что можно выбрать что-то одно, но все зависит от конкретного проекта и соответствующих требований к нему. Хоть Vue.js сейчас по обсуждениям впереди планеты всей, затронем каждый из трех инструментов.
Angular курс
Vue.js
Знакомство с React
Надеемся, вам помог наш лайфхак. Если же вы знаете более эффективный способ изучить JS – поделитесь в комментариях 🙂
Вас также могут заинтересовать другие материалы по теме:
Не могу понять JavaScript [закрыт]
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах.
Начинаю осваивать JavaScript, и у меня ничего практически не получается. Иду по основам, после теории дается задание, которое я не могу выполнить. Читаю задание и впадаю в ступор. Как писать код, что должно быть в функции, чтобы она заработала, с чего начать, как должен выглядеть код, чтобы он был рабочим, как его оформить — мне абсолютно непонятно.
Например, вот такое задание:
Реализуйте функцию printJaimesLine, которая принимает один аргумент — строку, и выводит реплику на экран в формате JAIME: переданная_строка.
Как назвать переменную, которая будет аргументом — решайте сами.
Наша система содержит код, скрытый от вас. В этом упражнении скрыт вызов функции printJaimesLine. Так мы проверяем ваше решение.
Вам не нужно самостоятельно вызывать функцию, только определить её.
Мой вопрос заключается не в решении данного задания, а как научиться писать код самой? Потому что сейчас я испытываю только беспомощность, как только нужно написать код.
4 ответа 4
Подобные вопросы из категории «ни о чем», надо удалять, а не поощрять плюсами. Изучите в первую очередь синтаксис и не будут возникать подобные вопросы, на которые нет ответа.
В психологии есть такое понятие как «проклятие знания» (curse of knowledge), это когнитивное искажение в мышлении человека, суть которого заключается в том, что более информированному человеку крайне сложно рассматривать какую-либо проблему с точки зрения менее информированных людей. За счет того, что у более информированного человека за годы и тысячи часов практики сложились устойчивые нейронные связи и нейронные контуры в головном мозге, позволяющие ему успешно решать рабочие задачи, ему трудно понять проблемы начинающих, он думает: писать код это так легко и просто, что там сложного, изучи синтаксис и у тебя исчезнут все проблемы. Но это иллюзия.
Дело не только в программировании. На самом деле научить любого человека какому-нибудь навыку или профессии — это сложнейшая проблема. Это проблема методологии. Если бы существовала универсальная и успешная методология по преподаванию программирования, то не было бы проблем с нехваткой тех же middl’ов во фронтенде, но их по-прежнему не хватает, несмотря на обилие оффлайн и онлайн-школ.
Те же самые проблемы с кодом у начинающих в других странах:
Подытоживая, пришла к мысли, что надо больше работать с готовым кодом, повторять за другими — из урока в урок идти по плейлисту готового проекта, печатать готовый код из книг.
5 вещей, которые чаще всего не понимают новички в JavaScript
Всем привет! В конце сентября в OTUS стартует новый поток курса «Fullstack разработчик JavaScript». В преддверии начала занятий хотим поделиться с вами авторской статьей, подготовленной специально для студентов курса.
Автор статьи: Павел Якупов
Превью. Хочу сразу отметить, что в данной статье разбираются темы, хорошо знакомые «ниндзям», и больше статья нацелена на то, чтобы новички лучше поняли некоторые нюансы языка, и могли не потеряться в задачах, которые часто дают на собеседовании — ведь на самом деле подобные таски никакого отношения к реальной разработке не имеют, а те, кто их дают, чаще всего таким способом пытаются понять, насколько хорошо вы знаете JavaScript.
Ссылочные типы памяти
Как именно данные хранятся в JavaScript? Многие курсы обучения программированию начинают объяснения с классического: переменная это некая «коробка» в которой у нас хранятся какие-то данные. Какие именно, для языков с динамической типизацией вроде как оказывается неважно: интерпретатор сам «проглотит» любые типы данных и динамически поменяет тип, если надо, и задумываться над типами переменных, и как они обрабатываются, не стоит. Что конечно, неправильно, и поэтому мы начнем сегодняшнее обсуждение с особенностей, которые часто ускользают: как сохраняются переменные в JavaScript — в виде примитивов(копий) или в виде ссылок.
В остальном JavaScript опирается на ссылочные области памяти. Зачем они нужны? Создатели языка старались создать язык, в котором память использовалась бы максимально экономно(и это было совершенно не ново на тот момент). Для иллюстрации, представьте, что вам нужно запомнить имена трех новых коллег по работе — совершенно новые имена, и для усиления сравнения, ваши новые коллеги из Индии или Китая с необычными для вас именами. А теперь представьте, что коллег зовут также, как вас, и двух ваших лучших друзей в школе. В какой ситуации вам будет запомнить легче? Здесь память человека и компьютера работает схоже. Приведем несколько конкретных примеров:
Таким образом, если вы встретите подобную задачу на собеседовании, постарайтесь сразу понять, какой перед вами тип данных — откуда и как он получил значение, как примитивный тип, или как ссылочный.
Работа контекста
Для того, чтобы понять, как именно работает контекст в JS, нужно изучить несколько пунктов:
Перейдем к задачам, которые чаще всего получают новички по вопросам контекста на собеседовании.
Типы данных и что к чему относится
Сразу скажем: массив по сути является объектом и в JavaScript это не первая вариация объекта — Map, WeakSet, Set и коллекции тому подтверждение.
Стоит запомнить, что null является специальным типом данных — хотя начало предыдущего примера и указывало строго на другое. Для лучшего понимания, зачем именно данный тип был добавлен в язык, мне кажется, стоит изучить основы синтаксиса C++ или С#.
И конечно, на собеседованиях часто попадается такая задача, чья особенность связана с динамической типизацией:
С приведением типов при сравнении в JS связано большое количество фокусов, всем мы их здесь привести физически не сможем. Рекомендуем обратиться к «Что за черт JavaScript „.
Нелогичные особенности, оставленные в языке в процессе разработки
Сложение строк. На самом деле сложение строк с числами нельзя отнести к ошибкам в разработке языка, однако в контексте JavaScript это привело к известным примерам, которые считаются недостаточно логичными:
То, что плюс просто складывает строки с числами — относительно нелогично, но это нужно просто запомнить. Особенно непривычно это может быть потому, что другие два интерпретируемых языка, которые популярны и широко используются и в веб-разработке — PHP и Python — подобных фокусов со сложением строк и чисел не выкидывают и ведут себя куда более предсказуемо в подобных операциях.
Менее известны подобные примеры, например c NaN:
Часто NaN приносит неприятные неожиданности, если вы, например, неправильно настроили проверку на тип.
Куда более известен пример с 0.1 +0.2 — потому как эта ошибка связана с форматом IEEE 754, который используется также, к примеру, в столь “математичном» Python.
Так же включим менее известный баг с числом Epsilon, причина которого лежит в том же русле:
И вопросы, которые несколько сложнее:
Стадии обработки событий
Многим новичкам непонятны браузерные события. Часто даже незнакомы самые основные принципы, по которым работают браузерные события — перехват, всплытие и события по умолчанию. Самая загадочная с точки зрения новичка вещь — это всплытие события, который, вне сомнения, обосновано в начале вызывает вопросы. Всплытие работает следующим образом: когда вы кликаете по вложенному DOM — элементу, событие срабатывает не только на нем, но и на родителе, если на родителе также был установлен обработчик с таким событием.
В случае, если у нас происходит всплытие события, нам может понадобится его отмена.
Кроме того, для новичков часто представляет проблему отмена событий, которые происходят по умолчанию. В особенности это важно при разработке форм — потому как валидацию формы, к примеру, нужно проводить как на стороне клиента, так и на стороне сервера:
Отмена всплытия события может нести в себе и некоторые неприятности: к примеру, вы можете создать так называемую «мертвую зону», в которой не сработает необходимая вещь — к примеру, событие элемента, которому «не посчастливилось» оказаться рядом.
Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.
Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».
Hello, world!
Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.
JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.
Этот текст можно ввести с клавиатуры, можно скопировать и вставить его в консоль. Результат будет одним и тем же, но, если вы учитесь программировать, рекомендуется вводить тексты программ самостоятельно, а не копировать их.
Первая программа в консоли браузера — вывод сообщения в консоль
Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:
Вот результат выполнения этой программы.
Вывод сообщения в окне
Обратите внимание на то, что панель инструментов разработчика расположена теперь в нижней части экрана. Менять её расположение можно, воспользовавшись меню с тремя точками в её заголовке и выбирая соответствующую пиктограмму. Там же можно найти и кнопку для закрытия этой панели.
Инструменты разработчика, и, в том числе, консоль, имеются и в других браузерах. Консоль хороша тем, что она, когда вы пользуетесь браузером, всегда под рукой.