| کانال توسعه‌دهندگان جاوااسکریپت

| کانال توسعه‌دهندگان جاوااسکریپت |

🎉 Nuxt V4
به تازگی نسخه جدید (V4) فریمورک ناکست منتشر شد...

🔥 تغییرات مهم در Nuxt 4:

🔹 ساختار جدید پروژه (پوشه app/)
ساختار پروژه حالا به صورت زیره و کدهای اپلیکیشن در app/ قرار می‌گیرن:

my-nuxt-app/
├─ app/
│  ├─ pages/
│  ├─ components/
│  ├─ layouts/
│  └─ app.vue
├─ server/
├─ shared/
├─ public/
└─ nuxt.config.ts

🔄 دیتا فچینگ بهینه تر شده
🔧 تجربه TypeScript بهبودیافته
⚡️ سرعت CLI بهتر شده
🎨 قالب‌های UI جدید اضافه شده

و Nuxt 3 تا پایان ژانویه 2026 آپدیت‌های نگه‌داری رو دریافت می‌کنه.

برای مطالعه بیشتر میتونید به وبلاگ ناکست سر بزنید.

🔖 #Javascript, #JS, #جاوااسکریپت, #nuxt, #vue

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

🔥18❤5

4.73K views05:59

| کانال توسعه‌دهندگان جاوااسکریپت |

Forwarded from | Erfan's Notes |

حدودا یک ماه از ریلیز شدن نسخه 3.0 وب‌اسمبلی (WASM) می‌گذره و الان فرصت کردم درموردش بخونم، تغییرات مهمی که داشته رو پایین می‌نویسم.

💠 پشتیبانی از Address Space های 64 بیت
تا قبل از این نسخه، وب‌اسمبلی محدود به آدرس‌های i32 بود و نمی‌تونست بیشتر از 4GB رو آدرس‌دهی کنه، ولی پشتیبانی از i64 اضافه شده و این محدودیت عملا بی‌نهایت شده، هرچند که همچنان مرورگرها حداکثر اجازه allocate کردن 16GB رو می‌دن.

💠 پشتیبانی از Memory های چندگانه
تا قبل از این نسخه، هر ماژول وب‌اسمبلی فقط محدود به یک Memory بود و برای تفکیک باید ماژول‌ها Split می‌شدند، ولی در این نسخه قابلیت داشتن Memory های متعدد برای یک ماژول اضافه شده.

💠 پشتیبانی از Garbage Collection
در این نسخه یک افزونه با عنوان wasm-gc اضافه شده که در سطوح پایین می‌تونه مموری رو به‌صورت خودکار مدیریت کنه، کامپایلرها می‌تونند Struct ها و آرایه‌ها و بعضی Integer ها رو به صورت تگ شده تعریف کنند و خود wasm وظیفه allocation و lifetime شون رو برعهده بگیره.

💠 پشتیبانی از Tail Call ها
قابلیت Tail Call به وب‌اسمبلی اضافه شده، این ویژگی از زبان‌های فانکشنال الگو گرفته، به این معنی که فانکشن‌ها می‌تونند در آخرین اکشن‌شون یک فانکشن دیگه‌ای رو کال کنند بدون اینکه فضایی از Stack رو اشغال کنند، این موضوع در کال های Recursive اهمیت زیادی داره.

💠 پشتیبانی از Exception ها
پشتیبانی از Exception های try و catch در وب‌اسمبلی اضافه شده، تا قبل از این برای چنین کاری باید از JS استفاده می‌شد.

💠 پشتیبانی از String های جاوا اسکریپت
قابلیت رد و بدل کردن مستقیم String های جاوا اسکریپت بدون نیاز به تبدیل دو طرفه اضافه شده، می‌تونید مقادر String رو به صورت مستقیم به‌عنوان externref پاس بدید و سمت wasm تغییرات لازم رو روش اعمال کنید و سمت JS تحویل بگیرید.

و البته کلی قابلیت دیگه که اگر دوست داشتید می‌تونید اینجا بخونید.

Please open Telegram to view this post

VIEW IN TELEGRAM

❤2🔥1

2.52K views18:44

| کانال توسعه‌دهندگان جاوااسکریپت |

🤝 اگر تو پروژه‌های React هنوز برای data fetching از useEffect + fetch استفاده می‌کنی، زمان آشنایی با TanStack Query (react-query) رسیده.

