Javascript Dom, String, Array Metodları

Photo by Gabriel Heinzer on Unsplash

String Metodları

var text = “Bu string ifade üzerinden string metodlarına örnekler verelim. ” ;

• text.toUpperCase(): text ifadesinin karakterlerini büyük harfe çevirir.
• text.toLowerCase(): text ifadesinin karakterlerini küçük harfe çevirir.
• text.concat(‘text1’, ‘text2’): Bir veya daha fazla string ifadeyi birleştirmek için kullanılır.
• text.Trim(): Karakter dizisindeki başındaki ve sonundaki boşluklar silinir.
• text.Replace(“ifade”, ”metin”): String bilgiyi değiştirmeye yarar. “ifade” yerin “metin” yazılmasını sağladık.
• text.CharAt(0): Belirtilen index numarasında yer alan karakteri verir. Bu örnekte 0 indexli yani B karakterini getirir.
• text.charCodeAt(0): Belirtilen index numarasında yer alan karakterin Unicode değerini verir. B’nin karşılığı olan 66 sonucu döner.
• text.startsWith(“Bu”): Belirtilen ifade ile başlayıp başlamadığını kontrol eder. Boolean bir ifadedir. Burada sonuç olarak true dönecektir. İkinci parametre verilerek hangi indexten kontrol edileceği belirtilebilir.
• text.endsWith(“yanlış”): endsWith()metodu ise metnin sonunun bu ifade ile bitip bitmediğini kontrol eder. Boolean bir ifadedir. Burada sonuç olarak false dönecektir. İkinci parametre verilerek hangi indexten kontrol edileceği belirtilebilir.
• text.includes(“string”): Bu değeri içerip içermediğini kontrol eder. True döner.

Metin içerisinde arama

• text.indexOf(“string”): Metin içerisinde string ifade aramak için kullanılır. Aranan ifadeye ilk karşılaştığı yerin indexini döner. Bulamazsa -1 döner. Bu örnekte sonuç 3 olarak dönecektir.
• text.lastIndexOf(“string”): indexOf() metodu ile aynı çalışır fakat bu sefer son karşılaştığı yerin indexini döner. Bulamazsa -1 döner. Bu sefer aynı örnekte sonuç 27 dönecektir.
• text.Search(“string”): indexof() ile aynı işe yarar. Search()’te regular expression ile arama yapılabilir.

String parçalama

• text.slice(3,25): Başlangıç ve bitiş indexlerini vererek o aralıktaki ifadeyi almaya yarar. Son değer verilmezse sona kadar alır. sonuç olarak “string ifade üzerinden” döner. Negatif değer verilebilir. Sondan başlayarak hesaplar.
• text.substring(3,25): Slice ile aynıdır. Sadece Substring’te negatif değer veremeyiz.
• text.substr(3,25): String parçalama metodudur. Fakat ikinci parametre ne kadar uzunluktaki ifadeyi alması gerektiğini belirtir. Sonuç olarak “string ifade üzerinden st” ifadesini döner.
• text.split(“ ”): İfadeyi belirtilen karakterden parçalara ayırarak bir dizi oluşturur. Bu örnekte boşluk gördüğü yerleri ayırır.

Array Metodları

let arr = [1,2,3,4,5,6 ];

• arr.push(7) : Dizinin sonuna ekleme yapar. [1,2,3,4,5,6,7]
• arr.pop() : Dizinin sonundaki elemanı siler. [1,2,3,4,5]
• arr.shift(0) : Dizinin başına eleman ekler. [0,1,2,3,4,5,6]
• arr.unshift() : Dizinin başındaki elemanı siler. [2,3,4,5,6]
• arr.reverse() : Diziyi ters çevirir. [6,5,4,3,2,1]
• arr.map(deger => deger<5) : Verilen şarta uygun elemanları alır ve yeni bir dizi oluşturur. Şart yerine fonksiyonda belirtilebilir.[1,2,3,4]
• arr.foreach(function(element)) : Dizideki her bir eleman için fonksiyondaki işlemi gerçekleştirir.
• arr.find(deger => deger === 5) : Dizide sadece bir eleman seçeceksek bu metod kullanılır.
• arr.filter(deger => deger < 5) : Dizide birden fazla eleman filtrelemek istiyorsak bu sefer filter kullanılır.
• arr.sort(): Dizi elemanlarını artan ya da azalan olarak sıralamaya yarar.
• arr.some(deger => deger<5) : Verilen şarta uygun elemanları alır ve yeni bir dizi oluşturur. [1 ,2,3,4]
• arr.every(deger=> deger<5) : Dizideki elemanların hepsi verilen şarta uyuyorsa true herhangi biri bile uymuyorsa false döner.
• arr.includes(5) : Dizide belirtilen değer bulunup bulunmadığını kontrol eder. Boolean bir ifadedir. 5 değeri için true döner.

Dom Manipülasyonu için Kullanılan Metodlar

<p id=’zeze’ class=’medium’> Html bilgilerine erişim ve yönetimi için bu metotlar kullanılır </p>

• document.querySelector(‘.medium’) ||document.querySelector(‘#zeze’) : Bu metotta class ile mi id ile mi sorgulandığını belirtmek için başına “.” veya “#” eklenmelidir.
• document.querySelectorAll(‘.medium’) : querySelector ile kullanımı aynıdır. İlk bulduğunu değil hepsini getirir. NodeList döndürür.
• document.getElementsById(‘zeze’) : id ile erişim sağlanır.
• document.getElementsByClassName(‘medium’) : class ile erişim sağlanır.
• document.getElementsByTagName(‘p’): Etiket ismine göre erişim sağlar.
• document.forms[“frm1”] : id ‘si frm1 olan form öğesi elemanlarının hepsini döndürür.
• document.forms : Sayfadaki bütün formların bilgilerini listeler.
• document.head : head etiketini getirir.
• document.body : body etiketini getirir.
• document.title : Title etiketini getirir.
• document.images : Sayfadaki tüm resim etiketlerinin bilgilerini listeler.
• document.URL : Sayfanın Url bilgisini getirir.
• document.links : title etiketini getirir.
• document.domain : Sayfanın domain bilgisini getirir.
• document.all: Sayfadaki tüm elementleri listeler.
• document.all.length: Sayfadaki tüm elementlerinin sayısını verir.