Учебное пособие по основам JavaScript

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

Привет ребята!

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

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

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

Я стал профессиональным разработчиком FullStack благодаря freeCodeCamp, поэтому больше не могу его рекомендовать. Я уже упоминал, что это совершенно бесплатно !!?

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

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

Итак ... Что такое JavaScript?

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

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

Согласно Stack Overflow, JavaScript - самая популярная технология в 2018 году.

Вы можете использовать на сервере с node.js, в мобильных приложениях с react native или в настольных приложениях с электроном. В настоящее время JavaScript также используется в IOT благодаря node.js и даже в машинном обучении с помощью Tensorflow.js. Неудивительно, почему это так популярно.

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

Теперь давайте посмотрим, как можно раскрыть всю мощь JavaScript. Приготовьте кофе и давайте погрузимся в основные понятия языка.

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

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

"Типы данных"

JavaScript предоставляет семь различных типов данных undefined, null, boolean, string, symbol, number и object.

Переменные

Переменные - это способ хранения типов данных в JavaScript. Это простое имя по вашему выбору для обозначения данных, к которым вы хотите обратиться.

Чтобы определить переменную, вам просто нужно использовать ключевое слово var, за которым следует имя, которое вы хотите использовать. Обычно вы присваиваете что-то (какой-то тип данных) этой переменной, иначе она не будет определена. Этого можно добиться с помощью оператора присваивания =, за которым следуют данные, которые вы хотите ему присвоить, как в примере выше. С ES6 вы будете использовать let и const позже, но пока просто сосредоточьтесь на var.

Увеличивать или уменьшать число

В JavaScript очень часто увеличивают или уменьшают числа. Чтобы увеличить число, вы используете оператор ++, а если хотите уменьшить, используйте -- operator. Эта концепция будет очень полезна, когда мы начнем использовать циклы.

Сложная уступка

Представьте, что вы хотели бы сделать это i = i + 2. Это настолько распространенный шаблон, что есть операторы, которые выполняют как математическую операцию, так и присваивание за один шаг.

В этом примере используется оператор +, но вы можете использовать его с операторами _21 _, _ 22_ и / таким же образом.

Струны

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

Escape-последовательности в строках

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

\'одна цитата

\"двойная кавычка

\\ обратная косая черта

\nnewline

\r возврат каретки

\ttab

\bbackspace

Объединение строк

В JavaScript очень часто объединять строки вместе. Для этого можно использовать оператор +. Вы даже можете использовать переменные, как вы можете видеть в этом примере:

Длина строки

Это очень полезно. Вы можете использовать свойство .length для подсчета количества символов в строке.

Обозначение скобок

Вы можете использовать скобки для обозначения определенных позиций (индекса) в строке.

В строках индекс - это способ выбирать символы слева направо, начиная с нуля. Итак ... первый символ слева - это индекс 0, второй - индекс 1 и так далее.

Вы также можете начать отсчет с конца, используя свойство .length. Но помните, что индекс начинается с 0, а свойство .length начинает отсчет с 1.

Неизменяемость строк

В JavaScript String значения неизменяемы, что означает, что они не могут быть изменены после создания. Если вы хотите изменить строку, вам нужно переназначить ее с помощью оператора присваивания =.

Массивы

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

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

Вложенные массивы

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

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

Хорошо ... пока что вы добились хороших результатов.

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

Не волнуйтесь. Вот оно!

Функции

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

Когда вы вызываете функцию, выполняется ее код.

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

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

Круто, правда? Вы чувствуете силу? Если бы я знала это когда-то… Я бы встречалась со всеми девочками в школе !!! Но ... я выбрал естественные науки и узнал о Дарвине и его теориях.

"Сфера"

Хорошо, это важная тема, если вы хотите избежать ошибок в своем коде. Я рекомендую вам ознакомиться с этой статьей, чтобы лучше понять ее. Обычно, если вы объявляете переменную с ключевым словом var внутри функции, ее можно будет использовать только внутри этой функции. Но если вы объявите его в глобальной области видимости (а не внутри какой-либо функции), вы сможете получить к нему доступ везде.

Возвращаемое ключевое слово

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

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

Логические

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

Если утверждения

If операторы используются для принятия решений в коде.

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