این لایبرری مشکل مدیریت state سرور (data از API) رو حل می‌کنه؛ مثل:
• کش‌کردن requestها
• refetch خودکار داده‌ها
• مدیریت loading / error
• همگام‌سازی دیتا بین تب‌ها و کامپوننت‌ها

نتیجه؟ کد کمتر، باگ کمتر، UX روان‌تر. مخصوصاً تو dashboardها، panelهای ادمین، یا هر جایی که چندین API call داری.

نصب:

npm install @tanstack/react-query

نمونه استفاده ساده:

import { QueryClient, QueryClientProvider,
  useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function Todos() {
  const { data, isLoading, error } = useQuery(['todos'], () =>
    fetch('/api/todos').then(r => r.json())
  );

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error!</span>;
  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  );
}

مستندات رسمی و مثال‌های بیشتر:
Docs
GitHub

امتحانش کن تو پروژه بعدی‌ات؛ مخصوصاً جاهایی که چند بار از یک API استفاده می‌کنی یا نیاز به refetch هوشمند داری. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #TanStack_Query #Frontend #State_Management

👤 Developix

💎 Channel: @DevelopixJavascript

🔥11

2.42K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

👇 خروجی نهایی این کد JavaScript چیست؟

در این مثال از closure و رفتار hoisting برای توابع و متغیرها استفاده شده است. با دقت ترتیب اجرا و نوع متغیرها را بررسی کنید:

function makeCounter() {
  console.log(typeof count);

  var count = 0;

  return function(step) {
    count += step;
    return count;
  };
}

const c1 = makeCounter();
const c2 = makeCounter();

console.log(c1(1));
console.log(c1(2));
console.log(c2(5));

خروجی دقیق این کد در کنسول چیست؟ (هر خط را به ترتیب بنویسید)

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

👍7❤1

2.17K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در کد زیر هدف این است که هر ثانیه مقدار متغیر count یک واحد زیاد شود و در نهایت بعد از ۳ ثانیه در console لاگ شود. اما مقدار نهایی لاگ‌شده درست نیست. مشکل کجاست و این کد را چطور اصلاح می‌کنید تا مقدار صحیح لاگ شود؟

نکته: به رفتار var داخل حلقه و زمان اجرای setTimeout دقت کنید.

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

❤5👍2

1.95K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در مثال بالا در نسخه‌ی اول برای هر بار اسکرول کل آرایه‌ی items دوباره sort می‌شود؛ این کار هم هزینه‌ی زمانی O(n log n) را روی هر رویداد اسکرول تحمیل می‌کند و هم باعث ایجاد GC pressure غیرضروری می‌شود. در نسخه‌ی دوم با مرتب‌سازی یک‌بارِ داده‌ها و استفاده از requestAnimationFrame برای کاهش فراخوانی‌های متوالی، هم Performance رندر بهتر می‌شود و هم مصرف CPU و Memory کمتر می‌گردد. برای چنین سناریوهایی که داده‌ها به‌ندرت عوض می‌شوند ولی Event ها زیاد تریگر می‌شوند، این الگو چه مزیت‌هایی نسبت به نسخه‌ی اول دارد؟

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

🔥5

1.74K views17:01

| کانال توسعه‌دهندگان جاوااسکریپت |

🚀 ساخت یک TODO List ساده با Vanilla JavaScript (بدون فریم‌ورک)

گاهی برای تمرین مفاهیم modern JS لازم نیست سراغ React یا Vue رفت؛ یک TODO List ساده با Vanilla JavaScript می‌تواند کلی چیز مثل DOM، event handling و localStorage را روشن کند 🤓

این ایده بر اساس مثال‌های رسمی DOM و Storage در MDN است:
MDN querySelector
MDN localStorage

در این مینی‌پروژه:

✅ با querySelector و addEventListener کار می‌کنی
✅ آیتم‌ها را در localStorage نگه می‌داری تا با رفرش صفحه نپرند
✅ یک ساختار کد تمیز و قابل‌گسترش می‌سازی

ایدهٔ سناریو 📝
فرض کن می‌خواهی کارهای روزانه‌ات را روی مرورگر ثبت کنی؛ اضافه‌کردن task، حذف‌کردن، و این‌که با بستن تب همه چیز نپره. همین.

نمونه کد مینیمال (index.html + script.js در یک فولدر بگذار):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Todo Vanilla JS</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { margin-right: 8px; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <input id="todo-input" placeholder="New task..." />
  <button id="add-btn">Add</button>
  <ul id="todo-list"></ul>

  <script>
    const input = document.querySelector("#todo-input");
    const addBtn = document.querySelector("#add-btn");
    const list = document.querySelector("#todo-list");

    let todos = JSON.parse(localStorage.getItem("todos") || "[]");

    function save() {
      localStorage.setItem("todos", JSON.stringify(todos));
    }

    function render() {
      list.innerHTML = "";
      todos.forEach((text, index) => {
        const li = document.createElement("li");
        li.textContent = text;

        const removeBtn = document.createElement("button");
        removeBtn.textContent = "x";
        removeBtn.addEventListener("click", () => {
          todos.splice(index, 1);
          save();
          render();
        });

        li.prepend(removeBtn);
        list.appendChild(li);
      });
    }

    addBtn.addEventListener("click", () => {
      const value = input.value.trim();
      if (!value) return;
      todos.push(value);
      input.value = "";
      save();
      render();
    });

    render();
  </script>
</body>
</html>

چند نکته‌ی کاربردی 💡

• JSON.parse و JSON.stringify این‌جا برای تبدیل آرایه به string و برعکس استفاده شده؛ دقیقا مطابق چیزی که MDN برای localStorage پیشنهاد می‌دهد.
• همیشه قبل از push، مقدار input را .trim() کن تا task خالی ذخیره نشود.
• با جداکردن تابع‌های save و render، بعدا راحت می‌شود featureهایی مثل edit یا checkbox برای completed اضافه کرد.

این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگه‌داشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریم‌ورکی را راحت‌تر می‌فهمی ✨

امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار می‌کند» می‌دهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

🔥7❤3

1.49K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

‌‎پاک‌سازی توابع با تکنیک «Early Return» در JavaScript 🚿

یکی از ساده‌ترین و مؤثرترین تکنیک‌های Clean Code در جاوااسکریپت، استفاده از Early Return است؛ یعنی به‌جای پیچوندن منطق داخل ifهای تودرتو، در همان اول تابع، شرایط نامعتبر را سریع برگردانیم.

این تکنیک توابع را:

• کوتاه‌تر و خواناتر می‌کند ✨
• از Nested if‌های عمیق جلوگیری می‌کند
• باعث می‌شود مسیرهای خطا و edge caseها واضح‌تر دیده شوند

نمونه کد قبل از refactor (کد سخت‌خوان)

function createUser(data) {
  if (data) {
    if (data.email) {
      if (data.password && data.password.length >= 8) {
        // save to DB
        return { ok: true, user: data };
      } else {
        return { ok: false, error: 'Weak password' };
      }
    } else {
      return { ok: false, error: 'Email is required' };
    }
  } else {
    return { ok: false, error: 'No data' };
  }
}

این تابع کارش را انجام می‌دهد، اما هر شرط جدیدی که اضافه شود، عمق ifها بیشتر می‌شود و دیباگ سخت‌تر.

Refactor با Early Return ✅

function createUser(data) {
  if (!data) {
    return { ok: false, error: 'No data' };
  }

  if (!data.email) {
    return { ok: false, error: 'Email is required' };
  }

  if (!data.password || data.password.length < 8) {
    return { ok: false, error: 'Weak password' };
  }

  // happy path
  return { ok: true, user: data };
}

الان:

• هر شرط invalid در بالا «قطع» می‌شود 🔪
• مسیر اصلی (happy path) در انتها واضح و تمیز است
• اضافه‌کردن شرط جدید فقط یعنی اضافه کردن چند خط دیگر بالای happy path

نمونه در Express / Node.js 🌐

app.post('/login', async (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ message: 'Missing credentials' });
  }

  const user = await findUserByEmail(email);
  if (!user) {
    return res.status(404).json({ message: 'User not found' });
  }

  const valid = await comparePassword(password, user.passwordHash);
  if (!valid) {
    return res.status(401).json({ message: 'Invalid password' });
  }

  // happy path
  res.json({ token: createToken(user) });
});

هر مرحله نامعتبر به‌سرعت return می‌شود و منطق login مثل یک «چک‌لیست» خطی خوانده می‌شود.

نکته مهم 🔍

Early Return با Single Responsibility خیلی خوب جفت می‌شود؛ اگر تابع خیلی طولانی شد، علاوه بر early return، آن را به چند تابع کوچک‌تر با نام‌های خوب بشکنید.

منابع برای مطالعهٔ بیشتر:
• MDN – Control Flow
• Refactoring.Guru

این سبک نوشتن را کم‌کم در هندلرهای Express، سرویس‌های Node.js یا حتی توابع React خودتان وارد کنید؛ بعد از مدتی، خواندن و نگه‌داری کد برای خودتان و تیم‌تان به‌وضوح راحت‌تر می‌شود 🙌

🔖 #Javascript #JS #جاوااسکریپت #clean_code #early_return #javascript #nodejs #express #refactoring

👤 Developix

💎 Channel: @DevelopixJavascript

👍4❤3

1.35K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

Forwarded from کانال رسمی تک نت | Taknet

🚀 سرور اختصاصی با تنوع منابع برای هر نوع نیاز
⏺پورت اختصاصی
⏺آپلود رایگان
⏺تخفیف پلکانی ترافیک
⏺آپتایم 99.99%
⏺24 ساعت تست رایگان
⏺رائه IP مازاد
⏺پشتیبانی 24/7
⏺تحویل فوری
⏺ارائه سرویس Colocation
⏺بدون قطعی
⏺پرداخت ماهیانه

⏰ تعداد محدود – برای استفاده از این تخفیف ویژه سریع اقدام کن!
برای اطلاعات بیشتر و سفارش، تماس بگیر:
🔺 02191555530

💻

خرید سرور اختصاصی

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2👎1

687 views16:30

| کانال توسعه‌دهندگان جاوااسکریپت |

گاهی کد async/await خیلی شلوغ می‌شه چون پر از try/catch تکراریه. یه الگوی جمع‌وجور می‌تونه هم کد رو تمیز کنه، هم مدیریت خطاها رو واضح‌تر کنه.

ایده اینه: به‌جای try/catch دور هر await، یه helper کوچک می‌نویسیم که همیشه نتیجه رو به شکل یک آرایه برگردونه: [err, data]. شبیه سبک Node.js، ولی مدرن و تمیز 😎

const to = (promise) => promise
  .then((data) => [null, data])
  .catch((err) => [err, null]);

async function fetchUser(userId) {
  const [err, res] = await to(
    fetch(`https://api.example.com/users/${userId}`)
  );

  if (err) {
    console.error('خطا در درخواست:', err);
    return null;
  }

  const [parseErr, data] = await to(res.json());

  if (parseErr) {
    console.error('خطا در parse کردن JSON:', parseErr);
    return null;
  }

  return data;
}

نکات مهم ✅

• ساختار کنترل خطا توی تابع مشخص و خطی می‌مونه، بدون چندین try/catch تو در تو.
• می‌شه این الگو رو برای هر Promise (مثل عملیات دیتابیس، fetch، کار با فایل در Node.js و ...) دوباره استفاده کرد.
• حواست باشه همیشه یا هر دو مقدار [err, data] رو destructure کنی، یا حداقل err رو چک کنی تا Memory Leak یا رفتار غیرمنتظره نگیری.

برای ساخت API تمیز و قابل تست، این الگو کنار TypeScript یا JSDoc خیلی خوب جواب می‌ده، چون نوع خروجی همیشه قابل پیش‌بینی و یکنواخته.

امتحان این pattern روی فانکشن‌های async کوچیک شروع می‌شه، بعد کم‌کم می‌تونه تبدیل بشه به style اصلیت برای هندل کردن Promiseها 🙌

مرجع بیشتر درباره Promise و خطاها تو MDN:
MDN - Promise

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #async_await #Promise #error_handling #ES6

👤 Developix

💎 Channel: @DevelopixJavascript

❤5👎2🔥1

1.37K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در کد زیر توسعه‌دهنده می‌خواهد یک حلقه از توابع async بسازد که به‌ترتیب و با فاصله زمانی اجرا شوند، اما نتیجه‌ی نهایی آرایه‌ای خالی یا ناقص برمی‌گردد و همه‌ی async ها درست منتظر نمی‌مانند.

