خانه / کامپیوتر / اموزش / آموزش جاوا اسکریپت (قسمت ۰۹ : دکمه ها و موارد استفاده)

آموزش جاوا اسکریپت (قسمت ۰۹ : دکمه ها و موارد استفاده)

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

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

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

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

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

 

قرار دادن شناسه name اجباری نیست ولی اگر بخواهید به صورت حرفه ای کار کنید و همچنین اینکه بتوانید فعالیت ها و کار های مختلفی با دکمه ها انجام دهید به این شناسه احتیاج دارید، بنابراین بهتر است برای هر دکمه یک name تعریف کنید.

 

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

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

ما میتوانیم از فرمان های محتلفی در onClick استفاده کنیم به طور مثال :

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

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

 

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

 

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

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

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

شما می توانید به جای استفاده از نام انگلیسی رنگ از معادل هگزادسیمال رنگ ها استفاده نمایید ولی باید توجه داشته باشید که در هنگام استفاده از معادل هگزادسیمال قبل از کد رنگ از علامت # استفاده نمایید.(برای یافتن معادل هگزادسیمال رنگها و توضیح درباره آنها می توانید به این صفحه مراجعه کنید.)

 

حالا دکمه های ساخته شده را تست کتید :

 

.:: مشاهده نمونه دکمه های تغییر رنگ صفحه ::.

 

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

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

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

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

امیدوارم آموزش این جلسه برای شما عزیزان مفید بوده باشد .

موفق باشید …

درباره ی nasimazadi

همچنین ببینید

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوفروش ویلا و اجاره ویلاسرویس و تعمیر کولر گازیاجاره ویلافروش ویلا