«Детские шаги, и много практики».
Это самый распространенный ответ, который я слышу, как я могу выучить JavaScript? вопрос.
Потому что давайте посмотрим правде в глаза:
Для начинающих JS возвышающаяся экосистема, которая является JavaScript, может быть довольно пугающей.
В Snipcart у нас много пользователей, которые не являются экспертами JS, и это просто прекрасно. Мы часто пытаемся направить их к лучшему пониманию и лучшим практикам. Следуя принципу « подсчитать количество нажатий» , я решил создать вечнозеленый ресурс, на который я мог бы позже указать!
Это введение для начинающих JS будет включать в себя:
- Богатый обзор JavaScript и его экосистемы
- Пошаговая программа обучения и ключевые ресурсы
- Два JavaScript-упражнения для начинающих
Давайте сделаем эти первые шаги ребенка.
1. Во-первых, что такое JavaScript?
JavaScript - это инструмент для разработчиков, который добавляет интерактивность веб-сайтам.
Если говорить немного грубо:
HTML структурирует ваш контент
CSS стилизует это
JavaScript оживляет!
Эти три языка позволяют веб-разработчикам создавать яркие онлайн-впечатления.
JavaScript, однако, более … сложный зверь, чем первые два. Видите ли, он позволяет вам делать кучу вещей на сайте:
Автообновление контента, например, в социальных сетях 🐦
Анимация визуальных элементов 💨
Добавление визуальных отзывов о взаимодействиях пользователей ✅
Добавлять интерактивные карты 🗺
Запускать всплывающие окна / предложения после действий пользователя‼
Разработчики часто используют JavaScript для извлечения данных с других сайтов и отображения их самостоятельно.
Например, наша корзина покупок в Snipcart добавляется на сайты с использованием JavaScript !
Однако эти варианты использования представляют только верхушку айсберга JS. Веб-разработчики также используют его для:
Создания одностраничных приложений - с такими фреймворками, как React & Vue.js
Запуска серверных веб-серверов с помощью Node.js
JavaScript - это довольно универсальный язык, используемый в обеих парадигмах программирования, т. Е. Функциональный и ООП (объектно-ориентированный).
Абсолютным новичкам пока не нужно беспокоиться об этом! Мы расскажем об этом в следующем промежуточном посте. 👍
2. Разрушение экосистемы JavaScript
2.1. За JavaScript стоит «соглашение»: оно называется ECMAScript
Всякий раз, когда выходит новая версия JavaScript, вы неизбежно услышите о ECMAScript.
ECMAScript - это спецификация языка сценариев, на которой основан JavaScript.
Давайте воспользуемся простой аналогией, чтобы разобраться в этом. Аналогия: строительство дома 🏠
Соглашение о том, как писать планы домов - единственное, с чем согласны все архитекторы, - это ECMAScript. Толстые линии будут обозначать внешние стены; тонкие - внутренние, интерьер и т. д.
Широко принятым (и торговым знаком) методом написания планов домов на светло-голубом листе бумаги размером 50 на 50 см. является JavaScript.
Ваш подробный план дома размером 50 на 50 см. на светло-голубом листе - это код JavaScript в вашей программе.
Ваш полностью построенный дом - это выполнение кода JavaScript - программа работает.
Другими словами, ECMAScript - это «соглашение», стоящее за JavaScript. Эта спецификация определяет лексику и синтаксис языка, а также API (мы вернемся к этому позже), которые должны быть доступны в нем.
Существует несколько версий спецификации ECMAScript, начиная с 1997 года. Существует также много различных реализаций (читай: языки) спецификации, такие как JScript & ActionScript . Но JavaScript ДАЛЕКО ВПЕРЕДИ по популярности.
2.2. Современный JavaScript работает как на браузерах, так и на серверах
Что интересно и сбивает с толку современный JavaScript, так это то, что он может работать как на внешнем интерфейсе, так и на внутреннем.
Другими словами, вы можете запускать код JavaScript в своем браузере, но также и на своих серверах!
Посмотрим, чем они отличаются.
JS на стороне клиента: волшебство браузера!
Все браузеры имеют механизмы JavaScript, которые интерпретируют и запускают код JS.
Как только HTML-страница отображается на вкладке браузера, последняя выполняет код JavaScript, ограниченный этой конкретной страницей. Одна страница может загружать скрипты (разные файлы JavaScript) из нескольких источников. Браузеры выполняют их последовательно - один за другим - при каждой загрузке страницы.
У JavaScript есть доступ к DOM (объектной модели документа), то есть структуре элементов HTML на вашей странице.
Именно при доступе к DOM JavaScript манипулирует HTML-элементами и создает анимацию, переходы, визуальные подсказки и т. Д.
В разделе 4 мы покажем вам конкретные примеры использования JS в браузере!
JS на стороне сервера: узел & npm
Node.js - это среда выполнения JavaScript - среда выполнения, которая запускает код JS вне браузера.
Он поставляется с множеством API (вот введение API!), Которые взаимодействуют с компьютерными ресурсами: файловой системой, сетевым вводом-выводом и т. Д.
Смотрите, эти возможности не доступны в браузере. Зачем? Главным образом по соображениям безопасности: вы не хотели бы, чтобы на веб-страницах выполнялся код, который читает локальные файлы на вашем компьютере … это неприятно!
Используя Node.js, разработчики создают широкий спектр бэкэнд-программ JS, от простых инструментов разработчика до полноценных рабочих веб-серверов.
Чтобы создать эти программы, разработчики могут выбирать из множества строительных блоков, доступных через npm.
npm (что означает Node Package Manager) - это инструмент командной строки и общедоступный реестр пакетов. Это инструмент, который позволяет вам включать внешние программы, известные как пакеты, в вашу программу Node.js.
Проще говоря, он позволяет вам устанавливать любую из этих программ Node прямо с вашего компьютера. Это позволяет разработчикам публиковать и загружать фрагменты кода JavaScript, от простых функций до зрелых фреймворков.
Проверьте этот пост, если вы хотите глубже изучить Node.js.
3. На самом деле изучение JS - с чего начать?
GitHub репо с ресурсами для начинающих JS
Я хотел бы продолжить о том, что заявления, объявления, переменные, объекты / функции и выражения.
Но я не достаточно камикадзе, чтобы попытаться воспроизвести всю документацию JavaScript в одном посте.
Героические люди из Mozilla Developer Network (MDN) уже проделали большую работу по ознакомлению новичков JS с техническими особенностями языка. Так что, если первое предложение этого раздела звучит как бред, не бойтесь. Эти два руководства по JavaScript помогут вам быстро освоить механику и синтаксис JS:
Что такое JavaScript - MDN Первое погружение в JavaScript - MDN
Если вы пришли из бэкэнд-программирования, вы быстро освоите их.
Если нет, вам повезло: наша команда недавно опубликовала обширный список ключевых ресурсов для начала работы с JavaScript. Он собрал более 200 звезд на GitHub, и мы рады поделиться с вами:
Open source list of paid & free resources to learn JavaScript
Теперь, прежде чем вы начнете кликать и сёрфить, подождите. Я предлагаю сначала пойти по этому простому пути новичка:
1 Поймите некоторую основу Udacity, Codecademy или freeCodeCamp (или в упражнениях ниже!) 2 Взгляните на JavaScript: понимание странных частей 3 Ознакомьтесь с серией книг YDKJS(You don’t know JS)!
Быстрые подсказки для начинающих JS
- Начните с изучения ванильного (обычного) JavaScript, а не фреймворка.
- Используйте инструменты разработчика - отладка спасет вашу жизнь!
- Узнайте разницу между ложными и правдивыми ценностями.
- Изучай promises, потом async/await.
- Познакомьтесь с полезными API, такими как filter , map , reduce , spread , rest .
- Слушайте соответствующие JavaScript-подкасты!
Заключительные мысли
Помните: изучение нового языка программирования требует времени и практики. Это будет нелегко, но это даст вам возможность создавать потрясающие впечатления в Интернете. Будь то для себя, своих друзей, компании или некоторых клиентов!
JavaScript действительно является основой Интернета, поэтому я обещаю, что его изучение поможет вашей карьере в будущем. Скаутская честь
Что дальше, спросите вы?
Медленно, но верно, найдите время, чтобы просмотреть некоторые отобранные ресурсы в репозитории GitHub, о котором говорилось выше.
Как только вы почувствуете себя немного увереннее в своих знаниях по JS, я бы посоветовал пройти курс JavaScript 30 от Wes Bos.
Большое спасибо нашим друзьям-разработчикам Диего , Софи , Максу и Пи, которые поделились с нами своими советами для начинающих в JS! Вы, ребята, молодцы.
(с)Перевод статьи https://snipcart.com/blog/javascript-beginner-intro-exercises