JavaScript үндэс / Эцсийн төсөл

Эцсийн төсөл

Та хувьсагч, функц, массив, объект, async/await, DOM, OOP, модулиуд, тест — JavaScript-ийн бүрэн суурийг эзэмшлээ. Одоо тэр мэдлэгийг нэг бодит апп болгон нэгтгэх цаг болжээ. Энэ хичээл бол шинэ зүйл сурах биш — сурснаа бататгах, бие даан бодох, алдааг өөрөө засах дасгал юм.

Юу бүтээх вэ?

Доорх гурван санаанаас нэгийг сонгоно — эсвэл өөрийн санааг хэрэгжүүл. Гол шаардлага: ажиллаж, хэрэглэгч ашиглаж болох байх.

Сонголт А — Даалгаврын жагсаалт (Todo App) Хамгийн сонгодог дасгал. Гэхдээ дараах шаардлагыг биелүүлснээр нарийсна:

  • Даалгавар нэмэх, устгах, дуусгасан гэж тэмдэглэх
  • localStorage-д хадгалж, хуудас шинэчилсэн ч мэдээлэл үлдэх
  • Дуусаагүй / дууссан / бүгд гэж шүүх

Сонголт Б — Цаг агаарын апп (Weather App)

  • Хэрэглэгч хот оруулна → OpenWeatherMap эсвэл Open-Meteo API-аас (үнэгүй) мэдээлэл авна
  • Температур, чийгшил, дүрслэл харуулна
  • Алдааг зохицуулж, ачааллаж байгааг мэдэгдэнэ

Сонголт В — Үг цээжлэх апп (Flashcard App)

  • Монгол-Англи үгсийн карт үүсгэх
  • Санамсаргүй дарааллаар харуулах
  • Мэдэх / мэдэхгүй гэж тэмдэглэх, оноо хуримтлуулах

Код зохион байгуулалт

Ямар апп сонгосон ч дараах бүтцийг баримтал:

код
project/
├── index.html
├── style.css
└── src/
    ├── main.js          ← эхлэх цэг
    ├── ui.js            ← DOM-тэй харилцах функцүүд
    ├── storage.js       ← localStorage уншиж бичих
    └── utils.js         ← туслах цэвэр функцүүд
javascript
// storage.js — модуль болгон зохион байгуулсан жишээ
export function хадгалах(түлхүүр, өгөгдөл) {
  localStorage.setItem(түлхүүр, JSON.stringify(өгөгдөл));
}

export function унших(түлхүүр, анхны_утга = null) {
  try {
    const хадгалсан = localStorage.getItem(түлхүүр);
    return хадгалсан ? JSON.parse(хадгалсан) : анхны_утга;
  } catch {
    return анхны_утга;
  }
}
javascript
// utils.js — цэвэр функцүүд, тест бичихэд хялбар
export function id_үүсгэх() {
  return `${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
}

export function огноо_формат(огноо = new Date()) {
  return огноо.toLocaleDateString("mn-MN", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

export function текст_хайрцаглах(текст, урт = 60) {
  return текст.length > урт ? текст.slice(0, урт) + "…" : текст;
}

Алхам алхмаар явах нь чухал

javascript
// main.js — Todo App-ийн жишээ эхлэл
import { хадгалах, унших } from "./storage.js";
import { id_үүсгэх, огноо_формат } from "./utils.js";
import { жагсаалт_дүрслэх, оролт_цэвэрлэх } from "./ui.js";

let даалгаврууд = унших("даалгаврууд", []);

function даалгавар_нэмэх(текст) {
  if (!текст.trim()) return;

  const шинэ = {
    id: id_үүсгэх(),
    текст: текст.trim(),
    дууссан: false,
    үүсгэсэн: огноо_формат(),
  };

  даалгаврууд = [...даалгаврууд, шинэ]; // immutability
  хадгалах("даалгаврууд", даалгаврууд);
  жагсаалт_дүрслэх(даалгаврууд);
  оролт_цэвэрлэх();
}

function даалгавар_устгах(id) {
  даалгаврууд = даалгаврууд.filter((д) => д.id !== id);
  хадгалах("даалгаврууд", даалгаврууд);
  жагсаалт_дүрслэх(даалгаврууд);
}

// Эхлэх
жагсаалт_дүрслэх(даалгаврууд);
document.querySelector("#нэмэх_товч").addEventListener("click", () => {
  даалгавар_нэмэх(document.querySelector("#оролт").value);
});

Дуусгасны дараа

Апп ажиллаж байвал дараах зүйлсийг нэмж бататга:

  • utils.js-ийн функцүүдэд Jest тест бич
  • GitHub-д байршуул (git init → git add . → git commit)
  • GitHub Pages эсвэл Vercel дээр нийтэд нээлттэй болго — үнэгүй

Баяр хүргэе. Та JavaScript-ийн суурийг эхнээс эцэс хүртэл туулж гарлаа — хувьсагчаас эхлээд OOP, async, тест, performance хүртэл. Энэ бол жижиг ололт биш. Цаашдын зам: React, Node.js, TypeScript — гэхдээ тэдгээрийн суурь нь та энд сурсан зүйлс юм. Код бичихээ зогсоохгүй байгаарай.

Дараагийн хичээлд:

Энэ курс дууслаа — гэхдээ таны аялал дөнгөж эхэллээ. TypeScript курс дээр уулзацгаая!

← Өмнөх хичээлТест бичих үндэс (Jest)