جافاسكريبت للمبتدئين

<style>

.doc{--bg:#EDEFF0;--surface:#F8F9F9;--ink:#131A1F;--muted:#55636B;--rule:#D3D8DA;

--accent:#A34A2A;--accent-soft:rgba(163,74,42,.11);--link:#953F22;

--sans:"Chivo","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;

--serif:"Source Serif 4",Georgia,"Times New Roman",serif;

--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

max-width:760px;margin:0 auto;padding:.5rem 0 2rem;color:var(--ink);

font-family:var(--serif);font-size:1.15rem;line-height:1.7}

.doc *{box-sizing:border-box}

.doc a{color:var(--link);text-underline-offset:.14em;text-decoration-thickness:.06em}

.doc a:hover{color:var(--accent)}

.doc > section{margin-top:3rem}

.doc > section + section{border-top:1px solid var(--rule);padding-top:3rem}

.doc .eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;

color:var(--accent);margin:0 0 .9rem}

.doc h2{font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,4.2vw,2.15rem);

line-height:1.15;letter-spacing:-.015em;margin:0 0 1.1rem}

.doc h3{font-family:var(--sans);font-weight:700;font-size:1.2rem;line-height:1.25;margin:2rem 0 .6rem}

.doc p{margin:0 0 1.2rem}

.doc .lead{font-size:1.3rem;line-height:1.6}

.doc section p:last-child{margin-bottom:0}

.doc ul.plain{margin:0 0 1.2rem;padding-left:0;list-style:none}

.doc ul.plain li{position:relative;padding-left:1.4rem;margin-bottom:.7rem}

.doc ul.plain li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;

background:var(--accent);border-radius:1px}

.doc ul.plain li strong{font-family:var(--sans);font-weight:700;font-size:.98em}

.doc .tablewrap{overflow-x:auto;margin:1.75rem 0 0;border:1px solid var(--rule)}

.doc table.xfer{border-collapse:collapse;width:100%;min-width:600px;font-family:var(--serif);font-size:1rem}

.doc .xfer th{font-family:var(--mono);font-size:.71rem;letter-spacing:.06em;text-transform:uppercase;

text-align:left;color:var(--muted);padding:.95rem 1rem;border-bottom:1px solid var(--rule);

background:var(--surface);font-weight:500}

.doc .xfer td{padding:.9rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}

.doc .xfer tr:last-child td{border-bottom:0}

.doc .xfer td:nth-child(2),.doc .xfer td:last-child{color:var(--muted)}

.doc .pull{margin:2.75rem 0;padding-top:1.5rem;border-top:2px solid var(--accent)}

.doc .pull blockquote{margin:0;font-family:var(--serif);font-style:italic;

font-size:clamp(1.3rem,3.2vw,1.7rem);line-height:1.45}

.doc .pull figcaption{margin-top:.9rem;font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;

text-transform:uppercase;color:var(--muted)}

.doc .tracks{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}

.doc .track{border:1px solid var(--rule);border-radius:6px;padding:1.5rem 1.6rem;background:var(--surface)}

.doc .track .who{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;

color:var(--accent);margin:0 0 .8rem}

.doc .track h3{margin:0 0 .3rem;font-size:1.15rem}

.doc .track p{margin:0 0 .7rem;font-size:1.03rem}

.doc .track p:last-child{margin-bottom:0}

.doc .linkgroup{margin-top:2rem}

.doc .linkgroup .cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;

color:var(--muted);margin:0 0 .5rem;padding-bottom:.55rem;border-bottom:1px solid var(--rule)}

.doc dl.links{margin:0}

.doc dl.links > div{padding:1rem 0;border-bottom:1px solid var(--rule)}

.doc dl.links dt{font-family:var(--sans);font-weight:700;font-size:1rem;margin-bottom:.3rem}

.doc dl.links dd{margin:0;color:var(--muted);font-size:1.02rem}

.doc dl.links dd.u{font-family:var(--mono);font-size:.8rem;margin-top:.25rem;word-break:break-word}

.doc .cta{margin-top:4rem;border-top:2px solid var(--accent);padding-top:2rem}

.doc .cta .go{font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;

color:var(--muted);margin:0 0 .7rem}

.doc .cta .url{font-family:var(--sans);font-weight:900;font-size:clamp(1.9rem,6vw,2.7rem);margin:0;letter-spacing:-.02em}

.doc .cta .url a{color:var(--ink);text-decoration:none}

.doc .cta .url a:hover{color:var(--accent)}

.doc .cta .fine{margin:1.2rem 0 0;font-size:.98rem;color:var(--muted);max-width:60ch}

.doc figure.ill-logo{margin:2.25rem 0 0}

.doc figure.ill-logo .logo-box{display:flex;align-items:center;justify-content:center;

background:var(--surface);border:1px solid var(--rule);border-radius:6px;

padding:2.5rem 1.5rem;min-height:160px}

.doc figure.ill-logo img{display:block;max-width:240px;max-height:160px;width:auto;height:auto;

object-fit:contain}

.doc figure.ill-logo figcaption{margin-top:.55rem;font-family:var(--mono);font-size:.72rem;

letter-spacing:.04em;color:var(--muted)}

.doc .yt-wrap{margin:2.25rem 0;position:relative;padding-top:56.25%;

background:var(--surface);border:1px solid var(--rule);border-radius:6px;overflow:hidden}

.doc .yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.doc .yt-caption{margin-top:.55rem;font-family:var(--mono);font-size:.72rem;

letter-spacing:.04em;color:var(--muted)}

</style>

<article class="doc">

<section>

