Начни изучать JavaScript прямо сейчас: 10 простых примеров кода для новичков

// Выводит сообщение в консоль
console.log("Привет, мир!");

// Показывает всплывающее окно
alert("Привет, JavaScript!");

// Запрашиваем у пользователя два числа
let num1 = prompt("Введите первое число:");
let num2 = prompt("Введите второе число:");

// Преобразуем строковые значения в числа
num1 = Number(num1);
num2 = Number(num2);

// Вычисляем и выводим результат
let sum = num1 + num2;
alert("Сумма: " + sum);

let number = prompt("Введите число для проверки на чётность:");
number = parseInt(number);

if (number % 2 === 0) {
alert(number + " — чётное число");
} else {
alert(number + " — нечётное число");
}

// Получаем минимальное и максимальное значения
let min = parseInt(prompt("Введите минимальное значение:"));
let max = parseInt(prompt("Введите максимальное значение:"));

// Генерируем и выводим случайное число
let randomNumber = Math.floor(Math.random() * (max – min + 1)) + min;
alert("Случайное число между " + min + " и " + max + ": " + randomNumber);

let celsius = parseFloat(prompt("Введите температуру в градусах Цельсия:"));
let fahrenheit = (celsius * 9/5) + 32;
alert(celsius + "°C = " + fahrenheit + "°F");

// Конвертация в обратном направлении
let fahrenheitInput = parseFloat(prompt("Введите температуру в градусах Фаренгейта:"));
let celsiusOutput = (fahrenheitInput – 32) * 5/9;
alert(fahrenheitInput + "°F = " + celsiusOutput.toFixed(2) + "°C");

// Генерируем случайное число от 1 до 100
let secretNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
let guess;

// Запускаем цикл игры
do {
guess = parseInt(prompt("Угадайте число от 1 до 100:"));
attempts++;

if (guess < secretNumber) {
alert("Загаданное число больше!");
} else if (guess > secretNumber) {
alert("Загаданное число меньше!");
} else {
alert("Поздравляем! Вы угадали число " + secretNumber + " за " + attempts + " попыток.");
}
} while (guess !== secretNumber);

let text = prompt("Введите текст для проверки на палиндром:");
// Приводим к нижнему регистру и убираем пробелы
text = text.toLowerCase().replace(/\s/g, '');

// Переворачиваем строку и сравниваем с оригиналом
let reversed = text.split('').reverse().join('');

if (text === reversed) {
alert("Это палиндром!");
} else {
alert("Это не палиндром.");
}

let seconds = parseInt(prompt("Введите количество секунд для обратного отсчёта:"));
let countdown = setInterval(function() {
if (seconds <= 0) {
clearInterval(countdown);
alert("Время вышло!");
} else {
console.log("Осталось секунд: " + seconds);
seconds--;
}
}, 1000);

let date1 = new Date(prompt("Введите первую дату в формате ГГГГ-ММ-ДД:"));
let date2 = new Date(prompt("Введите вторую дату в формате ГГГГ-ММ-ДД:"));

// Вычисляем разницу в миллисекундах и переводим в дни
let timeDiff = Math.abs(date2.getTime() – date1.getTime());
let dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));

alert("Между указанными датами " + dayDiff + " дней.");

// Курсы валют (упрощённо)
const rates = {
USD: 1,
EUR: 0.85,
GBP: 0.73,
JPY: 110.5,
RUB: 73.2
};

let amount = parseFloat(prompt("Введите сумму:"));
let fromCurrency = prompt("Введите исходную валюту (USD, EUR, GBP, JPY, RUB):").toUpperCase();
let toCurrency = prompt("Введите целевую валюту (USD, EUR, GBP, JPY, RUB):").toUpperCase();

// Конвертация через USD как базовую валюту
let inUSD = amount / rates[fromCurrency];
let result = inUSD * rates[toCurrency];

alert(amount + " " + fromCurrency + " = " + result.toFixed(2) + " " + toCurrency);

// Создаём массив чисел
let numbers = [12, 45, 3, 78, 23, 56, 9];

// Инициализируем переменную для хранения наибольшего числа
let max = numbers[0];

