• تهرانپارس ، خ شهید محمود آمینه بزرگراه رسالت، پلاک 213، طبقه2، واحد7

  • 021-77295097 0912-8099518

  • شنبه تا پنجشنبه۹ صبح تا ۶ بعد از ظهر

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

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

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

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

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

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

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

alert box in js

استفاده از دستور ()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