Javascript с чего начать: первая программа, особенности языка, стандарты / Блог компании RUVDS.com / Хабр

by

Содержание

в какой последовательности изучать JavaScript

Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расскажем, как изучать JavaScript, и предоставим полезные ссылки.

JavaScript (JS) – нативный язык, база, а библиотеки и JavaScript фреймворки – все то, что уже «накладывается» сверху. Язык программирования JavaScript клиентский и выполняется на стороне браузера. Грубо говоря, вся нагрузка ложится именно на ПК пользователя, а не на сервер, как было бы в случае с PHP. Поэтому кривой скрипт также будет затрагивать напрямую клиента, а не сервер: хорошо для вас, да плохо для пользователя.

Подробнее о том, что такое JavaScript, вы сможете узнать из данного видео:

Не упускайте из виду JavaScript фреймворки, библиотеки и прочие инструменты.

  • jQuery – дополнительная библиотека, способная облегчить работу с XHR-запросами и селекторами.
  • Node.js представляет собой серверную вариацию JS.
  • Gulp – автоматизация работ (напр., по сборке проекта).
  • Webpack  заменяет собой и Gulp, и многие другие инструменты. Это сборщик модулей, который  позволяет собрать все js-файлы в необходимое кол-во пакетов, а также убедиться в правильности порядка собранных файлов.
  • Angular/Vue/React. Не нужно вестись на хайповые статьи вроде «Angular vs React». Хватит одного инструмента из трех перечисленных. Остальные – по мере необходимости.

Теперь давайте условимся: идеальной последовательности не существует. Все напрямую зависит от того, чем вы занимаетесь и на что ориентированы: фронтенд или 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, но мы предлагаем сперва ознакомиться с нашими статьями:

  1. Руководство для начинающих в Node.js
  2. Подборка бесплатных ресурсов для изучения Node.js

Далее посмотрите серию уроков Node.js от ITVDN:

Ребята излагают материал максимально доступно, так что никто не уйдет «обиженным» 😉

Менеджер пакетов, который входит в Node.js. Нужен, важен и нередко украшает требования вакансий. У Дмитрия Лаврика есть хорошее видео, разбирающее по косточкам npm в рамках основ:

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

6. Gulp

Исчерпывающий ответ на вопрос «Что это такое» дает Современный учебник JavaScript: Скринкаст по Gulp. Все выпуски скринкаста собраны в одном месте, что безумно удобно.

7. Webpack

За основой по Webpack вам на канал WebForMySelf:

Дополнительная информация по этому инструменту. Плохо с английским? Не вопрос: переведенный вариант.

8. Angular/Vue/React

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

Angular курс

Vue.js

Знакомство с React

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

Как выучить JavaScript с нуля: бесплатные курсы и сайты для изучения JS самостоятельно

В этой статье вы узнаете, как быстро и просто выучить JavaScript самостоятельно. Что учить в первую очередь, какие навыки нужны для получения работы. Получите обзор бесплатных курсов по языку Java Script и много другой полезной информации.

Содержание статьи:

Где используют язык JavaScript и для чего?

Java Script (Ява или Джава скрипт или сокращенно JS) – один из самых популярных языков программирования в мире. Чаще всего на нем создают интерактивные элементы на сайтах, с помощью которых сайты «оживают», начинают реагировать на действия пользователей. Примеры таких элементов:

Однако данный язык востребован не только в создании сайтов. Его используют для разработки прикладных программ, например, браузеров, приложений для SMART-телевизоров, фитнес-трекеров, умных часов, приставок, в макросах для офисных программ. Подробно о сфере применения Джава скрипт можно прочитать в описании профессии JavaScript-разработчика.

Зачем учить JavaScript? Преимущества языка для новичков

С чего начать изучение JavaScript и сколько времени это займет?

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

  1. Структура кода (как составляется программа, с чего начинается, в какой последовательности задаются команды и т.д.).
  2. Переменные (что это такое, для чего нужны, как задаются и используются в скриптах).
  3. Типы данных, например: число, строка, логический тип, и преобразование типов.
  4. Операторы, например, как производится сложение. Приоритет операторов (какие действия выполняются в первую очередь, какие – во вторую и т.д.). Бывают операторы сравнения, условные операторы, логические.
  5. Выучить, как использовать циклы (что это такое, для чего нужны, как их задавать). Говоря простыми словами, циклы позволяют производить одну и ту же операцию несколько раз (пока не наступит условие, которое завершит цикл).
  6. Функции.
  7. Объекты и их свойства.
  8. Прототипы, наследование.
  9. Классы и наследование классов.
  10. Интерфейсные события (обработка движения курсора, кликов мышки, нажатия кнопок на клавиатуре).
  11. Программирование элементов интерфейса: кнопок, форм и других.
  12. Выучить, как писать асинхронный код на JavaScript.
  13. Отладка программ в браузере, написанных на JS.
  14. Обработка ошибок.

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

Изучить основы можно самостоятельно, например, пользуясь самоучителем Learn.javascript.ru или Html5css.ru. На втором сайте курс интерактивный. Можно прямо в браузере смотреть пример кода и как он работает (какие события обрабатывает и как).

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

Для изучения JavaScript пригодится знание HTML и CSS. Если вы еще не знаете эти технологии, то освоить их можно на бесплатном курсе в Нетологии. На нем расскажут, что такое HTML-теги, для чего они нужны и покажут основные теги и их атрибуты.

В какой последовательности можно учить язык JavaScript?

1. Изучите основы языка. Список того, что нужно знать, описан выше. Все это можно выучить самостоятельно, пользуясь бесплатным учебником Learn.javascript.ru. Он написан на русском языке просто и понятно.

Если вам нужен наставник, то можно пойти на курсы. Например:

  • Курс по frontend-разработке в Нетологии – включает изучение JavaScript и других технологий, применяемых в разработке сайтов.
  • Курс по JavaScript в Geekbrains – включает не только обучение, но и стражировку в компаниях-партнерах, например, Майл.ру.

  • Fullstack-разработчик на JavaScript в Skillbox – посвящен исключительно одному языку программирования и позволяет изучить его на хорошем уровне с нуля.

2. Изучите библиотеки, например, jQuery и React. Это наборы готовых решений, которые можно использовать для ускорения работы. Нет смысла писать все скрипты с нуля, когда есть множество готовых решений.

3. Будет полезно изучить Node.JS – это технология расширяет область применения Джава-скрипт. Например, при помощи Node.JS можно создавать приложения и полноценные программы для ПК.

4. Освойте фрймворки, например, Angular и Vue.js. Фреймворк – это некая основа, фундамент, на котором можно создавать различные программы. Он включает набор готовых решений, на базе которых можно быстрее собрать ИТ-продукты (лендинг, сайт, интернет-магазин, приложение).

Например, фреймворк Angular используется для создания одностраничных приложений, Vue.js – для создания пользовательских интерфейсов.

5. Научитесь использовать системы контроля версий. Самая популярная из них — это GIT. О нем поговорим ниже.

6. Учитесь писать грамотный и правильно структурированный код.

Что такое GIT и для чего он нужен?

