JavaScript для начинающих: дружественное введение и упражнения

«Детские шаги, и много практики».

Это самый распространенный ответ, который я слышу, как я могу выучить 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 действительно является основой Интернета, поэтому я обещаю, что его изучение поможет вашей карьере в будущем. Скаутская честь

Что дальше, спросите вы?

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

Как только вы почувствуете себя немного увереннее в своих знаниях по JS, я бы посоветовал пройти курс JavaScript 30 от Wes Bos.

Большое спасибо нашим друзьям-разработчикам Диего , Софи , Максу и Пи, которые поделились с нами своими советами для начинающих в JS! Вы, ребята, молодцы.

(с)Перевод статьи https://snipcart.com/blog/javascript-beginner-intro-exercises

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus