JavaScript: البدء مع جافاسكريبت

آخر تحديث: 2026-10-13

إضافة جافاسكريبت إلى صفحة الويب أسهل مما تthink — هناك ثلاث طرق للقيام بذلك، من السريعة والقذرة إلى الجاهزة للإنتاج.

دوال BOM ذات صلة：alert()

1. ثلاث طرق لإضافة جافاسكريبت

اكتب كود JS مباشرة في سمة حدث عنصر HTML، مثل onclick="...".

هذه هي أبسط طريقة، لكن لا تستخدمها في المشاريع الحقيقية — خلط HTML وJS معًا يجعل الصيانة كابوسًا.

(2) داخلية (علامة <script>)

أدخل علامة <script> في ملف HTML واكتب كود JS بداخلها. تعمل بشكل جيد للصفحات الصغيرة وهي الطريقة الأكثر شيوعًا أثناء التعلم والاختبار.

يمكن وضع علامة <script> في <head> أو <body>، لكن يُنصح بوضعها مباشرة قبل </body> حتى لا تمنع عرض الصفحة.

(3) خارجية (ملف .js)

اكتب كود JS في ملف .js منفصل وأضفه بـ <script src="xxx.js"></script>. هذه هي الممارسة القياسية للمشاريع الحقيقية — إنها تفصل بين المسؤوليات، وتمكن من إعادة الاستخدام، وتتيح للمتصفح تخزين الملف مؤقتًا لتحميل أسرع.

▶ مثال: جافاسكريبت مضمنة

▶ مثال: جافاسكريبت داخلية

▶ مثال: جافاسكريبت خارجية

2. إضافات VS Code الموصى بها لـ JS

إذا كنت تستخدم VS Code (موصى بشدة)، هاتان الإضافتان هما كل ما تحتاجه:

• Live Server — انقر بزر الماوس الأيمن على ملف HTML واختر "Open with Live Server" للتحديث التلقائي عند الحفظ، لم يعد هناك حاجة لـ F5 اليدوي
• ESLint — يلتقط مشاكل البناء في الوقت الفعلي، مثل مدقق إملائي للكود الخاص بك

3. تشغيل JS في Chrome DevTools

اضغط F12 لفتح DevTools، انتقل إلى لوحة Console، ويمكنك كتابة كود JS مباشرة والضغط على Enter لتشغيله. هذه أسرع طريقة للتجربة — اختبر أي مقتطف كود دون إنشاء ملف HTML.

نصيحة: اضغط على مفتاح ↑ في Console لاستدعاء أمرك السابق، مما يوفر عليك إعادة الكتابة.

4. سمات defer وasync لعلامات script

عندما تكون علامة <script> في <head>، يتوقف المتصفح عن تحليل HTML لتنزيل وتنفيذ JS أولاً — مما قد يجعل الصفحة تبدو متوقفة. تحل سمات defer وasync هذه المشكلة:

أفضل ممارسة: إضافة defer لملفات JS الخارجية هي الخيار الأكثر أمانًا — <script src="app.js" defer></script>.

دوال BOM ذات صلة：alert()

❓ أسئلة شائعة

📖 ملخص

• ثلاث طرق لإضافة JS: مضمنة onclick (غير موصى بها)، داخلية <script> (ممتازة للتعلم)، خارجية .js (معيار الصناعة)
• ضع علامات <script> مباشرة قبل </body> لتجنب منع عرض الصفحة
• استخدم سمة defer على ملفات JS الخارجية — لا منع وترتيب تنفيذ مضمون
• وحدة تحكم F12 في Chrome هي أسرع ساحة تجربة لـ JS
• VS Code + Live Server + ESLint هي أدوات الواجهة الأمامية القياسية
• JS المضمنة مريحة لكنها تربط HTML وJS معًا بشكل وثيق — عوّد نفسك على الفصل مبكرًا

📝 تمارين

1. مبتدئ: أنشئ صفحة HTML بها سكربت داخلي يظهر تنبيهًا يقول "مرحبًا بك في جافاسكريبت!" عند تحميل الصفحة (تلميح: استخدم alert()).
2. متوسط: أنشئ صفحة HTML وملف main.js منفصل. أضف ملف JS بـ <script src="main.js" defer></script> وقم بتنفيذ زر يغير لون خلفية الصفحة.
3. تحدي: أنشئ صفحة بها ثلاثة أزرار، كل واحد يمثل إحدى طرق الإضافة الثلاث (مضمنة، داخلية، خارجية). عند النقر على أي زر، اعرض "تم تحميل JS عبر طريقة XXX" على الصفحة، باستخدام ألوان مختلفة للتمييز بينها.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن