Полное руководство по JavaScript

// Объявление переменных
let name = "John";
const age = 30;
var isStudent = true;

// Вывод значений
console.log("Имя:", name);
console.log("Возраст:", age);
console.log("Студент:", isStudent);

// Изменение значения
name = "Jane";
console.log("Новое имя:", name);

// Попытка изменить константу вызовет ошибку
// age = 31; // Раскомментируйте эту строку, чтобы увидеть ошибку

// Типы данных
console.log("Тип name:", typeof name);
console.log("Тип age:", typeof age);
console.log("Тип isStudent:", typeof isStudent);

// Арифметические операторы
let a = 10;
let b = 3;
console.log("a + b =", a + b);
console.log("a - b =", a - b);
console.log("a * b =", a * b);
console.log("a / b =", a / b);
console.log("a % b =", a % b);

// Операторы сравнения
console.log("a > b:", a > b);
console.log("a < b:", a < b);
console.log("a >= b:", a >= b);
console.log("a <= b:", a <= b);
console.log("a === b:", a === b);
console.log("a !== b:", a !== b);

// Логические операторы
let x = true;
let y = false;
console.log("x && y:", x && y);
console.log("x || y:", x || y);
console.log("!x:", !x);

// Оператор объединения с null (??)
let value = null;
let defaultValue = "Default";
console.log("value ?? defaultValue:", value ?? defaultValue);

// Объявление функции
function greet(name) {
  return "Привет, " + name + "!";
}

// Вызов функции
console.log(greet("Мир"));

// Функция с параметрами по умолчанию
function greetWithDefault(name = "Гость") {
  return "Привет, " + name + "!";
}

console.log(greetWithDefault());
console.log(greetWithDefault("Алекс"));

// Стрелочные функции
const add = (a, b) => a + b;
console.log("Результат сложения:", add(5, 3));

// Создание объекта
const person = {
  name: "John",
  age: 30,
  greet() {
    console.log("Привет, меня зовут " + this.name);
  }
};

// Доступ к свойствам объекта
console.log("Имя:", person.name);
console.log("Возраст:", person.age);
person.greet();

// Создание массива
const numbers = [1, 2, 3, 4, 5];

// Доступ к элементам массива
console.log("Первый элемент:", numbers[0]);
console.log("Последний элемент:", numbers[numbers.length - 1]);

// Добавление и удаление элементов массива
numbers.push(6);
console.log("Массив после добавления элемента:", numbers);
numbers.pop();
console.log("Массив после удаления элемента:", numbers);

// Цикл for
for (let i = 0; i < 5; i++) {
  console.log("Цикл for, итерация:", i);
}

// Цикл while
let count = 0;
while (count < 5) {
  console.log("Цикл while, значение count:", count);
  count++;
}

// Цикл do...while
let j = 0;
do {
  console.log("Цикл do...while, итерация:", j);
  j++;
} while (j < 5);

// Пример с использованием setTimeout
console.log("Начало");

setTimeout(() => {
  console.log("Асинхронная операция выполнена");
}, 2000);

console.log("Конец");

// Работа с промисами
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Данные получены");
    }, 3000);
  });
};

fetchData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error("Ошибка:", error);
});

// Асинхронная функция (async/await)
async function getData() {
  try {
    const data = await fetchData();
    console.log("Данные:", data);
  } catch (error) {
    console.error("Ошибка:", error);
  }
}

getData();

// "Экспорт" функции (условно)
// Пример: В отдельном файле greet.js
// export function greet(name) {
//   return "Привет, " + name + "!";
// }

// "Импорт" функции (в текущем файле)
// Пример: В другом файле main.js
// import { greet } from './greet.js';
// console.log(greet("Мир"));

// В нашем случае все в одном файле:
function greet(name) {
  return "Привет, " + name + "!";
}

console.log(greet("Мир"));

// Обработка ошибок с использованием try...catch
try {
  // Потенциально опасный код
  let result = 10 / 0;
  if (result === Infinity) {
    throw new Error("Деление на ноль!");
  }
  console.log("Результат:", result);
} catch (error) {
  console.error("Ошибка:", error.message);
} finally {
  console.log("Этот блок выполнится в любом случае");
}

// Пример с использованием асинхронной функции
async function fetchData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    if (!response.ok) {
      throw new Error("Ошибка сети");
    }
    let data = await response.json();
    console.log("Данные получены:", data);
  } catch (error) {
    console.error("Ошибка при загрузке данных:", error.message);
  }
}

fetchData();

// Создаем новый элемент
const newElement = document.createElement('div');
newElement.textContent = 'Это новый элемент, созданный с помощью JavaScript';
newElement.style.color = 'blue';
newElement.style.marginBottom = '10px';
playground.appendChild(newElement);

// Изменяем существующий элемент
const existingElement = document.createElement('p');
existingElement.textContent = 'Это существующий элемент';
playground.appendChild(existingElement);

setTimeout(() => {
  existingElement.style.backgroundColor = 'yellow';
  existingElement.textContent = 'Текст и стиль этого элемента были изменены';
}, 2000);

// Добавляем обработчик события
const button = document.createElement('button');
button.textContent = 'Нажми меня';
button.addEventListener('click', () => {
  alert('Кнопка была нажата!');
});
playground.appendChild(button);

console.log('Код выполнен успешно!');