Урок 1: ваша первая программа JavaScript (серия Roadmap FullStack Developer)

Я на YouTube

Если вы устали от чтения …

Вот версия YouTube этого урока.

Введение

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

Пожалуйста, поделитесь этой серией с хэштегом #fullstackroadmap И помоги мне распространить слово!

Полезные ссылки серии

• Содержимое серии
• GitHub Repository – Где вы найдете весь код, который мы пишем в этой серии
• YouTube Playlist
• Обзор серии
• 100 дней Code Challenge – Я настоятельно рекомендую вам принять это, читая эту серию!
• Мой профиль кодеваров – Следуй за мной, и я последую за тобой. Здесь мы будем делать наши проблемы с кодированием на протяжении всей серии!
• Мой профиль в Твиттере – Где вы можете оставаться в курсе

С чего начать?

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

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

Браузер Devtools

Мы начинаем наше путешествие в месте, с которым вы, вероятно, были близки, но никогда не видели. Если ты фанат «Чужих вещей», Мы собираемся войти Мир «перевернута» Анкет

Для начала вам нужно будет Скачать веб -браузер Firefox на ваш компьютер. Ради этого урока лучше всего, что мы все смотрим на одно и то же.

Почему Firefox?

Этот учебник будет работать в любом веб -браузере (у всех есть свои инструменты разработчика), но мы используем Firefox, потому что их инструменты разработки, возможно, самые простые для начинающих и наиболее полезны для начинающих. И говоря о инструментах разработчика … Что это в любом случае?

Рад, что ты спросил. В течение следующих нескольких месяцев вы будете действительно знакомы с этими «инструментами разработчиков», потому что это встроенные инструменты, включенные в любой веб-браузер, который позволяет разработчикам увидеть, что происходит за кулисами с их веб-приложениями; Следовательно Dev (инструменты разработчика. Чтобы добраться до них, щелкните правой кнопкой мыши в любом месте в вашем браузере и выберите опцию «осмотреть».

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

Инспектор

Инспектор (представление по умолчанию из GIF выше), вероятно, является наиболее частотой областью этих инструментов для большинства разработчиков. Здесь вы будете осматривать HTML и CSS (не волнуйтесь, в конце концов мы узнаем об этом), отображаемые на веб -странице. Вы также можете внести изменения в HTML и CSS, чтобы увидеть, как будет выглядеть ваша веб -страница, прежде чем вы фактически внесете изменения в свой код. Другими словами, Любые изменения, которые вы вносите в Dev Tools, не повлияют на вашу реальную веб -страницу; Они временные Анкет Поскольку мы делаем временные изменения, вы можете изменить внешний вид любого веб -сайта; Даже если вы не можете редактировать код за ним. Но помните, что никто другой не увидит этого, потому что это локальное, временное изменение, которое будет перезаписано на вашем следующем обновлении браузера.

Когда мы добираемся до уроков по модели объекта документа (DOM) и модели коробки в нашем разделе HTML и CSS серии, вы узнаете гораздо больше об этой области инструментов DEV.

Приставка

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

1. Позволяет написать код JavaScript
2. Позволяет вам изменить DOM (объект документа), которую мы еще не освещали, но доберемся.

Ниже приведен пример того, как я демонстрирует обе эти идеи в консоли.

Как видите, есть много, что мы можем сделать в консоли, и Мы будем проводить здесь много времени на следующие несколько уроков Анкет

Сеть

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

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

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

Хранилище

Инструмент хранения – это еще одна общая вещь, которую вы будете использовать в качестве веб -разработчика, но, как и вкладка «Сеть», мы не будем к нему некоторое время. Это также называется вкладка «Приложение», если вы используете инструменты Google Chrome Dev.

Хотя большинство данных на веб -странице хранятся в базе данных, а затем получены с помощью вызовов API, некоторые данные могут фактически храниться в браузере пользователя для последующего поиска. Когда вы посещаете веб -сайты и просят принять соглашение о cookie, это то, на что они ссылаются.

Каждый браузер, как Firefox, имеет возможность хранения веб -файлов и других данных, что полезно для отслеживания поведения пользователей (кашель, Facebook), аутентификации и несколько других вещей.

Как вкладка «Сеть», не беспокойтесь об этом сейчас. Тем не менее, вот быстрый вид, когда я осматриваю файлы cookie, которые Google установил в моем браузере.

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

Все остальные инструменты разработки

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

Ваша первая программа JavaScript

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

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

В этой программе JS мы будем менять фон домашней страницы Google каждый раз, когда мы нажимаем на экран.

Вот как это выглядит.

// This is a JavaScript comment.  It doesn't affect the code at all

// Here, we are selecting the  HTML tag
const htmlBody = document.querySelector("body");

// This is a function
const randomClickFunction = function () {
  // This is an array of color codes.
  const colors = ["#002942", "#0CA7DB", "#F56C05", "#DB3E00", "purple"];

  // This will calculate a random "index" that we can use to select a color in the array
  const randomIndex = Math.floor(Math.random() * colors.length);

  // We are selecting a single value from our "colors" array above
  const randomColor = colors[randomIndex];

  // We are setting the webpage background our random color
  htmlBody.style.backgroundColor = randomColor;

  // We are printing a message to the console
  console.log("The user clicked and turned the background" + randomColor + "!");
};

// This sets an "event listener" which "listens" for click events on the webpage
htmlBody.onclick = randomClickFunction;

И вот что он делает.

Несколько комментариев к этой программе

Чтобы завершить это для этого урока, я хочу указать на некоторые вещи о том, что мы только что сделали. Я не собираюсь объяснять каждую деталь того, как работает эта программа, потому что мы будем подробно погружаемся в язык программирования JavaScript в течение следующих нескольких уроков серии.

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

• Обязательно прочитайте комментарии, которые я поместил в код выше. Все, что мы пишем после // Персонаж считается комментарием в JavaScript. Синтаксис комментариев будет отличаться между языками. Например, чтобы сделать комментарий на языке программирования Python, вы бы использовали # а не // Анкет
• Обратите внимание, как в моем цвета Переменная, у меня есть несколько «шестигранных кодов», но я также могу указать цвет открытого текста, такой как «фиолетовый». Все это действительные значения CSS (подробнее о появлении позже).
• Я бы счел этот код на промежуточном уровне сложности. Мне потребовалось несколько месяцев написания кода, прежде чем я мог написать что -то подобное самостоятельно, так что не волнуйтесь, если это не имеет никакого смысла!

Где вы пишете код, имеет значение!

Есть очень веская причина, по которой мы используем инструменты разработчика Firefox и, в частности, консоль. Чтобы запустить код JavaScript, вам нужен инструмент, который «компилирует» язык программирования JavaScript. Этот компилятор рассмотрит код, который мы написали выше, и конвертируют его в 1 и 0, на котором работаете, над которым вы работаете, может прочитать и понять.

Мы можем коснуться некоторых из этих низкоуровневых деталей, таких как «компиляция» на протяжении всей серии, но когда мы говорим о 1 и 0, мы погружаемся в сферу информатики, которая сильно отличается от веб-разработки. Информатика – это то, что включает Веб -разработка, но не каждый компьютерный ученый будет знать, как разрабатывать в Интернете. Вам не нужно быть опытным шеф -поваром для работы в Chipotle, но без работы талантливых поваров не было бы чипотла.

Мы могли бы написать этот код в редакторе кода/текста, но это потребовало бы, чтобы мы выполнили несколько дополнительных шагов для составления кода и плавно работать в браузере. Используя консоль Firefox, мы можем написать код JavaScript Без какой -либо настройки Анкет

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

Следующие шаги

На этом завершается урок № 1 серии разработчиков полного стека.

Обязательно Получите мой список рассылки Чтобы получить обновления, когда я публикую уроки в будущем!

Перейти на предыдущий урок

Перейти к следующему уроку

Необязательный вызов

Если вы ищете способ практиковать то, что мы узнали, вот ваш вызов:

Используя Только эта страница и Эта страница , посмотрите, сможете ли вы выяснить, как распечатать случайное число между 0-100 на консоль в инструментах разработчика Firefox Анкет

Оригинал: “https://dev.to/zachgoll/fullstack-developer-series-lesson-1-your-first-javascript-program-d98”