مرحبًا بك في الدرس الخامس من سلسلة تعلم HTML وCSS وJavaScript! 🎉

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

1. مراجعة سريعة

في الدروس السابقة، تعلمنا:

• كيفية استخدام HTML لإنشاء هيكل الصفحة.
• تنسيق الصفحات باستخدام CSS.
• تقنيات متقدمة مثل Flexbox وGrid للتصميم المرن.

الآن، سننتقل إلى JavaScript لإضافة التفاعلية!

2. مقدمة إلى JavaScript

ما هو JavaScript؟

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

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

كيف تعمل JavaScript؟

تُكتب JavaScript عادةً داخل ملف HTML باستخدام <script>، أو في ملف خارجي يتم ربطه بالصفحة.

3. كتابة أول كود JavaScript

أ. كتابة الكود مباشرة في HTML:

<script>
alert("مرحبًا بالعالم!");
</script>

ب. ربط ملف JavaScript خارجي:

<script src="script.js"></script>

4. إضافة تفاعلية باستخدام JavaScript

أ. التعامل مع الأحداث (Events):

يمكنك استخدام JavaScript للاستجابة لأحداث مثل النقر (click) أو الكتابة (input).

مثال: زر "إظهار/إخفاء" نص:

<button onclick="toggleText()">إظهار/إخفاء النص</button>
<p id="text" style="display: none;">هذا النص سيظهر ويختفي!</p>


<script>
function toggleText() {
var text = document.getElementById("text");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>

ب. تعديل الأنماط ديناميكيًا:

يمكنك استخدام JavaScript لتغيير أنماط CSS ديناميكيًا.

مثال: تغيير لون الخلفية عند النقر:

<button onclick="changeColor()">غير اللون</button>


<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>

5. إنشاء شريط تمرير ديناميكي

أ. إنشاء شريط التمرير:

<div>
<label for="slider">اختر قيمة:</label>
<input type="range" id="slider" min="0" max="100" value="50">
<p>القيمة الحالية: <span id="value">50</span></p>
</div>


<script>
const slider = document.getElementById("slider");
const value = document.getElementById("value");


slider.addEventListener("input", function() {
value.textContent = slider.value;
});
</script>

6. الرسوم المتحركة باستخدام JavaScript

أ. تحريك العناصر:

يمكنك استخدام JavaScript لتحريك العناصر باستخدام خاصية style.

مثال: تحريك صندوق أفقيًا:

<div id="box" style="width: 100px; height: 100px; background-color: lightgreen; position: relative;"></div>
<button onclick="moveBox()">حرك الصندوق</button>

<script>
function moveBox() {
const box = document.getElementById("box");
let pos = 0;
const interval = setInterval(() => {
if (pos >= 300) {
clearInterval(interval);
} else {
pos += 5;
box.style.left = pos + "px";
}
}, 10);
}
</script>

7. تمرين عملي

حاول إنشاء صفحة HTML تحتوي على العناصر التالية:

1. زر "إظهار/إخفاء" نص :

   • عند النقر على الزر، يظهر أو يختفي نص.

2. شريط تمرير ديناميكي :

   • يعرض القيمة الحالية لشريط التمرير.

3. صندوق متحرك :

   • عند النقر على زر، يتحرك الصندوق أفقيًا.

4. تغيير لون الخلفية :

   • عند النقر على زر، يتغير لون خلفية الصفحة.

8. ما التالي؟

في الدرس القادم، سنتعلم:

• كيفية استخدام AJAX لتحميل البيانات دون تحديث الصفحة.
• التعامل مع APIs لجلب البيانات من الإنترنت.
• إنشاء تطبيقات ويب تفاعلية أكثر تعقيدًا.

📌 نصيحة: لا تتردد في تجربة الأكواد بنفسك وتعديلها لترى النتائج. الممارسة هي مفتاح الإتقان! 🚀