JavaScript’in Document Object Model (DOM) aracılığıyla web sayfalarındaki unsurları dinamik olarak değiştirmek, modern web geliştirmenin temel taşlarından biridir. Basit bir buton tıklamasıyla metin, stil veya hatta ışık kontrollerini yönetmek, geliştiricilerin en sık karşılaştığı senaryolardan. Bu yazıda, DOM manipülasyonunun en temel uygulamalarını dört farklı örnek üzerinden inceleyeceğiz: metin değiştirme, ışık açma-kapama, sayı sayacı ve canlı karakter sayacı.
Temel Metin Değiştirme: Buton Tıklamasıyla Başlayın
Web sayfalarında en sık kullanılan DOM manipülasyonu yöntemlerinden biri, bir butona tıklandığında sayfadaki metni değiştirmektir. Bu işlem, kullanıcı etkileşimini artırır ve sayfayı daha dinamik hale getirir.
Aşağıdaki örnekte, başlık olarak welcome JavaScript yazan bir sayfada, Değiştir butonuna tıklandığında başlığın welcome DOM olarak değiştiğini görebilirsiniz:
<body>
<h1 id="text">welcome JavaScript</h1>
<button id="but" onclick="changeText()">Değiştir</button>
<script>
const heading = document.getElementById("text");
function changeText() {
heading.innerText = "welcome DOM";
}
</script>
</body>Bu basit kod parçası, DOM’un getElementById ve innerText özelliklerini kullanarak, buton tıklamasıyla metin değiştirme işlemini gerçekleştiriyor. Geliştiriciler için bu, DOM manipülasyonuna giriş niteliğinde önemli bir adım.
Işık Açma-Kapama Uygulaması: DOM ile Görsel Etkileşim
Işık açma-kapama uygulaması, DOM manipülasyonunun görsel olarak daha etkileyici bir örneğidir. Bu uygulama, bir butona tıklandığında resimdeki ampulün durumunu değiştirerek kullanıcıya görsel geri bildirim sunar.
Aşağıdaki kodda, ON butonuna tıklandığında ampulün yanması, OFF butonuna tıklandığında ise sönmesi sağlanıyor:
<body>
<img id="bulb-img" src="pic_bulboff.gif" alt="Ampul">
<button id="bnt1" onclick="toggleBulb()">ON</button>
<script>
function toggleBulb() {
const button = document.getElementById("bnt1");
const bulb = document.getElementById("bulb-img");
if (bulb.src.includes("bulboff.gif")) {
bulb.src = "pic_bulbon.gif";
button.innerText = "OFF";
button.style.color = "red";
} else {
bulb.src = "pic_bulboff.gif";
button.innerText = "ON";
button.style.color = "green";
}
}
</script>
</body>Bu uygulama, DOM’un src özelliğini değiştirerek resimlerin dinamik olarak güncellenmesini sağlar. Ayrıca butonun metnini ve rengini de değiştirerek kullanıcıya görsel ipuçları sunuyor.
Sayı Sayacı: Artırma, Azaltma ve Sıfırlama
Sayı sayacı uygulaması, DOM manipülasyonunun matematiksel işlemlerle birleştirildiği bir örnektir. Bu uygulama, kullanıcıların + ve - butonları aracılığıyla sayıyı artırma, azaltma ve Sıfırla butonuyla sayıyı başlangıç değerine döndürme işlemlerini gerçekleştirmelerini sağlar.
Aşağıdaki kodda, sayıyı artırma, azaltma ve sıfırlama işlemleri DOM kullanılarak gerçekleştiriliyor:
<body>
<h1>Sayı = <span id="number">0</span></h1>
<button id="butt_add" onclick="increaseNumber()">+</button>
<button id="butt_sub" onclick="decreaseNumber()">-</button>
<button id="but_reset" onclick="resetNumber()">Sıfırla</button>
<script>
const numberElement = document.getElementById("number");
let currentNumber = 0;
function increaseNumber() {
currentNumber++;
numberElement.innerText = currentNumber;
}
function decreaseNumber() {
if (currentNumber > 0) {
currentNumber--;
numberElement.innerText = currentNumber;
}
}
function resetNumber() {
currentNumber = 0;
numberElement.innerText = currentNumber;
}
</script>
</body>Bu uygulama, DOM’un innerText özelliğini kullanarak sayının görüntülenmesini sağlıyor. Ayrıca matematiksel işlemlerle sayıyı dinamik olarak güncelleyerek kullanıcı etkileşimini artırıyor.
Canlı Karakter Sayacı: Kullanıcı Girdisini Anında İzleme
Canlı karakter sayacı uygulaması, kullanıcıların girdiği metnin karakter sayısını anında görüntüleyen bir özelliktir. Bu uygulama, genellikle formlarda ve metin alanlarında kullanılan dinamik geri bildirim sağlar.
Aşağıdaki kodda, kullanıcının girdiği metnin karakter sayısı anında hesaplanıyor ve ekrana yansıtılıyor:
<body>
<input id="user-input" type="text" oninput="updateCounter()">
<h1 id="result">Karakter Sayısı = <span id="number">0</span></h1>
<script>
function updateCounter() {
const counterElement = document.getElementById("number");
const userInput = document.getElementById("user-input");
counterElement.innerText = userInput.value.length;
}
</script>
</body>Bu uygulama, oninput olay dinleyicisi sayesinde kullanıcının girdiği her karakterde karakter sayısını güncelliyor. DOM’un value.length özelliği, girdi alanındaki metnin uzunluğunu hesaplamak için kullanılıyor.
DOM manipülasyonu, web geliştirmenin temel bileşenlerinden biri olup kullanıcı deneyimini zenginleştiriyor. Yukarıdaki örnekler, DOM’un temel işlevlerini anlamanızı ve basit uygulamalardan başlayarak daha karmaşık projeler geliştirmenize olanak tanıyor. Geliştiriciler, bu teknikleri kullanarak web sayfalarını daha etkileşimli ve kullanıcı dostu hale getirebilirler. Gelecekte, DOM manipülasyonunu ileri düzey özelliklerle birleştirerek, gerçek zamanlı uygulamalar ve dinamik içerikler oluşturabilirsiniz.
Yapay zeka özeti
JavaScript’in DOM manipülasyonunu kullanarak buton tıklamalarıyla metin değiştirme, ışık açma-kapama, sayı sayacı ve karakter sayacı gibi basit uygulamaları nasıl geliştirebileceğinizi keşfedin.
