غیر از نمایش محتوای تولید شده برای کاربر، چاپ داده ها کارایی خاصی برای فرایند debuging یا همان باگ یابی در نرم افزار دارد.
روش های چاپ داده در زبان جاوا اسکریپت
به طور کلی چهار روش برای چاپ داده در زبان جاوا اسکریپت وجود دارد که برنامه نویسان می توانند از آن ها استفاده کنند.
این چهار روش به کمک چاپ HTML، یا قابلیت های خاص مرورگرها انجام می شوند.
- چاپ اطلاعات با استفاده از
innerHTML - چاپ اطلاعات با استفاده از
document.write() - نمایش اطلاعات به صورت Alert مرورگر با فانکشن
window.alert() - نمایش اطلاعات در کنسول مرورگر با
console.log()
استفاده از innerHTML برای چاپ اطلاعات در جاوا اسکریپت
در زبان جاوا اسکریپت برای انتخاب یک المان HTML موجود در صفحه می توانید از فانکشن document.getElementById(id) استفاده کنید. در اینجا id برابر مقدار خاصیت id المان در کد های HTML است.
برای تغییر محتوای یک المان می توانید از مشخصه innerHTML در جاوا اسکریپت برای آن المان استفاده کنید.
مثال زیر نشان می دهد که چگونه محتوای یک المان دارای آی دی demo با استفاده از innerHTML تغییر می کند:
<!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>
فصل 3 – مثال 1
تغییر محتوای HTML از طریق مشخصه innerHTML روش معمول نمایش داده برای کاربران است.
استفاده از document.write() برای چاپ اطلاعات در جاوا اسکریپت
برای عملیات هایی مانند تست کردن سریع، می توانید از 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>
فصل 3 – مثال 2
توجه داشته باشید اگر بعد از بارگذاری کامل صفحه از فانکشن
document.write()استفاده کنید، تمامی اطلاعات قبلی از صفحه حذف خواهد شد.
به عنوان مثال بعد از کلیک کردن دکمه در مثال زیر تمامی اطلاعات از صفحه حذف خواهد شد:
<!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>فصل 3 – مثال 3
بهتر است از فانکشن
document.write()فقط برای تست کردن کد ها استفاده کنید.
استفاده از window.alert() برای نمایش اطلاعات در جاوا اسکریپت
اگر از فانکشن window.alert() برای نمایش داده استفاده کنید، اطلاعات در محیط مرورگر طی پیغامی موسوم به alert به کاربر نمایش داده خواهد شد.
مثال استفاده از alert در جاوا اسکریپت:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>فصل 3 – مثال 4
نمایش اطلاعات در هنگام دیباگ کردن با استفاده از console.log()
در هنگامی که در حال دیباگ کردن کدهای خود هستید، فانکشن console.log() برای نمایش اطلاعات فقط برای برنامه نویس، بسیار مناسب است.
شرایطی را تصور کنید که در حال برنامه نویسی بر روی یک وبسایت آنلاین هستید و نمی خواهید اطلاعات رو طوری چاپ کنید که کاربر آنلاین نیز بتواند آن ها را خواند. در این زمان بهترین راه حل، چاپ کردن دیتا با استفاده از console.log() و سپس باز کردن کنسول مرورگر برای مشاهده آن اطلاعات است.
مثال استفاده از فانکشن console.log() برای چاپ اطلاعات در زبان جاوا اسکریپت:
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>فصل 3 – مثال 5
