Git, Git Bash и первый проект. Основы JavaScript и типы данных

В этом уроке два больших шага. Сначала разберёмся с Git — программой, которая запоминает историю изменений в коде, — освоим терминал Git Bash и основные команды и выложим первый проект на GitHub. Затем начнём учить сам JavaScript: научимся создавать переменные, выводить данные в консоль и познакомимся со всеми типами данных языка.

Что такое система контроля версий

Представьте, что вы пишете диплом и сохраняете файлы так: diplom.docx, diplom_final.docx, diplom_final_2.docx, diplom_final_TOCHNO.docx. Через неделю уже невозможно понять, чем они отличаются. Система контроля версий решает эту проблему: она хранит всю историю изменений проекта в одной папке, и в любой момент можно посмотреть, что, когда и зачем поменялось, или вернуться к старой версии.

Git — самая популярная система контроля версий. Её используют практически во всех компаниях. Она нужна, чтобы:

• сохранять «снимки» проекта (коммиты) и откатываться к ним;
• работать командой и аккуратно объединять изменения;
• хранить код в облаке (GitHub, GitLab) и показывать его работодателям.

Git и GitHub — не одно и то же

Git Bash и проверка настроек

Git мы уже установили и настроили в конце месяца 1 — в уроке про CSS-переменные и медиазапросы. Если пропустили этот шаг, вернитесь к нему: там описана установка на Windows и macOS и команды git config для имени и почты.

Git Bash — терминал, который ставится вместе с Git на Windows. В нём работают те же команды, что в терминале macOS и Linux, поэтому все примеры курса одинаковы для любой системы. На macOS используйте обычный «Терминал» или встроенный терминал VS Code.

Перед началом работы убедитесь, что всё на месте:

git --version                   # версия Git, например git version 2.x.x
git config --global user.name   # должно вывести ваше имя
git config --global user.email  # и почту — ту же, что на GitHub

Если имя или почта пустые — коммиты будут подписаны неправильно, повторите настройку из урока месяца 1.

Флаг --global означает «для всех проектов на компьютере». Если для одного проекта нужна другая почта (например, рабочая), выполните ту же команду без --global внутри папки этого проекта: git config user.email "work@example.com". Все текущие настройки показывает git config --list.

Минимум команд терминала

В терминале вы пишете команды текстом вместо кликов мышкой. Вот самые нужные:

pwd              # в какой папке я сейчас
ls               # файлы в текущей папке
cd projects      # перейти в папку projects
cd ..            # подняться на одну папку вверх
mkdir my-site    # создать папку my-site
touch index.html # создать пустой файл index.html

Основной цикл работы с Git

В Git есть три «места», через которые проходит файл:

Рабочая папка  →  git add  →  Индекс (staging)  →  git commit  →  История (репозиторий)

• Рабочая папка — файлы, которые вы редактируете.
• Индекс — изменения, подготовленные к сохранению.
• Коммит — сохранённый снимок проекта с подписью.

Аналогия: вы собираете посылку. git add — положить вещи в коробку, git commit — заклеить коробку и подписать её.

Пример: первый репозиторий

mkdir my-first-project
cd my-first-project
git init
touch index.html
git status
git add index.html
git commit -m "Добавил index.html"
git log --oneline

Что здесь происходит:

1. git init — превращает обычную папку в Git-репозиторий (создаёт скрытую папку .git, где хранится вся история).
2. git status — показывает, какие файлы изменены и что лежит в индексе. Команда безопасная, вызывайте её как можно чаще.
3. git add index.html — добавляет файл в индекс. Чтобы добавить все изменённые файлы сразу, пишут git add ..
4. git commit -m "..." — создаёт коммит. После -m пишется сообщение: коротко и по делу, что сделано.
5. git log --oneline — показывает историю коммитов, по одной строке на коммит.

Файл .gitignore

Некоторые файлы не нужно хранить в Git: системный мусор, папку node_modules (появится позже, в уроке npm и package.json), файлы с паролями. Их перечисляют в файле .gitignore в корне проекта:

.DS_Store
node_modules/
.env

Заливка первого проекта на GitHub

Шаг 1. Создаём репозиторий на сайте

