إمكانيات عرض جافاسكربت
يمكن لجافاسكربت “عرض” البيانات بطرق مختلفة:
- الكتابة في عنصر HTML باستخدام
innerHTML. - الكتابة في إخراج HTML باستخدام
document.write(). - الكتابة في مربع تنبيه باستخدام
window.alert(). - الكتابة في وحدة تحكم المتصفح باستخدام
console.log().
استخدام 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>
يعد تغيير الخاصية innerHTML لعِلمة HTML طريقة شائعة لعرض البيانات في HTML.
استخدام 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>
استخدام 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>
يمكنك تخطي الكلمة الأساسية window.
في جافاسكربت، يعتبر كائن window كائن النطاق العام. وهذا يعني أن المتغيرات والخصائص والطرق تخص كائن window بشكل افتراضي. يعني هذا أيضًا أن تحديد الكلمة الأساسية window اختياري:
مثال
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
استخدام 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>
