آموزش JavaScript

در این مقاله از آموزش JavaScript قصد داریم تا شما را با کاربردهای زبان برنامه نویسی جاوا اسکریپت در طراحی صفحات وب و تغییرات html و css آشنا کنیم.

 

همانطور که حتما در مثال‌های آموزش JavaScript مشاهده کردید، از عبارت document برای گرفتن یک المان html استفاده کرده بودم. شما می‌توانید یک المان html را با استفاده از نام آی دی، تگ المان، نام کلاس و css آن را در جاوا اسکریپت بگیرید.

 

انواع حالات دیگری نیز برای گرفتن مقادیر یک html قابل استفاده می‌باشد که به شما طور خاص تگ های خاصی از html را به شما می‌دهد. یکی از این موارد گرفتن کل body یک فایل html می‌باشد.

 

 

مورد بعدی گرفتن اطلاعات فرم‌های یک صفحه می‌باشد. این دستور document.forms می‌باشد.

 

 

دستور بعدی مورد استفاده برای گرفتن اطلاعات head یک فایل html می‌باشد:

 

 

مورد بعدی گرفتن عکس‌های یک صفحه html می‌باشد.

 

 

در حالت بعدی شما می‌توانید لینک‌های یک صفحه html را دریافت کنید:

 

 

مورد بعدی تگ‌های script که تگ جاوا اسکریپت می‌باشد را می‌توانید دریافت کنید.

 

 

دستور بعدی به شما مقدار title صفحه html مورد نظر را می‌دهد:

 

 

وقتی که با استفاده از دستورات بالا، المان مورد نظر را گرفتید و یا اصطلاحا انتخاب کردید، اکنون با استفاده از دستورات زیر می‌توانید مقدار html و یا css آن را تغییر دهید و یا ویژگی های خاصی به آن بدهید. مثلا اگر دکمه است، می‌توانید آن را غیر فعال کنید.

 

 

دستور innerHTML در آموزش JavaScript

اولین دستور innerHTML می‌باشد که در مثال‌ها نیز آن را مشاهده کردید. این دستور برای تغییر محتوای داخل یک المان html می‌باشد. در صورتی که مقدار به آن اختصاص ندهید، مقدار المان مورد نظر در html را به شما بر میگرداند.

بهتر است که زمانی که یک المان html را انتخاب می‌کنید، آن را در متغیر جاوا اسکریپت ذخیره کنید تا کدنویسی تمیزتر و بهینه‌تری داشته باشید:

 

 

آموزش JavaScript این قابلیت را به شما می‌دهد تا علاوه بر تغییر محتوای یک المان html، یک ویژگی خاص آن را نیز تغییر دهید. فرض کنید که یک تگ img دارید و قصد دارید تا فایل منبع عکس آن را تغییر دهید، اینکار با جاوا اسکریپت به راحتی قابل انجام می‌باشد:

 

 

در واقع هر ویژگی از هر تگی را با استفاده از نام آن و مشابه دستور بالا تغییر دهید.

همانطور که گفتم، شما با استفاده از جاوا اسکریپت می‌توانید استایل یک المان را نیز تغییر دهید. برای اینکار تنها کافیست تا با استفاده از استایل و سپس ویژگی مورد نظر، آن را مقدار دهی کنید.

 

 

شما با استفاده از جاوا اسکریپت می‌توانید قابلیت انیمیشن نیز ایجاد کنید. برای اینکار از تابع SetInterval نیاز است استفاده کنید. این تابع تا زمانی که اجرای آن قطع نشده است، در مدت زمانی که برای آن تعریف شده است، دستورات داخل آن اجرا می‌شود:

 

 

مثال استفاده از انیمیشن جاوا اسکریپت در داخل html:

 

 

مورد بعدی در آموزش JavaScript بسیار کاربردی می‌باشد. این قابلیت به شما این امکان را می دهد تا متناسب با رفتار و عمل کاربر در داخل سایت تغییرات ایجاد کنید. مثلا فرض کنید که قصد دارید تا در صورتی که کاربر بر روی دکمه‌ی خاصی بر روی صفحه کلیک کرد، تغییری در رنگ المان خاصی در صفحه ایجاد شود و یا متنی به کاربر نمایش دهد، تمامی این کارها با event ها در جاوا اسکریپت قابل تعریف می‌باشند.

 

