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

سفارش طراحی سایت

نمونه کار طراحی سایت

تعرفه و لیست قیمت طراحی سایت



آموزش ایجاد دکمه توسط جاوا اسکریپت
مقالات آموزشی - آموزش طراحی سایت
نوشته شده توسط مدیر   
چهارشنبه, 03 خرداد 1391 ساعت 14:45

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

برای این کار شما باید از تگهای  <FORM> در اطراف تگ دکمه استفاده کنید. در مثال زیر نمونه یک کد HTML که یک دکمه را در یک صفحه قرار می دهد آورده شده است:


<FORM>
<INPUT type="button" value="اینجا کلیک کنید" name="button1">
</FORM>

این فرمان یک دکمه را در صفحه شما ایجاد می کند، اما اگر روی آن کلیک کنید اتفاقی نمی افتد...

در زیر کار هر قسمت از فرمان بالا را می بینیم:  ............  بقیه در ادامه مطلب

 


<FORM>
این قسمت یک فرم را ایجاد می کند بنابر این ما می توانیم یک دکمه بسازیم.
<INPUT>
این تگ به ما اجازه می دهد نوعی ناحیه ورودی بسازیم.
"type="button
این فرمان ناحیه ورودی ما را به عنوان یک دکمه تعریف می کند.
"اینجا کلیک کنید"=value
این متنی است که افراد روی دکمه می بینند. شما می توانید هر چیزی را که می خواهید بینندگانتان روی دکمه ببینند اینجا بنویسید.
"name="button1
شما می توانید برای مراجعات بعدی یا احتمالاً استفاده در یک اسکرپت به دکمه خود یک نام بدهید.


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


onClick="javascript command"

فقط این فرمان را در تگ INPUT قرار دهید که دکمه را با آن ساختید، مانند زیر:


<INPUT type="button" value="اینجا کلیک کنید" name="button1" onClick=" ">

برای مثال ما می توانیم مانند فرمان onMouseover در این دکمه نیز استفاده کنیم و متنی را در نوار وضعیت پنجره چاپ کنیم!


<FORM>
<INPUT type="button" value="اینجا کلیک کنید" name="Button2"
onClick="window.status='متن خود را اینجا بنویسید'; return true">
</FORM>

حالا دکمه را فشار دهید و به متن نوار وضعیت دقت کنید.

شما می توانید با استفاده از دکمه ها به بازدیدکنندگان خود اجازه دهید رنگ بکگراند سایت را تغییر دهند. کافیست از فرمان زیر به جای فرمان window.status استفاده کنید:


document.bgColor='رنگ مورد نظر به زبان انگلیسی نوشته شود'

به عنوان مثال فرمان زیر را  وارد کنید:


<FORM>
<INPUT type="button" value="Chenge Background Color" name="button3" onClick="document.bgColor='yellow'">
</FORM>

حالا شما دکمه ای دارید که با کلیک کردن بر روی آن زمینه صفحه به رنگ زرد در می آید!

شما می توانید به هر تعداد که می خواهید از این دکمه ها اضافه کنید، فقط مطمئن شوید که آنها گزینه بازگشت به حالت اولیه را نیز داشته باشند. اسکرپت زیر به شما چهار گزینه می دهد : سفید، زرد، قرمز و آبی . می توانید از دکمه «بازگشت به رنگ اولیه!» برای بازگرداندن تصویر زمینه این صفحه استفاده کنید.


<FORM>
<INPUT type="button" value="تغییر رنگ زمینه به سفید"
name="button6" onClick="document.bgColor='white'"><br>
<INPUT type="button" value="تغییر رنگ زمینه به زرد "
name="button3" onClick="document.bgColor='yellow'"><br>
<INPUT type="button" value="تغییر رنگ زمینه به قرمز "
name="button4" onClick="document.bgColor='red'"><br>
<INPUT type="button" value="تغییر رنگ زمینه به آبی"
name="button5" onClick="document.bgColor='#66CCFF">
</FORM>


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

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


window.location='URL'

برای مثال این هم اسکرپتی که شما را به صفحه اول سایت ما می برد:


<FORM>
<INPUT type="button" value="آموزش جاوا اسکرپت" name="button6"
onClick="window.location='./'">
</FORM>

 

آمار سایت

اخبار دنیای طراحی سایت

جدیدترین اخبار دنیای طراحی وب
به روز ترین خبرهای دنیای طراحی وب و اینترنت
  • دانلود نرم افزار ویرایش CSS Skybound Stylizer v5.0
    امروزه CSS یکی از ضروری ترین ابزارهای طراحی وبسایت به شمار می رود و طراحی یک سایت حرفه ای بدون استفاده از کدهای CSS، غیر ممکن است زیرا ویژگی ها و مزایای آن برای طراحان وب کاربردی بوده و همچنین موجب زیبایی بیشتر صفحات وب خواهد شد. Skybound Stylizer یک نرم افزار قدرتمند و بسیار [...]
  • دانلود نرم افزار طراحی صفحات وب Microsoft Expression Web v4.0.1460.0
    نرم افزار Microsoft Expression Web نرم افزاری حرفه ای برای طراحی وب سایت های مدرن و استاندارد با سازگاری کامل با تمامی زبان های XML, ASP.NET, XHTML. و حتی PHP است. طراحی های CSS بسیار زیبا، ارائه ی صفحات XML و … قدرتمند، پشتیبانی خوب از فناوری قدرتمند سرور ASP.Net، مدیریت بهتر محیط نرم افزار، [...]
  • دانلود نرم افزار طراحی قالب سایت Artisteer v4.1
    Artisteer نرم افزاری قدرتمند در زمینه طراحی و ساخت قالب است که به کاربران اجازه ایجاد وب سایت  در عرض چند دقیقه، حتی بدون نیاز به دانستن هر چیزی در مورد ویرایش گرافیکی یا HTML را می دهد. توسط این نرم افزار می توانید به طراحی وب، ویرایش و تبدیل، برش گرافیکی، برنامه نویسی XHTML [...]
  • اولین گوشی با سیستم عامل فایرفاکس
    شرکت Geeksphone از شرکای موزیلا در حوزه گوشی ، پس از انجام آزمایش‌های لازم روی نخستین گوشی هوشمند جهان مجهز به سیستم‌ عامل فایرفاکس در نظر دارد، این محصول را هفته آینده وارد بازار کند. دو گوشی هوشمند ساخت این شرکت که قرار است با  سیستم‌عامل فایرفاکس وارد بازار شوند Keon و Peak نام دارند [...]
  • کم شدن محبوبیت یوتیوب و فیس بوک
    استفاده از فیس بوک در میان جوانان در سال ۲۰۱۳ نسبت به سال قبل از آن ۹ درصد کاهش یافته است. به نظر می رسد سختگیری های والدین در مورد نحوه استفاده فرزندانشان از فیس بوک و همین طور دغدغه های موجود در مورد امنیت این سایت و همین طور عدم توجه به حفظ حریم [...]