تدريب 5 - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

الدرس: تدريب 5

📚 معلومات الصفحة

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 تدريبات HTML و JavaScript

المفاهيم الأساسية

لا توجد مصطلحات جديدة محددة في هذه الصفحة.

خريطة المفاهيم

```markmap

الفصل الخامس: لغة جافا سكريبت

طرق استدعاء الدالة sayHello

الطرق الصحيحة

  • sayHello();

طرق خاطئة

  • call sayHello();
  • call function sayHello();
  • function sayHello();

أخطاء التنفيذ

خطأ في التحويل البرمجي (Compile Error)

خطأ في وقت التشغيل (Runtime Error)

تغيير محتوى HTML

الدالة الصحيحة

  • document.getElementById("id").innerHTML = "نص جديد";

ناتج تنفيذ مقاطع برمجية

مثال 1: نطاق المتغير var

  • var a = 5; داخل if
  • document.write(a); خارج if
  • الناتج: 5

مثال 2: التعليقات في الكود

  • //document.write("مرحباً");
  • الناتج: لا تتم طباعة أي شيء

تدريب 3: إضافة JavaScript إلى HTML

المطلوب

  • إضافة مقطع برمجي JavaScript إلى ملف HTML

الهدف

  • عرض مربع تنبيه لزائري الصفحة

محتوى التنبيه

  • "انتبه! معلومات الصفحة قديمة"

ملف HTML الأساسي

  • يحتوي على هيكل صفحة عادية
  • عنوان: "تبدأ بطولة كرة القدم المدرسية في الأول من نوفمبر"

تدريب 4: إضافة JavaScript لعرض التاريخ والوقت

المطلوب

  • إضافة مقطع برمجي JavaScript إلى ملف HTML

الهدف

  • عرض التاريخ والوقت

ملف HTML الأساسي

  • يحتوي على عنوان: "احصل على معلومات حول التاريخ والوقت."

تدريب 5: إضافة JavaScript لعرض التاريخ والوقت (استكمال)

المطلوب

  • إضافة مقطع برمجي جافا سكريبت إلى ملف HTML التالي

الهدف

  • عرض التاريخ والوقت بالضغط على زر

ملف HTML الأساسي

  • يحتوي على meta tags و title
  • يحتوي على عنوان: "احصل على معلومات حول التاريخ والوقت"

تدريب 6: جعل شريط التنقل متجاوباً مع الهواتف

المطلوب

  • فتح مجلد Adventure_Site
  • إكمال المخطط

الهدف

  • إضافة أيقونة القائمة لتناسب متصفح الهاتف الذكي

طريقة التنفيذ

  • إضافة برنامج نصي (script) في HTML
  • إجراء التغييرات المناسبة على استعلام الوسائط (media query) في ملف CSS

```

نقاط مهمة

  • الصفحة تحتوي على تدريبين عمليين (5 و 6).
  • التدريب 5 هو استكمال لتدريب سابق (4) ويتطلب إضافة كود JavaScript لزر يعرض التاريخ والوقت.
  • التدريب 6 يركز على جعل موقع ويب (Adventure_Site) متجاوباً مع الهواتف، من خلال إضافة قائمة هامبرغر وتعديل CSS.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

تدريب 5

نوع: محتوى تعليمي

أضف مقطع برمجي جافا سكربت إلى ملف HTML التالي، وذلك لعرض التاريخ والوقت بالضغط على الزر.

نوع: محتوى تعليمي

<!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Example</title> </head> <body> <h1>احصل على معلومات حول التاريخ والوقت</h1>

نوع: محتوى تعليمي

</body> </html>

تدريب 6

نوع: محتوى تعليمي

افتح مجلد Adventure_Site ثم أكمل المخطط على النحو التالي:

نوع: محتوى تعليمي

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

نوع: METADATA

وزارة التعليم Ministry of Education 2025 - 1447

نوع: METADATA

300

📄 النص الكامل للصفحة

--- SECTION: تدريب 5 --- أضف مقطع برمجي جافا سكربت إلى ملف HTML التالي، وذلك لعرض التاريخ والوقت بالضغط على الزر. <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Example</title> </head> <body> <h1>احصل على معلومات حول التاريخ والوقت</h1> </body> </html> --- SECTION: تدريب 6 --- افتح مجلد Adventure_Site ثم أكمل المخطط على النحو التالي: لقد أنشأت سابقاً شريط تنقل، ويمكنك الآن إضافة أيقونة القائمة لتتناسب مع متصفح الهاتف الذكي. ولتحقيق ذلك، أضف برنامجاً نصيًا في HTML ثم اجر التغييرات المناسبة على استعلام الوسائط على ملف CSS الخاص بك. وزارة التعليم Ministry of Education 2025 - 1447 300