// Используем цикл для перебора всех элементов массива
for (let i = 1; i < numbers.length; i++) {
// Если текущий элемент больше, чем максимальный, обновляем максимум
if (numbers[i] > max) {
max = numbers[i];
}
}

console.log("Наибольшее число в массиве: " + max);

// Определяем функцию для вычисления площади прямоугольника
function calculateArea(width, height) {
return width * height;
}

// Определяем функцию для вычисления площади круга
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}

// Используем функции
let rectangleArea = calculateArea(5, 10);
let circleArea = calculateCircleArea(7);

console.log("Площадь прямоугольника: " + rectangleArea);
console.log("Площадь круга: " + circleArea.toFixed(2));

function countVowels(text) {
// Приводим текст к нижнему регистру
text = text.toLowerCase();

// Определяем гласные
const vowels = ['a', 'e', 'i', 'o', 'u', 'а', 'е', 'ё', 'и', 'о', 'у', 'ы', 'э', 'ю', 'я'];

// Инициализируем счётчик
let count = 0;

// Перебираем каждый символ в строке
for (let i = 0; i < text.length; i++) {
// Если символ является гласной, увеличиваем счётчик
if (vowels.includes(text[i])) {
count++;
}
}

return count;
}

let text = prompt("Введите текст для подсчёта гласных:");
let vowelCount = countVowels(text);
alert("В тексте содержится " + vowelCount + " гласных букв.");

// Создаём объект, описывающий книгу
let book = {
title: "JavaScript для начинающих",
author: "Иван Петров",
year: 2023,
pages: 320,

// Метод для получения информации о книге
getInfo: function() {
return this.title + " от " + this.author + ", " + this.year + " год, " + this.pages + " стр.";
},

// Метод для определения возраста книги
getAge: function() {
return new Date().getFullYear() – this.year;
}
};

// Используем методы объекта
console.log(book.getInfo());
console.log("Этой книге " + book.getAge() + " лет.");

// Создаём строку для хранения таблицы умножения
let multiplicationTable = "";

// Внешний цикл для строк
for (let i = 1; i <= 10; i++) {
// Внутренний цикл для столбцов
for (let j = 1; j <= 10; j++) {
// Добавляем результат умножения в строку с выравниванием
multiplicationTable += (i * j).toString().padStart(4, ' ');
}
// Добавляем перенос строки после каждой строки таблицы
multiplicationTable += "\n";
}

console.log(multiplicationTable);

// HTML: <button id="colorButton">Изменить цвет</button>
// HTML: <div id="colorBox" style="width: 100px; height: 100px; background-color: blue;"></div>

// Получаем ссылки на элементы
const button = document.getElementById("colorButton");
const box = document.getElementById("colorBox");

// Добавляем обработчик события клика
button.addEventListener("click", function() {
// Генерируем случайный цвет
const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);

// Меняем цвет элемента
box.style.backgroundColor = randomColor;
});

// HTML: <div id="slider">
// <img id="slideImage" src="image1.jpg" alt="Slide">
// <button id="prevButton">Предыдущее</button>
// <button id="nextButton">Следующее</button>
// </div>

// Массив путей к изображениям
const images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
let currentImageIndex = 0;

// Получаем ссылки на элементы
const slideImage = document.getElementById("slideImage");
const prevButton = document.getElementById("prevButton");
const nextButton = document.getElementById("nextButton");

// Функция для смены изображения
function showImage(index) {
slideImage.src = images[index];
}

// Обработчик для кнопки "Следующее"
nextButton.addEventListener("click", function() {
currentImageIndex++;
if (currentImageIndex >= images.length) {
currentImageIndex = 0;
}
showImage(currentImageIndex);
});

// Обработчик для кнопки "Предыдущее"
prevButton.addEventListener("click", function() {
currentImageIndex--;
if (currentImageIndex < 0) {
currentImageIndex = images.length – 1;
}
showImage(currentImageIndex);
});

// HTML: <form id="registrationForm">
// <input type="text" id="username" placeholder="Имя пользователя">
// <input type="email" id="email" placeholder="Email">
// <input type="password" id="password" placeholder="Пароль">
// <button type="submit">Зарегистрироваться</button>
// <div id="errorMessage"></div>
// </form>

// Получаем ссылку на форму и элемент для вывода ошибок
const form = document.getElementById("registrationForm");
const errorMessage = document.getElementById("errorMessage");

// Добавляем обработчик события отправки формы
form.addEventListener("submit", function(event) {
// Отменяем стандартное поведение формы
event.preventDefault();

// Получаем значения полей
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;

// Очищаем предыдущие сообщения об ошибках
errorMessage.textContent = "";

// Проверяем длину имени пользователя
if (username.length < 3) {
errorMessage.textContent = "Имя пользователя должно содержать минимум 3 символа";
return;
}

// Проверяем корректность email через регулярное выражение
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
errorMessage.textContent = "Пожалуйста, введите корректный email";
return;
}

// Проверяем надёжность пароля
if (password.length < 8) {
errorMessage.textContent = "Пароль должен содержать минимум 8 символов";
return;
}

// Если все проверки пройдены, "отправляем" данные
alert("Регистрация успешна!");
form.reset();
});

// HTML: <button id="clickButton">Нажми меня</button>
// HTML: <div id="clickCounter">Кликов: 0</div>

// Получаем ссылки на элементы
const clickButton = document.getElementById("clickButton");
const clickCounter = document.getElementById("clickCounter");

// Инициализируем счётчик
let clicks = 0;

// Добавляем обработчик события клика
clickButton.addEventListener("click", function() {
// Увеличиваем счётчик
clicks++;

// Обновляем отображаемое значение
clickCounter.textContent = "Кликов: " + clicks;

// Меняем стиль кнопки при каждом десятом клике
if (clicks % 10 === 0) {
clickButton.style.backgroundColor = "gold";
setTimeout(() => {
clickButton.style.backgroundColor = "";
}, 300);
}
});

// HTML: <div id="clock"></div>

// Получаем ссылку на элемент для отображения времени
const clock = document.getElementById("clock");

// Функция для обновления времени
function updateClock() {
// Получаем текущее время
const now = new Date();

// Форматируем часы, минуты и секунды
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');

// Обновляем текстовое содержимое элемента
clock.textContent = hours + ":" + minutes + ":" + seconds;

// Меняем цвет в зависимости от секунд (просто для забавы)
const hue = (now.getSeconds() * 6); // 0-360
clock.style.color = `hsl(${hue}, 70%, 50%)`;
}

// Вызываем функцию сразу и затем каждую секунду
updateClock();
setInterval(updateClock, 1000);

