بعد تعلم أساسيات HTML لبناء هيكل الصفحة، وCSS لتنسيق الشكل والتصميم، تأتي مرحلة JavaScript، وهي الخطوة الأهم لتحويل الموقع من صفحة ثابتة إلى موقع تفاعلي قادر على التفاعل مع المستخدم.
JavaScript هي لغة برمجة تعمل داخل المتصفح، وتُستخدم لإضافة الحركة والتفاعل والتحكم في عناصر الصفحة بشكل ديناميكي أثناء تشغيل الموقع.
ما هي JavaScript؟
JavaScript هي لغة مسؤولة عن “سلوك” الصفحة، أي أنها تتحكم في ماذا يحدث عندما يضغط المستخدم زر، أو يكتب في حقل، أو يتفاعل مع الموقع بأي شكل.
بمعنى أبسط:
HTML = هيكل الصفحة
CSS = شكل الصفحة
JavaScript = تفاعل الصفحة
كيف تعمل JavaScript داخل الموقع؟
عندما يفتح المستخدم موقعًا، يقوم المتصفح بقراءة HTML وCSS، ثم يقوم JavaScript بالتدخل لتغيير المحتوى أو تنفيذ أوامر حسب تفاعل المستخدم.
المتغيرات (Variables)
المتغيرات تستخدم لتخزين البيانات داخل الكود.
مثال:
JavaScript
let name = "Ali";
let age = 22;
يمكن استخدام هذه البيانات لاحقًا داخل البرنامج.
أنواع البيانات
JavaScript تتعامل مع عدة أنواع من البيانات مثل:
نصوص (Text)
أرقام (Numbers)
قيم صحيحة/خطأ (True / False)
مثال:
JavaScript
let isStudent = true;
let price = 50;
let city = "Cairo";
الجمل الشرطية (If Statement)
تُستخدم لاتخاذ قرارات داخل البرنامج.
مثال:
JavaScript
let age = 18;
if (age >= 18) {
console.log("You can enter");
} else {
console.log("Access denied");
}
الدوال (Functions)
الدوال تساعد على تنظيم الكود وإعادة استخدامه.
مثال:
JavaScript
function greet() {
console.log("Hello User");
}
greet();
التعامل مع عناصر HTML (DOM)
واحدة من أهم استخدامات JavaScript هي التحكم في عناصر الصفحة.
مثال:
JavaScript
document.getElementById("title").innerHTML = "Welcome to My Website";
هذا الكود يغير النص داخل عنصر موجود في الصفحة.
الأحداث (Events)
الأحداث هي التفاعل مع المستخدم مثل الضغط على زر.
مثال:
JavaScript
button.addEventListener("click", function() {
alert("Button clicked!");
});
الخلاصة:
JavaScript هي الخطوة التي تجعل الموقع حي وتفاعلي. بدونها يكون الموقع مجرد شكل ثابت، لكن معها يمكن بناء تطبيقات ومواقع ذكية تتفاعل مع المستخدم في الوقت الحقيقي.