مقدمه
با عرض سلام خدمت کاربران محترم سایت پی وی لرن. در بخش قبلی با چگونگی درج و تعریف اسکریپت های جاوا اسکریپت در صفحات وب که شامل چند روش ساده می باشد آشنا شدیم، حالا این پرسش مطرح می شود که چگونه از اسکریپت هایی که در جاوا اسکریپت نوشته ایم در صفحات وب خروجی بگیریم، برای این منظور متد ها و خصوصیات مختلفی در جاوا اسکریپت ارائه گردیده است که هر کدام به نحوی و در یک قالب خاص خروجی اسکریپت های شما را در صفحات وب نشان می دهند، در ادامه ی این بخش برای آشنایی با کار با خروجی جاوا اسکریپت با ما همراه باشید.
کار با خروجی جاوا اسکریپت
در ادامه ی این آموزش شما را با روش های گرفتن خروجی جاوا اسکریپت آشنا خواهیم کرد.
روش های گرفتن خروجی جاوا اسکریپت
در جاوا اسکریپت داده ها با روش های زیر قابل نمایش هستند :
- نوشتن در عناصر html با استفاده از innerHTML
- نوشتن در خروجی html با استفاده از ()document.write
- نمایش به صورت پیغام در قالب یک alert box با استفاده از ()window.alert
- گرفتن خروجی در کنسول مرورگر با استفاده از ()console.log
استفاده از innerHTML
برای دسترسی به عناصر مختلف HTML در جاوا اسکریپت می توان از متد (document.getElementById(id استفاده کرد.
صفت id یک عنصر HTML را تعریف می کند، خصوصیت innerHTML محتوای عناصر HTML را مشخص می کند:
مثال : استفاده از 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> |
تغییر خصیصه innerHTML عنصر HTML یک روش معمول برای نمایش داده ها در HTML است.
استفاده از ()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> |
نکته : استفاده از ()document.write بعد از هر عنصر html که بارگزاری شده باعث حذف تمام 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 فقط برای تست خروجی استفاده شود.
استفاده از ()window.alert
شما می توانید از یک alert box برای نمایش خروجی استفاده کنید :
مثال : استفاده از 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> |
استفاده از ()console.log
برای اهداف خطازدایی می توانید از ()console.log استفاده کنید :
مثال : کنسول خارجی
| <!DOCTYPE html> <html> <body> <script> console.log(5 + 6); </script> </body> </html> |
کلام آخر
همانطور که در مباحث فوق بررسی کردیم ، راه های مختلفی برای دریافت خروجی جاوا اسکریپت در کدهای HTML وجود دارد ، البته هر یک از این روش های برای هدف خاصی کاربرد دارد ، که باید در جای خود استفاده شود.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
siamak
ممنون از مطالب خوبتون