ویدیو پییشنهادی: آموزش پیشرفته جاوا
آموزش پیشرفته جاوا

این قابلیت Event، onclick نام دارد. در کد زیر دو نمونه از آن را می‌توانید مشاهده کنید. با استفاده از متد onclick یک تابع تعریف می‌کنید و در صورتی که بروی المان مورد نظر کلیک شود، event مورد نظر اجرا می‌شود که نهایتا منجر به اجرای تابع تعریف شده برای آن می‌شود و دستورات داخل تابع در جاوا اسکریپت اجرا می‌شود.

 

متد onload و onunload

متد بعدی onload و onunload می‌باشد. این event که برای تگ body قابل تعریف می‌باشد. به شما این امکان را می‌دهد تا قبل از لود کامل صفحه و یا بعد از لود کامل صفحه، دستورات و یا تابع خاصی را اجرا کنید:

 

متد onchange در آموزش JavaScript

متد بعدی onchange می‌باشد. این متد زمانی که تغییری در المان مورد نظر ایجاد شود اجرا می‌شود. مثلا فرض کنید که کاربر در داخل یک تگ input مقداری را می‌نویسید و یا پاک می‌کند در این حالت در مقدار input مورد نظر، تغییری ایجاد می‌شود. در صورتی که متد مورد نظر برای آن تعریف شده باشد، در هر بار تغییر، این متد اجرا می‌شود.

 

متد  onmouseover و onmouseout

متد بعدی onmouseover و onmouseout می‌باشد. این دو متد در صورتی که نشانه گر موس بر روی المان قرار گیرد و یا از روی المان مورد نظر برداشته شود، دستورات تعریف شده در جاوا اسکریپت را اجرا می‌کند.

 

متد onmousedown و onmouseup در آموزش JavaScript

دو متد دیگر onmousedown و onmouseup می‌باشد. این دو متد در زمانی استفاده می‌شوند که شما کلیک سمت چپ موس بر روی یک المان html نگه دارید. در زمانی که کلیک مورد نظر را رها کنید، متد onmouseup اجرا می‌شود.

 

 

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

شما می‌توانید به جای تعریف متدهای مختلف در داخل المان html، با استفاده از addEventListener متدهای مورد نظر را فراخوانی کنید.

برای اینکار تنها کافیست تا متد مورد نظر را در پارامتر اولی این متد بنویسید و در ورودی دوم آن، تابع مورد نظرتان که قصد اجرای آن را دارید.

 

 

مثال‌هایی از این متد:

 

 

بحث بعدی در استفاده از جاوا اسکریپت در html، ساختار فرزند و والد بین المان ها می‌باشد. بدین معنا که شما فرضا قصد دارید تا به المان های داخلی یک المان دسترسی داشته باشید، برای اینکار چه باید کرد؟

برای جواب به این سوال باید به ساختار المان ها توجه کرد. به المان های داخلی یک المان، فرزندان آن المان می‌گویند و المان مورد نظر نقش والد را خواهد داشت. در صورتی که المان والد، خود نیز فرزند المان دیگر باشد، المانی که به عنوان والد، والد المان های اولیه می‌باشد، نقش جد و یا (پدربزرگ یا مادربزرگ) المان‌های فرزند اولیه را خواهد داشت. به کد و تصویر زیر توجه کنید:

 

در این مثال، المان های div و p فرزندان body می‌باشند و h1 فرزند div است. در این حالت body نقش جد (پدربزرگ یا مادربزرگ) را برای h1 خواهد داشت. علاوه بر مفهوم فرزند و والد و جد، مفهوم دیگری به نام siblings و یا برادر خواهری نیز وجود دارد.

این مفهوم در رابطه با المان هایی برقرار است که در یک نقش در رابطه با المان دیگر می‌باشند. مثلا در کد زیر div و p هر دو یک والد به نام body دارند، پس این دو المان با یکدیگر رابطه برادر خواهری و یا همان siblings خواهند داشت. شما هم می‌توانید تمامی برادر خواهر ها را با siblings بگیرید و هم با sibling تنها یک برادر یا خواهر را بگیرید.

 

 

 

