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

Изучите основы JavaScript, от переменных до объектов, и создавайте собственные веб-проекты.

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

Темы, которые мы собираемся раскрыть:

1. Переменные.
2. Типы данных.
3. Условные заявления.
4. Область видимости в JS.
5. Объекты.
6. Массивы.
7. Функции.

1. Переменные:

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

В приведенном выше примере слово var указывает на то, что будет объявлена ​​переменная. Затем мы дали переменной имя, которое может иметь любое значение, например «имя», «фамилия» или «страна», чтобы впоследствии было легко определить, что представляет переменная.

После этого шага переменная объявляется, и вам решать, инициализировать ее значением или нет. В данном случае мы инициализировали переменную значением «Джеймс Бонд».

Мы обсудили два разных термина: объявление и инициализация. Объявление означает, что мы создаем переменную с именем, но еще не присваиваем ей значение, например, var name;.

С другой стороны, инициализация происходит, когда мы объявляем переменную и одновременно присваиваем ей значение. Например, var name = "Waleed”;. Сделав это, мы объявили переменную «имя» и инициализировали ее значением «Валид».

В JavaScript у нас есть три разных ключевых слова для объявления переменных: var, let и const. Хотя все три ключевых слова объявляют переменную, они имеют разное значение и назначение.

Как правило, var и let используются для объявления переменных, значения которых можно изменить позже в коде. Тем не менее, между ними есть некоторые различия, такие как объем, в котором они доступны.

С другой стороны, const используется для объявления переменных, значения которых нельзя изменить после инициализации. После инициализации константной переменной ее значение остается неизменным во всей программе.

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

Вот как мы объявляем/инициализируем переменные в javascript.На данный момент let и var имеют одинаковое поведение и функциональность. Мы обсудим их различия позже. Мы можем использовать функцию console.log для вывода любого оператора в JavaScript. Это часто используемая функция для отладки и отображения вывода в консоли.

2. Типы данных:

В javascript существуют разные типы, которые в основном делятся на две разные группы.

1. Примитивные типы данных.
2. Непримитивные типы данных.

Примитивные типы данных — это базовые типы данных, которые используются для хранения простых значений, таких как числа, строки и логические значения (True/False). Эти значения хранятся непосредственно в памяти/контейнере и передаются по значению (это означает, что значение копируется из одной переменной в другую), как показано в коде в разделе переменных. Примеры примитивных типов данных включают:

• Число: используется для хранения числовых значений, например 5 или 3,14.
• Строка: используется для хранения текста или символов, например «Привет, мир!».
• Boolean: используется для хранения истинных или ложных значений.

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

• Объект: используется для хранения набора пар ключ-значение, например {имя: «Джон», возраст: 25}.
• Массив: используется для хранения набора значений, например [1, 2, 3].

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

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

let firstName = "Waleed"
let copiedName = firstName
console.log(firstName) // Waleed
console.log(copiedName) // Waleed
copiedName = "Test"
console.log(firstName) // Waleed
console.log(copiedName) // Test

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

Вот что происходит, когда мы присваиваем непримитивный тип другой переменной.

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

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

if (condition){
  // code....
  // this whole area is represented as code block
}

if (true){
  // code executes in this whole code block
}

if (false){
  // no code will execute in this block
}

В этом примере мы определяем условие, определяющее, будет ли выполняться определенный блок кода. Блок кода представлен {…}, и по умолчанию мы используем «true», что означает, что блок всегда будет выполняться. Однако в реальных сценариях состояние оценивается в режиме реального времени на основе определенных параметров или пользовательского ввода.

let temp = 80
if (temp < 32){ // return false
  console.log("temprature is less than 32") // but this line will never
  // execute because value is greater than 32
}

Логические && и || операторы в javascript:

Мы используем логические операторы && и || для более сложных условий. Оператор && представляет собой оператор «и», что означает, что если оба условия выполняются, то блок кода будет выполнен. С другой стороны, оператор || представляет собой оператор «или», что означает, что если одно из условий истинно, то блок кода будет выполнен.

// Example of and operator &&
let isValid = true
let temp = 32

if (isValid && temp < 33){ // true
  // isValid will return true so the condition on left hand side of && is true
  // and temp < 33 or 32 < 33 which is also true so condition on both side of
  // && are true so overall will return true and this code block will execute.
  console.log("Condition is valid")
}
// Example of or operator ||
let isValid = false
let temp = 32

if (isValid || temp < 33){ // true
  // isValid will return false incase of and operator this code block will 
  // never executes but in this case the condition on right hand side of || is 
  // true so code block will execute
  console.log("Condition is valid")
}

если-иначе и если-иначе, если:

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

if (condition){
  // if value of "condition" returns true this whole code block will execute
}else{
  // if above "condition" variable is false or simple the above if statement/block
  // doesn't execute only then this block will execute
}
if (condition){
  // if value of "condition" returns true this whole code block will execute
  // and nothing below will get executed
}else if (condition2) {
  // if above condition was false and "condition2" returns true only then this
  // block will get executed
} else{
  // if both above conditions are not executed only then this will get executed.
}

4. Область видимости в Javascript:

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

