صفحه اصلی وب سايت واقعآ محشر تماس با ما

طراحي حرفه اي وب سايت : طراحي وب سايت خود را به گروه فناوري اطلاعات ايران بسپاريد

طراحي وب سايت طراحي حرفه اي وب سايت بهينه سازي وب سايت

دکمه ها و موارد استفاده آنها

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

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

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

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

  1. <FORM>
    این قسمت یک فرم را ایجاد می کند بنابر این ما می توانیم یک دکمه بسازیم.
  2. <INPUT>
    این تگ به ما اجازه می دهد نوعی ناحیه ورودی بسازیم.
  3. "type="button
    این فرمان ناحیه ورودی ما را به عنوان یک دکمه تعریف می کند.
  4. "اینجا کلیک کنید"=value
    این متنی است که افراد روی دکمه می بینند. شما می توانید هر چیزی را که می خواهید بینندگانتان روی دکمه ببینند اینجا بنویسید.
  5. "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='رنگ مورد نظر به زبان انگلیسی نوشته شود'

فرمان زیر را به عنوان تمرین فرمان onClick وارد کنید:

<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>

این هم دکمه، آن را امتحان کنید تا به سرفصل آموزش جاوا اسکرپت بروید:


نظرات بازدید کنندگان
Thu, 13 Nov 2008 11:48:01 +0330 نویسنده : کامران
من از شما خواهش دارم که چگونگی آوردن ویدئو را در وب از طریق html برایم ارسال نمایید.
 
Thu, 13 Nov 2008 11:39:58 +0330 نویسنده : کامران همراهی
من از شما خواهش دارم که چگونگی آوردن ویدئو را در وب از طریق html برایم ارسال نمایید.
 
Sat, 10 May 2008 10:44:47 +0430 نویسنده : bahman
با سلام وخسته نباشید به تمام  عزیزانی که این سایت را ساخته اند  من یک سوال دارم چگونه با جاوا اسکریپت مشود منوهای شیشه ای ساخت وقرار داد  وقرار دادن عکس درزمینه  وب یا وبلاگ  جوری که اگر وب یا وبلاگ کوچک شد عکس رمینه هم کوچک شود یا به همان اندازه شود و مانند نوشته های روی تصویر بتوان نوشت وکارهای دیگری  انجام داد خیلی خیلی ممنونم  ومتشکرم واقعا سایت شما ازبین چندین هزار سایتی که دیدم بهتر وجامعتر بود    واقعا خسته نباشید                                                               ok  
 
ساعت: 16:31 - تاریخ: 3 بهمن 1386 نویسنده : مریم
salam
ye soal?too ghesmate java script darsi vase sakhtane menu vojud nadare?mabahese html kheili kamel va khoobe.vali fekr mikonam java script kheili kamel nist.age darsi vase sakhatane menu ba java script hast mamnoon misham bezari roo site.