ملخص البرمجة وعلوم الحاسب أولى ثانوي، الترم الأول البرمجة بالذكاء الاصطناعي

أهداف التعلم

1. تعريف الطالب بمفهوم الذكاء الاصطناعي التوليدي (Generative AI) وآلية عمله.
2. توضيح مفهوم الـ Prompt وكيفية صياغته للحصول على مخرجات دقيقة.
3. التعرف على ظاهرة Hallucination في نماذج الذكاء الاصطناعي وأثرها على موثوقية النتائج.
4. إتقان أساسيات بناء صفحات الويب باستخدام HTML وCSS وJavaScript.
5. تطبيق مهارات البرمجة التفاعلية عبر دمج HTML مع CSS لتصميم الشكل، ومع JavaScript لإضافة التفاعل.
6. تطوير قدرة الطالب على تقييم مخرجات الذكاء الاصطناعي ومقارنة النتائج مع مصادر موثوقة.

المصطلحات والتعريفات

الذكاء الاصطناعي التوليدي واستخدامه في البرمجة

يُعَدُّ Generative AI أداة قوية تُساعد الإنسان على إنجاز مهام فكرية متعددة، من توليد أفكار جديدة إلى كتابة أكواد برمجية. يعتمد النموذج على إحصاءات احتمالية لاختيار الكلمة التالية في سلسلة نصية، ما يجعله قادرًا على إنتاج جملٍ تبدو طبيعية.

عند توجيه Prompt واضح ومحدَّد، يمكن للنموذج إنشاء محتوىٍ متنوع؛ فمثلاً طلب كتابة قصة عن "قطة ساحرة" ينتج نصًا سرديًا، بينما طلب تعديل القصة لإضافة "كلب رفيق" يُعيد صياغة النص مع الحفاظ على السياق. يمكن أيضًا طلب توليد أسئلة اختبارية، مثل:

1. “Give me 5 quiz questions about Egypt.”
2. “Make them True or False questions.”
3. “Display the score after I answer.”

هذه السلسلة من الأوامر تُظهر قدرة الذكاء الاصطناعي على تعديل الصياغة، تغيير عدد الأسئلة، وتغيير نوعية الإجابات. ومع ذلك، لا يمتلك النموذج معرفة حقيقية؛ فهو يختار الكلمات بناءً على الاحتمالات وليس على حقائق ثابتة. لذا قد ينتج Hallucination، أي معلومات غير صحيحة، مثل إجابة خاطئة عن سؤال تاريخي. من الضروري دائمًا مراجعة المخرجات عبر مصادر موثوقة (مثل محركات البحث أو المعلمين).

نصائح عملية:

• صِغ الـ Prompt بوضوح وتجنَّب الغموض.
• اختبر النموذج بأكثر من سؤال لتقييم دقته.
• لا تعتمد على إجابة واحدة كمرجع نهائي؛ تحقق من صحتها.

بناء صفحات الويب باستخدام HTML, CSS, JavaScript

تُعَدُّ تقنيات HTML, CSS, وJavaScript الأساس المتكامل لتصميم وتطوير صفحات ويب ثابتة وتفاعلية.

• HTML يحدد الهيكل العام للصفحة؛ يكتب العناصر داخل وسوم مثل <h1>, <p>, <div>.
• CSS يضيف المظهر الجمالي؛ يُعرَّف القواعد داخل ملف منفصل (مثلاً style.css) أو داخل وسم <style>. يمكن استهداف العناصر عبر class أو id لتطبيق ألوان، خطوط، أو مسافات.
• JavaScript يضيف التفاعل؛ من خلال استدعاء العناصر باستخدام document.getElementById("...") ثم تعديل خصائصها (مثل textContent أو style.fontSize).

مثال عملي لتغيير النص عبر زر

<p id="name">Ichiro</p>
<button id="btn">Change Text</button>
<script>
  const p = document.getElementById("name");
  const btn = document.getElementById("btn");
  btn.onclick = () => { p.textContent = "Ohtani"; };
</script>

عند الضغط على الزر، يتغيّر النص داخل الفقرة من "Ichiro" إلى "Ohtani". يمكن توسيع الفكرة لتغيير اللون أو الحجم باستخدام style.color أو style.fontSize.