function countEvenNumbers(arr) {
let count = 0;

for (let i = 0; i < arr.length; i++) {
if (arr[i] % 2 === 0) {
count++;
}
}

return count;
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("Количество чётных чисел: " + countEvenNumbers(numbers));

function reverseString(str) {
// Преобразуем строку в массив символов, переворачиваем и объединяем
return str.split('').reverse().join('');

// Альтернативный способ через цикл:
// let reversed = '';
// for (let i = str.length – 1; i >= 0; i--) {
// reversed += str[i];
// }
// return reversed;
}

const original = "JavaScript";
console.log(reverseString(original)); // tpircSavaJ

function sumDigits(number) {
// Преобразуем число в строку для перебора цифр
const digits = Math.abs(number).toString();
let sum = 0;

for (let i = 0; i < digits.length; i++) {
sum += parseInt(digits[i]);
}

return sum;
}

console.log(sumDigits(12345)); // 15 (1+2+3+4+5)
console.log(sumDigits(-987)); // 24 (9+8+7)

function filterByLength(arr, minLength) {
// Возвращаем новый массив, содержащий только элементы
// с длиной не менее minLength
return arr.filter(item => item.length >= minLength);
}

const words = ["apple", "banana", "kiwi", "grape", "pineapple"];
console.log(filterByLength(words, 6)); // ["banana", "pineapple"]

function findUnique(arr) {
// Используем Set для хранения уникальных значений
return [...new Set(arr)];

// Альтернативный способ через filter:
// return arr.filter((item, index) => arr.indexOf(item) === index);
}

const mixedArray = [1, 2, 2, 3, 4, 4, 5, 1];
console.log(findUnique(mixedArray)); // [1, 2, 3, 4, 5]

function groupBy(arr, key) {
// Создаём объект для группировки
const grouped = {};

arr.forEach(item => {
// Получаем значение ключа
const keyValue = item[key];

// Если такого ключа ещё нет в объекте, создаём массив
if (!grouped[keyValue]) {
grouped[keyValue] = [];
}

// Добавляем элемент в соответствующий массив
grouped[keyValue].push(item);
});

return grouped;
}

const people = [
{ name: "Anna", age: 25 },
{ name: "Boris", age: 30 },
{ name: "Clara", age: 25 },
{ name: "David", age: 30 },
{ name: "Emma", age: 22 }
];

console.log(groupBy(people, "age"));
// Результат:
// {
// "22": [{ name: "Emma", age: 22 }],
// "25": [{ name: "Anna", age: 25 }, { name: "Clara", age: 25 }],
// "30": [{ name: "Boris", age: 30 }, { name: "David", age: 30 }]
// }

function delay(ms) {
// Возвращаем Promise, который разрешится через ms миллисекунд
return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
console.log("Начало");
await delay(2000); // Ждём 2 секунды
console.log("Прошло 2 секунды");
await delay(1000); // Ждём ещё 1 секунду
console.log("Прошло ещё 1 секунду");
}

example();

// HTML: <div id="listContainer"></div>

function createList(items) {
// Получаем контейнер
const container = document.getElementById("listContainer");

// Создаём элемент списка
const ul = document.createElement("ul");

// Добавляем каждый элемент в список
items.forEach(item => {
const li = document.createElement("li");
li.textContent = item;

// При клике меняем стиль элемента
li.addEventListener("click", function() {
this.style.textDecoration = 
this.style.textDecoration === "line-through" ? 
"none" : "line-through";
});

ul.appendChild(li);
});

// Добавляем список в контейнер
container.appendChild(ul);
}

createList(["Изучить HTML", "Освоить CSS", "Выучить JavaScript", "Создать проект"]);

// HTML:
// <div id="expenseTracker">
// <h2>Калькулятор расходов</h2>
// <div>
// <input type="text" id="expenseName" placeholder="Название">
// <input type="number" id="expenseAmount" placeholder="Сумма">
// <button id="addExpense">Добавить</button>
// </div>
// <ul id="expenseList"></ul>
// <div id="totalExpense">Общая сумма: 0</div>
// </div>

// Получаем ссылки на элементы DOM
const expenseName = document.getElementById("expenseName");
const expenseAmount = document.getElementById("expenseAmount");
const addExpenseButton = document.getElementById("addExpense");
const expenseList = document.getElementById("expenseList");
const totalExpenseDisplay = document.getElementById("totalExpense");

// Инициализируем массив для хранения расходов и общую сумму
let expenses = [];
let totalExpense = 0;

// Функция для добавления нового расхода
function addExpense() {
// Получаем значения из полей ввода
const name = expenseName.value.trim();
const amount = parseFloat(expenseAmount.value);

// Проверяем корректность ввода
if (name === "" || isNaN(amount) || amount <= 0) {
alert("Пожалуйста, введите корректное название и сумму расхода");
return;
}

// Создаём новый объект расхода
const expense = {
id: Date.now(), // Уникальный идентификатор
name: name,
amount: amount
};

// Добавляем расход в массив
expenses.push(expense);

// Обновляем общую сумму
totalExpense += amount;

// Обновляем отображение
updateExpenseList();
updateTotalExpense();

// Очищаем поля ввода
expenseName.value = "";
expenseAmount.value = "";
expenseName.focus();
}

// Функция для удаления расхода
function removeExpense(id) {
// Находим индекс расхода в массиве
const index = expenses.findIndex(expense => expense.id === id);

if (index !== -1) {
// Вычитаем сумму удаляемого расхода из общей суммы
totalExpense -= expenses[index].amount;

// Удаляем расход из массива
expenses.splice(index, 1);

// Обновляем отображение
updateExpenseList();
updateTotalExpense();
}
}

// Функция для обновления списка расходов
function updateExpenseList() {
// Очищаем текущий список
expenseList.innerHTML = "";

// Добавляем каждый расход в список
expenses.forEach(expense => {
const li = document.createElement("li");
li.innerHTML = `
<span>${expense.name}: ${expense.amount.toFixed(2)}</span>
<button class="deleteButton" data-id="${expense.id}">Удалить</button>
`;

expenseList.appendChild(li);
});

// Добавляем обработчики для кнопок удаления
document.querySelectorAll(".deleteButton").forEach(button => {
button.addEventListener("click", function() {
const id = parseInt(this.getAttribute("data-id"));
removeExpense(id);
});
});
}

// Функция для обновления общей суммы расходов
function updateTotalExpense() {
totalExpenseDisplay.textContent = `Общая сумма: ${totalExpense.toFixed(2)}`;
}

// Добавляем обработчик события для кнопки добавления расхода
addExpenseButton.addEventListener("click", addExpense);

// Добавляем обработчик для клавиши Enter в полях ввода
expenseName.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
expenseAmount.focus();
}
});

