JavaScript ile Data ve Attributeları Alma

JavaScript ile Data ve Attributeları Alma

Son yazının üzerinden çok geçmede yeni bir yazı yayınlıyorum. Bu yazı JavaScript ile data attributelarını ve direkt tanımlı attributeları almayı anlatmaktadır. Temel JavaScript bilgisi ile bu yazıda anlatılan konuları kavrayabilirsiniz.

JavaScript ile Data ve Attributeları Alma

Merhaba bu yazıda size JavaScript ile elementlerin data-* attributelarını ve data-* türünden olmayan attributeların değerlerini almayı göstereceğim.

Genellikle bu gibi basit işlemler için jQuery kullanıldığına çoğu zaman şahit oluruz. Çünkü jQuerynin fonksiyonel yapısı bu işlemlerin çok daha rahat halledilebeceğini düşünüdür.

Ancak load olma ihtiyacınız olmayan kodları da beraberinde getirir. Öncelikle bu işin jQuery tarafında nasıl yapıldını görebilmek adına basit bir elementimiz olduğunu varsayalım;

Bu basit olarak is-clickable ve data-post-id şeklinde attributelara sahip. Her iki kullanımın farkı ise data attributeları için jQuery ayrı bir fonksiyon yazarak bu attribute’a erişimi daha kolay hale getirmiştir.

Ancak dilediğiniz taktirde global olarak erişim sağlayabilmek ve data set edebilmek adına bir başka fonksiyon olan attr fonksiyonunu da kütüphaneye dahil etmiştir. Kullanımına kısaca şöyle bakalım:

Ancak bu kullanımın bir dezavantajı şu eğer data fonksiyonuna is-clickable isimli attribute’u passlarsak undefined yani bu bilginin tanımsız olduğu hatasını alırız. Bunu JavaScript ile doğal yollardan çözmek ise ciddi anlamda basit. Eğer kendi jQuery’mizi basit olarak yazmak gibi bir gayemiz var ise bu ilk adım için oldukça yararlı olacaktır.

Kendi jQuerymizi Yazalım

JavaScript birçok açıdan işimizi kolaylaştırdığı için bu işte en yeni olan birisi bile kendi kütüphanesini yazabilir. Burada kullanacağımız yöntem açıkcası underscore ve lodash gibi kütüphaneleri hatırlatır durumdadır. Öncelikle temel event handling işlemlerini yapan basit fonksiyonumuzu oluşturalım:

Ardından gelin bu fonksiyon için bir adet camel case convertor yazalım. Biraz sonra bunu neden yapıyoruz anlatacağım.

JavaScript Camel Case Convertor

Bu aşamadan sonra attributeları ve data değerlerini alan asıl fonksiyonumuzu set edelim.

Neden camel case convertor kullandığımıza gelecek olursak, JavaScript’in nimetlerinden birisi bir-attribute-adi şeklinde değer tanımlarsak onu birAttributeAdi olarak yorumlaması.

Bu sayede hem JavaScript’e yeni gelmiş olan dataset elementine hem de getAttribute fonksiyondan dönen değere erişimi de sağlayabiliriz. Örneğin is-clickable için erişim isClickable şeklinde olacaktır yine data-post-id için de erişim postId şeklinde datasetler yardımıyla olacaktır. Son haliyle yazdığımız mini javascript kütüphanesi sayesinde jQuery ile yapılabilen basit bazı işlemleri yapabileceğiz.

Örnekler

Kodların Tam Hali

Soru ve görüşleriniz için [email protected] adresine mail atabilirsiniz.

C# ile Google Authenticator / Two Factor Authenticator Kullanımı
Up Next:

C# ile Güvenlik Duvarı Kural Ekleme

C# ile Güvenlik Duvarı Kural Ekleme