JavaScript

JavaScript Output
الُمخرجات وطباعة البيانات في لغة الجافا سكريبت

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

التاريخ

19 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

9891

المواضيع

24
الشروحات chevron_left JavaScript Output chevron_left JavaScript

JavaScript Output
الُمخرجات وطباعة البيانات في لغة الجافا سكريبت

</> JavaScript Output
المخرجات وطباعة البيانات في لغة الجافا سكريبت

يمكننا طباعة البيانات في  لغة JavaScript بأربعة طرق مُختلفة داخل تُكتب علي صفحة الويب لتٌعرض علي المتصفح والتي يمكننا إستخدامها وفقًا لمتطلبات التطبيق, تعرّف JavaScript Output مخرجات جافا سكريبت  بأنها الطريقة التي تُستخدم في عرض البيانات بإختلاف أنواعها علي شاشة المُستخدم.


الدوال التي تُستخدم في طباعة البيانات بلغة Java Script :

  1.  ()window.alert
  2. ()console.log
  3.  ()document.write
  4. innerHTML

</> Java Script Output useing alert
طباعة البيانات بإستخدام دالة alert في لغة جافا سكريبت

يتم إستخدام دالة ( )alert في JavaScript لعرض بيانات داخل صندوق يتقدم صفحة الويب. ويتم إستخدامه في الغالب لإعطاء رسالة تحذيرية للمُستخدمين.

  • يتكون هذا الصندوق من بعض الرسائل المحددة (وهي إختيارية) + زر موافق.
  • عند ظهور الصندوق، يظهر معهُ للمستخدم زر موافق لكي يقوم بالضغط عليه بعدما يُشاهد رسالة Alert.
  • تجنب الإفراط في استخدام هذه الطريقة لأنها تمنع المستخدم من الوصول إلى الأجزاء الأخرى من صفحة الويب حتى يتم إغلاق المربع. 
دالة window.alert

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

window.alert('This Text Inserted with JS');
alert Without lert

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

alert('This Text Inserted with JS');
إضافة عناصر HTML بواسطة دالة alert

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

alert("<h2> JavaScript Output alert() </h2>") ;
طباعة البيانات داخل دالة alert في عنصر head

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

<head>
    <title>JavaScript Output using document.write()</title>
    <script>
      alert("JavaScript Output alert()") ;
    </script>
  </head>
ملاحظات
  • يأخذ مربع التنبيه التركيز بعيدًا عن النافذة الحالية، ويجبر المتصفح المُستخدمين على قراءة الرسالة. لا تُفرط في إستخدام هذه الدالة، لأنها تمنع المستخدم من الوصول إلى أجزاء أخرى من الصفحة حتى يتم إغلاق المربع alert.
  • نستطيع إنشاء مربع تنبيه alert باستخدام الدالة ( )alert دون  الحاجة إلي كتابة كلمة "window".
  • يمكنك بعد تعلم لغة جافا سكريبت أن تصنع alert بنفسك بأي حجم وبأي شكل تريدة ولكن بعد انتهاءك من دروس DOM.

</> Output Using document write in Java Script
طباعة البيانات بإستخدام دالة document write في لغة جافا سكريبت

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


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

  • add text إضافة نصوص داخل صفحة الويب.
  • add elements عناصر HTML داخل صفحة الويب.
  • add numbers أرقام داخل صفحة الويب.
  • data types أي نوع من أنواع البيانات.
طريقة كتابة دالة ()documnet.write

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

document.write( String, Number, Variable, ... );
إضافة نصوص داخل صفحة HTML عن طريق ()document.write.

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

document.write("This is the text written using JavaScript Output document.write().") ;
إضافة عنصر HTML بواسطة ()document.write.

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

document.write("<h2> JavaScript Output   document.write() </h2>") ;
أرقام وعمليات حسابية عن طريق دالة ()document.write

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

document.write(5+5) ;
ملاحظات
  • تُسخدم دالة ()document.write في التجارب فقط لأن هناك بدائل أفضل وأكثر استخداماً سوف نسردٌها في الدروس المقبلة.
  • في متصفح "Edge" في حالة إستخدام الدالة ( )document.write  أكثر من مره بداخل العنصر <iframe> فسوف يتسبب ذلك في حدوث الخطأ التالي " SCRIPT70: Permission denied ".
  • بداية من الأصدار " 55 " للمتصفح "chrome" لن يقوم المتصفح بتنفيذ أوامر لغة javascript التي تحتوي علي دالة  ( )document.write عند إستيفاء شروط محددة.

</> Output Using console.log in Java Script
طباعة البيانات بإستخدام دالة console.log في لغة جافا سكريبت

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


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


خطوات الاستخدام:

  • داخل صفحة HTML أضغط بزر mouse الأيمين سوف تظهر لك قائمة إختار منها أخر إختيار وهو inspect.
  • ستظهر علي المتصفح أداة console وستظهر البيانات التي قمت بأضافتها داخل دالة console.log. 
خطوة رقم 1
خطوة رقم 1
خطوة رقم 2
خطوة رقم 2
لا تنسي أن تقوم بإظهار console

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

console.log("This is the text written using JavaScript Output console.log().") ;

خطوات اظهار ال console log :

إضافة عناصر HTML بواسطة ()console.log.

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

console.log("<h2> JavaScript Output   console.log() </h2>") ;
أرقام وعمليات حسابية عن طريق دالة ()console.log

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

console.log(5+5) ;
ملاحظات
  • لا تظهر النتائج التي تطبع بواسطة دالة ()console.log علي صفحة الويب ولكن تظهر داخل console في المتصفحات فقط.
  • يمكنك إظهار console في المتصفحات عن طريق الضغط علي زر F12 في لوحة المفاتيح او إستخدام الإختصار الأتي CTRL + SHIFT + J.

</> Output Using innerHTML in JavaScript
طباعة البيانات بإستخدام دالة innerHTML في لغة جافا سكريبت

عن طريق دالة innerHTML يمكننا إضافة محتوي نصي أو أي نوع من أنواع البيانات داخل أي عنصر لكن يجب إختبار العنصر أولاً عن طريق دالة ()documnet.getElementByID ثم إضافة إسم ID العنصر الزي نقوم بإضافة محتوي بداخلة.
innerHTML

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

document.getElementById("data").innerHTML= "JavaScript innerHTML.";
تعد استخدام دالة innerHTML طريقة شائعة في لغة ال Java Script لتغيير البيانات داخل صفحة الويب HTML ولكن سنتعرف عليها تفصيلاً في دروس مستقبلية.

</> Output Using Print in JavaScript
طباعة البيانات بإستخدام دالة Print في لغة جافا سكريبت.

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

إستخدام دالة print

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

window.print();

يمكننا فتح صفحة الطباعة بإستخدام دالة ( )print دون الحاجة الي كتابة كلمة ".document".

معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.