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

مقدمة JavaScript

HTML يبني هيكل الصفحة، وCSS يضبط مظهرها. الواجهة قد تبدو جاهزة، لكنها تبقى ساكنة حتى يحدث شيء: نقرة، قيمة مكتوبة، أو رسالة تظهر بعد التحميل. JavaScript هي اللغة التي تنفّذ ذلك في المتصفح.

ما هو JavaScript؟

JavaScript لغة برمجة. تكتب تعليمات وينفّذها المتصفح واحدة بعد أخرى. ليست لغة ترميز (ذلك HTML) وليست ورقة أنماط (ذلك CSS). عملها اليومي على الويب هو السلوك: تحديث النص، الاستجابة للمستخدم، حساب قيمة، ولاحقاً في هذه الدورة — جلب بيانات من الخادم.

لغة تنفيذ، لا مستند

وسوم HTML تسمّي أجزاء المحتوى. قواعد CSS تصف كيف تبدو تلك الأجزاء. عبارات JavaScript تقول للحاسوب افعل شيئاً: اطبع رسالة، غيّر عقدة في الصفحة، أو اجمع رقمين. لديك من HTML ما يكفي لربط سكربت بالصفحة. هذه الدورة تعلّم اللغة التي تعمل داخل ذلك السكربت.

📊 صفحة ساكنة مقابل صفحة فيها JavaScript

الموقف	بدون JavaScript	مع سكربت قصير
الصفحة حُمّلت للتو	العنوان يبقى كما كُتب في HTML	يمكن للسكربت إعادة كتابة العنوان بعد التحميل
الزائر ينقر زراً	الزر وحده لا يفعل شيئاً مفيداً	في دروس لاحقة: يُنفَّذ كود عند النقر
تحتاج مجموعاً أو فحصاً	HTML لا يحسب؛ CSS لا يقرّر	JavaScript يحسب ثم يعرض النتيجة

أبقِ الطبقات الثلاث منفصلة في ذهنك. الهيكل لـ HTML. المظهر لـ CSS. هذه الدورة عن الطبقة الثالثة: ماذا تفعل الصفحة.

نظرة أولى إلى عبارة

العبارة تعليم واحد. المثال أدناه يكتب سطراً في وحدة تحكم المطوّر — أداة للمبرمج، لا للصفحة المرئية. ستستخدمها كثيراً أثناء التعلّم.

أول عبارة

javascript

console.log("Hello, JavaScript");

ماذا تفعل هذه العبارة

console.log دالة مدمجة تطبع في وحدة التحكم
النص بين علامتي الاقتباس سلسلة — أي بيانات نصية
الفاصلة المنقوطة تنهي العبارة (عادة آمنة في هذه الدورة)
لا يتغيّر شيء على الصفحة بعد؛ هذا سجل فقط
افتح أدوات المطوّر (غالباً F12) بعد تشغيل السكربت، ثم انظر إلى تبويب Console.

رؤية JavaScript على الصفحة

لتغيير ما يراه الزائر، يتحدث السكربت مع الصفحة. في المثال أدناه تبدأ فقرة HTML بجملة. وسم <script> مضمّن يجد الفقرة عبر id ويستبدل نصها. موضع السكربت بالتفصيل في الجلسة التالية؛ هنا يكفي ملف واحد.

HTML مع سكربت مضمّن

html

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

ماذا تغيّر

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

JavaScript يحسب أيضاً

لأنها لغة برمجة، تتعامل مع أرقام وأسماء لا مع الوسوم فقط. هذا المثال الصغير لا علاقة له باللون أو العناوين. يحسب مجموعاً ويطبعه. المتغيرات والأنواع لاحقاً؛ هنا يكفي أن ترى أن الكود يحسب.

حساب صغير

javascript

const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

ماذا تغطي هذه الدورة (وما لا تغطيه)

نبقى في المتصفح: أساسيات اللغة، DOM، الأحداث، النماذج، وfetch. لا نبدأ بإطار عمل ولا Node.js ولا TypeScript. من دون تلك الأدوات يمكنك كتابة سكربتات مفيدة للصفحة. الجلسات الاختيارية إضافات؛ ليست شرطاً للمسار الأساسي.

جرّب بنفسك

أنشئ ملفاً اسمه intro.html.
الصق مثال HTML مع السكربت، احفظه، وافتحه في المتصفح.
تأكد أن الفقرة تعرض الجملة المعاد كتابتها، لا نص HTML الأصلي.
غيّر السلسلة داخل textContent إلى جملة من عندك، احفظ، ثم حدّث الصفحة.
اختياري: أضف console.log("Hello, JavaScript"); داخل نفس <script>، احفظ وحدّث، وابحث عن السطر في تبويب Console.

أخطاء شائعة

معاملة JavaScript كطريقة أخرى لكتابة العناوين والفقرات — أبقِ الهيكل في HTML؛ دع JS يغيّره أو يضيف إليه عند الحاجة
انتظار أن يتفاعل CSS مع نقرة أو يحسب مجموعاً — CSS للمظهر؛ لا يشغّل منطق البرنامج
وضع النسخة الوحيدة للنص المهم داخل السكربت حتى تفرغ الصفحة إن تعطّل JavaScript
الخلط بين وحدة التحكم والصفحة المرئية: console.log لا يستبدل عنواناً على الشاشة

خلاصة

JavaScript لغة برمجة تضيف سلوكاً لصفحات الويب في المتصفح
HTML يبني المحتوى؛ CSS يضبط المظهر؛ JavaScript يقرّر ماذا تفعل الصفحة
العبارة تعليم واحد مثل console.log("Hello, JavaScript");
سكربت مضمّن يمكنه إيجاد عنصر وتغيير textContent بعد التحميل
JavaScript يحسب قيماً، ولا يلمس الوسوم فقط
الدورة تبقى في المتصفح ولا تحتاج إطار عمل
تمرّن بتعديل سكربت صغير وتحديث المتصفح

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

جاهز للبدء

اختبر معرفتك

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

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

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

اللغة