سؤال السؤال الحادي عشر: صل المقطع البرمجي في العمود الأول بالنتيجة المقابلة له في العمود الثاني. 1) @media screen and (max-width: 700px) { img { width: 50%; height: auto; } } 2) @media screen and (max-width: 600px) { body { background-color: lightblue; } } 3) <script> window.alert("انتبه!") </script> 4) <p id="greeting_id">مرحباً</p> <script> document.getElementById("greeting_id").innerHTML = "انتبه!"; </script> 5) <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6) <script> document.write("مرحباً") </script>

الإجابة: س 11 (1): يغير عرض الصورة إلى 50% عندما يكون عرض الجهاز 700 بكسل أو أقل. س 11 (2): يغير لون الخلفية إلى اللون الأزرق الفاتح عندما يكون عرض الجهاز 600 بكسل أو أقل. س 11 (3): يخرج مربع تنبيه يحتوي على رسالة "انتبه!". س 11 :(4) المُخرج : انتبه! س 11 (5): يضبط الصفحة الإلكترونية المعروضة حسب عرض الجهاز. س 11 :(6) المُخرج: مرحبًا

خطوات الحل:

1. **الشرح:** هذا السؤال يتطلب ربط مقاطع برمجية من لغة HTML أو JavaScript أو CSS مع وصف لما تفعله. الفكرة هي فهم وظيفة كل مقطع برمجي. لنبدأ بتحليل كل مقطع: **المقطع 1:** هذا مقطع CSS يستخدم قاعدة `@media`، وهي خاصية تُستخدم في التصميم المتجاوب (Responsive Design). الشرط `(max-width: 700px)` يعني أن القاعدة داخل الأقواس ستُنفذ فقط عندما يكون عرض الشاشة 700 بكسل أو أقل. القاعدة داخل الأقواس `img { width: 50%; height: auto; }` تُغير عرض الصور (`img`) إلى 50% من عرض العنصر الحاوي لها، وتجعل الارتفاع يتناسب تلقائياً للحفاظ على نسبة الأبعاد. إذن، وظيفته هي تغيير عرض الصورة إلى 50% عندما يكون عرض الجهاز 700 بكسل أو أقل. **المقطع 2:** هذا أيضاً مقطع CSS يستخدم قاعدة `@media`. الشرط `(max-width: 600px)` يعني أن القاعدة ستُنفذ عندما يكون عرض الشاشة 600 بكسل أو أقل. القاعدة داخل الأقواس `body { background-color: lightblue; }` تُغير لون خلفية الصفحة (`body`) إلى اللون الأزرق الفاتح (`lightblue`). إذن، وظيفته هي تغيير لون الخلفية إلى الأزرق الفاتح عندما يكون عرض الجهاز 600 بكسل أو أقل. **المقطع 3:** هذا مقطع JavaScript داخل وسم `<script>`. الأمر `window.alert("انتبه!")` يُنشئ نافذة منبثقة (مربع حوار) تحتوي على الرسالة "انتبه!". هذا المربع يتطلب من المستخدم النقر على "موافق" للمتابعة. إذن، وظيفته هي إخراج مربع تنبيه يحتوي على رسالة "انتبه!". **المقطع 4:** هذا مقطع HTML مع JavaScript. أولاً، هناك عنصر `<p>` (فقرة) مع معرف `id="greeting_id"` ونصه "مرحباً". ثم، مقطع JavaScript يستخدم `document.getElementById("greeting_id")` للعثور على هذا العنصر، و`.innerHTML = "انتبه!"` لتغيير محتواه النصي من "مرحباً" إلى "انتبه!". لذلك، النتيجة النهائية المعروضة على الصفحة ستكون "انتبه!". **المقطع 5:** هذا وسم `<meta>` في HTML. السمة `name="viewport"` تُستخدم للتحكم في كيفية عرض الصفحة على الأجهزة المحمولة. القيمة `content="width=device-width, initial-scale=1.0"` تعني ضبط عرض الصفحة ليكون مساوياً لعرض الجهاز (`device-width`)، وضبط مستوى التكبير الابتدائي إلى 1.0 (بدون تكبير أو تصغير). هذا يجعل الصفحة تتكيف مع عرض الجهاز، وهو أساسي في التصميم المتجاوب. إذن، وظيفته هي ضبط الصفحة الإلكترونية المعروضة حسب عرض الجهاز. **المقطع 6:** هذا مقطع JavaScript داخل وسم `<script>`. الأمر `document.write("مرحباً")` يكتب النص "مرحباً" مباشرة في مستند HTML عند تحميل الصفحة. لذلك، النتيجة المعروضة على الصفحة ستكون "مرحباً". وبعد فهم وظيفة كل مقطع، يمكن ربطها بالنتائج المطابقة في العمود الثاني بناءً على الوصف الدقيق لكل وظيفة.

ما وظيفة وسم `<meta name="viewport" content="width=device-width, initial-scale=1.0">` في HTML؟

• أ) يغير لون خلفية الصفحة إلى اللون الأزرق الفاتح.
• ب) يضبط عرض الصفحة الإلكترونية ليتناسب مع عرض الجهاز المستخدم.
• ج) يضيف مربع تنبيه عند فتح الصفحة.
• د) يغير حجم جميع الصور في الصفحة إلى 50%.

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

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

الشرح: 1. الوسم `<meta>` يستخدم لتوفير معلومات وصفية عن صفحة الويب. 2. السمة `name="viewport"` تخبر المتصفح أن هذا الوسم خاص بإعدادات نافذة العرض. 3. القيمة `content="width=device-width, initial-scale=1.0"` تعني: - `width=device-width`: اجعل عرض الصفحة مساوياً لعرض شاشة الجهاز. - `initial-scale=1.0`: اضبط مستوى التكبير الابتدائي إلى 100% (بدون تكبير أو تصغير). 4. النتيجة: الصفحة تتكيف وتُعرض بشكل مناسب حسب حجم الجهاز، وهو أساسي في التصميم المتجاوب (Responsive Design).

تلميح: هذا الوسم مهم لجعل الموقع يبدو جيداً على الهواتف المحمولة.

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

ما الفرق الأساسي بين استخدام `window.alert()` و `document.write()` في JavaScript؟

• أ) كلاهما يكتب محتوى في الصفحة، لكن `alert` يستخدم للرسائل الطويلة.
• ب) `window.alert()` يُظهر نافذة منبثقة (مربع حوار) للمستخدم، بينما `document.write()` يكتب محتوى مباشرة في مستند HTML.
• ج) `document.write()` يستخدم فقط مع المتصفحات القديمة، بينما `alert` حديث.
• د) لا يوجد فرق، كلاهما يؤدي نفس الوظيفة.

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

الإجابة: `window.alert()` يُظهر نافذة منبثقة (مربع حوار) للمستخدم، بينما `document.write()` يكتب محتوى مباشرة في مستند HTML.

الشرح: 1. `window.alert("رسالة")`: - الوظيفة: تنشئ نافذة منبثقة (pop-up) تحتوي على رسالة. - التفاعل: يتوقف تنفيذ البرنامج النصي حتى ينقر المستخدم على "موافق". - الاستخدام: لإظهار رسائل تنبيه أو معلومات مهمة للمستخدم. 2. `document.write("محتوى")`: - الوظيفة: تكتب النص أو HTML مباشرة في مكان تنفيذ السكريبت داخل مستند HTML. - التفاعل: لا يتطلب أي إجراء من المستخدم، المحتوى يظهر كجزء من الصفحة. - الاستخدام: لتوليد محتوى ديناميكي في الصفحة أثناء التحميل. 3. الفرق الرئيسي: `alert` هو حوار مع المستخدم خارج الصفحة، بينما `write` هو إضافة محتوى داخل الصفحة نفسها.

تلميح: فكر في كيفية تفاعل المستخدم مع كل منهما وأين يظهر المحتوى.

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

ما الغرض من استخدام قاعدة `@media` في CSS كما في المثال `@media screen and (max-width: 600px) { body { background-color: lightblue; } }`؟

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

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

الإجابة: تطبيق أنماط CSS معينة فقط عند استيفاء شرط معين متعلق بخصائص الجهاز، مثل أن يكون عرض الشاشة 600 بكسل أو أقل.

الشرح: 1. قاعدة `@media` في CSS تُستخدم لإنشاء استعلامات وسائط (Media Queries). 2. وظيفتها: تطبيق مجموعة من قواعد CSS فقط إذا تحقق شرط معين. 3. في المثال: - `screen`: نوع الوسيط (الشاشة). - `(max-width: 600px)`: الشرط (أقصى عرض للشاشة هو 600 بكسل). - `{ body { background-color: lightblue; } }`: القاعدة التي ستُطبق (تغيير لون خلفية الصفحة). 4. التفسير: عندما يكون عرض الشاشة 600 بكسل أو أقل، سيتم تغيير لون خلفية الصفحة إلى أزرق فاتح. 5. الهدف: السماح بتصميم متجاوب (Responsive Design) حيث تتغير أنماط الموقع بناءً على حجم الجهاز.

تلميح: تذكر أن CSS تعني Cascading Style Sheets، وهذه القاعدة تتحكم في متى تُطبق الأنماط.

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