Опубликовано 10 августа • Первоначально опубликовано на htmlallthethings.com

Введение

Чтобы быть наемным разработчиком, вам нужно знать фреймворк. Но как узнать, когда вы готовы его изучить?

В этой статье мастера технической индустрии Мэтт Лоуренс и Майк Каран помогут вам эффективно изучить основные основы JavaScript, необходимые перед изучением фреймворка. Благодаря этим пробным версиям JavaScript вы создадите прочную основу, которая настроит вас на успех в изучении фреймворка, что в конечном итоге даст вам конкурентное преимущество при присоединении к работающей стороне рабочей силы!

В этой статье рассматриваются следующие темы:

  • Важность изучения JavaScript перед фреймворком
  • Основные концепции JavaScript, которые нужно знать перед изучением фреймворка

Почему важно изучить JavaScript перед изучением фреймворка?

Фреймворк, такой как React, построен «поверх» JavaScript, что означает, что React — это библиотека, которая расширяет и использует основные функции JavaScript.

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

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

Когда вы хорошо разбираетесь в JavaScript, вам будет намного проще подобрать такой фреймворк, как React. Вы не только сможете отличить ванильный код JavaScript от кода React, но также сможете различать ошибки, что позволит быстрее решать проблемы.

Основные преимущества изучения JavaScript перед фреймворками включают:

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

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

Что нужно знать перед изучением фреймворка?

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

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

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

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

Майк и Мэтт заложили следующую основу для этих пробных версий JavaScript.

Основные концепции JavaScript, которые вам необходимо знать:

  • Переменные
  • const, пусть, var
  • Условные операторы
  • если еще
  • выключатель
  • троичный
  • необязательная цепочка
  • условные обозначения для отображения и не отображения являются основными частями фреймворков.
  • Область действия
  • Зацикливание
  • пока
  • для
  • Массивы
  • для каждого
  • карта
  • уменьшать
  • фильтр
  • Сортировать
  • Асинхронизация/ожидание, обещания, выборка
  • Получение, ожидание и распространение данных — важная часть того, почему мы используем фреймворки.
  • Литералы шаблона
  • Такие фреймворки, как React, могут много выиграть от объединения строк, функций и переменных в одной строке, особенно для шаблонов.
  • Деконструкция
  • Оператор спреда

Мы более подробно рассмотрим каждую из фундаментальных концепций JavaScript в следующих разделах статьи.

Переменные

В JavaScript есть три объявления переменных: const, let и var.

  • const используется для постоянных значений, которые нельзя переназначить после объявления
  • let используется для переменных с областью действия блока, которые можно переназначить
  • var используется для переменных области действия функции, которые также могут быть переназначены

Однако остерегайтесь переменной var! Использование var имеет некоторые недостатки: оно имеет область действия функции, а не области действия блока, что может привести к непреднамеренному поднятию переменной и путанице. Вот почему рекомендуется использовать let и const, которые имеют блочную область видимости и обеспечивают лучший контроль над областью видимости и изменчивостью переменных.

Следующий блок кода инициализирует переменную-константу fullname со значением "Люк Скайуокер" и переменную let weapon со значением "бластер DL-44". Затем он переназначает значение weapon на «Световой меч».

Поскольку fullnameявляется constпеременной, ее нельзя переназначить!

const fullname = "Luke Skywalker"
let weapon = "DL-44 blaster"
// reassign the value of weapon to Lightsaber
weapon = "Lightsaber"

Условные операторы

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

В этом разделе будут рассмотрены различные типы условных операторов в JavaScript, такие как if/else, switch, ternary, необязательная цепочка и условные операторы для отображения и не отображения, обычно используемые в фреймворках.

  • if/else: базовая условная структура, которая выполняет один блок кода, если условие истинно, и другой блок, если оно ложно.
  • switch: условная структура, которая проверяет заданное значение в нескольких случаях и выполняет соответствующий блок кода.
  • ternary: сокращенное условное выражение, возвращающее одно из двух значений в зависимости от результата условия.
  • optional chaining: функция синтаксиса, обеспечивающая безопасный доступ к свойствам, когда значение может быть неопределенным или нулевым.
  • conditionals for display and not display: Методы, используемые в фреймворках для условного отображения или скрытия элементов на основе определенных условий.

если еще

Следующий блок кода определяет функцию chooseSide, которая принимает аргумент side. Если значение side равно « dark», он возвращает строку, указывающую, что Энакин Скайуокер выбирает Темную сторону Силы и становится Дартом Вейдером. Если значение «side» отличается от «dark», возвращается строка, указывающая, что Энакин выбирает Светлую сторону Силы и остается Энакином Скайуокером.

function chooseSide(side) {
  if (side === "dark") {
    return "Anakin Skywalker chooses the Dark Side of the Force and becomes Darth Vader!";
  } else {
    return "Anakin chooses the Light Side of the Force and remains Anakin Skywalker!";
  }
}

выключатель

Этот блок кода определяет функцию getCharacterQuote, которая принимает имя персонажа в качестве аргумента и возвращает известную цитату, связанную с этим персонажем из вселенной «Звездных войн». Если имя персонажа не соответствует ни одному из регистров, возвращается цитата по умолчанию: «Да пребудет с вами Сила».

function getCharacterQuote(character) {
  switch (character) {
    case "Yoda":
      return "Do or do not. There is no try.";
    case "Obi-Wan":
      return "The Force will be with you, always.";
    case "Darth Vader":
      return "I find your lack of faith disturbing.";
    case "Leia":
      return "Help me, Obi-Wan Kenobi. You're my only hope.";
    default:
      return "May the Force be with you.";
  }
}

троичный

Следующий код инициализирует логическую переменную didHanSoloShootFirst как true. Затем он определяет две строковые переменные, paragraphHanShotFirst и paragraphHanShotSecond, которые содержат абзацы, описывающие две разные версии сцены в столовой в «Звездных войнах. Эпизод IV: Новая надежда».

Тернарное условное выражение в конце проверяет значение didHanSoloShootFirst. Если true, возвращается строка paragraphHanShotFirst. В противном случае возвращается paragraphHanShotSecond.

Синтаксис: ifTrueOrFalse ? РезультатЕслиИстина : РезультатЕслиЛожь;

let didHanSoloShootFirst = true;
const paragraphHanShotFirst = "In the original 1977 release of Star Wars Episode IV: A New Hope, the cantina scene shows Han Solo shooting Greedo, a bounty hunter, first. This scene has sparked controversy among fans, as it depicts Han Solo as a more ruthless and morally ambiguous character. Some fans argue that this version of the scene accurately reflects Han Solo's character, while others believe that it contradicts his later development as a hero.";
const paragraphHanShotSecond = "The cantina scene in Star Wars Episode IV underwent changes in the 1997 re-release by George Lucas, including having Greedo shoot first and miss before Han Solo fires back. This version of the scene also generated controversy, with some fans arguing that it portrays Han Solo as less morally ambiguous and more of a traditional hero. Others believe that the change was unnecessary and that the original scene should have been left intact.";
  
didHanSoloShootFirst ? paragraphHanShotFirst : paragraphHanShotSecond;

необязательная цепочка

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

Следующий блок кода определяет объект с именем starWarsCharacters с тремя свойствами, каждое из которых представляет персонажа из вселенной «Звездных войн». Каждый персонаж имеет свою профессию и оружие как вложенные свойства.

Затем он пытается найти оружие персонажа по имени Байлан Сколл. Если персонаж не найден, переменной baylanSkollsWeapon будет присвоено значение «Неизвестное оружие».

const starWarsCharacters = {
  ahsoka: {
    occupation: "Jedi",
    weapon: "Dual Lightsabers"
  },
  captainRex: {
    occupation: "Clone Trooper Captain",
    weapon: "Dual DC-17 Blasters"
  },
  grandAdmiralThrawn: {
    occupation: "Grand Admiral",
    weapon: "Imperial Strategy"
  }
};
const baylanSkollsWeapon = starWarsCharacters?.baylanSkoll?.weapon || "Unknown weapon";

условия для отображения и не отображения

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

Следующий код React определяет функциональный компонент React с именем StarWarsCharacter, который отображает информацию о персонаже по имени Дин Джарин. Он использует хук useState для управления логическим состоянием displayInfo для переключения видимости информации о персонаже.

При нажатии кнопки изменяется состояние displayInfo, и информация о персонаже отображается условно на основе значения displayInfo.

function StarWarsCharacter() {
  const [displayInfo, setDisplayInfo] = useState(false);
  const character = {
    name: 'Din Djarin',
    occupation: 'Bounty Hunter',
    weapon: 'Amban Sniper Rifle'
  };
  return (
    <div>
      <button onClick={() => setDisplayInfo(!displayInfo)}>
        {displayInfo ? 'Hide Info' : 'Show Info'}
      </button>
      {displayInfo && (
        <div>
          <p>Name: {character.name}</p>
          <p>Occupation: {character.occupation}</p>
          <p>Weapon: {character.weapon}</p>
        </div>
      )}
    </div>
  );
}
export default StarWarsCharacter;

Обзор

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

Существует два основных типа области действия:

  • Global scope: переменные доступны во всей кодовой базе.
  • Local scope: переменные ограничены определенной функцией или блоком кода.

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

В следующем блоке кода переменной «планета» присваивается значение «Корусант» внутри области действия функции, что делает ее недоступной за пределами объем функции.

// Global scope
const galaxy = "Star Wars";
function starWarsPlanet() {
  // Local scope
  const planet = "Coruscant";
      console.log(`In the ${galaxy} galaxy, ${planet} is known for its city-covered surface, status as the galactic capital, and housing the Galactic Senate and Jedi Temple. The bustling planet features towering skyscrapers, busy streets, and a diverse population.`);
}
starWarsPlanet(); // Output: In the Star Wars galaxy, Coruscant is known for its city-covered surface, status as the galactic capital, and housing the Galactic Senate and Jedi Temple. The bustling planet features towering skyscrapers, busy streets, and a diverse population.
console.log(planet); // Error: planet is not defined, as it's only accessible within the starWarsPlanet function.

Зацикливание

Циклы в JavaScript позволяют многократно выполнять блок кода до тех пор, пока не будет выполнено указанное условие. В JavaScript существует несколько типов циклов, включая циклы for, while и do-while.

  • for: наиболее часто используемый цикл, состоящий из инициализации, условия и обновления, который выполняет блок кода, пока условие истинно.
  • while: выполняет блок кода, пока заданное условие истинно. Условие проверяется перед каждой итерацией.
  • do-while: Аналогичен циклу while, но условие проверяется после каждой итерации, гарантируя выполнение блока кода хотя бы один раз.

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

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

// for loop
const spaceships = ['Millennium Falcon', 'X-Wing', 'TIE Fighter', 'A-Wing', 'TIE Interceptor'];
for (let i = 0; i < spaceships.length; i++) {
  console.log(`For loop spaceship: ${spaceships[i]}`);
}
// while loop
let j = 0;
while (j < spaceships.length) {
  console.log(`While loop spaceship: ${spaceships[j]}`);
  j++;
}
// do-while loop
let k = 0;
do {
  console.log(`Do-while loop spaceship: ${spaceships[k]}`);
  k++;
} while (k < spaceships.length);

Массивы

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

В этом примере блока кода создается массив охотников за головами и демонстрируется доступ к элементам массива и управление ими.

const bountyHunters = ['Boba Fett', 'Bossk', 'Dengar', 'IG-88', 'Zuckuss', '4-LOM'];
// Accessing elements in the array
console.log(bountyHunters[0]); // Output: 'Boba Fett'
// Adding a new bounty hunter to the array
bountyHunters.push('Cad Bane');
console.log(bountyHunters); // Output: ['Boba Fett', 'Bossk', 'Dengar', 'IG-88', 'Zuckuss', '4-LOM', 'Cad Bane']

Async/wait, обещания, выборка

Async/await, promises и fetch – важные концепции JavaScript для обработки асинхронных операций, таких как выборка данных из API.

В этом разделе мы проиллюстрируем использование async/await, promises и fetch для получения данных из Star Wars API.

Этот блок кода определяет асинхронную функцию с именем fetchStarWarsPlanets. Внутри функции мы используем fetch для запроса данных из Star Wars API для планет.

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

Наконец, мы вызываем функцию fetchStarWarsPlanets для выполнения кода.

async function fetchStarWarsPlanets() {
  try {
    const response = await fetch('https://swapi.dev/api/planets/');
    const data = await response.json();
    const planets = data.results.map(planet => planet.name);
        console.log(planets);
  } catch (error) {
        console.error('Error fetching data:', error);
  }
}
fetchStarWarsPlanets(); // Output:[object Array] (10) ["Tatooine","Alderaan","Yavin IV","Hoth","Dagobah","Bespin","Endor","Naboo","Coruscant","Kamino"]

Сравнение конкатенации строк и литералов шаблонов

Следующий блок кода демонстрирует два способа объединения строк для создания новой строки. Оба метода дают одинаковый результат, но с разным синтаксисом.

Переменная resultOne использует конкатенацию строк с оператором +. Он объединяет значения verbOne, nounOne и nounTwo с дополнительными строками для формирования полного предложения.

В переменной resultTwo используются литералы шаблонов с обратными кавычками (`) и ${}. Он встраивает переменные непосредственно в строку, делая код более читабельным и простым в обслуживании.

Оба оператора console.log() выводят одно и то же предложение «Да пребудет с вами Сила»

const verbOne = "May";
const nounOne = "Force";
const nounTwo = "you";
const resultOne = verbOne + " the " + nounOne + " be with " + nounTwo;
const resultTwo = `${verbOne} the ${nounOne} be with ${nounTwo}`;

Деконструкция

Деконструкция, также известная как деструктуризация, представляет собой краткий способ извлечения значений из объектов и массивов в JavaScript. Это позволяет вам присваивать значения переменным непосредственно из объекта или массива, делая ваш код более читабельным и эффективным.

Понимание деконструкции в JavaScript позволяет писать более чистый и эффективный код при работе с объектами и массивами.

В следующем примере кода демонстрируется деструктуризация объекта для извлечения информации о символе и деструктуризация массива для доступа к названиям транспортных средств.

// Object destructuring
const character = {
  name: 'Obi-Wan Kenobi',
  occupation: 'Jedi Master',
  affiliation: 'Jedi Order',
};
const { name, occupation, affiliation } = character;
console.log(`${name}, ${occupation}, ${affiliation}`); // Output: Obi-Wan Kenobi, Jedi Master, Jedi Order
// Array destructuring
const vehicles = ['AT-AT', 'T-47 Airspeeder', 'AT-ST', '74-Z Speeder Bike', 'Y-Wing'];
const [firstVehicle, secondVehicle, ...remainingVehicles] = vehicles;
console.log(`First vehicle: ${firstVehicle}`); // Output: AT-AT
console.log(`Second vehicle: ${secondVehicle}`); // Output: T-47 Airspeeder
console.log(`Remaining vehicles: ${remainingVehicles}`); // Output: AT-ST, 74-Z Speeder Bike, Y-Wing

Оператор спреда

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

Оператор распространения позволяет более эффективно и гибко работать с массивами и объектами.

Этот блок кода демонстрирует использование оператора распространения для объединения сил Галактической Империи и Первого Ордена.

const galacticEmpire = ['Darth Vader', 'Emperor Palpatine', 'Grand Moff Tarkin'];
const firstOrder = ['Kylo Ren', 'General Hux', 'Captain Phasma'];
const combinedForces = [...galacticEmpire, ...firstOrder];
console.log(combinedForces);
// Output: ['Darth Vader', 'Emperor Palpatine', 'Grand Moff Tarkin', 'Kylo Ren', 'General Hux', 'Captain Phasma']

Ресурсы

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

Рекомендуемые ресурсы для пробных версий JavaScript:

  1. freeCodeCamp: платформа для онлайн-обучения, предлагающая бесплатные уроки и проекты по кодированию, которые помогут вам освоить основы JavaScript и другие технологии веб-разработки.
  2. edabit: платформа для испытаний по программированию, где вы можете практиковать JavaScript с помощью небольших, управляемых упражнений, разработанных для улучшения ваших навыков решения проблем.
  3. iCodeThis: веб-платформа, предлагающая различные упражнения и задачи по кодированию, включая JavaScript, которые помогут вам отточить свои навыки и улучшить понимание концепций программирования.
  4. Scrimba: интерактивная обучающая платформа, которая предлагает практические руководства и курсы по кодированию, включая JavaScript и веб-разработку, позволяя вам учиться на практике и получать мгновенные отзывы.

Куинси Ларсон основал freeCodeCamp, некоммерческую платформу онлайн-обучения, которая предлагает уроки программирования и проекты в области веб-разработки, включая JavaScript, HTML, CSS, фреймворк React и многое другое. Вы не только получите много практической практики кодирования, но и получите сертификаты! Я получил сертификат адаптивного веб-дизайна и очень рекомендую учиться у них! Вы можете узнать больше, прочитав мою статью Научитесь программировать и получите сертификацию бесплатно.

Сайт edabit — отличное место для практики JavaScript. Вы можете выбрать язык программирования (включая JavaScript), установить уровень сложности и получать очки опыта для повышения уровня, как в веселой игре! Ваш прогресс также отслеживается и отображается в квадратной сетке коммитов в стиле GitHub. Они также предлагают алгоритмы, удобные для начинающих!

Веб-сайт iCodeThis — это новая многообещающая платформа, созданная знаменитостью в области технологий Florin Pop! Платформа iCodeThis предлагает ежедневные задачи по кодированию, место для кодирования оригинальных проектов, где можно хранить и делиться своей работой, а также списки лидеров, побуждающие вас делать все возможное, чтобы подняться в рейтинге и поддержать своих коллег-айкодеров в дружеских соревнованиях! Чтобы узнать больше, вы можете прочитать мою обзорную статью iCodeThis: улучшите свои навыки программирования с помощью бесплатных ежедневных задач.

Scrimba — это гораздо больше, чем просто онлайн-школа кодирования. Они могут похвастаться невероятным персоналом и учителями, поддерживающими учениками и фантастическим сообществом, что делает обучение захватывающим. Scrimba не только научит вас кодировать, но также поможет вам уверенно развивать свои навыки и эффективно подготовиться к рынку труда, помогая вам с подготовкой к собеседованию, составлению резюме, LinkedIn и многому другому! Мне лично помогли на нескольких мероприятиях YouTube Livestream Scrimba, и я написал более 50 статей, рассказывая о своем положительном опыте с ними!

Обязательно послушайте выпуск!

Эпизод 237 Основы JavaScript, которые необходимо знать перед изучением React

Обязательно ознакомьтесь с HTML All The Things в социальных сетях!

Скримба Скидка!

  • Научитесь кодировать, используя Scrimba с их интерактивным редактором кода.
  • Присоединяйтесь к их эксклюзивным сообществам и сети Discord, чтобы найти свою первую работу!
  • Используйте этот URL-адрес, чтобы получить скидку 10% на все их платные планы: https://tinyurl.com/ScrimbaHATT

Другие мои статьи по теме

Содержание «Звездных войн» в этой статье используется в образовательных и информационных целях при условии добросовестного использования. Наслаждайтесь обучающим путешествием!

Заключение

Освоение основ JavaScript подготовит вас к следующему шагу в изучении и использовании истинной мощи фреймворков.

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

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

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

Подключаемся! Я активен в LinkedIn и Twitter.

Вы можете прочитать все мои статьи на selftaughttxg.com