آموزش جاوا اسکریپت در یازده روز – روز یازدهم(افکت ها)

چهارشنبه, ۲۲ام اردیبهشت , ۱۳۸۹ | ۲۹ دیدگاه

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

افکت امروز :  ایجاد جعبه چشمک زن

< 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 را اجرا می کند.

خوب جلسه اول افکت ها تموم شد، در هفته های بعد با افکت های جالب تری آشنا می شوید.

پستهای مرتبط :

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

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

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

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

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

آموزش جاوا اسکریپت در یازده روز – روز ششم (توابع)

آموزش جاوا اسکریپت در یازده روز – روز هفتم (حلقه های تکرار)

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

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

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

Be Sociable, Share!


۲۹ دیدگاه


  1. Mort3ZA
    ۲۲ اردیبهشت ۱۳۸۹

    جالب بود. مرسی




  2. murderer
    ۲۲ اردیبهشت ۱۳۸۹

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




  3. مهرداد فرنیا
    ۲۹ اردیبهشت ۱۳۸۹

    سلام من دانشجوی رشته it هستم باید یک وب سایت با html و java تا ۳/۳/۸۹ تحویل بدهم متاسفانه هیچ کاری نکردم اگه بخوام میتونی یه وب برام طراحی کنی که فقط به استاد ارائه کنم من شاغل هستم به همین خاطر اوضاع وقت آزادم خیلی بد است اگر هم هزینه داره اشکال نداره از خجالتت در میام فقط زود خبر بهم بده مرسی




  4. کامران
    ۲۹ اردیبهشت ۱۳۸۹

    جای این حرفها اینجا نیست دوست عزیزیو میتونی از قسمت تماس با ما نطرح کنی و دقیق ئتر عنوان کنی که به چه سایتی احتیاج داری




  5. ميلاد
    ۱ خرداد ۱۳۸۹

    سلام ممنون جالب بود من حدودا ۱ هفته هست با سایتتون آشنا شدم و تو این یک هفته تمام پست های جاوا اسکریپت و جی کوئری رو خوندم ، ممنون عاطفه خانوم ، از آقا مسیح هم ممنونم و همیطور کامران خان …

    اگر ما رو قابل بدونید شاید به شما بپیوندم ! ( آموزش php )




  6. کامران
    ۱ خرداد ۱۳۸۹

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




  7. پريا
    ۲۷ تیر ۱۳۸۹

    سلام ، راستشو بخواهید من تا حالا کار نکردم ولی تازه شروع کرده .ص -ب -گرگان




  8. عاطفه
    ۲۷ تیر ۱۳۸۹

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




  9. سارا
    ۱۱ شهریور ۱۳۸۹

    خیلی مفید بود ، ممنون




  10. فروغ
    ۱ آذر ۱۳۸۹

    سلام
    میشه لطفا فایل pdf همه جلسات رو بذارید؟ ممنون

    راستی بچه ها من photoshop رو خوب بلدم هر سوالی داشتین بپرسین ،حتما جواب میدم




  11. کامران
    ۱ آذر ۱۳۸۹

    فروغ جان بیا آموزش بده تو سایت




  12. Goback2
    ۱۴ دی ۱۳۸۹

    ممنون از استاد کوچیکتر از خودم،عاطفه جان،عالی بود




  13. امید
    ۱۷ دی ۱۳۸۹

    سلام،PDFکامل این ۱۱ جلسه رو میتونید از لینک زیر دانلود کنید:
    http://www.4shared.com/file/MQr1vLzo/JavaScript_Tutorial_By_Atefe_O.html
    موفق باشین.
    یا علی ع




  14. کامران
    ۱۷ دی ۱۳۸۹

    ممنون امید جان کار قشنگی کردی




  15. امید
    ۱۷ دی ۱۳۸۹

    خواهش میکنم کامران جان،در مقابل آموزش بی منت شما و دوستان به حساب نمیاد که.
    یا علی ع




  16. امیرحسین
    ۱۵ بهمن ۱۳۸۹

    سلام ..من طراح سایت و برنامه نویسی هستم و به صورت حرفه ای کار می کنم و به تمام زبان ها هم مسلط هستم.اگه پروژه یا هر چیز دیگه خواستید ایمیل کنید.

    با تشکر




  17. ایمان
    ۲۳ بهمن ۱۳۸۹

    سلام متاسفانه لینکی که یازده جلسه رو به صورت pdf گذاشتید ف*ی*ل*ت*ر شده و نمیشه از اون استفاده کرد
    ممنون




  18. Goback
    ۲۴ بهمن ۱۳۸۹

    سلام علیکم،
    بله مثل اینکه سایت ۴shared مشکل پیدا کرده،
    از این لینک دانلود کنید:
    Download JavaScript Tutorial-11-By Atefe




  19. Goback
    ۲۷ بهمن ۱۳۸۹

    اینم لینک علی البدل:
    🙂 Download JavaScript Tutorial-11-By Atefe




  20. Ali
    ۳ اسفند ۱۳۸۹

    سلام عاطفه خانم!
    در زمینه PHP می تونید کمکم کنید؟
    با تشکر




  21. عاطفه
    ۳ اسفند ۱۳۸۹

    سلام علی آقا
    شما سوالتون رو بپرسید بتونم کمک می کنم.




  22. Ali
    ۲۱ اسفند ۱۳۸۹

    عاطفه خانم!
    کار کردن با این نرم افزار رو خیلی دوست دارم ولی متأسفانه هیچ آشنایی اولیه ای ندارم. از کچا باید شروع کنم؟
    ممنون میشم منو راهنمایی کنید.




  23. عاطفه
    ۲ فروردین ۱۳۹۰

    علی آقا، من نرم افزار وب سرور Apache که مورد نیاز هست با توضیحاتی در مورد نرم افزار براتون ایمیل میکنم.




  24. inception
    ۲۰ فروردین ۱۳۹۰

    سلام

    مرسی از آموزش خوبتون

    عاطفه خانم قرار بود افکت های بیشتری رو آموزش بدید




  25. عاطفه
    ۲۸ فروردین ۱۳۹۰

    سلام

    بله آموزش ها قرار بود ادامه داشته باشه ولی یه مدتیه فرصت نوشتن رو ندارم. بازهم در اولین فرصت افکت های جدید رو آموزش میدم.




  26. مریم
    ۲۵ خرداد ۱۳۹۰

    مرسی خیلی خوبه
    فکر کنم این سایت تنها سایتی باشه که خیلی واضح اصول طراحی وب را توضیح می ده.

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




  27. mahsa
    ۱۱ تیر ۱۳۹۰

    salam atefe jan mamnoon misham dar rabete ba amoozeshe php rahnamaiim koniid. man mikham az paie shooroo konam baiad chi kar konam ?




  28. zaman
    ۲۵ مهر ۱۳۹۰

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




  29. fatemeh
    ۱۶ آذر ۱۳۹۰

    ممنون موفق باشید



دیدگاه خود را بنویسید