Bu dersimizde, javascript ile metin boyutunu büyütme ve küçültme işlemini inceleyeceğiz. Hazırlayacağımız bu uygulama, yazıları okumakta zorluk çekenler için büyütme butonu olan bir işlevsellik ekliyoruz. Bu uygulamayla birlikte, kullanıcıların makaleleri okuması konusunda kolaylık sağlamış olacağız.
Bu işlemi sağlamak için HTML, CSS ve JAVASCRIPT kodlamaları yapacağız. Bu işlemleri sırasıyla gerçekleştirelim.
Html Kodlaması
İlk olarak bir HTML iskeleti oluşturmak gerekmektedir. Bunun için yazı alanı bölümü ve butonlardan oluşan alanları oluşturalım.
<div id="kutu">
<button id="buyutButon">Büyük</button>
<button id="kucutButon">Küçült</button>
<div id="yaziAlani">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır <strong>metinlerdir</strong>. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</div>
</div>
Şimdide bu HTML yapısını daha güzel bir görünüme kavuşturalım. Bunun için CSS kodlarını yazalım.
Css Kodlaması
Bu bölümde de, uygulamanın daha güzel görünmesini sağlayacağız. Buradaki işlemler tasarımınıza göre değişebilir. Bunun bir örnek olduğunu unutmayın.
#kutu{width: 500px;border:1px solid #ddd; margin: 0px auto;padding: 10px}
#yaziAlani{font: 12px Tahoma; display: block; clear: both;}
#buyutButon, #kucutButon{border:1px solid #ddd; padding :5px 10px;margin-bottom:20px; float:right}
Bu şekilde uygulamayı oluşturmuş oluyoruz. Şimdi de işlevsellik katmak amacıyla javascript kodlarını yazalım.
Javascript Kodlaması
HTML yapısında oluşturduğumuz yazı alanını seçerek kodlamaya başlıyoruz. Sonrasında minimum ve maksimum font boyutunu tutacağımız değerler için bir değişken oluşturuyoruz. Sonrasında butonların hareketlerini tespit edebilmek adına bunlarıda bir değişkene atıyoruz. Tanımlamalar yapıldıktan sonra bu işlemleri sağlamak için addEventListener() kullanarak click işlemini yakalıyoruz. Bu işlemle birlikte font değerini arttırıyoruz.
// Tanımlamalar
let yaziAlani = document.querySelector("#yaziAlani");
let defaultFont = 12;
let maksimumSize = 20;
let buyutButon = document.querySelector("#buyutButon");
let kucutButon = document.querySelector("#kucutButon");
// Büyütme Tuşu
buyutButon.addEventListener("click", function () {
if( defaultFont < maksimumSize ){
defaultFont = defaultFont + 1;
yaziAlani.style.fontSize = defaultFont+"px";
}
});
// Küçültme Tuşu
kucutButon.addEventListener("click", function () {
if( defaultFont > 12 ){
defaultFont = defaultFont - 1;
yaziAlani.style.fontSize = defaultFont+"px";
}
});
Bu kodlarla birlikte, büyütme ve küçültme tuşlarını kullandığımızda, #yaziAlani içerisinde yer alan yazının font boyutunu büyütme ve küçültme işlemini sağlamış oluyoruz.
Büyütme ve küçültme işlemlerinin belirli bir sınırda olması için addEventListener() içerisinde if koşulunu kullanmayı ihmal etmemek gerekiyor. Eğer bu koşulları kullanmazsak, font okunamayacak derecede küçülür ve büyür. Bunun önüne geçmek için de bir sınır belirlemek gerekmektedir.
Böylelikle, Javascript ile Metin boyutunu büyütme ve küçültme işlemini başarılı bir şekilde sağlamış oluyoruz. Kullanmış olduğunuz yazılıma göre bu uygulamayı düzenleyerek daha kullanışlı bir hale getirebilirsiniz.