لوگو دویکس
ورود / ثبت نام
خروجی جاوا اسکریپت

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

دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 4 دقیقه آخرین بروز رسانی: 17 اسفند 1399

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

همچنین ، خواهید فهمید که چرا بیش از یک روش برای چاپ در جاوا اسکریپت وجود دارد ، کجا و چه زمانی باید از هر یک استفاده کنید. هنگامی که در کد خود با مشکلی روبرو می شوید گزینه های متعددی مفید هستند. درک این موضوع به شما کمک می کند اسکریپت خود را راحت تر از حالت خطایابی یا بازنویسی کنید.

نکات اصلی خروجی جاوا اسکریپت:

  • روش های مختلفی برای ساخت داده های خروجی JavaScript وجود دارد. آنها یا HTML موجود را اصلاح یا جایگزین می کنند ، به اشکال زدایی یا بازیابی محتوای HTML کمک می کنند.
  • می توانید در جعبه هشدار با ()window.alert بنویسید.
  • در خروجی HTML با ()document.write بنویسید.
  • می توانید با استفاده از روش ثبت کنسول JavaScript ، در کنسول جاوا اسکریپت مرورگر بنویسید.

خروجی داده ها

بیش از یک راه برای خروجی داده در JavaScript وجود دارد. اکنون سه روش موجود را مرور کرده و قطعه کد را برای هر یک مشاهده خواهیم کرد.

()window.alert

این روش برای چاپ در JavaScript داده های داده شده را در یک جعبه هشدار نمایش می دهد. یک جعبه pop-up کوچک با یک دکمه بسته شدن ظاهر می شود و پس از کلیک روی دکمه ناپدید می شود.

window.alert(12 + 3);

نکته: این روش window.alert برای پیام های آموزنده کوتاه و سریع که می توانند بلافاصله بسته شوند بسیار مناسب است.

()document.write در خروجی جاوا اسکریپت

()document.write محتوا را در اسناد HTML می نویسد.

هشدار: شما باید بسیار مراقب این روش خروجی JavaScript باشید زیرا ممکن است محتوای اسناد HTML را نادیده بگیرد.

document.write(12 + 3);

در مثال زیر ، هنگامی که یک سند HTML به طور کامل بارگیری می شود ، ()document.write تمام HTML موجود را با کلیک دکمه حذف می کند:

<button type="button" onclick="document.write(12 + 3)">Press me to display an answer</button>

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

()console.log در خروجی جاوا اسکریپت

برای کنسول JavaScript باید از روش ()console.log برای چاپ استفاده کنید. عملکرد ورود کنسول JavaScript عمدتا برای اشکال زدایی کد استفاده می شود زیرا باعث می شود JavaScript خروجی را در کنسول چاپ کند.

برای باز کردن کنسول مرورگر ، روی صفحه کلیک راست کرده و Inspect را انتخاب کنید و سپس روی Console کلیک کنید.

console.log(12 + 3);

document.write vs console.log

این روش ها در هدف و موارد استفاده متفاوت هستند. با این حال ، روش console.log بیشتر مربوط به توسعه وب مدرن برای رفع اشکال و ورود به سیستم است. استفاده از document.write به دلیل این واقعیت که این متد می تواند همه عناصر<header> و <body> را نادیده بگیرد دلسرد نمی شود.

تغییر محتوای HTML

برای تغییر محتوای عناصر HTML مشخص شده سه گزینه وجود دارد: innerHTML ، innerText یا textContent.

هنگامی که برای اهداف خروجی استفاده می شود ، عملکرد آنها بسیار شبیه است. با این حال ، هنگامی که آنها برای دریافت محتوای HTML اعمال می شوند ، تفاوتی وجود دارد. به مثال و توضیحات آن در زیر نگاهی بیندازید:

<p id="example">   This paragraph element has excess spacing   and has <span>a span element</span>    inside.</p>

<button onclick="getInnerText()">Get innerText</button>
<button onclick="getInnerHTML()">Get innerHTML</button>
<button onclick="getTextContent()">Get textContent</button>

<script>
  function getInnerText() {
    alert(document.getElementById("example").innerText)
  }
  function getInnerHTML() {
    alert(document.getElementById("example").innerHTML)
  }
  function getTextContent() {
    alert(document.getElementById("example").textContent)
  }
</script>

بیایید نگاهی بیندازیم که هر یک از این خصوصیات هنگام بدست آوردن محتوای عنصر<p> در بالا چه خروجی می دهد.

  • innerText فقط متن را بدون هیچ فاصله اضافی یا تگ <span> برمی گرداند:

“این عنصر پاراگراف دارای فاصله بیش از حد است و دارای یک عنصر دهانه در داخل است.”

  • innerHTML متن را با تمام فاصله اضافی و تگ <span> برمی گرداند:

“این عنصر پاراگراف دارای فاصله بیش از حد است و دارای <span> یک عنصر دهانه <span> در داخل است.”

  • textContent متن را با تمام فاصله اضافی ، اما بدون تگ <span> برمی گرداند:

“این عنصر پاراگراف دارای فاصله بیش از حد است و دارای یک عنصر دهانه در داخل است.”

متن داخلی

مثال زیر به دنبال یک عنصر HTML با ویژگی id = “یادگیری” است. خاصیت innerText محتوای یک عنصر HTML را تعریف می کند ، بنابراین محتوای یک عنصر در HTML توسط JavaScript با محتوای جدید رونویسی می شود:

document.getElementByID("learn").innerText = (12 + 3);

innerHTML

مثال زیر یک عنصر HTML را با ویژگی id = “یادگیری” جستجو می کند. خاصیت innerHTML محتوای HTML را تعریف می کند. بنابراین ، محتوای یک عنصر در HTML توسط JavaScript با محتوای جدید رونویسی می شود:

document.getElementByID("learn").innerHTML = (12 + 3);

متن

آخرین مثال به دنبال عنصر HTML با ویژگی id = “یادگیری” است. در این حالت ، ویژگی textContent محتوای یک گره خاص را تعریف می کند. در نتیجه ، محتوای یک عنصر در HTML با JavaScript با محتوای جدید جایگزین می شود.

document.getElementByID("learn").textContent = (12 + 3);

خلاصه خروجی جاوا اسکریپت:

  • با استفاده از چندین تکنیک مختلف می توانید در JavaScript چاپ کنید.
  • متداول ترین گزینه ای که هنگام اشکال زدایی استفاده می شود ، روش ورود به سیستم کنسول JavaScript است.
  • شما باید همه آنها را تمرین کنید و یاد بگیرید که از آنها برای رفع اشکال بهتر کد خود استفاده مناسب کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