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