JavaScript Output
الُمخرجات وطباعة البيانات في لغة الجافا سكريبت
ستتعلم في هذا الدرس المخرجات وطباعة البيانات JavaScript Output في لغة الجافا سكريبت وهي عرض البيانات داخل صفحة الويب HTML بأستخدام لغة جافا سكريبت بأربعة طرق مختلفة الطريقة الأولي هي ()window.alert والطريقة الثانية هي ()console.log والطريقة الثالثة وهي ()document.write والطريقة الرابعة هي innerHTML وما هي اكثر طريقة شائعة وسنتحدث عن اداة console داخل المتصفحات.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript Output chevron_left JavaScript
JavaScript Output
الُمخرجات وطباعة البيانات في لغة الجافا سكريبت
</>
JavaScript Output
المخرجات وطباعة البيانات في لغة الجافا سكريبت
يمكننا طباعة البيانات في لغة JavaScript بأربعة طرق مُختلفة داخل تُكتب علي صفحة الويب لتٌعرض علي المتصفح والتي يمكننا إستخدامها وفقًا لمتطلبات التطبيق, تعرّف JavaScript Output مخرجات جافا سكريبت بأنها الطريقة التي تُستخدم في عرض البيانات بإختلاف أنواعها علي شاشة المُستخدم.
الدوال التي تُستخدم في طباعة البيانات بلغة Java Script :
- ()window.alert
- ()console.log
- ()document.write
- 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
خطوة رقم 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
طباعة البيانات بواسطة دالة innerHTML في لغة جافا سكريبت.
document.getElementById("data").innerHTML= "JavaScript innerHTML.";
</>
Output Using Print in JavaScript
طباعة البيانات بإستخدام دالة Print في لغة جافا سكريبت.
تُستخدم دالة ( )document.print لفتح إعدادات الطباعة لأي صفحة ويب لكي تقوم بحفظ الصفحة أو طباعتها عن طريق أي طابعة موصلة بهذا الحاسوب.
إستخدام دالة print
سوف تتعلم في الدروس المقبلة تنفيذ أمر الطباعة عند الضغط علي زر معين ليقوم بفتح نافذة الطباعة.
window.print();
يمكننا فتح صفحة الطباعة بإستخدام دالة ( )print دون الحاجة الي كتابة كلمة ".document".
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
