👩‍💻 بوت رحاب عبدالحميد | مساعد لغات البرمجة التفاعلي داخل بلوجر

اختر اللغة البرمجية لعرض دوالها وشرحها 👇

if (lang === 'html') { selectors.innerHTML = ` ⚙️ دوال HTML:
-- اختر دالة HTML -- p h1 span div section article input form button
`; } function explainHTML() { const func = document.getElementById("htmlFunc").value; const reply = document.getElementById("reply"); const htmlInfo = { "p": { ar: "يُستخدم لكتابة فقرة نصية.", en: "Used to write a paragraph of text.", example: "

هذا نص فقرة

", usage: "مناسب لعرض المحتوى." }, "h1": { ar: "عنوان رئيسي في الصفحة.", en: "Main heading in the page.", example: "

مرحبا

", usage: "يُستخدم في العناوين المهمة." }, "span": { ar: "عنصر داخلي لتنسيق جزئي.", en: "Inline element for styling part of text.", example: "أحمر", usage: "مناسب لتلوين أو إبراز كلمات." }, "div": { ar: "عنصر تقسيم لتجميع المحتوى.", en: "Container element for structuring content.", example: "

قسم محتوى

", usage: "شائع في تنظيم الصفحة." }, "section": { ar: "قسم يحتوي على محتوى مرتبط.", en: "Defines a section of related content.", example: "

معلومات عامة

", usage: "مفيد للفصل بين الأجزاء." }, "article": { ar: "محتوى مستقل مثل مقال.", en: "Independent content like an article.", example: "

هذا مقال تقني

", usage: "يُستخدم في التدوين والأخبار." }, "input": { ar: "إدخال بيانات من المستخدم.", en: "Input field for user data.", example: "", usage: "جزء أساسي من النموذج." }, "form": { ar: "نموذج يحتوي على عناصر الإدخال.", en: "Form with input elements.", example: "

", usage: "يُستخدم لجمع البيانات." }, "button": { ar: "زر قابل للنقر لتنفيذ أمر.", en: "Clickable button to perform actions.", example: "", usage: "يُستخدم للتفاعل مع المستخدم." } }; if (htmlInfo[func]) { const info = htmlInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار عنصر أو لا يوجد شرح متاح."; } } if (lang === 'js') { selectors.innerHTML = ` ⚙️ دوال JavaScript:
-- اختر دالة -- Math.abs() Math.max() Math.min() toUpperCase() includes() push() slice()
`; } function explainJS() { const func = document.getElementById("jsFunc").value; const reply = document.getElementById("reply"); const jsInfo = { "Math.abs": { ar: "تعيد القيمة المطلقة للعدد.", en: "Returns the absolute value of a number.", example: "Math.abs(-7) → 7", usage: "تستخدم لتجاهل الإشارة السالبة في العمليات الحسابية." }, "Math.max": { ar: "تعيد أكبر قيمة بين الأرقام.", en: "Returns the largest number among values.", example: "Math.max(1, 5, 3) → 5", usage: "مفيد في مقارنة القيم العليا." }, "Math.min": { ar: "تعيد أصغر قيمة بين الأرقام.", en: "Returns the smallest number among values.", example: "Math.min(1, 5, 3) → 1", usage: "يُستخدم لتحليل الحدود الدنيا." }, "toUpperCase": { ar: "تحول النص إلى أحرف كبيرة.", en: "Converts text to uppercase letters.", example: "'hello'.toUpperCase() → 'HELLO'", usage: "يُستخدم لتنظيم النصوص قبل المقارنة." }, "includes": { ar: "يتحقق من وجود نص داخل سلسلة.", en: "Checks if string contains a specific term.", example: "'JavaScript'.includes('Script') → true", usage: "شائع للبحث والتصفية." }, "push": { ar: "يضيف عنصر إلى نهاية مصفوفة.", en: "Adds an item to the end of an array.", example: "[1,2].push(3) → [1,2,3]", usage: "يُستخدم لبناء تسلسلات مرنة." }, "slice": { ar: "يستخرج جزء من المصفوفة دون تعديل الأصل.", en: "Extracts a portion of an array without modifying the original.", example: "[10,20,30].slice(1,3) → [20,30]", usage: "مفيد عند التعامل مع أجزاء محددة من البيانات." } }; if (jsInfo[func]) { const info = jsInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار دالة أو لا يوجد شرح متاح."; } } if (lang === 'jquery') { selectors.innerHTML = ` ⚙️ دوال jQuery:
-- اختر دالة -- text() html() val() addClass() removeClass() attr() hide() show() fadeIn()
`; } function explainjQuery() { const func = document.getElementById("jqueryFunc").value; const reply = document.getElementById("reply"); const jInfo = { "text": { ar: "تستخدم لتغيير أو قراءة النص من عنصر HTML.", en: "Used to get or set text inside an element.", example: "$('#title').text('مرحبًا');", usage: "مفيد لتحديث واجهة المستخدم مباشرة." }, "html": { ar: "تغير أو تعرض محتوى HTML داخل عنصر.", en: "Sets or gets HTML content of an element.", example: "$('#box').html('محتوى مميز');", usage: "يُستخدم لإدراج عناصر HTML ديناميكيًا." }, "val": { ar: "تستخدم لجلب أو تعيين قيمة حقل إدخال.", en: "Gets or sets the value of input field.", example: "$('#input').val('رحاب');", usage: "أساسي للتعامل مع النماذج." }, "addClass": { ar: "تضيف صنف CSS لعنصر معين.", en: "Adds a CSS class to an element.", example: "$('#btn').addClass('active');", usage: "مناسب لتغيير التنسيق بصريًا حسب الحدث." }, "removeClass": { ar: "تُزيل صنف CSS من عنصر.", en: "Removes a CSS class from an element.", example: "$('#btn').removeClass('hidden');", usage: "مفيد في التفاعل البرمجي مع المظهر." }, "attr": { ar: "تقرأ أو تغيّر خاصية عنصر (مثل src).", en: "Gets or sets attributes of an element.", example: "$('img').attr('src','image.jpg');", usage: "يُستخدم لتحديث الصور والروابط والخصائص." }, "hide": { ar: "تُخفي العنصر فورًا.", en: "Instantly hides the element.", example: "$('#message').hide();", usage: "مناسب لإغلاق التنبيهات أو النوافذ." }, "show": { ar: "تُظهر العنصر إذا كان مخفيًا.", en: "Makes a hidden element visible.", example: "$('#menu').show();", usage: "شائع لإظهار المحتوى عند التفاعل." }, "fadeIn": { ar: "يُظهر العنصر بتدرج ناعم.", en: "Fades in the element smoothly.", example: "$('#popup').fadeIn(500);", usage: "لإضافة تأثيرات مرئية لطيفة." } }; if (jInfo[func]) { const info = jInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار دالة أو لا يوجد شرح متاح."; } } if (lang === 'react') { selectors.innerHTML = ` ⚛️ دوال React:
-- اختر -- useState() useEffect() useContext() useRef()
`; } function explainReact() { const func = document.getElementById("reactFunc").value; const reply = document.getElementById("reply"); const reactInfo = { "useState": { ar: "تنشئ حالة قابلة للتغيير داخل المكون.", en: "Creates a state value inside the component.", example: "const [count, setCount] = useState(0);", usage: "يُستخدم لتخزين قيم مثل عداد أو حالة ظهور مكون." }, "useEffect": { ar: "ينفذ كود بعد تحميل أو تحديث المكون.", en: "Executes code after the component is mounted or updated.", example: "useEffect(() => { fetchData(); }, []);", usage: "شائع لجلب البيانات من API أو تفعيل مؤثرات." }, "useContext": { ar: "يُتيح الوصول لقيمة من السياق (Context).", en: "Accesses shared data via React Context.", example: "const theme = useContext(ThemeContext);", usage: "مفيد لمشاركة البيانات بين مكونات متعددة." }, "useRef": { ar: "يحفظ مرجع DOM أو قيمة مستقرة بين التحديثات.", en: "Stores a DOM reference or stable value between renders.", example: "const inputRef = useRef(null);", usage: "يُستخدم للوصول إلى عناصر HTML أو القيم التي لا تعيد التهيئة." } }; if (reactInfo[func]) { const info = reactInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار دالة أو لا يوجد شرح متاح."; } } if (lang === 'hooks') { selectors.innerHTML = ` 🧠 دوال Hooks:
-- اختر دالة -- useState() useReducer() useEffect() useLayoutEffect()
`; } function explainHooks() { const func = document.getElementById("hooksFunc").value; const reply = document.getElementById("reply"); const hookInfo = { "useState": { ar: "ينشئ حالة داخل المكون يمكن تغييرها.", en: "Initializes a local state in the component.", example: "const [name, setName] = useState('رحاب');", usage: "مفيد لتخزين مدخلات أو حالة عرض." }, "useReducer": { ar: "يُستخدم لإدارة منطق تحديث حالة مركبة.", en: "Manages complex state through reducer logic.", example: "useReducer(reducer, initialState);", usage: "مناسب لتطبيقات تحتوي حالات متعددة." }, "useEffect": { ar: "يشغل تعليمات عند تغير حالة أو تحميل أولي.", en: "Executes code after render or state change.", example: "useEffect(() => { document.title = 'مرحبا'; }, []);", usage: "مفيد في التفاعل مع DOM أو الشبكة." }, "useLayoutEffect": { ar: "يشبه useEffect لكنه ينفذ قبل رسم المكون.", en: "Runs synchronously before painting the screen.", example: "useLayoutEffect(() => { adjustLayout(); });", usage: "مناسب لحسابات المواقع أو التنسيق." } }; if (hookInfo[func]) { const info = hookInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار دالة أو لا يوجد شرح متاح."; } } /* 🔒 ملاحظات الملكية: الكود مكتوب بالكامل يدويًا، بدون روابط أو اقتباسات خارجية يحمل اسمك "رحاب عبدالحميد" كمصممة ومبتكرة للفكرة يمكنك حفظه، تطويره، مشاركته، وإضافة توقيعك عليه */ if (lang === 'ajax') { selectors.innerHTML = ` 📡 دوال AJAX:
-- اختر دالة -- fetch() XMLHttpRequest() JSON.parse() JSON.stringify()
`; } function explainAJAX() { const func = document.getElementById("ajaxFunc").value; const reply = document.getElementById("reply"); const ajaxInfo = { "fetch": { ar: "تُستخدم لجلب البيانات من رابط أو API.", en: "Used to fetch data from a URL or API.", example: `fetch('/data').then(res => res.json()).then(data => console.log(data));`, usage: "مفيد في التطبيقات التفاعلية الحديثة." }, "XMLHttpRequest": { ar: "كائن تقليدي لإجراء طلبات شبكية.", en: "Classic object for making HTTP requests.", example: `let xhr = new XMLHttpRequest(); xhr.open('GET', '/data'); xhr.send();`, usage: "يُستخدم في التطبيقات القديمة أو المتخصصة." }, "JSON.parse": { ar: "تحول نص JSON إلى كائن.", en: "Parses JSON string into JavaScript object.", example: `JSON.parse('{"name":"رحاب"}')`, usage: "مهم عند استقبال البيانات من الخادم." }, "JSON.stringify": { ar: "تحول كائن إلى نص JSON.", en: "Converts object into JSON string.", example: `JSON.stringify({name:"رحاب"})`, usage: "مفيد عند إرسال البيانات إلى الخادم." } }; if (ajaxInfo[func]) { const info = ajaxInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار دالة أو لا يوجد شرح متاح."; } } if (lang === 'dom') { selectors.innerHTML = ` 🧩 دوال DOM:
-- اختر دالة -- getElementById() querySelector() innerText innerHTML
`; } function explainDOM() { const func = document.getElementById("domFunc").value; const reply = document.getElementById("reply"); const domInfo = { "getElementById": { ar: "يحدد عنصر باستخدام معرفه ID.", en: "Selects element by its ID.", example: `document.getElementById('title').style.color = 'red';`, usage: "مستخدم في تعديل واجهة العناصر." }, "querySelector": { ar: "يحدد أول عنصر يطابق محدد CSS.", en: "Selects first element matching CSS selector.", example: `document.querySelector('.box').innerText = 'مرحبًا';`, usage: "مرن لاختيار عناصر معينة حسب نوعها." }, "innerText": { ar: "يقرأ أو يعدّل النص داخل العنصر.", en: "Gets or sets text inside element.", example: `document.getElementById('msg').innerText = 'تم التحديث';`, usage: "يُستخدم لعرض المحتوى للمستخدم." }, "innerHTML": { ar: "يقرأ أو يعدّل محتوى HTML داخل العنصر.", en: "Gets or sets HTML inside element.", example: `document.getElementById('box').innerHTML = 'محتوى';`, usage: "مفيد لإدراج عناصر ديناميكية." } }; if (domInfo[func]) { const info = domInfo[func]; reply.innerHTML = ` 📘 بالعربي: ${info.ar}
📙 English: ${info.en}

🔧 مثال عملي:${info.example}
📌 التطبيقات: ${info.usage} `; } else { reply.innerHTML = "❌ لم يتم اختيار دالة أو لا يوجد شرح متاح."; } }