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

404 Not Found

nginx

مخرجات جافاسكريبت

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

console.log() — أفضل صديق للمطور

يُخرج console.log() المحتوى إلى وحدة تحكم المتصفح (F12 → Console). لا يمكن للمستخدمين رؤيته، لكن المطورين لا يمكنهم الاستغناء عنه للتصحيح.

هذه هي طريقة المخرجات التي ستستخدمها أكثر بكثير — حتى الآن. سواء كنت تتتبع خطأًا أو تتحقق من المنطق، console.log() هو أداتك المفضلة.

alert() — استخدمها بحذر

يفتح alert() حوارًا من multimodal يجب على المستخدم إغلاقه بالنقر على "موافق". يوقف سير عمل المستخدم ولا يُستخدم تقريبًا في الإنتاج — يظهر بشكل أساسي أثناء مرحلة التعلم.

انتبه: لا تضع alert() أبدًا داخل حلقة أثناء التصحيح، وإلا سيتعين عليك النقر على "موافق" عشرات المرات لإغلاق الحوارات — لا تسألني كيف أعرف.

document.write() — للاختبار فقط

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

innerHTML — تحديث محتوى الصفحة

innerHTML هي الطريقة القياسية "لإخراج إلى الصفحة" — حدد عنصرًا وغيّر محتواه HTML. هذا هو أساس التلاعب بـ DOM، الذي سنغطيه بالتفصيل لاحقًا.

