در این جلسه می خواهیم با اشیا و رفتارهای(متد) آن آشنا بشیم و در مورد رویدادهایی که برای هر شی ممکن است اتفاق بیافتد صحبت کنیم. می تونید دموی دستورات این جلسه رو در قسمت زیر ببینید ولی پیشنهاد می کنیم ابتدا مطالب را به طور کامل بخوانید بعد دمو آن را مشاهده کنید.
مباحثی که در این جلسه می خوانیم:
آشنایی با مفاهیم جدید
اشیاء در جاوا اسکریپت
شیء window
شیء document
نحوه استفاده از رویدادها
بخش اول: مفاهیم
اشیاء(Objects): با مفهوم شیء در دنیای واقعی آشنا هستید، ما در همین صفحه ای که مشاهده می کنید و در برنامه نویسی نیز با اشیاء روبه رو هستیم. مثلا پنجره ها، دکمه ها، کادرهای متن تصاویر و همین صفحه(سند) نیز خود یک شیء هستند.
رویدادها(Events): رویدادها را در واقع من و شما(کاربر) ایجاد می کنیم، در واقع رویدادها همان اتفاقاتی هستند که شیء با آن رو به رو است. مثلا رویداد کلیک کردن: این رویداد ممکن است برای یک دکمه یا یک تصویر(شیء) اتفاق بیافتد. حرکت موس، باز کردن یک پنجره، بستن یک پنجره و… همه یک رویداد هستند، حتی قرار گرفتن موس روی یک عکس یا خارج شدن موس از روی عکس نیز یک رویداد برای عکس محسوب می شود.
متدها(Method): متدها رفتارهایی هستند که اشیا در مقابل رویدادها از خود نشان می دهند.مثلا با کلیک بر روی یک دکمه(رویداد onClick) پنجره جدیدی باز شود(متد openبرای شیء پنجره).همانطور که متوجه شدید هر شیء متدهای خاص خود را دارد. فراموش نکنید که همه متدها به یک علامت () ختم می شوند، حتی اگر مقداری در آنها قرار نگیرد.
خصوصیات(Peroperties): هر شیء علاوه بر متد دارای خصوصیات خاصی نیز می باشد، همانطور که هر فرد دارای خصوصیات و ویژگی های خاص مثل رنگ چشم، رنگ پوست، قد و… است. مثلایک صفحه(سند) که یک شیء می باشد خصوصیاتی همچون رنگ زمینه، رنگ متن، نام و… را دارد.
رویدادها:
onClick
کلیک کردن
onDblclick
دابل کلیک کردن
onDragstart
کشیدن یک شیء و رهاکردن آن در مقصد
onMoseover
ورود موس در ناحیه یک شیء
onMouseout
خروج موس از روی شیء
onMousemove
حرکت کردن موس
onKeypress
فشردن یکی از کلیدهای صفحه کلید
onKeydown
پایین آمدن یکی از کلیدهای صفحه کلید
onKeyup
بالا آمدن یکی از کلیدهای صفحه کلید
onLoad
باز شدن (پنجره، سند) “عمومی”
onUnload
بسته شدن (عمومی)
onFocus
انتخاب یک شیء-(فعال شدن) “عمومی”
onBlur
برگشت از فوکوس (عمومی)
onError
به وجود آمدن یک خطا (عمومی)
onSelect
انتخاب محتویات یک شیء(مثل کادر متن)” عمومی”
جدول ۱- ۴
نکته: اگر توجه کرده باشید شش رویداد اول مربوط به موس و سه رویداد بعد مربوط به کیبورد هستند اما سایر رویدادها عمومی می باشند، مثلا رویداد onLoad می تواند مربوط به یک پنجره یا یک سند باشد.
بخش دوم: اشیاء در جاوا اسکریپت
اشیاء در جاوا اسکریپت دو دسته اند: دسته اول اشیایی هستند که به محیط اجرای جاوا اسکریپت طعلق دارند(اشیای مرورگر)، دسته دوم اشیایی که از قبل در خود جاوا اسکریپت تعریف شده اند (اشیای درون ساخت). ما در این جلسه به توضیح دسته اول یعنی اشیای مرورگر می پردازیم.در جدول ۱- ۴ لیستی از این اشیاء را مشاهده می کنید. که در ادامه با بعضی از این اشیاء آشنا می شوید.
نام شیء
کاربرد
window
دسترسی به پنجره مرورگر
document
دسترسی به سند موجود در پنجره
history
دسترسی به سابقه ای از urlهای استفاده شده در پنجره
frame-frames
دسترسی به فریم HTML- دسترسی به فریم های HTML
form-forms
دسترسی به فرم HTML- دسترسی به فرم های HTML
image
دسترسی به شی ء موجود در سند
link
دسترسی به پیوند متن
text
دسترسی به فیلد متنی در فرم داخل صفحه
textarea
دسترسی به فیلد ناحیه متنی در فرم
radio
دسترسی به مجموعه ای از دکمه های رادیویی(option button) در فرم
checkbox
دسترسی به کادرهای علامت در فرم
button
دسترسی به دکمه ها در فرم (همه دکمه ها غیر از Submit و Reset)
password
دسترسی به فیلد password در فرم
hidden
دسترسی به فیلد مخفی در فرم
navigator
دسترسی به اطلات مرورگری که کاربراز آن استفاده می کند
screen
دسترسی به اطلاعاتی در مورد اندازه و عمق رنگ صفحه نمایش کاربر
جدول ۲- ۴
بخش سوم: پنجره ها (شیء window)
این شیء یک شیء سطح بالاست، برای هر پنجره ای که ما باز می کنیم یک شیء window ایجاد می شود. حالا که با مفهوم متد و خصوصیت اشیاء آشنا شدید، پس به برخی متدها و خصوصیات این شیء می پردازیم.
متد
خصوصیت
alert()
closed
prompt()
defaultStatus
confirm()
name
close()
location
open()
history
setTimeout()
status
clearTimeout()
window
setInterval()
self
clearInterval()
scroll()
متدها:
Prompt ,alert: با این دو دستور در جلسه قبل آشنا شدید، این دو دستور هر دو یک کادر پیام را نمایش می دهند با این تفاوت که با دستور prompt می توان داده ای را نیز از کاربر دریافت کرد.
همانطور که در جدول بالا مشاهده کردید alert یک متد یارفتار برای شیء window می باشد، یعنی این شیء (پنجره) در مقابل رویدادی خاص مثلا رویداد onClick یک دکمه (کلیک کردن روی یک دکمه)
می تواند این رفتار را از خود نشان دهد(ایجاد کادر پیام). از متدهای یک شیء به این صورت استفاده می شود: نام شیء + نقطه + نام متد + () که در این پرانتز پارامترهای آن متد قرار می گیرد.
۱window.alert ("message"); |
به دو خط کد زیر توجه کنید:
|
این دو دستور هر دو یک کار ار انجام می دهند و هر دو درست می باشند. در تعریف شیء window گفتیم این شیء سطح بالاست، یعنی این شیء در بالاترین سطح قراردارد. پس اگر متدی را بدون نام شیء به کار ببریم جاوا اسکریپت آن را به بالاترین شیء یعنی window نسبت می دهد. اما در مورد سایر اشیاء نوشتن نام آن شیء قبل از متد ضروری می باشد همانند دستور دوم.
نکته: جاوا اسکریپت به فضای خالی حساسیت نشان نمی دهد، پس برای وضوح بیشتر می توانید در تایپ دستورات از فضای خالی استفاده کنید. دو دستور زیر هر دو صحیح می باشند:
|
Confirm: این متد نیز برای نمایش یک کادر پیام به کاربر استفاده می شود اما با انتخاب این دستور می توانیم امکان دو انتخاب را برای کاربر فراهم کنیم، confirm کادری را با دو دکمه okو cancel نمایش می دهد و از این طریق می توان روی انتخاب کاربر کنترل داشت.
مثال: می خواهیم صفحه ای ایجاد کنیم که پس از ورود کاربر به آن صفحه، کادری به او نمایش دهیم و از او بپرسیم ” آیا شما مایلید رنگ صفحه را تغییر دهید؟ ” و با انتخاب دکمه ok توسط کاربر، رنگ زمینه صفحه تغییر کند و با انتخاب cancel رنگ زمینه به همان صورت سفید باقی بماند. برای این کارنمی توان از دستور alert و prompt استفاده کرد وباید ازconfirm استفاده کنیم.
۱Confirm (" Do you want change background color ? "); c= var |
دستورconfirm دو مقدار (true درصورت انتخاب ok) یا false (با انتخاب cancel) را برمی گرداند و با ریختن آن در یک متغیر می توان روی انتخاب کاربر کنترل داشت. البته این مثال نیاز به دستورات دیگری نیز دارد و در جلسه پنجم (دستورات شرطی) این مثال را نیز اجرا خواهیم کرد.
Close:حالا که با طریقه استفاده از رویدادها آشنا شدید متد close رو هم در مثال زیر تمرین میکنیم.این متد پنجره باز را میبندد. در این مثال با فشردن دکمه open صفحه جدیدی باز می شود و در صفحه جدید با زدن دکمه close پنجره جدید بسته میشود. برای دکمه close صفحه جدید از دستور زیر استفاده میشود. نتیجه
نکته: بسته به نوع مرورگر شما، این دستور ممکن است قبل از بستن پنجره با یک کادر پیام از شما بخواهد که بسته شدن را تایید کنید.
|
open: ایجاد یک پنجره جدید. این متد سه پارامتر دارد: پارامتر اول آدرس پنجره جدید، آرگومان دوم، نام پنجره و در آرگومان سوم می توانیم یک یا چندین گزینه از گزینه های موجود در جدول زیر را قرار دهیم.
|
گزینه |
مقدار |
تعیین می کند که |
|
toolbar |
yes -no |
پنجره جدید دارای نوار ابزار باشد یا نه |
|
menubar |
yes -no |
پنجره جدید دارای نوار منو باشد یا نه |
|
scrollbar |
yes -no |
پنجره جدید دارای نوارهای حرکتی باشد یا نه |
|
location |
yes -no |
پنجره جدید دارای نوار آدرس باشد یا نه |
|
resizable |
yes -no |
اندازه پنجره جدید قابل تغییر باشد یا نه |
|
status |
yes -no |
پنجره جدید دارای نوار وضعیت باشد یا نه |
|
width |
یک عدد صحیح | عرض پنجره چه اندازه باشد |
|
height |
یک عدد صحیح |
ارتفاع پنجره چه اندازه باشد |
جدول ۴- ۴
به دستور زیر توجه کنید:
|
این دستور یک پنجره جدید را ایجاد می کند، اگر در پارامتر اول به جای آدرس url صفحه مورد نظر ، از رشته خالی ” ” استفاده کنید با باز کردن مرورگر، صفحه ای که فایل Html شما قرار دارد را باز می کند.
در پارامتر دوم نام myPage را برای پنجره جدید قرار دادیم و در پارامتر سوم مشخص کرده ایم که پنجره جدید دارای نوار منو و نوارابزار باشد، بنابراین پنجره ما سایر گزینه ها را ندارد مثلا نوار وضعیت را ندارد، قابل تغییر اندازه نمی باشد و… . دستور زیر هم معادل دستور بالایی است.
۱win1 =window.open (" " , " myPage " , toolbar=1 , status=1); var |
ر این متد عدد یک معادل yes و عدد صفر معادل no است.
اما شاید بپرسید در این دستورها چه نیازی به متغیر می باشد؟ در اینجا شیء ایجاد شده در متغیر ریخته می شود و از این پس خصوصیات این پنجره جدید را توسط این متغیر تغییر می دهیم و متدها را نیز به آن نسبت می دهیم . مثلا اگر بخواهیم در این پنجره جدید یک کادر پیام ایجاد کنیم از نام این پنجره(myPage)استفاده نمی کنیم بلکه از نام متغیر(win1) کمک می گیریم. همانطور که قبلا نیز اشاره شد برای استفاده از متدها باید نام شیء قبل از آن ذکر شود، که نام شیء در این دستور متغیر win1 است.
۱Win1.alert(" message"); |
در مثال های قبلی همچون مثال window.close() ما از کلمه window که نام شیء است استفاده کردیم نه از نام پنجره! ممکن است این پنجره نام هایی مانند my site ، homepage، index و یا … باشد ولی ما با نام پنجره کاری نداریم و از نام شیء کمک می گیریم.
یک نکته دیگه اینکه، نامی که شما برای صفحه انتخاب می کنید را نمی توانید مشاهده کنید و متنی که در بالای هر صفحه می بینید عنوان صفحه(title) است نه نام(name) پنجره.حالا کد زیر را بنویسید و نتیجه را مشاهده کنید.
۱var win1= window.open( "http://www.google.com " , "newWindow" ); |
clearTimeout , setTimeout: این متد در واقع یک مهلت زمانی برای کاربر ایجاد می کند. و متد clearTimeout این مهلت زمانی را از کاربر می گیرد.
مثال: صفحه ای داریم با یک دکمه با نام color، می خواهیم اسکریپتی بنویسیم که اگر کاربر در مدت ۱۰ ثانیه روی آن کلیک نکند پیامی به او نمایش دهد که “شما مایل به تغییر رنگ صفحه نیستید.” و اگر در این ۱۰ ثانیه روی آن دکمه کلیک کرد، رنگ زمینه صفحه تغییر کند و پیامی با متن ” تغییر ایجاد شد” را نمایش دهد. برای نوشتن این دستور از این دو متد استفاده می شود که در فصل ۶با کمک این دو متد و تابع ها این دستور را اجرا می کنیم.
clearInterval , setInterval: با کمکsetInterval می توانیم یک دستور را در یک فاصله زمانی مشخص تکرار کنیم. که این متد برای ایجاد انیمیشن ها بسیار مفید است، مثلا باکمک این متد میشه تعیین کنیم که تصویر داخل صفحه هر ۵ ثانیه یک بار کمی به سمت راست حرکت کند. و متد clearInterval در واقع باعث توقف کار می شود.
scroll: اگر صفحه ای داشته باشیم که محتویات آن زیاد باشد با کمک این متد می تونیم مشخص کنیم که پس از باز کردن مرورگر، در کجای صفحه قرار بگیریم.
خصوصیات:
Closed: این خصوصیت مشخص می کند که آیا پنجره بسته است یا نه، در صورت بسته بودن پنجره مشخص شده مقدار true و در صورت باز بودن آن مقدار false را برمی گرداند.
نکته: خصوصیات به صورت متدها نوشته می شوند با این تفاوت که پرانتز و پارامتری ندارند.
در مثال های قبلی همچون مثال window.close() ما از کلمه window که نام شیء است استفاده کردیم نه از نام پنجره! ممکن است این پنجره نام هایی مانند my site ، homepage، index و یا … باشد ولی ما با نام پنجره کاری نداریم و از نام شیء کمک می گیریم.
یک نکته دیگه اینکه، نامی که شما برای صفحه انتخاب می کنید را نمی توانید مشاهده کنید و متنی که در بالای هر صفحه می بینید عنوان صفحه(title) است نه نام(name) پنجره.حالا کد زیر را بنویسید .
۱document.write (window.closed); |
document یکی دیگر از اشیای جاوا اسکریپت می باشد و write یکی از متدهای آن است که هر چیز را که در پرانتز آن قرار بگیرد روی سند می نویسد. در این دستور جوابwindow.closedرا در صفحه می نویسد. که نتییجه آن false است به دلیل اینکه پنجره نام برده شده باز است.
Name:با این متد می توان نامی برای پنجره مشخص کرد.
۱Window.name="HomePage"; |
همانطور که گفته شد شما نام صفحه را نمی توانید مشاهده کنید ولی برای مشاهده ایجاد تغییرات می شود از شیء document کمک گرفت.
|
در خط اول نامی را برای پنجره تعیین کرده و در خط دوم این نام را در یک متغیر قرار داده ایم و توسط متد Write شیء document آن را در صفحه نمایش می دهیم. که در پارامتر متد write رشته ی window.name= یک عبارت ثابت است و متغیر w نام پنجره را برمی گرداند. این دستورات را در تگ script بنویسید، تغیرات را save کنید
.
defaultStatus: با این متد می توانیم عبارت موجود در نوار وضعیت را تغییر دهیم.
window.defaultStatus ="Welcom to my WebSite"
