Bir projede kullanmak üzere bazı kelimelerin geçtiği sayıyı alıp toplamda kaç adet aynı kelimeden bulunduğunu ekrana yazdırmam gerekti. Bunu yaparken basit bir sayaç oluşturdum.

Javascript ile DOM üzerinden class erişerek aradığımız kelime ile eşleşen bir kelime varsa, kelimemizin sayacını arttırıyoruz. Sorgulama işlemi sırasında javascript string fonksiyonlarını kullanıyoruz. Adım adım işlemlerimizi uygulamaya başlayalım.

İlk olarak DOM üzerinde class nesneme erişmem gerekiyor. Erişme işlemini basite indirgemek için bir değişkene atıyorum.

var path = document.getElementsByClassName("alcohol-element");

Aynı class değerine sahip olan etiketlerimin sayısını bulmak için .length özelliğini kullanıyorum.

var pathLen = path.length;

*Kontrolünü sağlamak için, pathLen değerini konsol üzerinde yazdırabiliriz.

Saydırmak istediğim kelimeler için birer integer değişken oluşturuyorum. Başlangıç değeri olarak da 0 sayısını veriyorum.

var vodkaLen = whiskyLen = brandyLen = vermouthLen = cognacLen = beerLen = wineLen = rumLen = ginLen = 0;

Class sayısını alabildiğimize göre bir döngü oluşturabiliriz: 

for(var i=0 ; i

}

String fonksiyonlarımızın sonuçlarına göre, sayaç olarak tanımladığımız değişkenlerimize arttırma işlemi uygulayabiliriz. Hatırlayacağınız üzere id elemanları bir kere kullanabilirken, class elemanlarını birden fazla yerde kullanabiliriz. İstediğimiz class erişimini sağlamak için de, dizilerde kullanılan index numaralarından faydalanabiliriz.

var erisilenClass = "";

for(var i=0 ; i

  erisilenClass = document.getElementsByClassName("alcohol-element")[i].innerHTML.toLowerCase();

}

innerHTML özelliği ile alcohol-element class içerisinde bulunan değerleri erisilenClass değişkenine atıyorum. toLowerCase() fonksiyonu ile de bütün karakterlerimi küçük harflere çeviriyorum. Bir döngü olduğundan dolayı, erisilenClass değişkenim her başlangıçta yenileniyor.

Şimdi benim bütün karakterler yerine, içerisinde bulunan kelimelere ihtiyacım var. Bir karar yapısı oluşturarak kelimelerin varlığını sorgulayabilirim. Karar yapısı içerisinde search fonksiyonunu kullanacağım. Bu fonksiyon kelimenin varlığında kelimeye ait başlangıç index sayısını döner. Yokluğunda ise -1 değerini döndürür.

if( erisilenClass.search("vodka") != -1 ){

  vodkaLen += 1;

}

Konsol üzerinde vodkaLen değerini kontrol ettiğimde bir sayı dönüyor. Ancak benim kelimemin başında veya sonunda nokta virgül gibi noktalama işaretleri bulunabilir. Onları da alabilmek için karar yapımı mantıksal operatörlerle biraz daha genişletiyorum.

if( (erisilenClass.search("vodka") != -1) ||

(erisilenClass.search("vodka,") != -1) || (erisilenClass.search(",vodka") != -1) ){

  vodkaLen += 1;

}

Yapılan değişiklikleri HTML sayfam üzerinde gösterme zamanı… Tekrardan innerHTML özelliğine başvuruyorum. vodkaLen class bulunan etiketler içerisine, değişkenimi arttırarak gömüyorum.

if( (erisilenClass.search("vodka") != -1) || (erisilenClass.search("vodka,") != -1) || (erisilenClass.search(",vodka") != -1) ){

    document.getElementsByClassName("vodkaLen")[0].innerHTML = ++vodkaLen;

}

vodkaLen üzerinde yaptığım işlemleri geri kalan değişkenler için de uyguluyorum.

Kodların biraz daha derli toplu halini görebilmek için, github kaynağını inceleyebilirsini: https://github.com/kahilkubilay/kahilkubilay.github.io

Sayacın nasıl göründüğünü kontrol etmek için, burada bulunan adresi ziyaret edebilirsini: https://kahilkubilay.github.io/