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

در JavaScript (جاوا اسکریپت) میتوان داده های خروجی را به روش های مختلف نمایش داد. برای مثال برای نمایش یک حاصل جمع در یک پاراگراف میتوان از خاصیت innerHTML مربوط به همان پاراگراف استفاده کرد. در این فصل با انواع روش هایی که میتوان داده ها را در مرورگر نمایش داد آشنا میشویم.


نمایش داده ها

در جاوا اسکریپت میتوان داده ها را به چندین روش در مرورگر نشان داد :

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

استفاده از innerHTML 

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

نمونه مثال زیر نحوه ی استفاده از خاصیت innerHTML ، برای قرار دادن حاصل جمع دو عدد (5 + 6) در یک پاراگراف را نشان میدهد :

<!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>

خروجی نمونه مثال بالا در مرورگر به شکل زیر است :

display_javascript

نکته : تغییر خاصیت innerHTML عناصر HTML یکی از روش های رایج برای نمایش داده ها در HTML است.


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

برای انجام تست های مختلف در یک برنامه ی جاوا اسکریپت، میتوان به سادگی از ()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 میتوان ، همه ی محتوای صفحه را حذف کرده و مقداری که توسط این تابع تولید میشود را جایگزین کرد. نمونه مثال زیر برای ما این کار را انجام خواهد داد :

<!DOCTYPE html>
  <html>
    <body>

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

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

    </body>
</html>

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


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

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

<!DOCTYPE html>
  <html>
    <body>

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

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

</body>
</html>

در نمونه مثال بالا بلافاصله بعد بارگذاری صفحه، پنجره ی پیغامی نمایش داده میشود که مقدار حاصل جمع دو عدد در آن قرار گرفته است :

display_javasc


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

برای اهداف عیب یابی ، میتوانید از متد ()console.log برای نمایش داده ها استفاده کنید:

<!DOCTYPE html>
  <html>
    <body>

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

    </body>
</html>

نمونه مثال بالا مقداری را در صفحه مرورگر چاپ نمیکند، بلکه این مقدار را باید در پنجره ای از مرورگر به نام console بیابید :

console_log

منتشر شده در ۱۸ مهر ۱۳۹۶ حمید رضا ملکی ۴۵۹۳ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید