Nesne yönelimli programlamaya dair

Jquery yazım kuralları (Syntax yapısı)

Bu yazımızda jquery yazım kuralları ve şekilerinden yani programlama dili ile konuşacak olursak syntax yapısından bahsedeceğiz.Aslında jquery bir framework olduğu için syntax yapısı tabirini kullanmamız biraz yanlış oluyor.Aslında js için geçerli tüm yazım kuralları jquery içinde geçerlidir.Yalnız kendi içerisinde barındırdığı -nesne tabanlı programlama yönteminden ileri gelen- metod ve özelliklerin kullanım şekilleri vardı.İşte bu yazımızda aslında buna değineceğiz.Bundan önce ise  “DOM(Document Object Model) nedir ?” kısaca değinmemiz gerekiyor ki ileride anlatacağımız konular kafanıza net bir şekilde otursun.

DOM(Document Object Model)

Türkçesi kelimesi kelimesine şöyle: “ Döküman Nesne Modeli “.Peki bu ne demek? Açıklayalım:

Web için HTML komutlarını kullanarak hazırladığımız  sayfaların hepsi birer dökümandır.Bu döküman içerisindeki bütün elemanlarda birer nesnedir.Peki bu elemanlar nedir.Hepimizin çok iyi bildiği <body>,<head>,<div>,<p>,<ul> gibi etiketler birer nesnedir.Çoğumuzun bildiği gibi bu nesneler arasında hiyerarşik bir yapı vardır.Mesela <li> etiketi <ul> etiketinden önce yazılır ve <ul> etiketi <li> etiketini kapsar yani css dili ile anlatmak istersek <ul> etiketi <li> etiketinin ebeveynidir, <ul> babadır <li> ise evlattı :) . Şekil üzerinde basitçe şöyle gösterebiliriz;

Yandaki şekilden yola çıkarak <li> etiketine ulaşmak için şöyle bir yol takip etmemiz gerekir.

<ul>—–><li>

Yani çocukla görüşmek için babasından izin almamız gerekiyor :) .

İşte jquery ile bu Dom nesnelerine erişebilir onların özelliklerini değiştirebiliriz.

Peki bu özellikler nelerdir ? Mesela <a> etiketinin  “href” ,”target” , “title” gibi özellikleri vardır.İşte bu özellikleri jquery ile değiştirebiliriz.Tabi biraz önce de belirttiğimiz gibi ilk önce özelliğini değiştireceğimiz etikete ulaşmamız gerekir.

Bunun içindir ki  DOM(Document Object Model)  mevzunu iyi anlamak ve bu hiyerarşiye dikkat etmek gerekir.

Sayfa İçerindeki nesnelere ulaşma yöntemleri:

Jquery yazım şekillerini aşağıdaki kod bloğu üzerinden anlatalım.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nesneler içeren sayfa</title>
<script type="text/javascript" src="js/Jquery_Dersleri/js/jquery-1.7.2.min.js"></script>
</head>

<body>
<div id="cerceve" class="icerik">
  <ul>
    <li></li>
  </ul>
</div>
</body>
</html>

Yukarıdaki dökümanda <div> etiketine

$(“div”);

Şeklinde erişiriz.Buradaki $ işaretini muhakkak yazmamız gerekiyor.Burada parantez içinde tırnak içerisine yazdığımız şeye Seçici(Selector) diyoruz.Adındanda anlaşılacağı üzere o kısma yazdığımız etiketi seçiyoruz.Yani demek istiyoruz ki <div> etiketini seçtim şimdi onun üzerinde bazı işlemler yapacağım.

Şimdi sıra geldi <div> etiketi üzerinde bir iş veya eylem yapmaya.Bu iş veya eylemi metodlarla yapıyoruz.Jquery kütüphanesinde iş yapmak için tanımlanmış bir çok metod var .Biz yapacağımız atraksiyonları bu metodlar vasıtası ile gerçekleştiriyoruz.Şimdi <div> etiketinin bir özelliğini değiştirelim.Mesela div etiketinin style özelliği vasıtasıyla font rengine müdahele edelim.<div></div> arasına yazılan tüm textlerin rengini kırmız yapalım.Bunu css ile nasıl yapıyorduk hatırlayalım:

color:#ff0000

Bunu jquery de css metodu kullanarak yaparız.

Yazım şekli;

$(“div”).css(“color”,”#ff0000″) olur.

Burada css bir metoddur ( ) içine yazdığımız değerler ise parametredir.

Şimdi bunları kod bloğunda yazalım.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nesneler içeren sayfa</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $("div").css("color","#ff0000");
 })

</script>
</head>

<body>
<div id="cerceve" class="icerik">
  <ul>
    <li>Deneme 1</li>
	<li>Deneme 2</li>
	<li>Deneme 3</li>
  </ul>
</div>
</body>
</html>

Jquery kodlarımız “<script>…..</script>” arasına yazmamız gerektiğini söylemeye gerek yok herhalde.
Yalnız burada en başta yine bir seçici ve metod kombinasyonu kullandık.
Bu;

$(document).ready()

Biraz ingilizce bilen bunun ne anlama geldiğini bilir.$(document) ile tüm dökümanı seçtik.Burada selectörümüz “document” tir.DOM mevzuunu yukarıda anlatmıştık “document” bizim sayfamıza işaret ediyordu. Selectorden sonra kullandığımız “ready” metodu ise , tüm sayfayı okumamıza yarıyor.Yani $(document).ready() kodu ile diyoruz ki sayfa açılırken tüm sayfayı oku ve () içerisinde yazdığımız kodları çalıştır.O kodlarda

function(){
   $("div").css("color","#ff0000");
 }

dır.Bu kodların ne yaptığını yukarıda anlatmıştık.Ha bir de hatırlatma iş bütün kodlarımızı function olarak tanımlamamız gerekiyor.Yani kodlarımızı

function(){
  Buraya yazacağız
}

Selametle kalın....

Yorum yapmak için: "Jquery yazım kuralları (Syntax yapısı)"