JavaScript 및 DOM 조작 마스터하기

소개

이 실습에서는 역동적인 개인 금융 추적기를 만드는 일을 맡은 신진 웹 개발자 Alex의 눈을 통해 웹 개발의 세계로 들어가게 됩니다. 사용자가 일일 지출과 수입을 입력하고 추적할 수 있는 사용자 친화적인 애플리케이션을 구축합니다. 목표는 분명합니다. 직관적이고 매력적인 인터페이스를 개발하여 사용자가 번거로움 없이 쉽게 재정을 관리할 수 있도록 하는 것입니다. 이 프로젝트의 목표는 개인 재무 관리를 단순화할 뿐만 아니라 JavaScript 및 DOM 조작의 기본 개념을 소개하는 것입니다.

EconoMe 프로젝트를 완성하기 위해 5개의 연구소를 통해 작업할 예정입니다.

지식 포인트:

• 변수 선언(let, const)
• DOM 조작 기본(요소 가져오기, 요소 콘텐츠 수정)
• 이벤트 청취(addEventListener)

기본 자바스크립트

JavaScript는 단순하고 객체 지향적이며 이벤트 중심적인 언어입니다. 서버에서 클라이언트로 다운로드되어 브라우저에서 실행됩니다.

HTML 및 웹과 함께 사용할 수 있으며, 더 광범위하게는 서버, PC, 노트북, 태블릿, 스마트폰에서 사용할 수 있습니다.

특징은 다음과 같습니다.

• 일반적으로 클라이언트 측 스크립트 작성에 사용됩니다.
• 주로 HTML 페이지에 대화형 동작을 추가하는 데 사용됩니다.
• 번역된 언어로, 해석된 대로 실행됩니다.

그럼 HTML에 JavaScript를 어떻게 포함하나요?

포함 방법은 CSS와 유사하며 세 가지 방법으로 수행할 수 있습니다.

• 특히 짧은 JavaScript 코드의 경우 HTML 태그에 직접 사용됩니다.
• 사용 태그를 사용하면 JavaScript 코드를 및 HTML 문서의
• 외부 JavaScript 파일을 사용하여 접미사가 .js인 파일에 JavaScript 스크립트 코드를 작성하고 <script> 태그.</script>

예를 들어 F12를 누르면 이 페이지에 외부 JavaScript 파일이 많이 포함되어 있는 것을 확인할 수 있고, 이벤트 리스너를 클릭하면 페이지 내에 다양한 유형의 이벤트가 있는 것을 확인할 수 있습니다. 페이지.

이제 <script> script.js 파일을 포함하려면 ~/project/index.html에 태그를 지정하세요.<br> </script>

  
    <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>
  
  

다음으로 자바스크립트에서 변수를 정의하는 방법을 배워보겠습니다!

변수란?

변수는 정보를 저장하는 컨테이너로 볼 수 있습니다. 프로그래밍에서는 변수를 사용하여 데이터 값을 저장합니다. JavaScript는 동적으로 유형이 지정되는 언어이므로 변수 유형을 선언할 필요가 없습니다. 유형은 프로그램 실행 중에 자동으로 결정됩니다.

변수 선언

JavaScript에서는 var, let 또는 const 키워드를 사용하여 변수를 선언할 수 있습니다.

• var: ES6 이전에는 var가 변수를 선언하는 주요 방법이었으며 함수 범위를 가졌습니다.
• let: ES6에 도입된 기능으로, 블록 범위 지역 변수를 선언할 수 있습니다.
• 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와 같은 정수 또는 부동 소수점 숫자.
• 부울: 참 또는 거짓.
• 객체: 여러 값이나 복잡한 데이터 구조를 저장할 수 있습니다.
• null 및 정의되지 않음: 각각 "값 없음" 및 "값이 정의되지 않음"을 나타내는 특수 유형입니다.

변수 사용

변수가 선언되면 프로그램에서 사용할 수 있습니다.

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 O객체 Model)은 HTML 및 XML 문서를 트리 구조로 처리하는 크로스 플랫폼, 언어 독립적인 인터페이스입니다. , 여기서 각 노드는 요소, 속성, 텍스트 콘텐츠 등 문서의 일부입니다.

Accessing DOM Elements

To manipulate the content of a web page, you first need to access the elements in the DOM tree. You can use various methods to access elements, such as by their ID, class name, or tag name:

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

Add the following code to the ~/project/script.js file of the EconoMe project:

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");

Modifying Element Content

Once you have a reference to an element, you can modify its content. The innerHTML and textContent properties are commonly used for this purpose.

For example, to insert

New HTML content

into a div element with id=content and replace "Hello" with "New text content" in a span element with id=info, you would use the following JavaScript code:

Adding and Removing Elements

You can dynamically add or remove elements on the page using JavaScript.

For example:

// 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

• In an HTML document, the document.createElement() method creates the HTML element.
• The document.body.appendChild() method adds the new element to the end of the element.
• The document.body.removeChild() method removes the element from the element.

Event Handling

Event listeners allow you to respond to user actions.

addEventListener("event", function () {});

such as clicks, hover, or key presses:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

After learning the basic DOM operations, you can add the following code to the ~/project/script.js file of the EconoMe project:

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
});

The DOMContentLoaded event in JavaScript is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This makes it an important event for running JavaScript code as soon as the DOM is ready, ensuring that the script interacts with fully parsed HTML elements.

This lab does not require previewing the effect at this point. We will review it after completing the code in the following steps.

Summary

In this lab, you embarked on the journey of building a basic yet fundamental part of a personal finance tracker with Alex. You've set the stage for a dynamic web application by setting up the project environment and using JavaScript to manipulate the DOM, showing initial financial states. The key takeaway is understanding how JavaScript interacts with HTML elements to dynamically change the content of a web page, laying the groundwork for more interactive features in the following steps.

This hands-on approach not only solidifies your understanding of JavaScript and DOM manipulation but also simulates real-world web development scenarios, preparing you for more complex projects ahead.

---

? Practice Now: Basic JavaScript and DOM

---

Want to Learn More?

• ? Learn the latest JavaScript Skill Trees
• ? Read More JavaScript Tutorials
• ? Join our Discord or tweet us @WeAreLabEx

위 내용은 JavaScript 및 DOM 조작 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!