✅ حلول أسئلة الكتاب الرسمية

عدد الأسئلة: 2

سؤال تدريب 5: أضف مقطع برمجي جافا سكربيت إلى ملف HTML التالي، وذلك لعرض التاريخ والوقت بالضغط على الزر. <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example</title> </head> <body> <h1>احصل على معلومات حول التاريخ والوقت</h1> </body> </html>

الإجابة: س5: أضف زرًا للنقر وعنصرًا لعرض النتيجة. أضف JS لجلب التاريخ والوقت الحاليين عند النقر وتحديث عنصر العرض.

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. المطلوب هو إضافة مقطع برمجي بلغة JavaScript إلى صفحة HTML موجودة. الفكرة هي أن يكون هناك زر، وعندما يضغط المستخدم عليه، يظهر التاريخ والوقت الحاليان. نلاحظ أن ملف HTML الموجود يحتوي على هيكل أساسي (DOCTYPE, html, head, body) وعنوان رئيسي فقط داخل body. المطلوب هو إكمال هذا الهيكل. لتحقيق ذلك، نحتاج إلى ثلاث مكونات رئيسية في HTML: 1. **زر (Button)**: سيتم النقر عليه لتنفيذ الأمر. 2. **عنصر لعرض النتيجة (مثل paragraph <p> أو div)**: سيظهر فيه التاريخ والوقت بعد النقر. 3. **مقطع JavaScript**: سيكتب داخل وسم <script>، وسيحتوي على دالة (function) تقوم بجلب التاريخ والوقت الحاليين من النظام عند النقر على الزر، ثم تحديث محتوى عنصر العرض بهذه المعلومات. إذن، الإجابة هي: **أضف زرًا للنقر وعنصرًا لعرض النتيجة، ثم أضف كود JavaScript لجلب التاريخ والوقت الحاليين عند النقر وتحديث عنصر العرض.**

سؤال تدريب 6: افتح مجلد Adventure_Site ثم أكمل المخطط على النحو التالي: > افتح ملف HTML الرئيس وأنشئ رسالة للترحيب بالزائرين. > لقد أنشأت سابقًا شريط تنقل، ويمكنك الآن إضافة أيقونة القائمة لتتناسب مع متصفح الهاتف الذكي. ولتحقيق ذلك، أضف برنامجًا نصيًا في HTML ثم أجر التغييرات المناسبة على استعلام الوسائط في ملف CSS الخاص بك. > احفظ التغييرات.

الإجابة: س6: أضف رسالة ترحيب وأيقونة القائمة. أضف سكربت لتبديل القائمة عند النقر. عدّل استعلام الوسائط لإخفاء الروابط في الجوال وإظهارها عند التفعيل.

خطوات الحل:

  1. **الشرح:** الفكرة هنا هي العمل على موقع ويب (Adventure_Site) وتحسينه ليكون متجاوبًا مع الهواتف الذكية. المطلوب هو إكمال عدة مهام. أولاً، افتح ملف HTML الرئيسي للموقع وأضف رسالة ترحيب للزائرين. هذا يعني كتابة نص ترحيبي مناسب داخل body، ربما باستخدام عناصر مثل <h2> أو <p>. ثانيًا، لديك شريط تنقل (Navigation Bar) تم إنشاؤه مسبقًا. الآن، لتجربة المستخدم على الهواتف الذكية، المطلوب هو إضافة أيقونة القائمة (Menu Icon)، غالبًا ما تسمى "هامبرغر مينو" (ثلاثة خطوط أفقية). هذه الأيقونة ستظهر على الهواتف بدلاً من عرض روابط التنقل كلها مباشرة، لتوفير المساحة. لتنفيذ ذلك، تحتاج إلى: 1. **إضافة برنامج نصي (سكربت) في HTML**: هذا سيكون كود JavaScript (غالبًا داخل وسم <script>) يسمح بتبديل (إظهار/إخفاء) قائمة التنقل عند النقر على الأيقونة. 2. **إجراء التغييرات المناسبة على استعلام الوسائط (Media Query) في ملف CSS**: استعلام الوسائط هو قاعدة في CSS تسمح بتطبيق أنماط مختلفة بناءً على حجم الشاشة. هنا، يجب تعديله بحيث على شاشات الهواتف الصغيرة (مثل الجوال)، يتم إخفاء روابط التنقل الأصلية وإظهار الأيقونة فقط. ثم، عند النقر على الأيقونة (وتفعيل السكربت)، تظهر الروابط. أخيرًا، احفظ جميع التغييرات التي أجريتها على ملفات HTML و CSS. إذن، الإجابة هي: **أضف رسالة ترحيب وأيقونة القائمة، ثم أضف سكربت لتبديل القائمة عند النقر، وعدّل استعلام الوسائط في CSS لإخفاء الروابط في الجوال وإظهارها عند التفعيل.**

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 3 بطاقة لهذه الصفحة

