آموزش JavaScript
دسته بندی ( ۲۶۰ آموزش )
نمایش دسته بندی ها (۲۶۰ آموزش)
مباحث اولیه، در JavaScript
مباحث اولیه، در JavaScript 18
کنسول (Console)، در JavaScript
کنسول (Console)، در JavaScript 24
نمایش متن در خروجی صفحه، در JavaScript
نمایش متن در خروجی صفحه، در JavaScript 2
عملگرها (Operator)، در JavaScript
عملگرها (Operator)، در JavaScript 0
متغیرها (Variable)، در JavaScript
متغیرها (Variable)، در JavaScript 8
رشته ها (متن ها - String)، در JavaScript
رشته ها (متن ها - String)، در JavaScript 28
نمایش پیام، در JavaScript
نمایش پیام، در JavaScript 4
توابع (Function)، در JavaScript
توابع (Function)، در JavaScript 5
حلقه ها (Loop)، در JavaScript
حلقه ها (Loop)، در JavaScript 3
آرایه ها (Array)، در JavaScript
آرایه ها (Array)، در JavaScript 34
شیء ها (Object)، در JavaScript
شیء ها (Object)، در JavaScript 2
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در JavaScript
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در JavaScript 7
کلاس های (Class) عنصرها، در JavaScript
کلاس های (Class) عنصرها، در JavaScript 5
id عنصرها، در JavaScript
id عنصرها، در JavaScript 0
مشخصه های (Attribute) عنصرها، در JavaScript
مشخصه های (Attribute) عنصرها، در JavaScript 1
رویدادها (Event)، در JavaScript
رویدادها (Event)، در JavaScript 0
عملیات های ریاضی، در JavaScript
عملیات های ریاضی، در JavaScript 18
تاریخ و زمان، در JavaScript
تاریخ و زمان، در JavaScript 10
زمان بندی اجرای کدها، در JavaScript
زمان بندی اجرای کدها، در JavaScript 2
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript 6
فرم ها (Form)، در JavaScript
فرم ها (Form)، در JavaScript 11
عکس ها (Image)، در JavaScript
عکس ها (Image)، در JavaScript 2
دکمه ها (Button)، در JavaScript
دکمه ها (Button)، در JavaScript 2
لینک ها (Link)، در JavaScript
لینک ها (Link)، در JavaScript 5
پنجره ها (Window)، در JavaScript
پنجره ها (Window)، در JavaScript 2
جدول ها (Table)، در JavaScript
جدول ها (Table)، در JavaScript 1
رنگ ها (Color) و تعیین رنگ، در JavaScript
رنگ ها (Color) و تعیین رنگ، در JavaScript 1
کلیک کردن (Click)، در JavaScript
کلیک کردن (Click)، در JavaScript 1
اسکرول (Scroll)، در JavaScript
اسکرول (Scroll)، در JavaScript 2
کار با کل صفحه، در JavaScript
کار با کل صفحه، در JavaScript 1
صفحه فعلی (Current Page)، در JavaScript
صفحه فعلی (Current Page)، در JavaScript 19
دریافت ورودی از کاربر، در JavaScript
دریافت ورودی از کاربر، در JavaScript 1
تمرکز (Focus)، در JavaScript
تمرکز (Focus)، در JavaScript 3
مرورگر اینترنت (Browser)، در JavaScript
مرورگر اینترنت (Browser)، در JavaScript 3
ذخیره اطلاعات در مرورگر اینترنت (Browser) کاربر، در JavaScript
ذخیره اطلاعات در مرورگر اینترنت (Browser) کاربر، در JavaScript 10
کار با کیبورد (Keyboard)، در JavaScript
کار با کیبورد (Keyboard)، در JavaScript 2
موس، در JavaScript
موس، در JavaScript 1
Iframe ها، در JavaScript
Iframe ها، در JavaScript 1
بارگذاری (دانلود) فایل، در JavaScript
بارگذاری (دانلود) فایل، در JavaScript 1
علامت ها (Sign)، در JavaScript
علامت ها (Sign)، در JavaScript 0
تکنیک Ajax ، در JavaScript
تکنیک Ajax ، در JavaScript 4
ساختار JSON ، در JavaScript
ساختار JSON ، در JavaScript 0
منسوخ شده ها (Deprecated و Obsolete)، در JavaScript
منسوخ شده ها (Deprecated و Obsolete)، در JavaScript 1
مباحث عمومی، در JavaScript
مباحث عمومی، در JavaScript 2

اجرای یک سری کد JavaScript در هنگام کلیک بر روی یک دکمه (Button)، در JavaScript

فرض کنید بخواهیم یک دکمه (Button) بسازیم که با کلیک کاربر بر روی آن دکمه (Button)، یک سری کد JavaScript اجرا شود، برای این منظور، ابتدا یک تابع تعریف می کنیم که حاوی کدهای JavaScript مورد نظرمان باشد :