<p>جافاسكريبت هي لغة الويب من جانب المتصفح، وأيضًا لغة خادم منتشرة جدًا (Node.js). إنها لغة ثانية جيدة، ومرحلة لا بد منها لكل ما هو تفاعلي في صفحة ويب.</p><p>يفترض هذا الدليل معرفة أساسيات HTML/CSS؛ وإلا فابدأ بـ <a href="https://newtiv.com/article.html?slug=html-css-les-fondamentaux">HTML وCSS: الأساسيات</a>.</p>

</section>

<section>

<p class="eyebrow">01 — أين يعمل</p>

<h2>المتصفح والخادم</h2>

<p>في المتصفح، تستجيب جافاسكريبت للنقرات، وتعدّل الصفحة، وتستدعي واجهات API. مع Node.js، تعمل من جانب الخادم لأدوات وواجهات API ونصوص برمجية. اللغة واحدة، والبيئة تتغيّر.</p>

</section>

<section>

<p class="eyebrow">02 — الأساسيات</p>

<h2>ما يجب معرفته قبل كل شيء</h2>

<ul class="plain">

<li>المتغيرات (let، const)، الأنواع، العوامل.</li>

<li>الشروط، الحلقات، الدوال (بما فيها الدوال السهمية).</li>

<li>المصفوفات والدوال (map، filter، reduce)، الكائنات.</li>

<li>البرمجة غير المتزامنة: الوعود وasync/await.</li>

</ul>

<figure class="ill-logo">

<div class="logo-box"><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg?utm_source=commons.wikimedia.org&utm_campaign=imageinfo&utm_content=original" loading="lazy" decoding="async" alt="Logo JavaScript"></div>

<figcaption>جافاسكريبت — <em>Chris Williams، ملكية عامة</em></figcaption>

</figure>

<figure class="ill">

<img src="https://images.pexels.com/photos/34803998/pexels-photo-34803998.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" width="1200" height="800" loading="lazy" decoding="async" alt="Focused view of a computer screen displaying programming code with visible reflections.">

<figcaption>جافاسكريبت للمبتدئين — <em>صورة Daniil Komov، رخصة Pexels</em></figcaption>

</figure>

</section>

<section>

<p class="eyebrow">03 — DOM</p>

<h2>التأثير على الصفحة</h2>

<p>اختيار العناصر، والاستماع للأحداث، وتعديل المحتوى والفئات. هذا ما يجعل الصفحة حيّة. احذر الأخطاء الشائعة: نسيان إزالة مستمع حدث، أو التلاعب بـ DOM قبل جاهزيته.</p>

</section>

<section>

<p class="eyebrow">04 — أول مشروع</p>

<h2>صغير، مكتمل، تفاعلي</h2>

<p>قائمة مهام، اختبار، محوّل، لعبة صغيرة، أو صفحة تستهلك واجهة API عامة باستخدام fetch. انشرها. إنها دليلك.</p>

</section>

<section>

<p class="eyebrow">05 — الخطوة التالية</p>

<h2>اختيار إطار عمل لاحقًا</h2>

<p>بعد إتقان اللغة، يصبح إطار العمل (React، Vue، Svelte) مفيدًا. اعتماده مبكرًا جدًا يخفي أساسيات ستفتقدها لاحقًا.</p>

</section>

<section>

<p class="eyebrow">06 — أسئلة شائعة</p>

<figure class="yt-wrap-outer">

<div class="yt-wrap"><iframe src="https://www.youtube-nocookie.com/embed/v3Ho7QVaTXM" title="Apprendre JavaScript en juste 5 MINUTES"></iframe></div>

<p class="yt-caption">تعلّم جافاسكريبت في 5 دقائق فقط (بالفرنسية) — Melvynx</p>

</figure>

<h2>أسئلة شائعة</h2>

<h3>جافاسكريبت أم بايثون أولاً؟</h3>

<p>للويب التفاعلي، جافاسكريبت. للبيانات والأتمتة والذكاء الاصطناعي، بايثون. اللغتان تتكاملان.</p>

<h3>هل يجب تعلّم React مباشرة؟</h3>

<p>لا. أولاً أساسيات اللغة وDOM؛ ثم React لاحقًا، عندما تصبح مزاياه واضحة.</p>

<h3>متى وقت TypeScript؟</h3>

<p>بعد أن تصبح مرتاحًا مع جافاسكريبت. تضيف TypeScript أنواعًا مفيدة مع نمو المشاريع.</p>

</section>

<section>

<p class="eyebrow">07 — الموارد والروابط</p>

<h2>إلى أين تذهب، بشكل عملي</h2>

<div class="linkgroup">

<p class="cat">تعلّم</p>

<dl class="links">

<div>

<dt>MDN — دليل جافاسكريبت</dt>

<dd>المرجع الرسمي (بالإنجليزية).</dd>

<dd class="u"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank" rel="noopener">developer.mozilla.org/en-US/docs/Web/JavaScript/Guide</a></dd>

</div>

<div>

<dt>javascript.info</dt>

<dd>دورة حديثة وتدريجية.</dd>

<dd class="u"><a href="https://javascript.info" target="_blank" rel="noopener">javascript.info</a></dd>

</div>

</dl>

</div>

</section>

<footer class="cta">

<p class="go">هل تبدأ رحلتك مع جافاسكريبت؟</p>

<p class="url"><a href="https://www.newtiv.com" target="_blank" rel="noopener">newtiv.com</a></p>

<p class="fine">أتقن الأساسيات وDOM قبل أي إطار عمل، ثم انشر مشروعًا تفاعليًا صغيرًا: إنها أفضل نقطة انطلاق.</p>

</footer>

</article>