جاري التحميل...

جافاسكربت في HTML

سابقاً جعلت الإتاحة الصفحة قابلة للاستخدام بالبنية. JavaScript يضيف سلوكاً فوق HTML: استجابة لنقرة، تحديث نص، محادثة مع خادم. هذا الدرس يبقى في جانب HTML: كيف تحمّل الصفحة السكربتات بـ <script> — وليس دورة لغة كاملة.

لماذا يهم تحميل السكربت

المتصفحات ترسم HTML أولاً. السكربتات قد تؤخر ذلك أو تفشل بصمت بمسار خاطئ أو تخفي محتوى يجب أن يكون في الوسم. معرفة موضع <script> ومتى تستخدم src وما يخص HTML تبقي الصفحة صادقة: محتوى مقروء، عناصر حاضرة، سلوك اختياري. عادات الإتاحة السابقة ما زالت سارية.

إجابة مباشرة

1) <script>…</script> لمقتطف صغير أو <script src="app.js"></script> لملف خارجي. 2) فضّل .js خارجي عندما ينمو المنطق. 3) كثيرون يضعون السكربت قرب نهاية body. 4) أبقِ النص والعناصر ذات المعنى في HTML. 5) التطبيقات الحديثة قد تستخدم type="module". 6) هذه الدورة للتضمين فقط.

📊 Script wiring beginners use

Choice	What it does	Beginner tip
Inline script	Code sits between script tags	Fine for tiny demos; hard to reuse
External src	Loads a .js file from a path	Prefer as projects grow
End of body	Script runs after markup above it	Content can paint sooner
Behavior on HTML	JS finds elements by id/selectors	Elements must exist in the page
Content in HTML	Text and controls stay in markup	Page still makes sense if JS fails
Modules later	type=module for modern apps	Skip until you study JS deeply

سكربت مضمّن مع زر حقيقي

صفحة صغيرة: <button> حقيقي بـ id ثم <script> يستمع للنقر ويغيّر النص. الوسم يبقى متاحاً؛ السكربت يضيف السلوك فقط.

Inline button click

html

<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

قراءة المثال المضمّن

الزر HTML حقيقي — مفيد بلا JS
id يعطي خطافاً مستقراً
كتلة script تحمل أسطر JS مضمّنة
addEventListener يصل السلوك ولا يستبدل الزر
إن لم يعمل السكربت يبقى «Say hi»
الدرس السابق بنية؛ هنا ربط السلوك

سكربت خارجي مع src

نفس الفكرة أفضل كملف منفصل. HTML يعلن المسار؛ المنطق في app.js. يجب أن يطابق المسار مجلدك.

External script src

html

<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

قراءة النمط الخارجي

src يطلب جلب الملف وتشغيله
HTML قصير؛ التعديل في ملف js مشترك
مسار خاطئ يعني عدم التحميل — افحص Network
ضع السكربت بعد الزر أو انتظر العنصر
فضّل هذا على كتل مضمّنة ضخمة
دروس HTML التالية تتقدم؛ JS العميق دورة أخرى

كيف تحمّل السلوك

عرض صغير جداً: مضمّن بجانب العنصر قد يكفي
أي شيء ينمو أو يُعاد استخدامه: انقل إلى app.js وsrc
نص أو تنقل حرج: HTML أولاً ثم تعزيز بـ JS
شعور بالكسر: تحقق من مسار src أولاً
الإتاحة: أبقِ button/a/labels — لا تستبدل بـ div
دراسة اللغة كاملة: للحلقات والأطر دورة JavaScript

تمرين — HTML يحمّل السكربت

انسخ المثال المضمّن؛ انقر وتأكد من تغيير النص.
انقل المستمع إلى app.js واستخدم src وتأكد أنه يعمل.
اكسر المسار (wrong.js) وأعد التحميل؛ يبقى «Say hi».
احذف السكربت تماماً؛ HTML ما زال منطقياً.
زر ثانٍ بـ id جديد ومستمع إضافي.
جملة: HTML يملك المحتوى والبنية؛ script يحمّل سلوكاً اختيارياً.
الدرس التالي ملخص HTML قصير.

أخطاء شائعة

جمل حرجة داخل JS فقط
خطأ إملائي أو مجلد خاطئ في src
سكربتات مضمّنة ضخمة صعبة الصيانة
تشغيل السكربت قبل وجود العنصر
استبدال أزرار متاحة بـ div قابلة للنقر
اعتبار هذا الدرس منهجاً كاملاً لـ JS
نسيان عادات الإتاحة السابقة

ملخص

script يحمّل JavaScript في صفحة HTML
مضمّن للعروض الصغيرة؛ src لملفات .js مع النمو
ضع السكربتات بحكمة ليظهر المحتوى ويبقى قابلاً للاستخدام
أبقِ المحتوى والعناصر المتاحة في HTML
الإتاحة كانت بنية؛ هذا الدرس ربط سلوك
التالي: ملخص HTML قصير للمسار حتى الآن

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى