KEMO DEV, One Street, Khartoum (2025)

19/03/2025

💻 للبيع: مشروع مدونة إلكترونية متكاملة وجاهزة للإطلاق 🚀

هل تبحث عن مدونة احترافية تجمع بين التدوين التلقائي واليدوي مع لوحة تحكم قوية وإحصائيات تفصيلية؟ الآن فرصتك لامتلاك مشروع جاهز بمميزات مذهلة!

🔥 مميزات المشروع:

✔ التدوين التلقائي عبر RSS Feeds – جلب الأخبار والمقالات بسهولة 📡
✔ إضافة وتعديل المقالات بسهولة عبر CkEditor ✍️
✔ لوحة تحكم متطورة مع إحصائيات تفصيلية عن الزوار باستخدام Chart.js 📈
✔ إعدادات مرنة لتغيير اسم الموقع، الوصف، وتفعيل التدوين التلقائي ⚙️
✔ إدارة الملف الشخصي للمستخدمين 🔐
✔ تصميم متجاوب وأنيق يعمل على جميع الأجهزة 📱💻
✔ أداء سريع وأمان عالي 🔥
✔ نظام إدارة الإعلانات لتحقيق الأرباح 💰
✔ كود نظيف وقابل للتعديل لتوسيع الموقع بسهولة 🛠️

🛠️ التقنيات المستخدمة:

🔹 HTML, CSS, JavaScript
🔹 PHP, MySQL
🔹 Bootstrap 5, Chart.js, CkEditor, FontAwesome

📌 السعر: متاح للتفاوض
📩 مهتم؟ راسلني الآن لمزيد من التفاصيل!

#تدوين #مدونات

08/03/2025

تحية خاصة كبيرة للمعجبين الصاعدين الجدد لديّ! Mohamed Ebrahim

19/02/2025

الدرس الحادي عشر: التعامل مع الأحداث في جافاسكريبت

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

---

1. إضافة الأحداث باستخدام onclick مباشرة في HTML

Click me

function sayHello() {
alert("Hello, JavaScript!");
}

لماذا لا يُفضل هذه الطريقة؟

لأنها تجعل HTML يحتوي على جافاسكريبت، مما يقلل من مرونة الكود وصيانته.

---

2. استخدام addEventListener (أفضل طريقة)

إضافة حدث click إلى زر

let button = document.querySelector("button");

button.addEventListener("click", () => {
alert("Button clicked!");
});

---

3. أنواع الأحداث الشائعة في جافاسكريبت

أحداث الفأرة (Mouse Events)

click – عند النقر على عنصر

dblclick – عند النقر مرتين متتاليتين

mouseover – عند تمرير الفأرة فوق عنصر

mouseout – عند إخراج الفأرة من العنصر

mousedown – عند الضغط على زر الفأرة

mouseup – عند إفلات زر الفأرة

let box = document.querySelector(".box");

box.addEventListener("mouseover", () => {
box.style.backgroundColor = "yellow";
});

box.addEventListener("mouseout", () => {
box.style.backgroundColor = "white";
});

---

أحداث لوحة المفاتيح (Keyboard Events)

keydown – عند الضغط على زر

keyup – عند إفلات الزر

keypress – (قديم) عند كتابة حرف

document.addEventListener("keydown", (event) => {
console.log("Key Pressed:", event.key);
});

---

أحداث الإدخال والنماذج (Form Events)

input – عند إدخال نص في حقل

change – عند تغيير قيمة عنصر

submit – عند إرسال النموذج

focus – عند تحديد حقل الإدخال

blur – عند مغادرة الحقل

let inputField = document.querySelector("input");

inputField.addEventListener("input", () => {
console.log("Input Value:", inputField.value);
});

---

أحداث التحميل (Window Events)

DOMContentLoaded – عند تحميل الصفحة

load – عند اكتمال تحميل جميع الموارد

resize – عند تغيير حجم النافذة

scroll – عند تمرير الصفحة

window.addEventListener("resize", () => {
console.log("Window resized:", window.innerWidth, window.innerHeight);
});

---

4. إزالة الأحداث باستخدام removeEventListener

let button = document.querySelector("button");

function showMessage() {
alert("Hello!");
}

button.addEventListener("click", showMessage);

// لإزالة الحدث لاحقًا
button.removeEventListener("click", showMessage);

---

5. منع السلوك الافتراضي (preventDefault)

منع إرسال النموذج عند النقر على زر submit

let form = document.querySelector("form");

