Yeni bir sıfırdan ileriye Javascript konusuna hoş geldiniz. Bugün ele alacağımız konu Javascriptin olmazsa olmazlarındandır. Buna Dom (Document Object Model) denilmektedir. Bu DOM denilen şey basitçe bizlerin web siteyi daha statik kullanmamıza yardımcı olur. Mesela HTML ile bir buton oluşturup bunu CSS ile güzel bir buton haline çevirdiniz ama bu butonun hiçbir özelliği yok sadece orada görsel olarak duruyor. Biz DOM yapısı ile bu butonun çalışmasını sağlayabiliyoruz. Mesela web sitelerinde karanlık tema-açık tema özellikleri mevcut bunu Javascript ile yapılıp kullanıcı karanlık tema seçeneğini seçerse karanlık temanın kodlarını çalışmasını sağlayan da DOM yapısıdır.
Kısaca DOM, HTML üzerindeki etiketleri manipüle etmemizi sağlayan bir Javascript özelliğidir. Lafı uzatmadan kodlara dökelim daha iyi anlayacaksınız.
Kısaca DOM, HTML üzerindeki etiketleri manipüle etmemizi sağlayan bir Javascript özelliğidir. Lafı uzatmadan kodlara dökelim daha iyi anlayacaksınız.
Etiket Adına Göre Öğeleri Alma
İlk olarak bir DOM manipülesi yapabilmek için manipüle etmek istediğimiz etiketi seçmemiz lazım. Bunun birçok yolu vardır ve en çok kullanılan yolları bu konuda öğreneceksiniz. Bunlardan ilki etiket adlarına göre öğeleri almaktır. HTML dosyasında bulunan öğelerin adını yazarak ulaşabiliriz.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class='baslik' id='ilk'>Başlık 1</h1>
<h1 class='baslik' id='ikinci'>Başlık 2</h1>
<h1 class='baslik' id='ucuncu'>Başlık 3</h1>
</body>
<script src="main.js"></script>
</html>
HTML dosyamızda üç adet başlık var ve hepsi aynı etikete sahip. Bu etiketler birden fazla olduğu için döngü kullanarak almamız lazım aksi halde sadece ilk etiketi seçmiş oluruz.
JavaScript:
const elementleriAl = document.getElementsByTagName("h1");
for (let i = 0; i < elementleriAl.length; i++) {
console.log(elementleriAl[i]);
}
Görüldüğü üzere etiket adlarına göre seçim yapabildik. Açıkçası bunun yerine daha spesifik seçim şansınız var. Birazdan getElementsByTagName yerine daha iyi seçim elemanları göreceğiz.
Sınıf Adına Göre Öğeleri Alma
Html dosyamızda "baslik" adlı bir sınıf tanımlamıştık bu sınıfları da aynı yukarıdaki gibi eğer birden çok etiket aynı sınıftaysa döngü yardımıyla hepsini alabiliriz.
Bir Öğeyi Kimliğine Göre Alma
Burada kimlikten kasıt id değeridir. İd değerlerini sadece bir kez kullanabildiğimiz için burada döngü kullanmanıza gerek kalmadan kolayca etiketi id değerine göre alabilirsiniz.
JavaScript:
const ilkElementiAl = document.getElementById("ilk");
const ikinciElementiAl = document.getElementById("ikinci");
const ucuncuElementiAl = document.getElementById("ucuncu");
console.log(ilkElementiAl, ikinciElementiAl, ucuncuElementiAl)
Böylece id değerine göre etiketleri seçebiliriz.
querySelector Methodu
querySelector methodu aslında en çok kullanılan yöntemdir. Çünkü bu method hem class,hem etiket hem de id değerini içerir. Ayrıca iki tür querySelector vardır. İlki querySelector, eğer değerlerden birden çok sayıda varsa yalnızca ilk değeri seçer. Diğeri de querySelectorAll, bu ise 10 tane aynı etiket veya class olsun hepsini tekte seçer. Kısaca döngü oluşturmadan da birden fazla değeri querySelectorAll ile seçebiliriz.
Ek olarak querySelector kullanırken seçeceğiniz değerin id mi, class mı yoksa etiket mi olduğunu belirtmeniz lazım. İd için "#", class için "." kullanmanız yeterli olacaktır.
JavaScript:
const ilkEleman = document.querySelector("h1");
const ilkElemanAmaClass = document.querySelector(".baslik")
const idIleAl = document.querySelector("#ilk")
console.log(ilkEleman, ilkElemanAmaClass, idIleAl)
Şimdi querySelectorAll kullanılım.
JavaScript:
const hepsiniAl = document.querySelectorAll(".baslik")
console.log(hepsiniAl)
Hepsini döngü kullanmadan tekte aldık.
Nitelik İşlemleri
Nitelik işlemlerini özetlemek gerekirse class veya id tanımlanmayan bir html etiketinize id veya class değerleri atayarak birnevi nitelik atamanızı sağlar. Html dosyasının içine bir h1 değeri daha oluşturup (id ve class olmadan) bunu Javascript ile yapalım.
JavaScript:
const etiketAl = document.querySelectorAll("h1");
etiketAl[3].className = "baslik"
etiketAl[3].id = "dorduncu"
querySelectorAll ile tüm h1 etiketlerini aldıktan sonra 4.elemanı özellikle belirtip buna özel id ve class değerleri atadık.
setAttribute Kullanarak Nitelik Atama
Üsteki örneğe ek olarak setAttribute kullanarak da etikete id ve class değerlerini atayabilirsiniz. Pek farkı yok hangi yolu seçmek size kalmış
JavaScript:
const etiketAl = document.querySelectorAll("h1");
etiketAl[3].setAttribute('class', 'baslik')
etiketAl[3].setAttribute('id', 'dorduncu')
classList Kullanarak Sınıf Ekleme ve Silme
Sınıf tanımlama işlemlerinde bu yola da başvurabilirsiniz.
JavaScript:
const etiketAl = document.querySelectorAll("h1");
etiketAl[3].classList.add('baslik', 'baslik2')
Sınıfları silmek için ise add yerine remove kullanabilirsiniz.
HTML Öğelerine Metin Ekleme
Javascript yoluyla direkt olarak html içine de metin ekleyebiliriz. Mesela hesap makinesini düşünün kullanıcı eşittire bastığı an yaptığı işlemi görmek isteyecektir. Bu gibi yerlerde bu özellik kullanılır.
Javascript ile birden fazla metin ekleyebiliriz. Bunları sırasıyla görelim.
TextContent
Öncelikle html dosyasına boş bir etiket oluşturalım. Boş olsun ki biz bu boş etiketi Javascriptle dolduralım.
JavaScript:
const etiketAl = document.querySelectorAll("h1");
etiketAl[3].textContent = "Baslik4"
InnerHtml
InnerHtml ile textcontent oldukça karıştırlır. Textcontent yalnızca bir metin girmemizi sağlarken InnerHtmlde bir parente yeni bir child eklemeye yardımcı olur.
Örnek oalrak Html ile bir liste oluşturdum (Ul etiketlerinin içinde li etiketleri) Ul etiketi burada parenttir li ise childdir. Biz bir child yani li etiketi ekleyeceğiz.
JavaScript:
const ul = document.querySelector("ul")
const yazdir = ` <li>Deneme</li>`
ul.innerHTML = yazdir
Eğer değerleri silmek istiyorsak şu yolu kullanabiliriz.
JavaScript:
ul.innerHTML = ""
Stil ekleme
Javascript içinde Css özellikleri kullanabilme fırsatı bize vermiştir. Dilerseniz bunu kullanabilirsiniz ya harici Css dosyasıyla yaparsınız size kalmış bir durumdur.
JavaScript:
const etiketAl = document.querySelectorAll("h1")
etiketAl.forEach((baslik, i) => {
baslik.style.fontSize = "25px"
if (i % 2 == 0) {
baslik.style.color = "Green"
}
else {
baslik.style.color = "red"
}
})
İlk olarak querySelectorAll ile tüm h1 etiketlerini aldıktan sonra forEach ile bir döngü başlatıyoruz. ForEach içinde bir baslik ve i değerleri vardır. Bu baslik h1 etiketlerine karşılık gelirken i değeri ise aslında kaçıncı eleman olduğuna karşılık gelmektedir.
İlk başta tüm h1 etiket yazı boyutunu 25 px yaptık. Dikkat ettiyseniz Cssde normalde birden fazla kelime içeren kodları ikinci harfi büyük olma kaydıyla bitişik yazıyoruz. En büyük örneği fontSize (font-size)
Daha sonra if else kullanarak eğer i değeri ile 2 bölümü sıfırsa yani h1 elemanın indexi çiftse yeşil renk yap tekse kırmızı yap diyoruz.
baslik.style.color yerine baslik.style.backgroundColor = " renk adı " şeklinde yazıyı değil de arka planı da renklendirebilirsiniz burada tamamen özgürsünüz.
Element Oluşturma
Javascripte bir element oluşturmak oldukça basittir. Sadece createElement() ile birçok elementi saniyeler içinde oluşturabilirsiniz.
Öncelikle boş bir div oluşturalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="baslik">baslik1</div>
</body>
<script src="main.js"></script>
</html>Gelelim Javascript kodlarına
JavaScript:
const div = document.createElement("h1")
div.className = 'baslik';
div.style.fontSize = '24px'
div.textContent = 'baslik'
console.log(div)
Böylece yeni bir element kullanıp konsolda görüntüledik.
Birden fazla element oluşturmanız gerekiyorsa döngü kullanarak bu işlemi yapabilirsiniz.
JavaScript:
for (let i = 0; i < 5; i++) {
const div = document.createElement("h1")
div.className = 'baslik';
div.style.fontSize = '24px'
div.textContent = 'baslik'
console.log(div)
}
Elementleri Webte Görüntülümek
Şimdiye kadar oluşturduğumuz elementleri hep konsolda görüntüledik. Şimdi bunu dinamik olarak web'e ekleyelim. Bunun için appendChild(eklenecek degisken adı) ile yapabiliriz.
JavaScript:
for (let i = 0; i < 5; i++) {
const div = document.createElement("h1")
div.className = 'baslik';
div.style.fontSize = '24px'
div.textContent = 'baslik'
document.body.appendChild(div)
}
Ekleme işlemini böyle yapıyoruz bir de elementleri nasıl sileceğimize bakalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>Baslik1</li>
<li>Baslik2</li>
<li>Baslik3</li>
<li>Baslik4</li>
<li>Baslik5</li>
</ul>
</body>
<script src="main.js"></script>
</html>İlk olarak html dosyasında bir liste oluşturdum. 5 adet listemiz mevcut bu listeler üzerinden silelim.
JavaScript:
const ul = document.querySelector('ul')
const listeler = document.querySelectorAll('li')
for (const list of listeler) {
ul.removeChild(list)
}
Böylece htmlde yazılı olan 5 li etiketi silinecektir.
Event Listeners
Event Listeners dediğimiz şey aslında htmldeki etiketlerin çalışmasını sağlarız. Şimdiye kadar hep bu etiketleri nasıl seçeceğimizi, nasıl css ekleyeceğimizi, nasıl bu etiketleri javascriptte oluşturup html'e aktaracağımızı gördük. Temelde bunları zaten HTML ve CSS ile de yapabiliriz. Şimdi ise bunu ne Html ile ne de Css ile yapabiliriz. Örneğin bir buton olsun sayfada o butona tıklayınca alert mesajı versin. Bunu Event Listeners ile yapabiliriz.
Temelde Event Listeners iki argüman alır. Geri dönüş değişkeni ve Event Listener özelliği.
Geri dönüş işlevi olmasa da olur ama mutluka Event Listener özelliği olmaladır. Bunlar :
onclick (tıklanınca çalışır)
onchange (input alanına her bir harf yazdığınızda o anki güncel stringi alır)
dbclick (iki kez tıklayınca çalışır)
onload (sayfa yüklenince çalışır)
mouseenter (Mouse etiketin/class içine girer girmez çalışır)
mouseleave ( Mouse etiketin/class içine çıkar çıkmaz çalışır)
mousemove (Mouse etiketin/class içinde hareket eder etmez çalışr)
change (input alanı her değiştiğinde çalışır)
blur ( element odaklanılmadığı zaman çalışır)
keypress (Her tuşa basıldığı zaman çalışır)
En popüler event listeners özellikleri bunlardır. Tüm hepsini bu konuda göstermeyeceğim ama siz dilerseniz deneyebilirsiniz.
Ek olarak bu konuda Event Listeners Javascript olarak anlatılacak ama dilerseniz bunu htmlde de kullanabilirsiniz. Pek tercih edilmeyen bir yöntemdir bunu bilirseniz iyi olur.
JavaScript:
let inputAl = document.getElementById("input")
inputAl.addEventListener("change", (yaz) => {
console.log(yaz.target.value)
})
Burada addeventlistener ile change özelliğini inputa ekleyip yaz callbacki yazdık. Daha sonra konsola eğer sadece callback yazarsanız bize istediğimiz değeri dönmez. Değeri dönmek için target.value ekleyerek girilen her harfi bize yazdırmasını istedik.
Şimdi butona tıklayıp önce alert ile tüm konsol silindi desin ve tüm konsoldaki yazıları silsin.
JavaScript:
let inputAl = document.getElementById("input")
let buttonAl = document.querySelector("#button")
inputAl.addEventListener("change", (yaz) => {
console.log(yaz.target.value)
})
buttonAl.addEventListener("click", () => {
alert("Butona Tıklandı !")
console.clear()
})
Butona bastıktan sonra alert aldık ve daha sonra tüm konsolu temizledik.
Şimdi son bir uygulama daha yapalım bu sefer keypress kullanalım. Kulanıcı her tuşa bastığında bize bastığı tuşu web sitede gösteren uygulama yapalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<div class="main">
<div class="selectedKey"></div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>Html dosyamızda iki adet div var bunlardan birini tüm elementleri ortalamak için kullandım. Diğer div ise Javascripten p elementi oluşturup yazıyı o dive yazacağız. Şimdi Javascript kodlarına geçelim.
JavaScript:
let selectedKey = document.querySelector(".selectedKey")
let selectedKeyCreate = document.createElement("p")
document.addEventListener("keypress", (tus) => {
selectedKeyCreate.textContent = `Basılan tuş: ${tus.key}`;
selectedKey.appendChild(selectedKeyCreate);
})
selectedKey.style.fontSize = "30px"
İlk olarak burada Htmlde bulunan divimizi aldık. Böylece yazacağımız sonucu bu divin içine yazabileceğiz. Daha sonra p elementi oluşturduk. P elementi oluşturduktan sonra tüm sitede geçerli olacak bir event listener oluşturup bunun özelliğine keypress yani her tuşa basıldığını kayıt etmesini söyledik. Bu kayıt edilen tuşları da tus callback'ine göndermesini söyledik.
Buraya kadar okey isek sonraki adımları anlayalım.
Oluşturduğumuz p element değişkenine diyoruz ki p elementini oluşturdun ama içeriğini de "Basılan tuş :" + "Bastığımız tuş" olarak göster diyoruz. Burada tus.key dememizin sebebi direkt bastığımız tuşu almak içindir.
Daha sonra ise ilk başta seçtiğimiz divin değişkenini alıp sen ebeveynsin al şu çocuğu kendi himayende göster deyip oluşturulan ve içi doldurulan p elementini yazıyoruz.
Son olarak oluşturup ve içini doldurduğumuz p elementi gözüme küçük gözüktü biraz Css özelliği kullanıp büyütüyoruz ve istediğimiz sonucu alıyoruz.
DOM konusu Javascriptin en önemli konularından biridir. Kesinlik su gibi olmasa da iyi bir şekilde öğrenmeniz gerek. Ayrıca ben tüm DOM konusunu tek konuya sığdırdım dilerseniz bunu 3 parçaya ayırabilirsiniz. Böylece konuyu çalışmanız biraz daha kolaylaşır. Önerim en baştan - Css özelliklerine kadar 1. bölüm. Element oluşturmadan - Event Listeners 2.bölüm ve son bölüm olarak da event listeners olarak ayırabilirsiniz.
Artık Javascript konuları bu konuyla birlikte bitmiş oldu ama seriye 3-4 örnek başlangıç - orta seviye düzeyde projeler yapıp öyle bitirmek istiyorum. Artık kendiniz de proje yapabilecek seviyedesiniz. Unutucağınız pek çok şey olacak bu durumda Google kullanmayı ihmal etmeyin ve başka bir konuda görüşmek üzere.