جدول مقارنة بين HTML, CSS, JavaScript

تطبيقات وأمثلة محلولة

مثال 1: إنشاء اختبار تفاعلي باستخدام Generative AI

1. الخطوة الأولى: توجيه Prompt إلى Copilot:

   Give me 5 quiz questions about Egypt.
   

2. الخطوة الثانية: تعديل النمط:

   Make them True or False questions.
   

3. الخطوة الثالثة: طلب إظهار النتيجة بعد الإجابة:

   Display the score after I answer.
   

4. التنفيذ: يُعيد Copilot مجموعة أسئلة، يُحوِّلها إلى صيغة صواب/خطأ، ويضيف كودًا بسيطًا لحساب النقاط وعرض النتيجة.
5. التحقق: يُجرى اختبارًا يدويًا على الأسئلة، ثم يُقارن الإجابات مع مصادر موثوقة (مثل كتب التاريخ أو الإنترنت) للتأكد من صحة المحتوى.

مثال 2: صفحة ويب بسيطة تُغيّر النص واللون بالحركة

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p id="msg">Welcome</p>
  <button id="colorBtn">Change Color</button>
  <button id="sizeBtn">Increase Size</button>
  <script src="script.js"></script>
</body>
</html>

CSS (style.css)

#msg {
  color: black;
  font-size: 20px;
}

JavaScript (script.js)

const msg = document.getElementById("msg");
const colorBtn = document.getElementById("colorBtn");
const sizeBtn = document.getElementById("sizeBtn");

let isRed = false;
colorBtn.onclick = () => {
  msg.style.color = isRed ? "black" : "red";
  isRed = !isRed;
};

sizeBtn.onclick = () => {
  const currentSize = parseInt(window.getComputedStyle(msg).fontSize);
  msg.style.fontSize = (currentSize + 10) + "px";
};

النتيجة: عند الضغط على زر "Change Color" يتبدل لون النص بين الأحمر والأسود، وعند الضغط على زر "Increase Size" يزداد حجم الخط بمقدار 10 بكسل في كل مرة.

تنبيهات الامتحان (أخطاء شائعة)

1. الثقة الكاملة في مخرجات الذكاء الاصطناعي – قد ينتج النموذج معلومات خاطئة (Hallucination). يجب دائمًا التحقق من صحة الإجابة.
2. نسيان ربط ملفات CSS أو JavaScript – إذا لم تُدرج الوسوم <link> أو <script> بشكل صحيح، لن تُطبق الأنماط أو التفاعلات.
3. استخدام نفس الـ id لأكثر من عنصر – الـ id يجب أن يكون فريدًا؛ تكراره يسبب تعارضًا في استدعاءات JavaScript.
4. إهمال إغلاق وسوم HTML – عدم إغلاق <p> أو <div> قد يؤدي إلى عرض غير متوقع أو أخطاء في التنسيق.

قائمة المراجعة

• [ ] تعريف Generative AI وآلية اختيار الكلمات.
• [ ] فهم مفهوم Prompt وكيفية صياغته بوضوح.
• [ ] معرفة ظاهرة Hallucination وأثرها على موثوقية النتائج.
• [ ] القدرة على طلب أسئلة اختبارية من الذكاء الاصطناعي وتعديل صيغتها.
• [ ] كتابة صفحة ويب أساسية باستخدام HTML (وسوم <head>, <body>, <h1>, <p>).
• [ ] إنشاء ملف CSS وربطه بالصفحة لتغيير اللون والخط.
• [ ] تعريف class وid واستخدامهما في CSS وJavaScript.
• [ ] استدعاء عنصر عبر document.getElementById وتعديل خاصية textContent.
• [ ] تعديل خصائص CSS عبر JavaScript (style.color, style.fontSize).
• [ ] كتابة دالة onclick لتفعيل التفاعل عند الضغط على زر.
• [ ] اختبار الصفحة في متصفح للتأكد من ظهور النص وتغييره حسب الأزرار.
• [ ] مراجعة جميع المخرجات مع مصادر موثوقة (مواقع تعليمية أو معلم).
• [ ] التأكد من عدم وجود أخطاء إملائية أو نحوية في الـ Prompt لتفادي إجابات غير دقيقة.

بالتوفيق في امتحاناتك!