أين نكتب JavaScript؟ شرح عملي للمبتدئين (internal vs external vs inline) + أفضل مكان للـ script
تخيّل أنك كتبت أول كود JavaScript وكنت متحمساً لتجربته، ثم لا يحدث أي شيء في المتصفح. في الغالب المشكلة ليست في المنطق، بل في مكان كتابة الكود. هنا تأتي هذه الخطوة المهمة.
إذا كنت تبحث عن أين أضع كود JavaScript في HTML أو الفرق بين internal وexternal وinline JavaScript أو أفضل مكان لوسم script مع defer، فهذا الدرس يعطيك الإجابة العملية مباشرة.
لماذا مكان كود JavaScript مهم؟
لأن المتصفح يقرأ الصفحة من الأعلى للأسفل. إذا نفّذت JavaScript قبل تحميل عناصر HTML، قد يحاول الكود التعامل مع عنصر لم يظهر بعد. النتيجة: أخطاء أو سلوك غير متوقع.
قاعدة ذهبية للمبتدئ: لا تسأل فقط "ما الكود؟" اسأل أيضاً "متى وأين ينفّذ هذا الكود؟"
ما هي طرق إدراج JavaScript في الصفحة؟
الطرق الثلاث الأساسية
- Internal JavaScript: داخل وسم
<script>في نفس ملف HTML. - External JavaScript: داخل ملف
.jsمنفصل مرتبط بالصفحة. - Inline JavaScript: داخل خصائص HTML مثل
onclick.
اختصار سريع:
1) Internal JavaScript
مناسب للتجارب السريعة أو الأمثلة القصيرة أثناء التعلم.
<script>
console.log('Hello from internal JS');
</script>
ماذا يفعل هذا الكود؟ ينفذ JavaScript مباشرة من نفس ملف HTML.
النتيجة المتوقعة: ممتاز للتجربة الأولى، لكنه يصبح فوضوياً عندما يكبر المشروع.
خطأ شائع: وضع كود طويل داخل الصفحة نفسها ثم فقدان التنظيم.
2) External JavaScript (الأفضل غالباً)
اكتب الكود في ملف منفصل مثل app.js ثم اربطه في HTML.
<script src="app.js" defer></script>
ماذا يفعل هذا الكود؟ يفصل المنطق البرمجي عن هيكل الصفحة.
النتيجة المتوقعة: كود أنظف، إعادة استخدام أفضل، وصيانة أسهل مع الوقت.
خطأ شائع: نسيان اسم/مسار الملف في src أو حذف defer بلا سبب.
3) Inline JavaScript
يكتب داخل العنصر نفسه. يصلح لتجارب بسيطة جداً لكنه غير مفضل للمشاريع.
<button onclick="alert('Clicked!')">Click</button>
ماذا يفعل هذا الكود؟ ينفذ الأمر مباشرة عند الضغط على الزر.
النتيجة المتوقعة: يعمل بسرعة في المثال الصغير.
خطأ شائع: خلط HTML مع منطق JavaScript ثم صعوبة التتبع والتعديل.
النتيجة في المتصفح:
أفضل مكان لوسم script لتحسين الأداء
في أغلب المشاريع الحديثة، الخيار الأكثر أماناً للمبتدئ:
ملف خارجي + defer داخل <head>.
هكذا تضمن أن HTML يكتمل أولاً ثم يبدأ تنفيذ JavaScript.
النمط الأفضل للمبتدئ
<script src="app.js" defer></script>
ماذا يفعل defer؟ يؤخر تنفيذ javascript حتى يكتمل تحميل HTML.
النتيجة المتوقعة: الصفحة تظهر أسرع بدون تعطيل العرض.
خطأ شائع: تشغيل سكربت يعتمد على عناصر DOM قبل تحميلها.
Story قصيرة: خطأ يتكرر عند كل مبتدئ
مبتدئ كتب:
document.getElementById('title').textContent = 'Hi';
داخل <head> بدون defer. ظهر له خطأ:
"Cannot set properties of null". لم يكن الكود سيئاً، فقط التنفيذ كان مبكراً.
بمجرد إضافة defer، اشتغل كل شيء.
متى أستخدم كل طريقة؟
- استخدم External JavaScript + defer في أغلب المشاريع.
- استخدم Internal JavaScript للأمثلة السريعة أثناء التعلم.
- استخدم Inline JavaScript فقط للتجربة السريعة جداً.
defer، لأن هذا هو الأسلوب الذي ستعمل به في المشاريع الحقيقية.
Checklist سريعة قبل تشغيل الكود
- هل ملف
app.jsموجود في المسار الصحيح؟ - هل كتبت
deferمعsrc؟ - هل أسماء
idفي HTML مطابقة لما في JavaScript؟ - هل جربت فتح Console للتأكد من عدم وجود أخطاء؟
روابط المتابعة بعد هذا الدرس
الآن انتقل مباشرة إلى قواعد كتابة syntax في JavaScript ثم تابع مع المتغيرات في JavaScript.
الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)
أين أضع كود javascript في HTML؟
الأفضل غالباً ملف خارجي مرتبط عبر <script src="..." defer> للحفاظ على تنظيم الكود ومنع أخطاء التنفيذ المبكر.
ما الفرق بين internal javascript و external javascript؟
internal داخل نفس HTML ومناسب للتجارب الصغيرة، أما external ففي ملف منفصل وهو الأفضل للمشاريع القابلة للصيانة.
هل يجب استخدام defer مع javascript؟
في أغلب الحالات نعم، لأنه يمنع تعطيل تحميل الصفحة ويؤخر التنفيذ حتى يصبح DOM جاهزاً.
هل inline javascript خطأ دائماً؟
ليس خطأ دائماً، لكنه يضعف التنظيم عندما يكبر الكود لذلك يفضّل تجنبه في المشاريع الحقيقية.
ما أول خطوة عملية بعد فهم مكان الكود؟
ابدأ بكتابة ملف app.js مع defer ثم انتقل إلى syntax والمتغيرات لبناء منطق واضح خطوة بخطوة.
للمتابعة مباشرة: ابدأ بدرس قواعد كتابة syntax في JavaScript ثم انتقل إلى المتغيرات في JavaScript.
app.js خارجي، اربطه بـ defer، ثم اكتب كوداً يغيّر نص عنصر عند الضغط على زر.