Herkese selamlar. Bu bölümde sizlerle beraber JavaScript ile beraber bir content üzerine veya bir yazı içeriğinde değişiklik yapmayı öğreneceğiz. Genellikle loading yani yükleme butonları hazırlanırken bu method çok sık tercih edilmektedir. Bir butona bastıktan sonra bir yeri gösterme veya gizleme gibi çeşitli alternatif eğlenceli opsiyonlar tasarlayabileceğiniz bir fonksiyondur. Örneğin diyelim ki bizim bir yazı alanımız olsun ve biz bu alanda değişiklik yapmak istiyoruz. HTML Kodlarımız şu şekilde olsun:
<h3 id="degisecekyazi">DEĞİŞECEK YAZI</h3>
<input type="button" value="TIKLA">Şimdi biz istiyoruz ki butona tıkladığımız zaman “DEĞİŞECEK YAZI” kısmı “HARİKA! BUTONA TIKLADINIZ!” olarak değişsin. Bunun için javascriptte bir fonksiyon başlatıyoruz.
function ornekfonksiyon() {
//
}Fonksiyonumuzu oluşturduk. Şimdi burada 2 yolumuz var. Ya butona bir “onclick” vereceğiz ve tıklandığı zaman fonksiyon çalışacak ya da butona bir id verip fonksiyonumuzda o id’li butona tıkladığı zaman fonksiyonu başlatacak. Daha pratik ve az kodla sonuca ulaştığımız için butonumuza “onclick” tanımlıyorum. Böylece yeni kodlarımız şu şekilde değişiyor:
<h3 id="degisecekyazi">DEĞİŞECEK YAZI</h3>
<input type="button" value="TIKLA" onclick="ornekfonksiyon()">Butonumuza fonksiyonumuzu tanımladık sıra geldi son aşama olan innerHTML yani değişim fonksiyonumuzu yazmaya. Burada önemli olan sadece kodu yazmak değil, mantığını kavramak da bir o kadar önemli.
function ornekfonksiyon() {
document.getElementById("degisecekyazi").innerHTML = 'HARİKA! BUTONA TIKLADINIZ!';
}Copy
Şimdi burada yaptığımız şeyi anlayalım. “document.getElementByID” ile değiştirmek istediğimiz alanı ID’siyle beraber çağırıyoruz. Yani bize, bu ID’ye sahip alanı getir diyoruz. yukarıda h3’ümüzün ID’si “degisecekyazi” olduğu için onu çağırdık. Ardından “.innerHTML” ekledim yani yeni bir HTML girişi yap dedik. Son kısımda ise sonuç olarak yapacağı bu giriş “HARİKA! BUTONA TIKLADINIZ!” şeklinde olacak. Şimdi birlikte canlı bir şekilde deneyelim kodlarımızı!
Harika! Kodlarımız başarıyla çalışıyor. Bu yaptığımız giriş seviyesinde bir işlemdir. Bunu pek çok alanda kullanabilirsiniz. Yükleme/loader alanlarında, hover tarzı aç kapa alanlarında yahut aklınıza gelen herhangi bir alanda kullanabilirsiniz. JavaScript ile bir alan üzerine değişiklik yapmak elbette kalıcı bir değişim değildir nitekim HTML üzerinde anlık değişim gözlemi yapmaktayız. Ancak bu değişimleri kalıcı hale getirmek istiyorsanız işin içine bir de PHP ile post işlemleri girmekte.
Ona da daha detaylı bir alan değiştirme içeriğinde değineceğiz.
Mutlu günler dileriz!
