7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Front-End

Лучший способ изучения JavaScript

Scroll to top
Read Time: 9 mins
This post is part of a series called The Best Way to Learn... .
The Best Way to Learn PHP
The Best Way to Learn Python

Russian (Pусский) translation by Anton L (you can also view the original English article)

Изучение чего-то нового всегда является немного пугающим занятием. Для меня самая большая проблема во время обучения новому навыку - это то что я не знаю, чего я ещё действительно не знаю. В связи с этим, лучше составить план обучение, интересующего вас предмета. Вот об этом и будет данный пост: здесь вы найдёте схему, путеводитель, план действий по изучению JavaScript! Вам не придётся беспокоится о поиске надёжных ресурсов и пытаться решить для себя что же учить дальше. Вся нужная информация находится здесь. Просто продолжайте читать эту статью шаг за шагом.

Задание 0: поймите, что такое JavaScript и чем он не является 

JavaScript - это язык браузера.

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

JavaScript это не jQuery, Flash или Java. Это отдельный язык программирования.

JavaScript - это язык браузера (на сегодняшний день, необязательно лишь браузера). Его главное назначение - добавить интерактивности статическим страницам.  В браузере, он не заменяет PHP или Ruby. Он даже не заменяет HTML или CSS; вы будете использовать его в сочетании, вместе с этими языками. Также его не так проблематично учить, как вы возможно думаете или слышали где-либо.

Ещё одно небольшое примечание: вероятно, вам приходилось слышать о jQuery, самой популярной JavaScript библиотеке. Или вам довелось слышать о других известных JavaScript фреймворках, таких как Mootools, YUI, Dojo, и так далее. Какое они имеют отношение к JavaScript? Думайте о них, как о коллекциях JavaScript инструментов и функций; используя данные библиотеки, вы всё также пишете на JavaScript, на JavaScript с неким уровнем абстракции. Тем самым вы экономите большое количество усилий и времени.

Вероятно вам даже приходилось слышать, что изучение этого языка стоит начать именно с jQuery (или любой другой библиотеки), и только потом учить обычный JavaScript. Я не согласен с такой точкой зрения. Сначала стоит освоиться с JavaScript, а уже после использовать библиотеки. Таким образом у вас будет уверенное понимание того что вы делаете; в итоге качество вашего JavaScript кода будет гораздо лучше.

Задание 1: пройдите курсы на Codecademy.com

Codecademy появился относительно недавно, создатели сайта утверждают следующее - “самый простой способ научиться программировать”. Вам нужно будет в этом убедиться! На данный момент на сайте имеется всего два курса: “Начинаем изучать программирование” и “JavaScript быстрый старт.” Это отличный способ окунуться в воды JavaScript. Упражнения очень похожи на Try Ruby, вы пройдёте короткие уроки, при этом программируя в браузере и наблюдая за финальным результатом. Во время учебного процесса, зарабатывая очки и получая новые достижения.

CodeCademyCodeCademyCodeCademy

Если вы уже знакомы с другим языком программирования, пожалуй неплохой идеей будет начать с курса “JavaScript быстрый старт”; если же до этого вы не писали код (за исключением HTML и CSS), в таком случае “Начинаем изучать программирование” придётся, как нельзя кстати. Codecademy бесплатный, но вам нужно будет зарегистрироваться.

Задание 2: скринкасты на appendTo

Ребята с appendTo сделали потрясающую серию скринкастов, специально для начинающих. Если вы хотите изучить JavaScript правильным (и лёгким) способом, обязательно обратите внимание на данные уроки. Видео уроки всегда являются большим плюсом во время процесса обучения.

"Поднимите свои навыки владения JavaScript на следующий уровень с нашим новым учебным курсом. Никакой регистрации. Никаких уловок. Мы не шутим!"

Задание 3: прочитайте стоящее введение в JavaScript

Eloquent JavaScript

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

Ниже представлен набор хороших книг, в которых вы найдёте подробное введение в JavaScript:

  • Повторное введение в JavaScript (JS учебник) - это введение на официальном сайте Mozilla Developers Network, подробно описывает тонкости языка JavaScript. Тут вы найдёте много информации и примеров кода.
  • Выразительный Javascript - бесплатная книга написана Marijn Haverbeke, также вы можете приобрести печатное издание на Amazon. Книга предоставляет больше информации нежели введение на MDN, она покрывает не только сам язык JavaScript, но и описывает такие тонкости и аспекты, как стиль вашего кода и использование JavaScript в браузере. Слово “выразительный” в названии отнюдь не преувеличение.
  • Getting Good with JavaScript - Да, да, это моя собственная книга, но есть и другая причина почему я включил её в этот список. Она сильно отличается от других введения, которые я перечислил до этого; в ней я описал только те вещи, которые понадобятся вам, если вы хотите начать программировать, как можно скорее. Также к ней идёт шесть часов скринкастов, так что если вам нравятся скринкасты, не проходите мимо.  (И да, это платная книга)

Задание 4: установите и разберитесь с принципами работы Firebug (или инструментами разработчика)

FirebugFirebugFirebug

Как только вы начнёте работать с JavaScript в браузере, вам следует установить Firebug и ознакомиться с его функционалом. Firebug - это плагин для Firefox, поможет вам во время работы над созданием веб-страниц и их отладке: думайте о нём, как о хирургическом ноже веб-разработчика. Не пользуетесь Firefox? Предпочитаете Safari или Chrome? Нет проблем: для вас есть встроенные инструменты разработчика, очень похожие на Firebug.

На Mac вы сможете открыть панель инструментов разработчика, нажав Option + Command + I, на Windows или Linux нажмите Control + Shift + I.

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

Задание 5: прочитайте книгу

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

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

(Обратите внимание: в то время как все книги доступны на Amazon, я оставил ссылки на сайт издателя, там вы найдёте пробные главы, для ознакомления.)

  • Профессиональный JavaScript для веб-разработчиков - написана Nicolas C. Zakas, в этой книге есть всё необходимое. Если вам приходилось читать работы Zakas'а прежде, должно быть вы знаете, что он довольно тщательно подходит к освящению вопросов в своих произведениях. Помимо языка JavaScript, книга помогает понять особенностями JS в браузере.
  • JavaScript 24-hour Trainer - эта замечательная книга была написана Jeremy McPeak, работы Jeremy также можно найти на Tuts+. Это не только лишь книга: а также DVD с 4-мя часами видео-туториалов. Здесь вы найдёте 42 видео-урока, автор разберёт все аспекты языка, начиная от синтаксиса, заканчивая гайдлайнами и оптимизацией кода.

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

  • JavaScript Шаблоны - от автора Stoyan Stefanov. Я только что закончил читать эту книгу и теперь сильно сожалею, что не сделал этого раньше. После её прочтения вы узнаете, как организовать JavaScript код, очень важный навык, которым обладают не все JavaScript программисты.
  • JavaScript: Сильные стороны - написана Douglas Crockford. Эта маленькая книга объяснит, что хорошо, а что нет в языке JavaScript.

Задание 6: создайте что-нибудь

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

Что же вы можете создать? Вы можете сделать всё что угодно, но вот вам несколько идей:

  • Фотогаллерея: показывает набор фото-миниатюр, а также основное фото. Когда пользователь нажимает на миниатюру, ему показывается большая версия миниатюра (не сама картинка миниатюры), заменяя текущее основное фото. Приятным бонусом будет, если вы расположите поверх миниатюры заголовок с alt текстом, или создадите бесконечную цикл, на тот случай, если пользователь не нажимал на картинки в течении одной минуты.
  • To-do List: Возможно эта задача кажется вам непростой; но я не прошу сделать полнофункциональное to-do приложение. Просто сделайте поле для текста, рядом разместите кнопку; когда пользователь нажимает кнопку, введённый в поле текст становится пунктом в списке ниже. При нажатии на пункт в списке он должен удаляться. Звучит довольно просто, но есть несколько проблем, которые стоит решить, при реализации данной программы и над которыми вам, как начинающему, будет неплохо подумать.
  • Анимированный блок: работа над анимацией всегда была занятием не из легких, однако в данной задаче вам необязательно создавать сложные эффекты.  Добавьте div с текстом внутри и несколькими кнопками выше. Одна кнопка будет менять ширину, другая высоту, следующая кнопка будет менять фон блока. Самое главное, чтобы изменения происходили плавно, допустим, за одну секунду. Всегда помните - Google ваш друг, особенно если до этого вам не доводилось работать с анимациями в JavaScript.

Я уверен у вас есть и другие идеи, которые могут стать интересными проектами и неплохой практикой. Конечно вам придётся выйти из зоны комфорта - это единственный способ научиться чему-то новому.

Также обратите внимание на JavaScript категорию, здесь на Tuts+, где вы найдёте огромный список туториалов, неважно новичок вы или профессиональный разработчик.

Задание 6: начните изучать JavaScript библиотеку

Use a JS libraryUse a JS libraryUse a JS library

Если вы следовали всем заданиям в этой статье, на данном этапе вы скорее всего понимаете, что существуют определённые вещи, которые не будут работать как предполагается в каждом браузере, или задачи, которые очень сложно реализовать. Сложности вызывают: проекты требующие частого взаимодействия с DOM, AJAX и само-собой анимации. Тут-то нам и помогут JavaScript библиотеки.

Как я и говорил ранее, JavaScript библиотеки, призваны упростить работу над сложными задачами. Тем самым, пришло самое время взглянуть на одну из них. Выбор действительно огромен, решения с какой начать эксперементировать, я оставлю за вами. Будь-то jQuery или Mootools, YUI или Dojo, на сайте с описанием вы найдёте всё что нужно. Если вы чувствуете необходимость, воспользуйтесь одной из библиотек.

Самые популярные библиотеки

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

Задание 8: следите за активностью профессиональных разработчиков

Отложите все ваши текущие дела и подпишитесь на этих разработчиков. Я требую этого!

В интернете можно найти множество гениальных JavaScript разработчиков, которые каждый день создают что-то новое и интересное, что-то, что вы бы не хотели пропустить. К счастью наш, всегда бодрствующий, редактор Siddharth, создал список ”33 Разработчика на которых вы должны подписаться, будучи JavaScript зависимым." Отложите все ваши текущие дела и подпишитесь на этих разработчиков. Я требую этого!

Всегда можно найти ещё больше информации, если вам её недостаточно. На данном веб-сайте регулярно появляются новые посты о JavaScript, так что, оставайтесь с нами. Кроме этого, обратите внимание на JavaScript Show - подкаст о новинках в мире JavaScript. А также, я настоятельно советую подписаться на e-mail рассылку JavaScript Weekly.

Заключение

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.