Но теперь у вас есть оператор If, который оценивает то, что находится внутри круглой скобки (someCondition). Если эта оценка вернет истину, она выполнит то, что заключено в фигурные скобки, как если бы это была функция. Если оценка вернет false, то то, что заключено в фигурные скобки, будет пропущено. Мы будем использовать больше операторов if для объяснения следующих концепций, так что не беспокойтесь. Ты получишь это.

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

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

Внимание: = является оператором присваивания и используется для присвоения данных переменной. Если вы хотите что-то сравнить, вы должны использовать оператор сравнения ==.

Вы также можете использовать ===, который сравнивает, если две вещи строго равны.

Если вы хотите проверить, не совпадает ли что-то с этим, используйте оператор неравенства !=.

Зная это, другой оператор не требует пояснений. Давайте посмотрим на примеры каждого из них:

Иногда вам нужно будет тестировать сразу несколько вещей. Логический оператор and (&&) возвращает true тогда и только тогда, когда операнды слева и справа от него истинны.

Логический оператор or (||) возвращает true, если любой из операндов равен true. В противном случае возвращается false.

Другое заявление

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

Иначе, если заявление

Это используется, когда у вас более двух условий.

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

Заявление о переключении

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

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

Хорошо, итак ... То, что вы поставили после ключевого слова case, будет сравниваться с тем, что находится в скобках после ключевого слова switch. Если он вернет true, он выполнит код внутри. Ключевое слово break также будет выполняться внутри case, которое оценивается как истинное, и оно будет тормозиться. Это означает, что остальные дела выполняться не будут. Случай default выполняется, если любой из других случаев возвращает false.

Он работает так же, как оператор Else If, ​​но делает ваш код более читаемым, когда у вас много случаев.

Тернарный оператор

Это мой любимый, потому что он прост в написании и в большинстве случаев делает ваш код более читабельным.

Тернарный оператор работает как оператор if else. Если условие (a ›b) истинно, оно вернет то, что стоит после ?, если оно ложно, оно вернет то, что стоит после :.

Хорошо !!! Мы делаем хорошие успехи. Теперь вы уже знаете кое-что интересное о JavaScript. У нас все еще есть некоторые «базовые» концепции, но мы не так уж далеки от финиша. Вы так далеко, а это значит, что вы почти усвоили основы.

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

"Объекты"

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

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

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

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

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

Чтобы добавить новые свойства к объектам, просто сделайте то же самое, что и измените их. Если свойство, которое вы пытаетесь изменить, не существует, оно будет создано.

Вы также можете удалить свойства объектов.

Иногда бывает полезно проверить, существует ли свойство данного объекта. Мы можем использовать .hasOwnProperty(propname)метод объектов, чтобы определить, имеет ли этот объект заданное имя свойства. .hasOwnProperty() возвращает true или false, если свойство найдено или нет.

В javaScript вы будете работать с более сложными объектами, чем собаки. Вот пример:

Циклы пока

Циклы очень удобны, когда вы хотите запускать один и тот же код несколько раз. while loop запускает код внутри, пока условие истинно.

Сложный? Да, но использование петель настолько распространено, что это станет второй натурой. Посмотрим, что здесь происходит. Сначала мы объявляем переменную someArray как пустой массив и переменную i со значением 0. Затем мы определяем цикл wile, который выполняет две операции на каждой итерации. Он помещает значение i в массив someArray, а затем увеличивает значение i.

Для петель

Циклы For выполняются «за» определенное количество раз.

Как видите, этот цикл for сконфигурирован так, чтобы делать то же самое, что и цикл while в предыдущем примере. Давайте рассмотрим, что здесь происходит. Мы, как и раньше, объявляем переменную someArray для хранения значений. Затем мы определяем цикл for с переменной i=0, затем условие для его запуска, если i меньше 5, после чего следует команда для увеличения i на каждой итерации. Но то, что делает этот цикл, точно такое же, как и раньше. Он будет подталкивать i к someArray на каждой итерации.

Делай, пока петли

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

Хорошо !!! Вы дожили до конца. Вперед !!!!

Это ваши первые шаги в этом удивительно мощном языке программирования под названием JavaScript.

Теперь я считаю эти концепции базовыми. Но когда-то я был на вашем месте, и для человека, не имеющего опыта программирования, поначалу это может быть сложно. Не торопитесь. Секрет в том, чтобы немного практиковаться каждый день и никогда ... НИКОГДА ... не сдаваться !!

Желаю вам всей «удачи» в вашем путешествии и надеюсь, что программирование изменит вашу жизнь к лучшему, как изменило мою. Будьте сильными и Включите код;)