BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 6: JavaScript Sürümleri ve DOM Yapısı
Giriş
JavaScript, ilk duyurulduğunda tarayıcılar üzerinde çalışan, basit bir betik dili idi. Büyük projelerde kullanılmasını engelleyen eksikleri vardı. Ancak yıllar içinde aldığı güncellemelerle birlikte eksikleri giderilerek web programlama için önemli bir teknoloji hâline geldi.
Sadece tarayıcılar üzerinde çalışması planlanan ilk sürümden sonra gelen güncellemeler sayesinde bugün hem tarayıcılarda hem sunucularda hem de mobil cihazlarda uygulama geliştirilebiliyor.
Javascript sürümleri
Javascript, web sayfalarını dinamik ve kullanıcı ile etkileşimli hâle getirmek için tanıtılan betik bir dilidir. 1996 yılında ECMA standardı oldu ve ECMAScript (ES) adını aldı. İlk üç sürüm ES1, ES2, ES3 sürümleri güncellenemedi, ES4 sürümü bazı anlaşmazlıklardan dolayı yayınlamadı. 10 yıl sonra ES5 sürümü birkaç eklemeyle piyasaya sürüldü.
ES5 sürümü, 2009 yılında piyasaya sürüldü. USE STRICT özelliği kullanıldı.
• Yeni dizi yöntemleri: isArray(), forEach(), map(), filter(), reduce(), indexOf(), • JSON desteği: parse(), stringijy(), • Yeni tarih metotları: now() gibi özelliklerle birlikte gelmiştir.
ES6 sürümü, 2015 yılında piyasaya sürüldü.
• let ve const anahtar kelimeleri, • for…of yapısı, • varsayılan parametreler, • REST(…) Operatörü, • Spread Operatörü, • Arrow fonksiyonlar, • Promise gibi özellikleri bulunmaktadır.
ES7 sürümü, 2016 yılında piyasaya sürüldü.
• Exponansiyel operatör, • Includes metotları gibi özellikleri bulunmaktadır.
ES8 sürümü, 2017 yılında piyasaya sürüldü. Bu sürüm JavaScript ile yeni kodlama yöntemlerine izin verir.
• ASYNC/AWAİT yapısı, • Paylaşılan bellek gibi özellikleri bulunmaktadır.
ES9 sürümü, 2018 yılında piyasaya sürüldü.
• Asenkron tekrarlama yapısı, • Düzenli ifade iyileştirmeleri, • Rest/Spread özellikleri bulunmaktadır.
ES10 sürümü, 2019 yılında piyasaya sürüldü.
• Array.flat(), Array.flatMap(), • String.trimStart() ve String.trimEnd() metotları, • try/catch yapısı gibi özellikleri bulunmaktadır.
ES11 sürümü, 2020 yılında piyasaya sürüldü.
• BigInt, • matchAll, • Modül import özellikleri bulunmaktadır.
ES12 sürümü, 2021 yılında piyasaya sürüldü. En güncel sürümdür.
• String.prototype.replaceAll, • Promise.any, • WeakRef, • &&= gibi operatör özellikleri bulunmaktadır.
Modern Javacript
Temel JavaScript komutlarında ES5 ile birlikte büyük değişiklikler ve gelişmeler oldu. Dil yapısındaki eksikliklerin birçoğu ES5 ve sonraki sürümler ile giderilmiştir.
Arrow Fonksiyonlar: ES6 ile gelen özelliklerden biridir. Normal fonksiyon tanımlamalarına göre daha temiz kod yazılmasını sağlar.
Dizi İşlemleri: JavaScript dilinin en önemli yapılarındandır. Dizi metotları geliştirme yaparken hız ve kolaylık sağlanmıştır. Dizilerle çalışırken en yaygın işlemlerden biri, orjinal dizi ögelerinin bir alt kümesini içeren yeni bir dizi oluşturmaktır.
• filter() metodu dizi elemanlarını belirtilen koşula göre filtreler ve yeni diziye ekler. • find() metodu dizi içerisindeki, belirtilen koşula ait ilk elemanı geri döndürmek için kullanılabilir. • findIndex(), dizi içerisindeki, belirtilen koşula ait ilk elemanın indeks numarasını döndürür. • forEach() metodu for yapısından daha sade olan dizi elemanları arasında tek tek dolaşmak için kullanılır.
Spread Operatörü: Dizi gibi yinelenebilir nesneleri ögelerine ayırmak için kullanılır. Bir dizideki tüm elemanlara aynı anda ulaşmak için dizinin önüne spread operatörü olan üç nokta (...) konulabilir. Böylelikle iki farklı dizinin elemanları tek bir eleman gibi bastırılabilir.
• Spread operatörünün kullanım yerlerinden diğer biri fonksiyon parametreleridir. Fonksiyonun, alacağı parametre sayısı değişken olduğunda, spread operatörü ile gönderilen parametrelerin dizi şeklinde alınması sağlanabilir.
Destructuring Atamalar: Dizinin öğelerine ulaşmak için indeks numaraları, nesnelerin ögelerine ulaşmak için ise özellik adlarını kullanmak gerekir. Destructing atama yöntemini ise dizi ve nesnelerin elemanlarını başka değişkenlere aktarmada kolaylık sağlar.
• Klasik yöntemde dizi ögelerini yeni değişkene aktarmak için, her yeni değişkeni const, let veya var ile tanımlamak, elemana ise indeks numarası ile ulaşmak gerekir.
• Dizideki ihtiyaç olmayan elemanı atlamak için iki virgül arasına değişken yazmadan da atama yapılabilir. Destructuring, dizi elemanlarının yanında nesnelerle birlikte de kullanılabilir. Nesnelerin özelliklerini, aynı isimdeki değişkenlere doğrudan aktarabilir.
Modül Sistemi: JavaScript ilk çıktığı yıllarda, HTML ve CSS dosyalarına yardımcı olacak şekilde küçük işlemler yapabiliyordu. Yapılan işlemler çok büyük olmadığı için, büyük dosyalara yazılmasına gerek yoktu. Kullanımı yaygınlaştıkça web sayfalarında üstlendikleri görevler arttı.
• 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. Modül yapısı import ve export anahtar kelimeleri ile birlikte kullanılırlar. • JavaScript dosyasından, başka dosyaya aktarılacak değişken veya fonksiyonun export (dışa aktarmak) edilmesi gerekir. Default ve Named olarak adlandırılan iki türlü export kullanımı vardır. • JavaScript dosyasına farklı dosyada hazırlanan değişken veya fonksiyonu dahil etmek için import (içe aktarmak) anahtar kelimesi kullanılabilir. Import işlemi, değişken veya fonksiyonun hazırlandığı sayfada Named Export veya Default Export yapılmasına göre farklılıklar gösterir.
DOM Yapısı
Tarayıcılar web sayfalarını yükledikten sonra, sayfanın DOM (Document Object Model) olarak adlandırılan yapısını oluşturur. DOM, web sayfalarını oluşturan HTML dokümanlarını düğüm ağacı olarak modeller. Her bir düğüm, HTML dokümanında bir ögeyi temsil eder.
HTML elemanları JavaScript ile düzenlenebilir, silinebilir veya yenileri eklenebilir. Bu sayede JavaScript sayfaları dinamik hale getirilebilir.
HTML Ögelerini Seçme: HTML ögelerini JavaScript ile seçerek istenilen veriler elde edilebilir veya güncellemeler yapılabilir. Kullanılan metotlara göre tek veya çok öge seçimi yapılabilir.
• HTML dokümanındaki ögelere, ögenin id bilgisi ile ulaşılmak istenirse getElementById() metodu kullanılabilir. Bir id değeri sayfada tek ögeyi işaretleyeceği için bu metodla tek bir ögeyi seçebiliriz. • HTML ögelerine etiket adı kullanarak ulaşmak için getElementsByTagName() metodu, sınıf isimleriyle ulaşmak için de getElementByClassName() metodu kullanılabilir. • 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. Yazılan seçici birden fazla ögeyi işaret ediyorsa ilk ögeyi döner. • querySelectorAll() metodu HTML dokümanındaki birden çok elemana tek seferde ulaşılmak istenildiğinde kullanılabilir.
Ögeleri Düzenleme ve Kaldırma: HTML sayfalarında DOM yapısı kullanılarak, ögelerin içerikleri 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. • Ulaştığımız ögeyi sayfadan kaldırmak istersek remove() metodunu kullanabiliriz.
Öge Ekleme: DOM yapısına JavaScript kullanarak yeni ögeler eklenebilir.
• Yeni bir öge oluşturmak için createElement() metodu kullanılabilir. • Ögeyi dokümana eklemek için ise appendChild() metodu kullanılabilir.
Ögeler Arasında Gezinme: Her biri düğüm olarak adlandırılan ögelere doğrudan ulaşabiliriz. Ancak bazı durumlarda ulaştığımız ögenin altındaki ögeye geçmek veya bir üst ögeye geri dönmek gerekebilir.
• Kapsayıcının altında bulunan ilk ögeye ulaşmak için firstElementChild özelliğini, son ögeye ulaşmak için lastElementChild özelliği kullanılabilir. • Aynı seviyede olan bir sonraki ögeye gitmek için nextElementSibling özelliği, önceki ögeye gitmek için ise previousElementSibling özelliği kullanılabilir. • Bir üst seviyedeki ögeye dönmek için parentElement metodu kullanılabilir.
Ögenin Stil Sınıfını Düzenleme: JavaScript ile HTML ögelerine stil kuralları yazabileceğiniz gibi, daha önceden hazırladığınız stil kurallarını atayabilir veya kaldırabiliriz.
• Ögeye sınıf eklemek için element.classList.add() metodu kullanılabilir. • Ögenin sınıfını kaldırmak için element- classList.remove() metodu kullanılabilir. • Geçiş özelliği için element.classList.toggle() metodu kullanılabilir.
Event Kavramı: JavaScript, kullanıcı veya tarayıcı tarafından sayfada gerçekleşen eylemleri takip edebilir. Takip ettiği eylemler event kavramı ile ifade edilir. Tarayıcı, bir belgeyi yüklemeyi tamamladığında veya kullanıcı bir butona tıkladığında, JavaScript ile tanımlanmış event metodu tetiklenir.
• HTML sayfaya yeni bir event eklemek için addEventListener() metodu kullanılmalıdır.