JavaScript – خروجی (Output)

خروجی جاوا اسکریپت

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

جاوا اسکریپت می‌تواند داده‌ها را به روش‌های مختلف نمایش دهد:

  • نوشتن در یک عنصر HTML با استفاده از innerHTML
  • نوشتن در خروجی HTML با استفاده از document.write()
  • نمایش در جعبه هشدار با استفاده از window.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 است.

استفاده از document.write()

برای اهداف تست، استفاده از document.write() مناسب است.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>اولین صفحه وب من</h1>
<p>اولین پاراگراف من</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

استفاده از document.write() بعد از بارگذاری یک سند HTML، تمام HTML موجود را حذف می‌کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>اولین صفحه وب من</h1>
<p>اولین پاراگراف من</p>

<button type="button" onclick="document.write(5 + 6)">امتحان کنید</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 به عنوان شیء محدوده‌ی سراسری شناخته می‌شود و نیازی به ذکر آن نیست.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>اولین صفحه وب من</h1>
<p>اولین پاراگراف من</p>

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

</body>
</html>

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

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

مثال:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

چاپ در جاوا اسکریپت

جاوا اسکریپت هیچ شیء یا متدی برای چاپ ندارد و نمی‌توانید به دستگاه‌های خروجی از طریق جاوا اسکریپت دسترسی پیدا کنید.

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

مثال:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.