GIT – это система контроля версий. Она позволяет команде разработчиком совместно работать над кодом и при необходимости возвращаться к версиям программ, созданным ранее. Также GIT синхронизирует работу с сайтом, сохраняет и обновляет изменения в файлах со скриптами.

Эта система позволяет избегать ошибок и систематизировать работу над программным кодом. При необходимости можно быстро откатить изменения, если в программе нашлись баги (ошибки).

Бесплатные курсы и материалы для новичков

В этой части статьи на Kadrof.ru вы найдете видео, а также ссылки на обзоры бесплатных уроков и мастер-классов, которые помогут выучить JS с нуля. Вы сможете использовать их для самообучения.

1. Полный курс по Java Script для новичков. За 6 часов в этом видео простым и понятным языком описываются основы языка:

2. Что такое Node.JS: история создания, простейшие скрипты и основные возможности. Видео с канала Разработка от Яндекса продолжительностью 3 часа:

3. Еще один бесплатный урок по Node.JS, который можно посмотреть в том числе начинающим разработчикам:

4. Полный курс по React. Примеры и практика для новичков:

Также вы можете посмотреть бесплатные видео уроки, собранные в группе Клуб фриланеров, в том числе:

Где учиться программировать на JavaScript?

  1. Можно учиться самостоятельно по бесплатным урокам, которые есть в сети интернет. Этот вариант подойдет людям, которые уже сталкивались с веб-разработкой, имеют какой-либо опыт или сильное желание учиться. Выше в статье мы собрали ссылки на такие уроки, посмотрите их. Если вы решили учить JavaScript самостоятельно, постарайтесь системно подходить к освоению знаний.

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

Среди курсов можно выделить:

  • Fullstack-разработчик на JavaScript в Skillbox –данный курс посвящен верстке сайтов и программированию на JS. Осваивается язык, фреймворк (один на выбор – Vue, React или Angular), серверные технологии (Node.js). После обучения вы сможете не только работать с сайтами, но и создавать приложения на JS.
  • Курс по frontend-разработке в Нетологии. Уровень обучения – с нуля. Занятия проходят онлайн. Есть практика и диплом. Здесь вы освоите не только JS, но и библиотеку React, а также получите другие необходимые знания для работы front-end программистом. Если вы в дальнейшем хотите заниматься разработкой сайтов, этот курс для вас.

  • Обучение JavaScript в Geekbrains – здесь студенты проходят HTML, CSS, JavaScript, React, а также – основы баз данных и Node.js. Предусмотрена стажировка у партнеров.

Как быстро выучить JavaScript с нуля? Советы для новичков

  1. Старайтесь системно подходить к обучению. Если осваиваете Ява скрипт самостоятельно, то начинайте с основ, затем переходите к более глубокому материалу. Параллельно учите теорию. Что такое алгоритмы, какие они бывают и т.д.
  2. Постоянно практикуйтесь. Начинайте писать свои скрипты или переделывать или дорабатывать скрпиты других разработчиков (их можно найти в интернете). Старайтесь разобраться, как работает чужой код и как он сделан.
  3. Сделайте свой сайт, например, на WordPress и добавляйте на него различные функции. Это будет хорошей практикой.
  4. Если вам что-то не понятно, берите консультации программистов или заказывайте услугу code-review (проверку кода у опытного разработчика с комментариями, что нужно доработать, переделать и почему). Найти опытных разработчиков для code-review можно в каталоге веб-программистов на Kadrof.ru. Данная услуга стоит денег, поэтому заранее уточняйте у людей, которые согласятся проверить ваш код, сколько это будет стоить.
  5. Много полезной информации можно найти на сайте Хабр Q&A. Там общаются разработчики и в том числе можно попросить совет (бесплатно).

  6. На Kadrof.ru есть обзор сайтов для изучения языков программирования. Там вы найдете справочники и самоучители, которые помогут быстро освоить JavaScript.

Как наработать опыт и найти работу?

  1. В ИТ сфере принято тестировать кандидатов на работу. Поэтому в первую очередь для получения работы необходимы знания. Просматривайте вакансии на HH.ru и обращайте внимание, какие требования предъявляются работодателями. Какие технологии и на каком уровне необходимо знать. Изучив материал, приходите на собеседования. Если вас взяли, отлично. Если нет, спросите, каких знаний и навыков вам не хватило для получения работы и постарайтесь их быстро выучить. Затем снова приходите на собеседование.
  2. Ищите информацию о стажировках в крупных компаниях. Стажировка – отличный шанс получить опыт и затем работу. Подпишитесь на группу Клуб фрилансеров – в ней публикуется информация о стажировках и другие полезные новости для новичков.
  3. Посетите веб-студии, которые работают в вашем городе. Возможно, где-то требуется Junior разработчик на JS и вас возьмут на испытательный срок.
  4. Пока ищете работу, попробуйте подрабатывать на фрилансе, выполнять простые заказы на биржах или развивать собственный проект в интернете.
  5. Не переживайте, если сразу не получается найти работу. В ИТ не всегда просто новичкам, но по мере накопления опыта искать хорошие вакансии станет проще. Все когда-то начинали и проходили начальный этап.

  6. Общайтесь на форумах и сайтах для программистов. Вступайте в профильные группы в социальных сетях. Становитесь частью профессионального сообщества. Тогда найти работу станет проще.

Мы разобрались, как выучить JavaScript с нуля самостоятельно, что нужно осваивать в первую очередь и как быстро набрать опыт. Теперь вы готовы сделать первые шаги. Удачи вам в изучении JS и поиске работы!

Рекомендуем

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

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

Изучение JavaScript с нуля

Рассказ программиста о том, как добиться успехов в изучении JavaScript.

JavaScript – язык, на котором сегодня работает всё – от веб-приложений до мобильных приложений и серверов. Его популярность резко выросла за последние несколько лет, обойдя такие языки, как Java и PHP. Сейчас – наилучшее время для изучения JavaScript. Я расскажу, с чего началась моя история, что я изучил и как стать профессионалом в JavaScript.

Предыстория

JavaScript был создан Бренданом Эйхом в 1995 году. Брендан был принят в компанию Netscape Communication, задачей которой было сделать веб более динамичным. Через 10 дней, Брендан создал прототип языка, с синтаксисом, очень похожим на Java. Это был день рождения JavaScript.

В 1996, JavaScript был передан ECMA (Европейская ассоциация производителей компьютеров), чтобы зарегистрировать новый стандарт языка. Это привело к официальному выпуску ECMA-262. Несмотря на то, что JavaScript употребляется чаще, официальное название стандарта – ECMAScript.

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

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

Первые шаги

После моего первого знакомства с JavaScript, я решил составить план изучения языка:

1. Научиться учиться и запоминать простые вещи

2. Изучить основы JavaScript

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

4. Начать создание своих проектов.

5. Завести блог об изучении JavaScript

6. Научить других

Этот план я называю никогданекончающимся, что несложно заметить, взглянув на него. Я буду выполнять пункт за пунктом, но сначала я хотел бы вас предостеречь. Прежде чем приступить к изучению, вы должны понимать, что путь тернист. В какой-то момент вы придёте в отчаяние, главное не поддаваться ему, а продолжать работать. С этим сталкивались все, даже профессионалы. Эту часть обучения, нужно принять как должную.

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

Учитесь учиться

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

Написание технических текстов как способ обучения

В процессе обучения я записывал все свои достижения. Сделать это можно создав блог или любым другим удобным для вас способом. Если же публиковать свои достижения вы не считаете нужным, ведите записи на своём ПК. Результаты будут видны практически сразу, кроме того, способ помогает тренировать память. Это способствует пониманию пройденного.

Тесты на знание

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

Лучшим способом является использование карточек. Я использую Anki. В приложении можно создавать карточки по каждой пройденной теме. Выполнять тесты желательно регулярно, поэтому каждое утро я посвящаю 10-15 минут на их выполнение. Это помогает не только развивать память, но и запоминать, как правильно задавать вопросы.

Не торопитесь

Наихудшее время для обучения – когда вы чувствуете усталость. В такие моменты, главное не заставлять себя. Сделайте перерыв на несколько дней, когда будете готовы продолжайте обучение. Кроме того, я настоятельно рекомендую использовать метод помидора. Суть в том, чтобы 25 минут заниматься, и 5 минут отдыхать. Этот способ помогает повысить продуктивность.

Найдите ментора

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

Основы JavaScript

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

MDN’s JavaScript Guide — руководство охватывает всё необходимое, грамматику и типы, циклы, функции, выражения, числа и даты, форматирование и многое другое.

You Don’t Know JS — это серия книг Кайла Симпсона. Здесь содержится информация, которая поможет вам изучить язык более глубоко.

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

Free Code Camp — сообщество программистов, где вы будете участвовать в чемпионатах, создавать проекты и получать сертификаты. Способ подойдёт даже новичку, кроме того его можно совмещать с занятиями на других ресурсах.

CodeCademy — ещё одна платформа для обучения с помощью задач. Идеально для новичка.

В процессе обучения на этих ресурсах вы получите базовые знания, необходимые для программирования на JavaScript, после чего вы можете смело приступать к созданию своих первых программ и приложений. Когда вы почувствуете, что уже что-то понимаете, у вас появится мотивация для продолжения изучения JavaScript и любых других языков. Главное – не лениться.

Если вы чувствуете, что не можете самостоятельно справиться с проблемой, погуглите, обратитесь на форум Stack Overflow или просто спросите у ваших знакомых программистов. Всегда спрашивайте себя, для чего вы делаете что-то – «Для чего мне нужны циклы, когда проще использовать метод карт?», «Зачем мне JQuery, если можно обойтись без него?».

«Я знаю основы, что дальше?»

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

Справиться со стрессом мне помогла моя сила воли. Я понимал, что это поможет мне перейти на новый уровень.

Изучение новых вещей становится затруднительным, так как материал уже не такой лёгкий как прежде, но всё еще не настолько тяжёлый, чтобы бросать дело. Я занялся тестирования, шаблонов проектирования, структур JavaScript с помощью книг. Не все из тех книг, что я прочёл, помогли мне. Здесь я приведу список тех, что действительно оказались полезными:

Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript — в книге описываются 68 подходов для написания кода, к каждому автор приводит примеры. Вы узнаете, как подбирать стиль программирования для разных проектов, решать проблемы и многие другие аспекты программирования.

JavaScript — The Good Parts — несмотря на то, что книга порядком устарела, она всё ещё является отличным помощником. Книга научит вас писать красивый и эффективный код.

JavaScript Design Patters — в книге рассказывается о том, как применять современные шаблоны к языку. Написано всё простым языком.

Test-Driven JavaScript Development — одна из лучших книг, обучающих тестированию кода JavaScript.

Путь к профессии

Несмотря на то, что книги дают значительный объем знаний, нужно уметь применять их на практике.

Человека нельзя назвать кузнецом своего дела, если он знает всё, но ничего не умеет. То же самое с программированием. Если вы не практикуетесь, вы ничего не получите. Так что мой совет – учитесь и практикуйтесь одновременно. Не стоит волноваться по поводу того, что ваш код не будет идеальным. Главное – практика. Создайте аккаунт на GitHub, пишите код ежедневно, сделайте это одним из пунктов распорядка дня. Когда вы создадите свой проект, поделитесь с сообществом и ждите отзывов. Обратная связь, особенно если это мнение аргументированно, дорогого стоит. В процессе работы над проектом, вы приобретёте навыки, которые помогут вам не только в программировании, но и в других делах.

Человека нельзя назвать кузнецом своего дела, если он знает всё, но ничего не умеет.

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

Не переставайте учиться

Теперь, когда вы обладаете солидным набором знаний и умений, время перейти к следующей проблеме – как оставаться на плаву. Поток информации бесконечен. Чтобы быть в курсе, я подписался на несколько изданий – JSK Daily, Frontend Buzz, JavaScript Weekly, JavaScript World, Hashnode Times. Это помогает мне узнавать про новые события, обновления. Это не занимает много времени. Я читаю новости после работы или во время перерывов. Наиболее интересные мысли и статьи я сохраняю в Trello или на GitHub. Если меня заинтересовала новая технология, я выделяю время для изучения.

Кроме того, я ежедневно просматриваю видеоуроки.

Как преодолеть разочарование

Как я уже говорил, каждый разработчик, вне зависимости от его опыта прошёл период неудач. Программирование – это бесконечное решение проблем. Иногда, для того, чтобы решить какую-либо проблему, нужно время. Так что это важно уметь работать, несмотря на неудачи.

Если вы чувствуете, что пора сделать перерыв – сделайте его. Займитесь чем-нибудь более прикладным, занимайтесь спортом, отдохните с друзьями. Разнообразьте свою жизнь, а когда почувствуете, что отдохнули, возвращайтесь к работе. У вас появится заряд энергии и мотивации. У меня было несколько фаз, когда мне требовался отдых. После него я чувствовал себя лучше.

Что я изучил

Ниже я приведу несколько важных советов, которые пригодятся в процессе изучения.

Научитесь правильно искать

Это может показаться излишним, но это действительно важно. Умение задавать правильные вопросы поможет в процессе работы. Задавайте прямые, простые вопросы. Не доверяйте первому попавшемуся ответу. Исследуйте вопросы глубже, чем вам на данный момент.

Научитесь задавать правильные вопросы и выбирать правильное время

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

Помогайте другим

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

Заключение

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

как написать JavaScript — руководства на Skillbox

Если бы для интернета писали Библию, она начиналась бы так:

Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.

Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.

Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.

Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.

Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».

Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.

Нас пока интересуют только браузеры и HTML-странички.

Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.

Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.

WScript.echo («Привет, Skillbox!«)

Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.

Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами <script> и </script>. Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.

Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.

Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.

<html>
   <script>
      alert(«Привет, Skillbox«)
   </script>
</html>

Результат:

В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.

Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.

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

<html>
   <script>
      confirm(«Привет, Skillbox«)
   </script>
</html>

Результат:

Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.

Синтаксис здесь такой:

prompt (сообщение, значение_поля_ввода_данных)

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

Код:

<html>
   <script>
      prompt(«Передай привет Skillbox«, «Привет«)
   </script>
</html>

Результат:

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

Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.

Консоль разработчика в Chrome.

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

Для начала можно рекомендовать один из легких редакторов:

В будущем есть смысл присмотреться к IDE:

Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.

Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.

Курс «JavaScript с нуля»

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

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Учебный план по осваиванию современного JavaScript

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

Как наверняка и каждый из вас, я недавно прочел статью Хосе Агуинаги: «Каково это, учить JavaScript в 2016»
Конечно, эта статья расшатывает нервишки: я дважды видел её в топе на Hacker News! Это так же была самая популярная статья на /r/javascript, а на данный момент она насчитывает более 10 000 лайков на Medium, что как бы больше, чем собрали все мои посты вместе взятые… Ну а впрочем, кто считает эти лайки, верно?

Меня это не удивило, я уже давненько знаю, как может обескуражить экосистема JavaScript. На самом деле, я запустил State Of JavaScript, чтобы понять, какие библиотеки были на самом деле популярны и, как следствие, выделить полезные из общей массы.

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

Для чего это нужно

Эта программа для вас, если:
* вы уже знакомы с основными концептами программирования, как например, переменные и функции
* вы уже занимались back-end разработкой используя, скажем, PHP и Python, и, возможно, использовали front-end библиотеки, такие как jQuery, для каких-то мелких задач
* вы хотите серьезно вникнуть во front-end разработку, но уже тонете в фреймворках и библиотеках, еще даже не начав ею(разработкой) заниматься

Темы, которые мы затронем

* Как выглядит современное веб-приложение на JavaScript
* Почему нельзя «просто использовать jQuery»
* Почему React — это самый надежный выбор
* Почему сначала может не понадобиться углубленное изучение JavaScript
* Как быстро выучить синтаксис ES6
* Зачем и как быстро выучить Redux
* Что такое GraphQL и почему это реально крутая вещь
* Куда двигаться дальше

Упомянутые ресурсы

Эта статья содержит несколько партнерских ссылок на Wes Bos курсы, но я рекомендую этот материал, потому что действительно считаю, что он стоящий, а не только из-за партнерства. Если вы предпочли бы другие ресурсы, Марк Эриксон поддерживает большой список ссылок на руководства по React, ES6 и Redux.

JavaScript vs JavaScript

Перед тем как мы начнем, нам нужно убедиться, что мы говорим об одном и том же. Если вы загуглите «Выучить JavaScript» или «Учебный план по JavaScript», то вы наверняка найдете горы ресурсов, которые помогут вам выучить этот язык.
Но это, в принципе, легкая часть. Пока вы будете неотступно копать вглубь и учить все сложности языка, правда будет заключаться в том, что большинство веб-приложений относительно просто написаны. Другими словами, 80% того что вам понадобится для написания веб-приложений, будет описано в первых главах каждой типичной книги по JavaScript.

Нет, самое сложное – это освоить экосистему JavaScript, со всем её множеством друг другу противоречащих фреймворков и библиотек. Хорошая новость! Эта статья как раз таки об этом!

Строительные блоки JavaScript приложений

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

1. База данных отсылает данные на ваш back-end (например ваше приложение на PHP или Rails)
2. Back-end считывает данные и выводит HTML
3. HTML отправляется в браузер, который и отображает его как DOM(собственно, сама страница)(Document Object Model — прим. переводчика)
Сейчас много таких приложений посыпают JavaScript—кодом прямо в клиенте, чтобы добавить взаимодействие с пользователем — модальные окна и табы, но в своей основе, браузер все равно получает HTML и отображает его.

А теперь давайте сравним его с «современным» веб-приложением 2016 года (также известным как «Приложение одной страницы»):

Заметили разницу? Вместо HTML, сервер отныне шлет данные, а построение HTML на основе данных происходит уже на стороне клиента (поэтому вы так же посылаете код, который говорит клиенту, как нужно преобразовать это построение).

У этого есть свои последствия.
Сначала хорошие:
* Для данного типа контента, посылать только данные гораздо быстрее, чем посылать целые HTML страницы
* Клиент тотчас же может менять контент, даже не обновляя страницу браузера (отсюда и название «Приложение одной страницы»)

И плохие:
* Начальная загрузка занимает больше времени, когда количество данных растет
* Теперь надо найти место для хранения и управление данными на стороне клиента тоже, в случае, если вы хотите кэшировать их или проверить

И неприятные:
* Поздравляю! Теперь вам придется возиться с клиентской частью не меньше, чем с серверной

Клиент-серверный спектр

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

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

Правда в том, что большинство веб-приложений остаются где-то между. Знать бы где…
Но хорошо то, что спектр наш не бесконечный: вы не можете начать с чисто-серверной стороны и потихоньку двигаться в сторону чисто-клиентской стороны приложения. В какой-то момент (в момент, так называемого «разделения»), вам придется насильно остановиться и рефакторить все что вы написали или просто оставить массу неподдерживаемого спагетти-кода (это особенно опасный и специфический вид плохого кода — прим. переводчика).

Вот почему нельзя «просто использовать jQuery» для всего подряд. Вам наверное кажется, что jQuery — это скотч. Безусловно, это потрясающая вещь для решения маленьких проблем, но если вы решаете им все больше и больше проблем, код начинает выглядеть отвратительно.

С другой стороны, современные JavaScript фреймворки больше похожи на 3D-печать. Их использование занимает больше времени, но результат выходит гораздо приятнее и красивее.

Другими словами, осваивать современный JavaScript-стэк равносильно ставке, где стартовая планка неважна. Большинство веб-приложений, вероятнее всего, сделают свое дело на правой(клиентской) стороне разделения. Рано или поздно.

Неделя №0: Основы JavaScript

Если вы back-end разработчик, вы скорее всего пробовали JavaScript. А если нет, то С-подобный синтаксис будет вам и так понятен, если вы PHP или Java разработчик.

Но если JavaScript — это что-то совершенно неизведанное для вас, не отчаивайтесь. На просторах сети есть много ресурсов, которые быстренько помогут вам разобраться. Уроки по JavaScript от Codecademy — отличное начало!

Неделя №1: Начинаем учить React

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

Конечно с изучения React!

React — это UI-библиотека, разработанная и выложенная в открытый доступ компанией Facebook, она берет на себя ответственность за преобразование данных в HTML.

Не поймите меня неправильно, я не могу утверждать, что React — это лучшая библиотека (так как это очень субъективно), но могу смело утверждать, что она очень хороша.

* React может и не самая популярная библиотека, но она достаточно популярна
* React может и не самая легкая библиотека, но она достаточно легка
* React может и не самая простая библиотека, но она достаточно проста в изучении
* React может и не самая приятная для изучения библиотека, но она достаточно приятна

Другими словами, React может быть не самым лучшим выбором в любой ситуации, но я уверен, что он самый надежный. И поверьте мне, начало — это не лучшее время для того, чтоб рисковать при выборе технологии.

Также React научит вас некоторым основным концептам, таким как: компоненты, состояние приложения и функции без состояния, которые позже могут оказаться очень полезными, вне зависимости, какой фреймворк или какую библиотеку вы выберете в конечном итоге.

Наконец, у React есть обширная экосистема других библиотек, которые отлично работают с ним в связке. И его популярность говорит о том, что вы всегда сможете найти помощь на таких сайтах, как StackOverflow (или GitHub — прим. переводчика).

Я лично рекомендую курс Wes Bos — React для новичков. Именно с помощью него я лично выучил React, а он к тому же ещё и полон лучших практик для React.

Стоит ли сначала углубленно учить JavaScript?

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

На этот вопрос нет четкого ответа «да» или «нет», он просто зависит от вашего стиля обучения. Правда в том, что большинство руководств и уроков по основам React будут использовать лишь крохотную долю языка JavaScript. Так что это прекрасная идея — сосредоточится на том что нужно сейчас и оставить все остальное на потом. Это так же относится и ко всей JavaScript экосистеме. Не стоит сейчас переживать о том, что вы не знаете такие вещи, как Webpack или Babel. К тому же, недавно React обзавелся своей собственной утилитой командной строки, которая позволяет вам создавать приложения, без какой-либо конфигурации его сборки.

Неделя №2: Ваш первый проект с использованием React

Давайте предположим, что вы уже завершили курс по React. Если мы с вами похожи, то две вещи, скорее всего, будут правдивыми:
* Вы уже успели забыть половину того что выучили
* Вы уже ждете не дождетесь, применить свою вторую половину полученных знаний на практике

Мне кажется, что лучший способ выучить фреймворк или язык — это использовать его. И внедрять что-то новое в свои собственные проекты — это лучшее что можно придумать, чтобы освоить это «что-то новое». Ваш личный проект может быть каким угодно: от одностраничного веб-сайта до сложного веб-приложения, но у меня есть ощущение, что редизайн своего веб-сайта и есть та золотая середина, с которой стоит начать. К тому же, я знаю, что вы, возможно, не обращали внимания на него(свой веб-сайт) уже долгое время.

Ранее я говорил о том, что использование приложений одной страницы со статичным контентом может быть излишним, но у React есть секретное оружие — Gatsby, статичный генератор сайтов для React, который позволяет вам «схитрить» и получить все преимущества React, безо всех отрицательных сторон.

Вот, почему Gatsby — это отличный выбор:
* Предварительно настроенный Webpack, а это значит, что вы получаете все преимущества, не получая головной боли
* Автоматическая маршрутизация, основанная на структуре вашей директории
* Весь HTML-контент также генерируется на стороне сервера, так что вы получаете только самое лучшее с обеих сторон
* Статичный контент означает отсутствие сервера и возможность чрезвычайно просто опубликовать свой веб-сайт на GitHub Pages

Именно Gatsby я использовал для написания State Of JavaScript, не волнуясь за маршрутизацию, конфигурацию инструментов сборки или рендеринга на серверной части. Это сэкономило мне море времени.

Неделя №3: Осваиваем ES6

В моей попытке выучить React, я дошел до того момента, когда я мог просто копипастить код из примеров, но также было ещё много того, что я не понимал.
В частности, я был не знаком с такими, недавно пришедшими к нам из ES6 особенностями, как:
* деструктуризация объектов
* классы
* стрелочные функции
* операторы расширения

Если у вас такая же ситуация, то нужно немного времени, чтоб освоить ES6. Если вам понравился курс React для новичков, то вам наверное не терпится уже пройти отличный курс ES6 для каждого от Wes Bos. Или, если вы предпочитаете бесплатные ресурсы, то вам стоит прочесть книгу Nicola Bevacqua — ES6 на практике. Хорошим упражнением для освоения ES6, было бы пройтись по старому коду (например, по тому, что мы писали во второй неделе) и сконвертировать его в более короткий с помощью ES6.

Неделя №4: Открываем для себя управление состояниями

На этом этапе вы уже должны уметь создавать простой front-end со статичным контентом с помощью React. Но настоящие веб-приложения не статичны. Они должны получать откуда-то данные, из какой-нибудь базы данных, скажем. До этого мы могли просто отсылать данные отдельным компонентам, но такой подход предшествует беспорядку.

Что если два компонента должны будут отобразить одни и те же данные, к примеру? Или нуждаются в обмене информацией? Вот тут-то и приходит на помощь управление состояниями. Вместо того чтобы хранить ваше состояние(т.е. данные) в компоненте, вы оставляете его в глобальном хранилище, которое в нужный момент посылает его(состояние) к вашим React-компонентам:

В мире React, самая популярная библиотека для управления состояниями называется Redux. Она не только помогает собрать воедино все ваши данные, но также и предлагает нам некоторые протоколы для управления этими данными.

Можно сравнить Redux с банком: вы не можете обратиться к локальной ветке и изменить ваш текущий баланс («а добавь-ка мне тут парочку нулей!»). Вместо этого, вы заполняете форму, передаете её работнику банка, у которого есть права на исполнение вашего требования. Так же, Redux не даст вам изменить глобальное состояние напрямую. Вместо этого, вы пускаете в ход редукторы — специальные функции, которые проводят операции и возвращают новое, обновленное состояние, как результат.

Результат этой дополнительной затраты времени — это высокостандартизированный и поддерживаемый поток данных в вашем приложении и доступ к таким инструментам, как Redux Devtools, для визуализации этих данных.

Опять таки, вы можете обратиться к нашему другу Wes Bos и выучить Redux с помощью его курса, который, кстати, абсолютно бесплатный.
Или же вы можете посмотреть серии видеоуроков на egghead.io от создателя Redux, которые также бесплатны.

Бонусная неделя №5: Конструирование API с GraphQL

До сих пор мы много говорили о клиентской части приложения, но это только полдела. И даже не погружаясь в глубины экосистемы Node, все равно необходимо рассмотреть один из ключевых аспектов любого веб-приложения: как данные переходят от сервера к клиенту. Как и всё остальное, эта часть разработки со временем очень шустро меняется. GraphQL (еще один open-source проект от Facebook) предлагает серьезную альтернативу традиционным REST API.

В то время, как REST API использует несколько REST маршрутов, каждый из которых предоставляет доступ к уже заранее определенным данным (скажем, /api/posts, /api/comments итд.), GraphQL использует один пункт назначения, позволяющий пользователю запрашивать нужные ему данные. Подумайте об этом, как о многочисленных походах в булочную, за молочными продуктами, за мясом и рыбой отдельно, вместо того, чтоб дать кому-то свой список покупок и послать его купить все за раз.

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

За последний год, GraphQL неплохо нашумел, а многие проекты (такие, как Gatsby) планируют адаптироваться под него. Сам по себе GraphQL — это протокол, но лучшая его реализация на данный момент, это, наверное, библиотека Apollo, которая, к тому же, отлично работает с Redux. К сожалению, до сих пор чувствуется недостаток материала по GraphQL и Apollo, но, надеюсь, документация Apollo введет вас в курс дела.

По ту сторону React

Я рекомендовал вам начать с React, потому что это надежный выбор, но это ни в коем случае не означает, что это единственный хороший front-end стэк. Если вы хотите продолжать развиваться, то вот вам два совета:

Vue

