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

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

Мы рассмотрим JavaScript с точки зрения клиентской части (внешней части), но JS может быть внешней и внутренней частью.

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

Идентификаторы и классы

Будучи уже знакомым с HTML и CSS, вы сталкивались с идентификаторами и классами. Вместо того, чтобы использовать их только для стилизации определенных элементов и компонентов, JavaScript позволяет нам нацеливаться на эти идентификаторы или классы, добавлять интерактивность и управлять их поведением, прослушивая клики, добавляя элементы и удаляя элементы… почти все, о чем вы могли подумать, мы может сделать с JavaScript.

Синтаксис

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

Дело в том, что это пока не должно иметь смысла. Особенно, если у вас нет большого опыта программирования. Что вам нужно сделать, так это ввести его, поиграть с ним, сломать, удалить и повторить все заново. Вот как вы начинаете замечать закономерности, и это все, что нужно для программирования на раннем этапе — распознавание закономерностей. Со временем вы начнете узнавать больше таких паттернов, находить новые «строительные блоки» и начнете создавать более сложные вещи. То, чего вы хотите избежать на раннем этапе, — это зацикленность на том, как называются вещи, попытки запомнить все, что вы видите ... терминология сейчас не имеет значения. Лучше создавать что-то новое, чем три часа листать MDN.

При этом давайте посмотрим на JavaScript.

Переменные

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

let age = 20

пусть возраст-декларация

возраст = 20- задание

Думайте об этом как о информационных корзинах. Мы создаем ведро, даем ему имя (объявление) и помещаем в него что-то (назначение).

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

let — одно из специальных (резервных) слов, которые JavaScript ищет и понимает. Когда он видит let, в JS срабатывает сигнал тревоги, сообщающий, что кто-то пытается создать корзину данных. Он создает пространство в памяти, и мы, по сути, создали новое пространство в памяти, называемое возрастом, и сохранили значение 20 в этом пространстве.

Теперь предположим, что мы хотим сохранить местоположение — создайте для него корзину.

В этом случае шагом объявления будет let location (создание нового пространства в памяти с именем location

Шагом назначения будет location = «London», и мы также можем записать его вместе как let location = “London"

Теперь мы действительно можем начать использовать эти вещи, которые мы сохранили в памяти. Я могу сказать «Дейв в возрасте, Дэйв в локации». Мы пытаемся использовать эти переменные, и он говорит "Дэйву 25, Дэйв в Лондоне".

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

Переменные и типы данных

До сих пор мы видели два типа данных:

Числа — 20

Строка (просто причудливый способ сказать текст) — Лондон

Строка всегда заключена в кавычки — одинарные или двойные — или в галочки (`), но сейчас мы сосредоточимся на кавычках.

Какие бы кавычки вы ни использовали снаружи, вы не можете использовать их внутри (без некоторых трюков).

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

Получаем две отдельные строки. То, что попытается сделать JavaScript, — это найти переменную с именем «перемещено», и мы получим ошибку, потому что в памяти нет ничего с именем «перемещено» — мы не объявили это.

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

Числа и арифметика

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

интервал: +6

поплавок: -5.12385

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

Условные

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

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

Условный синтаксис

if (condition is true) {
    // do this thing
} else if (condition is true) {
    // do this other thing
} else {
    // default thing
}

У вас может быть столько других «если», сколько вы хотите, и как только вы наткнетесь на что-то, что является правдой, оно запустится и остановится. Дальше не проверяет.

Оператор Else является «по умолчанию», запасным вариантом, если ни одно из условий не выполняется.

const food = "pizza"
if (food === "cheeseburger") {
    console.log("Not bad")
} else if (food === "pizza") {
    console.log("Dominos!")
} else {
    console.log("Are you even trying?")
}

В данном случае мы использовали const вместо let. Использование const означает, что мы не сможем его переназначить. Это означает, что в этом случае едой всегда будет пицца и ничего больше.

Несколько условий

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

if (name === "Tony" && state === "captured") {
    //Build a mechanised suit of armour
}
  • если его зовут Тони И он схвачен для создания оружия массового уничтожения, он строит бронированный костюм.
if (day === "Saturday" || day === "Sunday") {
    //It is the weekend
}
  • если это суббота ИЛИ воскресенье, это означает, что это выходные

В следующий раз мы пройдемся по некоторым реальным программам и увидим их в действии, но вы можете увидеть несколько примеров на моем GitHub, если хотите поиграть с ними!