انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 03
دورة جافا سكريبت

إخراج البيانات في جافا سكريبتJavaScript Output

في هذا الدرس، ستتعلم طرق إخراج البيانات في JavaScript لعرض المحتوى داخل صفحة HTML بأربع طرق: window.alert لعرض رسائل تنبيهية، console.log لطباعة البيانات في console، document.write لكتابة المحتوى على الصفحة، وinnerHTML لتحديث عناصر HTML. كما سنتعرف على الطريقة الأكثر شيوعًا وأداة console في المتصفحات.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
13
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
19,103
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

JavaScript Output إخراج البيانات في جافا سكريبت

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


الدوال التي تُستخدم في طباعة البيانات بلغة جافا سكريبت هي:

  • [window.alert]: تُستخدم لعرض رسالة تنبيهية للمستخدم في نافذة منبثقة. هذه الطريقة تكون مفيدة لإظهار رسائل مهمة للمستخدم.

  • [console.log]: تُستخدم لعرض البيانات في وحدة التحكم (Console) الخاصة بالمطور. هذه الطريقة مفيدة أثناء عملية تصحيح الأخطاء.

  • [document.write]: تُستخدم لكتابة النصوص مباشرة على صفحة الويب. قد تكون هذه الطريقة غير مفضلة في التطبيقات الحديثة لأنها قد تؤدي إلى مسح المحتوى السابق على الصفحة.

  • [innerHTML]: تُستخدم لإضافة أو تعديل المحتوى داخل العناصر في صفحة الويب مثل النصوص أو العناصر الأخرى داخل الصفحة.

Printing data using the alert function in JavaScript طباعة البيانات باستخدام دالة alert في لغة جافا سكريبت

يتم استخدام دالة alert في JavaScript لعرض رسالة داخل صندوق يظهر فوق صفحة الويب. تُستخدم عادةً لإعطاء رسالة تنبيهية أو إعلامية للمستخدمين.

  • يتكون هذا الصندوق من رسالة نصية (والتي يمكن تخصيصها) بالإضافة إلى زر "موافق". عندما يظهر الصندوق، يظهر معه للمستخدم زر "موافق" ليضغط عليه بعد أن يقرأ الرسالة.

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

window alert

طباعة البيانات باستخدام دالة window.alert في لغة جافا سكريبت.

HTML 
window.alert('This Text Inserted with JS');
جرّب بنفسك

alert without window

استخدام دالة alert بدون كتابة window كاختصار في لغة JavaScript.

HTML 
alert('This Text Inserted with JS');
جرّب بنفسك

Adding HTML Elements Using the alert Function

لا تدعم دالة alert إضافة أو طباعة عناصر HTML لأنها تتعامل مع العناصر على هيئة نصوص وتقوم بعرض العلامات كما هي.

HTML 
alert("<h2> JavaScript Output alert() </h2>") ;
جرّب بنفسك

Printing Data Inside the alert Function in the head Element

طباعة البيانات داخل دالة alert في عنصر head سوف ينتج عنه عدم قراءة المتصفح لعناصر HTML حتى يقوم المستخدم بالضغط على زر "موافق" داخل صندوق alert.

HTML 
<head>
    <title>JavaScript Output using document.write()</title>
    <script>
      alert("JavaScript Output alert()") ;
    </script>
  </head>
جرّب بنفسك

Printing Data Using the document.write Function in JavaScript طباعة البيانات باستخدام دالة document.write في لغة JavaScript

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


استخدامات دالة document.write في لغة جافا سكريبت:

  • إضافة نصوص: يمكن استخدامها لإضافة نصوص داخل صفحة الويب.

  • إضافة عناصر HTML: يمكن إضافة عناصر HTML داخل الصفحة.

  • إضافة أرقام: يمكن طباعة أرقام داخل الصفحة.

  • طباعة أنواع البيانات: يمكن طباعة أي نوع من أنواع البيانات مثل النصوص، الأرقام، وغيرها من أنواع البيانات.

How to Write the document.write() Function

يمكنك إضافة وطباعة أكثر من قيمة باستخدام الفاصلة بين كل قيمة داخل دالة document.write.

HTML 
document.write( String, Number, Variable, ... );

Adding Text to an HTML Page Using document.write()

سوف يظهر هذا النص كآخر عنصر في صفحة HTML، أي أنه يُضاف أسفل عنصر script.

HTML 
document.write("This is the text written using JavaScript Output document.write().") ;
جرّب بنفسك

Adding an HTML Element Using document.write()

إضافة عنصر HTML داخل صفحة الويب عن طريق دالة document.write()، سوف يُضاف عنصر <h2> أسفل جميع العناصر في صفحة HTML.

HTML 
document.write("<h2> JavaScript Output   document.write() </h2>") ;
جرّب بنفسك

Writing Numbers and Mathematical Operations Using document.write()

يمكننا استخدام دالة document.write() لكتابة أرقام وعمليات حسابية.

HTML 
document.write(5+5) ;
جرّب بنفسك

Printing Data Using the console.log Function in JavaScript طباعة البيانات باستخدام دالة console.log في لغة JavaScript

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


دالة console.log() تُستخدم لطباعة أو عرض البيانات من أي نوع داخل المتصفح في console. تُعد دالة log الحل الأمثل لاختبار البيانات أو النتائج أثناء عملية تطوير التطبيقات باستخدام JavaScript.




خطوات الاستخدام:
داخل صفحة HTML، اضغط بزر الفأرة الأيمن واختر Inspect من القائمة.
ستظهر أداة console في المتصفح، حيث ستظهر البيانات التي قمت بإضافتها داخل دالة console.log().
خطوة رقم 1

خطوة رقم 1

خطوة رقم 2

خطوة رقم 2

View Results in Console

لا تنسَ أن تقوم بفتح console لكي تتمكن من مشاهدة النتيجة، حيث أن النتيجة لا تظهر داخل الصفحة، بل تظهر داخل المتصفح في أداة console.

HTML 
console.log("This is the text written using JavaScript Output console.log().") ;
جرّب بنفسك

خطوات إظهار console.log:

Adding HTML Elements Using console.log

لا تدعم أداة console إضافة أو طباعة عناصر HTML لأنها تتعامل مع عناصر HTML على هيئة نصوص وتقوم بطباعة العلامات كما هي.

HTML 
console.log("<h2> JavaScript Output   console.log() </h2>") ;
جرّب بنفسك

Numbers and Mathematical Operations Using console.log

يمكننا استخدام دالة console.log لكتابة أرقام وعمليات حسابية.

HTML 
console.log(5+5) ;
جرّب بنفسك

Printing Data Using the innerHTML Function in JavaScript طباعة البيانات باستخدام دالة innerHTML في لغة جافا سكريبت

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

innerHTML

طباعة البيانات بواسطة دالة innerHTML في لغة جافا سكريبت.

HTML 
document.getElementById("data").innerHTML= "JavaScript innerHTML.";
جرّب بنفسك

Printing Data Using the print Function in JavaScript طباعة البيانات باستخدام دالة print في لغة جافا سكريبت

تُستخدم دالة ()window.print لفتح إعدادات الطباعة لأي صفحة ويب، مما يسمح بحفظ الصفحة أو طباعتها باستخدام أي طابعة متصلة بالكمبيوتر.

Using the print Function

سوف تتعلم في الدروس المقبلة كيفية تنفيذ أمر الطباعة عند الضغط على زر معين، ليتم فتح نافذة الطباعة.

HTML 
window.print();
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…