Skip to content

Shayan3264/Shayan.dev

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
README.md
README.md
 
 

Repository files navigation

<title>سایت شخصی شایان</title> <style> /* ====== پایه و دارک‌تم ====== */ :root{ --bg:#0e0f13;--panel:#171923;--panel-2:#1f2230;--text:#e6e6eb;--muted:#a2a7b7;--brand:#00c2d7;--brand-2:#4dd0e1;--code-bg:#0a0c12;--accent:#ffb020;--ok:#21d19f;--danger:#ff6b6b; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Tahoma, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif; background:linear-gradient(180deg,var(--bg),#0b0c11 60%); color:var(--text); line-height:1.9; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:var(--brand); text-decoration:none} a:hover{color:var(--brand-2)} 
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(180deg,rgba(23,25,35,.9),rgba(23,25,35,.6));
  border-bottom:1px solid #24273a;
}
.container{max-width:1100px; margin:0 auto; padding:1.25rem}
.hero{display:flex; flex-direction:column; gap:.5rem; align-items:flex-start}
.title{margin:0; font-size:1.65rem; color:var(--brand)}
.subtitle{margin:0; color:var(--muted); font-size:.95rem}

nav.links{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem}
nav.links a{background:var(--panel-2); border:1px solid #262a40; padding:.45rem .7rem; border-radius:999px; font-size:.9rem; color:#cdd2e0}
nav.links a:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25)}

main{padding:2rem 0}
section.book{background:var(--panel); border:1px solid #272a3f; border-radius:20px; padding:1.25rem; margin:1.25rem 0; box-shadow:0 10px 30px rgba(0,0,0,.25)}
section.book>h2{display:flex; align-items:center; gap:.5rem; margin:.25rem 0 1rem; font-size:1.2rem; color:var(--brand-2)}

.toolbar{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:.75rem}
.search{flex:1 1 260px; display:flex; align-items:center; gap:.5rem; background:var(--panel-2); border:1px solid #2a2d44; border-radius:14px; padding:.55rem .75rem}
.search input{flex:1; background:transparent; border:0; color:var(--text); outline:none}
.btn{background:var(--panel-2); border:1px solid #2a2d44; color:#e9ecf3; padding:.55rem .8rem; border-radius:12px; cursor:pointer}
.btn:hover{filter:brightness(1.1)}

details.chapter{background:#1b1e2b; border:1px solid #2a2d44; border-radius:14px; padding:0; margin:1rem 0; overflow:hidden}
details.chapter[open]{box-shadow:0 8px 24px rgba(0,0,0,.3)}
details.chapter summary{list-style:none; cursor:pointer; user-select:none; padding:1rem 1rem; background:linear-gradient(180deg,#1f2230,#1a1d29); display:flex; justify-content:space-between; align-items:center}
details.chapter summary::-webkit-details-marker{display:none}
.ch-title{font-weight:700; color:#cfe8ff}
.badge{font-size:.75rem; color:#9fb1ff; background:#23263a; border:1px solid #2e3350; padding:.2rem .5rem; border-radius:8px}
.ch-body{padding:1rem 1rem 1.1rem; display:grid; gap:1rem}

h3{margin:0; color:#9ad5ff}
p{margin:.2rem 0}
ul{margin:.2rem 0 .4rem .8rem}

pre{background:var(--code-bg); border:1px solid #23263d; border-radius:12px; padding:1rem; overflow:auto}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; color:#a9ffe6}

.exercise{background:#1e2130; border:1px dashed #3a3f66; border-radius:12px; padding:1rem}
.exercise h4{margin:.2rem 0 .6rem; color:var(--accent)}
.exercise ol{margin:0 0 0 1rem}
.tips{background:#15221e; border:1px solid #294a3d; border-radius:12px; padding:.8rem; color:#cfeadd}
.warn{background:#2a1a1a; border:1px solid #503434; border-radius:12px; padding:.8rem; color:#ffdede}

footer{border-top:1px solid #24273a; color:#9aa2b5; padding:2rem 0; text-align:center}

@media (max-width:700px){
  .title{font-size:1.35rem}
  nav.links a{font-size:.85rem}
}
</style>

📚 کتابخانه آموزشی شایان

یادگیری HTML, CSS, Python, JavaScript — از مقدماتی تا حرفه‌ای + تمرین‌های پایانی هر فصل

HTML CSS Python JavaScript
🔎
بازکردن همه فصل‌ها بستن همه فصل‌ها

📘 کتاب HTML — از صفر تا حرفه‌ای

  <details class="chapter"><summary><span class="ch-title">فصل ۱: HTML چیست؟ ساختار پایه سند</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>HTML مخفف <b>HyperText Markup Language</b> است و اسکلت هر صفحهٔ وب را تعریف می‌کند. مرورگرها این تگ‌ها را تفسیر کرده و ساختار محتوای شما را می‌سازند. هر سند HTML5 با <code>&lt;!DOCTYPE html&gt;</code> شروع می‌شود و دارای عناصر ریشه <code>&lt;html&gt;</code>، سربرگ <code>&lt;head&gt;</code> و بدنه <code>&lt;body&gt;</code> است.</p>
      <pre><code>&lt;!DOCTYPE html&gt;

<html lang="fa" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>سلام دنیا</title> </head> <body> <h1>سلام، من شایان هستم</h1> <p>اولین صفحهٔ HTML من.</p> </body> </html>

نکته: ویژگی‌های lang و dir به موتورهای جستجو و فناوری‌های کمکی کمک می‌کند متن فارسی راست‌به‌چپ را درست نمایش دهند.

تمرین

  1. یک فایل index.html بساز و اسکلت بالا را پیاده کن.
  2. در بدنه یک <h1> با نام «شایان» و یک <p> معرفی کوتاه اضافه کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۲: متن‌ها، تیترها و عناصر معنایی</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>تیترها با <code>&lt;h1&gt;..&lt;h6&gt;</code> و پاراگراف‌ها با <code>&lt;p&gt;</code> نوشته می‌شوند. از عناصر معنایی مانند <code>&lt;strong&gt;</code>، <code>&lt;em&gt;</code> و <code>&lt;mark&gt;</code> برای معنابخشی به متن استفاده کنید.</p>
      <pre><code>&lt;h1&gt;تیتر اصلی&lt;/h1&gt;

<h2>زیرتیتر</h2> <p>این یک <strong>متن مهم</strong> با <em>تأکید</em> است.</p> <p>می‌توانید بخشی را <mark>هایلایت</mark> کنید.</p>

تمرین

  1. یک صفحه «درباره من» بساز و با تیترها بخش‌بندی کن.
  2. سه پاراگراف با strong و em و mark اضافه کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۳: لینک‌ها، تصاویر و مسیرها</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>لینک با <code>&lt;a href&gt;</code> و تصویر با <code>&lt;img src alt&gt;</code> نمایش داده می‌شود. از مسیر نسبی برای فایل‌های داخل پروژه و از مسیر مطلق برای آدرس‌های اینترنتی استفاده کنید.</p>
      <pre><code>&lt;a href="https://github.com/shayan" target="_blank" rel="noopener"&gt;گیت‌هاب شایان&lt;/a&gt;

<img src="images/profile.jpg" alt="عکس شایان" width="180" />

از alt توصیفی برای دسترس‌پذیری استفاده کنید؛ صفحه‌خوان‌ها متن جایگزین را می‌خوانند.

تمرین

  1. یک گالری ساده با سه تصویر و کپشن زیر هر کدام بساز.
  2. دو لینک داخلی بساز که به بخش «تماس» و «کتاب‌ها» در همان صفحه بپرند.

  <details class="chapter"><summary><span class="ch-title">فصل ۴: لیست‌ها و جدول‌ها</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>از <code>&lt;ul&gt;</code> (بدون ترتیب) و <code>&lt;ol&gt;</code> (دارای ترتیب) همراه با <code>&lt;li&gt;</code> برای آیتم‌ها استفاده می‌کنیم. جدول‌ها با <code>&lt;table&gt;</code>، سطر <code>&lt;tr&gt;</code>، سرستون <code>&lt;th&gt;</code> و سلول <code>&lt;td&gt;</code> ساخته می‌شوند.</p>
      <pre><code>&lt;ul&gt;

<li>HTML</li> <li>CSS</li> <li>Python</li> </ul>

<table> <thead><tr><th>کتاب</th><th>سطح</th></tr></thead> <tbody> <tr><td>HTML</td><td>مقدماتی</td></tr> <tr><td>CSS</td><td>میانی</td></tr> </tbody> </table>

تمرین

  1. فهرست علاقه‌مندی‌هایت را با ol بساز.
  2. جدولی با سه ستون (درس، سطح، وضعیت) و چهار ردیف بساز.

  <details class="chapter"><summary><span class="ch-title">فصل ۵: فرم‌ها، ورودی‌ها و اعتبارسنجی</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>فرم‌ها قلب تعامل کاربر هستند. از <code>&lt;form&gt;</code> به همراه ورودی‌ها (<code>input</code>، <code>textarea</code>، <code>select</code>) استفاده کنید. ویژگی‌هایی مثل <code>required</code>، <code>minlength</code>، <code>pattern</code> برای اعتبارسنجی سمت کاربر مفیدند.</p>
      <pre><code>&lt;form action="#" method="post"&gt;

<label>ایمیل: <input type="email" name="email" required placeholder="you@example.com" /> </label> <label>پیام: <textarea name="msg" minlength="10" required></textarea> </label> <button type="submit">ارسال</button> </form>

تمرین

  1. فرم «تماس با شایان» شامل نام، ایمیل، موضوع، پیام بساز.
  2. برای تلفن از pattern شماره ایرانی استفاده کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۶: عناصر HTML5 (ویدیو، صوت، تگ‌های معنایی)</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>HTML5 عناصر رسانه‌ای و معنایی جدیدی آورد: <code>&lt;header&gt;</code>، <code>&lt;nav&gt;</code>، <code>&lt;section&gt;</code>، <code>&lt;article&gt;</code>، <code>&lt;aside&gt;</code>، <code>&lt;footer&gt;</code>، همچنین <code>&lt;video&gt;</code> و <code>&lt;audio&gt;</code>.</p>
      <pre><code>&lt;video controls width="360"&gt;

<source src="media/intro.mp4" type="video/mp4" /> مرورگر شما از ویدیو پشتیبانی نمی‌کند. </video>

<audio controls> <source src="media/track.ogg" type="audio/ogg" /> </audio>

تمرین

  1. صفحهٔ فرود با ساختار معنایی کامل بساز.
  2. یک ویدیوی معرفی ۱۰–۲۰ ثانیه‌ای اضافه کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۷: سئو پایه و دسترس‌پذیری (A11y)</span><span class="badge">حرفه‌ای</span></summary>
    <div class="ch-body">
      <p>برای سئو از عنوان توصیفی، توضیحات متا و سلسله‌مراتب صحیح تیترها استفاده کنید. برای دسترس‌پذیری: متن جایگزین تصاویر، نسبت کنتراست مناسب، و ترتیب فوکوس را رعایت کنید. ویژگی <code>aria-*</code> به درک بهتر نقش عناصر کمک می‌کند.</p>
      <pre><code>&lt;meta name="description" content="آموزش وب شایان" /&gt;

<nav aria-label="ناوبری اصلی">...</nav> <button aria-expanded="false" aria-controls="menu">منو</button>

تمرین

  1. کنتراست رنگ‌ها را در صفحاتت بررسی کن (نسبت 4.5:1).
  2. برای سه دکمهٔ تعاملی صفت‌های ARIA مناسب قرار بده.

<!-- ===================== کتاب CSS ===================== -->
<section class="book" id="book-css">
  <h2>🎨 کتاب CSS — از پایه تا حرفه‌ای</h2>

  <details class="chapter"><summary><span class="ch-title">فصل ۱: مبانی انتخاب‌گرها، واحدها و آبشار</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>CSS ظاهر صفحه را کنترل می‌کند. مفاهیم کلیدی: انتخاب‌گر (selector)، ویژگی (property) و مقدار (value). آبشار (Cascade) و <i>Specificity</i> تعیین می‌کنند کدام قانون اعمال شود. از واحدهای واکنشی مثل <code>rem</code> و <code>%</code> استفاده کنید.</p>
      <pre><code>h1{color:#00c2d7}

.card{background:#1f2230; padding:1rem; border-radius:12px} #main{max-width:1100px; margin:0 auto}

تمرین

  1. سه قانون با انتخاب‌گر نوع، کلاس و شناسه بنویس.
  2. تفاوت px و rem را با یک مثال نشان بده.

  <details class="chapter"><summary><span class="ch-title">فصل ۲: Box Model، نمایش، جایگذاری</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>هر عنصر یک جعبه است: <code>content → padding → border → margin</code>. ویژگی <code>box-sizing: border-box</code> مدیریت اندازه‌گیری را ساده‌تر می‌کند. با <code>display</code> نوع نمایش (block/inline/inline-block) و با <code>position</code> جایگذاری کنترل می‌شود.</p>
      <pre><code>.card{box-sizing:border-box; padding:16px; border:1px solid #2a2d44; margin:12px}</code></pre>
      <div class="exercise">
        <h4>تمرین</h4>
        <ol>
          <li>دو کارت بساز که اندازهٔ برابر ولی <code>padding</code> متفاوت دارند.</li>
          <li>یک نوار بالایی چسبان با <code>position: sticky</code> پیاده‌سازی کن.</li>
        </ol>
      </div>
    </div>
  </details>

  <details class="chapter"><summary><span class="ch-title">فصل ۳: Flexbox در عمل</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>Flexbox چینش یک‌بعدی را آسان می‌کند: محور اصلی (main) و عمود (cross). از <code>display:flex</code>، <code>justify-content</code> و <code>align-items</code> استفاده کنید.</p>
      <pre><code>.row{display:flex; gap:12px; justify-content:space-between; align-items:center}

.row .item{flex:1 1 0; background:#1b1e2b; padding:1rem; border-radius:10px}

تمرین

  1. گرید کارت ۳ ستونه بساز که در موبایل ۱ ستونه شود.
  2. نوار ناوبری با آیتم‌های فاصله‌گرفته با space-between بساز.

  <details class="chapter"><summary><span class="ch-title">فصل ۴: CSS Grid – گرید دو بعدی</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>Grid برای چینش دوبعدی عالی است. ردیف‌ها و ستون‌ها را با <code>grid-template-rows/columns</code> تعریف کنید و از <code>gap</code> برای فاصله‌ها بهره ببرید.</p>
      <pre><code>.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}

.card{background:#1e2130; padding:1rem; border-radius:12px}

تمرین

  1. صفحهٔ گالری واکنش‌گرا با Grid بساز.
  2. سربرگ دو ستونه (لوگو/منو) با ریسپانسیو گرید پیاده کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۵: تایپوگرافی، رنگ، متغیرها و تم تیره</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>از متغیرهای CSS برای مدیریت رنگ و تم استفاده کنید. نسبت کنتراست را رعایت کنید و از <code>@media (prefers-color-scheme)</code> برای همگام‌سازی با سیستم بهره ببرید.</p>
      <pre><code>:root{--bg:#0e0f13; --text:#e6e6eb}

@media (prefers-color-scheme: light){:root{--bg:#ffffff; --text:#111}} body{background:var(--bg); color:var(--text)}

تمرین

  1. یک سوئیچر ساده «روشن/تاریک» با تغییر کلاس روی body بساز.
  2. خط‌کشی و سلسله‌مراتب تایپوگرافی برای h1..h6 تعریف کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۶: انیمیشن و ترنزیشن، Performance</span><span class="badge">حرفه‌ای</span></summary>
    <div class="ch-body">
      <p>برای انیمیشن‌های روان از transform/opacity و <code>will-change</code> استفاده کنید. از <code>transition</code> برای تعاملات ظریف بهره ببرید و انیمیشن‌های سنگین را محدود کنید.</p>
      <pre><code>.btn{transition:transform .2s ease}

.btn:hover{transform:translateY(-2px)}

تمرین

  1. برای کارت‌ها انیمیشن ورود بساز (fade & slide).
  2. با DevTools هزینهٔ Repaint/Composite را بررسی کن.

<!-- ===================== کتاب Python ===================== -->
<section class="book" id="book-py">
  <h2>🐍 کتاب Python — از مقدماتی تا حرفه‌ای</h2>

  <details class="chapter"><summary><span class="ch-title">فصل ۱: شروع سریع، نصب، اجرا</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>پایتون زبانی خوانا و چندمنظوره است. کد را در فایل <code>.py</code> ذخیره و با دستور <code>python file.py</code> اجرا کنید.</p>
      <pre><code>print("سلام شایان!")

name = "Shayan" print(f"Hello {name}")

تمرین

  1. برنامه‌ای بنویس که نام کاربر را بگیرد و خوش‌آمد بگوید.
  2. جمع دو عدد ورودی را نمایش دهد.

  <details class="chapter"><summary><span class="ch-title">فصل ۲: انواع داده، عملگرها، ورودی/خروجی</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>انواع پایه: <code>int</code>، <code>float</code>، <code>str</code>، <code>bool</code>. تبدیل نوع با <code>int()</code>/<code>str()</code>. ورودی با <code>input()</code>.</p>
      <pre><code>a = int(input("عدد اول: "))

b = int(input("عدد دوم: ")) print("جمع:", a + b)

تمرین

  1. مبدل دما: سلسیوس ↔ فارنهایت.
  2. حسابگر مساحت دایره با ورودی شعاع.

  <details class="chapter"><summary><span class="ch-title">فصل ۳: شرط‌ها، حلقه‌ها و فهرست‌ها</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>با <code>if/elif/else</code> تصمیم‌گیری و با <code>for/while</code> تکرار انجام می‌شود. ساختارهای داده‌ای مانند <code>list</code> و <code>dict</code> بسیار پراستفاده‌اند.</p>
      <pre><code>nums = [1,2,3,4]

sq = [n*n for n in nums if n%2==0] print(sq) # [4, 16]

تمرین

  1. لیست اعداد ۱..۱۰۰ که بر ۳ بخش‌پذیرند تولید کن.
  2. یک فرهنگ‌لغت دانش‌آموز (نام→نمره) بساز و میانگین بگیر.

  <details class="chapter"><summary><span class="ch-title">فصل ۴: توابع، ماژول‌ها و مدیریت خطا</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>توابع با <code>def</code> تعریف می‌شوند. برای سازمان‌دهی از ماژول‌ها و پکیج‌ها استفاده کنید. خطاها را با <code>try/except</code> مدیریت کنید.</p>
      <pre><code>def safe_div(a,b):
try:
    return a/b
except ZeroDivisionError:
    return None</code></pre>
      <div class="exercise"><h4>تمرین</h4><ol>
        <li>ماژولی با دو تابع ریاضی و یک تست کوتاه بنویس.</li>
        <li>ورودی کاربر را ایمن بخوان (اعتبارسنجی عدد صحیح).</li>
      </ol></div>
    </div>
  </details>

  <details class="chapter"><summary><span class="ch-title">فصل ۵: برنامه‌نویسی شی‌ءگرا (OOP) و فایل‌ها</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>کلاس‌ها با <code>class</code> تعریف می‌شوند. برای کار با فایل‌ها از <code>with open()</code> استفاده کنید تا بسته‌شدن خودکار انجام شود.</p>
      <pre><code>class Book:
def __init__(self, title, author):
    self.title=title; self.author=author
def __repr__(self):
    return f"{self.title} - {self.author}"

with open('data.txt','w', encoding='utf-8') as f: f.write('سلام شایان')

تمرین

  1. کلاس «دانشجو» با متد محاسبهٔ معدل بساز.
  2. لیست کارها را از فایل بخوان و مرتب چاپ کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۶: مجازی‌سازی، کتابخانه‌ها و پکیجینگ</span><span class="badge">حرفه‌ای</span></summary>
    <div class="ch-body">
      <p>بسته‌ها را با <code>pip</code> نصب کنید و محیط مجازی با <code>venv</code> بسازید. ساخت CLI ساده با <code>argparse</code>.</p>
      <pre><code># ساخت محیط مجازی

python -m venv .venv source .venv/bin/activate # Windows: .venv\Scripts\activate pip install requests rich

تمرین

  1. ابزار خط‌فرمان ساده‌ای بساز که یک URL را گرفته و وضعیت پاسخ را چاپ کند.
  2. یک پکیج کوچک با ساختار استاندارد ایجاد کن.

<!-- ===================== کتاب JavaScript ===================== -->
<section class="book" id="book-js">
  <h2>⚡ JavaScript — از مقدماتی تا حرفه‌ای</h2>

  <details class="chapter"><summary><span class="ch-title">فصل ۱: آشنایی، اجرا در مرورگر و کنسول</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p>جاوااسکریپت زبان تعامل در وب است. کد را داخل تگ <code>&lt;script&gt;</code> یا فایل جداگانه قرار دهید.</p>
      <pre><code>&lt;script&gt;

console.log('سلام شایان'); alert('خوش آمدی!'); </script>

تمرین

  1. پیغامی در کنسول چاپ کن و یک هشدار نمایش بده.
  2. دکمه‌ای بساز که روی کلیک شمارنده را افزایش دهد.

  <details class="chapter"><summary><span class="ch-title">فصل ۲: متغیرها، توابع و دامنه</span><span class="badge">مقدماتی</span></summary>
    <div class="ch-body">
      <p><code>let</code> و <code>const</code> را جایگزین <code>var</code> کنید. توابع معمولی و پیکانی هر دو کاربردی‌اند. دامنهٔ بلاک با <code>let/const</code> ایمن‌تر است.</p>
      <pre><code>const PI = 3.14;

let count = 0; const add = (a,b) => a + b;

تمرین

  1. تابع پیکانی «حداکثر سه عدد» بنویس.
  2. تفاوت let و const را با نمونه نشان بده.

  <details class="chapter"><summary><span class="ch-title">فصل ۳: DOM و رویدادها</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>DOM نمای درختی از HTML است. با <code>querySelector</code> به عناصر دسترسی بگیرید و رویدادها را با <code>addEventListener</code> مدیریت کنید.</p>
      <pre><code>// HTML: &lt;button id="btn"&gt;کلیک&lt;/button&gt; &lt;p id="out"&gt;0&lt;/p&gt;

const btn = document.querySelector('#btn'); const out = document.querySelector('#out'); let n = 0; btn.addEventListener('click', () => { out.textContent = ++n; });

تمرین

  1. Todo List ساده با افزودن/حذف آیتم بساز.
  2. ورودی متن را به‌صورت زنده در یک پیش‌نمایش نشان بده.

  <details class="chapter"><summary><span class="ch-title">فصل ۴: Async/Await و فراخوانی API</span><span class="badge">میانی</span></summary>
    <div class="ch-body">
      <p>با <code>fetch</code> داده بگیرید و با <code>async/await</code> کد خواناتر بنویسید. خطاها را با <code>try/catch</code> بگیرید.</p>
      <pre><code>async function load(){

try{ const res = await fetch('https://jsonplaceholder.typicode.com/todos/1'); const data = await res.json(); console.log(data); }catch(e){ console.error('خطا', e); } } load();

تمرین

  1. لیست پست‌ها را از یک API عمومی بخوان و در صفحه رندر کن.
  2. بارگذاری اسکلتی (Loading) برای انتظار شبکه اضافه کن.

  <details class="chapter"><summary><span class="ch-title">فصل ۵: ماژول‌ها، بسته‌سازی و الگوهای کدنویسی</span><span class="badge">حرفه‌ای</span></summary>
    <div class="ch-body">
      <p>از ماژول‌های ES با <code>type="module"</code> استفاده کنید و کد را به فایل‌های کوچک‌تر تقسیم کنید. الگوهای رایج: ماژول، فکتوری، Observer.</p>
      <pre><code>// main.js

import {sum} from './util.js'; console.log(sum(2,3)); // util.js export const sum = (a,b) => a+b;

تمرین

  1. پروژهٔ کوچک ماژولار با دو ماژول ابزار و یک ماژول UI بساز.
  2. الگوی Observer را برای سیستم اعلان ساده پیاده کن.

ساخته شده با ❤️ توسط شایان — ۲۰۲۵ · GitHub Pages <script> // جستجوی زنده در همه فصل‌ها const q = document.getElementById('q'); const chapters = Array.from(document.querySelectorAll('details.chapter')); q.addEventListener('input', () => { const term = q.value.trim().toLowerCase(); chapters.forEach(d => { const txt = d.innerText.toLowerCase(); const hit = txt.includes(term); d.style.display = hit ? '' : 'none'; }); }); // باز/بستن همه فصل‌ها const expand = document.getElementById('expand'); const collapse = document.getElementById('collapse'); expand.addEventListener('click', () => chapters.forEach(d => d.open = true)); collapse.addEventListener('click', () => chapters.forEach(d => d.open = false)); </script>

About

Shayan.devیک سایت شخصی برای آموزش فناوری

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors