Как закреплять основы javascript на практике?

Question

[etherreals]

html и css знаю неплохо. Есть опыт верстки примерно 20 страничек.
Языков программирования не изучал.

Итак
1. Выучил первую часть учебника learn.javascript.ru/#book-toc-638 .Прошелся ни один раз. Около 80% задач выполнил самостоятельно.
2. Неоднократно смотрел видеоуроки Sorax, HexletUnivercity и частично Специалиста.
3. Есть печатное издание Javascript. Подробное руководство. 6 издание. Дэвид Флэнаган.
Вскользь читал эту книгу до 200 страницы.

В общем теорию знаю неплохо, единственное, что плохо понимаю, так это замыкания.
Из практики делал только задачи на learn.javascript.ru и создал программку для расшифровки ИНН (актуально для Украины), что-то вроде такого https://decode.org.ua/inn
Пытался сделать калькулятор, но пока не выходит, так как клиентский javascript еще не изучал.
Пробовал смотреть видеоуроки по angular.js, но там вообще все тяжело.

Что делать дальше?
1. Еще несколько раз пройтись по теории, а потом думать, что делать дальше.
2. Идти дальше по учебнику learn.javascript.ru и учить клиентский javascript
3. Выполнять практические задачи.

Лично я предпочитаю 3 вариант, но не знаю, где именно брать эти задачи.
Читал, что можно пробовать разобраться в библиотеках, что-то поменять. Качал исходники jQuery, но разобрать код так и не могу.
Можно на github найти проект и присоединиться к нему, но по запросу javascript ничего доступного для меня не выдает.
В общем запутался и не знаю, что делать дальше.

По html и css есть куча уроков верстки, где все становиться понятно.
В php есть уроки по созданию движков для интернет-магазина (php я не учил).
А вот что делать с javascript?

Answer 1

[Александр Серый]

Люто рекомендую www.codewars.com.
Просто чудо, что он есть. Его можно использовать для изучения многих языков. Думаю Вам, как и мне собственно, он будет полезен для освоения как JavaScript, так и CoffeeScript.
Есть 8 уровней сложности. Ко многим заданиям прилагаются тесты. Так что заодно и с Test-driven development познакомитесь. Тесты есть готовые, но можно и свои пробовать писать.
Задания можно обсудить в разделе "Discuss". Там все грамотно сделано и спойлеры скрыты.
После выполнения доступно посмотреть на решения других пользователей и проголосовать за самое находчивое решение и за "best practice". Это дает не слабый левелап.
Совет: делайте все на localhost, а после уже готовый код вставляйте для проверки в окно "Your Solution". Так проще поэтапно отслеживать код и можно потихоньку прийти к решению.
P.S. Сам как раз решаю эти задачки и активно пользуюсь learn.javascript.ru для справки.

Comments

[Keeprock]

+1 за codewars! Есть много подобных, но мне понравился он больше всего. И реально такие сайты помогают в работе - ежедневные задачи решаются проще.

Answer 2

[Алексей Немиро]

1. Еще несколько раз пройтись по теории, а потом думать, что делать дальше.

Если есть желание стать Доктором JavaScriptовских наук, или писать статьи по этой теме :)

3. Выполнять практические задачи.

Да, и только так. Без практики смысла от теоретических знаний не будет никакого. Существует множество тонкостей, которые в теории не учитываются. Тем более мир меняется не по дням, а по секундам!

Лично я предпочитаю 3 вариант, но не знаю, где именно брать эти задачи.

Самостоятельно ставить и решать. Например, сделать свой framework, или свой framework для другого framework :) Без шуток, будет хорошая практика, даже если ничего не выйдет.

Игры можно попробовать делать, тоже неплохая будет практика. Начать с какой-нибудь игры типа: угадай пару, ну или мелодию, в крайнем случае слово :) Если что-то получится, можно разместить в каком-нибудь ВКонтакте, а там и более тесно интегрироваться, тоже полезное дело.

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

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

Comments

[etherreals]

Если получается делать, то становится интересно. А если не знаешь, за что браться, то и интерес пропадает. Я даже калькулятор создать не могу. Так что фреймворк и подавно не смогу :).

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

Про угадать слово. Есть к примеру вопрос, и тебе надо ответить на него через prompt. Если ответил правильно выводиться alert с ответом верно и если не правильно, то выводиться запрос prompt еще раз. Я правильно понял? Если да, то подобных задачек я уже много решил.

[Алексей Немиро]

etherreals:
/Я даже калькулятор создать не могу/

Вопросы в студию! Поможем, расскажем, покажем ;-)

/Про угадать пару и мелодию можно поподробнее/

Это скорее шутка. Придется мелодии собирать, много мороки :)

/Про угадать слово.../

