إليك Crash Course في JavaScript — مبسط وسريع، مناسب للمبتدئين والمطورين القادمين من Java أو لغات أخرى. سأشرح من خلال أمثلة وتعليقات:
🚀 مقدمة: ما هي JavaScript؟
- لغة برمجة ديناميكية تُستخدم غالبًا في تطوير الويب.
- تعمل في المتصفح (Frontend) وأيضًا في السيرفر (Backend) باستخدام Node.js.
- تدعم البرمجة الكائنية (OOP) والوظيفية (Functional).
📦 الأساسيات
🔸 المتغيرات
let name = "John"; // يمكن التغيير<br>const age = 30; // ثابت لا يمكن تغييره<br>var oldVar = "Legacy"; // قديم وغير موصى به<br>🔸 الأنواع (Types)
let str = "Hello"; // String
let num = 42; // Number
let bool = true; // Boolean
let nothing = null; // Null
let notDefined; // Undefined
let obj = { a: 1 }; // Object
let arr = [1, 2, 3]; // Array
🔸 الدوال
// Function Declaration
function greet(name) {
return "Hello " + name;
}
// Arrow Function
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
🧰 التحكم بالتدفق
🔸 if / else
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}
🔸 switch
switch (day) {
case "Mon": console.log("Monday"); break;
default: console.log("Other");
}
🔁 الحلقات
for (let i = 0; i < 3; i++) {
console.log(i);
}
let arr = ["a", "b", "c"];
arr.forEach(item => console.log(item)); // أفضل
🧱 الكائنات (Objects)
let user = {
name: "Alice",
age: 25,
greet() {
console.log("Hi " + this.name);
}
};
user.greet(); // Hi Alice
📦 المصفوفات (Arrays)
let nums = [1, 2, 3];
nums.push(4); // [1,2,3,4]
let doubled = nums.map(n => n * 2); // [2,4,6,8]
let filtered = nums.filter(n => n > 2); // [3,4]
📚 الشروط القصيرة (Ternary Operator)
let access = age >= 18 ? "Allowed" : "Denied";
🔄 Destructuring
const person = { name: "Bob", age: 28 };
const { name, age } = person;
const [a, b] = [1, 2];
🌐 التعامل مع الـ DOM (Browser)
document.getElementById("myBtn").addEventListener("click", () => {
alert("Button clicked!");
});
⏳ Asynchronous JavaScript
1. setTimeout
setTimeout(() => {
console.log("Runs after 1 second");
}, 1000);
2. Promises
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Done"), 1000);
});
};
fetchData().then(result => console.log(result));
3. async / await
async function getData() {
let data = await fetchData();
console.log(data);
}
🔐 Classes (OOP)
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + " makes a sound");
}
}
let cat = new Animal("Cat");
cat.speak(); // Cat makes a sound
✅ ملخص سريع
| المفهوم | المثال |
|---|---|
| متغير | let, const |
| دالة | function greet() {} |
| كائن | {name: "Ali"} |
| مصفوفة | [1,2,3].map(...) |
| شرط | if, ? : |
| حلقة | for, forEach |
| برمجة غير متزامنة | async, await, Promise |
| فئة (Class) | class Dog {} |
هل ترغب أن أرسل لك:
- نسخة PDF لهذه الدورة؟
- تمارين قصيرة للممارسة؟
- مشروع عملي صغير لتطبيق هذه المفاهيم (مثل ToDo App)؟
أخبرني كيف تحب أن نكمل.
Leave a Reply