این آموزش در تاریخ ۱۴۰۱/۰۲/۲۲ آپدیت شده است.
نحوه نمایش خروجی داده ها در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه نمایش خروجی داده ها در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه نمایش خروجی داده ها در جاوااسکریپت
فرض میکنیم میخوایم یه پیغامی یا یه متنی چیزی رو در خروجی ( منظور از خروجی یعنی در مرورگرها ) به نمایش درآوریم، خب باید چجوری اینکارو انجام بدیم؟!
خب خیلی راحت میتونیم با استفاده از روش های زیر خروجی مون رو در مرورگرها به نمایش درآوریم، که این روش ها به شرح زیر می باشند :
- نمایش خروجی با استفاده از innerHTML
- نمایش خروجی با استفاده از ()document.write
- نمایش خروجی با استفاده از ()alert
- نمایش خروجی با استفاده از ()console.log
- نمایش خروجی با استفاده از ()window.print
Free-Learn
نمایش خروجی با استفاده از innerHTML
ما به راحتی با استفاده از innerHTML میتونیم خروجی هامون رو در درون خوده عنصر ( منظور در خوده تگ ها ) به نمایش درآوریم ، یعنی بطور کلی خروجی در خوده همون تگ ریخته و نمایش داده میشه.
مثال شماره ۱ : نمایش یک متن در تگ h2 که دارای ID بنام Result می باشد
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <h2 id="Result"></h2> <script> document.getElementById("Result").innerHTML = "سلام خوبی؟"; </script> </body> |
مثال شماره ۲ : بدست آوردن محتوای درون یک تگ و سپس نمایش آن در یک تگ دیگه
|
1 2 3 4 5 6 7 |
<script> var myText; myText = document.getElementById("MyText").innerHTML; document.getElementById("Result").innerHTML = myText; </script> |
Free-Learn
نمایش خروجی با استفاده از ()document.write
در این روش ، ما میتونیم خروجی رو در سند ( منظور همون صفحه وب جاری مون ) به نمایش درآوریم ، ولی یه نکته مهم در اینباره وجود داره که باید حتما بهش توجه داشته باشید.
نکته : اگه بعد از لود شدن کامل صفحه ( یعنی مثلا صفحه لودش کامل شده ، بعد میخوایم روی یه دکمه کلیک شه ، اینجا دیگه محتوا دکمه میشه محتوای بعد از لود صفحه ) ، از document.write استفاده کنیم ، اول هرچیزی که درون صفحه باشه رو پاک میکنه بعدش خروجی در کل صفحه وب چاپ میشه.
با توجه به اینکه در این روش همه چیز در صفحه از بین میره و خروجی چاپ میشه ، لذا سعی کنید فقط برای اهداف تست یا آزمایش از این روش استفاده نمایید.
مثال شماره ۱ : وقتی بروی دکمه کلیک شه ، تمامی چیزایی که درون صفحه وجود داره پاک میشه و محتویات document.write چاپ میشه.
|
1 2 3 4 5 6 7 8 9 |
<script> function test(){ document.write("سایت آموزشی فری لرن"); document.write("<br>"); document.write("سایت آموزشی فری لرن"); } </script> |
مثال شماره ۲ : استفاده مستقیم و همزمان از document.write بدون اینکه همه محتوای موجود در صفحه پاک بشه ، چون محتوای document.write با صفحه بصورت همزمان لود میشه پس دیگه کل صفحه رو پاک نمیکنه.
|
1 2 3 4 5 6 7 |
<script> document.write("سایت آموزشی فری لرن"); document.write("<br>"); document.write("سایت آموزشی فری لرن"); </script> |
Free-Learn
نمایش خروجی با استفاده از ()alert
خب دوستان در ادامه آموزش نحوه نمایش خروجی داده ها در جاوااسکریپت میخوایم در ادامه با دستور معروف ()alert آشنا بشیم ، فک کنم این روش رو خیلی جاها دیده باشید، که مثلا یک باکس ( یا پیغام ) بصورت یک پنجره بازشو یا بصورت پنجره هشدار نمایش داده میشه ، اینم یکی دیگه از روش های نمایش داده ها در خروجی می باشد.
مثال شماره ۱ : نمایش یک متن ساده بصورت مستقیم با لود شدن صفحه
|
1 2 3 4 5 |
<script> alert("سلام به سایت من خوش اومدی"); </script> |
مثال شماره ۲ : نمایش یک متن ساده بصورت غیر مستقیم ( یعنی با کلیک بروی یک دکمه پیغام نمایش داده میشه )
|
1 2 3 4 5 6 7 |
<script> function MyMessage(){ alert("سلام به سایت من خوش اومدی"); } </script> |
Free-Learn
نمایش خروجی با استفاده از ()console.log
کنسول یا Console به یک محیط یا فضای داخل مرورگر گفته میشه که معمولا این فضارو بهش میگن محیط اشکال زدایی یا به انگلیسی debug ( دیباگ ) ، حال ما میتونیم با استفاده از همین فضا داده هارو در خروجی به نمایش درآوریم.
محیط کنسول مرورگرها در حالت عادی قابل نمایش نیست و باید حتما ما بصورت دستی بهش دسترسی پیدا کنیم، که با استفاده از آموزش زیر میتونید به محیط کنسول دسترسی پیدا کنید.
برای دسترسی به محیط کنسول در مرورگرهای گوگل کروم و فایرفاکس ، در یک جای خالی از صفحه مرورگر کلیک راست نمایید و سپس بروی گزینه Inspect یا Inspect Element کلیک نمایید.
سپس در پنجره ای که باز میشه، همانند تصویر زیر بروی قسمت Console کلیک نمایید.
مثال :
|
1 2 3 4 5 6 |
<script> console.log("سایت آموزشی فری لرن"); console.log(5 + 5); </script> |
Free-Learn
نمایش خروجی با استفاده از ()window.print
شاید اسم این روش نشه گذاشت مثلا نمایش داده ها در خروجی ، چون این window.print خب اسمشم مشخصه دیگه ، برای پرینت زدن / گرفتن صفحه هست ، ولی خب دیگه گفتم اینم بیارم تو لیست.
خیلی راحت ما با استفاده از ۲کلمه کد میتونیم صفحه پرینت از مطالب رو درست کنیم، که کاربر بتونه مثلا با کلیک کردن بروی یک دکمه اون صفحه رو پرینت بزنه.
مثال شماره ۱ : حالت عادی و ساده
|
1 |
<button onclick="window.print();">برای چاپ این صفحه کلیک کنید</button> |
مثال شماره ۲ : چاپ زدن فقط بخش خاصی از صفحه ، وقتی بروی دکمه چاپ کلیک شد، یک پنجره ( صفحه / تب ) جدید باز میشه و فقط یه بخش خاصی از صفحه رو نمایش میده برای چاپ کردن. [ مشاهده دموی این مثال ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> function printPage() { // اون باکسی که باید پرینت گرفته شه var mycontent = document.getElementById("mybox").innerHTML; // فراخوانی هد صفحه فعلی در صفحه پرینت var head = document.getElementsByTagName("head")[0].innerHTML; // فراخوانی عنوان صفحه var mytitle = document.getElementsByTagName("title")[0].innerHTML; // ایجاد یک صفحه / پنجره جدید var myWindow = window.open('','',''); // ریختن محتوایی که باید چاپ شه در صفحه چاپ myWindow.document.write("<html><head><p class='mysite'>"+mytitle+"</p>"+head+"</head><body><p class='mysite'>سایت آموزشی فری لرن</p><div class='mybox'>"+mycontent+"</div><p class='mysite'>سایت آموزشی فری لرن</p></body></html>"); myWindow.print(); } </script> |
Free-Learn
نکات و توضیحات
- جهت نمایش خروجی در مرورگرها ، بیشترین استفاده از ویژگی innerHTML می باشد.
- بعد از کامل شدن لود صفحه ، نباید از document.write استفاده کنید چون تمامی محتویات صفحه را پاک میکنه و سپس محتوای موجود در document.write را درج میکند.
- استفاده از console.log فقط برای اشکال زدایی یا درکل برای خطایابی می باشد.
- یکی از جذاب ترین روش ها برای نمایش پیغام ها ( پیغام های هشدار و.. ) استفاده از ()alert می باشد.
- وقتی در صفحه دستور پرینت / Print ارسال بشه، تمامی محتویات موجود در صفحه پرینت / چاپ میشن، خب شاید من نخوام فلان باکس یا فلان متن پرینت زده شه، پس باید از مثال بالا استفاده نماییم.
پایان آموزش نحوه نمایش خروجی داده ها در جاوااسکریپت
