Введение

В этой лабораторной работе вы погрузитесь в мир веб-разработки глазами Алекса, начинающего веб-разработчика, которому поручено создать динамичный трекер личных финансов. Создать удобное приложение, которое позволит пользователям вводить и отслеживать свои ежедневные расходы и доходы. Цель ясна — разработать интуитивно понятный и привлекательный интерфейс, позволяющий пользователям легко и без каких-либо проблем управлять своими финансами. Цель этого проекта не только упростить управление личными финансами, но и познакомить вас с фундаментальными концепциями манипулирования JavaScript и DOM.

Для завершения проекта EconoMe мы будем работать в 5 лабораториях.

Очки знаний:

• Объявления переменных (let, const)
• Основы манипулирования DOM (получение элементов, изменение содержимого элементов)
• Прослушивание событий (addEventListener)

Базовый JavaScript

JavaScript — это простой объектно-ориентированный язык, управляемый событиями. Он загружается с сервера клиенту и выполняется браузером.

Его можно использовать с HTML и в Интернете, а также в более широком смысле на серверах, ПК, ноутбуках, планшетах и ​​смартфонах.

Его характеристики включают в себя:

• Обычно используется для написания клиентских скриптов.
• В основном используется для добавления интерактивного поведения на HTML-страницах.
• Это интерпретируемый язык, исполняемый так, как он интерпретируется.

Итак, как нам включить JavaScript в HTML?

Метод включения аналогичен CSS и может быть выполнен тремя способами:

• Непосредственно в тегах HTML, для особо короткого кода JavaScript.
• С помощью тега
• Используя внешний файл JavaScript, напишите код сценария JavaScript в файле с суффиксом .js и включите его, установив атрибут src тега

Например, если мы нажмем F12, мы увидим, что на эту страницу включено множество внешних файлов JavaScript, а нажав на Прослушиватели событий, мы увидим, что внутри страницы существует множество типов событий. страница.

Теперь давайте добавим тег

Далее давайте научимся определять переменные в JavaScript!

Что такое переменные

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

Объявление переменных

В JavaScript вы можете использовать ключевые слова var, let или const для объявления переменных:

• var: До ES6 var был основным способом объявления переменных и имел область действия функции.
• let: введенный в ES6, let позволяет объявлять локальные переменные с областью действия блока.
• 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 существует несколько различных типов данных:

• Строка: текстовые данные, например «Hello, World!».
• Число: целые числа или числа с плавающей запятой, например 42 или 3,14.
• Логическое значение: true или false.
• Объект: может хранить несколько значений или сложные структуры данных.
• 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. Вы можете использовать различные методы для доступа к элементам, например, по их идентификатору, имени класса или имени тега:

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.

Например, чтобы вставить

Новое содержимое HTML

Добавление и удаление элементов

Вы можете динамически добавлять или удалять элементы на странице с помощью 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() добавляет новый элемент в конец элемента .
• Метод document.body.removeChild() удаляет элемент из элемента .

Обработка событий

Прослушиватели событий позволяют реагировать на действия пользователя.

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.

На данном этапе эта лабораторная работа не требует предварительного просмотра эффекта. Мы рассмотрим его после завершения кода, выполнив следующие шаги.

Краткое содержание

В этой лабораторной работе вы вместе с Алексом отправились в путь создания базовой, но фундаментальной части трекера личных финансов. Вы подготовили почву для динамического веб-приложения, настроив среду проекта и используя JavaScript для управления DOM, показывая начальные финансовые состояния. Ключевым выводом является понимание того, как JavaScript взаимодействует с элементами HTML для динамического изменения содержимого веб-страницы, что закладывает основу для дополнительных интерактивных функций на следующих шагах.

Этот практический подход не только укрепит ваше понимание манипулирования JavaScript и DOM, но также имитирует реальные сценарии веб-разработки, подготавливая вас к более сложным проектам.

? Попрактикуйтесь сейчас: базовый JavaScript и DOM

Хотите узнать больше?

• ? Изучите новейшие деревья навыков JavaScript
• ? Прочитайте больше руководств по JavaScript
• ? Присоединяйтесь к нашему Discord или напишите нам @WeAreLabEx