Можно и promt и alert. Для начала. А потом уже сделать более красиво.
Например, можно использовать текстовые поля. Оповещения выводить на страницу, а не неудобными всплывающими окнами. Можно Якубовича нарисовать, и чтобы всякий раз, когда называется неправильное слово у него усы шевелились и в итоге отваливались :) Усы долго рисовать, но вариант может быть таким: jsfiddle.net/alekseynemiro/777hq6ue Можно развивать в разных направления.

/то подобных задачек я уже много решил/

Нужно эволюционировать. Решив задачу, пытаться найти еще более лучшее/красивое решение для той же задачи. Это один из важных элементов в программировании. Сделал дело, сделай лучше!

[Алексей Немиро]

etherreals: еще можно пытаться отвечать на вопросы по JavaScript. Т.е. решать чужие задачи и получать свой опыт. В этой теме я ничего нового не узнал, но иногда попадаются вопросы, отвечая на которые я узнаю что-то новое, или вспоминаю хорошо забытое старое.

[etherreals]

Спасибо большое. Смысл понял. Буду пробовать решать задачки и заодно надо подучить клиентский javascript, так как без него большинство задач решить не смогу. Если будут вопросы, то обязательно спрошу. :)
Еще раз спасибо, вы хороший человек :)

Answer 3

[DarthJS]

Вот тебе практическое задание:
Сделай математическую игру.
1е окно варианты выбора игры: сложение, умножение, вычетание, делени, всё вместе, 3 уровня сложности.
2е окно (среднее) выводит рандомно пример, в зависимости от выбранного в 1м окне уровня, под которым будет форма ввода ответа
3е окно результат: сколько верных ответов и сколько ошибочных, а так же сколько правильных ответов в процентном соотношении.

З.Ы. Лично из моего опыта, видеоуроки то такое, мало от них толку. Разве что в чем-то загвоздка, можно попробовать посмотреть на эту тему урок, если хорошо обьясняют. А так лучше ищи либо придумывай примеры. Выше написали про to-do, сделай чисто для себя, будешь пользоваться им в дальнейшем походу дорабатывать, когда придет идея как это туду усовершенствовать.

Answer 4

[Keeprock]

1. Попытайтесь писать код без постоянно открытой документации или вообще оффлайн. Только Вы и Javascript :)

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

Интересная практика, попробуйте.

2. Берите большие проекты на GitHub, пытайтесь вникнуть в них и не бичуйте себя если не получается сразу.

Я потратил много времени и нервов, думая что обязан понять проект за 1 день. Я ведь такой умный, почему я не могу сделать _insert_small_fix_or_feature_here_?! Иногда это не ваше незнание, а просто проект большой и запутанный. Всему свое время, главное занимайтесь каждый день.

Answer 5

[Юрий Костин]

Учебник Ильи Кантора весьма хороший старт.
Если всё получается - проходите этот учебник дальше.
Очень много полезных вещей там узнаете.

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

Бывает крайне сложно придумать задачу самому себе.
Однако вам уже предложили хорошие варианты: игры, todo-приложение.
Также можете попробовать сделать простой плагин, который на входе получает строку и элемент. А результатом его работы будет эффект печатания переданного текста в переданном элементе.

На мой взгляд, будет полезно посмотреть, как делать плагины. На сайте jquery есть хороший туториал на эту тему. И на хабре полно статей.
Полено будет сразу делать некоторые вещи в ооп стиле. Например тот же todo.

Начинайте с простых вещей. Старайтесь доводить дело до конца.

У вас всё получится.

Answer 6

[raffavvs]

Решайте задачи. Я нашел крутой сайт c задачами по JS. javascript-tasks.ru

Все на русском языке

Answer 7

[BNA2002]

Рекомендую сайт Дмитрия Трепачева. Там можно найти много полезной практики по JS как и для новичков так и для продвинутых с решениями. old.code.mu

Answer 8

[Safort]

Лучше совмещать 2 и 3 варианты.
В качестве задачи возьми простую игру типа крестики-нолики, морской бой и т.д. Если создание игр пока не осиливаешь, попробуй простые приложения типа todo-листа, контакт-листа или того же калькулятора.

Comments

[etherreals]

Я так понимаю без клиентского javascript при создании данных игр тут тоже не обойтись?
Калькулятор пока не вышло сделать. Вот что получилось. codepen.io/anon/pen/OPpvvE
А дальше думаю надо клиентский javascript учить.

Можно поподробнее, что именно надо сделать? todo-листа, контакт-листа

Answer 9

[CoderMans]

learn.javascript.ru + прохождения домашних заданий на этом сайте

Answer 10

[leo_tkach]

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

Answer 11

[vasilymur]

Вот здесь есть отличные мини проекты на JavaScript: практика JS

Answer 12

[Василий М.]

Вставлю свои 5 копеек) Вот здесь доступен мой собственный курс по изучению JS, как раз для начинающих: https://stackdev.ru/courses/javascript