expenseAmount.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
addExpense();
}
});

// HTML:
// <div id="pomodoroTimer">
// <h2>Таймер помидора</h2>
// <div id="timerDisplay">25:00</div>
// <div id="controls">
// <button id="startButton">Старт</button>
// <button id="pauseButton">Пауза</button>
// <button id="resetButton">Сброс</button>
// </div>
// <div id="sessionInfo">Работа</div>
// </div>

// Получаем ссылки на элементы DOM
const timerDisplay = document.getElementById("timerDisplay");
const startButton = document.getElementById("startButton");
const pauseButton = document.getElementById("pauseButton");
const resetButton = document.getElementById("resetButton");
const sessionInfo = document.getElementById("sessionInfo");

// Определяем константы для времени (в секундах)
const WORK_TIME = 25 * 60; // 25 минут
const BREAK_TIME = 5 * 60; // 5 минут

// Инициализируем переменные
let timeLeft = WORK_TIME;
let isRunning = false;
let isWorkSession = true;
let timerInterval;

// Функция для форматирования времени в формат MM:SS
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

// Функция для обновления отображения таймера
function updateDisplay() {
timerDisplay.textContent = formatTime(timeLeft);

// Устанавливаем соответствующий класс для изменения цвета
timerDisplay.className = isWorkSession ? "work" : "break";
sessionInfo.textContent = isWorkSession ? "Работа" : "Перерыв";
}

// Функция для запуска таймера
function startTimer() {
if (isRunning) return;

isRunning = true;
startButton.disabled = true;

timerInterval = setInterval(() => {
timeLeft--;

updateDisplay();

// Если время вышло
if (timeLeft <= 0) {
clearInterval(timerInterval);

// Переключаемся между сессиями работы и перерыва
isWorkSession = !isWorkSession;
timeLeft = isWorkSession ? WORK_TIME : BREAK_TIME;

// Воспроизводим звуковое уведомление
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
audio.play();

updateDisplay();
isRunning = false;
startButton.disabled = false;
}
}, 1000);
}

// Функция для приостановки таймера
function pauseTimer() {
if (!isRunning) return;

clearInterval(timerInterval);
isRunning = false;
startButton.disabled = false;
}

// Функция для сброса таймера
function resetTimer() {
pauseTimer();
isWorkSession = true;
timeLeft = WORK_TIME;
updateDisplay();
}

// Добавляем обработчики событий для кнопок
startButton.addEventListener("click", startTimer);
pauseButton.addEventListener("click", pauseTimer);
resetButton.addEventListener("click", resetTimer);

// Инициализируем отображение
updateDisplay();

// Добавляем стили
document.head.insertAdjacentHTML('beforeend', `
<style>
#timerDisplay {
font-size: 3rem;
margin: 20px 0;
transition: color 0.5s;
}

#timerDisplay.work {
color: #e74c3c;
}

#timerDisplay.break {
color: #3498db;
}

button {
margin: 0 5px;
padding: 8px 16px;
}
</style>
`);