⚡ DOM و التفاعل مع الصفحة

10 / 12

التحكم بصفحة الويب — DOM 🌐

Document Object Model (DOM) هي الطريقة التي يتعامل بها JavaScript مع عناصر HTML.

محرر الكود

// في بيئة المتصفح:
// document.getElementById("app")
// document.querySelector(".class")
// document.querySelectorAll("div")

// مثال DOM (محاكاة)
console.log("=== محاكاة DOM ===");

// إنشاء عنصر
const element = {
  tag: "div",
  id: "greeting",
  textContent: "مرحباً!",
  style: { color: "purple", fontSize: "24px" },
  children: []
};

console.log(`<${element.tag} id="${element.id}">`);
console.log(`  النص: ${element.textContent}`);
console.log(`  اللون: ${element.style.color}`);

// Event Listeners الشائعة
const events = [
  "click — النقر",
  "submit — إرسال نموذج",
  "input — كتابة في حقل",
  "keydown — ضغط مفتاح",
  "mouseover — تحريك الماوس",
  "scroll — التمرير",
  "load — تحميل الصفحة",
  "DOMContentLoaded — جاهزية DOM"
];

console.log("\n=== الأحداث الشائعة ===");
events.forEach(e => console.log(`  📌 ${e}`));

// مثال عملي: TodoList
console.log("\n=== مثال: قائمة مهام ===");
const todoHTML = `
<div id="todo-app">
  <input type="text" id="todo-input" placeholder="أضف مهمة...">
  <button onclick="addTodo()">إضافة</button>
  <ul id="todo-list"></ul>
</div>

console.log("كود HTML/JS لقائمة مهام تفاعلية جاهز!");

المخرجات

// اضغط ▶ تشغيل لرؤية النتائج...

تمرين

اكتب كود JavaScript يُنشئ جدول HTML ديناميكياً من مصفوفة بيانات.

Promises و Async/AwaitES6+ الميزات الحديثة

`;\n\nconsole.log(\"كود HTML/JS لقائمة مهام تفاعلية جاهز!\");"; const LANG = "javascript"; let pyodide = null; function resetCode() { document.getElementById('code-editor').value = ORIGINAL_CODE; document.getElementById('code-output').textContent = '// اضغط ▶ تشغيل لرؤية النتائج...'; } async function runCode() { const code = document.getElementById('code-editor').value; const output = document.getElementById('code-output'); const btn = document.getElementById('run-btn'); const status = document.getElementById('exec-status'); btn.innerHTML = ' جاري التنفيذ...'; btn.disabled = true; output.textContent = '⏳ جاري التنفيذ...'; status.textContent = ''; try { if (LANG === 'python') { await runPython(code, output); } else if (LANG === 'javascript') { runJavaScript(code, output); } else if (LANG === 'html') { runHTML(code, output); } else { output.textContent = code; } status.innerHTML = '✅ تم التنفيذ'; } catch (err) { output.textContent = '❌ خطأ: ' + err.message; status.innerHTML = '❌ خطأ'; } btn.innerHTML = ' تشغيل'; btn.disabled = false; } async function runPython(code, output) { if (!pyodide) { output.textContent = '⏳ جاري تحميل بايثون (مرة واحدة فقط)...'; if (!window.loadPyodide) { await new Promise((resolve, reject) => { const s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js'; s.onload = resolve; s.onerror = reject; document.head.appendChild(s); }); } pyodide = await loadPyodide(); } pyodide.runPython('import sys; from io import StringIO; sys.stdout = StringIO()'); try { pyodide.runPython(code); const stdout = pyodide.runPython('sys.stdout.getvalue()'); output.textContent = stdout || '(لا يوجد مخرجات)'; } catch (e) { output.textContent = '❌ ' + e.message; } } function runJavaScript(code, output) { let logs = []; const fakeConsole = { log: (...args) => logs.push(args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' ')), error: (...args) => logs.push('❌ ' + args.join(' ')), warn: (...args) => logs.push('⚠️ ' + args.join(' ')), }; try { const fn = new Function('console', code); fn(fakeConsole); output.textContent = logs.join('\n') || '(لا يوجد مخرجات)'; } catch (e) { output.textContent = '❌ ' + e.message; } } function runHTML(code, output) { output.innerHTML = ''; } // Save progress function completeLesson() { const slug = "javascript-fundamentals"; const lessonId = 10; const p = JSON.parse(localStorage.getItem('cv-progress-' + slug) || '{"completed":[],"current":0}'); if (!p.completed.includes(lessonId)) p.completed.push(lessonId); p.current = lessonId; localStorage.setItem('cv-progress-' + slug, JSON.stringify(p)); const btn = document.getElementById('complete-btn'); btn.innerHTML = ' مكتمل! ✅'; btn.classList.add('opacity-70'); showToast('تم حفظ تقدمك! 🎉'); } // Auto-save code const editor = document.getElementById('code-editor'); const savedCode = localStorage.getItem('cv-code-javascript-fundamentals-10'); if (savedCode) editor.value = savedCode; editor.addEventListener('input', () => { localStorage.setItem('cv-code-javascript-fundamentals-10', editor.value); }); // Keyboard shortcuts editor.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); runCode(); } // Tab support if (e.key === 'Tab') { e.preventDefault(); const start = editor.selectionStart; editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(editor.selectionEnd); editor.selectionStart = editor.selectionEnd = start + 4; } }); // Mark as completed if already done document.addEventListener('DOMContentLoaded', () => { const p = JSON.parse(localStorage.getItem('cv-progress-javascript-fundamentals') || '{"completed":[]}'); if ((p.completed||[]).includes(10)) { const btn = document.getElementById('complete-btn'); btn.innerHTML = ' مكتمل ✅'; btn.classList.add('opacity-70'); } });