لتطبيق معا

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

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

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

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

📝 ملخص الصفحة

📚 تطبيق معا - تحليل مقطع برمجي

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

وظيفة JavaScript (Function): كتلة من التعليمات البرمجية مصممة لأداء مهمة معينة، يتم تنفيذها عند استدعائها (مثل النقر على زر).

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

```markmap

تطبيق معا: تحليل مقطع برمجي

تدريب 1: تحليل كود HTML مع JavaScript

السؤال: "اكتب ما يفعله المقطع البرمجي التالي"

المقطع البرمجي

#### هيكل HTML

عنوان الصفحة: "javascript functions"
تنسيق CSS: مركزة النص، لون العنوان أخضر

#### محتوى الصفحة

عنوان رئيسي: "مدرستنا ستشارك فيها."
زر: "للحصول على معلومات، اضغط هنا."

#### وظيفة JavaScript (myFunction)

تُستدعى عند النقر على الزر (onclick)
الإجراءات:

- كتابة نص في الصفحة: "سيتم تجهيز الفرق في المعمل كل يوم اثنين واربعاء الساعة 14:00"

- إظهار نافذة تنبيه: "ستشارك مدرستنا في بطولة الروبوتات التعليمية التي تبدأ في الأول من نوفمبر. اضغط على موافق."

```

نقاط مهمة

المقطع البرمجي يدمج بين HTML و CSS و JavaScript في صفحة ويب واحدة.
الوظيفة `myFunction()` تُنفَّذ عند تفاعل المستخدم (النقر على الزر).
الوظيفة تقوم بإجراءين: كتابة نص مباشر في الصفحة (`document.write`) وعرض رسالة تنبيه للمستخدم (`window.alert`).
الغرض من الصفحة هو الإعلان عن مشاركة المدرسة في بطولة الروبوتات التعليمية وتقديم معلومات عن تجهيز الفرق.

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

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

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

لتطبيق معا

تدريب 1

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

تدريب 1

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

اكتب ما يفعله المقطع البرمجي التالي:

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

<!DOCTYPE html>
<html>
<head>
<title>javascript functions</title>
<style>
 h1 {
 color: green;
 }
 body {
 text-align: center;
 }
