⚡ JavaScript

Установка и первая программа Hello World — JavaScript

Урок 2 / 35 • Полная теория для чтения

Что это и зачем?

Представь, что ты даёшь команды роботу. Ты говоришь: «Робот, включи свет», и он включает. Но чтобы робот понял, ему нужно говорить на специальном языке. Точно так же и с компьютером: чтобы он что-то сделал, ему нужно дать команду на языке программирования.

JavaScript (сокращённо JS) — это один из таких языков. Он очень популярен, потому что с его помощью можно «оживлять» веб-страницы. Когда ты заходишь на сайт и видишь, как картинка увеличивается при наведении мышки, или как выезжает меню, или как появляются всплывающие окошки — скорее всего, это сделано с помощью JavaScript.

Давай проведём аналогию. Представь, что ты учитель физкультуры. Ты говоришь ученикам: «Класс, встаньте!», «Поднимите правую руку!», «Сделайте шаг вперёд!». Если ты скажешь «Встаньте» на китайском, никто не поймёт. Нужен понятный язык. JavaScript — это как раз такой понятный язык для браузера (программы, через которую ты смотришь сайты, например, Chrome, Firefox, Safari).

Зачем учить JavaScript?

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

В этой статье мы научимся устанавливать «инструменты» для работы с JavaScript и напишем нашу самую первую программу — «Hello, World!». Это традиция всех программистов: первая программа всегда выводит это приветствие. Считай это как «первый шаг» в мире программирования.

Если ты уже знаком с Python: В Python ты писал print("Hello, World!"). В JavaScript это будет выглядеть немного иначе, но смысл тот же — показать текст на экране.

Примеры кода с объяснением

Прежде чем писать код, давай подготовим «рабочее место». Тебе понадобятся две вещи:

Браузер (Chrome, Firefox, Edge, Safari — любой подойдёт).
Текстовый редактор — программа, где ты будешь писать код. Самый простой вариант — это «Блокнот» (Windows) или «TextEdit» (Mac) в режиме обычного текста. Но лучше скачать специальный редактор, например, VS Code (Visual Studio Code) — он бесплатный и очень удобный.

Как проверить, что всё работает? Есть два способа запускать JavaScript:

Прямо в браузере (консоль): Нажми F12 (или Ctrl+Shift+I) на клавиатуре, открой вкладку «Console» (Консоль) и пиши код там. Это быстро, но неудобно для больших программ.
Через HTML-файл: Мы будем создавать файл с расширением .html, внутри которого будет наш JavaScript-код. Это правильный способ.

Давай начнём со второго способа. Создай новую папку на компьютере, назови её, например, «JS_уроки». Внутри создай файл с именем index.html (важно, чтобы расширение было .html, а не .txt). Открой этот файл в текстовом редакторе.

Вставь в него вот такой базовый шаблон:




    
    Моя первая программа



    

    




    
        🍪
        Сначала примите условия
        
            Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie.
            Мы используем их для авторизации и улучшения работы сайта.


            Политика конфиденциальности
        
        
        
    




    
        
            🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта.
            Продолжая пользоваться сайтом, вы соглашаетесь с нашей
            политикой конфиденциальности.

Теперь сохрани файл и открой его в браузере (просто дважды кликни по нему). Ты увидишь пустую страницу. Пока ничего не произошло, потому что мы не написали код. Давай это исправим!

Пример 1: Классический «Hello, World!»

Самый простой способ показать текст — использовать команду alert(). Она выводит всплывающее окошко с сообщением. Вставь следующий код между тегами <script> и </script>:

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

// alert() — это встроенная функция (как команда).
// Она показывает окно с сообщением.
alert('Привет, мир!'); // Текст, который мы хотим показать, пишем в кавычках.

Что произойдёт? Когда ты откроешь (или обновишь) страницу, появится окошко с текстом «Привет, мир!». Чтобы его закрыть, нужно нажать «ОК».

Разбор:

alert — это имя команды. Она говорит браузеру: «Покажи окошко».
Круглые скобки () — в них мы передаём то, что хотим сказать. В данном случае — текст.
Кавычки ' ' — они нужны, чтобы компьютер понял, что это именно текст, а не команда. Можно использовать и двойные кавычки " ".
Точка с запятой ; — это как точка в конце предложения. Она говорит: «Команда закончена». Ставить её нужно после каждой команды.

Сравнение с Python: В Python ты написал бы print("Привет, мир!"). Разница в том, что print выводит текст в консоль, а alert — во всплывающее окно.

Пример 2: Вывод в консоль разработчика

Всплывающие окошки — это не очень удобно, если нужно вывести много информации. Программисты чаще используют консоль — специальное место для отладки. Чтобы вывести туда текст, используется команда console.log().

Замени предыдущий код в <script> на этот:

// console — это объект (сложная структура), который отвечает за консоль.
// .log() — это метод (действие), которое записывает сообщение в консоль.

console.log('Это сообщение в консоли!');
console.log('Можно вывести число:', 42);
console.log('Можно вывести несколько значений через запятую:', 1, 2, 3);

Что произойдёт? На странице ничего не изменится — окошко не появится. Но если ты откроешь консоль (F12 → вкладка «Console»), то увидишь там три строчки с нашими сообщениями.

Почему это круто? Консоль — это как «чёрный ящик» программиста. Ты можешь выводить туда любую информацию, чтобы понять, что происходит в программе. Например, ты можешь проверить, правильно ли посчиталась сумма, или какое значение у переменной.

Пример 3: Переменные — коробочки для данных

В программировании мы часто работаем с данными: числами, текстом, списками. Чтобы их сохранить, используются переменные. Представь, что это коробочки, на которых написано имя. Ты кладёшь в коробочку что-то (число, текст) и потом можешь это использовать.

В JavaScript переменные создаются с помощью ключевых слов let или const.

// Создаём переменную с именем myName и кладём в неё текст 'Алиса'
let myName = 'Алиса';

// Создаём переменную с именем myAge и кладём в неё число 12
let myAge = 12;

// Теперь мы можем использовать эти переменные
console.log('Меня зовут', myName);
console.log('Мне', myAge, 'лет');

// Можно даже складывать текст и переменные
console.log('Привет! ' + myName + ', тебе ' + myAge + ' лет.');
// Знак + соединяет текст (это называется "конкатенация")

Разбор:

let — это ключевое слово, которое говорит: «Я создаю переменную».
myName — имя переменной. Его придумываешь ты сам. Лучше давать понятные имена, чтобы сразу было ясно, что там лежит.
= — это оператор присваивания. Он кладёт значение в переменную. Не путай с «равно» из математики! Здесь он означает «положить».
'Алиса' — значение. Текст всегда в кавычках.

Сравнение с Python: В Python ты бы написал my_name = 'Алиса'. В JavaScript мы используем let и camelCase (первое слово с маленькой буквы, каждое следующее с большой — myName, а не my_name).

Пример 4: Простые вычисления

Компьютер отлично считает. Давай попробуем сложить два числа и вывести результат.

// Создаём переменные с числами
let apples = 5;
let oranges = 3;

// Складываем их и сохраняем результат в новую переменную
let totalFruits = apples + oranges;

// Выводим результат
console.log('У меня есть', apples, 'яблок и', oranges, 'апельсинов.');
console.log('Всего фруктов:', totalFruits);

// Можно делать вычисления прямо внутри console.log
console.log('А если я съем 2 яблока, останется:', apples - 2);

// Умножение и деление
let pricePerApple = 10; // цена одного яблока в рублях
let totalCost = apples * pricePerApple;
console.log('Стоимость всех яблок:', totalCost, 'рублей');

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

Математические операции в JavaScript:

+ — сложение
- — вычитание
* — умножение (звёздочка, а не крестик)
/ — деление (слеш)
** — возведение в степень (например, 2 ** 3 = 8)
% — остаток от деления (например, 10 % 3 = 1, потому что 10 делится на 3 с остатком 1)

Пример 5: Взаимодействие с пользователем (ввод данных)

Программа становится интереснее, когда она спрашивает что-то у пользователя. Для этого есть команда prompt(). Она показывает окошко с полем для ввода.

// Спрашиваем имя пользователя
// prompt() возвращает (отдаёт) то, что ввёл пользователь
let userName = prompt('Привет! Как тебя зовут?');

// Спрашиваем возраст
let userAge = prompt('Сколько тебе лет?');

// Выводим приветствие
console.log('Рад познакомиться,', userName + '!');
console.log('Тебе', userAge, 'лет. Круто!');

// Обрати внимание: prompt всегда возвращает текст (строку).
// Даже если ввести число, это будет текст "12", а не число 12.
// Если нужно число, используй Number() для преобразования:
let ageAsNumber = Number(userAge);
console.log('Через год тебе будет', ageAsNumber + 1, 'лет.');

Что произойдёт? Сначала появится окошко с вопросом «Привет! Как тебя зовут?». Ты вводишь имя и нажимаешь ОК. Затем появится второе окошко про возраст. После этого в консоли появятся сообщения с твоими данными.

Важно про Number(): Если ты попробуешь сложить userAge + 1 без преобразования, то получишь, например, "12" + 1 = "121", потому что JavaScript подумает, что ты хочешь соединить текст «12» и число 1. Number() превращает текст в число, и тогда сложение работает правильно.

Типичные ошибки

Ошибки — это нормально. Даже опытные программисты их допускают. Главное — уметь их находить и исправлять. Вот самые частые ошибки у новичков:

1. Забыл кавычки

Неправильно:

alert(Привет); // Ошибка! Компьютер думает, что "Привет" — это имя переменной или команды

Правильно:

alert('Привет'); // Текст в кавычках

2. Забыл точку с запятой

В JavaScript это не всегда приводит к ошибке, но лучше всегда ставить. Иначе в сложных программах могут быть странные проблемы.

Неправильно:

let x = 5
let y = 10

Правильно:

let x = 5;
let y = 10;

3. Путаница с регистром (большие и маленькие буквы)

JavaScript различает заглавные и строчные буквы. console.log — правильно, а Console.log или console.Log — ошибка.

Неправильно:

Console.log('Привет'); // Ошибка!

Правильно:

console.log('Привет'); // Всё с маленькой буквы, кроме "L" в "Log"? Нет! "log" полностью с маленькой.

4. Несоответствие скобок

У каждой открывающей ск

← Предыдущая Введение: история, особенности, где применяется — Вперёд → Переменные и типы данных — JavaScript