Vue — это относительно новая библиотека, но её популярность растет с рекордной скоростью и она уже адаптирована большими компаниями, особенно в Китае, где эта библиотека используется в Baidu и Alibaba (китайский Google и Amazon). А ещё это официальный front-end слой для PHP фреймворка Laravel.

В сравнении с React, вот некоторые хорошие черты Vue:
* Официально поддерживаемые маршруты и библиотеки для управления состояниями
* Фокусирование на производительности
* Порог вхождения ниже, благодаря использованию шаблонов, основанных на HTML

Остается всего 2 вещи, благодаря которым все ещё существует отрыв React от Vue, это: размер экосистемы React и React Native. Но я не удивлюсь, если вскоре увижу Vue с React наравне.

Elm

Если Vue — это доступный выбор, то Elm — передовой. Elm — это не просто фреймворк, а целый язык, который компилируется в JavaScript. Это дает много преимуществ, таких как: повышенная производительность и отсутствие исключений во время выполнения задачи.

Я лично не пробовал Elm, но мне его очень рекомендовали друзья, которые были безумно рады, что открыли его для себя (как показывает рейтинг — 84% положительных отзывов на State Of JavaScript).

Что дальше?

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

Но это не значит, что все кончено! Это только начало вашего пути по экосистеме JavaScript. Может быть вам будут интересны и следующие темы:
* JavaScript на сервере (Node, Express…)
* Тестирование на JavaScript (Jest, Enzyme)
* Инструменты для сборки (Webpack…)
* Система типов (TypeScript, Flow…)
* Работа с CSS в ваших JavaScript-приложениях(CSS Modules, Styled Components…)
* JavaScript для мобильных приложений(React Native…)
* JavaScript для приложений для настольных компьютеров(Electron…)

Я не могу выписать здесь всё, но не отчаивайтесь! Первый шаг всегда самый сложный, и знаете что? Вы его уже сделали, прочитав этот план. Теперь вы понимаете, как разнообразные кусочки экосистемы подходят друг к другу, теперь ваша задача лишь понять, что вы хотите учить дальше и осваивать новую технологию каждый месяц!

Будьте на связи

Вам помог этот учебный план? О какой области из JavaScript вы хотели бы услышать ещё? Оставьте свой комментарий! А также, подпишитесь на рассылку писем от State Of JavaScript.

Как и где учить JavaScript c нуля бесплатно в 2020 году

Автор статьи: admin

Метки: JavaScript / Новичку

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

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

С чего и где начать учить JavaScript:

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

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

Там вы научитесь всему самому основном, что нужно знать и даже больше, поэтому стоит начать обучение с него, в целом вы его за месяц, может два, сможете изучить.

Практика:

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

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

Изучение фреймворка:

После того как вы будите на достаточно хорошем уровне работать с JavaScript, можете начать изучать какой нибудь фреймворк, например, Vue.js, React.js или Angular.js, для этого используете их стандартные справочники на официальных сайтах.

Также ещё можете изучить JQuery, но его стоит учить зависимо от ваших потребностей, решить это, стоит ли учить его или нет, поможет статья: Стоит ли учить JQuery в 2020 году.

Какой язык учить после JavaScript:

Когда вы выучили работу с любым JS фреймворком, то вам надо начать работать со серверным языком программирования, или с языком beck-end.

Тут порекомендую два языка, PHP и Python, первый для тех, кто хочет максимально быстро и просто начать работать с beck-end, так как он на мой взгляд достаточно простой язык, также на нём работает большинство популярных CMS систем, например, WordPress или OpenCart, как изучать PHP, можете посмотреть здесь, второй же, подойдёт тем, кто хочет максимальную скорость своих программ, но его будет сложнее и дольше учить, так как, вам сначала надо понять сам язык, а потом ещё фреймворк.

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

Вывод:

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

Рекомендации:

Когда вы уже выучите всё выше перечисленное и не захотите учить отдельный язык программирования для beck-end, то тогда приступайте к изучению Node.js, благодаря ему вы сможете делать beck-end на JS.

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

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 1
Средняя оценка: 5,00

Загрузка…

Также рекомендую:

Как изучать и использовать JavaScript с удовольствием: нюансы разработки

От автора: еще пару месяцев назад я не мог смотреть на JS без нервов. Я на 100% устал от JS и не мог выйти из этого состояния. Оно продолжалось много лет. Сегодня я люблю использовать JavaScript и его экосистему. Что произошло?

Я использовал JS в той или иной форме с 90-ых. У меня есть книги, которые сейчас смотрятся довольно смешно. В них полно выражений document.write.

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

Я нашел комментарий в популярной статье «Modern JavaScript Explained For Dinosaurs». Там говорилось, что «изучать современный JS очень сложно, если не делать это с самого начала»:

«Я бы сказал, что учить с самого начала (да, я «такой» старый) еще сложнее —  Tim Tate»

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В 2012 я серьезно погрузился в JS и Node.js. ES6 для меня стал самым большим изменением в языке за все время, я такого раньше не видел. Предыдущее большое изменение было в 2009 с ES5. ES6 буквально все изменил. Это было настолько крупное обновление JS, что каждый день было столько много новых фишек, которые могли попасть в спецификацию, но вы не знали, попадут они или нет. И приходилось наверстывать упущенное, пока все в Twitter обсуждали, что же будет следующим крупным нововведением.

Var ушел в прошлое.

Function больше нет.

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

И это было только начало.

Построение всего

Один из больших сдвигов – построение.

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

Когда подошло подкрепление Babel, поначалу я сражался еще жестче. Но все же в конце я поднял белый флаг и присоединился к врагу.

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

Когда ES2017 будет полностью поддерживаться в браузерах, Babel разрешит ES2018, ES2019 и т.д. Выхода нет. Прими будущее, Babel – твой друг.

Используйте простейшие альтернативы

Инструменты – одна из сложнейших частей JS сейчас. Да, можно изучить вдоль и поперек Webpack, но если начнете, игнорируйте все и используйте готовые решения типа create-react-app, React Boilerplate, которые прячут мелкие детали от вас и позволяют сосредоточиться на коде.

Не начинайте с настройки окружения, учите с помощью Glitch: в изучении современного JS нет простейших тем.

Больше никаких огромных релизов

ES6 был настолько большим, что комитет ECMAScript решил делать релизы поменьше. Вот почему ES6 также называют ES2015, это был первый релиз с годом – теперь релизы будут выходить каждый год. Так легче изучать что-то. Будет меньше изменений, так как время их введения ограничено, и это предсказуемо (сдавайтесь, грядут изменения).

Игнорируйте шум

Если вы похожи на меня, вы фоловите в Twitter много людей, которые всегда находятся на самой передовой. Может быть, следующим трендом станут некие лидеры, которые будут диктовать свои мысли. Говорят использовать Х, все используют Х.

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

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

Новые фреймворки не выходят каждую неделю

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

Но что-то большое зачастую мало что меняет.

React 5 лет.

Vue 4 года.

4 года – очень много в IT. Это стабильные технологии. Учите их, они останутся надолго, слишком надолго (и не уйдут).

«У вас полно времени, чтобы стать экспертом в любом из этих фреймворков. В ближайшее время они никуда не уйдут.»

