питон либ луна питонлиб солнце progerlib цветок

Изменить тему

Вход Регистрация
JavaScript Курс

Введение в JavaScript

Самоучитель Python 3, собранный из материалов данного сайта.Предназначен в основном для тех, кто хочет изучить язык программирования Python с нуля.

Урок 1: Знакомство с JavaScript – оживляем веб-страницы!

Введение: Почему JavaScript — это суперсила?

Представь, что ты строишь дом из конструктора. HTML (HyperText Markup Language) — это стены, двери и окна. CSS (Cascading Style Sheets) — это краска, обои и шторы, которые делают дом красивым. Но дом стоит неподвижно. Чтобы в нем зажегся свет, пошел дождь за окном или заработал лифт, нужна магия. Эта магия — JavaScript!

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

Аналогия: Представь, что HTML — это скелет человека, CSS — это его внешность (цвет глаз, одежда), а JavaScript — это мозг и мышцы, которые позволяют человеку двигаться, думать и разговаривать.

На этом уроке мы сделаем первые шаги: научимся давать команды компьютеру, хранить информацию и общаться с пользователем. К концу урока ты напишешь свою первую программу, которая будет задавать вопросы и отвечать на них!

Теория: Как «разговаривать» с компьютером?

1. Где писать код?

Для начала тебе понадобятся две вещи:

  1. Браузер (Chrome, Firefox, Edge — любой современный).
  2. Текстовый редактор (Блокнот, VS Code, Notepad++ — мы будем использовать простой Блокнот, чтобы сосредоточиться на коде).

Самый быстрый способ попробовать JavaScript — открыть браузер, нажать клавишу F12 (или правой кнопкой мыши → «Посмотреть код») и перейти на вкладку Console (Консоль). Это как «командный центр» JavaScript. Туда можно писать команды, и они выполнятся мгновенно.

Но мы будем создавать настоящие файлы. Создай на рабочем столе папку «Мой первый JS». Внутри создай два файла:

  • index.html — наш «скелет».
  • script.js — наш «мозг» (здесь будет JavaScript).

Открой index.html в Блокноте и напиши вот такой код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница с JS</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <!-- Подключаем наш JavaScript-файл -->
    <script src="script.js"></script>
</body>
</html>

Важно: Строчка <script src="script.js"></script> — это как «приглашение» для JavaScript. Она говорит браузеру: «Эй, возьми код из файла script.js и выполни его!»

2. Твоя первая команда: console.log()

Открой файл script.js в Блокноте и напиши:

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

// Команда console.log() выводит сообщение в консоль браузера.
console.log("Привет, мир!"); // Текст в кавычках — это строка.

// Можно выводить числа. Кавычки не нужны.
console.log(42);

// Можно выводить результат вычислений.
console.log(5 + 3); // Будет выведено 8

Как это работает? Открой index.html в браузере (просто перетащи файл в окно браузера). Нажми F12 → вкладка Console. Ты увидишь три сообщения: «Привет, мир!», 42 и 8. Поздравляю, ты только что отдал свой первый приказ компьютеру!

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

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

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

  • let — для значений, которые могут меняться (например, счётчик очков в игре).
  • const — для постоянных значений, которые не должны меняться (например, число Пи).
// Создаём переменную с именем "myName" и кладём туда строку "Аня"
let myName = "Аня";
console.log(myName); // Выведет: Аня

// Меняем значение переменной
myName = "Оля";
console.log(myName); // Выведет: Оля

// Создаём константу (постоянную)
const birthYear = 2010;
console.log(birthYear); // Выведет: 2010

// Если попробовать изменить константу, будет ошибка!
// birthYear = 2011; // Эту строку нельзя раскомментировать!

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

  • Имя может содержать буквы, цифры, символы $ и _.
  • Имя не может начинаться с цифры.
  • Имя не может быть зарезервированным словом (например, let, const, if).
  • Используй camelCase (верблюжья нотация): первое слово с маленькой буквы, каждое следующее — с большой. Пример: myFavoriteColor.

4. Типы данных: что можно хранить в коробочках?

В переменные можно класть разные вещи. Вот основные типы данных в JavaScript:

  • Числа (Number): целые и дробные. let age = 12; let price = 99.99;
  • Строки (String): текст в кавычках. Можно использовать одинарные ('...') или двойные ("..."). let greeting = "Привет!";
  • Булевы значения (Boolean): только true (правда) или false (ложь). let isStudent = true;
  • Специальное значение undefined: означает, что значение ещё не назначено. let futureJob; — в этой переменной пока undefined.
  • Специальное значение null: означает «ничего», «пусто». let emptyBox = null;
// Примеры разных типов данных
let gameScore = 1500;          // Число
let playerName = "Иван";      // Строка
let isGameOver = false;       // Булево значение
let nextLevel = null;         // Пока неизвестно
let secretKey;                // undefined

console.log(gameScore);       // 1500
console.log(playerName);      // Иван
console.log(isGameOver);      // false
console.log(nextLevel);       // null
console.log(secretKey);       // undefined

// Проверить тип данных можно с помощью typeof
console.log(typeof gameScore); // "number"
console.log(typeof playerName); // "string"

5. Взаимодействие с пользователем: alert, prompt, confirm

Чтобы программа могла «общаться» с человеком, есть три встроенные функции. Функция — это готовая команда, которая что-то делает. Мы покажем тебе три самые простые:

  • alert() — показывает сообщение и ждёт, пока пользователь нажмёт «ОК».
  • prompt() — задаёт вопрос и получает ответ (возвращает строку).
  • confirm() — задаёт вопрос с вариантами «ОК» (true) и «Отмена» (false).
// 1. Простое сообщение
alert("Добро пожаловать в игру!");

// 2. Вопрос с ответом. Ответ сохраняем в переменную.
let userAnswer = prompt("Как тебя зовут?");
console.log("Пользователя зовут: " + userAnswer); // Складываем строки

// 3. Вопрос с выбором (да/нет)
let isReady = confirm("Ты готов начать?");
console.log(isReady); // Выведет true или false
Важно: prompt() всегда возвращает строку. Даже если пользователь введёт число 5, это будет строка "5". Чтобы превратить строку в число, используют Number(). Например: let age = Number(prompt("Сколько тебе лет?"));

Примеры кода: от простого к сложному

Пример 1: Калькулятор возраста

// Спрашиваем год рождения
let birthYearInput = prompt("Введи свой год рождения:");

// Превращаем строку в число
let birthYear = Number(birthYearInput);

// Вычисляем возраст (предположим, сейчас 2025 год)
let currentYear = 2025;
let age = currentYear - birthYear;

// Выводим результат
alert("Тебе " + age + " лет!");
console.log("Возраст пользователя: " + age);

Пример 2: Угадай число

// Загадываем число (константа)
const secretNumber = 7;

// Просим пользователя угадать
let guess = Number(prompt("Угадай число от 1 до 10:"));

// Сравниваем (=== — это строгое равенство)
let isCorrect = (guess === secretNumber);

// Выводим результат
alert("Ты угадал? " + isCorrect);
console.log("Загаданное число: " + secretNumber);
console.log("Ответ пользователя: " + guess);
console.log("Результат: " + isCorrect);

Пример 3: Сбор информации о пользователе

// Собираем данные
let name = prompt("Как тебя зовут?");
let city = prompt("Из какого ты города?");
let ageAnswer = Number(prompt("Сколько тебе лет?"));

// Составляем приветствие
let greeting = "Привет, " + name + " из города " + city + "!";
alert(greeting);

// Проверяем, можно ли купить билет в кино (возраст 12+)
let canWatch = (ageAnswer >= 12);
alert("Можешь ли ты смотреть фильм? " + canWatch);

Практика: твои первые задания

А теперь самое интересное! Попробуй решить эти задачи самостоятельно. Если что-то не получается — перечитай теорию или загляни в примеры. Не бойся ошибок! Ошибки — это нормально, на них учатся. Если программа работает не так, как ты ожидал, открой консоль (F12) и посмотри, какие там сообщения об ошибках.

  1. Задание 1: Визитка.

    Напиши программу, которая с помощью prompt спрашивает имя, возраст и любимый цвет. Затем с помощью alert выводит сообщение: «Привет, [имя]! Тебе [возраст] лет. Твой любимый цвет — [цвет].»

  2. Задание 2: Конвертер валют.

    Предположим, 1 доллар = 90 рублей. Спроси у пользователя сумму в долларах (используй prompt), переведи её в рубли и выведи результат через alert. Например: «150 долларов — это 13500 рублей.»

    Подсказка: не забудь превратить строку из prompt в число с помощью Number().

  3. Задание 3: Проверка пароля.

    Создай константу const correctPassword = "JavaScript123";. Спроси у пользователя пароль с помощью prompt. Сравни введённый пароль с правильным (используй ===). Выведи через alert сообщение: «Доступ разрешён: true/false».

  4. Задание 4: Среднее арифметическое.

    Спроси у пользователя три числа (каждое через отдельный prompt). Найди их среднее арифметическое (сложи все три и раздели на 3). Выведи результат через alert.

    Подсказка: результат может быть дробным. Это нормально.

  5. Задание 5 (со звёздочкой): Таймер-шутка.

    Спроси у пользователя его имя. Затем последовательно выведи три alert с паузами (на самом деле паузу сделать сложно, но можно просто нажимать «ОК»):

    • «[Имя], ты уверен, что хочешь продолжить?»
    • «Это твой последний шанс!»
    • «Ха-ха, шутка! Добро пожаловать!»

    Используй для этого три отдельных вызова alert.

Итог урока

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

  • JavaScript — это язык, который делает сайты интерактивными.
  • Код можно писать в любом текстовом редакторе и запускать в браузере.
  • console.log() выводит информацию в консоль для отладки.
  • Переменные (let и const) — это «коробочки» для хранения данных.
  • Данные бывают разных типов: числа, строки, булевы значения, undefined, null.
  • С помощью alert, prompt и confirm программа может общаться с пользователем.

Ты теперь умеешь писать простые диалоговые программы. На следующем уроке мы научимся принимать решения с помощью условий (if/else) и создавать настоящие логические конструкции. А пока — тренируйся на заданиях! Чем больше ты пишешь кода, тем быстрее твой мозг привыкает «думать как программист».

Секрет успеха: Программирование — это как езда на велосипеде. Сначала страшно и непонятно, но с каждым разом получается всё лучше. Не сдавайся, если что-то не работает с первого раза. Экспериментируй, меняй цифры, текст, имена переменных — и наблюдай, как меняется поведение программы. Удачи!