JavaScript: أمثلة أكواد JavaScript
تجمع هذه الصفحة أمثلة أكواد مختارة من كل درس في برنامج تعليم JavaScript للمرجع السريع.
كل مثال هو ملف HTML مستقل — انسخه، احفظه كملف .html، وافتحه في المتصفح لرؤيته عملياً.
1. فهرس الأمثلة
| الدرس | المثال | المفاهيم الرئيسية |
|---|---|---|
| 22 | مقارنة طرق الاختيار الخمس | getElementById، querySelector، إلخ |
| 22 | textContent مقابل innerHTML | تعديل محتوى العنصر |
| 22 | التلاعب بسمات الروابط | getAttribute، setAttribute |
| 22 | إضافة عناصر القائمة ديناميكياً | createElement، appendChild |
| 22 | إزالة واستنساخ العقد | removeChild، cloneNode |
| 23 | قراءة وكتابة خاصية style | element.style |
| 23 | تبديل السمة | classList.toggle |
| 23 | إظهار وإخفاء العناصر | classList |
| 23 | الحصول على الأنماط المحسوبة | getComputedStyle |
| 23 | أنماط جماعية بـ cssText | style.cssText |
| 24 | عداد نقرات الزر | addEventListener، كائن الحدث |
| 24 | اكتشاف لوحة المفاتيح | حدث keydown |
| 24 | اعتراض النموذج | preventDefault |
| 24 | تفويض الأحداث | e.target، الفقاعات |
| 25 | التسلسل والتنسيق | JSON.stringify، replacer، space |
| 25 | فك التسلسل | JSON.parse |
| 25 | أخطاء JSON الشائعة | try/catch، مشكلات صيغة JSON |
| 26 | أساسيات الاستدعاء | setTimeout، دوال الاستدعاء |
| 26 | محاكاة الطلبات بـ Promise | new Promise، then/catch |
| 26 | async/await | دوال async، await |
| 26 | Promise.all و race | طلبات متزامنة، سباق |
| 27 | فئة Student | class، constructor، الطرق |
| 27 | الطرق الثابتة و getter/setter | static، get، set |
| 27 | عرض الوراثة | extends، super |
| 27 | محاكاة الوحدات في ملف واحد | type="module" |
المزيد من الأمثلة ستُضاف مع الوقت. ترقبوا!
▶ مثال
JAVASCRIPT
// مثال على الكود في هذا القسم
const message = "مرحبا بالعالم!";
console.log(message);
هذا أبسط مثال; الأقسام التالية ستشرح بالتفصيل.### ▶ مثال: مرحبا بالعالم
HTML
<!DOCTYPE html>
<html>
<head><title>مرحبا</title></head>
<body>
<h1>مرحبا بالعالم!</h1>
<script>alert('مرحبا من JavaScript!');</script>
</body>
</html>
صفحة بسيطة تعرض مربع حوار تنبيه عند تشغيل البرنامج النصي.
❓ أسئلة شائعة
س كيف أقوم بتشغيل هذه الأمثلة؟
ج انسخ الكود إلى ملف باسم
example.html وافتحه في المتصفح. لا حاجة لخطوة بناء أو خادم لمعظم الأمثلة.س هل يمكنني تعديل الأمثلة ورؤية النتائج؟
ج نعم! افتح الملف في محرر نصوص، غيّر شيئًا، احفظ، وحدّث المتصفح. تغييرات JavaScript تظهر فورًا.
س أين الأمثلة الكبيرة (مثل تطبيق Todo)؟
ج انظر إلى الدرس 28 — مشروع تطبيق Todo. هذا الفهرس يجمع فقط مقتطفات قصيرة لمفهوم واحد.
📖 ملخص
- كل مثال مستقل بذاته — انسخ وشغّل في أي متصفح
- الأمثلة تركز على مفهوم واحد في كل مرة
- عدّل بحرية لاستكشاف السلوك
- للمشاريع الكبيرة، انظر الدروس المخصصة
📝 تمارين
- اختر أي مثال، عدّله، ووثّق السلوك الجديد في تعليق.
- ادمج مثالين (مثل: متغيرات + أحداث) في صفحة واحدة.
- أنشئ صفحة مثال خاصة بك تشرح مفهومًا تجده مربكًا.
