JavaScript Sürümleri ve DOM Yapısı

Geliştirme aşamasında Mocha olarak adlandırıldı
ve ilk olarak Netscape Navigator 2.0 ile LiveScript olarak adlandırıldı. Son olarak, Netscape Navigator 2.0
Beta 3 yayımlandığında Javascript adı verildi.

• USE STRICT
JS’nin önceki sürümleri, tanımlanmamış değişkenlerin kullanımına izin verir. Ancak ES5 ile gelen
‘USE STRICT ‘ özelliği kullanıldığında tanımlanmayan değişkenlerde hata verir.
• Yeni Dizi Yöntemleri
- isArray(): Bu yöntem, nesnenin bir dizi olup olmadığını kontrol eder ve sonucu true veya false
olarak döndürür.
- forEach():Dizide bulunan her öge için fonksiyonu yürütür.
- map(): Bu yöntem, dizinin (haritanın kullanıldığı) her ögesini eşleyerek yeni bir dizi oluşturur.
- filter(): Belirtilen koşullara uyan dizi ögelerinin geçmesini sağlayarak filtrelenen ögeleri içeren
yeni bir dizi oluşturur.
- reduce(): Dizideki her ögeye bir fonksiyon uygular ve diziyi tek bir ögeye indirger.
- indexOf(): Bir dizideki ilk eşleşmenin indeks numarasını döndürür. Bulamazsa -1 döndürür.
• JSON Desteği
- parse(): Bir nesneye benzeyen bir JSON dizesini ayrıştırır
- stringify(): Bu yöntem, bir nesneyi bir JSON dizesine dönüştürür.
• Yeni Tarih Metotları
- now(): 1 Ocak 1970 tarihinden itibaren geçen zamanı milisaniye cinsinden verir.

• let ve const Anahtar Kelimeleri
ES5’e kadar değişken tanımında yalnızca var anahtar kelimesi kullanılıyordu. ES6 ile birlikte gelene
let ve const anahtar kelimeleri ile blok kapsamlı değişkenler tanımlanabilir oldu. Önceki bölümde her iki
anahtar kelimeden de bahsedilmişti.
• FOR..OF
for...of hem for...in hem de forEach() için bir alternatiftir. Diziler, Haritalar, Kümeler ve dizeler gibi
yinelenebilir veri yapılarını döngüye sokar.
• Varsayılan Parametreler
Fonksiyon parametrelerine hiçbir değer iletilmediğinde veya tanımsız değer gönderildiğinde, fonksiyo-
nun varsayılan değerler ile çalıştırılmasını sağlar.
• REST(...) Operatörü
Rest Operatörü, fonksiyon parametrelerini işlemek için kullanılır. Söz dizimi olarak üç nokta(...) kullanır.
• Spread Operatör
Spread Operator dizilerle birlikte kullanılır ve söz dizimi Rest Operator ile tamamen aynıdır (...). Bir
dizinin içeriğini bölmek için kullanılır.
• Arrow fonksiyonlar
Fonksiyon yazmayı basitleştirmek için geliştirilmiştir. İlerleyen konularda ayrıntılı incelenecektir.
• Promise

• Asenkron Tekrarlama
Asenkron tekrarlanabilir bir nesne, for-await-of yardımıyla bir döngü yinelemesi olarak kullanılabilir.
• Düzenli İfade İyileştirmeleri
• Rest/Spread Özellikleri

• Array.flat() ve Array.flatMap()
• String.trimStart() ve String.trimEnd()
• try/catch yapısı

• BigInt
• matchAll
• Modül Import İsimlendirmeleri

• String.prototype.replaceAll()
• Promise.any
• WeakRef
• &&=, ||= ve ??= operatörleri
• Sayısal Ayırıcılar

JavaScript ile birlikte gelen filter() metodu, dizi elemanlarını belirtilen koşula göre
filtreler ve yeni diziye ekler.

for yapısından daha sade olan forEach(), dizi elemanları arasında tek tek dolaşmak için kullanılan metottur. for yapısının kısıtlı ama daha sade kullanımına sahip hâlidir.

spread operatörü, dizi gibi yinelenebilir nesneleri ögelerine ayırmak için kullanılır. Örneğin bir dizideki tüm elemanlara aynı anda ulaşmak için dizinin önüne spread operatörü olan üç nokta (...) konulabilir.

Modül yapısı bir sayfada yazılan kodun başka sayfalarda da kullanılabilmesine olanak verir. Proje içerisinde sürdürülebilirliği arttırır. Örneğin projede yazdığınız yaş hesaplayan fonksiyonu modül yapısı sayesinde diğer sayfalarda da kullanılabilir.

DOM işlemleri yaparken kullandığımız metotlardan olan getElementById() ile id’sini bildiğimiz ögeleri seçebiliriz. Bir id değeri sayfada tek ögeyi işaretleyeceği için bu metodla tek bir ögeyi seçebiliriz.

HTML ögelerine CSS seçicileri kullanarak da erişilebilir. querySelector() metodu içerisine yazılan CSS seçisini kullanarak ilgili HTML ögesini bulur ve döner. Bu metot ile yazılan CSS kuralları, etiket, sınıf, id veya HTML özelliği gibi seçicilerden oluşabilir.

HTML sayfamızda bulunan elemanlardan sadece birisini seçmek istediğimizde querySelector() metodu kullanılabilir. Bu metot birden çok eleman olduğunda yalnızca ilk elemanı döndürür.

DOM yapısını kullanarak ulaştığımız öğgelerin içeriği, JavaScript ile kolayca düzenlenebilir. Öge seçildikten sonra, metin içeriğini değiştirmek için innerText özelliği veya HTML içeriğini değiştirmek için innerHTML özelliği kullanılabilir.

DOM yapısına JavaScript kullanarak yeni ögeler eklenebilir. Yeni bir ögeyi oluşturmak için createElement() metodu kullanılabilir. Ögeyi dokümana eklemek için appendChild() metodu kullanılabilir.

Kapsayıcının altında bulunan ilk ögeye ulaşmak için firstElementChild özelliği kullanılabilir.

Kapsayıcının altında bulunan Son ögeye ulaşmak için lastElementChild özelliği kullanılabilir.

JavaScript ile HTML ögelerine stil kuralları yazabileceğiniz gibi, daha önceden hazırladığınız stil kurallarını atayabilir veya kaldırabilirsiniz. Ögeye sınıf eklemek için element.classList.add() metodu kullanılabilir.

HTML sayfaya yeni bir event eklemek için addEventListener() metodu kullanılmalıdır.