مثال: مخرجات console.log() إلى وحدة التحكم

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مخرجات JS - console.log</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    .tip { background: #e3f2fd; padding: 16px; border-radius: 8px; display: inline-block; color: #1565C0; }
    #output { margin-top: 20px; font-size: 18px; color: #333; white-space: pre-line; }
    button { margin-top: 16px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; }
    button:hover { background: #1976D2; }
  </style>
</head>
<body>
  <p class="tip">📌 اضغط F12 لفتح وحدة التحكم وعرض مخرجات console.log</p>
  <button id="logBtn">تسجيل في وحدة التحكم</button>
  <p id="output"></p>
  <script>
    document.getElementById("logBtn").onclick = function() {
      console.log("مرحبا، وحدة التحكم!");
      console.log("الوقت الحالي: " + new Date().toLocaleString());
      console.log("1 + 2 =", 1 + 2);
      var outputEl = document.getElementById("output");
      outputEl.textContent = "تم تسجيل 3 رسائل في وحدة التحكم — اضغط F12 للعرض!";
      outputEl.style.color = "#4CAF50";
    };
  </script>
</body>
</html>
▶ جرّب الكود

مثال: مخرجات حوار alert()

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مخرجات JS - alert</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    .warn { background: #fff3e0; padding: 14px; border-radius: 8px; display: inline-block; color: #E65100; margin-bottom: 20px; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 6px; }
    #alertBtn { background: #FF9800; }
    #safeAlertBtn { background: #4CAF50; }
  </style>
</head>
<body>
  <p class="warn">⚠️ alert() يوقف واجهة المستخدم — تجنب استخدامه في المشاريع الحقيقية</p>
  <br>
  <button id="alertBtn">عرض alert</button>
  <button id="safeAlertBtn">رسالة داخل الصفحة (موصى بها)</button>
  <p id="msg" style="margin-top:20px; font-size:20px; color:#4CAF50;"></p>
  <script>
    document.getElementById("alertBtn").onclick = function() {
      alert("هذا حوار alert! يجب النقر على موافق للمتابعة.");
    };
    document.getElementById("safeAlertBtn").onclick = function() {
      document.getElementById("msg").textContent = "هذه رسالة داخل الصفحة — بدون انقطاع، تجربة مستخدم أفضل بكثير!";
    };
  </script>
</body>
</html>
▶ جرّب الكود

مثال: innerHTML لتحديث محتوى الصفحة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مخرجات JS - innerHTML</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
    #content { min-height: 80px; padding: 20px; border: 2px dashed #ccc; border-radius: 8px; font-size: 18px; color: #666; }
    button { margin: 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #textBtn { background: #9C27B0; }
    #htmlBtn { background: #e91e63; }
    #clearBtn { background: #999; }
  </style>
</head>
<body>
  <h2>مخرجات innerHTML</h2>
  <div id="content">ستظهر مخرجات JS هنا</div>
  <button id="textBtn">إخراج نص</button>
  <button id="htmlBtn">إخراج HTML</button>
  <button id="clearBtn">مسح</button>
  <script>
    var contentEl = document.getElementById("content");
    document.getElementById("textBtn").onclick = function() {
      contentEl.innerHTML = "هذا نص عادي";
      contentEl.style.color = "#9C27B0";
    };
    document.getElementById("htmlBtn").onclick = function() {
      contentEl.innerHTML = "<strong style='color:#e91e63;'>نص عريض</strong> و<em>نص مائل</em> — innerHTML يمكنه تفسير علامات HTML";
      contentEl.style.color = "#333";
    };
    document.getElementById("clearBtn").onclick = function() {
      contentEl.innerHTML = "";
      contentEl.style.color = "#666";
    };
  </script>
</body>
</html>
▶ جرّب الكود

مثال: document.write() ومخاطره

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>مخرجات JS - document.write</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
    .danger { background: #ffebee; padding: 14px; border-radius: 8px; color: #c62828; margin-bottom: 20px; }
    button { margin: 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #safeBtn { background: #4CAF50; }
    #dangerBtn { background: #f44336; }
  </style>
</head>
<body>
  <p class="danger">⚠️ استدعاء document.write() بعد تحميل الصفحة سيستبدل الصفحة بأكملها! انقر على الزر الأحمر لرؤية ذلك (حدّث للإعادة)</p>
  <button id="safeBtn">إخراج آمن (innerHTML)</button>
  <button id="dangerBtn">إخراج خطير (document.write)</button>
  <p id="safeOutput" style="margin-top:20px; font-size:18px; color:#4CAF50;"></p>
  <script>
    document.getElementById("safeBtn").onclick = function() {
      document.getElementById("safeOutput").textContent = "إخراج عبر innerHTML — الصفحة تبقى سليمة!";
    };
    document.getElementById("dangerBtn").onclick = function() {
      document.write("<h1 style='text-align:center; color:red; margin-top:100px;'>تم استبدال الصفحة بأكملها!</h1><p style='text-align:center;'>هذا هو خطر document.write() — حدّث للإعادة</p>");
    };
  </script>
</body>
</html>
▶ جرّب الكود

📖 ملخص

  1. console.log() هي أداة التحيح الأساسية — تُخرج إلى وحدة التحكم حيث لا يمكن للمستخدمين رؤيتها
  2. alert() يوقف واجهة المستخدم — استخدمه فقط أثناء التعلم، أبدًا في الإنتاج
  3. document.write() يستبدل الصفحة بأكملها إذا استُدعي بعد التحميل — مناسب فقط للتجارب المبكرة
  4. innerHTML هي الطريقة القياسية لتحديث محتوى الصفحة ويمكنها تفسير علامات HTML
  5. في التطوير الحقيقي، 99% من الوقت ستستخدم console.log() للتصحيح وinnerHTML لتحديث الصفحة
  6. لكل طريقة مكانها — اختر المناسب وستعمل بذكاء أكبر

❓ أسئلة شائعة

س هل يمكن للمستخدمين رؤية مخرجات console.log()؟
ج لا — تُخرج إلى وحدة تحكم أدوات المطور. فكر فيها كلوحة خلف لوحة القيادة: غير مرئية للسائق، لكنها ضرورية للميكانيكي. لذلك لا تضع معلومات مهمة فقط في console.log — لن يراها المستخدمون.
س ما الفرق بين innerHTML وtextContent؟
ج innerHTML تفسر علامات HTML، بينما textContent تعامل كل شيء كنص عادي. على سبيل المثال، تعيين <strong>عريض</strong> — innerHTML يعرض النص عريضًا، لكن يعرض أحرف العلامة الخام. إذا كنت فقط تريد تغيير النص، textContent أكثر أمانًا — لن تنفذ السكربتات المحقونة عن طريق الخطأ.
س لماذا لا يوصى بـ alert()؟
ج لأنه يجمد الصفحة — يجب على المستخدم إغلاق الحوار قبل القيام بأي شيء آخر. تخيل ملء نموذج والحصول على نافذة منبثقة بعد كل حقل — ستكون التجربة فظيعة.

📝 تمارين

  1. مبتدئ: أنشئ صفحة بها زر، عند النقر عليه، يستخدم console.log() لإخراج اسمك وعمرك.
  2. متوسط: أنشئ صفحة تستخدم innerHTML لإخراج قائمة غير مرتبة (3 عناصر على الأقل)، كل عنصر هو لغة برمجة تعلمتها.
  3. تحدي: أنشئ صفحة "مقارنة طرق الإخراج" بأربعة أزرار، كل واحد يقابل إحدى طرق الإخراج الأربع. عند النقر، اعرض وصفًا لتلك الطريقة في نفس المنطقة على الصفحة (تخطي alert و document.write — simuleهما بـ innerHTML).
100%