برای رسیدن به فرزند، والد و یا خواهر برادر در آموزش JavaScript متدهای مشخصی تعریف شده است. متدها را با کدی که مثال زدم بررسی می‌کنیم. شما می‌توانید یک فرزند خاصی را انتخاب کنید و یا با متد مشخص اولین یا آخرین فرزند از یک والد را انتخاب کنید. در مثال زیر، خط اول مقدار html المان html با آیدی demo را به شما می‌دهد. خط بعدی مقدار اولین فرزند المان پدر آن (المان با آیدی demo) را به شما می‌دهد. خط آخر نیز مشابه خط بالای خود می‌باشد با این تفاوت که در این حالت شما می‌توانید به جای فرزند اول، فرزند دوم و یا سایر فرزندها را انتخاب کنید.

 

همانطور که در مثال مشاهده کردید، برای گرفتن مقدار یک فزرند از nodeValue استفاده شده است. اگر شما قصد دارید تا نام تگ فرزند را دریافت کنید، از nodeName باید استفاده کنید. دقت کنید که nodeName در حالت های مختلف می‌توانید مقدارهای مختلفی بدهد:

  • مقدار nodeName تنها قابل خواندن می‌باشد و قابل تغییر مقدار آن وجود ندارد.
  • در صورتی که یک المان انتخاب شود، نام تگ آن را به شما می دهد.
  • در صورتی که ویژگی انتخاب شود، نام ویژگی مورد نظر برگردانده می شود.

برای nodeValue نیز شرایط زیر حاکم می‌باشد:

  • در صورت انتخاب یک المان مقدار آن null خواهد بود.
  • در صورتی که المان مورد نظر متن داشته باشد، متن آن باز گردانده می‌شود.
  • در صورتی که ویژگی باشد، مقدار ویژگی مورد نظر بازگردانده می‌شود.

خب تا به اینجا در رابطه با رابطه‌ی المان ها با یکدیگر و نحوه‌ی گرفتن آن را صحبت کردیم. اکنون علاوه بر این مورد، شما می‌توانید حتی یک المان html را با استفاده از دستور جاوا اسکریپت بسازید. در مثال زیر، در ابتدا یک المان از نوع p ساخته می‌شود. سپاس برای المان مورد نظر قصد داریم تا یک متن داشته باشیم، برای اینکار از دستور createTextNode استفاده می شود و سپس متن مورد نظر، به المان ساخته شده، اضافه می‌شود.

در واقع در اینجا سه دستور داشتیم:

  • createElement که با استفاده از آن می‌توانید یک المان بسازید.
  • createTextNode که با استفاده از آن یک متن می‌توانید ایجاد کنید. توجه کنید که برای اینکه این مورد اثر بذارد باید آن را بک المان اضافه کنید.
  • دستور appendChild که با استفاده از آن می‌توانید متن یا المانی را به المان دیگر و یا به صفحه html اضافه کنید.

دستور appendChild نکته‌ای که دارد این می باشد که با استفاده از این دستور المان مورد نظر به عنوان آخرین فرزند المان اولیه اضافه می‌شود. برای اینکه المان مورد نظر را در جای مشخصی اضافه کنید، از دستور دیگری به نام insertBefore استفاده می شود. با استفاده از این دستور می‌توانید یک المان را در مکان مشخصی و قبل از المان دیگری قرار دهید.

همانطور که دستوری برای ساخت یک المان وجود دارد، دستور دیگری نیز برای حذف یک المان وجود دارد. این دستور remove() می‌باشد.

دستور دیگری نیز وجود دارد که با استفاده از آن می‌توانید فرزند خاصی از یک والد را حذف کنید. این دستور removeChild می‌باشد که در داخل این دستور، فرزند مورد نظر را قرار می دهید.

دستور بعدی در این رابطه، امکان جایگزینی یک المان با المان دیگر می‌باشد. برای اینکار از دستور replaceChild باید استفاده کنید که دو مقدار دریافت می‌کند. مقدار اول المان جدید و مقدار دوم المانی که جایگزین می‌شود می‌باشد.

در این سه مقاله در تلاش بودم تا شما با زبان برنامه نویسی جاوا اسکریپت و قابلیت های آن و استفاده از آن در HTML آشنا شوید، زبان برنامه نویسی جاوا اسکریپت قابلیت‌ها و پیچیدگی‌های بسیاری دارد که در زمانی که وارد کد نویسی و اجرای برنامه‌ها با استفاده از این زبان برسید، با این قابلیت‌ها و پیچیدگی های این زبان آشنا می‌شوید.