JavaScript - Синтаксис: руковод для начинающих

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

Синтаксис JavaScript: строительные блоки кода

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

Ваш первый код на JavaScript

Давайте начнем с простого примера программы "Hello, World!". Это часто первая программа, которую вы пишете, когда учитесь новому языку.

console.log("Hello, World!");

Когда вы запустите этот код, вы увидите "Hello, World!" в консоли. Давайте разберем это:

• console - это объект, предоставляемый JavaScript, который дает нам доступ к отладочной консоли браузера.
• .log() - это метод объекта console, который выводит переданный аргумент.
• "Hello, World!" - это строка (последовательность символов), которую мы хотим вывести.

Значения в JavaScript

В JavaScript мы работаем с различными типами значений. Основные типы включают:

1. Числа: 42, 3.14
2. Строки: "Hello", 'JavaScript'
3. Булевы значения: true, false
4. Объекты: {name: "John", age: 30}
5. Массивы: [1, 2, 3, 4]
6. Функции: function greet() { console.log("Hi!"); }

Вот пример использования различных типов значений:

let age = 25;  // Number
let name = "Alice";  // String
let isStudent = true;  // Boolean
let person = {name: "Bob", age: 30};  // Object
let numbers = [1, 2, 3, 4, 5];  // Array

console.log(age);  // Выводит: 25
console.log(name);  // Выводит: Alice
console.log(isStudent);  // Выводит: true
console.log(person.name);  // Выводит: Bob
console.log(numbers[2]);  // Выводит: 3

Пробелы и переносы строк

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

let x = 5;
let y = 10;
let z = x + y;

// Это эквивалентно:
let x=5;let y=10;let z=x+y;

// И даже это:
let x = 5
let y = 10
let z = x + y

Точки с запятой являются可选ными

В JavaScript точки с запятой в конце операторов являются可选ными. Однако считается хорошей практикой включать их.

let a = 5;  // С точкой с запятой
let b = 10  // Без точки с запятой

// Оба варианта допустимы, но включение точек с запятой рекомендуется

Регистрозависимость

JavaScript чувствителен к регистру. Это означает, что myVariable, MyVariable и MYVARIABLE - это все разные переменные.

let myVariable = "Hello";
let MyVariable = "World";

console.log(myVariable);  // Выводит: Hello
console.log(MyVariable);  // Выводит: World

JavaScript и骆驼_case

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

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

console.log(fullName);  // Выводит: John Doe

Ключевые слова JavaScript

JavaScript имеет набор зарезервированных слов, которые нельзя использовать в качестве имен переменных. Эти слова называются ключевыми словами. Вот некоторые из них:

Ключевое слово	Описание
let	Объявляет блок-scoped переменную
const	Объявляет блок-scoped, неизменяемую константу
if	Отмечает блок операторов для выполнения при условии
for	Отмечает блок операторов для выполнения в цикле
function	Объявляет функцию
return	Выход из функции
true	Boolean значение
false	Boolean значение

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

Идентификатор - это имя, которое вы даете переменной, функции или свойству. Вот правила для допустимых идентификаторов:

1. Может содержать буквы, цифры, underscores и долларовые знаки
2. Должен начинаться с буквы, underscores или долларового знака
3. Чувствителен к регистру
4. Не может быть зарезервированным словом

// Допустимые идентификаторы
let myVariable = 5;
let _privateVar = 10;
let $specialVar = 15;

// Недопустимые идентификаторы
// let 123abc = 20;  // Нельзя начинать с числа
// let my-var = 25;  // Нельзя использовать тире
// let let = 30;     // Нельзя использовать зарезервированные слова

Комментарии в JavaScript

Комментарии используются для добавления заметок к вашему коду или для предотвращения выполнения определенных частей кода. В JavaScript есть два типа комментариев:

// Это однoliniannyi комментарий

/*
This is a
multi-line comment
*/

let x = 5;  // Вы также можете добавлять комментарии в конце строки

Операторы в JavaScript

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

Оператор	Описание	Пример
+	Сложение	5 + 3
-	Вычитание	5 - 3
*	Умножение	5 * 3
/	Деление	15 / 3
%	Modulus (остаток)	5 % 2
++	Увеличение	x++
--	Уменьшение	x--
==	Равно	5 == 5
===	Strictly равно	5 === "5"
!=	Не равно	5 != 3
>	Больше	5 > 3
<	Меньше	3 < 5

Выражения в JavaScript

Выражение - это комбинация значений, переменных и операторов, которая evaluates к значению. Вот несколько примеров:

let x = 5;
let y = 3;

console.log(x + y);  // Выводит: 8
console.log(x * y);  // Выводит: 15
console.log(x > y);  // Выводит: true
console.log(x === "5");  // Выводит: false

Набор символов JavaScript

JavaScript использует набор символов Unicode. Это означает, что он может работать с символами из многих разных языков и emoji! Вот забавный пример:

let greeting = "Hello! ?";
let name = "Alice";
console.log(greeting + " " + name);  // Выводит: Hello! ? Alice

И вот и все,folks! Мы рассмотрели основы синтаксиса JavaScript. Помните, что практика делает perfect. Не волнуйтесь, если все не сойдется сразу - это совершенно нормально. Продолжайте экспериментировать, продолжайте программировать и, самое главное, продолжайте наслаждаться процессом!

В следующем уроке мы углубимся в переменные и типы данных. Пока что, счастливого кодирования! ??‍??‍?

Credits: Image by storyset