İyinet'e Hoşgeldiniz!

Türkiye'nin En Eski Webmaster Forum'una Hemen Kayıt Olun!

Kayıt Ol!

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

V

vBasic

Misafir
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>
admin-albums-javascript-picture30-js-1.png

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:
admin-albums-javascript-picture31-js-2.png


Sıra geldi aynı işlemleri Jquery üzerinden yapmaya. Jquery biliyorsuz ki Javascript'in ücretsiz kütüphanelerinden birisi. Peki ekstra ne faydası olacak derseniz, yapılan işlemleri daha pratik ve az kod kullanarak oluşturabilmemiz de yardımcı olacak. Önceki dersimizde gördüğümüz gibi Jquery kodu her zaman $ (dolar) işaretiyle başlamaktaydı. Kodlamaya başlayalım

PHP:
$(document).ready (function() {

});
Hatırlayacağınız üzere Jquery kodlarında herhangi bir problemle karşılaşmamak için önce web sayfamızın tamamen yüklenmesini beklememiz gerekiyordu. Bunun için yukarıda görmüş olduğunuz gibi kodumuza döküman hazır olduğunda yani web sayfamız yüklendiğinde çalış demek istedik. Hemen arasına gelerek erişmek istediğimiz nesneyi belirtiyoruz, ben burada farklı bir örnek oluşturmak istiyorum.

Örneğin ilk adımda yaptığımız form örneğini tekrar oluşturdum, bu sefer butona tıklandığında farklı bir paragraf üzerinden kullanıcıya mesajınız iletildi tarzında bilgilendirme yapmak istiyorum önce HTML yapımızı tekrar hazırlayalım

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">
Şimdi Jquery desteği ile kod yapımızı oluşturuyoruz kafanızın karışmaması için tüm kodları ekliyorum
PHP:
$(document).ready (function() {
	$('#gonder').click(function() {
		Bilgi();
	})
		function Bilgi() {
			$('p').append ("Mesajınız iletildi");
		}
})
Artık kodumuzu yorumlayabiliriz,
- İlk olarak sayfa tamamen yüklendikten sonra işlem yapması için $(document).ready fonksiyonumuzu oluşturduk.
- Daha sonra formumuzda bulunan gonder nesnesine yani butona tıklandığında Bilgi() fonksiyonunu çağırmasını istedik.
- Son adımda ise Bilgi fonksiyonumuza boş bulunan <p> tagı içerisine mesajınız iletildi yazmasını istedik.
Jquery sayesinde oldukça pratik ve hızlı bir şekilde kodumuzu oluşuturmuş olduk. Bu kodu Javascript ile yazmak isteseydik çok daha uzun kod yapısı oluşturmamız gerekecekti. Bu yapı sayesinde form doldurulduktan ve mesajımız gönder butonuna basıldıktan sonra kullanıcıyı bilgilendirmesi adına işlem yaptırmış olduk. Mesaj vermek istediğimiz alanın içerisinde dilersek HTML kodlarıda kullanabilmekteyiz. Örneğin ben o mesajın belirginleşmesi adına yeşil yazı rengine çevirmek istiyorum ve şu şekilde bir yapı oluşturuyorum
PHP:
$('p').append ("<font color='green'>Mesajınız iletildi</font>");
Genel kod yapımızı ise aşağıdaki gibi oldu:
PHP:
<html>
<head>
<title>Javascript Ders 3 - WMArşiv</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
$(document).ready (function() {
	$('#gonder').click(function() {
		Bilgi();
	})
		function Bilgi() {
			$('p').append ("<font color='green'>Mesajınız iletildi</font>");
		}
})
</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" value="Mesajımı Gönder">
<p></p>
</body>
</html>
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Üst