1. Зарегистрируйтесь на github.com.
2. Нажмите New repository (зелёная кнопка или «+» в правом верхнем углу).
3. Введите имя, например my-first-project, оставьте его Public и не ставьте галочки «Add a README» — у нас уже есть локальный проект.
4. Нажмите Create repository. GitHub покажет адрес вида https://github.com/USERNAME/my-first-project.git.

Шаг 2. Связываем и отправляем

git remote add origin https://github.com/USERNAME/my-first-project.git
git branch -M main
git push -u origin main

• git remote add origin <адрес> — запоминает адрес удалённого репозитория под именем origin («источник»);
• git branch -M main — на всякий случай переименовывает текущую ветку в main;
• git push -u origin main — отправляет коммиты на GitHub. Флаг -u связывает локальную ветку с удалённой, поэтому дальше достаточно писать просто git push.

Вход в GitHub из терминала

С 2021 года GitHub не принимает обычный пароль аккаунта при git push. Варианты:

• на Windows Git Bash обычно сам открывает браузер для входа (Git Credential Manager) — самый простой путь;
• Personal Access Token из настроек GitHub (Settings → Developer settings) вместо пароля;
• SSH-ключ — см. документацию GitHub.

Дальнейшая работа

После первой отправки цикл всегда одинаковый:

git status
git add .
git commit -m "Сверстал блок с карточками"
git push

Чтобы скачать проект с GitHub на другой компьютер, используйте git clone <адрес репозитория>.

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

• fatal: not a git repository — вы не в той папке или забыли git init. Проверьте pwd.
• git init в домашней папке — Git начнёт следить за всем компьютером. Делайте git init только в папке проекта.
• Коммит без git add — Git скажет nothing added to commit. Сначала добавьте файлы в индекс.
• rejected ... fetch first при push — на GitHub есть коммиты, которых нет у вас (например, вы создали README на сайте). Сначала выполните git pull, потом git push.

Основы языка JavaScript

HTML отвечает за структуру страницы, CSS — за внешний вид, а JavaScript — за поведение: реакцию на клики, проверку форм, загрузку данных. Как подключать скрипт к странице, мы разбирали в уроке Тег script и возможности JavaScript. Коротко: файл script.js подключается в конце <body> строкой <script src="script.js"></script>.

Консоль и console.log

Главный инструмент новичка — консоль браузера: нажмите F12 (на Mac Cmd + Option + J) и откройте вкладку Console.

console.log("Привет, мир!");
console.log(2 + 3);
console.log("Мне", 20, "лет");

В консоли появится Привет, мир!, 5 и Мне 20 лет — несколько значений передаются через запятую.

Переменные

Переменная — это коробка с подписью, в которую кладут значение. Подпись — имя переменной, содержимое — значение.

let userName = "Айгерим";
let age = 19;

console.log(userName); // Айгерим
console.log(age);      // 19

age = 20;              // кладём в коробку новое значение
console.log(age);      // 20

• let — ключевое слово «создать переменную»;
• userName — имя переменной;
• = — оператор присваивания: «положи справа налево»;
• ; — конец инструкции (точку с запятой ставить принято).

Подробно про let и const (и почему не var) поговорим в следующем уроке Условия, операторы и let/const. Пока используйте let.

Правила имён

• Имя состоит из букв, цифр, $ и _, но не может начинаться с цифры: user1 — можно, 1user — нельзя.
• Регистр важен: age и Age — разные переменные.
• Принят стиль camelCase: первое слово с маленькой буквы, следующие — с большой: totalPrice, isLoggedIn.
• Давайте понятные имена: price лучше, чем p.

Типы данных

Каждое значение относится к какому-то типу: тип определяет, что с ним можно делать (числа складывают, строки склеивают). В JavaScript 8 типов: 7 примитивных и объект.

number — числа

let price = 1500;
let rating = 4.8;
console.log(price * 2);   // 3000
console.log(10 / 3);      // 3.3333333333333335
console.log(10 / 0);      // Infinity
console.log("abc" * 2);   // NaN

Infinity — бесконечность, а NaN (Not a Number, «не число») — результат неудачной математической операции. Оба значения тоже относятся к типу number.

string — строки

Строку можно записать в двойных "...", одинарных '...' или обратных кавычках `...`. Обратные кавычки (шаблонные строки) позволяют вставлять переменные через ${...}:

let name = "Бекзат";
let city = 'Бишкек';
let greeting = `Привет, ${name}! Ты из города ${city}.`;

console.log(greeting);        // Привет, Бекзат! Ты из города Бишкек.
console.log(name.length);     // 6 — длина строки
console.log("2" + "2");       // "22" — строки склеиваются

boolean — логический тип

Всего два значения: true (истина) и false (ложь). Обычно получаются в результате сравнения:

let isAdult = 20 >= 18;
console.log(isAdult);   // true
console.log(5 < 3);     // false

undefined и null

let phone;
console.log(phone);     // undefined — переменная создана, но значение не положили

let selectedCar = null; // мы сами говорим: «машина пока не выбрана»
console.log(selectedCar); // null

Правило: undefined ставит сам JavaScript, а null пишет программист, чтобы явно сказать «здесь пусто».

bigint и symbol

Встречаются редко: bigint пишется с буквой n в конце (10n) и нужен для огромных целых чисел, а каждый Symbol("id") уникален и используется как особый ключ объекта.

object — объекты

Объект хранит значения под именами (ключами), массив — список значений по порядку:

let user = { name: "Аружан", age: 22 };
let colors = ["red", "green", "blue"];
console.log(user.name); // Аружан
console.log(colors[0]); // red

Объекты и массивы подробно разберём в уроке Циклы, массивы и объекты.

Оператор typeof

Чтобы узнать тип значения, используют typeof:

console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof 10n);         // "bigint"
console.log(typeof Symbol());    // "symbol"
console.log(typeof { a: 1 });    // "object"
console.log(typeof [1, 2]);      // "object" — массив тоже объект
console.log(typeof null);        // "object" — историческая ошибка языка!

Преобразование типов

Данные из полей ввода приходят строками, поэтому их часто превращают в числа:

let input = "25";
console.log(input + 5);          // "255" — склеивание строк!
console.log(Number(input) + 5);  // 30
console.log(parseInt("42px"));   // 42 — берёт число с начала строки
console.log(String(100));        // "100"
console.log(Number("abc"));      // NaN

Обратите внимание на первую строку: если хотя бы один операнд у + — строка, JavaScript склеивает, а не складывает. Это самая частая ошибка новичков.

Ещё две частые ошибки: опечатка в регистре (username вместо userName — это другая переменная, будет ReferenceError) и разные кавычки в одной строке ("Привет' — ошибка синтаксиса).

Практика

1. Первый репозиторий. В папке js-basics выполните git init, добавьте index.html и script.js, сделайте коммит. Ожидаемый результат: git log --oneline показывает один коммит.
2. Заливка на GitHub. Создайте на GitHub репозиторий js-basics и отправьте туда проект через git push. Ожидаемый результат: файлы видны на странице репозитория в браузере.
3. Визитка в консоли. В script.js создайте переменные name, age, city, isStudent и выведите шаблонной строкой фразу «Меня зовут …, мне … лет, я живу в …». Ожидаемый результат: в консоли одна аккуратная строка.
4. Детектор типов. Создайте по одной переменной каждого из 8 типов и выведите typeof для каждой. Ожидаемый результат: в консоли 8 строк, объясните для себя, почему у null получилось "object".
5. Калькулятор возраста. Создайте строку birthYear = "2004", превратите её в число и посчитайте возраст в 2026 году. Закоммитьте и запушьте результат. Ожидаемый результат: в консоли 22, а на GitHub — второй коммит.

Итоги

• Git хранит историю проекта, GitHub — облачное хранилище для Git-репозиториев.
• Git Bash — терминал для работы с Git; перед работой проверьте git config --global user.name.
• Основной цикл: git status → git add . → git commit -m "..." → git push.
• Переменная — именованная коробка для значения, создаётся через let.
• В JavaScript 8 типов данных: number, bigint, string, boolean, undefined, null, symbol и object.
• typeof показывает тип значения, а Number() и String() преобразуют типы.