Javascript Nesnelere Göre İşlem Yapmak - Ders 3

Root

Yeni Üye
Katılım
11 Mar 2018
Mesajlar
28
Beğeniler
0
Herkese merhabalar, bu dersimizde formumuzda bulunan nesnelere göre işlem yapmayı göreceğiz. Hem Javascript ile hemde Javascript'in ücretsiz bir kütüphanesi olan Jquery ile işlemlerimizi gerçekleştireceğiz. Bir önceki dersimizde Jquery'yi indirmeyi ve çalışma sayfamıza dahil etmeyi görmüştük. Dilerseniz dersimize başlayalım.

Nesnelere Göre İşlem Yapmak
Javascript ile sitemize dinamik içerikler katabildiğimiz için nesnelere göre işlem yapabilmemiz de mümkündür. Seçilen bir nesneye tıklandığında, üzerine gelindiğinde, seçildiğinde vs. farklı alanlarda bir çok işlem gerçekleştirebiliriz. Bu işlemi gerçekleştirebilmek için önce temel HTML sayfamızı oluşturalım.
PHP:
<html> 
<head> 
<title>Javascript Ders 3 - WMArşiv</title> 
<script type="text/javascript" src="scripts/jquery.js"></script> 
</head> 

<body> 

</body> 
</html>
Jquery kütüphanemizi çalışma alanımıza dahil ettik, şunda boş bir alanımız oluştu. Bu dersimizde örnekler ile ilerleyeceğiz, sizde kendi örneklerinizi oluşturarak derse devam edebilirsiniz. Ben öncelikle bir iletişim formu oluşturmak ve buton olayına bilgi eklemek istiyorum. Formumun body alanına şu şekilde basit bir yapı oluşturuyorum:
PHP:
Adınız:<br><input type="text" id="ad"><br> 
Soyadınız:<br><input type="text" id="soyad"><br> 
Mesajınız:<br><textarea rows="10" cols="30"></textarea><br> 
<br><input type="button" id="gonder" value="Mesajımı Gönder"><br>
Yukarıda görmüş olduğunuz şekilde bir form oluşturmuş olduk. Şimdi mesajı gönder butonuna tıklandığı zaman mesajınız başarıyla iletilmiştir tarzında bir bilgilendirme yapmak istiyorum bunun için sayfa başlığını kullanmayı tercih ettim. Sayfa başlığı HTML kodumuzda bulunan <title></title> tagları arasıdır. Yani butona tıkladığımız zaman bilgilendirme mesajımız tarayıcı başlık penceresinde görünecektir.

Kodu oluşturmadan önce değinmek istediğim bir nokta var, Javascript'te elemanlarınızı kullanabilmeniz için function oluşturmak gerekir. Oluşturulan bu fonksiyonları dilediğiniz nesneye atayabilirsiniz. Ben az önce bahsettiğim örneğin fonksiyonunu ve çalışması gereken kodu oluşturuyorum.
PHP:
function Bilgi() { 
document.title = "WMArşiv Javascript Dersleri"; 
}
Javascript kodumu oluşturdum, şimdi kodumuzu adım adım inceleyelim. Bilgi adında bir fonksiyon yarattık, süslü parantezlerimizi açarak fonksiyonumuzun içerisine girdik. Bu fonksiyonun yapması gereken görev süslü parantezler içerisinde belirtilmektedir. Ben burada sayfanın başlığını WMArşiv Javascript Dersleri olarak değiştirmeksini istedim. Bu fonksiyonumuz butona tıklandığında çalışması gerekecek bu nedenle az önce oluşturduğum form kodum da bulunan buton nesnesinde ufak bir düzenleme yapmam gerekiyor.
PHP:
<input type="button" id="gonder" onclick="Bilgi()" value="Mesajımı Gönder">
Kodu incelediğinizde onclick nesnesi içerisine oluşturduğum fonksiyonu eklediğimi göreceksiniz. Yani burada butona tıklandığında fonksiyonumu çalıştır demek istedim. Oluşturduğumuz sayfayı çalıştırdığınızda hiç bir sorunla karşılaşmamanız gerekiyor. Sonuç olarak oluşturduğumuz sayfa şu şekilde olmuş oldu:
PHP:
<html> 
<head> 
<title>Javascript Ders 3 - WMArşiv</title> 
<script type="text/javascript" src="scripts/jquery.js"></script> 
<script> 
function Bilgi() { 
document.title = "WMArşiv Javascript Dersleri"; 
} 
</script> 
</head> 

<body> 
Adınız:<br><input type="text" id="ad"><br> 
Soyadınız:<br><input type="text" id="soyad"><br> 
Mesajınız:<br><textarea rows="10" cols="30"></textarea><br> 
<br><input type="button" id="gonder" onclick="Bilgi()" value="Mesajımı Gönder"> 
</body> 
</html>
Eğer bu konu anlaşıldıysa devam edelim, eğer takıldıysanız tekrar göz atarak anlamaya çalışın. Tüm çabalarınıza rağmen olmuyorsa yorum olarak bize nerede takıldığınızı mutlaka bildirin.

Farklı bir örnekle devam edelim, bu sefer butona tıklanınca değilde belirlenen bir yazının üzerine gelindiği zaman işlem yapılsın. Bunun için örnek açısından beş farklı paragraf alanı oluşturuyorum
[]<p>Test mesaj 1</p>
<p>Test mesaj 2</p>
<p>Test mesaj 3</p>
<p>Test mesaj 4</p>
<p>Test mesaj 5</p>[/PHP]
Bu bu yazılardan örneğin üçüncü paragrafın üzerine gelindiği zaman mesaj verilmesini istiyorum. Mesaj işlemi için Javascriptin dahili fonksiyonlarından birisi olan alert yani ekrana mesaj yazdırmayı kullanacağım. Örneğimize göre dördüncü paragrafın üzerine gelindiği zaman bu konu önemli gibi kullanıcıyı uyarak bir mesaj verelim.
PHP:
function MesajVer() { 
alert ("Bu konu önemli"); 
}
Fonksiyonumu oluşturdum sıra geldi bu fonksiyonu HTML sayfamda bulunan paragrafa atamaya. Bunun için dördüncü paragrafım da ufak bir düzenleme yapıyorum.
PHP:
<p onmouseover="MesajVer()">Test mesaj 4</p>
Gördüğünüz gibi HTML'de elamanın üzerine gelindiği zaman işlem yapmak için onmouseover kullanılır. Bu elemanı ekleyerek içerisinde oluşturduğum MesajVer fonksiyonun atadım ve çalıştırdım. Yani belirlediğimiz paragrafın mouse ile (fare) üzerine gelindiği zaman bizi aşağıdaki ekran mesajı karşılayacaktır:
 

Şu anda bu konu'yu okuyan kullanıcılar

Benzer konular

Üst