JavaScript Output

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

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

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

استفاده از innerHTML

یکی از راه‌های دسترسی به عناصر HTML از طریق JavaScript استفاده از تابع شی document.getElementById(id) است. ویژگی id، عنصر HTML و innerHTML محتوای HTML را مشخص می‌کنند. این روش، روش رایجی جهت نمایش داده در HTML است.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> My First Web Page </h2>
    <p> My First Paragraph. </p>
    <p id = "demo"> </p>
    <script>
      document.getElementById("demo").innerHTML = 5 + 6;
    </script>
  </body>
</html>

خروجی:

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

برای مقاصد آزمایشی، استفاده از این تابع شی راحت‌تر است.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> My First Web Page </h2>
    <p> My First Paragraph. </p>
    <p> 
      Never call document.write after the document has finished loading. 
      It will overwrite the whole document. 
    </p>
    <script>
      document.write(5 + 6);
    </script>
  </body>
</html>

خروجی:

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

برای مثال کد زیر را خودتان اجرا و نتیجه را مشاهده نمائید.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> My First Web Page </h2>
    <p> My First Paragraph. </p>
    <button type="button" onclick="document.write(5 + 6)"> Try it </button>
  </body>
</html>

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

می‌توانید از یک باکس هشدار برای نمایش اطلاعات استفاده کنید.

<!DOCTYPE HTML>
<html>
  <body>
    <h2> My First Web Page </h2>
    <p> My First Paragraph. </p>
    <script>
      window.alert(5 + 6);
    </script>
  </body>
</html>

خروجی:

می‌توانید کلید واژه window را ننویسد. در جاوا اسکریپت، شی window یک شی global است، به این معنی که همه متغیرها، خواص و توابع شی به صورت پیش‌فرض به شی window تعلق دارند. این بدان معنی خواهد بود که نوشتن کلمه window اختیاری خواهد بود.

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

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

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

<!DOCTYPE HTML>
<html>
  <body>
    <h2> Activate Debugging </h2>
    <p> F12 on your keybord will activate debugging. </p>
    <p> Then select "Console" in the debugger menu. </p>
    <script>
      console.log(5 + 6);
    </script>
  </body>
</html>

خروجی:

<< مبحث قبلی مبحث بعدی >>