Карта сайта

Урок 3: Основные понятия JavaScript’а

/Уроки по JavaScript/Урок 3: Основные понятия JavaScript’а
Урок 3: Основные понятия JavaScript’а
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

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

Синтаксис JavaScript’а

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

1. Переменные и их объявление

Переменные это «контейнеры» для хранения данных. В JavaScript их можно создавать с помощью ключевых слов let, const и var (но о var поговорим позже, так как сейчас чаще используют let и const).

Пример:

let userName = "Максим"; // Переменная может изменяться
const birthYear = 1990;   // Константа: значение нельзя изменить

Правила именования переменных:

  • Имя может содержать буквы, цифры, символы $ и _.
  • Первый символ не должен быть цифрой.
  • Регистр букв важен: user и User — разные переменные.
  • Используйте camelCase для сложных названий: myFavoriteColor.

Ошибка:

let 1user = "Ошибка"; // Начинается с цифры — так нельзя!

2. Точки с запятой

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

Пример:

let a = 5;
let b = 10;
console.log(a + b); // 15

3. Ключевые слова

JavaScript имеет зарезервированные слова, которые нельзя использовать как имена переменных: if, for, function и т.д.

Ошибка:

let function = "Неправильно"; // Так делать нельзя!

4. Блоки кода и фигурные скобки

Фигурные скобки {} используются для группировки операторов, например в функциях, циклах и условиях.

Пример:

if (userAge >= 18) {
  console.log("Добро пожаловать!");
} else {
  console.log("Доступ запрещен.");
}

Комментарии в коде

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

Однострочные комментарии

Начинаются с // и действуют до конца строки.

Пример:

let price = 100; // Цена товара в рублях

Многострочные комментарии

Обрамляются символами /* */.

Пример:

/* 
   Этот код рассчитывает 
   итоговую стоимость заказа.
*/
let total = price * quantity;

Не злоупотребляйте комментариями. Пишите их только там, где логика неочевидна. Например:

// Плохо:
let x = 5; // Присвоить x значение 5

// Хорошо:
let discount = 0.15; // Скидка 15% для постоянных клиентов

Семантика и форматирование кода

Семантика это «смысл» кода, а форматирование его внешний вид. Даже если код работает, его читаемость критически важна.

1. Отступы и пробелы

Используйте отступы (2 или 4 пробела) для вложенных блоков.

Плохо:

function calcSum(a,b){
return a + b;
}

Хорошо:

function calcSum(a, b) {
  return a + b;
}

2. Единый стиль именования

Придерживайтесь одного стиля в проекте. Например:

  • camelCase для переменных: userName.
  • PascalCase для классов: class UserProfile.
  • CONSTANT_CASE для констант: const MAX_USERS = 100.

3. Длина строки

Старайтесь не превышать 80 символов в строке. Это упрощает чтение кода.

Пример:

// Слишком длинно:
let message = "Привет! Добро пожаловать на курс по JavaScript для начинающих от Максима. Здесь вы научитесь основам программирования.";

// Лучше:
let message = "Привет! Добро пожаловать на курс по JavaScript для начинающих. " +
              "Здесь вы научитесь основам программирования.";

Практические задачи

Задача 1: Переменные и комментарии

Создайте переменные для описания книги:

  • Название.
  • Автор.
  • Год издания.
    Добавьте комментарии к каждой переменной.

Решение:

// Название книги
let bookTitle = "JavaScript: Полное руководство";

// Автор
let author = "Дэвид Флэнаган";

// Год издания
const publishYear = 2022;

Задача 2: Форматирование кода

Отформатируйте этот код, исправив отступы и пробелы:

function sayHello(name){console.log("Привет, "+name);
}
sayHello("Максим");

Исправленный вариант:

function sayHello(name) {
  console.log("Привет, " + name);
}

sayHello("Максим");

Задача 3: Семантические ошибки

Найдите ошибки в коде:

let 123user = "Anna";
const let = 10;
console.log(Let + 123user);

Исправление:

let user123 = "Anna";
const maxValue = 10;
console.log(maxValue + user123); // "10Anna"

Заключение

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

Практикуйтесь каждый день! Попробуйте написать собственные примеры, экспериментируйте с переменными и комментариями.

Полный курс «JavaScript для начинающих» доступен по ссылке:
https://max-gabov.ru/javascript-dlya-nachinaushih