16 Eylül 2016 Cuma

Olmazsa Olmaz, JQUERY

Merhaba arkadaşlar yeni bir yazı dizisi ile karşınızdayım. Bu seride elimden geldiği kadar JQUERY' i anlatmaya çalışacağım.

jQuery, bir javascript kütüphanesidir. 

Javascript' i bilmeyen arkadaşlar için açıklayacak olursak; Javascript internet sayfalarını interaktif bir hale getirebilmek amacıyla geliştirilmiş betik(script) dilidir. Adında "Java" geçmesi dışında Java ile hiçbir benzerliği bulunmamaktadır.


2006 yılına kadar kullanılan Javascript kütüphaneleri çok karmaşık bir yapıdaydı, bunun üzerine John Reisig tarafından JQuery kütüphanesi geliştirildi ve kısa zamanda tüm dünyada popüler oldu. jQuery' nin çıkış sloganı ise "az kod çok iş"'tir. Çeşitli CSS kütüphaneleri ile birleştirildiğinde harkulade tasarımlar ortaya konulabilir. JQuery beraberin de Ajax ile gelir. Ajax ise; web sayfalarının yenilenmesine gerek kalmadan sunucu ile kullanıcı arasındaki veri akışını sağlayan yapıdır.

  • www.jQuery.com adresi üzerinden JQuery kodlama için gerekli olan dosyaları indirebiliriz. 
  • Eğer Visual Studio kullanıyorsanız; yeni bir web projesi açmanız ve "Nuget" üzerinden indirmeniz yeterlidir.
  • IDE kullanmıyorsanız ya da indirmek istemiyorsanız bastiçe 

<head> tagları arasına 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> 
yapıştırıp JQUERY kodlamaya başlayabilirsiniz.

JQuery DOM veya içerisindeki bir elementi seçip onu manüple etmeye dayanır. Birden fazla element seçilebilir. Kodlar zincirleme şekilde yazılabilir. 
Bir çok element seçme yöntemi vardır. Bu seçme yöntemlerine "JQuery Selectors" adı verilmektedir, farklı bir yazıda bu seçicileri detaylı bir şekilde inceleyeceğiz.

DOM (Document Object Model) : HTML sayfasının kendisi.
DOM Object : HTML sayfası içerisinde bulunan elementlerin genel adı.

Şimdi ise JQuery kodlama yapacağımız sayfayı hazır hale getirelim.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
Jquery(document).ready(function () 
  //Jquery kodları
  
});
</script>
</head>
<title></title>
<body></body>
</html>

Sayfamızı da hazır hale getirdiğimize göre artık JQuery ile haşırneşir olmaya başlayabiliriz. 

JQuery sayfa yüklendiğinde ve kullanıma hazır olduğunda ready() metodunu fırlatır. Scriptlerimizi genelde ready() metodu içerisine yazarız, bu metod içerisine yazılan scriptler sayfa yüklendiğinde elementlere atanır, harekete geçer veya kullanıma hazır hale gelir.

Yukarıdaki script parçacığını inceleyecek olursak; "Jquery veya $" HTML sayfasına artık bizim JQuery kodu yazdığımızı ifade eder.

(document) ise html sayfasının kendisini seçtiğimizi belirtir. 

ready() ise sayfa yüklendiğinde ve kullanıma hazır olduğunda çalışan metoddur.


  • Kullanımı kolay olduğu için "Jquery" yerine "$" işaretini kullanmanızı ve yazdığımız kodları test edebilmek için gerekli yerlerde
  • alert() metodunu kullanmanızı tavsiye ederim.
Ready() metodunun çalışma şeklini inceleyebilmek için aşağıdaki örneğe bakabilirsiniz.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
$(document).ready(function () 
  alert("Hello Jquery");
  
});
</script>
</head>
<title></title>
<body></body>
</html>

Örnekte ile karşımıza sayfa yüklendikten sonra bir mesaj kutusu çıkacak ve "Merhaba Jquery" mesajını verecektir.
Örneklerimiz arttıkça ve kapsamları arttıkça ready() metodunun varlığı daha kolay anlaşılacaktır.

Böylece JQuery' ye giriş yapmış olmaktayız. Bir sonraki yazıda görüşmek üzere. Takipte kalın.

Hiç yorum yok:

Yorum Gönder