</style>
</head>
<body>
<h1>مدرستنا ستشارك فيها.</h1>
<button onclick="myFunction()">للحصول على معلومات، اضغط هنا.</button>
<script>
function myFunction() {
 document.write("سيتم تجهيز الفرق في المعمل كل يوم اثنين واربعاء الساعة 14:00");
 window.alert("ستشارك مدرستنا في بطولة الروبوتات التعليمية التي تبدأ في "الأول من نوفمبر. اضغط على موافق.");
}
</script>
</body>
</html>

نوع: NON_EDUCATIONAL

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

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

--- SECTION: لتطبيق معا ---
لتطبيق معا

--- SECTION: تدريب 1 ---
تدريب 1

اكتب ما يفعله المقطع البرمجي التالي:

<!DOCTYPE html>
<html>
<head>
<title>javascript functions</title>
<style>
 h1 {
 color: green;
 }
 body {
 text-align: center;
 }
</style>
</head>
<body>
<h1>مدرستنا ستشارك فيها.</h1>
<button onclick="myFunction()">للحصول على معلومات، اضغط هنا.</button>
<script>
function myFunction() {
 document.write("سيتم تجهيز الفرق في المعمل كل يوم اثنين واربعاء الساعة 14:00");
 window.alert("ستشارك مدرستنا في بطولة الروبوتات التعليمية التي تبدأ في "الأول من نوفمبر. اضغط على موافق.");
}
</script>
</body>
</html>

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

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

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

سؤال تدريب 1: اكتب ما يفعله المقطع البرمجي التالي: <!DOCTYPE html> <html> <head> <title>javascript functions</title> <style> h1 { color: green; } body { text-align: center; } </style> </head> <body> <h1>مدرستنا ستشارك فيها.</h1> <button onclick="myFunction()">للحصول على معلومات، اضغط هنا.</button> <script> function myFunction() { document.write("سيتم تجهيز الفرق في المعمل كل يوم اثنين وأربعاء الساعة 14:00."); } window.alert("ستشارك مدرستنا في بطولة الروبوتات التعليمية التي تبدأ في " + "الأول من نوفمبر. اضغط على موافق."); </script> </body> </html>

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

خطوات الحل:

**الشرح:** لنفهم هذا المقطع البرمجي. هذا كود HTML مع CSS وJavaScript. أولاً، عند فتح صفحة الويب هذه، سيعرض المتصفح محتوى HTML. نلاحظ وجود قسم `<script>` يحتوي على تعليمات JavaScript. الفكرة هنا هي أن التعليمات البرمجية تقوم بأمرين رئيسيين: 1. عند تحميل الصفحة مباشرة، ينفذ المتصفح الأمر `window.alert(...)`. هذا الأمر يظهر للمستخدم فوراً نافذة منبثقة (Alert Box) تحتوي على الرسالة النصية المحددة، والتي تخبر عن مشاركة المدرسة في البطولة وتاريخ بدايتها. 2. يوجد في الصفحة زر (Button) مكتوب عليه "للحصول على معلومات، اضغط هنا.". هذا الزر مرتبط بحدث `onclick`، مما يعني أنه عند النقر عليه، سيتم استدعاء الدالة المسماة `myFunction()`. دالة `myFunction()` تحتوي على أمر `document.write(...)`. عندما تُستدعى هذه الدالة (أي عند النقر على الزر)، فإن هذا الأمر سيكتب النص المحدد داخل صفحة الويب نفسها، ليحل محل أو يضاف إلى المحتوى الحالي. بالإضافة إلى ذلك، يحدد قسم `<style>` في رأس الصفحة (head) شكل العرض: جعل نص العنوان `<h1>` باللون الأخضر وجعل محتوى الجسم `<body>` محاذياً إلى الوسط. إذن، باختصار، ما يفعله المقطع البرمجي هو: **إنشاء صفحة ويب تعرض عنواناً أخضر في المنتصف، وعند فتحها تظهر نافذة تنبيه فورية برسالة عن البطولة، وعند النقر على الزر الموجود في الصفحة، تُكتب رسالة تفصيلية عن مواعيد التجهيز داخل نفس الصفحة.**

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

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

ما هو الغرض الرئيسي من استخدام الدالة `window.alert()` في JavaScript ضمن سياق صفحة ويب؟

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

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

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

الشرح: 1. `window.alert()` هي دالة مضمنة في JavaScript. 2. وظيفتها الأساسية هي عرض رسالة نصية في مربع حوار (Dialog Box) للمستخدم. 3. تظهر هذه النافذة بشكل فوري عند تنفيذ الأمر. 4. توقف تنفيذ البرنامج النصي حتى ينقر المستخدم على 'موافق' لإغلاقها. 5. تُستخدم عادةً لإيصال معلومات مهمة أو تحذيرات فورية.

تلميح: تذكر أن هذه الدالة توقف تنفيذ البرنامج مؤقتًا حتى يتفاعل المستخدم معها.

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

ما الذي يحدث عند النقر على الزر الذي يحتوي على السمة `onclick="myFunction()"` في مثال الكود المقدم؟

أ) يتم إعادة تحميل صفحة الويب بالكامل.
ب) يتم استدعاء الدالة المسماة `myFunction()` والتي تقوم بكتابة نص جديد داخل صفحة الويب باستخدام `document.write()`.
ج) يتم إخفاء الزر من على الصفحة نهائيًا.
د) يتم تغيير عنوان صفحة الويب (title) تلقائيًا.

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

الإجابة: يتم استدعاء الدالة المسماة `myFunction()` والتي تقوم بكتابة نص جديد داخل صفحة الويب باستخدام `document.write()`.

الشرح: 1. السمة `onclick` هي معالج حدث (Event Handler) في HTML. 2. عند النقر على الزر، يتم تشغيل الكود JavaScript المحدد لها. 3. في هذا المثال، الكود هو استدعاء الدالة `myFunction()`. 4. تحتوي دالة `myFunction()` على أمر `document.write()`. 5. يؤدي تنفيذ `document.write()` إلى كتابة النص المحدد داخل جسم صفحة الويب (body).

تلميح: ركز على الحدث (onclick) واسم الدالة التي يتم استدعاؤها (`myFunction`).

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

ما الفرق الرئيسي في السلوك بين استخدام `document.write()` داخل دالة مرتبطة بحدث (مثل onclick) واستخدامها مباشرة في النص البرمجي عند تحميل الصفحة؟

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

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

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

الشرح: 1. `document.write()` تكتب HTML مباشرة في تدفق المستند. 2. **عند التحميل المباشر:** إذا استُخدمت أثناء تحميل الصفحة (في `<script>` في `<body>`)، تُضاف المحتويات إلى الصفحة. 3. **بعد اكتمال التحميل:** إذا استُخدمت بعد تحميل الصفحة (مثلًا داخل حدث)، فإنها تمسح كامل محتوى HTML الحالي وتستبدله. 4. **داخل حدث:** في المثال، `document.write()` داخل `myFunction()` التي تُستدعى عند النقر، لذا ستستبدل محتوى الصفحة الحالي بالنص الجديد عند النقر فقط.

تلميح: فكر في توقيت التنفيذ وتأثيره على محتوى الصفحة الحالي.

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