소개

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

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

지식 포인트:

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

기본 자바스크립트

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

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

특성은 다음과 같습니다.

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

그렇다면 HTML에 JavaScript를 어떻게 포함하나요?

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

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

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

이제 script.js 파일을 포함하도록 ~/project/index.html에

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

변수란?

변수는 정보를 저장하는 컨테이너로 볼 수 있습니다. 프로그래밍에서는 변수를 사용하여 데이터 값을 저장합니다. 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 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

EconoMe 프로젝트의 ~/project/script.js 파일에 다음 코드를 추가합니다.

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 속성은 일반적으로 이러한 목적으로 사용됩니다.

예를 들어, id=content인 div 요소에

새 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 작업을 학습한 후 EconoMe 프로젝트의 ~/project/script.js 파일에 다음 코드를 추가할 수 있습니다.

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

JavaScript의 DOMContentLoaded 이벤트는 스타일시트, 이미지 및 하위 프레임 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되면 시작됩니다. 이는 DOM이 준비되자마자 JavaScript 코드를 실행하는 중요한 이벤트가 되어 스크립트가 완전히 구문 분석된 HTML 요소와 상호 작용하도록 보장합니다.

이 실습에서는 현재 효과를 미리 볼 필요가 없습니다. 다음 단계에 따라 코드를 완성한 후 검토해 보겠습니다.

요약

이 실습에서는 Alex와 함께 개인 금융 추적기의 기초적이면서도 근본적인 부분을 구축하는 여정을 시작했습니다. 프로젝트 환경을 설정하고 JavaScript를 사용하여 DOM을 조작하여 초기 재무 상태를 표시함으로써 동적 웹 애플리케이션을 위한 무대를 설정했습니다. 핵심 내용은 JavaScript가 HTML 요소와 상호 작용하여 웹 페이지의 콘텐츠를 동적으로 변경하는 방법을 이해하고 다음 단계에서 보다 상호 작용적인 기능을 위한 토대를 마련하는 것입니다.

이 실습 접근 방식은 JavaScript 및 DOM 조작에 대한 이해를 강화할 뿐만 아니라 실제 웹 개발 시나리오를 시뮬레이션하여 앞으로 더 복잡한 프로젝트에 대비할 수 있도록 해줍니다.

? 지금 연습하세요: 기본 JavaScript 및 DOM

더 자세히 알고 싶으십니까?

• ? 최신 JavaScript 스킬 트리를 알아보세요
• ? 더 많은 JavaScript 튜토리얼 읽기
• ? Discord에 참여하거나 @WeAreLabEx로 트윗해 주세요.