آموزش جاوا اسکریپت بخش دوم – خروجی در جاوا اسکریپت

تاریخ انتشار:
بازدید: 3,502 بازدید

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

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

  1. نمایش درون یک تگ html با استفاده از دستور innerHTML
  2. نمایش آن در یک سند HTML ای با استفاده از دستور write()
  3. نمایش درون یک باکس هشدار (alert box) با استفاده از دستور alert()
  4. نمایش درون کنسول مرورگر با استفاده از دستور log()

 

روش اول نمایش درون یک تگ html با استفاده از دستور  innerHTML

در این روش با استفاده از دستور  innerHTML و فراخوانی یکی از تگ های مورد نظر در پروژه (سند اچ تی ام ال) محل نمایش کدهای جاوا اسکریپت را مشخص می کنیم. به بیان ساده تر در ابتدا یکی از تگ های اچ تی ام ال را انتخاب می کنیم سپس با استفاده از دستور  innerHTML و نوشتن کدها به مرورگر می فهمانیم که نتیجه دستورات نوشته شده را باید درون تگ مورد نظر نمایش دهد.

به عنوان مثال قصد داریم حاصل جمع دوعدد ۵ و ۶ را درون تگ p که دارای آی دیِ test می باشد نمایش دهیم.

<!DOCTYPE html>
<html>
<body>
<p id=”test”></p>
<script>
        document.getElementById(“test”).innerHTML=5+6;
</script>
</body>
</html>

 

نکته: برای دسترسی به یک عنصر اچ تی ام ال (html tag) در جاوا اسکریپت از دستور getElementById()  استفاده می نماییم. به این صورت که برای تگ مورد نظر یک id مشخص می نماییم و با دستور فوق تگ مورد نظر را فراخوانی می نماییم.

نکته: تغییر ویژگی داخل یک عنصر HTML، یک روش رایج و معمول برای نمایش داده ها در خروجی است.

 

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

در این روش برای نمایش خروجی در جاوا اسکریپت کافیست تا کد مورد نظر را درون ()document.writeقرار دهید تا درون سند اچ تی ام ال در مرورگر نمایش داده شود.

به عنوان مثال قصد داریم حاصل جمع 5 و 6 را در مرورگر نمایش دهیم:

<!DOCTYPE html>
<html>
<body>

<script> 
document.write(5+6);
</script>

</body>
</html>

 

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

<!DOCTYPE html>
<html>
<body>
<h1> سایت وب رسام</h1>
<p>طراحی سایت، مدیریت شبکه های اجتماعی</p>
<button type="button" onclick="document.write(5+6)">کلیک کنید</button>
</body>
</html>

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

 

 

روش سوم نمایش درون یک باکس هشدار (alert box) با استفاده از دستور  ()window.alert

در این روش نتیجه خروجی جاوا اسکریپت درون یک باکس هشدار بصورت پاپ آپ نمایش داده می شود.

به عنوان مثال قصد داریم حاصل جمع دو عدد 5 و 6 در خروجی بصورت alert نمایش داده شود.

<!DOCTYPE html>
<html>
<body>
<script> window.alert(6+5); </script>
</body>
</html>

 

نکته: می توان از نوشتن window قبل از alert صرف نظر کرد. چرا که در جاوا اسکریپت شیء window یک حوزه و قلمرو جهانی است. به این معنی که متغیرها، خصوصیات و روش ها بصورت پیش فرض به شیء window تعلق دارند. پس نوشتن آن بصورت اختیاری است.

 

روش چهارم نمایش درون کنسول مرورگر با استفاده از دستور ()console.log

با استفاده از این روش می توان داده ها و اطلاعات را در قسمت console مرورگر نمایش داد. این راه بیشتر با هدف اشکال یابی در پروژه ها استفاده می گردد.

<!DOCTYPE html>
<html>
<body>
<script> Console.log(5+6); </script>
</body>
</html>

با زدن F12 در مرورگر و رفتن به تب console می توانیم خروجی را مشاهده نماییم.

چاپ در جاوا اسکریپت                   

جاوا اسکریپت هیچ گونه چاپ یا روش چاپی ای ندارد و از طریق آن نمی توان به هیچ دستگاه خروجی ای دسترسی داشت.

تنها استثناء و راه حل این است که با استفاده از دستور ()window.print در مرورگر محتوای پنچره فعلی را چاپ و یا سیو(save)  نمایید.

<!DOCTYPE html>
<html>
<body>
<h2>سایت وب رسام</h2>
<p>برای چاپ این صفحه روی دکمه ی زیر کلیک نمایید</p>
<button onclick="window.print()">چاپ این صفحه  </button>
</body>
</html>

 

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

آموزش جامع جاوا اسکریپت

 

ادامه مطلب

نوشته قبلی

آموزش جاوا اسکریپت بخش اول – مقدمه + ساختار