..

JavaScript İle Bir Alanı Değiştirmek

Cover Image for JavaScript İle Bir Alanı Değiştirmek
xtechnology_logo
X Technology

İçerik Kategorisi:JavascriptProgramlamaWeb Tasarım

Herkese selamlar. Bu bölümde sizlerle beraber 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">
HTML

​​​​Ş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() {
	//
}
JavaScript

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()">
JavaScript

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!';
}
JavaScript

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ı!

JavaScript İle Bir Alanı Değiştirmek

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!

JavaScript

İçerik Etiketleri:JavascriptJavascript DersleriJavaScript İle Bir Alanı Değiştirmek


İlginizi çekebilir.

Cover Image for ABD’nin yapay zeka raporu sızdı: “Tüm insanlığı yok edebilir”

ABD’nin yapay zeka raporu sızdı: “Tüm insanlığı yok edebilir”

ABD yönetiminin sızdırılan raporunda, yapay zekanın insanlığı yok etme potansiyeline sahip olduğu belirtildi.  ABD’nin tanınmış politika dergilerinden TIME’ın incelediği “Gelişmiş Yapay Zekanın Güvenliğini Artırmak İçin Eylem Planı” adlı raporda, yapay zekanın yol açabileceği sorunlar ve bunlara karşı atılabilecek adımlar incelendi. Raporda, “Gelişmiş yapay zeka ve yapay genel zekanın yükselişi, nükleer silahların kullanılmaya başlandığı dönemdeki gibi […]

xtechnology_logo
X Technology
Cover Image for E-Ticaret Siteleri İçin Kontrol Listesi

E-Ticaret Siteleri İçin Kontrol Listesi

Bir e-ticaret sitesi kurduğunuz zaman kontrol edilmesi gereken çok fazla öge olduğunu görürsünüz, kanallar arası gerekli kontroller ve müşteriye iyi bir alışveriş deneyimi sunabilmek için gerekli testler yapılmalıdır. E-Ticaret siteleri için kontroller konusunda doğru adımların atılabilmesi için son derece kapsayıcı bir kontrol listesine ihtiyaç duyulmaktadır. Aşağıda yer alan listeyi baştan sona gözden geçirerek e-ticaret sitenizi […]

xtechnology_logo
X Technology
kitap
resim
Ahmet İnanç KOCA - Founder and CEO of  XTechnology
Ahmet İnanç KOCA
XTechnology Yöneticisi, Yazılım GeliştiriciGeleceği kodlamaktan zevk alan bir yazılımcı

Hatalarımızdan kazanın

Mükemmel bir iş yoktur, sadece çok sayıda denenmiş girişim vardır.

XTechnology`i`nin kurucusu Ahmet İnanç KOCA`ı`dan Yanlız Başına Mücadele Edenler Rehberi”—adlı itaatkar olmak yerine büyük hayaller kurmayı tercih eden idealpereset ama tek başına savaşan girişimciler için bir manifesto olan bu kitabımızdan çok şey öğreneceksiniz.
Daha fazlası burada...

resim