كيف نكتب JavaScript داخل صفحة HTML؟ - JavaScript من الصفر إلى الاحتراف

في هذا الدرس ستتعلم أين تكتب JavaScript وكيف تربطها مع HTML بالطريقة الصحيحة

لماذا نحتاج كتابة JavaScript داخل HTML؟

عندما نكتب HTML فقط، فإن الصفحة تكون ثابتة. لكن JavaScript تسمح لنا بأن نجعل الصفحة تتفاعل مع المستخدم.

الضغط على زر
إدخال نص
تغيير محتوى الصفحة
إظهار أو إخفاء عناصر

كل هذا لا يمكن تنفيذه باستخدام HTML و CSS فقط.

الطريقة الأولى: كتابة JavaScript داخل HTML

يمكنك كتابة JavaScript مباشرة داخل صفحة HTML باستخدام وسم:

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

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

أين نضع وسم <script>؟

داخل <head> ❌

غير مفضل للمبتدئ لأن JavaScript قد تعمل قبل تحميل الصفحة.

قبل <body/> ✅

أفضل مكان قبل إغلاق وسم body لأن الصفحة تكون قد تم تحميلها بالكامل.

مثال كامل لصفحة HTML مع JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>مثال JavaScript</title>
</head>

<body>

<button onclick="alert('تم الضغط!')">
  اضغط هنا
</button>

</body>
</html>

لاحظ أن JavaScript هنا تتفاعل مباشرة مع المستخدم عند الضغط.

الطريقة الأفضل: ملف JavaScript خارجي

في المشاريع الحقيقية لا نكتب JavaScript داخل HTML مباشرة، بل نضعها في ملف مستقل مثل:

script.js

ثم نربطه بالصفحة:

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

هذا يجعل الكود:

منظم
سهل التعديل
احترافي

أخطاء شائعة يجب تجنبها

نسيان وسم <script>
كتابة JavaScript داخل CSS
وضع الكود في أعلى الصفحة بدون سبب
نسخ كود بدون فهم

ماذا بعد هذا الدرس؟

الدرس القادم: المتغيرات وأنواع البيانات 🎯

سنبدأ البرمجة الحقيقية ونتعلم كيف نخزن البيانات ونتعامل معها.