Javascript’in yazım kuralları(syntax), değişkenler, fonksiyonlar gibi temellerini öğrendikten sonra, bu öğrendiklerinizi kullanabileceğiniz bir proje alanına yönelmek isteyeceksiniz ve bu alan da muhtemelen web sayfalarını düzenlemek olacaktır. Web sayfalarını düzenlemek derken esasında kasdettiğimiz şey DOM’u düzenlemek, kullanıcıdan gelen eylemlere bağlı olarak değiştirmektir. Eğer bir Arayüz Geliştirici(Frontend Developer) olarak çalışmayı hedefliyorsanız günlük rutin işlerinizin büyük bölümünü bu kaplayacaktır.
Doküman Nesne Modeli – DOM(Document Object Model) nedir?
Web sayfalarını HTML kodları yazarak oluşturuyoruz. Peki web sayfamızı oluşturmak için yazdığımız HTML kodları mıdır? Çoğu kişi böyle düşünür. Aslında yakındır da ama DOM bu değildir. Yazdığınız HTML tarayıcı tarafından yorumlanır ve DOM’a dönüştürülür.
Öyleyse tarayıcıdaki web sayfasının üzerinde faremizle sağ tıklayarak açılan menüden “Sayfa kaynağını görüntüle” seçtiğimizde karşımıza çıkan HTML kaynak kodları DOM diyebilir miyiz? Tam olarak değil!
Web sayfasının kaynak kodlarına göz attığınızda, sayfayı oluşturan HTML kodlarını görürsünüz ve sizin yazdığınız HTML kodlarına çok yakındır. Ama PHP ya da Python gibi bir arkaplan(backend) programlama dili ile oluşturulmuşsa ya da WordPress gibi bir içerik yönetimi uygulaması ile oluşturulmuşsa sizin oluşturacağınız HTML kodlarından bayağı farklı da olabilir.
Tüm web tarayıcıları web geliştiricilerine yardımcı olacak araçlar barındırır. Örneğin, Google Chrome menüsünde Diğer Araçlar menüsü altında bulunan Geliştirici Araçları gibi. Bir web sayfasında menüden bu aracı tıkladığınızda ya da F12 tuşu ile geliştirici araçlarına ulaştığınızda Elements tabında size mevcut web sitesinin HTML kodlarına sahip bir gösterim verirler.
İşte bu DOM’un gösterimidir. Evet, sizin yazdığınız HTML kodlarına çok fazla benziyorlar. Zaten sizin yazdığınız HTML kodları ile oluşturuluyorlar. Çoğu basit web sitesinde HTML ile DOM birbirinin aynısı gibidir. Ama genellikle aynısı olmaz.
Hangi durumlarda HTML ile DOM birbirinden farklıdırlar?
1- Siz HTML kodunuzda hatalar yapmış olabilir, bazı HTML etiketlerini unutmuş olabilirsiniz. Örneğin, bir tablo oluşturmak için <table> etiketiyle içinde <tr> ve <td> kullanmış olabilirsiniz ancak kullanılması gerekli olan <tbody> etiketini atlamış olabilirsiniz. Tarayıcı bu kodu sizin yerinize ekler ve kodunuzu düzeltir. Böylece sizin HTML kodunuzda yer almasa da DOM’da yer alır ve CSS ya da Javascript ile bu etikete ulaşarak kullanabilirsiniz.
2- HTML kodunuzu yazarken içi boş olan etiketler oluşturabilir, daha sonra bu etiketlere Javascript içinden içerik ekleyebilirsiniz. Örneğin;
HTML kodunuz;
<div id=”telefon”></div>
Javascript kodunuz;
<script>
var telefonNo = document.getElementById(“telefon”);
telefon.innerHTML = “+90 555 123 56 47”;
</script>
olduğunda DOM şöyle görünecektir;
<div id=”telefon”>+90 555 123 56 47</div>
Dolayısıyla HTML kodunuz ile DOM farklılık gösterecektir.
3- Ajax ya da Javascript Şablon Oluşturma(Javascript Templating) yöntemlerini kullanarak içeriği dışarıdan yükleyen web sitelerinde de HTML kodlarıyla DOM arasında farklılıklar olacaktır.
Javascript tarayıcı tarafından okunan ve bir işlem gerçekleştiren programlama dilidir. DOM ise bu işlemin gerçekleştirildiği yerdir. Örneğin; bir DOM elemanının(element) tıklanması işlemi için Javascript ile bir eylem dinleyici(event listener) yazabiliriz. Burada DOM elemanı bir düğüm(node) olarak adlandırılır. Biz eylem dinleyiciyi, o DOM düğümündeki bir DOM özelliği(property) aracılığıyla ekleriz.
DOM ile Neler Yapabilirsiniz?
DOM ile çalışırken, aşağıdakilerden birini veya birkaçını yapmanız gerektiğini göreceksiniz:
- HTML elemanlarını seçme
- Eylem dinleyicileri ekleme veya kaldırma
- Sınıf ekleme veya kaldırma
- HTML elemanlarının özelliklerini(attributes) ekleme, değiştirme veya kaldırma
- HTML elemanları ekleme veya kaldırma
HTML Elemanlarını Seçme
DOM ile ilgili işlemleri gerçekleştirebilmek için önce DOM üzerindeki elemanlara erişebilmeniz gerekir. HTML elemeanlarına erişebilmek için 2 method’u bilmeniz yeterlidir; querySelector ve querySelectorAll.
querySelector bir HTML elemanının seçmenizi sağlar. Eğer aynı kritere uyan birden fazla HTML elemanı var ise daima ilk elemanı seçer.
document.querySelector(seçici)
Bir DOM elemanını id’si(# ile), CSS sınıfı(. ile) ya da etiketiyle seçebilirsiniz.
HTML kodu;
<div id=“ilk“>HTML elemanını ID’si ile seçmek</div>
<div class=“ikinci“>HTML elemanını CSS sınıfı ile seçmek</div>
<p>HTML elemanını HTML etiketi ile seçmek</p>
Javascript kodu;
document.querySelector(‘#ilk’)
document.querySelector(‘.ikinci’)
document.querySelector(‘p’)
Tabii daha kompleks seçimler yapma ihtiyacınız da olabilir. Bu durumda yukarıda gördüğünüz id, sınıf ve etiketleri birbirilerine zincirleme şekilde de kullanabilirsiniz. Örneğin; HTML etiketi ile seçim yapmak istiyorsunuz fakat web sayfasında aynı etiketten birden fazla mevcut;
HTML kodu;
<div id=“ilk“>Seçicileri zincirleme kullanabilirsiniz.</div>
<div>Bu sayede daha kompleks seçimler de yapabilirsiniz</div>
Javascript kodu;
document.querySelector(‘div#ilk’)
Ancak mevcut imkanlarınız yeterli olacaktır. Eğer HTMl kodunu siz yazıyorsanız hiç ihtiyaç duymayabilirsiniz, çünkü id tanımlamak direkt seçim yapmak için yeterlidir. Ancak bir başka kişi ya da uygulama tarafından üretilen HTML kodu üzerinde işlem yapmanız gerektiğinde, eğer seçim yapacağınız HTML elemanına tek bir seçici ile erişemiyorsanız ihtiyaç duyarsınız.
Eleman İçindeki Elemanı Seçmek
querySelector’ün harika özelliklerinden biri de hiyerarşik olarak DOM elemanlarını seçmenizin kolaylığıdır.
HTML kodu;
<div class=“kutu“>
<div class=“icindeki-kutu“>Lorem ipsum dolor sit amet…</div>
</div>
Javascript kodu;
let ictekiEleman = document.querySelector(‘.kutu .icindeki-kutu’)
Ayrıca bir HTML elemanını javascript kodunuz içinde daha önce seçmişseniz, içinde yer alan bir başka HTML elemanını seçmek için önceki seçiminizden de faydalanabilirsiniz;
Javascript kodu;
let distakiEleman = document.querySelector(‘.kutu’)
let ictekiEleman = distakiEleman.querySelector(‘.icindeki-kutu’)
Eğer hiyerarşik olmayan birden fazla elemanı seçme ihtiyacı duyarsanız da querySelectorAll seçicisini kullanabilirsiniz.
HTML kodu;
<div class=“kutu“></div>
<div class=”kutu”></div>
<div class=“diger-kutu“>Lorem ipsum dolor sit amet…</div>
Javascript kodu;
let kutular = document.querySelectorAll(‘.kutu, diger-kutu’)
Bu durumda kutular isimli değişkenimiz içinde birden fazla elemanı barındıran bir düğüm listesi(NodeList) dizisi olur. Dolayısıyla javascript içinde dizi olarak işlem yapmak gerekir. İçindeki elemanlara ulaşmak için de .forEach method’unu kullanabilirsiniz.
Javascript kodu;
let kutular = document.querySelectorAll(‘.kutu, diger-kutu’)
kutular.forEach(el => {
/* elemanlar üzerinde gerçekleştirilecek işleme ait kodlar */
})
Eylem Dinleyiciler
Eylem dinleyiciler(Event Listeners) bir kullanıcı DOM ile etkileşime girdiğinde Javascript’in bir işlem gerçekleştirmesini sağlar. Örneğin kullanıcı bir butonu tıkladığında gizli bir menünün görünür olmasını sağlayabilirsiniz.
See the Pen
JS ile DOM düzenlemek : Off-Canvas Menü Örneği by Oben SEVEN (@obenseven)
on CodePen.
Bunun için 2 method’u öğrenmeniz yeterlidir; addEventListener ve removeEventListener.
Bir eylem dinleyiciyi HTML elemanını seçip, addEventlistener() method’unu ekleyerek oluşturursunuz. 2 parametre alır, bunlardan birincisi dinlemek istediğiniz eylemi belirlemenizi sağlar, ikincisi ise bu eylem meydana geldiğinde yapılmasını istediğiniz işlemi oluşturan fonksiyondur. Bu fonksiyon Geri Çağırma(Callback) fonksiyonu olarak adlandırılır. Başka bir fonksiyona parametre olarak verilen fonksiyonlara Geri Çağırma(Callback) fonksiyonu denir. Geri Çağırma(Callback) fonksiyonu da tek bir parametre alır; eylem nesnesi.
secimDegiskeni.addEventListener(eylem, geriCagirmaFonksiyonu)
HTML kodu;
<button id=”yeni-buton”>Tıklayınız</button>
<p></p>
Javascript kodu;
let butonum = document.querySelector(‘#yeni-buton’);
let icerik = document.querySelector(‘p’);
butonum.addEventListener(‘click’, mesajGoster);
function mesajGoster(eylem){
eylem.preventDefault();
icerik.innerText = ‘Merhaba’;
}
Örneği Codepen’de Görüntüle
Basit Eylem Dinleyici Örneği by Oben SEVEN (@obenseven)
on CodePen.
Bir eylem dinleyiciyi kaldırmak da eklemek ile aynı şekilde yapılır. Tek fark kullanılan method’un removeEventListener() method’u olmasıdır;
secimDegiskeni.removeEventListener(eylem, geriCagirmaFonksiyonu)
Bir eylem dinleyiciyi kaldırmak için öncelikle onun var olması gerekiyor. Dolayısıyla addEventListener ile oluşturduğunuz eylem dinleyicinin gerçekleştirdiği işlemi iptal etmek için, eylem dinleyiciyi kaldırma işlemi Geri Çağırma(Callback) fonksiyonu içindeki görevini yerine getirdikten sonra kullanılır.
See the Pen
Eylem dinleyiciyi iptal etmek by Oben SEVEN (@obenseven)
on CodePen.
Javascript ile CSS Sınıfları Eklemek ya da Kaldırmak
Eylem dinleyicilerden ilk bahsettiğimizde, sayfanın birazcık yukarılarında size örnek olarak gösterdiğimiz off-canvas menü örneğini hatırlıyorsunuzdur. İşte bu örnek javascript ile CSS sınıfı eklemek ve kaldırmak suretiyle elde edilmiş bir animasyondur ve Javascript ile CSS’i birlikte kullandığınızda ne kadar güçlü hale geldiğini gösteren bir örnektir.
Ekranın görünen kısmı dışında yer alan bir içerik, butona tıklama eylemi sonucu javascript ile CSS sınıfı eklenerek animasyonlu şekilde kayarak görünür hale geliyor ve butona tekrar tıklandığında ise CSS sınıfı kaldırılarak animasyon ile tekrar görünür alanın dışına çıkıyor.
Yani burada eylem dinleyicimiz CSS sınıfı ekleme ve kaldırma işlemi gerçekleştiriyor. Peki, javascript mevcut anda kullanıcının butona kaç kez tıkladığını bilemeyeceğine göre menünün açık olup olmadığını nereden bilecek ve buna göre menüyü açacak mı yoksa kaldıracak mı nasıl karar verecek?
Bunu da eylem dinleyiciye CSS sınıfının mevcut olup olmadığını kontrol eden bir method yardımıyla çözüyoruz.
CSS sınıfı eklemek için;
secimDegiskeni.classList.add(‘css-sınıf-ismi’)
CSS sınıfını kaldırmak için;
secimDegiskeni.classList.remove(‘css-sınıf-ismi’)
CSS sınıfının var olup olmadığını kontrol etmek için;
secimDegiskeni.classList.contains(‘css-sınıf-ismi’)
See the Pen
JS ile DOM düzenlemek : Off-Canvas Menü Örneği by Oben SEVEN (@obenseven)
on CodePen.
Neler yaptığımıza göz atacak olursak eğer;
Önce her zamanki gibi DOM üzerinde bulunan elemanlarımıza erişmemizi sağlayan seçicileri kullandık.
Butonumuza bir eylem dinleyici yerleştirerek tıklama eylemi ile çalıştırılacak bir fonksiyon ekledik.
Fonksiyonumuzda ilk yaptığımız işlem mevcut anda ilgilendiğimiz DOM elemanının menünün açık durumunu sağlayan CSS sınıfına sahip olup olmadığını kontrol etmek oldu. Yani öğrenmek istediğimiz; mevcut durumda menü açık mı, yoksa kapalı mı?
menu.classList.contains(‘acik’)
Eğer açıksa; menüyü kapat, aksi takdirde menüyü aç anlamına gelen if koşullu ifademizi yazdık.
Menüyü kapatma işlemini CSS sınıfını kaldırarak;
menu.classList.remove(‘acik’)
Menüyü açma işlemini ise CSS sınıfını ekleyerek sağladık;
menu.classList.add(‘acik’)
DOM elemanlarına Özellik Ekleme, Kaldırma ya da Mevcut Değerini Değiştirme
Özellikler, HTML etiketlerinin önemli bir parçasıdır. Bazen JavaScript’inize bağlam vermek için bu özelliklerden bilgi edinmeniz gerekir. Bazen de, arayüzler yazmanıza yardımcı olması için bu özellikleri kullanabilirsiniz.
Accessible Rich Internet Applications (WAI-ARIA) kavramı ve özellikle Bootstrap veya benzeri CSS framework’lerinde karşılaşacağınız aria- ile başlayan özellikler engelli bireylerin internet kullanımını ve bilgiye ulaşmasını sağlayan özelliklere de değineceğiz. Genellikle aria-hidden, aria-label özelliklerin karşımıza çıktığı bu yeni özellikler esasında çok daha kapsamlıdırlar.
Şimdi daha önceki off-canvas gizli menü örneğimize erişebilirlik özelliklerini ekleyerek yazalım;
See the Pen
JS ile DOM düzenlemek : Aria ile Off-Canvas Menü Örneği by Oben SEVEN (@obenseven)
on CodePen.
Burada aria- ile başlayan özelliklerin fonksiyonun çalışması üzerinde bir etkisi yoktur, ancak bu özellikler engellilerin bilgiye ulaşmasında önemli rol üstleniyorlar. Örneğin, görme engelli kişilerin internet sitelerinde gezmesini sağlayan 3. parti programlar ekranda görünen metinleri anlamlandırarak ses ortamına aktarırlar. Geliştiricilerin aria etiketini kullanması ise bu programların içeriğinizi daha iyi analiz etmesini kolaylaştırır.
Bir HTML etiketine özellik eklemek için;
secimDegiskeni.setAttribute(‘ozellik-ismi’, true)
Bir HTML etiketinden özellik kaldırmak için;
secimDegiskeni.getAttribute(‘ozellik-ismi’)
Bir HTML etiketinde bir özelliğin var olup olmadığını öğrenmek için;
secimDegiskeni.removeAttribute(‘ozellik-ismi’)
DOM’a Eleman Eklemek ya da Kaldırmak
Web sayfasında başlangıçta var olmayan HTML etiketlerini de tarayıcıda çalışma anında Javascript ile DOM içine yerleştirerek kullanabilirsiniz. Ya da web sayfasında başlangıçta mevcut olan HTML etiketlerini tarayıcıda çalışırken bir eylem gerçekleştiğinde kaldırabilirsiniz.
Örneğin, daha önceki örneklerimizde basit bir eylem dinleyici oluşturmuştuk ve sonra eylem dinleyiciyi kaldırıp butonun işlevini iptal etmiş, tekrar tıklanmasını önlemiştik. Peki butona tekrar tıklanmayacak ise, halen web sayfasında yer almasına ne gerek var? Eylem dinleyiciyi iptal etmek yerine, eylem dinleyiciyi tanımladığımız DOM elemanını tamamen ortadan kaldırabiliriz.
Bir DOM elemanını web sayfasından kaldırmak için;
UstDomElemani.removeChild(kaldirilacakDomElemani)
See the Pen
Bir DOM Elemanını Kaldırmak by Oben SEVEN (@obenseven)
on CodePen.
Web sayfasına yeni bir DOM elemanı yerleştirmek için de önce elemanı oluşturur;
let secimDegiskeni = document.createElement(‘eklenecekDomElemani’);
Daha sonra içine yerleştirilecek DOM elemanını seçip .append() fonksiyonu ile ekleriz;
UstDomElemani.append(secimDegiskeni)
Örneğin yukarıdaki kodumuzda verdiğimiz son mesajı DOM’a tarayıcı çalışma anında ekleyelim;
See the Pen
Yeni bir DOM Elemanı Eklemek by Oben SEVEN (@obenseven)
on CodePen.
Bir başka örnek için göz atın lütfen;
See the Pen
DOM Elemanın Ekleme ve Kaldırma by Oben SEVEN (@obenseven)
on CodePen.
