در این جلسه با روش ساخت افکت آشنا میشویم. با یک افکت ساده شروع می کنیم. در این مبحث می آموزیدکه چطور با دستوراتی که تاکنون یادگرفتین یک افکت ساده ایجاد کنید.
افکت : ایجاد جعبه چشمک زن
| ۱ < html > ۲ < body > ۳ < table border=”0″ width=”280″ id=”table1″ align=”center” ۴ style=”border:5px solid gold” > ۵ < tr > ۶ < td > متن مورد نظر < /td > ۷ < /tr > ۸ < /table > |
این قسمت مربوط میشه به کدنویسی html که با این خطوط ما یک جدول با خصوصیات دلخواه (با حاشیه ای به پهنای ۵ پیکسل به صورت تک خط، با رنگ طلایی) ایجاد کردیم. با خصوصیت id ،
برای جدول یک نام تعیین می کنیم تا در قسمت های بعدی از آن استفاده کنیم. حالا برای تکمیل کار، اسکریپت زیر را به برنامه اضافه می کنیم.
| ۰۱ <span style=”font-family: tahoma; font-size: 13px;”>< script language=”JavaScript” ><span> </span> ۰۲ function effect()<span> </span> ۰۳ {<span> </span> ۰۴ if(table1.style.borderColor.indexOf(“gold”)!=-1)<span> </span> ۰۵ table1.style.borderColor=”red”;<span> </span> ۰۶ else<span> </span> ۰۷ table1.style.borderColor=”gold”;<span> </span> ۰۸ }<span> </span> ۰۹ setInterval(“effect()”,500)<span> </span> ۱۰ < /script ><span> </span> ۱۱ < /body ><span> </span> ۱۲ < /html ><span> ۱۳ </span></span> |
در ابتدا یک تابع با نام effect ایجاد می کنیم که در آن با استفاده از دستور شرطی if خصوصیت رنگ دور جدول را بررسی می کنیم. در خط سوم برای بررسی اینکه آیا رنگ حاشیه جدول
طلایی است یا نه از دستور indexOf استفاده کردم.
دستور indexOf: این خصوصیت محل وقوع رشته ای(متنی) که در پرانتز آن می نویسیم را برمی گرداند که اگر این رشته موجود نباشد مقدار ۱- را برمی گرداند.
در خط سوم تعیین کردم که اگر رنگ حاشیه جدول طلایی بود، آن را به قرمز تغییر دهد، در غیر این صورت(خط ۵و۶) یعنی اگر قرمز بود، آن را دوباره طلایی کند.
توجه کنید اگر خط سوم به صورت زیر نوشته می شد:
| ۱ if(table1.style.borderColor.indexOf(“gold”) =-1) |
یعنی اگر رنگ حاشیه جدول طلایی نبود! چون مقدار را برابر ۱- قرار دادیم، یعنی وقتی که خصوصیت یعنی وقتی که خصوصیت indexOf رشته ی gold را پیدا نکرد.
و در آخر با استفاده از setInterval یک فاصله ی زمانی ایجاد کردیم که در هر نیم ثانیه یک بارتابع effect را اجرا می کند.
