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

البدء مع JavaScript

البدء مع JavaScript (جافاسكريبت) هو أول خطوة حقيقية لتحويل صفحات الويب من مجرد صفحات ثابتة إلى تجارب تفاعلية وحيوية. JavaScript هي لغة البرمجة (Programming Language) التي تعمل مباشرة في المتصفح (Browser) وتُمكنك من التفاعل مع المستخدم، التحقق من المدخلات، وتحديث الصفحة دون الحاجة إلى إعادة تحميلها.
تخيل أن موقع الويب هو منزل (House). HTML هو الجدران، وCSS هو الطلاء والديكور، أما JavaScript فهي الكهرباء التي تُشغل الأضواء وتفتح الأبواب تلقائيًا عندما يقترب أحدهم. في موقع إخباري، JavaScript تُستخدم لعرض الأخبار المتغيرة تلقائيًا. في المتاجر الإلكترونية، تُساعد في تحديث عربة التسوق دون الحاجة لتحديث الصفحة. في الصفحات الشخصية، تُظهر ساعات محلية أو مقولات يومية. وفي بوابات حكومية، تُتحقق من صحة النماذج المعبأة.
في هذا الدرس، ستتعلم أساسيات JavaScript، كيفية كتابة أول كود، وفهم المفاهيم الأساسية مثل المتغيرات (Variables)، الأحداث (Events)، والدوال (Functions). ستكتسب فهمًا عمليًا مبنيًا على أمثلة حقيقية.

مثال أساسي

javascript

JAVASCRIPT Code

// طباعة رسالة في شاشة المتصفح
// هذا أبسط مثال على JavaScript
alert("مرحباً بك في أول كود JavaScript!");

في هذا المثال، نستخدم الدالة (Function) alert() التي تُظهر رسالة للمستخدم في نافذة منبثقة.

alert هي دالة مدمجة (Built-in Function) في JavaScript.
ما بداخل القوسين هو النص الذي نريد عرضه، ويُكتب بين علامتي اقتباس " ".
السطر ينتهي بـ ; وهي علامة نهاية الجملة في JavaScript.
الكود يعمل مباشرة في المتصفح، ولا يحتاج إلى أي إعدادات معقدة. هذا النوع من التفاعل مفيد جدًا في المواقع المختلفة:
في موقع شخصي: ترحيب خاص عند دخول الزائر
في متجر إلكتروني: تنبيه عند إضافة منتج
في موقع حكومي: تحذير عند ترك حقل فارغ
السؤال المتوقع من المبتدئين هو: "هل هذا كل شيء؟" لا، هذه فقط البداية، لكن هذا الكود يُعلمنا كيف تبدأ كتابة تعليمات بلغة يفهمها المتصفح ويتفاعل معها.

مثال عملي

javascript

JAVASCRIPT Code

// عندما يضغط المستخدم على زر، تظهر رسالة
// هذا المثال يمكن استخدامه في مواقع الأخبار أو المتاجر
function showMessage() {
alert("تم النقر على الزر!");
}
// إنشاء الزر وربطه بالدالة
document.write('<button onclick="showMessage()">اضغط هنا</button>');

هذا المثال يُظهر كيف نتفاعل مع الحدث (Event) عند النقر على زر (Button).

function showMessage() تُعرّف دالة باسم showMessage.
alert() داخل الدالة تعرض الرسالة عند تنفيذ الدالة.
document.write() يُستخدم لكتابة عنصر HTML داخل الصفحة.
السطر يكتب زرًا (Button) فيه خاصية onclick وهي حدث يتم تنفيذه عند النقر.
هذا النمط شائع جدًا في مواقع التجارة الإلكترونية (E-commerce) مثلاً عند النقر على "أضف إلى السلة"، أو في بوابة حكومية عند النقر على "تحقق من البيانات".

أفضل الممارسات:

استخدم التعريف الحديث للدوال والكتابة: مثل let بدلاً من var.
افصل الشيفرة عن العناصر باستخدام ملفات .js مستقلة.
تحقق من الأخطاء باستخدام أدوات المتصفح مثل Console.
استخدم addEventListener بدلاً من onclick في المشاريع الأكبر.
أخطاء شائعة:
كتابة أسماء الدوال أو المتغيرات بشكل خاطئ (JavaScript حساسة لحالة الحروف).
نسيان ; في نهاية السطر.
استخدام document.write بعد تحميل الصفحة يسبب محو المحتوى.
التعامل مع العناصر قبل تحميل الصفحة (يفضل وضع الشيفرة في window.onload).
نصائح تصحيح الأخطاء:

استخدم console.log() لطباعة القيم.
تحقق من الأخطاء في DevTools (F12 في المتصفح).
أعد قراءة الرسائل بحذر – غالبًا تقول لك أين الخطأ.

📊 مرجع سريع

الخاصية/الدالة	الوصف	مثال
alert()	عرض رسالة منبثقة للمستخدم	alert("مرحبا")
function	تعريف دالة قابلة لإعادة الاستخدام	function test() {}
onclick	حدث يُطلق عند النقر على عنصر	<button onclick="...">
document.write()	كتابة عناصر داخل الصفحة	document.write("مرحباً")
console.log()	طباعة قيم لتصحيح الأخطاء	console.log(x)
addEventListener	إضافة حدث للعناصر بطريقة مرنة	element.addEventListener("click", func)

في هذا الدرس تعلمت كيف تبدأ مع JavaScript، وأهميته في جعل صفحات الويب تفاعلية. شفرتنا البسيطة عرضت رسالة، وتطورت لزر يتفاعل مع المستخدم. هذه المهارات الأساسية تفتح لك الباب لفهم التعامل مع DOM (واجهة كائنات المستند) وربط الواجهة الأمامية (Frontend) بالخلفية (Backend).
الخطوة التالية هي:

تعلم كيف تُغيّر محتوى الصفحة باستخدام DOM.
استخدام الحلقات (Loops) والشروط (Conditions).
التعامل مع النماذج (Forms) وبيانات المستخدم.
استمر في التعلم بممارسة أمثلة حقيقية، وبناء مكونات صغيرة تساعدك في مشاريعك القادمة.

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

جاهز للبدء

اختبر معرفتك

اختبر فهمك لهذا الموضوع بأسئلة عملية.

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

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

اللغة