Всё о языке программирования JavaScript для детей

🎯 Что такое JavaScript?

JavaScript (сокращённо JS) — это волшебный язык программирования, который умеет делать веб-страницы живыми и интерактивными! Представь, что веб-страница — это дом: HTML — это стены и комнаты, CSS — это краска и украшения, а JavaScript — это электричество, которое включает свет, заставляет работать телевизор и холодильник!

С помощью JavaScript ты можешь создавать игры, анимации, калькуляторы и даже управлять роботами! Это язык, который понимают все современные браузеры — Chrome, Firefox, Safari и другие.

Где используется JavaScript?

⭐ Почему стоит учить JavaScript?

👶 Первые шаги в JavaScript

Как запустить свой первый код?

Есть несколько способов начать писать код на JavaScript:

Базовые концепции

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

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

// Создаём переменные с разными типами данных
let имя = "Маша";           // Текст (строка)
let возраст = 12;              // Число
let любитПрограммирование = true; // Логическое значение

// Выводим информацию
console.log("Привет, " + имя + "!");
console.log("Тебе " + возраст + " лет");

Условия — принятие решений

Условия помогают программе принимать решения, как ты это делаешь каждый день: "Если дождь — возьму зонт, иначе — надену кепку".

let баллы = 85;

if (баллы >= 90) {
    console.log("🌟 Отлично! Ты молодец!");
} else if (баллы >= 70) {
    console.log("👍 Хорошо! Продолжай в том же духе!");
} else {
    console.log("💪 Не сдавайся! У тебя получится!");
}

Циклы — повторение действий

Циклы позволяют повторять одно и то же действие много раз, не переписывая код.

// Выводим числа от 1 до 5
for (let i = 1; i <= 5; i++) {
    console.log("Число: " + i);
}

// Результат:
// Число: 1
// Число: 2
// Число: 3
// Число: 4
// Число: 5

Функции — многоразовые блоки кода

Функции — это как рецепты: один раз написал, потом используй сколько хочешь раз!

// Создаём функцию для приветствия
function поприветствовать(имя) {
    return "Привет, " + имя + "! 👋";
}

// Используем функцию
console.log(поприветствовать("Маша"));
console.log(поприветствовать("Петя"));
console.log(поприветствовать("Саша"));

🎮 Попробуй JavaScript в действии!

Пример 1: Приветствие

function jsArticleDemo1() {
    let имя = prompt("Как тебя зовут?");
    let output = document.getElementById('js-article-output1');
    output.innerHTML = "🎉 Привет, " + имя + "! Рад знакомству!";
}

Пример 2: Калькулятор

function jsArticleDemo2() {
    let число1 = Number(document.getElementById('js-article-num1').value);
    let число2 = Number(document.getElementById('js-article-num2').value);
    let результат = число1 + число2;
    
    let output = document.getElementById('js-article-output2');
    output.innerHTML = "✅ Результат: " + результат;
}

Пример 3: Меняем цвета

function jsArticleDemo3() {
    let colors = ['#ffadad', '#ffd6a5', '#fdffb6', 
                   '#caffbf', '#9bf6ff', '#a0c4ff'];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    
    let output = document.getElementById('js-article-output3');
    output.style.background = randomColor;
}

Пример 4: Счётчик кликов

let clicks = 0;

function jsArticleDemo4() {
    clicks++;
    let output = document.getElementById('js-article-output4');
    output.innerHTML = "Кликов: " + clicks + " 🎯";
}

🎯 Что ты можешь создать?

JavaScript открывает перед тобой огромный мир возможностей! Вот несколько идей проектов, которые ты сможешь создать на разных этапах обучения:

Проекты для начинающих

Проекты среднего уровня

Продвинутые проекты

🗺️ Твой путь в мир JavaScript

Вот пошаговый план, как стать мастером JavaScript. Не торопись — изучай всё последовательно!

🎯 Проверь свои знания!

❓ Частые вопросы