form.addEventListener("submit", (event) => {
event.preventDefault();
console.log("Form submission prevented.");
});

---

6. إيقاف انتشار الحدث (stopPropagation)

عندما يكون هناك عنصر داخل عنصر آخر، فإن الحدث يمكن أن ينتقل للأعلى، مما يسبب تشغيل أكثر من حدث.

let outerDiv = document.querySelector(".outer");
let innerDiv = document.querySelector(".inner");

outerDiv.addEventListener("click", () => {
console.log("Outer Div Clicked");
});

innerDiv.addEventListener("click", (event) => {
event.stopPropagation(); // يمنع انتقال الحدث للأعلى
console.log("Inner Div Clicked");
});

---

7. التعامل مع الأحداث الديناميكية (Event Delegation)

عندما يتم إضافة عناصر جديدة بعد تحميل الصفحة، قد لا تعمل الأحداث عليها. الحل هو استخدام الحدث على العنصر الأب.

let list = document.querySelector("ul");

list.addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
console.log("Item Clicked:", event.target.innerText);
}
});

---

في الدرس القادم، سنتعلم عن الكائن JSON وكيفية التعامل معه في جافاسكريبت.

18/02/2025

الدرس العاشر: التفاعل مع DOM في جافاسكريبت

DOM (Document Object Model) هو الواجهة البرمجية التي تتيح لجافاسكريبت التحكم في عناصر HTML وتعديلها ديناميكيًا.

---

1. الوصول إلى عناصر DOM

باستخدام getElementById

let heading = document.getElementById("title");
console.log(heading);

باستخدام getElementsByClassName

let items = document.getElementsByClassName("list-item");
console.log(items);

باستخدام getElementsByTagName

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);

باستخدام querySelector (موصى به)

let firstItem = document.querySelector(".list-item");
console.log(firstItem);

باستخدام querySelectorAll

let allItems = document.querySelectorAll(".list-item");
console.log(allItems);

---

2. تعديل محتوى العناصر

تغيير النص (innerText)

heading.innerText = "Hello, JavaScript!";

تغيير HTML داخل العنصر (innerHTML)

heading.innerHTML = "Hello, World!";

---

3. تعديل الخصائص (attributes)

تغيير قيمة src في صورة

let img = document.querySelector("img");
img.src = "new-image.jpg";

إضافة alt للصورة

img.setAttribute("alt", "New Image");

التحقق من وجود خاصية وحذفها

if (img.hasAttribute("alt")) {
img.removeAttribute("alt");
}

---

4. تعديل الأنماط (CSS) باستخدام style

heading.style.color = "blue";
heading.style.fontSize = "24px";

---

5. إضافة وإزالة الأصناف (classList)

إضافة صنف جديد (add)

heading.classList.add("highlight");

إزالة صنف (remove)

heading.classList.remove("highlight");

التبديل بين الأصناف (toggle)

heading.classList.toggle("dark-mode");

---

6. إنشاء عناصر جديدة وإضافتها إلى الصفحة

إنشاء عنصر جديد (createElement)

let newParagraph = document.createElement("p");
newParagraph.innerText = "This is a new paragraph.";

إضافته داخل عنصر معين (appendChild)

document.body.appendChild(newParagraph);

إضافته في مكان معين (insertBefore)

let container = document.querySelector(".container");
container.insertBefore(newParagraph, container.firstChild);

---

7. حذف العناصر (remove)

let elementToRemove = document.querySelector(".old-item");
elementToRemove.remove();

---

8. التعامل مع الأحداث (Event Listeners)

إضافة حدث للنقر (click)

heading.addEventListener("click", () => {
heading.style.color = "red";
});

إضافة حدث عند تمرير الفأرة (mouseover)

heading.addEventListener("mouseover", () => {
heading.style.backgroundColor = "yellow";
});

إزالة حدث (removeEventListener)

let sayHello = () => console.log("Hello!");
heading.addEventListener("click", sayHello);

// إزالة الحدث لاحقًا
heading.removeEventListener("click", sayHello);

---

9. التعامل مع المدخلات (input)

التقاط قيمة الإدخال عند تغييره (input event)

let inputField = document.querySelector("input");

inputField.addEventListener("input", () => {
console.log(inputField.value);
});

---

10. تنفيذ أكواد عند تحميل الصفحة (DOMContentLoaded)

document.addEventListener("DOMContentLoaded", () => {
console.log("The page is fully loaded!");
});

---

في الدرس القادم، سنتعلم عن التعامل مع الأحداث والتفاعل مع المستخدم بطريقة متقدمة.

16/02/2025

الدرس التاسع: المصفوفات (Arrays) في جافاسكريبت

المصفوفات (Arrays) هي هياكل بيانات تُستخدم لتخزين مجموعة من القيم داخل متغير واحد.

---

1. إنشاء مصفوفة

let numbers = [10, 20, 30, 40, 50];
let fruits = ["Apple", "Banana", "Cherry"];

---

2. الوصول إلى عناصر المصفوفة

console.log(fruits[0]); // Apple
console.log(numbers[2]); // 30

---

3. تعديل عناصر المصفوفة

fruits[1] = "Mango";
console.log(fruits); // ["Apple", "Mango", "Cherry"]

---

4. معرفة طول المصفوفة (length)

console.log(fruits.length); // 3

---

5. إضافة وحذف العناصر

إضافة عنصر في نهاية المصفوفة (push)

fruits.push("Orange");
console.log(fruits); // ["Apple", "Mango", "Cherry", "Orange"]

إضافة عنصر في بداية المصفوفة (unshift)

fruits.unshift("Grapes");
console.log(fruits); // ["Grapes", "Apple", "Mango", "Cherry", "Orange"]

إزالة آخر عنصر (pop)

fruits.pop();
console.log(fruits); // ["Grapes", "Apple", "Mango", "Cherry"]

إزالة أول عنصر (shift)

fruits.shift();
console.log(fruits); // ["Apple", "Mango", "Cherry"]

---

6. البحث داخل المصفوفة

العثور على الفهرس (indexOf)

console.log(fruits.indexOf("Mango")); // 1

التحقق من وجود عنصر (includes)

console.log(fruits.includes("Banana")); // false

---

7. التكرار على المصفوفة

باستخدام for

for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}

باستخدام forEach

fruits.forEach(fruit => console.log(fruit));

باستخدام map (لإرجاع مصفوفة جديدة)

let upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);

---

8. الفلترة (filter)

let numbers = [5, 10, 15, 20, 25];

let greaterThan10 = numbers.filter(num => num > 10);
console.log(greaterThan10); // [15, 20, 25]

---

9. البحث (find)

let found = numbers.find(num => num > 10);
console.log(found); // 15

---

10. الجمع (reduce)

let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 75

---

11. دمج المصفوفات (concat)

let moreFruits = ["Pineapple", "Strawberry"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits);

---

12. استخراج جزء من المصفوفة (slice)

let sliced = fruits.slice(1, 3);
console.log(sliced); // ["Mango", "Cherry"]

---

13. تعديل المصفوفة (splice)

fruits.splice(1, 1, "Peach"); // يحذف "Mango" ويضيف "Peach"
console.log(fruits);

---

14. عكس المصفوفة (reverse)

fruits.reverse();
console.log(fruits);

---

15. ترتيب العناصر (sort)

fruits.sort();
console.log(fruits);

لترتيب الأعداد بشكل صحيح:

let numbers = [40, 5, 100, 1, 20];
numbers.sort((a, b) => a - b);
console.log(numbers);

---

في الدرس القادم، سنتعلم عن معالجة DOM وكيفية التفاعل مع عناصر الصفحة باستخدام جافاسكريبت.

15/02/2025

الدرس الثامن: الكائنات (Objects) في جافاسكريبت

الكائنات (Objects) هي هياكل بيانات تُستخدم لتخزين المعلومات على شكل مفتاح وقيمة.

---

1. إنشاء كائن (Object Literal)

let person = {
name: "Ali",
age: 25,
country: "Egypt"
};

console.log(person);

---

2. الوصول إلى خصائص الكائن

يمكن الوصول إلى القيم باستخدام النقطة (.) أو المصفوفات ([]).

console.log(person.name); // Ali
console.log(person["age"]); // 25

---

3. تعديل القيم داخل الكائن

person.age = 26;
console.log(person.age); // 26

إضافة خاصية جديدة:

person.job = "Developer";
console.log(person);

حذف خاصية:

delete person.country;
console.log(person);

---

4. الكائنات داخل الكائنات

let student = {
name: "Sara",
grades: {
math: 90,
english: 85
}
};

console.log(student.grades.math); // 90

---

5. الكائنات والدوال (Methods)

يمكن تعريف دالة داخل الكائن:

let car = {
brand: "Toyota",
start: function() {
console.log("The car is starting...");
}
};

car.start();

