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

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

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

Free-Learn

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

فرض میکنیم میخوایم ۲ عدد رو با همدیگه جمع کنیم، یا اصلا شاید بخوایم یک متن و.. را در خروجی ( منظور از خروجی یعنی در مرورگرها ) به نمایش درآوریم، خب باید چجوری اینکارو انجام بدیم؟!

خب ما از روش های مختلف میتونیم نتیجه (خروجی ) داده هارو در مرورگرها به نمایش درآوریم، که این روش ها به شرح زیر می باشد :

  • نمایش خروجی با استفاده از innerHTML
  • نمایش خروجی با استفاده از ()document.write
  • نمایش خروجی با استفاده از ()alert
  • نمایش خروجی با استفاده از ()console.log
  • نمایش خروجی با استفاده از ()window.print

Free-Learn

نمایش خروجی با استفاده از innerHTML

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

مثال شماره ۱ : نمایش یک متن ( یا رشته یا String ) در تگ h2 که دارای ID بنام test می باشد.

امتحان کنید

مثال شماره ۲ : بدست آوردن محتوای درون یک تگ و سپس نمایش آن در یک تگ دیگه

امتحان کنید

مثال شماره ۳ : جمع ۲ عدد و نمایش نتیجه در تگ h2 که دارای ID بنام result می باشد.

امتحان کنید

Free-Learn

نمایش خروجی با استفاده از ()document.write

در این روش ، ما میتونیم خروجی رو در سند ( منظور همون صفحه وبمون می باشد ) به نمایش درآوریم ، ولی یه نکته مهم در اینباره وجود داره که باید حتما بهش توجه داشته باشید.

نکته : اگه بعد از لود شدن کامل صفحه ( یعنی مثلا صفحه لودش کامل شده ، بعد میخوایم روی یه دکمه کلیک شه ، اینجا دیگه محتوا دکمه میشه محتوای بعد از لود صفحه ) ، از document.write استفاده کنیم ، اول هرچیزی که درون صفحه باشه رو پاک میکنه بعدش خروجی در کل صفحه وب چاپ میشه.

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

مثال شماره ۱ : وقتی بروی دکمه کلیک شه ، تمامی چیزایی که درون صفحه وجود داره پاک میشه و محتویات document.write چاپ میشه.

امتحان کنید

مثال شماره ۲ : استفاده مستقیم و همزمان از document.write بدون اینکه همه محتوای موجود در صفحه پاک بشه ، چون محتوای document.write با صفحه بصورت همزمان لود میشه پس دیگه کل صفحه رو پاک نمیکنه.

امتحان کنید

Free-Learn

نمایش خروجی با استفاده از ()alert

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

مثال شماره ۱ : نمایش یک متن ساده

امتحان کنید

مثال شماره ۲ : نمایش نتیجه جمع ۲ عدد

امتحان کنید

مثال شماره ۳ : نمایش متن و جمع ۲ عدد بصورت همزمان ( یعنی بهم چسبوندن رشته و عدد )

امتحان کنید

Free-Learn

نمایش خروجی با استفاده از ()console.log

کنسول یا Console به یک محیط یا فضای داخل مرورگر گفته میشه که معمولا این فضارو بهش میگن محیط اشکال زدایی یا به انگلیسی debug ( دیباگ ) ، حال ما میتونیم با استفاده از همین فضا داده هارو در خروجی به نمایش درآوریم.

محیط کنسول مرورگرها در حالت عادی قابل نمایش نیست و باید حتما ما بصورت دستی بهش دسترسی پیدا کنیم، که با استفاده از آموزش زیر میتونید به محیط کنسول دسترسی پیدا کنید.

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

سپس در پنجره ای که باز میشه، همانند تصویر زیر بروی قسمت Console کلیک نمایید.

مثال :

امتحان کنید

Free-Learn

نمایش خروجی با استفاده از ()window.print

شاید اسم این روش نشه گذاشت مثلا نمایش داده ها در خروجی ، چون این window.print خب اسمشم مشخصه دیگه ، برای پرینت زدن / گرفتن صفحه هست ، ولی خب دیگه گفتم اینم بیارم تو لیست.

خیلی راحت ما با استفاده از ۲کلمه کد میتونیم صفحه پرینت از مطالب رو درست کنیم، که کاربر بتونه مثلا با کلیک کردن بروی یک دکمه اون صفحه رو پرینت بزنه.

مثال شماره ۱ : حالت عادی و ساده

امتحان کنید

مثال شماره ۲ : چاپ زدن فقط بخش خاصی از صفحه ، وقتی بروی دکمه چاپ کلیک شد، یک پنجره ( صفحه / تب ) جدید باز میشه و فقط یه بخش خاصی از صفحه رو نمایش میده برای چاپ کردن. [ مشاهده دموی این مثال ]

امتحان کنید

Free-Learn

نکات و توضیحات

  • جهت نمایش خروجی در مرورگرها ، بیشترین استفاده از دستور innerHTML می باشد.
  • بعد از کامل شدن لود صفحه ، نباید از document.write استفاده کنید چون تمامی محتویات صفحه را پاک میکند و سپس محتوای موجود در document.write را درج میکند.
  • استفاده از console.log فقط برای اشکال زدایی یا درکل برای خطایابی می باشد.
  • یکی از جذاب ترین روش ها برای نمایش پیغام ها ( پیغام های هشدار و.. ) استفاده از ()alert می باشد.
  • وقتی در صفحه دستور پرینت / Print ارسال بشه، تمامی محتویات موجود در صفحه پرینت / چاپ میشن، خب شاید من نخوام فلان باکس یا فلان متن پرینت زده شه، پس باید از مثال شماره ۲ از window.print استفاده نماییم.

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

Free-Learn

دریافت PDF یا پرینت این مطلب