В этом практическом занятии (Lab) вы окунетесь в мир веб-разработки глазами Алекса, начинающего веб-разработчика, которому поручено создать динамический личный финансовый трекер. Цель - создать удобное для пользователя приложение, которое позволяет пользователям вводить и отслеживать свои ежедневные расходы и доходы. Цель ясна - разработать интерфейс, который будет как интуитивно понятным, так и привлекательным, чтобы пользователи могли легко управлять своими финансами без каких-либо проблем. Этот проект не только ставит перед собой цель упростить управление личными финансами, но и познакомить вас с основными концепциями JavaScript и манипуляцией с DOM.
Мы будем работать над 5 практическими занятиями (labs), чтобы завершить проект EconoMe.
Точки знания:
Объявление переменных (let, const)
Основы манипуляции с DOM (получение элементов, изменение содержимого элементов)
Слушание событий (addEventListener)
Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня средний с процентом завершения 65%. Он получил 97% положительных отзывов от учащихся.
Основы 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.
Переменные можно рассматривать как контейнеры для хранения информации. В программировании мы используем переменные для хранения значений данных. JavaScript - это динамически типизированный язык, что означает, что вам не нужно объявлять тип переменной. Тип будет определен автоматически во время выполнения программы.
Объявление переменных
В JavaScript вы можете использовать ключевые слова var, let или const для объявления переменных:
var: До ES6 var был основным способом объявления переменных, и он имеет функциональную область видимости (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 (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:
После того, как у вас есть ссылка на элемент, вы можете изменить его содержимое. Свойства 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, но и имитирует реальные сценарии веб-разработки, подготовляя вас к более сложным проектам в будущем.