Примите тот факт, что все приходит и уходит

У всего есть жизненный цикл.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Пару лет назад везде использовали jQuery. Сейчас на нем редко начинают новые проекты.

В 2013 был популярен Backbone.js. Сейчас он пропал.

CoffeeScript стерли с лица земли.

Ember.js, Angular.js и Meteor выстрелили и держатся в топе несколько лет. Сейчас больше всего говорят за React, Vue и Angular (это не Angular.js).

Цикл таких основных фреймворков длится пару лет. У меня все еще много приложений на Ember.js, и все они хорошо работают. Если они работают, их не нужно обновлять. Я не планирую трогать их.

«Технология развивается и созревает. После о ней уже не говорят, ее используют.»

Вы не так глупы, чтобы использовать jQuery

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

Программирую на PHP уже долгое время, привык к нему. Нормально, что люди критикуют что-то популярное. Даже Go иногда критикуют за простоту, хотя в этом и фишка. Всегда найдутся такие люди.

В качестве примера процитирую твит Pieter Levels, который построил огромный независимый бизнес на одном PHP файле. Почитайте комментарии.

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

Не слушайте их.

Помните: если для вас это работает, это правильный стек.

«Если для вас это работает, это правильный стек.»

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

Сейчас, скорее всего, вам не нужен jQuery. Но не вместо фреймворка – обычный JS очень хорош.

Другой важный момент – чрезмерное усложнение. Не используйте технологию просто, чтобы казаться умнее. Узнайте ее получше. Узнайте, когда фреймворк или библиотека помогут вам.

Вам не нужно знать все. Найдите баланс

Это может прозвучать как цитата из Twitter, но никто не знает всего. Никто не может выучить все, что сейчас происходит во front end разработке. Это вечная школа. Закончить ее не удастся.

Изучайте технологии с user-friendly документацией

Не случайно у React и Vue такая хорошая документация.

Это ключевая часть успеха.

JavaScript снова изменится

В прошлом году язык ECMAScript представил await/async. Сейчас они очень часто используются. Код на Promise выглядит просто ужасно, вы захотите все переписать.

vНо не делайте этого, лучше используйте новые функции под новый код.

То же самое будет в этом году с ES2018. Все поговорят о нем какое-то время, а потом вернутся к работе и начнут говорить о функциях ES2019.

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

Учите основы и ищите свой путь

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

Иногда вам хватит и 20% потраченного времени на 80% новых функций, не углубляясь в крайние случаи.

Путешествие только началось

По сравнению с другими языками JS все еще молод. Он очень популярен и за последние пару лет ему удалось сильно измениться. Язык каждый день привлекает много талантливых разработчиков. Удивительно представить, как мы будем писать через 10 или 20 лет.

Автор: Flavio Copes

Источник: https://hackernoon.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

JavaScript Куда

Тег .

Пример

Попробуй сам "

В старых примерах JavaScript может использоваться атрибут типа:

Веб-страница


Абзац



Попробуй сам "

JavaScript в

В этом примере функция JavaScript помещается в раздел страницы HTML.

Функция вызывается (вызывается) при нажатии кнопки:

Пример


Веб-страница


Абзац



Попробуй сам "

Размещение скриптов внизу элемента улучшает отображение скорость, потому что интерпретация сценария замедляет отображение.

Внешний JavaScript

Скрипты также можно размещать во внешних файлах:

Внешний файл: myScript.js

function myFunction () {
document.getElementById ("демонстрация"). innerHTML = "Абзац изменен.";
}

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

Файлы

JavaScript имеют расширение .js .

Чтобы использовать внешний сценарий, поместите имя файла сценария в атрибут src (источник) тег

Внешние ссылки

На внешние скрипты можно ссылаться с помощью полного URL-адреса или пути относительно текущего веб-сайта. страница.

В этом примере для ссылки на скрипт используется полный URL:

Пример

Попробуйте сами »

В этом примере используется сценарий, расположенный в указанной папке на текущем веб-сайте. сайт:

Этот пример ссылается на сценарий, расположенный в той же папке, что и текущая страница:



.

операторов JavaScript

Пример

Присвойте значения переменным и сложите их вместе:

var x = 5; // присваиваем значение 5 х
var y = 2; // присваиваем значение 2 по
var z = x + y; // присвоить значение 7 переменной z (x + y)

Попробуй сам "

Оператор присвоения ( = ) присваивает значение переменной.

Оператор сложения ( + ) добавляет числа:

Оператор умножения ( * ) умножает числа.

Арифметические операторы JavaScript

Арифметические операторы используются для выполнения арифметических действий с числами:

Оператор Описание
+ Дополнение
– Вычитание
* Умножение
** Возведение в степень (ES2016)
/ Дивизион
% Модуль упругости (остаток от деления)
++ Прирост
– Декремент

Арифметические операторы полностью описаны в JS Арифметика глава.

Операторы присваивания JavaScript

Операторы присваивания присваивают значения переменным JavaScript.

Оператор Пример То же, что
= х = у х = у
+ = х + = у х = х + у
- = х - = у х = х - у
* = х * = у х = х * у
/ = х / = у х = х / у
% = x% = y х = х% у
** = х ** = у х = х ** у

Оператор присваивания сложения ( + = ) добавляет значение к переменной.

Операторы присваивания полностью описаны в Глава JS Assignment .

Строковые операторы JavaScript

Оператор + также может использоваться для добавления (объединения) строк.

Пример

вар txt1 = "Джон";
вар txt2 = "Лань";
вар txt3 = txt1 + "" + txt2;

Результат txt3 будет:

Джон Доу

Попробуй сам "

Оператор присваивания + = также может использоваться для добавления (объединения) строк:

Пример

вар txt1 = "Как хорошо";
txt1 + = "хороший день";

Результат txt1 будет:

Какой прекрасный день

Попробуй сам "

При использовании со строками оператор + называется оператором конкатенации.

Добавление строк и чисел

Сложение двух чисел вернет сумму, но добавление числа и строки вернет строку:

Пример

вар х = 5 + 5;
вар у = «5» + 5;
вар z = «Привет» + 5;

Результат x , y и z будет:

10
55
Привет5

Попробуй сам "

Если вы сложите число и строку, результатом будет строка!

Операторы сравнения JavaScript

Оператор Описание
== равно
=== равного значения и равного типа
! = не равно
! == не равно значение или не равно тип
> больше
< менее
> = больше или равно
<= меньше или равно
? тернарный оператор

Операторы сравнения полностью описаны в Сравнение JS, глава .

Логические операторы JavaScript

Оператор Описание
&& логический и
|| логический или
! логическое не

Операторы типов JavaScript

Оператор Описание
тип Возвращает тип переменной
экземпляр Возвращает истину, если объект является экземпляром типа объекта

Побитовые операторы JavaScript

Битовые операторы работают с 32-битными числами.