سوال: در این کد چه چیزی باید اصلاح شود تا Promise chain به‌درستی کار کند و همه‌ی درخواست‌های async به‌ترتیب انجام شده و در نهایت آرایه results بعد از تکمیل همه‌ی عملیات برگردانده شود؟

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData(id) {
  await delay(100);
  console.log("fetched", id);
  return { id, time: Date.now() };
}

function runSequential(ids) {
  const results = [];

  ids.forEach(async (id) => {
    const data = await fetchData(id);
    results.push(data);
  });

  return Promise.resolve(results);
}

runSequential([1, 2, 3]).then(console.log);

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

❤2

1.27K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

در کد زیر یک خطای ظریف در استفاده از async/await و Array.prototype.map وجود دارد که باعث می‌شود رفتار برنامه مطابق انتظار نباشد.

چه چیزی باید در این کد تغییر کند تا همه درخواست‌ها به صورت async درست اجرا شوند و مقدار نهایی results به درستی شامل پاسخ‌های resolve شده باشد؟

const urls = [
  "https://api.example.com/user/1",
  "https://api.example.com/user/2",
  "https://api.example.com/user/3",
];

async function fetchUsers() {
  let results = [];

  urls.map(async (url) => {
    const res = await fetch(url);
    const data = await res.json();
    results.push(data);
  });

  return results;
}

fetchUsers().then((users) => {
  console.log("Users:", users);
});

🔖 #Javascript #JS #جاوااسکریپت

👤 Developix

💎 Channel: @DevelopixJavascript

❤6

1.44K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

قانون «یک سطح انتزاع در هر تابع» در JavaScript 🧠✨

یکی از نکات طلایی در Clean Code این است که هر تابع فقط با یک سطح انتزاع کار کند. یعنی یا درگیر جزئیات low-level باشد، یا فقط کارهای high-level را صدا بزند؛ نه هر دو را قاطی.

این قانون کمک می‌کند:

• خوانایی کد بالا برود 👀
• Refactor کردن ساده‌تر شود 🔧
• تست‌نویسی راحت‌تر شود ✅

🍂 یک مثال از کد شلوغ در Node.js / Express

app.post('/api/users', async (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ message: 'Invalid data' });
  }

  if (!email.includes('@')) {
    return res.status(400).json({ message: 'Invalid email' });
  }

  const exists = await db.collection('users').findOne({ email });
  if (exists) {
    return res.status(409).json({ message: 'Already exists' });
  }

  const hash = await bcrypt.hash(password, 10);

  const user = {
    email,
    password: hash,
    createdAt: new Date()
  };

  await db.collection('users').insertOne(user);

  res.status(201).json({ id: user._id, email: user.email });
});

این تابع هم validation انجام می‌دهد، هم کار دیتابیس، هم جزئیات hash، هم پاسخ HTTP. سطح‌های انتزاع قاطی شده‌اند.

🌱 Refactor با یک سطح انتزاع در هر تابع

const validateUserPayload = (body) => {
  const { email, password } = body;
  if (!email || !password) return 'Invalid data';
  if (!email.includes('@')) return 'Invalid email';
  return null;
};

const createUser = async ({ email, password }, db, hasher) => {
  const exists = await db.collection('users').findOne({ email });
  if (exists) return { error: 'Already exists' };

  const passwordHash = await hasher(password);

  const user = {
    email,
    password: passwordHash,
    createdAt: new Date()
  };

  const result = await db.collection('users').insertOne(user);

  return { id: result.insertedId, email: user.email };
};

app.post('/api/users', async (req, res) => {
  const validationError = validateUserPayload(req.body);
  if (validationError) {
    return res.status(400).json({ message: validationError });
  }

  const result = await createUser(
    req.body,
    db,
    (password) => bcrypt.hash(password, 10)
  );

  if (result.error) {
    return res.status(409).json({ message: result.error });
  }

  res.status(201).json(result);
});

حالا:

• تابع validateUserPayload فقط validation است ✅
• تابع createUser فقط منطق ساخت کاربر را دارد ✅
• route handler فقط orchestration انجام می‌دهد ✅

این جداسازی باعث می‌شود بعداً راحت‌تر TypeScript اضافه کنید، Unit Test بنویسید، یا منطق ساخت کاربر را در سرویس دیگری (مثلاً در یک worker) استفاده کنید.

منابع برای مطالعه بیشتر:
• Refactoring.Guru
• MDN – Learn JS

قدم‌به‌قدم همین الگو را روی قسمت‌های شلوغ پروژه‌های Node.js / React / Next.js خود پیاده کنید؛ هر بار که یک تابع را به یک سطح انتزاع محدود می‌کنید، کدتان قابل‌اعتمادتر و نگه‌داری‌پذیرتر می‌شود 🚀

🔖 #Javascript #JS #جاوااسکریپت #Clean_Code #JavaScript #Node_js #Express #Refactoring #Best_Practices

👤 Developix

💎 Channel: @DevelopixJavascript

👍4👎3❤2

1.56K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

✨ ساخت یک Todo List ساده با JavaScript خالص (بدون Framework)

خیلی وقت‌ها برای تمرین JavaScript و DOM، یک پروژه کوچیک و واقعی مثل Todo List بهترین گزینه‌ست. هم رویدادها رو لمس می‌کنی، هم کار با DOM و هم مدیریت state ساده رو.

یکی از بهترین رفرنس‌ها برای کار با DOM و رویدادها، مستندات MDN هست:
MDN DOM Introduction

در این تمرین، با چند مفهوم مهم سر و کار داریم:

✅ گرفتن elementها با querySelector
✅ گوش دادن به eventها مثل submit و click
✅ جلوگیری از refresh فرم با event.preventDefault()
✅ دستکاری DOM با createElement و appendChild

مثال زیر یک Todo List خیلی ساده ولی عملی است. کافی‌ست یک فایل index.html بسازی و این کد را داخلش قرار بدهی و در مرورگر باز کنی:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Simple Todo</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    form { display: flex; gap: 8px; }
    ul { padding: 0; list-style: none; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { cursor: pointer; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <form id="todo-form">
    <input id="todo-input" placeholder="New task..." required />
    <button type="submit">Add</button>
  </form>
  <ul id="todo-list"></ul>

  <script>
    const form = document.querySelector('#todo-form');
    const input = document.querySelector('#todo-input');
    const list = document.querySelector('#todo-list');

    form.addEventListener('submit', function (event) {
      event.preventDefault();
      const text = input.value.trim();
      if (!text) return;

      const li = document.createElement('li');
      const span = document.createElement('span');
      span.textContent = text;

      const removeBtn = document.createElement('button');
      removeBtn.textContent = 'x';

      removeBtn.addEventListener('click', function () {
        list.removeChild(li);
      });

      li.appendChild(span);
      li.appendChild(removeBtn);
      list.appendChild(li);

      input.value = '';
      input.focus();
    });
  </script>
</body>
</html>

نکته‌های ریز 👇

• استفاده از trim() جلوی اضافه شدن تسک خالی را می‌گیرد.
• با event.preventDefault() فرم صفحه را reload نمی‌کند و کنترل دست ما می‌ماند.
• با addEventListener روی خود دکمه حذف کار می‌کنیم تا ساختار کد تمیزتر بماند.

این تمرین پایه خوبی برای قدم‌های بعدی مثل ذخیره‌سازی در localStorage، اضافه کردن فیلتر (Completed / Active) یا بعداً پیاده‌سازی همین ایده در React یا Vue است.

امتحانش روی یک فایل ساده لوکال حس خوبی از «کار کردن کد» می‌دهد و درک DOM را خیلی محکم‌تر می‌کند. اگر به درد دوستی می‌خورد که تازه JavaScript را شروع کرده، برایش بفرست 💚

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #Todo #Frontend #ES6 #VanillaJS

👤 Developix

💎 Channel: @DevelopixJavascript

🔥6

550 views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

Forwarded from ابر ویراک

ویراک کلود | تجربه‌ی ابری بدون محدودیت ☁️🚀

🎁 ۲۰٪ شارژ هدیه روی اولین واریزی

مزیت‌هایی که واقعاً فرق می‌سازن:
⚡️ پهنای باند 980 مگ
🌐با IP مازاد
⏱️ راه‌اندازی فوری
💳 پرداخت ساعتی
🛡 پشتیبانی ۲۴/۷

💬 هر سوالی داشتی، تیم ما کنارتـه
✅ مناسب استارتاپ‌ها، تیم‌های فنی، تا سازمان‌های بزرگ

همین الان شروع کن و با حداکثر منابع، سریع‌تر رشد کن 👇🏻

📞 تماس سریع: 02191555530
🔗 https://virakcloud.com

136 views17:00

About

Blog

Apps

Platform