Артём Соболев – JavaScript. Полное руководство от нуля до профессионала (страница 1)
Артём Соболев
JavaScript. Полное руководство от нуля до профессионала.
Книга: JavaScript. Полное руководство от нуля до профессионала.
Введение
Добро пожаловать в мир программирования на JavaScript! Эта книга предназначена для того, чтобы вы не просто выучили синтаксис, а поняли как мыслить, как программист, и как создавать реальные, работающие приложения.
Как пользоваться этой книгой:
1. Читайте последовательно. Не перепрыгивайте главы. Каждая следующая строится на предыдущей.
2. Пишите код. Не просто копируйте примеры, а набирайте их руками. Это тренирует мышечную память.
3. Экспериментируйте. Изменяйте код в примерах. Ломайте его и смотрите, какие ошибки возникают. Это лучший способ учиться.
4. Выполняйте упражнения. Они созданы, чтобы закрепить материал.
-–
Часть I: Фундамент
Глава 1: Ваша первая программа
1.1 Что такое JavaScript?
JavaScript – это язык программирования, который делает веб-страницы живыми. Изначально созданный для браузера, он теперь работает на серверах (Node.js), на мобильных телефонах (React Native, Ionic) и даже на desktop (Electron).
1.2 Где и как писать код?
Для начала нам нужен всего два инструмента:
1. Браузер (Chrome, Firefox, Edge). В нем есть Консоль разработчика.
2. Текстовый редактор (например, VS Code – бесплатный и мощный).
Самый быстрый способ запустить код – использовать Консоль браузера.
· Откройте Консоль: Нажмите F12 или Ctrl+Shift+J (Cmd+Opt+J на Mac) и перейдите на вкладку Console.
· Напишите там свою первую команду: console.log("Hello, World!");
· Нажмите `Enter`. Вы должны увидеть надпись Hello, World!.
console.log() – это команда для вывода информации в консоль. Это наш главный инструмент для отладки и наблюдения за результатом работы кода.
1.3 Запуск кода в HTML-файле
Для более серьезных программ мы будем писать код в отдельном файле с расширением .js и подключать его к HTML.
1. Создайте папку для проекта, например, js-book.
2. Создайте внутри два файла: index.html и script.js.
3. Наполните `index.html` следующим кодом:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая JS-программа</title>
</head>
<body>
<h1>Смотрите консоль! (F12)</h1>
<!– Подключаем наш JavaScript файл в конце тела документа –>
<script src="script.js"></script>
</body>
</html>
```
1. В файл `script.js` добавьте код:
```javascript
console.log("Hello from external file!");
console.log("Это мой первый скрипт!");
```
1. Откройте файл `index.html` в браузере и снова посмотрите в консоль (F12). Вы увидите два сообщения.
Пояснение: Браузер читает HTML, доходит до тега <script>, загружает и выполняет код из файла script.js, а результаты выполнения выводятся в консоль.
-–
Глава 2: Переменные и константы – ячейки для хранения данных
Программа почти всегда работает с данными: числами, текстом, списками. Чтобы с ними работать, данные нужно где-то хранить. Для этого существуют переменные.
2.1 Объявление переменных: `let`
Чтобы создать переменную (выделить ячейку памяти и дать ей имя), используется ключевое слово let.
```javascript
// Объявляем переменную с именем "message"
let message;
// Записываем в нее данные (оператор присваивания =)
message = 'Hello, JavaScript!'; // Текст (строка) пишется в кавычках
// Выводим значение переменной в консоль
console.log(message); // Hello, JavaScript!
// Можно объявить и сразу присвоить значение (инициализировать)
let userName = 'Анна';
console.log(userName); // Анна