جلسه 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>
امیدوارم که خسته نشده نباشید با ادامه آموزش جاوا اسکریپت با ما باشید.
کتاب الکترونیکی (182 صفحه)
فایل صوتی کتاب (132 دقیقه)
کتاب الکترونیکی 14 تمرین مکمل
برنامه تمرینی 4 هفته ای
موسیقی درمانی سابلیمینال