باستخدام الدوال السهمية (Arrow Functions):

let user = {
name: "Omar",
greet: () => console.log("Hello, " + user.name + "!")
};

user.greet();

---

6. الكلمة المفتاحية this

تُشير إلى الكائن الحالي.

let person = {
name: "Lina",
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};

person.sayHello();

---

7. التكرار على خصائص الكائن (for...in)

for (let key in person) {
console.log(key + ": " + person[key]);
}

---

8. تحويل الكائن إلى مصفوفة (Object.keys و Object.values)

console.log(Object.keys(person)); // ["name", "sayHello"]
console.log(Object.values(person)); // ["Lina", function]

---

9. الكائنات والمصفوفات معًا

يمكن أن تحتوي المصفوفات على كائنات والعكس صحيح.

let students = [
{ name: "Ali", age: 20 },
{ name: "Sara", age: 22 }
];

console.log(students[0].name); // Ali

---

10. النسخ العميق والسطحي للكائنات

عند نسخ كائن باستخدام =، فإنه يحتفظ بنفس المرجع في الذاكرة. لتجنب ذلك:

نسخ سطحي (Object.assign و spread operator)

let newPerson = Object.assign({}, person);
let anotherPerson = { ...person };

نسخ عميق (JSON.parse و JSON.stringify)

let deepCopy = JSON.parse(JSON.stringify(person));

---

في الدرس القادم، سنتعلم عن المصفوفات (Arrays) وكيفية التعامل معها بطرق متقدمة.

15/02/2025

تحية خاصة لأحدث المتابعين لي! يسرني انضمامك! احمد عبدالوهاب, وردة الحياة, سونيا الشيخ, محمد البنا, نوسه الفاتح, بت الفاضل, Mohammed Elsherif Elgerri, محمد بشاره, Ahmed Abd Alhadi, قادة مسعود غربي, Alaa Elshafey, زهرة ربيعية نع نع, Em An, Sakina Hammad, ترس بحري, Houari Dadoune, Møkhtar Charles, Mohmmed Ahmead, Yasir To Max, Mãmøñ Fägërïí, Anas Musa, Ali Faisal, Mohamed Ebrahim, Salem Abdelrasoul, محمدين عثمان, Ahmed Elshehawy, آمالي بالله كبيرة, Alnoor Mohamed Zain, Awab Gmal, نورالدين عبدالعظيم, Ŵd Øśàmã, Nans Nans, سواكن حسن ام مصعب, Sandal Perfume, ام محمد, محمد شمس الدين, Halim Halim, زول مبرمج, مني اخوتي عايلتي, زول ساي, ادم هانى, احمد حسن ابوحسن ابوحسن, Eliot Medary, Alan Smith

14/02/2025

الدرس السابع: الدوال في جافاسكريبت

الدوال (Functions) هي كتل من الكود يمكن إعادة استخدامها لتنفيذ مهام معينة. تساعد في تنظيم الكود وتقليل التكرار.

---

1. تعريف دالة باستخدام function

function greet() {
console.log("Hello, World!");
}

greet(); // استدعاء الدالة

---

2. الدوال بمدخلات (Parameters)

يمكن تمرير قيم إلى الدالة عند استدعائها.

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Kemo"); // Hello, Kemo!

يمكن تحديد أكثر من بارامتر:

function add(a, b) {
console.log(a + b);
}

add(5, 3); // 8

---

3. الدوال التي تعيد قيمة (return)

function multiply(a, b) {
return a * b;
}

let result = multiply(4, 5);
console.log(result); // 20

عند استخدام return، يتم إرجاع القيمة، ويمكن تخزينها في متغير.

---

4. الدوال السهمية (Arrow Functions)

طريقة حديثة لتعريف الدوال بشكل مختصر.

const greet = (name) => {
console.log("Hello, " + name + "!");
};

greet("Ali");

إذا كانت الدالة تحتوي على سطر واحد فقط، يمكن اختصارها أكثر:

const square = num => num * num;

console.log(square(4)); // 16

---

5. القيم الافتراضية للبارامترات

إذا لم يتم تمرير قيمة، يمكن تحديد قيمة افتراضية.

function greet(name = "Guest") {
console.log("Hello, " + name + "!");
}

greet(); // Hello, Guest!

---

6. الدوال كقيم (Function Expressions)

يمكن تخزين الدوال داخل متغيرات.

const sayHello = function() {
console.log("Hello!");
};

sayHello();

---

