JavaScript ile Görev Ekleme: Fonksiyonlar ve Etkinlikler

JavaScript ile Görev Ekleme: Fonksiyonlar ve Etkinlikler

Merhaba! Bu makalede, JavaScript kullanarak web sayfalarınıza etkileşimli görev eklemeyi, fonksiyonlar ve olaylar yardımıyla dinamik listeler oluşturmayı adım adım öğreneceksiniz. Öncelikle, temel HTML yapımızı oluşturalım. Ardından, JavaScript ile bu yapıya can vereceğiz.

HTML Yapısı

İlk olarak, kullanıcıların görevlerini girebileceği bir giriş alanı ve bir buton ile bir liste oluşturmamız gerekiyor. Bu liste, eklenen görevleri görüntüleyecek. İşte HTML kodumuz:

<input type="text" id="taskInput" placeholder="Görev girin...">
<button id="addTask">Görevi Ekle</button>
<ul id="taskList"></ul>

JavaScript Fonksiyonları ve Olayları

Şimdi, JavaScript fonksiyonlarını kullanarak bu HTML elementleriyle etkileşim kuracağız. Öncelikle, görev ekleme fonksiyonunu oluşturalım. Bu fonksiyon, giriş alanından alınan görevi listeye ekleyecek.

Bunun için, “Görevi Ekle” butonuna tıklandığında çalışacak bir olay dinleyicisi (event listener) eklememiz gerekiyor. Ayrıca, her görev için bir silme butonu ekleyelim. Bu butona tıklandığında ilgili görev silinecek.

<script>
  const taskInput = document.getElementById('taskInput');
  const addTaskButton = document.getElementById('addTask');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', addTask);

  function addTask() {
    const taskText = taskInput.value;
    if (taskText !== "") {
      const listItem = document.createElement('li');
      listItem.textContent = taskText;
      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Sil';
      deleteButton.addEventListener('click', () => listItem.remove());
      listItem.appendChild(deleteButton);
      taskList.appendChild(listItem);
      taskInput.value = "";
    }
  }
</script>

Bu kodda, öncelikle gerekli HTML elementlerini seçiyoruz. Daha sonra, “addTask” fonksiyonunu tanımlıyoruz. Bu fonksiyon, yeni bir liste öğesi (<li>) oluşturuyor, görev metnini ekliyor ve bir silme butonu ekliyor. Son olarak, yeni liste öğesini listeye ekliyor ve giriş alanını temizliyor. Önemli bir nokta, silme butonuna da bir olay dinleyicisi eklememiz. Bu sayede, butona tıklandığında ilgili liste öğesi silinebiliyor. Bu örnek, JavaScript’in gücünü ve etkileşimli web geliştirmede kullanımının ne kadar önemli olduğunu gösteriyor.

Daha gelişmiş özelliklere sahip bir görev yöneticisi oluşturmak için, örneğin, görevleri yerel depolamaya kaydetme, görevleri tamamlama özelliği ekleme gibi geliştirmeler yapabilirsiniz. Bu geliştirmeleri yaparak uygulamanızı daha da kullanışlı hale getirebilirsiniz. Daha fazla bilgi için fatihsoysal.com adresini ziyaret edebilirsiniz.

Umarım bu makale size JavaScript ile etkileşimli görev ekleme konusunda yardımcı olmuştur. Daha fazla bilgi ve örnek için burayı ziyaret edebilirsiniz.

#Etiketler
javascript, fonksiyonlar, olaylar, görev ekleme, etkileşimli web, dinamik liste, web geliştirme, programlama, event listener, HTML, liste öğesi, silme butonu