در این مقاله قصد دارم شما را با انواع روش های خروجی گرفتن در سند خود آشنا کنم.
برای نمایش نهایی دستورات خود در سند می توانیم از چهار روش زیر استفاده کنیم:
- نوشتن در تگ html خود با استفاده از خصوصیت innerHTML
- نوشتن در سند خود با استفاده از متد write
- نوشتن در باکس پیغام مرورگر با استفاده از متد alert
- نوشتن درون کنسول مرورگر با استفاده از متد log
- پرینت گرفتن
نوشتن در تگ html خود با استفاده از خصوصیت innerHTML
برای دسترسی به المنت های HTML می توان از متد getElementById استفاده کرد.این متد المنت را براساس id انتخاب می کند. id یکی از خصوصیت های تگ ها می باشد که دارای شناسه یونیک در سند است.بعد از انتخاب المنت با استفاده از خصوصیت innerHTML مقدار درون المنت را تغییر می دهیم.این روش یک روش معمول در تغییر محتوای تگ ها می باشد
بین خصوصیت و متد تفاوت وجود دارد.
مثال:
|
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> |
بعد از بروزرسانی مرورگر مشاهده می کنید که محتوای داخل تگ p برابر با ۱۱ است.
نوشتن در سند خود با استفاده از متد 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> |
اجرای این دستور بعد از لود صفحه باعث حذف محتوای سند و نمایش نتیجه می شود.
مثال:
|
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> |
نوشتن در باکس پیغام مرورگر با استفاده از متد alert
برای نمایش مقدار خروجی می توانید از باکس پیغام استفاده کنید.برای فراخوانی این متد نیازی به استفاده کردن از آبجکت سراسری window نیست بلکه شما می توانید این متد را به تنهایی صدا بزنید.چون همگی آنها زیرمجموعه آبجکت window هستند.
مثال:
|
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> |
نوشتن درون کنسول مرورگر با استفاده از متد log
اگر در سایت نیاز به تست کدهای نوشته خود دارید می توانید نتیجه خروجی کدهای خود را با استفاده از متد log که زیرمجموعه آبجکت console قرار دارد log بگیرید.
برای مشاهده خروجی دستور خود به مرورگر خود و بخش log بروید با هر بار رفرش کردن صفحه نتیجه را مشاهده خواهید کرد.
در مرورگر کروم کلید میانبر مشاهده در بخش console کلید ctrl+shift+i است.
مثال:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <script> console.log(5 + 6); </script> </body> </html> |
پرینت گرفتن در جاوااسکریپت
در جاوااسکریپت چیزی بعنوان آبجکت یا متد print برای استفاده وجود ندارد و با جاوااسکریپت امکان دسترسی به آن وجود ندارد.تنها راه استفاده از ویژگی یا متد print از زیر مجموعه آبجکت window است که محتوای جاری شما را پرینت می گیرد.
مثال:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <button onclick="window.print()">Print this page</button> </body> </html> |
