JAVASCRIPT

جلسه 2: نمایش داده ها در جاوا اسکریپت

انواع نمایش داده ها در جاوااسکریپت


جاوا اسکریپت داده ها را با توابع زیر میتواند نمایش دهد:

  • نوشتن در یک عنصر  HTML  با استفاده از تابع innerHTML
  • نوشتن در خروجی HTML با استفاده از تابع ()document.write
  • نوشتن در یک باکس پیغام با استفاده از تابع ()window.alert
  • نوشتن در کنسول مرورگر با اسفاده از تابع ()console.log

استفاده از تابع innerHTML 


در این روش جاوااسکریپت برای دسترسی به عنصر HTML از متد (document.getElementById (id استفاده میکند. در این متد صفت id عنصر HTML را مشخص میکند و innerHTML محتوایی را که باید در html قرارگیرد را مشخص میکند.

به مثال زیر دقت کنید تا کاملا متوجه شوید:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

در مثال فوق  تابع جمع ریاضی که مجموعا میشود 11 توسط تابع innerHTML گرفته شده و درون آیدی demo  قرار گرفته که تابع getElementById با دسترسی که با عناصر HTML دارد این مقدار را به عنصری که ID موردنظر برایش تعریف شده انتساب میدهد. بنابراین پس از اجرای برنامه باید مقدار 11 بر روی صفحه مرورگر چاپ گردد.

استفاده از تابع ()document.write


این تابع بیشتر جهت تست و چاپ مقادیر متغیرها استفاده میشود.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<script>
document.write(5 + 6);
</script>

</body>
</html>

پس از اجرای برنامه مقدار عددی 11 روی صفحه مرورگر به نمایش درخواهد آمد.

نکته: تابع ()document.write فقط جهت تست و چاپ مقادیر متغیر ها استفاده میشود.اجرای این تابع بعد از اینکه عناصر HTML روی صفحه مرورگر چاپ شدند باعث میشود همه داده ها از روی صفحه مروگر پاک شوند و مقدار تابع چاپ گردد.

استفاده از تابع ()window.alert


جهت نمایش داده ها بصورت باکس پیغام میتوانید از این تابع استفاده کنید.

ساختار این تابع بصورت زیر است:

<!DOCTYPE html>
<html>
<body>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

پس از اجرای تابع مقدار 11 بصورت باکس پیغام در صفحه مرورگر به نمایش درخواهد آمد.

استفاده از تابع ()console.log


از این تابع برای نمایش داده ها با هدف اشکال زدایی استفاده میشود. در فصل های بعد دراین مورد بیشتر صحبت خواهیم کرد.

ساختار این تابع بصورت زیر است:

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

امیدوارم که خسته نشده نباشید با ادامه آموزش جاوا اسکریپت با ما باشید.

جلسه بعد 

جلسه قبل

به این مطلب چه امتیازی می‌دهید؟

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد.

دکمه بازگشت به بالا