كيفية إضافة JavaScript إلى HTML (دليل المبتدئين 2025)

مقدمة

إذا كنت تبدأ لتوك في تطوير الويب، فأول ما تحتاج معرفته هو كيفية إضافة JavaScript إلى HTML. تضيف JavaScript التفاعل لصفحات الويب—تمكّنك من التعامل مع نقرات الأزرار، التحقق من صحة النماذج، أو صنع سمات ديناميكية مثل الوضع الداكن. في هذا الدليل، سنستعرض أكثر ثلاث طرق شيوعًا لإضافة JavaScript إلى HTML:

مضمن في الـ <head>
مضمن في الـ <body>
كملف .js خارجي

سنناقش أيضًا الأداء وأفضل الممارسات وأمثلة مثل تبديل الوضع الداكن والتحقق من صحة النموذج.

أهم النقاط: كيفية إضافة JavaScript إلى HTML

أفضل ممارسة هي استخدام ملف .js خارجي للحصول على كود نظيف وتخزين مؤقت وإعادة استخدام.
تجنب وضع نصوص برمجية كبيرة في الـ <head> لأنها تعيق العرض.
استخدم defer (أو async إذا لم يكن الترتيب مهمًا) لتحميل النصوص البرمجية بكفاءة.
قم بتصحيح الأخطاء باستخدام وحدة تحكم المطور في متصفحك (F12).

للحصول على دروس متقدمة، راجع وثائق MDN Web حول JavaScript.

الطريقة 1: إضافة JavaScript إلى HTML باستخدام سكربت مضمن داخل `<head>`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>عنوان الصفحة</title>

  <script>
 let d = new Date();
 alert("تاريخ اليوم هو " + d);
  </script>
</head>
<body>
  <!-- محتوى الصفحة -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>

  <script>
    let d = new Date();
    alert("Today's date is " + d);
  </script>
</head>
<body>
  <!-- page content -->
</body>
</html>

المزايا: يعمل مبكرًا.
العيوب: يعيق العرض وقد يفشل إذا حاول الوصول إلى عناصر لم يتم تحميلها بعد.

الطريقة 2: إضافة JavaScript إلى HTML بسكربت مضمن داخل `<body>`

<!DOCTYPE html
<html lang="en"
<head
  <meta charset="UTF-8"
  <meta name="viewport" content="width=device-width, initial-scale=1"
  <titleعنوان الصفحة</title
</head
<body
  <!-- محتوى الصفحة --

  <script
  let d = new Date();
  document.body.innerHTML = "<h1>تاريخ اليوم هو " + d + "</h1>";
  </script
</body
</html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  <!-- page content -->

  <script>
    let d = new Date();
    document.body.innerHTML = "<h1>Today's date is " + d + "</h1>";
  </script>
</body>
</html>

أفضل لأن المحتوى يتم تحميله أولاً، ولكنه لا يزال غير مناسب للتخزين المؤقت.

الطريقة 3: إضافة JavaScript إلى HTML عبر ملف خارجي (موصى بها)

هيكل المشروع:

project/
├── css/
│ └── style.css
├── js/
│ └── script.js
└── index.html

project/
├── css/
│   └── style.css
├── js/
│   └── script.js
└── index.html

script.js

let d = new Date();
document.body.innerHTML = "h1تاريخ اليوم هو " + d + "/h1";

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>";

style.css

body {
 background-color: #0080ff;
}
h1 {
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: #0080ff;
}
h1 {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

index.html

<!DOCTYPE html
<html lang="en"
<head
  <meta charset="UTF-8"
  <meta name="viewport" content="width=device-width, initial-scale=1"
  <titleعنوان الصفحة</title
  <link rel="stylesheet" href="css/style.css"
</head
<body
  <script src="js/script.js" defer</script
</body
</html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script src="js/script.js" defer></script>
</body>
</html>

النصوص البرمجية الخارجية قابلة للصيانة وإعادة الاستخدام ويتم تخزينها مؤقتًا بواسطة المتصفح. تعرف على المزيد حول فوائد الأداء في مقال مطوري Google هذا.

أمثلة من العالم الحقيقي

تبديل الوضع الداكن

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
 document.body.classList.toggle('dark-mode');
});

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

مع زر في HTML:

<button id="theme-toggle"تبديل الوضع الداكن</button

<button id="theme-toggle">Toggle Dark Mode</button>

وقاعدة CSS:

.dark-mode {
 background-color: #222;
 color: #eee;
}

.dark-mode {
  background-color: #222;
  color: #eee;
}

التحقق الأساسي من صحة النموذج

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

contactForm.addEventListener('submit', function(event) {
 if (!emailInput.value.includes('@')) {
 event.preventDefault();
 errorMessage.textContent = 'الرجاء إدخال عنوان بريد إلكتروني صالح.';
 } else {
 errorMessage.textContent = '';
 }
});

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

contactForm.addEventListener('submit', function(event) {
  if (!emailInput.value.includes('@')) {
    event.preventDefault();
    errorMessage.textContent = 'Please enter a valid email address.';
  } else {
    errorMessage.textContent = '';
  }
});

أفضل الممارسات

فضل ملفات .js خارجية مع defer.
ضع النصوص البرمجية بالقرب من نهاية الـ <body>.
اكتب وظائف واضحة وقابلة لإعادة الاستخدام.
استخدم console.log() لتصحيح الأخطاء.
اعتمد على أدوات المطور في المتصفح لاستكشاف الأخطاء وإصلاحها.

الخاتمة

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

استكشف المزيد من رؤى التطوير على https://khaledshs.com/blog/.

اكتب تعليق

كيفية إضافة JavaScript إلى HTML: دليل المبتدئين