قد تحتاج إلى عرض الإخراج من كود جافا سكريبت الخاص بك في مواقف معينة، على سبيل المثال، عندما تريد إرسال رسالة إلى وحدة تحكم المتصفح الخاص بك لمساعدتك في تصحيح الأخطاء أو التحقق من قيمة متغير باستخدام كود جافا سكريبت الخاص بك، وما إلى ذلك.
ما هي طرق إنشاء وعرض المخرجات في جافا سكريبت
1. استخدام innerHTML
- للوصول إلى عنصر (HTML)، يمكن لجافا سكريبت استخدام طريقة (document.getElementById (id))، حيث تحدد سمة (id) عنصر (HTML)، وتحدد خاصية (innerHTML) محتوى (HTML)، انظر المثال التالي:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>
</body>
</html>
2. استخدام ()document.write
لأغراض الاختبار، من السهل استخدام (()document.write)، انظر المثال التالي:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
- سيؤدي استخدام (()document.write) بعد تحميل مستند (HTML) إلى حذف كل (HTML) الموجود، انظر المثال التالي:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type=”button” onclick=”document.write(5 + 6)”>Try it</button>
</body>
</html>
- يجب استخدام طريقة (()document.write) للاختبار فقط.
3. استخدام ()window.alert
- يمكنك استخدام مربع تنبيه لعرض البيانات، انظر المثال التالي:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
4. استخدام ()console.log
- لأغراض تصحيح الأخطاء، يمكنك استدعاء طريقة (()console.log) في المتصفح لعرض البيانات، انظر المثال التالي:
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
كيفية طباعة كود جافا سكريبت
- لا تحتوي جافا سكريبت على أي كائن طباعة أو طرق طباعة، ولا يمكنك الوصول إلى أجهزة الإخراج من جافا سكريبت، الاستثناء الوحيد هو أنه يمكنك استدعاء طريقة (()window.print) في المتصفح لطباعة محتوى النافذة الحالية، انظر المثال التالي:
<!DOCTYPE html>
<html>
<body>
<button onclick=”window.print()”>Print this page</button>
</body>
</html>
