Настало время сделать первые шаги и написать свой собственный JavaScript-код. Для этого нам понадобятся два основных инструмента: браузер и его инструменты разработчика.
Любой современный веб-браузер (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari) обладает встроенными инструментами для разработчиков. Они позволяют нам:
Просматривать HTML-структуру страницы.
Редактировать CSS-стили “на лету”.
Выполнять JavaScript-код.
Отлаживать ошибки.
Анализировать сетевую активность.
Как открыть инструменты разработчика:
Google Chrome / Mozilla Firefox / Microsoft Edge: Нажмите F12 на клавиатуре, или щелкните правой кнопкой мыши в любом месте страницы и выберите “Просмотреть код” (Inspect) или “Исследовать элемент”.
Safari: Сначала нужно включить меню “Разработка” в настройках (Safari -> Настройки -> Дополнения -> Поставить галочку “Показывать меню Разработка в строке меню”). Затем, когда меню “Разработка” появится, выберите “Показать веб-инспектор”.
Когда вы откроете инструменты разработчика, вы увидите несколько вкладок. Нам особенно важна вкладка “Console” (Консоль) — это место, где мы будем писать и выполнять наш JavaScript-код.
Есть два основных способа запустить JavaScript:
А) В Консоли Браузера (для быстрых тестов и экспериментов)
Это самый простой способ начать. Вы можете вводить команды JavaScript прямо в консоль, и браузер будет выполнять их немедленно.
Пример 1: Ваша первая команда
Откройте любой веб-сайт (можно даже пустую вкладку, если хотите).
Откройте инструменты разработчика (F12).
Перейдите на вкладку “Console”.
Введите следующую строку и нажмите Enter:javascriptconsole.log("Привет, мир!");
Вы должны увидеть текст Привет, мир! прямо под вашей командой в консоли.
Что здесь произошло?
console — это специальный объект, который предоставляет доступ к консоли браузера.
.log() — это метод (функция) объекта console, который выводит переданные ему данные в консоль.
"Привет, мир!" — это строка. Мы передали ее как аргумент методу log(). Строки в JavaScript заключаются в одинарные (') или двойные (") кавычки.
Пример 2: Простые вычисления
Вы можете использовать консоль как калькулятор:
javascript
2 + 2
Нажмите Enter. Результат: 4
javascript
10 * 5
Нажмите Enter. Результат: 50
javascript
25 / 5
Нажмите Enter. Результат: 5
Б) В HTML-файле (для создания реальных веб-страниц)
Чтобы JavaScript стал частью вашей веб-страницы, его нужно встроить в HTML-документ. Это делается с помощью тега <script>.
Пример 3: JavaScript внутри HTML
Откройте ваш любимый текстовый редактор (например, VS Code, Sublime Text, Notepad++ или даже Блокнот).
Создайте новый файл и сохраните его с расширением .html (например, 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>Приветствую!</h1>
<p>Это моя первая веб-страница с JavaScript.</p>
<script>
// Этот код будет выполнен браузером
console.log("JavaScript загружен и работает!");
// Найдем заголовок и изменим его текст
let heading = document.querySelector('h1'); // Находим элемент h1
heading.textContent = "JavaScript изменил заголовок!"; // Меняем его текст
</script>
</body>
</html>
Сохраните файл.
Откройте этот файл в браузере (дважды щелкните по нему).
Что вы увидите:
На странице появится текст “JavaScript изменил заголовок!”.
Если вы откроете инструменты разработчика (F12) и перейдете на вкладку “Console”, вы увидите сообщение JavaScript загружен и работает!.
Где размещать тег <script>:
Внутри <head>: Если скрипт размещен в <head>, он будет загружен и выполнен до того, как браузер начнет обрабатывать содержимое <body>. Это может вызвать проблему, если ваш скрипт пытается работать с элементами, которые еще не существуют на странице (например, найти <h1> до того, как он был создан).
Перед закрывающим тегом </body>: Это рекомендуемый способ для большинства случаев. Скрипт будет выполнен после того, как весь HTML-контент страницы будет загружен и готов. Это гарантирует, что элементы, с которыми ваш скрипт должен работать (например, <h1>), уже существуют.
Использование внешних файлов JavaScript:
Когда ваш JavaScript-код становится большим, лучше вынести его в отдельный файл. Это улучшает читаемость, позволяет кэшировать скрипт браузером и упрощает его повторное использование.
Пример 4: Внешний файл JavaScript
Создайте в той же папке, где лежит index.html, новый файл и сохраните его как script.js.
В файл script.js скопируйте JavaScript-код из предыдущего примера:javascript// script.js
console.log("JavaScript из внешнего файла загружен!");
let heading = document.querySelector('h1');
heading.textContent = "JavaScript из внешнего файла изменил заголовок!";
Измените ваш 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>Приветствую!</h1>
<p>Это моя первая веб-страница с JavaScript.</p>
<!-- Подключаем внешний файл скрипта -->
<script src="script.js"></script>
</body>
</html>
Сохраните оба файла.
Откройте index.html в браузере.
Теперь JavaScript-код выполняется из отдельного файла script.js. Тег <script src="script.js"></script> сообщает браузеру, где найти код.
Консоль — это не просто место для вывода сообщений. Это мощный инструмент для отладки и исследования.
Вывод информации: console.log() — самый частый помощник. Вы можете выводить значения переменных, результаты вычислений, сообщения о ходе выполнения программы.javascriptlet count = 10;
console.log("Текущее значение count:", count); // Выведет: Текущее значение count: 10
Вывод ошибок: console.error() — для сообщений об ошибках.javascriptconsole.error("Что-то пошло не так!");
Предупреждения: console.warn() — для предупреждений.javascriptconsole.warn("Это предупреждение, обратите внимание!");
Таблицы: console.table() — очень удобно для отображения массивов объектов в виде таблицы.javascriptlet users = [
{ id: 1, name: "Алиса" },
{ id: 2, name: "Боб" }
];
console.table(users);
Группировка сообщений: console.group() и console.groupEnd().javascriptconsole.group("Логи операции");
console.log("Шаг 1 выполнен.");
console.log("Шаг 2 выполнен.");
console.groupEnd();
Измерение времени: console.time() и console.timeEnd().javascriptconsole.time("Время выполнения задачи");
// ... какой-то код, который занимает время ...
for (let i = 0; i < 1000000; i++) {
// Делаем что-то
}
console.timeEnd("Время выполнения задачи"); // Покажет, сколько времени занял цикл
Комментарии — это текст в вашем коде, который игнорируется браузером. Они нужны для того, чтобы объяснить самому себе (или другим разработчикам), что делает тот или иной участок кода.
Однострочные комментарии: Начинаются с двух слешей (//). Все, что идет после // до конца строки, считается комментарием.javascript// Это однострочный комментарий. Он объясняет следующую строку.
let x = 10; // Можно комментировать и строки кода.
Многострочные комментарии: Начинаются с /* и заканчиваются */. Полезны для больших пояснений.javascript/*
Этот комментарий
занимает несколько строк
и объясняет более сложный участок кода.
*/
let y = 20;
Зачем нужны комментарии:
Объяснение логики: Помогает понять сложные алгоритмы.
Пометка “TODO”: Оставить напоминание себе о том, что нужно доделать.javascript// TODO: Добавить обработку ошибок
Временное отключение кода: Можно закомментировать строки, чтобы они не выполнялись.javascript// console.log("Эта строка сейчас не будет выполнена.");
Практическое задание:
Создайте HTML-файл с тремя разными сообщениями в консоли, используя console.log, console.warn, console.error.
Создайте массив из 3-4 объектов (например, информация о пользователях: id, name, age) и выведите его в консоли в виде таблицы с помощью console.table().
Попробуйте написать простой скрипт, который вычисляет сумму двух чисел, введенных пользователем (для этого нам пока придется использовать “жестко заданные” числа, так как ввод мы рассмотрим позже), и выводит результат в консоль.
О проекте
О подписке
Другие проекты