Любой числовой операнд в операции преобразуется в 32-битное число. Результат конвертируется обратно в число JavaScript.
Оператор Описание Пример То же, что Результат десятичный
и И 5 и 1 0101 и 0001 0001 1
| ИЛИ 5 | 1 0101 | 0001 0101 5
~ НЕ ~ 5 ~ 0101 1010 10
^ XOR 5 ^ 1 0101 ^ 0001 0100 4
<< Нулевой сдвиг влево 5 << 1 0101 << 1 1010 10
>> Подпись правая смена 5 >> 1 0101 >> 1 0010 2
>>> Нулевой сдвиг вправо 5 >>> 1 0101 >>> 1 0010 2

В приведенных выше примерах используются 4-битные беззнаковые примеры.Но в JavaScript используются 32-битные числа со знаком.
Из-за этого в JavaScript ~ 5 не вернет 10. Он вернет -6.
~ 00000000000000000000000000000101 вернет 111111111111111111111111111010

Побитовые операторы полностью описаны в JS Побитовая глава.


.

операторов JavaScript

Пример

var x, y, z; // Заявление 1
х = 5; // Заявление 2
у = 6; // Заявление 3
г = х + у; // Заявление 4

Попробуй сам "

Программы на JavaScript

Компьютерная программа - это список "инструкций", которые должны быть "исполняется" компьютером.

На языке программирования эти инструкции программирования называются операторами .

Программа JavaScript - это список программных операторов .

В HTML программы JavaScript выполняются веб-браузером.

Операторы JavaScript

Операторы JavaScript состоят из:

Значения, операторы, выражения, ключевые слова, и комментарии.

Этот оператор сообщает браузеру написать «Hello Dolly». внутри элемента HTML с:

Большинство JavaScript программы содержат множество операторов JavaScript.

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

программ JavaScript (и операторов JavaScript) часто называют кодом JavaScript.

Точка с запятой;

Точка с запятой разделяет операторы JavaScript.

Добавьте точку с запятой в конце каждого исполняемого оператора:

var a, b, c; // Объявление 3 переменных
a = 5; // Присваиваем значение 5
b = 6; // Назначаем значение 6 по b
с = а + Ь; // Присваиваем сумму a и b к c

Попробуй сам "

При разделении точкой с запятой допускается несколько операторов в одной строке:

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

JavaScript Белое пространство

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

Следующие строки эквивалентны:

var person = "Hege";
var person = "Hege";

Хорошая практика - ставить пробелы вокруг операторов (= + - * /):

Длина строки JavaScript и разрывы строк

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

Если оператор JavaScript не умещается в одной строке, лучшее место для разрыва это после оператора:

Блоки кода JavaScript

операторов JavaScript могут быть сгруппированы в блоки кода внутри фигурных кронштейны {...}.

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

Одно место, где вы найдете инструкции, сгруппированные в блоки, находится в Функции JavaScript:

Пример

function myFunction () {
документ.getElementById ("demo1"). innerHTML = "Привет, Долли!";
document.getElementById ("demo2"). innerHTML = "Как дела?";
}

Попробуй сам "

В этом руководстве мы используем 2 пробела отступа для блоков кода.
Вы узнаете больше о функциях позже в этом руководстве.

Ключевые слова JavaScript

Операторы

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

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

Вот список некоторых ключевых слов, о которых вы узнаете в этот учебник:

Ключевое слово Описание
перерыв Завершает переключатель или петлю
продолжить Выполняется для выхода из цикла и начинается сверху
отладчик Останавливает выполнение JavaScript и вызывает (если доступно) отладку. функция
до... а Выполняет блок операторов и повторяет блок, пока условие правда
для Помечает блок операторов, который будет выполняться, пока выполняется условие
функция Объявляет функцию
если ... иначе Отмечает блок операторов для выполнения в зависимости от условия
возврат Выход из функции
переключатель Помечает блок операторов для выполнения в зависимости от различных случаев
попробовать... улов Реализует обработку ошибок в блоке операторов
вар Объявляет переменную

ключевых слов JavaScript - это зарезервированные слова. Зарезервированные слова нельзя использовать в качестве имен переменных.



.

Синтаксис JavaScript

Синтаксис JavaScript - это набор правил, как Программ на JavaScript построено:

var x, y, z; // Объявление переменных
х = 5; у = 6; // Присваиваем значения
г = х + у; // Вычислить значения

Значения JavaScript

Синтаксис JavaScript определяет два типа значений:

  • Фиксированные значения
  • Значения переменных

Фиксированные значения называются литералами .

Значения переменных называются Переменные .

Литералы JavaScript

Два наиболее важных правила синтаксиса для фиксированных значений:

1. Числа записываются с помощью или без десятичных знаков:

2. Строки - это текст, заключенный в двойные или одинарные кавычки:

Переменные JavaScript

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

JavaScript использует ключевое слово var для объявления переменных .

Знак равенства используется для присвоения значений переменным.

В этом примере x определяется как переменная. Тогда x равно присвоено (дано) значение 6:

Операторы JavaScript

JavaScript использует арифметических операторов ( + - * /) для вычислить значений:

JavaScript использует оператор присваивания ( = ) к присваивает значения в переменные:

Выражения JavaScript

Выражение - это комбинация значений, переменных и операторов, который вычисляет значение.

Вычисление называется оценкой.

Например, 5 * 10 означает 50:

Выражения также могут содержать значения переменных:

Значения могут быть различных типов, например числа и строки.

Например, "Джон" + "" + "Лань" оценивается как "Джон Доу":

Ключевые слова JavaScript

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

var ключевое слово сообщает браузеру создать переменные:

Комментарии JavaScript

Не все операторы JavaScript «выполняются».

Код после двойных слэшей // или между / * и * / рассматривается как комментарий .

Комментарии игнорируются, и не будут выполнено:

var x = 5; // Меня выполнят

// var x = 6; Я буду НЕ исполняться

Попробуй сам "

Вы узнаете больше о комментариях в следующей главе.

Идентификаторы JavaScript

Идентификаторы - это имена.

В JavaScript идентификаторы используются для именования переменных (и ключевых слов, и функции и метки).

Правила для официальных имен во многом одинаковы для большинства языков программирования.

В JavaScript первый символ должен быть буквой, знаком подчеркивания (_) или знак доллара ($).

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

Использование цифр в качестве первого символа недопустимо.
Таким образом, JavaScript может легко отличить идентификаторы от чисел.

JavaScript чувствителен к регистру

Все идентификаторы JavaScript с учетом регистра .

Переменные lastName и lastname , две разные переменные:

JavaScript не интерпретирует VAR или Var как ключевое слово var .

Ящик для JavaScript и Camel

Исторически сложилось так, что программисты использовали разные способы объединения нескольких слов в одно имя переменной:

Дефис:

имя, фамилия, мастер-карта, междугородний.

Дефисы не допускаются в JavaScript.Они зарезервированы для вычитания.

Подчеркивание:

first_name, last_name, master_card, inter_city.

Верхний корпус Camel (корпус Pascal):

Имя, Фамилия, MasterCard, InterCity.

Нижний ящик Camel:

Программисты

JavaScript обычно используют верблюжий регистр, начинающийся со строчной буквы:

firstName, lastName, masterCard, interCity.

Набор символов JavaScript

JavaScript использует набор символов Unicode .

Unicode охватывает (почти) все символы, знаки препинания и символы в мире.

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



.

Post A Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *