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

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

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

استفاده از روش innerHTML

برای دسترسی به عناصر HTML، جاوا اسکریپت می تواند از متدهای مختلفی مانند ()getElementById استفاده کند. در مقالات بعدی ما به طور کامل در رابطه با متدها صحبت خواهیم کرد اما در این لحظه اگر بخواهیم به طور خلاصه متد را معرفی کنیم، متد مجموعه ای از دستورات است که یک وظیفه مشخص را انجام می دهند و تحت یک نام مشخص می شوند. با صدا زدن این نام آن مجموعه از دستورات اجرا می گردد. شما با استفاده از دستور document.getElementById(id) می توانید به یک عنصر HTML با id خاص دسترسی داشته باشید. هنگامی که یک صفحه وب بارگیری می شود، مرورگر یک مدل شیء از صفحه را ایجاد می کند. این مدل در حقیقت یک ساختار درختی از عناصر صفحه HTML است. با استفاده از این ساختار که به DOM نیز معروف است ما می توانیم به عناصر موجود در صفحه HTML دسترسی داشته باشیم. البته در مقالات بعد به طور کامل به مبحث DOM می پردازیم. و در این بخش تنها به جهت اینکه نحوه دسترسی به عناصر HTML را بهتر درک کنید مختصر اشاره ای به مفهوم DOM داشتیم.

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

عبارت document در ابتدای دستور document.getElementById(id) اشاره به DOM (ساختار درختی از عناصر HTML) دارد و پس از آن متد ()getElementById متدی هست که می تواند به یک عنصر در صفحه HTML با استفاده از id آن عنصر دسترسی پیدا کند. به مثال زیر دقت نمایید:

آموزش javascript

در مثال بالا با استفاده از دستور

;document.getElementById("demo").innerHTML=5+6

ما می توانیم محتوای عنصری که id آن در صفحه HTML برابر با “demo” است را برابر با 11 قرار دهیم. پراپرتی innerHTML محتوای یک عنصر HTML را مشخص می کند. خروجی دستور بالا به شکل زیر است:

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

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

برای اهداف آزمایشی شما می توانید از دستور ()document.write برای نوشتن یک متن در صفحه HTML استفاده کنید. مثال زیر نحوه استفاده از این روش را نشان می دهد:

javascript

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

innerHTML

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

document.write

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

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

شما می توانید از دستور alert برای نمایش داده به کاربران استفاده نمایید. این کار به راحتی با استفاده از متد ()alert امکان پذیر است. مثال زیر نحوه انجام این کار را نمایش می دهد:

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

خروجی کد بالا به شکل زیر خواهد بود:

alert box in js
شما می توانید از کلمه کلیدی window صرف نظر کنید. شیء window یک شیء سراسری است ، به این معنی که متغیرها ، خصوصیات و متدها به طور پیش فرض متعلق به شیء window است. بنابراین استفاده کردن از عبارت window قبل از پراپرتی ها و متدها اختیاری است.

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

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

console.log in javascript

دقت داشته باشید که خروجی مثال بالا در صفحه مرورگر نمایش داده نمی شود و برای مشاهده log شما می بایست در صفحه مرورگر راست کلیک کرده و گزینه Inspect را انتخاب نمایید.

آموزش inspect element

سپس از طریق پنجره ای که در پایین صفحه مرورگر ظاهر می شود، می بایست تب Console را انتخاب نمایید تا log موردنظر را ببینید.

inpect element in browser

استفاده از دستور print

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

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

آموزش js

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

print in javascript
آموزش طراحی سایت آموزش جاوا اسکریپت آموزش javascript دوره آموزش جاوا اسکریپت آموزش web design