EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

البدء مع جافاسكريبت

إضافة جافاسكريبت إلى صفحة الويب أسهل مما تthink — هناك ثلاث طرق للقيام بذلك، من السريعة والقذرة إلى الجاهزة للإنتاج.

ثلاث طرق لإضافة جافاسكريبت

1. مضمنة (سمة onclick)

اكتب كود JS مباشرة في سمة حدث عنصر HTML، مثل onclick="...".

هذه هي أبسط طريقة، لكن لا تستخدمها في المشاريع الحقيقية — خلط HTML وJS معًا يجعل الصيانة كابوسًا.

2. داخلية (علامة <script>)

أدخل علامة <script> في ملف HTML واكتب كود JS بداخلها. تعمل بشكل جيد للصفحات الصغيرة وهي الطريقة الأكثر شيوعًا أثناء التعلم والاختبار.

يمكن وضع علامة <script> في <head> أو <body>، لكن يُنصح بوضعها مباشرة قبل </body> حتى لا تمنع عرض الصفحة.

3. خارجية (ملف .js)

اكتب كود JS في ملف .js منفصل وأضفه بـ <script src="xxx.js"></script>. هذه هي الممارسة القياسية للمشاريع الحقيقية — إنها تفصل بين المسؤوليات، وتمكن من إعادة الاستخدام، وتتيح للمتصفح تخزين الملف مؤقتًا لتحميل أسرع.

مثال: جافاسكريبت مضمنة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مقدمة JS - مضمنة</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    #msg { font-size: 22px; color: #333; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; background: #FF9800; color: #fff; cursor: pointer; }
    button:hover { background: #F57C00; }
  </style>
</head>
<body>
  <p id="msg">انقر على الزر أدناه</p>
  <button onclick="document.getElementById('msg').textContent='تم تنفيذ JS المضمنة!'; document.getElementById('msg').style.color='#FF9800';">انقر هنا</button>
  <p style="margin-top:30px; color:#999; font-size:14px;">👆 هذا الكود مكتوب مباشرة في سمة onclick</p>
</body>
</html>
▶ جرّب الكود

مثال: جافاسكريبت داخلية

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مقدمة JS - داخلية</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    .box { display: inline-block; width: 150px; height: 150px; background: #9C27B0; border-radius: 12px; transition: all 0.4s; line-height: 150px; color: #fff; font-size: 20px; }
    .box.round { border-radius: 50%; }
    button { display: inline-block; margin: 20px 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #toggleBtn { background: #9C27B0; }
    #resetBtn { background: #999; }
  </style>
</head>
<body>
  <div class="box" id="shapeBox">مربع</div>
  <br>
  <button id="toggleBtn">تبديل الشكل</button>
  <button id="resetBtn">إعادة تعيين</button>

  <script>
    var box = document.getElementById("shapeBox");
    var isRound = false;
    document.getElementById("toggleBtn").onclick = function() {
      isRound = !isRound;
      if (isRound) {
        box.classList.add("round");
        box.textContent = "دائرة";
      } else {
        box.classList.remove("round");
        box.textContent = "مربع";
      }
    };
    document.getElementById("resetBtn").onclick = function() {
      isRound = false;
      box.classList.remove("round");
      box.textContent = "مربع";
    };
  </script>
</body>
</html>
▶ جرّب الكود

مثال: جافاسكريبت خارجية

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مقدمة JS - خارجية</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    #counter { font-size: 48px; font-weight: bold; color: #2196F3; }
    button { padding: 10px 24px; font-size: 18px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 4px; }
    #addBtn { background: #4CAF50; }
    #subBtn { background: #f44336; }
    #resetCount { background: #999; }
  </style>
</head>
<body>
  <h2>العداد</h2>
  <p id="counter">0</p>
  <button id="addBtn">+1</button>
  <button id="subBtn">-1</button>
  <button id="resetCount">إعادة تعيين</button>

  <!-- في مشروع حقيقي، يجب حفظ كود JS أدناه في ملف counter.js منفصل -->
  <!-- <script src="counter.js"></script> -->
  <!-- لأغراض العرض، نستخدم سكربت داخلي هنا -->
  <script>
    var count = 0;
    var counterEl = document.getElementById("counter");
    document.getElementById("addBtn").onclick = function() {
      count++;
      counterEl.textContent = count;
    };
    document.getElementById("subBtn").onclick = function() {
      count--;
      counterEl.textContent = count;
    };
    document.getElementById("resetCount").onclick = function() {
      count = 0;
      counterEl.textContent = count;
    };
  </script>
</body>
</html>
▶ جرّب الكود

إضافات VS Code الموصى بها لـ JS

إذا كنت تستخدم VS Code (موصى بشدة)، هاتان الإضافتان هما كل ما تحتاجه:

تشغيل JS في Chrome DevTools

اضغط F12 لفتح DevTools، انتقل إلى لوحة Console، ويمكنك كتابة كود JS مباشرة والضغط على Enter لتشغيله. هذه أسرع طريقة للتجربة — اختبر أي مقتطف كود دون إنشاء ملف HTML.

نصيحة: اضغط على مفتاح ↑ في Console لاستدعاء أمرك السابق، مما يوفر عليك إعادة الكتابة.

سمات defer وasync لعلامات script

عندما تكون علامة <script> في <head>، يتوقف المتصفح عن تحليل HTML لتنزيل وتنفيذ JS أولاً — مما قد يجعل الصفحة تبدو متوقفة. تحل سمات defer وasync هذه المشكلة:

السلوك السمة
تنزيل وتنفيذ فوري، يمنع تحليل HTML بدون
تنزيل في الخلفية، تنفيذ بعد تحليل HTML بالكامل (بالترتيب) defer
تنزيل في الخلفية، تنفيذ فور التنزيل (الترتيب غير مضمون) async

أفضل ممارسة: إضافة defer لملفات JS الخارجية هي الخيار الأكثر أمانًا — <script src="app.js" defer></script>.

📖 ملخص

  1. ثلاث طرق لإضافة JS: مضمنة onclick (غير موصى بها)، داخلية <script> (ممتازة للتعلم)، خارجية .js (معيار الصناعة)
  2. ضع علامات <script> مباشرة قبل </body> لتجنب منع عرض الصفحة
  3. استخدم سمة defer على ملفات JS الخارجية — لا منع وترتيب تنفيذ مضمون
  4. وحدة تحكم F12 في Chrome هي أسرع ساحة تجربة لـ JS
  5. VS Code + Live Server + ESLint هي أدوات الواجهة الأمامية القياسية
  6. JS المضمنة مريحة لكنها تربط HTML وJS معًا بشكل وثيق — عوّد نفسك على الفصل مبكرًا

❓ أسئلة شائعة

س ما الفرق بين وضع <script> في head في أسفل body؟
ج في head، يتوقف المتصفح لتنزيل وتنفيذ السكربت — لا تزال الصفحة فارغة في تلك اللحظة. في أسفل body، يتم عرض الصفحة أولاً حتى لا يواجه المستخدمون "تجمدًا". إنها مثل تقديم الطعام قبل إلقاء النكات — لا تترك ضيوفك جياعًا.
س هل يجب استخدام defer أم async؟
ج استخدم defer في معظم الحالات. يضمن تنفيذ السكربتات بالترتيب وبعد تحليل HTML بالكامل فقط، حتى تكون عناصر DOM متاحة دائمًا. async أفضل لسكربتات التحليل المستقلة (مثل Google Analytics) التي لا تعتمد على سكربتات أخرى أو DOM.
س كم عدد علامات <script> التي يمكن أن تحتويها الصفحة؟
ج بقدر ما تريد — لا يوجد حد. لكن في الممارسة العملية، حاول الدمج في عدد قليل من الملفات الخارجية لتقليل طلبات HTTP.

📝 تمارين

  1. مبتدئ: أنشئ صفحة HTML بها سكربت داخلي يظهر تنبيهًا يقول "مرحبًا بك في جافاسكريبت!" عند تحميل الصفحة (تلميح: استخدم alert()).
  2. متوسط: أنشئ صفحة HTML وملف main.js منفصل. أضف ملف JS بـ <script src="main.js" defer></script> وقم بتنفيذ زر يغير لون خلفية الصفحة.
  3. تحدي: أنشئ صفحة بها ثلاثة أزرار، كل واحد يمثل إحدى طرق الإضافة الثلاث (مضمنة، داخلية، خارجية). عند النقر على أي زر، اعرض "تم تحميل JS عبر طريقة XXX" على الصفحة، باستخدام ألوان مختلفة للتمييز بينها.
100%