Введение
В этом практическом занятии (Lab) вы окунетесь в мир веб-разработки глазами Алекса, начинающего веб-разработчика, которому поручено создать динамический личный финансовый трекер. Цель - создать удобное для пользователя приложение, которое позволяет пользователям вводить и отслеживать свои ежедневные расходы и доходы. Цель ясна - разработать интерфейс, который будет как интуитивно понятным, так и привлекательным, чтобы пользователи могли легко управлять своими финансами без каких-либо проблем. Этот проект не только ставит перед собой цель упростить управление личными финансами, но и познакомить вас с основными концепциями JavaScript и манипуляцией с DOM.
Мы будем работать над 5 практическими занятиями (labs), чтобы завершить проект EconoMe.
Точки знания:
- Объявление переменных (
let,const) - Основы манипуляции с DOM (получение элементов, изменение содержимого элементов)
- Слушание событий (
addEventListener)
Основы JavaScript
JavaScript - это простой, объектно-ориентированный и событийно-управляемый язык программирования. Он загружается с сервера на клиент и выполняется браузером.
Он может использоваться с HTML и в веб-разработке, а также более широко на серверах, ПК, ноутбуках, планшетах и смартфонах.
Среди его характеристик можно выделить:
- Обычно используется для написания клиентских скриптов.
- В основном применяется для добавления интерактивного поведения на HTML-страницах.
- Это интерпретируемый язык, который выполняется по мере интерпретации.
Итак, как включить JavaScript в HTML?
Способы включения аналогичны CSS и могут быть выполнены тремя способами:
- Прямо в HTML-тегах, для особенно короткого JavaScript-кода.
- Используя тег
<script>, JavaScript-код можно встроить в<head>и<body>HTML-документа. - Используя внешний JavaScript-файл, напишите JavaScript-скрипт в файле с расширением
.jsи включите его, установив атрибутsrcтега<script>.
Например, если нажать F12, можно увидеть, что на этой странице подключено много внешних JavaScript-файлов, и, кликнув на Event Listeners (слушатели событий), можно заметить, что на странице есть много типов событий.
Теперь добавим тег <script> в файл ~/project/index.html для подключения файла script.js.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EconoMe</title>
<link rel="stylesheet" href="./style.css" />
<!-- Add the script tag to index.html -->
<script src="./script.js"></script>
</head>
<body></body>
</html>
Далее давайте научимся определять переменные в JavaScript!
Что такое переменные
Переменные можно рассматривать как контейнеры для хранения информации. В программировании мы используем переменные для хранения значений данных. JavaScript - это динамически типизированный язык, что означает, что вам не нужно объявлять тип переменной. Тип будет определен автоматически во время выполнения программы.
Объявление переменных
В JavaScript вы можете использовать ключевые слова var, let или const для объявления переменных:
var: До ES6varбыл основным способом объявления переменных, и он имеет функциональную область видимости (function scope).let: Введено в ES6,letпозволяет объявлять локальные переменные с блочной областью видимости (block-scoped).const: Также введено в ES6, используется для объявления константы, которая не может быть изменена после объявления.
Например:
var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant
Типы переменных
В JavaScript существует несколько различных типов данных:
- Строка (String): Текстовые данные, например
"Hello, World!". - Число (Number): Целые или вещественные числа, например
42или3.14. - Булево значение (Boolean):
trueилиfalse. - Объект (Object): Может хранить несколько значений или сложные структуры данных.
nullиundefined: Специальные типы, представляющие соответственно "нет значения" и "значение не определено".
Использование переменных
После объявления переменных вы можете использовать их в своей программе:
console.log(name); // Outputs: Alice
console.log("Age: " + age); // Outputs: Age: 30
console.log(city + " is a beautiful city"); // Outputs: London is a beautiful city
Статический метод console.log() выводит сообщение в консоль.
Манипуляция с DOM
DOM (Document Object Model - объектная модель документа) представляет собой кроссплатформенный, независимый от языка интерфейс, который рассматривает HTML- и XML-документы как древовидную структуру, где каждый узел является частью документа, например, элементами, атрибутами и текстовым содержимым.
Доступ к элементам DOM
Для манипуляции содержимым веб-страницы сначала необходимо получить доступ к элементам в дереве DOM. Вы можете использовать различные методы для доступа к элементам, например, по их идентификатору (ID), имени класса или имени тега:
let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name
Добавьте следующий код в файл ~/project/script.js проекта EconoMe:
const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");
Изменение содержимого элемента
После того, как у вас есть ссылка на элемент, вы можете изменить его содержимое. Свойства innerHTML и textContent обычно используются для этой цели.
Например, чтобы вставить <p>New HTML content</p> в элемент div с id=content и заменить "Hello" на "New text content" в элементе span с id=info, вы должны использовать следующий JavaScript-код:
Добавление и удаление элементов
Вы можете динамически добавлять или удалять элементы на странице с помощью JavaScript.
Например:
// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body
- В HTML-документе метод
document.createElement()создает HTML-элемент. - Метод
document.body.appendChild()добавляет новый элемент в конец элемента<body>. - Метод
document.body.removeChild()удаляет элемент из элемента<body>.
Обработка событий
Слушатели событий позволяют вам реагировать на действия пользователя.
addEventListener("event", function () {});
Например, на клики, наведение курсора или нажатия клавиш:
elementById.addEventListener("click", function () {
console.log("Element was clicked!");
});
После изучения базовых операций с DOM вы можете добавить следующий код в файл ~/project/script.js проекта EconoMe:
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");
let draggedIndex = null; // Index of the dragged item
});
Событие DOMContentLoaded в JavaScript срабатывает, когда исходный HTML-документ полностью загружен и разобран, без ожидания загрузки таблиц стилей, изображений и вложенных фреймов. Это делает его важным событием для запуска JavaScript-кода сразу после готовности DOM, гарантируя, что скрипт взаимодействует с полностью разобранными HTML-элементами.
На данном этапе в этом практическом занятии (lab) не требуется предварительный просмотр эффекта. Мы проверим его после завершения кода в следующих шагах.
Резюме
В этом практическом занятии (lab) вы начали совместно с Алексом создавать простую, но фундаментальную часть личного финансового трекера. Вы подготовили основу для динамического веб-приложения, настроив проектную среду и использовав JavaScript для манипуляции с DOM, показав начальное состояние финансов. Основная идея заключается в понимании того, как JavaScript взаимодействует с HTML-элементами для динамического изменения содержимого веб-страницы, создавая основу для более интерактивных функций в следующих шагах.
Такой практический подход не только укрепляет ваше понимание JavaScript и манипуляции с DOM, но и имитирует реальные сценарии веб-разработки, подготовляя вас к более сложным проектам в будущем.
