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

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

مقدمات: HTML و CSS برای دکمه

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

  
  <button id="myButton">کلیک کنید</button>
  
 

سپس، با استفاده از CSS، می توانید ظاهر دکمه را سفارشی کنید. به عنوان مثال:

  
  <style>
  #myButton {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  }

  #myButton:hover {
  background-color: #3e8e41;
  }
  </style>
  
 

این کد CSS یک دکمه سبز با متن سفید ایجاد می کند که وقتی موس روی آن می رود، رنگش تیره تر می شود.

ایجاد تعامل با جاوااسکریپت

حالا به قسمت جذاب ماجرا می رسیم: افزودن تعامل با جاوااسکریپت.

تغییر متن دکمه با کلیک

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

  
  <script>
  document.getElementById("myButton").addEventListener("click", function() {
  if (this.innerHTML === "کلیک کنید") {
  this.innerHTML = "کلیک شد!";
  } else {
  this.innerHTML = "کلیک کنید";
  }
  });
  </script>
  
 

این کد یک شنونده رویداد (event listener) به دکمه اضافه می کند که وقتی دکمه کلیک می شود، تابعی را اجرا می کند. این تابع بررسی می کند که متن دکمه چیست و آن را به متن دیگری تغییر می دهد.

تغییر رنگ دکمه با هاور

قبلاً با CSS رنگ دکمه را در حالت هاور تغییر دادیم. حالا می خواهیم این کار را با جاوااسکریپت انجام دهیم. این روش به شما کنترل بیشتری روی ظاهر دکمه می دهد.

  
  <script>
  const button = document.getElementById("myButton");

  button.addEventListener("mouseover", function() {
  this.style.backgroundColor = "#3e8e41";
  });

  button.addEventListener("mouseout", function() {
  this.style.backgroundColor = "#4CAF50";
  });
  </script>
  
 

این کد دو شنونده رویداد به دکمه اضافه می کند: یکی برای رویداد mouseover (وقتی موس روی دکمه می رود) و دیگری برای رویداد mouseout (وقتی موس از روی دکمه برداشته می شود). هر کدام از این شنونده ها، رنگ پس زمینه دکمه را به رنگ مورد نظر تغییر می دهند.

ایجاد انیمیشن ساده با جاوااسکریپت

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

  
  <script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", function() {
  this.style.transition = "font-size 0.3s"; // افزودن transition برای انیمیشن روان
  this.style.fontSize = "20px";

  setTimeout(() => {
  this.style.fontSize = "16px"; // بازگرداندن به اندازه اولیه بعد از 0.3 ثانیه
  }, 300);
  });
  </script>
 

  
  <button id="clickCounter">کلیک کنید</button>
  <p id="counterDisplay">تعداد کلیک ها: 0</p>

  <script>
  let clickCount = 0;
  const counterButton = document.getElementById("clickCounter");
  const counterDisplay = document.getElementById("counterDisplay");

  counterButton.addEventListener("click", function() {
  clickCount++;
  counterDisplay.textContent = "تعداد کلیک ها: " + clickCount;
  });
  </script>
  
 

  
  <button id="imageButton"><img src="image1.jpg" alt="Image 1" width="100" height="100"></button>

  <script>
  const imageButton = document.getElementById("imageButton");
  let currentImage = 1;

  imageButton.addEventListener("click", function() {
  currentImage = (currentImage === 1) ? 2 : 1;
  this.innerHTML = '<img src="image' + currentImage + '.jpg" alt="Image ' + currentImage + '" width="100" height="100">';
  });
  </script>