آموزش JavaScript(قسمت 3):خروجی جاوا اسکریپت

آموزش جاوا اسکریپت(خروجی جاوا اسکریپت)

در قسمت 2 (آموزش جاوا اسکریپت) محل قرارگیری و نحوه فراخوانی جاوا اسکریپت را آموختیم. دراین آموزش قصد داریم مدل های مختلف نمایش خروجی جاوا اسکریپت را خدمت کاربران عزیز تیگو وب قرار دهیم…

نحوه نمایش خروجی جاوا اسکریپت:

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

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

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

برای دسترسی به یک عنصر HTML در جاوا اسکریپت می توانید از متد document.getElementById (id) استفاده کنید.

ویژگی id عنصر HTML را تعریف می کند. خاصیت innerHTML محتوای HTML را تعریف می کند:

 <!DOCTYPE html>
<html>
<body>

<h1>آموزش جاوا اسکریپت (تیتر)</h1>
<p>پاراگراف نمونه</p>

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

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

</body>
</html> 

پیش نمایش آنلاین

نکته: تغییر ویژگی innerHTML یک عنصر HTML یک روش معمول برای نمایش داده ها در HTML است.

با استفاده از 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 موجود را حذف میکند و فقط دستور اجرایی توسط جاوا اسکریپت را نمایش می دهد.

مثال:

 <!DOCTYPE html>
<html>
<body>

<h1>آموزش JavaSCript(تیتر)</h1>
<p>پاراگراف نمونه</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html> 

پیش نمایش آنلاین خروجی جاوا اسکریپت

نکته: از روش document.write () فقط باید برای آزمایش یا تست استفاده شود.

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

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

مثال:

 <!DOCTYPE html>
<html>
<body>

<h1>خروجی جاوا اسکریپت (تیتر)</h1>
<p>آموزش جاوا اسکریپت(پاراگراف نمونه)</p>

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

</body>
</html> 

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

می توانید از کلمه کلیدی Window صرف نظر کنید.

در جاوا اسکریپت ، شی window شی scope دامنه جهانی است ، به این معنی که متغیرها ، خصوصیات و روش ها به طور پیش فرض به شی window تعلق دارند. این همچنین بدان معنی است که تعیین کلمه کلیدی window اختیاری است:

 <!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html> 

پیش نمایش آنلاین

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

برای زمانی که قصد اشکال زدایی یا درست کردن باگ های کد جاوا اسکریپت ، می توانید برای نمایش داده ها از متد console.log () استفاده کنید.

نکته: در بخش بعدی درباره اشکال زدایی بیشتر خواهید آموخت.

 <!DOCTYPE html>
<html>
<body>

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

</body>
</html> 

پیش نمایش آنلاین اشکال زدایی جاوا اسکریپت

Print یا چاپ جاوا اسکریپت:

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

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

تنها استثنا این است که شما می توانید با استفاده از روش window.print () در مرورگر محتوای پنجره فعلی را چاپ کنید.

 <!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">چاپ صفحه</button>

</body>
</html> 

پیش نمایش آنلاین چاپ صفحه در جاوا اسکریپت

منبع:

W3School.com

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *