نظرة عامة في لغة JavaScript

نظرة عامة في لغة JavaScript

يا هلا بالشباب! اليوم بنتكلم عن JavaScript، اللغة اللي قلبت موازين الويب وصارت أساسية في كل مكان. هي لغة برمجة عالية المستوى، تفسيرية، وتدعم أنماط برمجة متعددة زي الكائنية (Object-Oriented) والوظيفية (Functional).

ليش JavaScript مهمة؟

في البداية، كانت JavaScript تستخدم عشان تخلي صفحات الويب تفاعلية. يعني مثلاً، لما تضغط زر ويطلع لك شيء، أو لما تتغير قائمة بدون ما الصفحة تسوي refresh. بس الحين؟ استخداماتها صارت أوسع بكثير:

• الواجهات الأمامية (Frontend): أساس بناء واجهات المستخدم التفاعلية باستخدام مكتبات وأطر عمل زي React، Angular، و Vue.
• الواجهات الخلفية (Backend): مع Node.js، تقدر تبني سيرفرات وتطبيقات ويب كاملة باستخدام JavaScript.
• تطبيقات الجوال (Mobile Apps): باستخدام React Native أو NativeScript.
• تطبيقات سطح المكتب (Desktop Apps): مع Electron.

ملاحظة: JavaScript مو نفس Java! كثير يخبصون بينهم، بس تراهم لغتين مختلفتين تماماً.

أساسيات اللغة

المتغيرات (Variables)

عشان تخزن بيانات، تستخدم المتغيرات. عندنا var (القديمة شوي)، و let و const (الأحدث والأفضل). let للمتغيرات اللي قيمتها ممكن تتغير، و const للمتغيرات اللي قيمتها ثابتة وما تتغير.

مثال:

let name = "أحمد";
const age = 30;
name = "سارة"; // هذا مسموح
// age = 31; // هذا بيعطيك خطأ لأنها const

أنواع البيانات (Data Types)

عندنا أنواع بيانات أساسية زي:

• String: للنصوص زي "مرحباً".
• Number: للأرقام زي 10 أو 3.14.
• Boolean: للقيم المنطقية true أو false.
• Undefined: لما يكون المتغير ما له قيمة.
• Null: لما تكون القيمة "لا شيء" بشكل مقصود.
• Object: للأشياء المعقدة زي الكائنات والمصفوفات.
• Symbol, BigInt: أنواع أحدث شوي.

الدوال (Functions)

الدوال هي مجموعة أكواد تسوي مهمة معينة وتقدر تستدعيها أكثر من مرة.

مثال:

function greet(name) {
    return "أهلاً وسهلاً يا " + name;
}

console.log(greet("فهد")); // الناتج: أهلاً وسهلاً يا فهد

// دوال السهم (Arrow Functions)
const multiply = (a, b) => a * b;
console.log(multiply(5, 3)); // الناتج: 15

التفاعل مع صفحة الويب (DOM Manipulation)

إذا كنت تشتغل على الويب، JavaScript تعطيك القدرة إنك تعدّل على محتوى الصفحة وهيكلها. هذا الشيء نسميه DOM (Document Object Model). مثلاً، تقدر تغير نص عنصر، تضيف عنصر جديد، أو تستجيب لضغطات الأزرار.

مثال بسيط لتغيير نص فقرة:

// في ملف HTML بيكون عندك <p id="myParagraph">نص قديم</p>
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "هذا نص جديد من JavaScript!";

التعامل مع الأحداث (Event Handling)

JavaScript قوية جداً في الاستجابة للأحداث اللي تصير في الصفحة، زي ضغط زر، تحريك الماوس، أو إرسال نموذج.

مثال:

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", () => {
    alert("ضغطت الزر!");
});

البرمجة غير المتزامنة (Asynchronous JavaScript)

كثير من العمليات في الويب تاخذ وقت، زي جلب البيانات من سيرفر. JavaScript توفر طرق للتعامل مع هالشيء بدون ما تعلق الصفحة. عندنا Callbacks، Promises، و async/await.

مثال بسيط باستخدام async/await لجلب بيانات (طبعاً تحتاج بيئة متكاملة عشان تشتغل):

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('فيه مشكلة في جلب البيانات:', error);
    }
}

fetchData();

مستقبل JavaScript

ملاحظة: JavaScript تتطور باستمرار! كل سنة ينزل إصدار جديد (ESNext) يجيب معاه ميزات وأدوات جديدة عشان يخلي حياتنا كمبرمجين أسهل. مهم إنك تظل مطلع على آخر التحديثات.

وبس والله، هذي كانت نظرة سريعة على JavaScript. اللغة هذي بحر، وكل ما تعمقت فيها بتشوف أشياء رهيبة تقدر تسويها. شد حيلك!

الفهرسالتالي →