تدريب 3

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

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

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

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

📝 ملخص الصفحة

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

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

مربع التنبيه (Alert Box): عنصر في 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 الأساسي

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

```

نقاط مهمة

التمرين يطلب إضافة كود JavaScript إلى ملف HTML موجود.
يجب أن يعرض الكود المضافة مربع تنبيه (Alert Box) عند زيارة الصفحة.
النص المطلوب عرضه داخل مربع التنبيه هو: "انتبه! معلومات الصفحة قديمة".
ملف HTML الأساسي المقدم يحتوي على هيكل صفحة ويب بسيط (DOCTYPE, html, head, body) وعنوان رئيسي.

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

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

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

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

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

نوع: METADATA

298

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

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

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

298

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

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

سؤال 3: أضف مقطع برمجي جافا سكربت إلى ملف HTML التالي، وذلك لعرض مربع تنبيه لزائري الصفحة الإلكترونية. > يجب أن يحتوي مربع التنبيه على الرسالة "انتبه! معلومات الصفحة قديمة."

الإجابة: <script>alert("انتبه! معلومات الصفحة قديمة");</script>

خطوات الحل:

**الشرح:** لنفهم هذا السؤال. المطلوب هو إضافة مقطع برمجي بلغة JavaScript إلى ملف HTML. وظيفة هذا المقطع البرمجي هي تنفيذ أمر معين عند تحميل الصفحة. الفكرة هنا هي استخدام أمر `alert()` في JavaScript. هذا الأمر مسؤول عن إنشاء نافذة صغيرة (مربع تنبيه) تظهر للمستخدم تحتوي على رسالة نصية. النص المطلوب عرضه داخل هذا المربع هو: "انتبه! معلومات الصفحة قديمة.". لإضافة كود JavaScript إلى ملف HTML، نستخدم الوسم `<script>`. نضع الكود البرمجي بين وسم الفتح `<script>` ووسم الإغلاق `</script>`. إذن، سنقوم بكتابة الأمر `alert()` وداخل الأقواس نضع النص المطلوب بين علامتي اقتباس. يجب أن ننتبه إلى أن النص يحتوي على فقرة (سطر جديد) في المنتصف، لذلك نستخدم الرمز `\n` داخل النص لتمثيل الانتقال إلى سطر جديد. لذلك الإجابة هي: **`<script>alert("انتبه! معلومات\nالصفحة قديمة");</script>`**

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

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

ما الوسم المستخدم في HTML لإضافة كود JavaScript إلى صفحة ويب؟

أ) وسم <style>
ب) وسم <script>
ج) وسم <code>
د) وسم <js>

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

الإجابة: وسم <script>

الشرح: يُستخدم الوسم <script> في HTML لتحديد كود JavaScript. يُكتب الكود البرمجي بين وسم الفتح <script> ووسم الإغلاق </script>. هذا الوسم هو الطريقة القياسية لإضافة سلوك تفاعلي إلى صفحات الويب.

تلميح: يستخدم هذا الوسم لتضمين أو كتابة كود برمجي داخل صفحة HTML.

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

ما الوظيفة الأساسية للأمر `alert()` في لغة JavaScript؟

أ) تغيير لون خلفية الصفحة.
ب) إخفاء عنصر معين في الصفحة.
ج) عرض نافذة تنبيه تحتوي على رسالة نصية للمستخدم.
د) إعادة تحميل الصفحة تلقائيًا.

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

الإجابة: عرض نافذة تنبيه تحتوي على رسالة نصية للمستخدم.

الشرح: تُستخدم الدالة `alert()` في JavaScript لعرض نافذة حوار (مربع تنبيه) تحتوي على رسالة نصية محددة. تظهر هذه النافذة للمستخدم وتتطلب منه النقر على زر 'موافق' للمتابعة. تُستخدم عادةً لعرض تحذيرات أو معلومات مهمة.

تلميح: هذا الأمر يوقف تنفيذ البرنامج مؤقتًا وينشئ نافذة صغيرة.

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

أين يُوضع عادةً الوسم `<script>` الذي يحتوي على كود `alert()` ليتم تنفيذه بمجرد تحميل الصفحة؟

أ) فقط داخل قسم `<title>`.
ب) فقط خارج وسوم `<html>`.
ج) في نهاية قسم `<body>` أو داخل قسم `<head>`.
د) فقط داخل وسوم `<meta>`.

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

الإجابة: في نهاية قسم `<body>` أو داخل قسم `<head>`.

الشرح: يمكن وضع وسوم `<script>` في قسم `<head>` أو في نهاية قسم `<body>` في مستند HTML. وضعه في نهاية `<body>` (قبل `</body>`) يُعد أفضل ممارسة شائعة لأنه يضمن تحميل جميع عناصر الصفحة أولاً قبل تنفيذ السكريبت، مما يحسن أداء التحميل. ومع ذلك، وضعه في `<head>` صحيح أيضًا من الناحية التركيبية.

تلميح: يمكن وضعه في أكثر من مكان، لكن يجب أن يكون ضمن هيكل HTML الصحيح.

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

أي من مقاطع الكود التالية يضيف بشكل صحيح مربع تنبيه يحتوي على الرسالة 'انتبه! معلومات الصفحة قديمة' إلى صفحة HTML؟

أ) <js>alert('انتبه! معلومات الصفحة قديمة')</js>
ب) <script>alert('انتبه! معلومات الصفحة قديمة');</script>
ج) <alert>انتبه! معلومات الصفحة قديمة</alert>
د) <script>showAlert('انتبه! معلومات الصفحة قديمة');</script>

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

الإجابة: <script>alert('انتبه! معلومات الصفحة قديمة');</script>

الشرح: لإضافة مربع تنبيه باستخدام JavaScript، يجب وضع الكود داخل وسمي `<script>` و `</script>`. داخل الوسم، نستدعي الدالة `alert()` ونمرر النص المطلوب بين علامتي اقتباس داخل الأقواس. النص في هذا المثال هو 'انتبه! معلومات الصفحة قديمة'.

تلميح: تأكد من استخدام الوسم الصحيح للغة JavaScript واستخدام الأقواس وعلامات الاقتباس بشكل صحيح مع الدالة `alert()`.

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