Javascript Yüklenme Olayları (Load Events)
Hepinize merhaba dostlarım :). Bu yazımda sizlere javascript te neredeyse artık olmazsa olmaz hal almış, hazır template aldığınız durumlarda bile karşımıza çıkan load yani sayfa yüklendiğinde veya yüklenirken olacak olan olaylardan bahsedeceğim. Heyecanlandığınızın farkındayım dostlarım :). O halde sözü daha fazla uzatmadan gelin methodlara yavaş yavaş girişimizi yapalım
1-) onload() Methodu
Dostlarım gelelim onlload() methodumuz ile sayfa yüklenme olaylarına :). Onload methodu dostlarım sayfamız yüklendikten sonra olacak işlemleri yapmamıza olanak sağlar. Örneğin sayfa yüklendikten sonra ekrana "MFSoftware Blog" yazdırmak istiyorsak bu komutu kullanabiliriz :). Gelin o halde bir örnek yapalım
<!DOCTYPE html>
<html>
<head>
<script>
function sayfa_yuklenince() {
alert("MFSoftware Blog");
}
</script>
</head>
<body onload="sayfa_yuklenince()">
</body>
</html>
<!--
Ekran Çıktısı: MFSoftware Blog
-->şeklinde kodumuzu yazdık dostlarım. Sayfamızdaki elementler ekranımıza yüklenir yüklenmez bize "MFSoftware Blog" yazısını yazdıracaktır :). Ayrıca sadece bu şekilde değil de bir imaj dosyasının yüklenip yüklenmediğini analiz etmemiz gerektiği zamanlarda bile bu methodu kullanabiliriz. Nasıl diye soracak olursanız dostlarım gelin onun için de örnek yapalım
<!DOCTYPE html>
<html>
<head>
<script>
function resim_yukle() {
alert("Gif Dosyası Başarıyla Yüklendi");
}
</script>
</head>
<body>
<img src="a.gif" onload="resim_yukle()" width="100" height="132">
</body>
</html>
<!--
Ekran Çıktısı: Gif Dosyası Başarıyla Yüklendi
-->şeklindeki gibi dostlarım a.gif yüklenir yüklenmez ekranımıza "Gif Dosyası Başarıyla Yüklendi" yazacaktır :). Bu kısım da anlaşıldığına göre dostlarım gelelim diğer methodumuza :)
2-) onerror() Methodu
Dostlarım adından da anlaşılacağı üzere onerror() methodumuz onload() methodumuzun aksine sayfa yüklenmesinde hata oluştuğu zamanlarda çalışır. Örneğin bir resim dosyası veya bir gif dosyası yüklenemediği zamanlarda bu methodu kullanabiliriz. Hadi gelin bir örnek yapalım
<!DOCTYPE html>
<html>
<head>
<script>
function resim_error() {
alert("İmaj Dosyası Yükleme Hatası");
}
</script>
</head>
<body>
<img src="a.gif" onerror="resim_error()">
</body>
</html>
<!--
Ekran Çıktısı: İmaj Dosyası Yükleme Hatası
-->şeklinde kodumuzu yazdık dostlarım. Sayfamız çalışırken eğer dosya yolu hatalı veya imaj dosyasının yüklenmesinde hata oluştuğu anda bize "İmaj Dosyası Yükleme Hatası" sonucunu ekranımıza basacaktır :). İşte olaylar bu kadar basit dostlarım :).
3-) onunload() Methodu
Bir diğer methodlarımızan olan ve artık çoğu web sitesinde karşımıza çıkan bir işlem olan onunload() methodu ise dostlarım sayfa kapatıldığı zaman veya çıkış yapılacağı zaman tetiklenen olaydır. Mesela bazı internet sitelerinde çıkış yapılacağı zaman "Yine Bekleriz :)" gibi mesajları verdirmek için bu olay yöneticisi kullanılır dostlarım :). Güzel bir yol olduğunu düşünüyorsunuz :). Gelin o halde biz de ufak bir örnek yapalım
<script type="text/javascript">
function gule_gule()
{
alert("MFSoftware Blog İyi Günler Diler!");
}
window.onunload = gule_gule();
</script>şeklinde kodumuzu yazdık dostlarım. Bir anonim fonksiyon oluşturup içerisine "MFSoftware Blog İyi Günler Diler!" metnini yazdık. Daha sonra bu onunload() methodunu window.onunload olarak kullandık ve bunun hangi methodu çağıracağını belirttik yani gule_gule() methodunu çağıracak :). Sayfadan çıkış yapacağımızda ise dostlarım bu gule_gule() methodu çalışacak ve ekranımıza "MFSoftware Blog İyi Günler Diler!" mesajını bastıracaktır :). Gelelim diğer ve son methodumuza :).
4-) onresize() Methodu
Dostlarım resize kısmından bu methodun boyut işlemleri ile ilgili olduğunu anlamışsınızdır :). İşte bu methodumuz da dostlarım internet tarayıcımızın penceresini küçülttüğümüzde veya elementin boyutu küçüldüğü zaman çalışacaktır :). Gelin bir örnek yapalım dostlarım :)
<!DOCTYPE html>
<html>
<head>
<script>
function boyut_degisti() {
alert("Tarayıcı Boyutu Değişti");
}
</script>
</head>
<body onresize="boyut_degisti()">
</body>
</html>
şeklinde kodlarımızı yazdık dostlarım. Tarayıcı penceresini küçülttüğümüzde body elementi de küçüleceği için dostlarım onresize() olayı çalışacak ve ekranımıza "Tarayıcı Boyutu Değişti" yazacaktır :).
Evet dostlarım elimden geldiğince javascript yükleme (load) olaylarından bahsettim. Umarım faydalı olmuşumdur. Başlarda biraz karmaşık gelebilir dostlarım anlıyorum. Bu durumlarda yapmanız gereken tek şey dostlarım her yazımda da dile getirdiğim gibi "İstikrarlı ve Azimli Olmak, Bol Pratik Yapmak :)". Bu dediğimi hayat felsefeniz yaptığınız sürece dostlarım başarı sizin için kaçınılmaz olacaktır :).
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer