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

يا هلا بالجميع! بما إنك مبرمج SQL، أكيد بتسمع كثير عن JavaScript. خليني أعطيك كذا لفة سريعة ومباشرة عن هاللغة الأسطورية.

1. إيش هي JavaScript؟

باختصار، JavaScript هي لغة برمجة عالية المستوى، تفسيرية (Interpreted)، ومتعددة الأنماط (Multi-paradigm). يعني مش زي SQL اللي هي لغة استعلامات بس، JavaScript تقدر تسوي فيها أشياء كثيرة.

ملاحظة: زمان كانت JavaScript بس للويب (تحديداً المتصفحات)، بس الحين صارت في كل مكان!

2. وين تستخدم JavaScript؟

• تطوير الويب (الواجهة الأمامية - Frontend): هذا هو بيتها الأصلي. أي شيء تشوفه يتحرك، يتفاعل، أو يتغير في موقع ويب (غير HTML و CSS) فهو على الأغلب JavaScript.
• تطوير الويب (الواجهة الخلفية - Backend): بفضل Node.js، تقدر تبني سيرفرات كاملة وتتعامل مع قواعد البيانات باستخدام JavaScript. يعني، ممكن تستخدمها عشان تتصل بقاعدة بيانات SQL حقتك!
• تطبيقات الجوال: مع أطر عمل زي React Native، تقدر تبني تطبيقات iOS و Android بنفس كود JavaScript.
• تطبيقات سطح المكتب: Electron يخليك تبني تطبيقات ديسك توب زي VS Code باستخدام JavaScript.
• وأكثر: حتى في أجهزة الـ IoT، وحتى في الذكاء الاصطناعي (أشياء بسيطة طبعاً).

3. أساسيات اللغة (Syntax)

الـ Syntax حقها قريب من لغات زي C++ أو Java، بس أسهل شوي. تعال نشوف أهم الأشياء:

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

عندك ثلاث طرق عشان تعرف متغير:

• var: الطريقة القديمة، لها مشاكل في الـ scope.
• let: الطريقة الجديدة، للمتغيرات اللي ممكن تتغير قيمتها (Block-scoped).
• const: للمتغيرات اللي قيمتها ما تتغير (Block-scoped).

let name = "أحمد";
const PI = 3.14;
var oldVariable = "قديم";

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

JavaScript ديناميكية في أنواع البيانات. يعني ما تحتاج تحدد نوع المتغير وقت التعريف. أهم الأنواع هي:

• String: نص ("مرحباً", 'عالم')
• Number: أرقام (صحيحة وعشرية: 10, 3.14)
• Boolean: صح أو خطأ (true, false)
• Null: قيمة "لا شيء" مقصودة.
• Undefined: قيمة "لا شيء" غير مقصودة (متغير لم يُعطَ قيمة).
• Object: كائنات (مصفوفات، دوال، كائنات حرفية).
• Symbol, BigInt: أنواع جديدة.

العمليات (Operators):

نفس أي لغة ثانية: حسابية (+, -, *, /)، مقارنة (==, ===, >, <)، منطقية (&&, ||, !).

ملاحظة مهمة: == يقارن القيمة بس، === يقارن القيمة والنوع. دائماً استخدم === عشان تتجنب مشاكل غريبة.

console.log(5 == "5");   // true (يقارن القيمة فقط)
console.log(5 === "5");  // false (يقارن القيمة والنوع)

الجمل الشرطية (Conditional Statements) والحلقات (Loops):

نفس الشيء if/else if/else و switch، و for/while/do-while و for...of/for...in.

if (age >= 18) {
    console.log("بالغ");
} else {
    console.log("قاصر");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

الدوال (Functions):

تقدر تعرف دوال عشان تسوي مهمة معينة، وهذا يخلي كودك مرتب وقابل لإعادة الاستخدام.

function greet(name) {
    return "أهلاً بك يا " + name + "!";
}

const sayHello = (name) => { // Arrow Function (طريقة حديثة)
    console.log(مرحباً ${name}!);
};

console.log(greet("علي")); // أهلاً بك يا علي!
sayHello("فاطمة"); // مرحباً فاطمة!

4. التعامل مع الـ DOM (في المتصفحات)

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

// مثال بسيط: تغيير نص عنصر HTML
document.getElementById("myTitle").innerText = "عنوان جديد!";

// إضافة مستمع لحدث (Event Listener)
document.getElementById("myButton").addEventListener("click", function() {
    alert("تم النقر على الزر!");
});

5. JavaScript غير المتزامنة (Asynchronous JS)

هذا جزء مهم جداً، خصوصاً لما تتعامل مع الشبكة (API calls) أو قواعد البيانات. JavaScript تقدر تشغل مهام معينة في الخلفية بدون ما تعلق الواجهة الأمامية. الكلمات اللي بتسمعها كثير هنا هي Callbacks، Promises، و async/await.

// مثال بسيط باستخدام Promise و 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();

6. أطر العمل والمكتبات (Frameworks & Libraries)

عشان تسهل حياتك وتسرع التطوير، في كثير أطر عمل ومكتبات مبنية على JavaScript. أشهرها:

• React.js: من Meta، لبناء واجهات المستخدم التفاعلية.
• Angular: من Google، إطار عمل كامل لبناء تطبيقات الويب الكبيرة.
• Vue.js: إطار عمل خفيف وسهل التعلم.
• Node.js: بيئة تشغيل JavaScript خارج المتصفح (للـ Backend).
• Express.js: إطار عمل Node.js لبناء الـ APIs والسيرفرات.

هذي كانت نظرة سريعة جداً على عالم JavaScript الواسع. اللغة هذي قوية جداً وتطورها سريع. لو بتخش فيها، جهز نفسك لرحلة ممتعة ومليانة تحديات. بالتوفيق!

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