• JS использует лексическую область видимости, что просто означает, что переменная, объявленная в одной части программы, может быть недоступна в других частях. Контекст, в котором была создана переменная, важен.
• Единственное, за чем нам нужно следить, это блок кода . Блок кода — это то, что находится внутри {} — это блок кода.
• Существует два типа области: одна — глобальная область, а другая — локальная область действия. переменные, объявленные в глобальной области, могут быть доступны в любом месте, в то время как переменные объявляются в локальной области. быть доступны только внутри их соответствующей области.

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

Разница между ключевыми словами var и let:

В разделе переменных блога мы предполагали, что var и let одинаковы, но на самом деле они разные. Переменные, объявленные с ключевым словом let, имеют лексическую область действия, а переменные, объявленные с ключевым словом var, — нет. Это означает, что когда мы объявляем переменную с ключевым словом var, она автоматически перемещается в верхнюю часть своей родительской/внешней области видимости, что может привести к непредсказуемости в коде. Мы уже обсуждали область действия в предыдущем разделе, и ключевое слово let ведет себя точно так же. Вот пример того, как ведет себя var:

В данном случае я изменил переменную temp2, заменив ключевое слово let на var. Это похоже на объявление temp2 вместе с temp1 во внешней области видимости. Вот почему мы говорим, что var ограничен функцией (мы обсудим функции в следующем разделе). Если мы объявим переменную с помощью var где-нибудь за пределами функции (внутри любого блока, например блока if-else), она будет автоматически поднята наверх функции, в данном случае — в глобальную область.

5. Объекты:

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

В Javascript мы можем создавать объекты с помощью фигурных скобок, например:

let person = {
  name: 'Waleed',
  age: 21,
  occupation: 'Software Developer'
}

В этом примере мы создаем объект с именем person, который имеет четыре свойства: name, age, occupation. Свойства name, age и occupation представляют собой простые значения (строки и числа). Мы можем получить доступ к его свойствам, используя запись через точку или скобки. Вот пример:

console.log(person.name); // output: 'Waleed'
console.log(person['age']); // output: 21

Мы также можем изменить свойства объекта, присвоив им новые значения:

person.age = 25;
console.log(person.age); // output: 25
console.log(person.name); // Waleed

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

В этом примере обе переменные user и admin указывают на один объект, который имеет одно свойство «имя». Таким образом, если внесены изменения, они автоматически повлияют на admin. Чтобы избежать этой проблемы, нам нужно создать две разные копии объекта, чтобы user указывало на его собственную копию, а admin указывало на его собственную копию, а не на один объект. Чтобы сделать копию объекта, мы можем использовать оператор распространения, который копирует каждую пару ключ-значение ссылочного объекта в новый объект. Например:

let user = {
  name: "Waleed"
}
let admin = user; // In this case both user and admin are pointing to single
// object as shown in above picture, to fix this we have to copy

let admin = {...user} // now admin is no longer pointing where user is pointing
// instead admin is pointing to it's own copy of object.

6. Массивы:

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

Мы можем определять массивы, используя литералы массивов, которые определяются с помощью квадратных скобок []. Пример:

let numbers = [1, 2, 3, 4, 5];
let strings = ["Waleed", "Rafi", "John"]
let mixed = [1, "Waleed", 1.2, false, {name: "Ali"}]

Когда у нас есть массив, мы можем получить доступ к его элементам, используя его индекс. В JavaScript массивы имеют нулевой индекс, что означает, что первый элемент имеет индекс 0, второй элемент имеет индекс 1 и так далее. Вот пример:

numbers[0] // 1
numbers[2] // 3
strings[2] // John
mixed[0] // 1
mixed[4] // {name: "Ali"}

Мы также можем изменять элементы массива, присваивая им новые значения:

numbers[1] = 10;
console.log(numbers); // output: [1, 10, 3, 4, 5]

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

7. Функции:

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

Вот простой пример:

В этом примере мы определяем функцию с именем «printSum», которая принимает два параметра (a и b) и печатает сумму двух значений. Затем мы вызываем функцию с аргументами 2 и 3, и эта функция выводит свою сумму.

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

В этом примере мы определяем функцию под названием «сумма», которая принимает два параметра и возвращает сумму двух значений. Затем мы вызываем функцию с аргументами 2 и 3, присваиваем результат переменной с именем «mySum1» и выводим его на консоль. Затем мы снова вызываем «сумму» с другими параметрами, и на этот раз мы получили сумму и присвоили ее переменной mySum2, затем я снова вызвал функцию суммы с предыдущими двумя суммами и в результате получил mySum3. Вот как легко мы упростили наш код вместо того, чтобы повторять одни и те же строки.

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

Кроме того, я хотел бы пригласить вас связаться со мной в LinkedIn и Twitter, где я регулярно делюсь идеями и отраслевыми новостями, связанными с темами, о которых я пишу. Вы можете найти меня на
LinkedIn: https://www.linkedin.com/in/waleedrafi/
Twitter: https://twitter.com/WaleedRafi10.

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

Еще раз спасибо за чтение, и я с нетерпением жду связи с вами!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

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