وسم السكربت <script>

وسم script يضيف الجافاسكريبت للصفحة — مضمنًا أو من ملف خارجي، مع defer وasync للتحكم بتوقيت التنفيذ.

بوابة البرمجة في HTML: كود مضمّن بين الوسمين، أو ملف خارجي عبر src. النقطة الحرجة هي التوقيت — السكربت العادي يوقف بناء الصفحة حتى يُحمَّل ويُنفَّذ، ولهذا وُجد نمطان: defer يحمّل بالتوازي وينفّذ بعد اكتمال بناء الصفحة وبالترتيب (الخيار الافتراضي الصحيح لأكواد صفحتك)، وasync ينفّذ فور وصوله بلا ترتيب مضمون (للسكربتات المستقلة كالتحليلات).

العرف الحديث: script في head مع defer — يبدأ التحميل مبكرًا وينفذ في الوقت الآمن.

الصياغة

<script src="app.js" defer></script>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<button id="btn" style="background:#7c5cff; color:white; border:0; padding:10px 20px; border-radius:8px; cursor:pointer">اضغطني</button>
<p id="out"></p>
<script>
  let count = 0;
  document.getElementById('btn').onclick = () => {
    count++;
    document.getElementById('out').textContent = 'عدد الضغطات: ' + count;
  };
</script>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
src	مسار ملف الجافاسكريبت الخارجي
defer	حمّل بالتوازي ونفّذ بعد اكتمال الصفحة وبالترتيب — الافتراضي الصحيح
async	نفّذ فور الوصول بلا ترتيب — للسكربتات المستقلة (تحليلات)
type="module"	وحدات ES مع import/export — defer تلقائيًّا

💡 نصائح عملية

قاعدة الاختيار: كودك أنت → defer، سكربت مستقل خارجي → async
type="module" يمنحك import/export وdefer معًا

⚠️ أخطاء شائعة

script بلا defer في head يستهدف عناصر لم تُبنَ بعد — Cannot read properties of null
defer مع سكربت مضمّن (بلا src) — لا تأثير له إطلاقًا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs