JavaScript Fonksiyonlar ile Olay İşleçleri: Örneklerle Anlatım kitabı, başlangıç seviyesindeki kullanıcılardan deneyimli programcılara kadar herkesin işine yarayacak dolu dolu içeriğe sahip Bu kitapla JavaScript fonksiyonlarını ve olay işleçlerini öğrenerek kendi web projelerinize kolayca uygulama yapabilirsiniz Hemen sipariş verin ve programlama dünyasında öne çıkın!

olay işleçleri kullanmak, kullanıcı etkileşimini kontrol etmek ve sayfalar arasındaki geçişleri yönetmek için önemlidir. Olay işleçleri, bir HTML öğesi üzerinde gerçekleşen etkinlikleri yakalamak veya işlemek için kullanılan kod parçacıklarıdır. Bu etkinlikler, kullanıcının tıklama, fare işaretçisi hareketi, klavye tuşlarına basma ve bir form gönderme gibi hareketleri içerebilir.

Olay işleçleri, HTML öğesine "on" ön ekini kullanarak eklenir ve ardından bir JavaScript işlevi belirtilir. Örneğin, bir düğme üzerinde tıklama olayı işlendiğinde, HTML kodunda şu şekilde belirtilir: ```Tıkla```

Bir olay işleçisini kaldırmak için, `removeEventListener()` yöntemi kullanılır. Bu yöntem, etkinlik türünü, işlevi ve işleyiciyi herhangi bir öğeden kaldırır. Tek bir olay işleyicisini kaldırmak için, `removeEventListener()` yöntemi kullanabilirsiniz. Ayrıca, bir HTML öğesi üzerinde tüm olay işleyicilerini kaldırmak için, `onclick`, `onmouseover` ve `onmouseout` gibi tüm öğelere sıfırlama işlemi uygulanır.

JavaScript fonksiyonları, olay işleçlerini kullanarak çalışabilir. Örneğin, bir kartın üstüne gelindiğinde kartın altında gölge oluşturmak gibi. Bir HTML öğesi üzerinde fare doğrudan üzerine gelindiğinde, bir CSS sınıfının eklenmesi kullanılarak hover efekti eklemek de mümkündür. Bir HTML öğesi üzerinde geçiş efektleri eklemek için olay işleçleri kullanabilirsiniz. Örneğin, bir düğmeye tıklandığında, öğenin görünürlüğünü değiştiren veya öğenin konumunu değiştiren bir işlev ekleyebilirsiniz.

Olay işleyicileri, kullanıcının etkileşimini ve sayfa geçişlerini yönetmek için önemlidir. JavaScript fonksiyonları kullanarak olay işleçleri eklemek, bir web sayfasında daha etkileşimli bir kullanıcı deneyimi oluşturmak için harikadır.

Olay işleçleri, bir HTML öğesi üzerinde gerçekleşen etkinlikleri yakalamak veya işlemek için kullanılan kod parçacıklarıdır. Bu etkinlikler, kullanıcının tıklama, fare işaretçisi hareketi, klavye tuşlarına basma ve bir form gönderme gibi hareketleri içerebilir. Olay işleçleri, JavaScript'te önemli bir yer işgal eder ve web sayfalarının etkileşimli hale getirilmesinde kullanılır. Bu nedenle, olay işleçleri konusunda bilgi sahibi olmak, web geliştiriciler için oldukça önemlidir.

JavaScript, modern web geliştirmesi için önemli bir araç olarak görülmektedir. Özellikle olay işleçleri, kullanıcıların web uygulamalarında etkileşimini kontrol etmek için önemlidir. Bu nedenle, JavaScript fonksiyonları kullanarak olay işleçlerinin nasıl kullanılacağına dair bazı örnekler vermeyi amaçlıyoruz. Bu örnekler, kullanıcının tıklama, fare işaretçisi hareketi, klavye tuşlarına basma ve bir form gönderme gibi hareketlerini yakalamak için kullanılabilir.

Bu örnekler, JavaScript fonksiyonları kullanarak olay işleçlerini nasıl ekleyebileceğinizi, kaldırabileceğinizi ve örneğin bir kartın üstüne gelindiğinde gölge oluşturmak gibi nasıl kullanabileceğinizi de açıklar. Bu örnekleri inceleyerek, bir HTML öğesi üzerinde fare doğrudan üzerine gelindiğinde, bir CSS sınıfının eklenmesi kullanılarak hover efekti ekleyebilir veya bir düğmeye tıklandığında öğenin konumunu değiştiren bir işlev ekleyebilirsiniz.

1. Olay İşleçleri Nedir?

Olay işleçleri, bir HTML öğesi üzerinde gerçekleşen etkinlikleri yakalamak veya işlemek için kullanılan kod parçacıklarıdır. Kullanıcının sayfa ile etkileşimde bulunduğu durumlarda, örneğin tıklayarak ya da farenin hareketiyle, bir olay işleyicisi kodu çağrılabilir. Bu etkinlikler, kullanıcının tıklama, fare işaretçisi hareketi, klavye tuşlarına basma gibi hareketleri içerebilir ve sayfa üzerinde geçiş yapıldığında ya da bir form gönderildiğinde de etkilidir.

HTML öğeleri genellikle bu olayların doğru şekilde işlenmesi için kullanılır. Olay işleyicileri, tarayıcı ya da sayfa olarak da adlandırılabilen programlar kullanılarak çağrılır. Başka bir deyişle, bu işleçler JavaScript içinde kullanıldığında, sayfanın görünümü ya da doğrudan HTML öğesi değişebilir.

2. Olay İşleçleri Nasıl Eklenir?

`on` önekini kullanarak eklenir ve ardından bir JavaScript işlevi belirtilir. Örneğin, bir düğme üzerinde tıklama olayı işlendiğinde, HTML kodunda şu şekilde belirtilir:```Tıkla```Burada `onclick` özelliği, düğmeye tıklandığında çağrılacak bir işlevi belirtir. Bu işlev, JavaScript fonksiyonu olarak oluşturulur ve ````Bu kod, düğmeye tıklandığında "Merhaba dünya!" mesaj kutusunu açacaktır.

Olay işleçleri aynı zamanda başka HTML öğelerine de eklenebilir. Örneğin, bir bağlantıya tıklama olayı işlendiğinde bir sayfaya yönlendirebilirsiniz:```Örnek Bağlantı```Burada `onclick` özelliği, bağlantıya tıklandığında belirtilen URL'ye yönlendirilecek bir `window.location.href` işlevini belirtir.

Özetle, olay işleçleri HTML öğelerine `on` önekini kullanarak eklenir ve ardından bir JavaScript işlevi belirtilir. Bu işlev, öğe üzerinde gerçekleşen etkinliği işleyecektir. Örneklerde olduğu gibi, bir düğmenin tıklama olayına tepki vermek veya bir bağlantıya tıklama olayında farklı bir sayfaya yönlendirmek mümkündür.

Olay işleçleri söz konusu olduğunda, "on" ön eki oldukça önemlidir. Bu ön ek, bir HTML öğesinin üzerinde gerçekleşen etkinlikleri yakalamak için kullanılır. Örneğin, bir düğme üzerinde tıklama olayı eklerseniz, bu olay "onclick" olarak adlandırılır ve HTML kodunda "on" öneki ile belirtilir. Benzer şekilde, fare işaretçisi hareketi üzerine hover efektleri eklerken "onmouseover" ve "onmouseout" gibi olay işleyicileri de kullanabilirsiniz. Olay işleçleri göstermek istediğimiz herhangi bir etkinliği yakalama ve onu işleme imkanı sunar.

Olay işleçleri HTML öğelerinde on önekini kullanarak eklenir ve JavaScript işlevleriyle birlikte kullanılır. Örneğin, bir düğmenin üzerine tıklama olayını yakalamak için, HTML kodunda şu şekilde işleçler eklenir:

Bu kod, myFunction() JavaScript işlevinin düğmenin üzerine tıklama olayı gerçekleştiğinde çalıştırılmasını sağlar.

JavaScript’te, tıkla butonuna olay işleçleri eklemek oldukça yaygındır. Örneğin, bir düğmeye tıklandığında, belirli bir işlevi tetiklemek için olay işleçleri kullanabilirsiniz.

Aşağıdaki örnek, bir “Tıkla” butonuna bir olay işleyici eklemenizi ve ardından butona tıklandığında bir mesaj penceresi açmanızı gösterir:

Bu örnekte, HTML kodunda bir düğme öğesi belirtilir ve onclick öğesi kullanarak butona bir olay işleyici eklenir. Onclick öğesi düğmeye tıklandığında çalışacak JavaScript fonksiyonunu çağırır.

JavaScript kodunda ise, açılacak mesaj penceresinde gösterilecek metni içeren bir fonksiyon belirtiyoruz. Bu fonksiyon, HTML kodundaki onclick olay işleyicisi tarafından çağırılır ve mesaj penceresini görüntüler.

2.1. Olay İşleçleri Kaldırma

Olay işleçleri, bir HTML öğesi üzerinde gerçekleşen etkinlikleri yakalamak veya işlemek için kullanılan kod parçacıklarıdır. Ancak bazen, bir öğenin olay işleyicisine artık ihtiyaç duymayız veya başka bir işleyici eklememiz gerekebilir. Bu durumda, `removeEventListener()` yöntemi kullanılabilir.

Bu yöntem, etkinlik türünü, işlevi ve işleyiciyi herhangi bir öğeden kaldırır. Örneğin, aşağıdaki kodda, düğmedeki tıklama etkinliği ve `myFunction()` işlevi kaldırılır:

var btn = document.getElementById("myBtn");btn.removeEventListener("click", myFunction);

Yukarıdaki örnekte, `removeEventListener()` yöntemi kullanılarak, belirtilen düğmenin tıklama etkinliği ve `myFunction()` işlevindeki işleç kaldırıldı. Bu yöntemle, bir öğeden tek bir işleyici veya tüm işleyiciler kaldırılabilir.

2.1.1. Tek Bir Olay İşleyicisi Kaldırmak

Bir HTML öğesi üzerinde birden fazla olay işleyicisi ekleyebilirsiniz. Ancak, bazen tek bir olay işleyicisini kaldırmak isteyebilirsiniz. Tek bir olay işleyicisini kaldırmak için, `removeEventListener()` yöntemini kullanabilirsiniz. Bu yöntem, etkinlik türünü, işlevi ve işleyiciyi herhangi bir öğeden kaldırır.

Örneğin, bir düğmenin tıklanması durumunda etkinliği işleyen `myFunction()` fonksiyonunu aşağıdaki şekilde gösteriyoruz:

Yukarıdaki örnekte, düğmeye her tıklandığında etkinleştirilen `myFunction()` fonksiyonunu kaldırmak için `removeEventListener()` yöntemini kullanıyoruz. Bu yöntem, herhangi bir öğeden olay işleyicilerini kaldırmak için oldukça kullanışlıdır.

2.1.2. Tüm Olay İşleyicilerini Kaldırmak

Olay işleyicileri, HTML öğeleri üzerinde gerçekleştirilen etkinlikleri takip etmek ve işlemek için kullanılır. Ancak, bazen bir HTML öğesi üzerinde belirli bir türdeki tüm olay işleyicilerini kaldırmak gerekebilir. Bu durumda, tüm öğelere `onclick`, `onmouseover` veya `onmouseout` gibi tüm olay işleyicileri için sıfırlama işlemi uygulanabilir.

Örneğin, aşağıdaki HTML kodunda, `onmouseover` ve `onmouseout` için olay işleyicileri tanımlanmıştır:

  <p onmouseover="changeColor('red')" onmouseout="changeColor('black')">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>

Bu kod örneğinde, bir `p` etiketi, üzerine fare doğrudan gelindiğinde metin rengini kırmızı yapacak ve farenin üzerinden çekildiğinde metin rengini siyah olarak değiştirecektir. Tüm olay işleyicilerini kaldırmak için, `p` etiketine aşağıdaki kod satırı eklenir:

  document.querySelector('p').onclick = null;  document.querySelector('p').onmouseover = null;  document.querySelector('p').onmouseout = null;

Yukarıdaki kod, `p` etiketi üzerindeki tüm olay işleyicilerini kaldıracaktır. `querySelector` yöntemi kullanarak, tek bir `p` etiketi seçilebilir ve ayrı ayrı `null` atanabilir.

HTML öğeleri üzerindeki tüm olay işleyicilerini kaldırmak için, her öğe için bu kod tekrarlanabilir.

3. Örneklerle Olay İşleçleri

JavaScript fonksiyonları, olay işleçleri kullanarak birçok işlemi halledebilirler. Örneğin, CSS kullanarak bir kartın üstüne gelindiğinde, kartın altında gölge oluşturmaktan bahsedebiliriz. Bunun için `onmouseover` ve `onmouseout` olayları kullanılabilir.

Bir örnekle açıklamak gerekirse; önce bir HTML kart öğesi oluşturalım:

Sonra CSS stili ekleyelim:

Bu CSS kodunda `box-shadow` özelliğinin `transition` özelliğiyle birlikte kullanarak, kartın üstüne gelindiğinde gölge oluşturma efekti sağladık. `onmouseover` öğesiyle kartın üstüne gelindiğinde gölge oluşturduk, `onmouseout` öğesiyle de kartın üzerinden çıkıldığında gölgenin kaybolmasını sağladık.

Sonuç olarak; kartın üzerine gelindiğinde gölge efekti oluşacak ve kart altında hafif bir gölge oluşacak. Bu şekilde, olay işleçlerini kullanarak kullanıcı arayüzüne hoş ve etkileyici efektler ekleyebilirsiniz.

3.1. Hover Efekti Ekleme

Bir HTML öğesi üzerinde fare doğrudan üzerine gelindiğinde, hover efektleri eklemek, web sayfasına görsel bir şölen kazandırabilir. Bunun için CSS sınıfları kullanılabilir.

Örneğin, bir butonun üzerine gelindiğinde, butonun arka plan rengini değiştirmek için şu kod kullanılabilir:

.button:hover {  background-color: #4CAF50;}

Bu kod, `.button` sınıfına sahip bir öğenin üzerinde fare doğrudan yer aldığında, arka plan renginin yeşil olarak değiştirilmesini sağlar.

Bu şekilde hover efekti ekleyerek, kullanıcı etkileşimini artırabilir ve web sayfanızı daha çekici hale getirebilirsiniz.

3.2. Geçiş Efektleri Ekleme

Olay işleçleri, HTML öğelerinde gerçekleşen etkinlikleri yakalamak veya işlemek için kullanılan kod parçalarıdır. Örneğin, bir düğmeye tıklandığında, bir HTML öğesinin görünürlüğünü değiştirmek isteyebilirsiniz. Bunun yapılabilmesi için, olay işleçleri kullanarak bir işlev belirleyebilirsiniz.

Bir düğmeye tıklandığında bir öğenin görünürlüğünü değiştirmek için, HTML öğesi ve JavaScript kodu kullanarak bir işlev tanımlamak gerekir. Örneğin, aşağıdaki kod bloğundaki gibi bir düğme oluşturabilirsiniz:

Yukarıdaki örnekte, düğmeye tıklandığında toggleVisibility() işlevi çağrılır. Bu işlev, myElement ID'sine sahip HTML öğesinin stil özelliğini değiştirir. Öğe görünürse, stil özelliği display: block olarak ayarlanır. Aksi takdirde, stil özelliği display: none olarak ayarlanır.

Bu örnek, bir düğmeye tıklanarak bir öğenin görünürlüğünü değiştiriyor olsa da, olay işleçlerinin kullanımı sayfalar arasında geçişler yapmak veya kullanıcı etkileşimi için daha gelişmiş efektler oluşturmak için de kullanılabilir.