7. الدوال داخل الكائنات (Methods)

عند تعريف دالة داخل كائن، تُسمى طريقة (Method).

let person = {
name: "Ahmed",
greet: function() {
console.log("Hello, " + this.name + "!");
}
};

person.greet(); // Hello, Ahmed!

---

في الدرس القادم، سنتعلم عن الكائنات (Objects) في جافاسكريبت وكيفية التعامل معها.

13/02/2025

الدرس السادس: الحلقات التكرارية في جافاسكريبت

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

---

1. حلقة for

تُستخدم عندما يكون لدينا عدد تكرارات معروف مسبقًا.

for (let i = 1; i

12/02/2025

الدرس الخامس: الهياكل الشرطية في جافاسكريبت

الهياكل الشرطية تُستخدم لاتخاذ القرارات بناءً على شروط معينة في الكود.

---

1. جملة if و else

تُستخدم if لتنفيذ كود معين إذا تحقق الشرط، ويمكن استخدام else لتنفيذ كود آخر إذا لم يتحقق الشرط.

let age = 18;

if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}

---

2. جملة else if

تُستخدم عندما يكون هناك أكثر من شرط محتمل.

let score = 85;

if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}

---

3. جملة switch

تُستخدم عندما يكون هناك العديد من القيم المحتملة لمتغير معين.

let day = 3;

switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}

إذا لم يكن هناك break، فسينفذ جميع الحالات التي تليه حتى يجد break أو يصل إلى نهاية switch.

---

4. العمليات الشرطية المختصرة (? و && و ||)

المُعامل الثلاثي (?:)

يُستخدم لاختصار جملة if-else في سطر واحد.

let age = 20;
let message = age >= 18 ? "Allowed" : "Not Allowed";
console.log(message); // Allowed

استخدام && و || في الاختصارات

let isLoggedIn = true;
isLoggedIn && console.log("Welcome!"); // ينفذ الكود فقط إذا كانت القيمة true

let username = "";
console.log(username || "Guest"); // إذا كانت القيمة فارغة، يتم استخدام "Guest"

---

5. القيم التي تُعتبر false (Falsy Values)

بعض القيم في جافاسكريبت تُعتبر false تلقائيًا عند استخدامها في شرط، مثل:

0

"" (سلسلة نصية فارغة)

null

undefined

NaN

if (!0) {
console.log("This is false"); // سيتم تنفيذ هذا الكود
}

---

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

11/02/2025

الدرس الرابع: العمليات الحسابية والمنطقية في جافاسكريبت

1. العمليات الحسابية (Arithmetic Operators)

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

العمليات الأساسية

let a = 10;
let b = 3;

console.log(a + b); // 13 (الجمع)
console.log(a - b); // 7 (الطرح)
console.log(a * b); // 30 (الضرب)
console.log(a / b); // 3.333... (القسمة)
console.log(a % b); // 1 (باقي القسمة)
console.log(a ** b); // 1000 (الأس)

زيادة وإنقاص القيم

let x = 5;
x++; // 6
x--; // 5
console.log(x);

---

2. العمليات المقارنة (Comparison Operators)

تُستخدم هذه العمليات لمقارنة القيم وإرجاع true أو false.

console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 == 10); // true
console.log(10 != 5); // true
console.log(10 === "10"); // false (يُقارن النوع والقيمة)
console.log(10 !== "10"); // true

---

3. العمليات المنطقية (Logical Operators)

تُستخدم العمليات المنطقية لدمج عدة شروط معًا.

let isSunny = true;
let isWarm = false;

console.log(isSunny && isWarm); // false (كلاهما يجب أن يكون true)
console.log(isSunny || isWarm); // true (يكفي أن يكون أحدهما true)
console.log(!isSunny); // false (عكس القيمة)

---

4. ترتيب تنفيذ العمليات (Operator Precedence)

يتم تنفيذ العمليات بترتيب محدد، حيث يكون للأولوية دور في تحديد النتيجة.

let result = 10 + 5 * 2;
console.log(result); // 20 (لأن الضرب يتم قبل الجمع)

يمكن استخدام الأقواس لتحديد الأولوية:

let result2 = (10 + 5) * 2;
console.log(result2); // 30

---

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

KEMO DEV

19/03/2025

08/03/2025

19/02/2025

18/02/2025

16/02/2025

15/02/2025

15/02/2025

14/02/2025

13/02/2025

12/02/2025

11/02/2025

Address

Website

Alerts

Shortcuts

Share

Category