المخرجات Output

توليد المخرجات في لغة JavaScript

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

كتابة المخرجات في وحدة تحكم المتصفح Browser Console

يمكنك إخراج رسالة بسهولة أو كتابة البيانات في وحدة تحكم المتصفح باستخدام الدالة console.log(). هذه الدالة بسيطة لكنها قوية جدًا لتوليد مخرجات مفصلة. لنجرب ذلك:

مثال
تشغيل
  1. // طباعة رسالة في وحدة تحكم المتصفح
  2. console.log("Hello World!");
  4. // طباعة قيم المتغيرات
  5. var x = 10;
  6. var y = 20;
  7. var sum = x + y;
  8. console.log(sum); // 30
نصيحة:

للوصول إلى وحدة تحكم متصفح الويب ، اضغط أولاً على مفتاح F12 على لوحة المفاتيح لفتح أدوات المطور ، ثم انقر فوق علامة تبويب وحدة التحكم console .

عرض المخرجات في مربع حوار تنبيه Alert Dialog Boxes

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

مثال
تشغيل
  1. // عرض رسالة نصية بسيطة بشكل تنبيه
  2. alert("Hello World!");
  4. // عرض قيمة متغيرة في مربع حوار تنبيه
  5. var x = 10;
  6. var y = 20;
  7. var sum = x + y;
  8. alert(sum); // 30

عرض المخرجات في نافذة المتصفح

يمكننا استخدام الدالة document.write() لكتابة المحتوى في الصفحة الحالة فقط أثناء معالجة الصفحة من قبل المتصفح. كما في المثال التالي:

مثال
تشغيل
  1. // عرض رسالة نصية بسيطة في صفحة الويب
  2. document.write("Hello World!");
  4. // عرض قيمة المتغيرات في صفحة الويب
  5. var x = 10;
  6. var y = 20;
  7. var sum = x + y;
  8. document.write(sum); // 30

إذا استخدمنا الدالة document.write() بعد تحميل الصفحة ، فستستبدل كل المحتوى الموجود في تلك الصفحة. كما في المثال التالي:

مثال
تشغيل
  1. <h1>This is a heading</h1>
  2. <p>This is a paragraph of text.</p>
  3. <button type="button" onclick="document.write('Hello World!')">Click Me</button>

إدخال المخرجات داخل عنصر HTML

يمكننا أيضًا كتابة أو إدراج المخرجات داخل عنصر HTML باستخدام الخاصية innerHTML للعنصر. قبل كتابة المخرجات أولاً ، نحتاج إلى تحديد العنصر باستخدام طريقة مثل getElementById() ، كما هو موضح في المثال التالي:

مثال
تشغيل
  1. <p id="greet"></p>
  2. <p id="result"></p>
  3. <script>
  4. // كتابة سلسلة نصية داخل عنصر
  5. document.getElementById("greet").innerHTML = "Hello World!";
  7. //كتابة قيمة متغير داخل عنصر
  8. var x = 10;
  9. var y = 20;
  10. var sum = x + y;
  11. document.getElementById("greet").innerHTML = sum;
  12. </script>
« التالي السابق »