"}},{"@type":"Question","name":"لإضافة مقطع برمجي جافا سكربت إلى صفحة HTML لعرض التاريخ والوقت الحاليين، ما هي الخطوة الأولى التي يجب اتخاذها داخل وسم ؟","acceptedAnswer":{"@type":"Answer","text":"إضافة عنصر HTML (مثل فقرة

) مع معرّف (id) فريد للوصول إليه من الكود البرمجي."}},{"@type":"Question","name":"أي من مقاطع جافا سكربت التالية يقوم بشكل صحيح بإنشاء كائن يمثل التاريخ والوقت الحالي ثم عرضه بتنسيق عربي سعودي داخل عنصر HTML معرّفه 'dt'؟","acceptedAnswer":{"@type":"Answer","text":"const now = new Date(); document.getElementById('dt').textContent = now.toLocaleString('ar-SA');"}},{"@type":"Question","name":"ما الغرض الأساسي من استخدام الدالة toLocaleString('ar-SA') عند عرض التاريخ والوقت بلغة جافا سكربت في هذا السياق؟","acceptedAnswer":{"@type":"Answer","text":"تنسيق كائن التاريخ والوقت إلى سلسلة نصية (String) تتبع تنسيق اللغة والتقويم المحلي للمملكة العربية السعودية."}}]}

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

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

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

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

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

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

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

📝 ملخص الصفحة

📚 تدريب 4: إضافة 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 الأساسي

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

```

نقاط مهمة

  • هذا التدريب هو استمرار لسلسلة تمارين إضافة JavaScript إلى HTML.
  • المهمة هي كتابة كود JavaScript ليقوم بعرض التاريخ والوقت الحاليين.
  • يتم البدء من ملف HTML جاهز يحتوي على هيكل أساسي وعنوان رئيسي.

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

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

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

تدريب 4

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

أضف مقطع برمجي جافا سكربت إلى ملف 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>

نوع: METADATA

وزارة التعليم 299 2025 - 1447

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

تدريب 4 أضف مقطع برمجي جافا سكربت إلى ملف 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> وزارة التعليم 299 2025 - 1447

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

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

سؤال 4: تدريب 4 أضف مقطع برمجي جافا سكربت إلى ملف 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>

الإجابة: س4: <p id="dt"></p> <script> ()const now = new Date(); ;document.getElementById("dt").textContent = now.toLocaleString("ar-SA"); </script>

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. المطلوب هو إضافة مقطع برمجي بلغة JavaScript إلى صفحة HTML موجودة. وظيفة هذا المقطع هي عرض التاريخ والوقت الحاليين للمستخدم. الفكرة هنا هي أننا نحتاج إلى عنصر في صفحة HTML يمكن لبرنامج JavaScript الكتابة عليه. لذلك، نبدأ بإضافة فقرة فارغة داخل جسم الصفحة (body) ونعطيها معرّفاً (id) مثل "dt" حتى نتمكن من الوصول إليها من الكود البرمجي. بعد ذلك، نكتب مقطع البرنامج النصي (script). داخل هذا المقطع، نقوم أولاً بإنشاء كائن Date جديد يمثل اللحظة الحالية. ثم نستخدم خاصية toLocaleString مع تحديد اللغة العربية السعودية ("ar-SA") لتحويل هذا التاريخ والوقت إلى نص مناسب للعرض. أخيراً، نبحث عن العنصر الذي معرّفه "dt" في الصفحة ونضع النص الذي أنشأناه داخل محتواه النصي (textContent). إذن الإجابة هي: إضافة فقرة فارغة مع معرّف، ثم مقطع برمجي يقوم بإنشاء تاريخ جديد ويعرضه بتنسيق عربي داخل تلك الفقرة.

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

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

لإضافة مقطع برمجي جافا سكربت إلى صفحة HTML لعرض التاريخ والوقت الحاليين، ما هي الخطوة الأولى التي يجب اتخاذها داخل وسم <body>؟

  • أ) كتابة كود جافا سكربت مباشرة داخل وسم <h1>.
  • ب) إضافة عنصر HTML (مثل فقرة <p>) مع معرّف (id) فريد للوصول إليه من الكود البرمجي.
  • ج) تغيير ترميز الصفحة (charset) إلى UTF-16.
  • د) إضافة رابط (link) إلى ملف CSS خارجي.

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

الإجابة: إضافة عنصر HTML (مثل فقرة <p>) مع معرّف (id) فريد للوصول إليه من الكود البرمجي.

الشرح: 1. تحتاج صفحة HTML إلى عنصر (مثل <p>) لتعرض فيه النتيجة. 2. يجب إعطاء هذا العنصر معرّفاً (id) مثل 'dt'. 3. هذا المعرّف يسمح لجافا سكربت بتحديد العنصر وتعديل محتواه.

تلميح: فكر في كيفية توفير مكان في الصفحة يمكن للبرنامج النصي كتابة النتيجة فيه.

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

أي من مقاطع جافا سكربت التالية يقوم بشكل صحيح بإنشاء كائن يمثل التاريخ والوقت الحالي ثم عرضه بتنسيق عربي سعودي داخل عنصر HTML معرّفه 'dt'؟

  • أ) const now = Date(); document.querySelector('dt').innerHTML = now.toString();
  • ب) const now = new Date(); document.getElementById('dt').textContent = now.toLocaleString('ar-SA');
  • ج) var now = Date.now(); document.getElementById('dt').value = now.toLocaleString('ar');
  • د) let now = new Date(); document.getElementsByTagName('p')[0].innerText = now.getDate();

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

الإجابة: const now = new Date(); document.getElementById('dt').textContent = now.toLocaleString('ar-SA');

الشرح: 1. new Date() ينشئ كائنًا يمثل اللحظة الحالية. 2. toLocaleString('ar-SA') تحول التاريخ والوقت إلى نص بتنسيق اللغة العربية السعودية. 3. document.getElementById('dt').textContent تبحث عن العنصر ذي المعرّف 'dt' وتضع النص المُنسّق داخله.

تلميح: تذكر أن الدالة toLocaleString() تستخدم لتنسيق التاريخ والوقت حسب المنطقة، وأن textContent تستخدم لوضع النص داخل عنصر.

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

ما الغرض الأساسي من استخدام الدالة toLocaleString('ar-SA') عند عرض التاريخ والوقت بلغة جافا سكربت في هذا السياق؟

  • أ) تحويل النص العربي إلى ترميز UTF-8 لتجنب مشاكل العرض.
  • ب) تشفير البيانات لحماية معلومات الوقت من الوصول غير المصرح به.
  • ج) تنسيق كائن التاريخ والوقت إلى سلسلة نصية (String) تتبع تنسيق اللغة والتقويم المحلي للمملكة العربية السعودية.
  • د) جلب التاريخ والوقت من خادم خارجي بدلاً من جهاز المستخدم.

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

الإجابة: تنسيق كائن التاريخ والوقت إلى سلسلة نصية (String) تتبع تنسيق اللغة والتقويم المحلي للمملكة العربية السعودية.

الشرح: 1. كائن Date يحتوي على معلومات رقمية. 2. الدالة toLocaleString() تحول هذه المعلومات إلى نص. 3. المعامل 'ar-SA' يحدد أن التنسيق يجب أن يكون باللغة العربية وباستخدام التقويم الهجري السعودي، مما يجعله مناسبًا للمستخدم المحلي.

تلميح: فكر في كيفية جعل التاريخ والوقت مقروءًا ومألوفًا للمستخدمين في منطقة جغرافية محددة.

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