ما هي المكونات الأساسية الثلاثة التي يجب إضافتها إلى صفحة HTML لتنفيذ وظيفة عرض التاريخ والوقت عند النقر على زر باستخدام JavaScript؟

  • أ) رابط (Link)، وصورة (Image)، ومقطع CSS داخل وسم <style>.
  • ب) زر (Button)، وعنصر لعرض النتيجة (مثل <p> أو <div>)، ومقطع برمجي JavaScript داخل وسم <script>.
  • ج) قائمة منسدلة (Select)، وحقل نصي (Input)، ومكتبة jQuery.
  • د) فيديو (Video)، وصوت (Audio)، ومكتبة Bootstrap.

الإجابة الصحيحة: b

الإجابة: زر (Button)، وعنصر لعرض النتيجة (مثل <p> أو <div>)، ومقطع برمجي JavaScript داخل وسم <script>.

الشرح: 1. زر (Button) لتنفيذ الأمر عند النقر عليه. 2. عنصر لعرض النتيجة (مثل <p>) ليظهر فيه التاريخ والوقت. 3. مقطع JavaScript داخل <script> يحتوي على دالة لجلب التاريخ والوقت وتحديث العنصر.

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

التصنيف: مفهوم جوهري | المستوى: سهل

ما هو الهدف الرئيسي من إضافة أيقونة القائمة (Menu Icon) إلى شريط التنقل في موقع ويب مصمم ليكون متجاوباً؟

  • أ) زيادة سرعة تحميل الموقع على جميع الأجهزة.
  • ب) تحسين تجربة المستخدم على الهواتف الذكية عن طريق توفير المساحة، حيث تظهر الأيقونة بدلاً من عرض جميع روابط التنقل مباشرة.
  • ج) إضافة تأثيرات جمالية فقط دون أي فائدة وظيفية.
  • د) استبدال شريط التنقل التقليدي تماماً حتى على أجهزة الكمبيوتر.

الإجابة الصحيحة: b

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

الشرح: على شاشات الهواتف الذكية الصغيرة، عرض جميع روابط التنقل يستهلك مساحة كبيرة. إضافة أيقونة القائمة (مثل الهامبرغر) يوفر المساحة ويسمح بإظهار الروابط عند النقر عليها فقط.

تلميح: فكر في سبب اختلاف طريقة عرض القوائم على الشاشات الكبيرة مقارنة بالشاشات الصغيرة.

التصنيف: مفهوم جوهري | المستوى: متوسط

ما هي الخطوتان الأساسيتان في CSS و JavaScript لتنفيذ أيقونة قائمة متجاوبة تعمل عند النقر؟

  • أ) إضافة تأثيرات حركية (Animations) في CSS، واستخدام jQuery لتحميل المحتوى ديناميكياً.
  • ب) تعديل استعلام الوسائط (Media Query) في CSS لإخفاء الروابط في الجوال، وإضافة سكربت JavaScript لتبديل (إظهار/إخفاء) القائمة عند النقر على الأيقونة.
  • ج) تغيير ألوان الروابط في CSS عند التمرير، واستخدام JavaScript لإضافة صوت عند النقر.
  • د) تعيين حجم خط ثابت في CSS لجميع الأجهزة، واستخدام JavaScript لإعادة توجيه المستخدم إلى صفحة أخرى.

الإجابة الصحيحة: b

الإجابة: تعديل استعلام الوسائط (Media Query) في CSS لإخفاء الروابط في الجوال، وإضافة سكربت JavaScript لتبديل (إظهار/إخفاء) القائمة عند النقر على الأيقونة.

الشرح: 1. في CSS: استخدام Media Query لتطبيق أنماط على شاشات صغيرة تخفي روابط التنقل وتظهر الأيقونة. 2. في JavaScript: كتابة كود يستمع لحدث النقر على الأيقونة ويغير حالة عرض/إخفاء القائمة.

تلميح: فكر في الأدوار المنفصلة لكل من CSS (التنسيق الشرطي) وJavaScript (السلوك التفاعلي).

التصنيف: صيغة/خطوات | المستوى: صعب