نام تابع را برابر clickHandler انتخاب کرده ایم و به جای عبارت // your code ، کدهای JavaScript مورد نظرمان را باید بنویسیم.

سپس دکمه (Button) را با کدهای زیر می سازیم :

بنابراین با کلیک بر روی دکمه (button)، کدهای javascript نوشته شده در تابع، اجرا خواهد شد.

به مثال زیر توجه کنید :

مثال

یک دکمه (Button) می سازیم که با کلیک کاربر بر روی آن، رنگ پس زمینه (Background) صفحه (قسمت body) به رنگ آبی (blue) تغییر داده شود :

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نویسنده علیرضا گلمکانی
شماره کلید 2687
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 9 9 0
میلاد
۱۳۹۷/۰۶/۱۱
۱۶:۴۵

با سلام. فرض کنیم میخواهیم با یک دکمه عمل رفت و برگشت انجام گیرد یعنی برای یکبار زدن دکمه رنگ صفحه آبی و با زدن مجدد آن رنگ صفحه به حالت اول یعنی سفید تغییر کند. چه کدی باید نوشته شود؟ متشکرم

admin
۱۳۹۷/۰۶/۱۲
۱۱:۳۱

سلام.
منطق برنامه به این صورت خواهد بود که یک متغیر (Variable) تعریف می کنیم که دارای مقدار اولیه برابر 0 باشد (مقداردهی اولیه متغیر).
بعد در تابعی (Function) که در هر بار کلیک بر روی دکمه (Button)، اجرا می شود، مقدار متغیر را چک می کنید، اگر مقدار برابر 0 بود، کد تغییر رنگ به آبی اجرا می شود و مقدار متغیر را به 1 تغییر می دهیم، اما اگر مقدار متغیر برابر 1 بود، کد تغییر رنگ به سفید اجرا می شود و مقدار متغیر را به 0 تغییر می دهیم.
بنابراین کد JavaScript زیر را می نویسیم :

کد پی‌اچ‌پی:
<html>
<
head>

<
script type="text/javascript">
var 
kelidestan 0;
function 
clickHandler() {
 
   if(kelidestan == 0){
 
       document.body.style.backgroundColor "blue";
 
       kelidestan 1;
 
   }else if(kelidestan == 1){
 
       document.body.style.backgroundColor "white";
 
       kelidestan 0;
 
   }
}
</script>

</head>

<body>

<button type="button" onclick="clickHandler();">change color</button>

</body>

</html> 


Flower

ebi
۱۳۹۸/۰۳/۱۴
۰۲:۳۹

عزیز اگه بخوایم یک button تعریف کنیم که وقتی کلیک شد یک آهنگی پخش کنه به صورت خودکار باید چ کدی رو بنویسیم؟

عرفان
۱۳۹۸/۰۹/۱۸
۱۴:۰۴

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

زری
۱۳۹۹/۰۷/۰۴
۰۲:۵۲

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

سمانه
۱۴۰۰/۰۶/۰۲
۱۴:۲۰

سلام میخواستم یه button  باشه که وقتی کلیک میکنی توی یه باکس مقادیری رو نشون بده 
 این نمونه کدمه ممنون میشم کمک کنید

کد پی‌اچ‌پی:
<button type="button" onclick="clickHandler()">choose<button>
  
<
script type="text/javascript">

       

       function 
clickHandler() {


       var 
settings = {

  
"async"true,

  
"crossDomain"true,

  
"url""http://api.weatherapi.com/v1/current.json?key=3c9f45f3e4a74d84a3085332212408&q=name",

  
"method""GET",

  
"headers": {

    
"cache-control""no-cache",

    
"postman-token""15d049ab-6c21-00df-c82e-3c53fdfb346b"

  
}

}


$.
ajax(settings).done(function (response) {

  
console.log(response);

});

}


</script> 

ابوالفضل
۱۴۰۱/۰۴/۱۳
۰۹:۵۴

ببخشید می خواستم بدونم چطور میتونم یک کدی بزنم که وقتی روی یک button کلیک شد تعداد کلیک شدن روی اون button رو برای نمایش بده

سروش
۱۴۰۲/۰۱/۰۳
۱۵:۰۸

کد پی‌اچ‌پی:
button_click{
1=0
Button
="?"

ستایش
۱۴۰۲/۰۸/۰۲
۲۱:۱۵

سلام خسته نباشید 
میخوام یه برنامه بنویسم که با یک عکس روی صفحه باشه با زدن دکمه بره عکس بعدی 
با JS و HTML
ممنون

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

کلید
×

شماره کلید


دسته بندی
×

شماره دسته کلید


جستجو
×

جستجو