Professional Documents
Culture Documents
jQuery
Bilgisayar Mühendisi
Musa ÇAVUŞ
KENDĐNĐZE GÜVENEREK
jQuery
4
Musa ÇAVUŞ
Almanya, 2010
Kendinize Güvenerek jQuery
Musa ÇAVUŞ
Bedava Dağıtım:
Kasım - 2010
© Musa Çavuş
6
Musa ÇAVUŞ
Sayfa Tasarımı:
Musa Çavuş
Önsöz
İlk kitabım olan “Kendinize Güvenerek Java” kitabından sonra “Farklı Ol Mal
Olma” adlı kişisel gelişim kitabımı yazdım ve dedim ki ülkemdeki insanlara
faydalı olabilmen için bir teknik kitabı daha yazmalısın ve bu seferki kitap hem
büyük bir açığı kapatmalı hemde çok yarar sağlamalı.
Her kesimdeki insanın bu kitaptan faydalanması için yine Türkiye’de bir ilke
imza atarak Türkiye’deki ilk jQuery kitabını bedava dağıtmak istiyorum. Bunun
için kendi emeğimle İnternet ortamında kitabımı yaygınlaştırmaya karar
verdim. Sizlerden isteğim eğer kitabımı okuduysanız ve beğendiyseniz bir
dostunuza iletmeniz olacaktır. Ya da http://www.musa-cavus.com adresinden
kitabımı indirme tavsiyesinde bulunmanızdır. Kitabı bedava dağıtmam, kitabın
basit konulara değinmesi anlamını taşımamaktadır. jQuery dilini iyi
öğrenmeninde temelinde JavaScript dilini iyi bilmeniz yatar. Bunun için kitapta
öncelikle JavaScript konusuna ağırlık verdim. Daha sonra AJAX konusuna
değindim ve son olarak jQuery konusuna geçiş yaptım. JavaScript’in bu kitapta
ne işi var canım demeyin, çünkü JavaScript jQuery ile et ve tırnak gibi ayrılmaz
iki parçadır.
Eğer ilk kitabım olan “Kendinize Güvenerek Java” kitabımı okudysanız benim
anlatım tarzımı az çok biliyorsunuzdur. Genelde kitabımda gereksiz anlatımlara
değinmiyorum, çünkü gereksiz bilgilerle beyin hücrelerinizi boşu boşuna
meşgul etmek boşa vakit kaybıdır. Daha çok örnekler eşliğinde konuları
anlatıyorum ve bir konuda daha önce anlatmadığım konulara değinmiyorum. O
yüzden size tavsiyem, kitabı baştan sona doğru okumanız ve uygulamanız
olacaktır. Bazen kitaptaki örnekler uzun gelebilir, fakat sizde göreceksiniz ki
örneklerin uzun olmasına rağmen bir zorluk çekmeyeceksiniz, çünkü örnekleri
hem basit tuttum hemde daha önce anlattığım bölümleri koydum.
Bölüm 1
JavaScript’e giriş
11
Musa ÇAVUŞ
Fazla lafı uzatmadan ve gereksiz yazılarla sizi meşgul etmeden hemen ilk
örneğimiz olan JavaScript kullanmadan basit bir HTML örneğine geçiyorum.:
<html>
<body>
Bu sayfada JavaScript kullanilmiyor.
</body>
</html>
jsyok.html
Yukarıdaki kodu jsyok.html dosyasına kayıt edin ve fare ile çift tıkladığınızda
standart tarayıcınız açılacaktır ve şu yazıyı göreceksiniz.
<html>
<body>
<script>
alert("Merhaba Dünya");
</script>
</body>
</html>
alert.html
12
Musa ÇAVUŞ
Şekil1
Şekil2
Şekil3
Şekil3’te çıkan görüntünün üzerine sağ fare ile tıkladığınızda ve çıkan popup
mönüsünden “Sayfa kaynağını göster” seçeneğini seçtiğinizde karşınıza
Şekil3’teki sayfanın HTML, CSS ve JavaScript kodu gelecektir.
15
Musa ÇAVUŞ
Şekil4
<html>
<body>
<script>
alert("Merhaba Dünya");
</script>
<noscript>
Tarayiciniz JavaScript desteklemiyor.
</noscript>
</body>
</html>
jsdestekyok.html
<html>
<body>
<script language="JavaScript">
</script>
</body>
</html>
language.html
<html>
<body>
<script type="text/javascript">
</script>
</body>
</html>
mimetype.html
type parametresi, ana kategori ve alt kategori olarak iki bölümden oluşmaktadır.
Yukarıdaki kodda ana kategori text terimi olmakla beraber, alt kategori
javascript terimidir.
<html>
<script language="JavaScript" src="benimFonksiyonlarim.js"></script>
<body>
<script language="JavaScript">
hosgeldin();
</script>
</body>
</html>
kutuphaneKullanimi.html
function hosgeldin(){
document.write("Hosgeldin");
}
benimFonksiyonlarim.js
18
Musa ÇAVUŞ
Şekil5
<script language="JavaScript1.5">
location.href="index15.html";
</script>
<script language="JavaScript1.4">
location.href="index14.html";
</script>
<script language="JavaScript1.3">
location.href="index13.html";
</script>
<script language="JavaScript1.2">
location.href="index12.html";
</script>
<script language="JavaScript1.1">
location.href="index11.html";
</script>
<script language="JavaScript">
location.href="index10.html";
</script>
versiyon.html
gerek yoktur sadece ihtiyacınız olan konuları bilseniz yeterlidir. Sakin her
konuyu mutlaka bilmeliyim diye düşünmeyin, çünkü her şeyi bilemezsiniz fakat
nasıl yapıldığını bilebilirsiniz.
<html>
<head>
<meta http-equiv="refresh" content="5;URL=jsyok.html">
</head>
<script language="JavaScript">
location.href="jsdestekyok.html";
</script>
<body>
<a href="jsyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi tiklayin ve
JavaScript olmayan sayfaya yonlendirilin</a><br />
<a href="jsdestekyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi
tiklayin ve JavaScript olan sayfaya yonlendirilin</a>
</body>
</html>
Đlet.html
1.5 Güvenlik
Gerçekte JavaScript güvenlik sistemini delebilir. Bunlara bir kaç örnek verecek
olursam, Đnternet adresini gösteren linkleri gizlemek, girdiğiniz sayfada birden
bir sürü popup penceresinin açılması, istenilmeden web sayfasının kapanması,
ardı ardına açılan pencerelerle sisteminizin kilitlenmesi. Son yazdığıma aşağıda
bir örnek var, yalnız sisteminizi seviyorsanız ve tüm bilgilerinizi
yedeklediyseniz bu örneği deneyebilirsiniz, çünkü çok basit ve tehlikeli bir
yöntem.
<html>
<body>
<!--
Sisteminizi seviyorsaniz bu ornegi calistirmayin
-->
<script>
while(true) open("","");
</script>
</body>
</html>
guvenlikacigi.txt
Bölüm 2
XHTML, HTML, XML ve CSS temel bilgileri
23
Musa ÇAVUŞ
2.1 HTML
Modern web sayfaları HTML teknolojisini sadece yapısal anlamda
kullanmaktadırlar. Yani gereken komutlar kullanılıyor ve görsel kısım CSS
teknolojisiyle düzenleniyor. JavaScript komutlarıylada programlama kısmı
gerçekleştiriliyor. Bu yüzden HTML ile kullanacağımız az sayıda önemli
komutlar kalmaktadır. Bunlarda yapısal komutlardır. Tabi aranızda HTML
dilini su gibi içmek isteyen varsa, piyasada bu konuda oldukça çok kitap var.
Ben diyorum ki gerek yok, alem uzaya çıkıyor siz hala tekeri yeniden mi
keşfetme peşindesiniz?
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
</body>
</html>
yapi.html
24
Musa ÇAVUŞ
Şekil6
HTML sayfasındaki tüm içerik <html> tagın içine konmaktadır. <html> tagı
HTML sayfasının kök tagıdır. Ondan sonra <head> tagı gelmektedır. <head>
tagında HTML sayfasının baş kısmı yer alır. Gördüğünüz gibi <title> tagı da bu
kısımda yer almaktadır. <title> tagı ile tarayıcınızın başlığını
belirtebiliyorsunuz. Sekme özelliği gösteren tarayıcılarda da sekmedeki metni
de buradan değiştirebiliyorsunuz. <body> kısmında HTML sayfasındaki görsel
kısım yer almaktadır. <html>, <head>, <title>, <body> tagları HTML
sayfasının temel yapısıdır. Bunların yanı sıra doküman tipini belirten bir üst
yazı vardır. Onu burada vermek istemiyorum, çünkü başlangıç seviyedeki
kişiler için kafa karıştırıcı bir bilgidir. Tarayıcılar, doküman tipini belirten
yazıyı yazmasanız, tolerans uygulayarak, bunu bir hata olarak
görmeyeceklerdir. Zaten bu yüzden bunu bilmesek olur. Önemli gördüğüm
tagları, örnekler eşliğinde kısaca ve derine inmeden anlatacağım ki fazla
kafanızı karıştırmak istemiyorum.
Başlıklar
25
Musa ÇAVUŞ
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<h1>Baslik</h1>
<h2>Baslik</h2>
<h3>Baslik</h3>
<h4>Baslik</h4>
<h5>Baslik</h5>
<h6>Baslik</h6>
</body>
</html>
baslik.html
26
Musa ÇAVUŞ
Şekil7
Paragraf
Bir Paragraf başı yapmak istiyorsanız <p> tagını kullanabilirsiniz. <p> tagının
bittiğini göstermek için </p> tagını isteğe bağlı kullanabilirsiniz, mecburiyet
yoktur.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<h3>Baslik</h3>
27
Musa ÇAVUŞ
Şekil8
Satır başı
Metinlerinizi bitirdikten sonra yeni bir satıra geçmek istiyorsanız <br> tagını
kullanabilirsiniz. Paragraftan farklı olarak <br> tagını istediğiniz yere
koyabilme özelliği taşımasıdır. <br> tagı metininizi, satır atlamadan ikinci satıra
geçirmektedir. Diyelim ki Windows’daki Notepad programını kullanıyorsunuz.
Bir alt satıra geçebilmek için ne yapıyorsunuz? Enter tuşuna basıyorsunuz.
HTML’yi geliştiren gençlerde bu işleme <br> demişler.
<html>
<head>
28
Musa ÇAVUŞ
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
Satir Basi<br>
<br>Bugun hava cok guzel<br>
Nasilsin?
</body>
</html>
satirbasi.html
Şekil9
Listeler
Metinlerinizi gruplayarak göstermenin yolu listeleri kullanmaktan geçer. <li>
tagı ile bir listedeki girdiyi tanımlarsınız ve </li> bu girdiyi bitirmiş olursunuz.
<li> tagından önce kullanacağınız tag listenin şeklini gösterir. <ul> tagı listenizi
siyah noktalı bir liste yapar. <ol> tagı ise listenizi sayısal bir liste yapar. Liste
içerisinde listede kullanabilirsiniz. Bunun için <li> tagından sonra <ol> ya da
29
Musa ÇAVUŞ
<ul> kullanabilirsiniz. Liste şekli olarak sadece <ul> ve <ol> yoktur, fakat
bizim için bu tagları bilmek yeterlidir.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<ul>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ul>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
<ul>
<li>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
</li>
<li>
<ol>
<li>Konya</li>
<li>Balikesir</li>
<li>Istanbul</li>
</ol>
</li>
</ul>
</body>
30
Musa ÇAVUŞ
</html>
listeler.html
Şekil9
Tablolar
HTML’de tablolar başlı başına bir konudur, fakat burada da bu konuya
ihtiyacımız olduğu ve kafa karıştırmayacak kadar değineceğim.
Bir tabloyu <table> tagı ile tanımlayabilirsiniz. Tablodaki her satır için <tr>
tagını ve her sütün içinde <td> tagını kullanıyoruz.
<html>
31
Musa ÇAVUŞ
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<table border="1">
<tr>
<td>1. Satir, 1. Sutun</td>
<td>1. Satir, 2. Sutun</td>
<td>1. Satir, 3. Sutun</td>
</tr>
<tr>
<td>2. Satir, 1. Sutun</td>
<td>2. Satir, 2. Sutun</td>
<td>2. Satir, 3. Sutun</td>
</tr>
</table>
</body>
</html>
tablo.html
Şekil10
32
Musa ÇAVUŞ
Đlk <tr> taglı bölüme bakarsanız, üç tane <td> tagı kullandım. Tablonun ilk
satırında üç tane sütun oluşturmuş oldum. Đkinci satır içinde üç sütun
oluşturmak istediğim için, aynı şekilde üç tane <td> tagı kullandım. Sütunları
</td> ile satırları ise </tr> ile kapatmalıyız. Son olarak tablonun bittiğini
gösteren </table> tagını kullandım. Örnekteki border parametresi tablonun
çerçeve kalınlığını göstermektedir. Ben 1 değerini verdim ki satır ve sütunları
görsel olarak ayırt edebilelim.
div ve span
HTML’de bilmemiz gereken en önemli taglardır, çünkü CSS teknolojisi ile çok
kullanıyoruz. <div> tagı ile HTML dokümanını bölümlere ayırabiliyoruz.
<span> tagıylada metin bölümlerini ayırabiliyoruz Daha sonraki bölümlerde,
özellikle CSS konusunda <div> ve <span> taglarıyla daha detaylı bir anlatım
yapacağım.
<html>
<head>
<title>
Basit bir HTML Sayfasi
</title>
</head>
<body>
<div style="background:red;height:100px;width:200px;"></div>
Selam <span style="color:green">Ne Haber</span>
</body>
</html>
divspan.html
33
Musa ÇAVUŞ
Şekil11
<div> tagı kullanarak kırmızı bölümü bir blok olarak HTML sayfasında
ayırdım. <div> tagında style parametresini kullanarak bu bloğu boyadım,
yüksekliğini ve genişliğini verdim. Bunu CSS bölümüne değindiğimde daha iyi
anlayacaksınız.
<span> tagında da style parametresini kullanarak içerisinde bulunan kelimenin
yeşil renk olmasını sağladım.
2.2. XHTML
<html>
<head>
<title>Basit bir HTML sayfasi</title>
</head>
<body>
<h1 align=center>Web Sayfasina Hosgeldiniz</h1>
</body>
</html>
htmlsayfa.html
Şekil12
35
Musa ÇAVUŞ
Şekil13
Hatalardan sonra web sayfamızın hatasız olduğunu nasıl anlarız diye bir soru
gelebilir. Bunun için W3C yani HTML standartlarını belirleyen kurum bizim
için bir sayfa geliştirdi. Sayfaya http://validator.w3.org adresinden
ulaşabilirsiniz.
37
Musa ÇAVUŞ
Şekil14
Şekil15
Şimdi diyebilirsiniz, google gibi dünyaca ün salmış bir firma nasıl olurda
sayfasında 37 hata yapmış olabilir? Hemen sevinmeyin google amcanın hatasını
bulan ilk insanım diye. Oraya başka adresleri yazsanız hatalar olduğunu
göreceksinizdir. W3C standartlarının o kadar önemli olmadığını buradan
görebilirsiniz.
http://validator.w3.org adresinde sisteminizde bulunan dosyaları da
upload ederek kontrol ettirebilirsiniz. Yalnız bunun için Firefox eklentisi daha
kullanışlıdır. Yapmanız gereken Web Developer’i Firefox ortamına yüklemek
olacaktır. Firefox’unuzu açın ve Mönü kısmından Araçlar, daha sonra da
Eklentileri tıklayın.
39
Musa ÇAVUŞ
Şekil16
Şekil17
40
Musa ÇAVUŞ
Şekil18
html>
<head>
<title>CSS-Dosyasi</title>
<link href="benimcss.css" type="text/css" rel="stylesheet">
</head>
41
Musa ÇAVUŞ
<body>
<h1>Ates bacayi sarmis</h1>
<h1 class="a">Baca atesi sarmis mi?</h1>
<span class="b" id="b">Bu</span> <span class="b">da</span>
<i class="b">gecer</i>.
<span id="b">Burada Span kullaniliyor</span>
<a href="http://www.google.com">Tikla</a>
</body>
</html>
css1.html
Style Sheet’leri başka bir dosyada sakladığınızda o dosyanın adını “link” tagını
kullanarak “href” parametresinde tanımlayabilirsiniz. “type “ ve “rel”
taglarınıda yukarıdaki örnekteki gibi tanımlarsanız benimcss.css dosyasını
HTML sayfanızda kullanabilirsiniz. Şu an böyle bir dosyamız olmadığı için
ekran görüntüsü Style Sheet olmadan durağan bir görüntü verecektir.
Şekil19
<html>
<body style="background:green;">
</body>
</html>
css2.html
Şekil20
2.5. CSS
43
Musa ÇAVUŞ
<html>
<head>
<title>CSS</title>
</head>
<style type="text/css">
<!--
h1, h4 {
background : pink;
}
h1.a {
color : purple;
}
.b {
font-size : 49px;
visibility : hidden;
}
#b {
background : #aa1611;
}
*{
background : #a06611;
}
a:hover{
background : #007011;
}
a{
color : #ffffff;
text-decoration : none;
44
Musa ÇAVUŞ
}
-->
</style>
<body>
<h1>Ates bacayi sarmis</h1>
<h1 class="a">Baca atesi sarmis mi?</h1>
<span class="b" id="b">Bu</span> <span class="b">da</span>
<i class="b">gecer</i>.
<span id="b">Burada Span kullaniliyor</span>
<a href="http://www.google.com">Tikla</a>
</body>
</html>
css3.html
Şekil21
CSS kullanarak daha önceki web sayfamızın birden nasıl canlılık kazandığını
Şekil21’de görüyorsunuz. css3.html dosyasındaki CSS bilgisini anlarsanız,
45
Musa ÇAVUŞ
kitaptaki CSS ile JavaScript örneklerini anlamış olursunuz. CSS’te mantık çok
basittir, önce değiştirmek istediğimiz alanı belirtiriz, sonra “{}” parantezleri
içerisinde bu alanlarla ne yapmak istediğimizi tanımlarız. h1 ve h4 alanlarında
bir tanımlama yapabilmek için “h1, h4” yazarız. Bu kısma selektör deniliyor.
Örnekte h1 ve h4 alanlarının arka plan rengini değiştirmek istediğim için
“background” tanımlaması yaptım. Đki nokta üstü üste “background”
tanımlamasına iki nokta üst üsteden sonra yazdığım değeri atamaktadır. Noktalı
virgülle bir tanımlamayı bitirmiş oluyoruz. Lütfen eşittir işareti yerine iki nokta
üst üste kullanıldığına dikkat edin. Bazı tarayıcılar eşittir işaretini kabul ettikleri
için bu hataya düşebilirsiniz ve eşittir işaretini kabul etmeyen bir tarayıcı ile
karşı karşıya kaldığınızda hatanın nereden kaynaklandığını bulamayabilirsiniz.
Selektör tanımlamalarının içerisinde kullanılan tanımlamalar aslında kendini
açıklayıcı bir nitelik taşımaktadır. Örnekte kullandığım, “font.size”,
Đngilizceden tercüme edersek yazı tipi büyüklüğü anlamına gelir. “visibility”
görünürlük manasını taşır. “color” renk demektir. Bu anlamlar doğrultusunda da
sayfamızda değişiklikler olmaktadır.
“h1.a” değişken selektörüdür. HTML kodunda “<h1 class=”a”...” olarak
tanımlanan bölgeye bu değişken selektörü hükmetmektedir. “h1” HTML
tagında “class” parametresini kullanarak “h1.a” değişken selektöründeki
tanımlamaların burada uygulanmasını bu şekilde sağlamış olduk. “.b” gibi
selektörler “class” parametresinin değeri “b” olan tüm HTML tagları işlem
görür. Bizim örneğimizdeki <span> ve <i> tagında olduğu gibi. Başka bir
selektör şeklide “#” ile başlayan selektörlerdir. Bu selektörler, HTML taglarında
“id” parametresi kullanılan taglarla işlem görmektedirler. “*” selektörü HTML
taglarında kısıtlama getirilmiyorsa hepsi için geçerlidir. Çok ilginç bir
selektörde “a:hover” selektörüdür. Fare ile çıkan web sayfasında “Tıkla”
kelimesinin üzerine geldiğinizde renginin yeşil olduğunu göreceksinizdir. Ek bir
programlama yapmadan ve sadece CSS tanımlaması kullanarak bu özelliği web
sayfanıza katabiliyorsunuz.
Firefox’unuza kurduğunuz Web Geliştiricisindeki CSS’le ilgili yardımınıza
koşacak bir çok özellik vardır. Benim tavsiyem bunları tıklayarak bir bakış açısı
elde etmenizdir. Araçlar->Web Geliştirici->CSS Hata yok->CSS’yi Düzenle
seçeneğini seçtiğinizde, canlı olarak yaptığınız tüm değişiklikleri sayfanızda
görebiliyorsunuz.
46
Musa ÇAVUŞ
Şekil21
2.6. XML
</sayfa>
</websayfasi>
websayfasi.xml
Bu dosyayı Firefox ile açmaya çalışırsanız şöyle bir görüntü elde edersiniz:
Şekil22
Şekil23
<url>http://www.google.com</url>
<aciklama>Googlenin Ingilizce sayfasi</aciklama>
</sayfa>
</websayfasi>
websayfasi1.xml
XML dokümanına bir CSS dosyasını bağlamak çok kolaydır. Yukarıda “<?xml-
stylesheet” ile başlayan satırda “href” parametresine CSS dosyasını
belirtiyorsunuz, o kadar. Ben örnek bir CSS dosyası tanımladım:
*{
background-color: #11ff55;
}
sayfa {
display: block;
width: 300px;
height: 180px;
background-color: rgb(55, 215, 151);
font-size: 17px;
text-align: center;
display: block;
}
baslik {
display: block;
background-color: rgb(251, 255, 255);
color: blue;
}
aciklama {
display: block;
background-color: rgb(125, 60, 235);
}
websayfasi.css
Doküman XML olduğu için etkilemek istediğiniz tagıın adını selektör kısmına
yazmanız yeterlidir. Mesela “sayfa” tagının ekrandaki görünümü için selektör
olarak “sayfa” yazdım ve “{}” parantezlerinin arasına o bölüm ile ilgili görsel
tanımlamaları verdim. Tanımlamaları açıklamıyorum, çünkü CSS ile ilgili
tanımlamalar, fakat isimlerinden ne işe yaradığını anlayabilirsiniz.
50
Musa ÇAVUŞ
Şekil24
Şekil24
Bir öncekinden farkı üst tarafında “xml-stylesheet” yazması gibi gelebilir fakat
öyle değildir. “Document” yazan yazının yanındaki şekle tıklayın ve oradan
“Stylesheet” sekmesini seçin. Sağ tarafta CSS dokümanında kullandığınız
kuralları göreceksiniz. Sağ taraftan “sayfa” seçeneğini seçerseniz şu görüntüyü
elde edersiniz:
52
Musa ÇAVUŞ
Şekil25
Bölüm 3
JavaScript Kullanımı
54
Musa ÇAVUŞ
3.1 Değişkenler
<html>
<body>
<script language="JavaScript">
benimDegiskenim = 21;
alert(benimDegiskenim);
benimdegiskenim = 213;
alert(benimDegiskenim);
</script>
</body>
</html>
veritipidezavantaj.html
Şekil26
var tanımlaması
<html>
<body>
<script language="JavaScript">
degisken = 5.67;
alert(61 * degisken);
degisken = 234 /119;
a = "abc";
var b = true;
</script>
</body>
</html>
veritipleri.html
Şekil27
Diziler, JavaScript’te zor konular kategorisinde yer alır. Ben doğru anlatılırsa
zor olmayacağı inancındayım. Ayrıca diziler size büyük kolaylıklar
sağlamaktadır ve rutin olan işlemleri döngüler eşliğinde halledebilirsiniz. Dizi,
bir çok veri tipinin bir değişkende tutulması ve verilere bir indeks ile erişim
sağlanan mekanizmadır. Ufak bir kod ile dizileri anlatmaya başlamak istiyorum:
<html>
<body>
<script language="JavaScript">
dizi = new Array();
document.write(dizi[0]);
dizi[0] = 5;
document.write(dizi[0]);
dizi[0] = "Kalem";
document.write(dizi[0]);
</script>
</body>
</html>
diziler1.html
Şekil28
57
Musa ÇAVUŞ
JavaScript’te bir değişken tanımlarken bir isim ve eşitlik işaretinin sağ tarafına
değerini yazarız. Dizilerde ise bu böyle değildir. Değişken adını yazdıktan sonra
eşitliğin sol tarafına “new Array()” yazarak bunun bir dizi olduğunu belirtmiş
oluruz. Anahtar kelime burada “new” kelimesidir. Array() ise bunun bir dizi
nesne olduğunu gösteriyor. Bu satırlar, Array tipinden yeni bir nesne oluştur
denilmek istenildi. Nesneleri daha sonra anlatacağım, o yüzden aman ben nesne
nedir bilmiyorum diye korkmayın. Hepsini öğreneceksiniz.
document.write() fonksiyonu tarayıcıya bir metin yazmak istediğinizde
kullanacağınız bir fonksiyondur. Parametre olarak verilen metin tarayıcıda
gösterilmektedir. dizi değişkenli dizimizi oluşturduktan sonra ben dizinin ilk
elemanına “5” değerini atadım. Bunu yaparken dizi değişkeninin hemen
ardından bir köşeli parantez açtım ve “0” yazarak köşeli parantezi kapattım.
JavaScript’te diziler sıfırdan başladıkları için ilk değeri sıfırıncı elemana
koyabiliyorsunuz. JavaScript’te bir değişkene istediğiniz tipte bir değer
atayabildiğiniz için daha sonraki satırlarda dizi dizisinin ilk elemanına “Kalem”
değerini atadım ve tarayıcının göstermesini sağladım.
<html>
<body>
<script language="JavaScript">
a = new Array(10);
a[0] = 1;
a[1] = 2;
alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
diziler2.html
58
Musa ÇAVUŞ
Şekil29
Şekil30
<html>
<body>
<script language="JavaScript">
a = new Array(10);
a[0] = 1;
a[1] = 2;
a[20] = 21;
alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
diziler3.html
Şekil31
60
Musa ÇAVUŞ
Şekil32
3.3 Operatörler
JavaScript dilinde diğer dillerde olduğu gibi operatörler mevcuttur. Ben bunları
bu bölümde yüzeysel olarak göstereceğim ve diğer konularda örnekler
derinleştikçe operatörleri kullanarak daha geniş açıklamalar yapacağım. Burada
sadece operatörlere değineceğim.
61
Musa ÇAVUŞ
Atama operatörü
Bir değişkene değer atamak isteniliyorsa atama operatörü kullanılır. Đşlem “=”
işaretiyle yapılır.
<html>
<body>
<script language="JavaScript">
abi = 34;
abla = 32;
ben = 25;
if (abi > 17) {
document.write("Abim araba surebilir");
document.write("<br>");
}
if (ben == 15) {
document.write("Ben en ufagim");
document.write("<br>");
}
if (ben != 18) {
document.write("Ben araba suremem");
document.write("<br>");
}
62
Musa ÇAVUŞ
</script>
</body>
</html>
operatorler1.html
Şekil33
Operatör Açıklama
++, -- artırma, eksiltme
+, - toplama, çıkartma
~ bit tümleme
! logik tümleme
*, /, % çarpma, bölme, kalan
+ Metinleri birleştirme
<< sola kaydırma
>> sağa kaydırma
<, <=, >, >= nümerik eşitleme
= =, != eşitlik, eşit değil
& bit düzeyinde ve işlemi
^ bit düzeyinde xor
| Bit düzeyinde veya işlemi
&& logik ve işlemi
|| logik veya işlemi
= atama işlemi
Aritmetiksel operatörler
a = a * (3 + 5)
<html>
<body>
<script language="JavaScript">
i = 340;
j = 10;
document.write(++i);
document.write("<br>");
document.write(++j);
document.write("<br>");
document.write(i);
document.write("<br>");
document.write(j);
document.write("<br>");
document.write(i+j);
document.write("<br>");
document.write(i---++j);
</script>
</body>
</html>
operatorler2.html
65
Musa ÇAVUŞ
Şekil34
Mantıksal Operatörler
<html>
<body>
<script language="JavaScript">
document.write(true | false);
document.write("<br>");
document.write(!false);
document.write("<br>");
document.write(true ^ false);
document.write("<br>");
document.write(1 | 3);
document.write("<br>");
</script>
66
Musa ÇAVUŞ
</body>
</html>
operatorler3.html
Şekil35
true ve false işlemi Veya işlemine sokulunca sonuç true oluyor. true ve
false Ve işlemine sokulunca sonuç false oluyor. false değerinin değili true
olmuştur. true ve false Xor işleminden geçtiğinde şartımıza göre true sonucunu
vermektedir. 1 ile 3 sayılarını Veya işleminden geçirince neden 3 olmaktadır? 1
sayısı, 2 tabanlı sayı sistemine göre “01” şeklinde ifade edilir.3 sayısıda, “11”
şeklinde ifade edilir. 0 bilgisayar dilinde false, 1 ise true değerini alır. Böylece
1, sayısını “false true” şeklinde hayalımizde düşünecek olursak, 3 sayısını “true
true” olarak düşünebiliriz. 1 sayısındaki ilk değer olan false ile 3 sayısındaki ilk
değer olan true değerlerini Veya işleminden geçirdiğimizde true değerini
alacağız. Yine 1 sayısındaki true değeriyle, 3 sayısındaki ikinci değer olan true
değerini Veya işleminden geçirecek olursak sonuç true olacaktır. Yani 1 ile 3
sayısının Veya işleminden bize “true true” gibi bir ifade çıkacaktır. Bunun
sonucu “11” olacaktır. “11” olan ikilik sayı sayı sistemini 10 tabanındaki bir
sayı sistemine çevirecek olursak bize 3 rakamını verecektir. “|”, “&” ve “^“
işlemleri bit işlemleri olduğu için dikkat ettiyseniz true ve false işlemlerinde “1”
ya da “0” sonucu oluşmaktadır. “1” true “0” ise false demektir.
Nasıl mantık operatörlerini öğrenerek mantığınız alt üst oldu mu? Ve ve Veya
işlemi bilgisayar dünyasının temellerinden biridir. Yalnız şu da bir gerçek bit
işlemleri için ben şimdiye kadar hiç bir program yazmadım, sizde
yazmayacaksınız diye düşünüyorum. Peki niye anlatıyorum bunları, dedim ya
yeşillik olsun ve JavaScript’e ısınalım. Diyelim ki siz bir boksörsünüz ve
67
Musa ÇAVUŞ
3.4. Açıklamalar
JavaScript kodlarınızda iki şekilde açıklama yapabilirsiniz. Birincisi “//” işareti
kullanarak sadece o satırda geçerli olmak şartıyla yapabileceğiniz açıklamalar.
Açıklamaların ikinci şekli “/* */” aralığında yapılmaktadır. Bu açıklama türüyle
daha çok satırda açıklama yapabilirsiniz ve her satır için “//” işareti
tanımlamanız gerekmemektedir.
<html>
<body>
<script language="JavaScript">
// Bu bir aciklamadir
/*
document.write(4);
document.write("<br>");
*/
</script>
</body>
</html>
aciklama.html
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
document.write("<br>");
}
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
document.write("<br>");
}
if(a != 20) {
document.write("a degiskeni 20 sayisina esit degil");
document.write("<br>");
}
</script>
</body>
</html>
if.html
Şekil36
69
Musa ÇAVUŞ
if yapısı çok basittir, öncelikle “if” yazıyoruz sonra bir parantez açıyoruz,
parantezin içerisine büyüklük, küçüklük veya eşitlik operatörü kullanılan bir
kıyaslama ifadesi yazarak parantezi kapatıyoruz. Kıyaslama doğruysa “{}”
arasında olan blok işlem görüyor, yanlış ise “{}” arasındaki blok işlem
görmüyor. if yapısından sonraki blok tek satırlık bir kod ise “{}” parantezlerini
koymaya gerek yok, birden fazla satırsa mutlaka “{}” parantezlerini
kullanmalıyız.
Örnek “a” değişkenine “9” değerini atadım. “10” sayısından küçük mü
büyük mü onu kontrol ettim. En sonunda da “20” sayısına eşit değil mi onu
kontrol ettim. Çoğunlukla if yapısı, else yapısıyla birleştirilir. “else” Türkçe
olarak “değilse” manasını taşımaktadır. “Eğer ….. yap, değilse ….. yap” gibi
düşünebilirsiniz. Daha da genişleterek, “Eğer ….. yap, değilse eğer ….. yap,
değilse …. yap” şeklinde de bir yapı genellikle kullanılmaktadır.
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
document.write("<br>");
}else
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
document.write("<br>");
}else {
document.write("a degiskeni 20 sayisina esit");
document.write("<br>");
}
</script>
</body>
</html>
ifelse.html
70
Musa ÇAVUŞ
Şekil37
Birinci blokta “a” değişkeninin “10” sayısından küçüklüğünü kontrol ettim.
Đkinci blok, eğer birinci if karar yapısı işlem görmediyse “else if” yani “değilse
eğer” şeklinde işleme giriyor ve “a” değişkenini “10” sayısından büyüklüğünü
kontrol ediyor. Son blok ise, ilk iki blok işlem görmediyse “else” yani “bunların
hiçbiri doğru değilse” işleme giriyor.
Birden çok kıyaslama işlemini birleştirmek istersek yardımımıza “&&”
ve “||” işaretleri koşmaktadır.
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10 && a > 5) {
document.write("a degiskeni 10 sayisindan kucuk"+
" ve 5 sayisindan buyuk");
document.write("<br>");
}
Şekil38
“&&” işareti iki kıyaslamanın arasına “ve” bağlacı koymaktadır. “a” değişkeni
“10” sayısından küçükse “ve” “5” sayısından da büyükse bloktaki işlemi yap
denilmektedir. “||” işareti iki kıyaslama arasına “ya da” bağlacı koymaktadır.
“a” değişkeni “10” sayısından büyük “ya da” “20” sayısından küçükse sıradaki
blok işlem görmektedir. Bu şekilde birden fazla kıyaslamayı aynı if karar
yapısına dahil edebiliyorsunuz.
if karar yapısını mutlaka iyi anlayın, çünkü insan beynide buna göre
düşünmektedir ve karalarını vermektedir.
switch
<html>
<body>
<script language="JavaScript">
a = 1;
switch (a) {
case 0 : document.write("0" + "<br>");
break;
case 1 : document.write("1" + "<br>");
break;
case 2 : document.write("2" + "<br>");
break;
case 3 : document.write("3" + "<br>");
72
Musa ÇAVUŞ
break;
default: document.write("4" + "<br>");
}
</script>
</body>
</html>
switch.html
Şekil39
<html>
<body>
<script language="JavaScript">
a = "Veli";
switch (a) {
case "Ali" : document.write("Ali" + "<br>");
break;
case "Veli" : document.write("Veli" + "<br>");
break;
73
Musa ÇAVUŞ
Şekil40
3.6 Döngüler
while döngüsü
<html>
<body>
<script language="JavaScript">
i = 0;
while(i < 10) {
document.write(i + "<br>");
i++;
}
74
Musa ÇAVUŞ
</script>
</body>
</html>
while.html
Şekil41
do - while döngüsü
Bu döngüde ilginç olan, önermenin döngü sonunda kontrol edilmesinde
yatmaktadır. Bu yüzden döngü içerisindeki blok bir kere mutlaka işlem
görmektedir.
<html>
<body>
<script language="JavaScript">
i = 50;
do {
document.write(i + "<br>");
i++;
}
75
Musa ÇAVUŞ
Şekil42
for döngüsü
while döngüsünün özelleştirilmiş halidir. Daha çok sayaçlı işlemlerde
kullanılmaktadır ve benim en çok kullandığım döngüdür.
<html>
<body>
<script language="JavaScript">
for (i = 1; i <= 10; i++)
document.write("Sayi: " + i + "<br>");
</script>
</body>
</html>
for.html
76
Musa ÇAVUŞ
Şekil43
for döngüsünün ilk kısmında değişken tanımı yapılıyor ve değeri aktarılıyor.
Đkinci kısmında önerme belirtiyor. Üçüncü kısmında ise değişken bir artırılıyor.
Değişkeni artırma işlemi bloğun sonunda yapılmaktadır. Kısımlar noktalı
virgüllerle ayrılmaktadır. for döngülerin avantajları kendisini dizilerde
göstermektedir.
<html>
<body>
<script language="JavaScript">
firma = new Array();
firma[0] = "Teneke Fabrikasi<br />";
firma[1] = "Kaporta sokaka 32<br />";
firma[2] = "42123 Konya<br />";
firma[3] = "Telefon: 0332393202322";
for(i = 0; i < firma.length; i++){
document.write(firma[i]);
}
</script>
</body>
</html>
fordizi.html
77
Musa ÇAVUŞ
Şekil44
<html>
<body>
<script language="JavaScript">
firma = new Array();
firma[0] = "Teneke Fabrikasi<br />";
firma[1] = "Kaporta sokaka 32<br />";
firma[2] = "42123 Konya<br />";
firma[3] = "Telefon: 0332393202322";
for(i in firma){
document.write(firma[i]);
}
</script>
</body>
</html>
fordiziozel.html
78
Musa ÇAVUŞ
Şekil45
break ve continue
Herhangi bir döngü içerisinde break komutu kullanılırsa, program döngünün
o noktasından sonra çıkar ve döngüden sonraki koda geçer.
<html>
<body>
<script language="JavaScript">
i = 10;
while (true) {
if (i < 0) {
break;
}
document.write(i+"<br>");
i--;
}
</script>
</body>
</html>
break.html
79
Musa ÇAVUŞ
Şekil46
<html>
<body>
<script language="JavaScript">
for (i = 0; i <= 10; i++) {
if ((i % 2) == 1)
continue;
document.write(i + " sayisi cift "+
"sayidir" +"<br>");
}
</script>
</body>
</html>
continue.html
80
Musa ÇAVUŞ
Şekil47
3.7 Fonksiyonlar
<html>
<body>
<script language="JavaScript">
function test() {
document.write("Selam ne haber");
}
test();
</script>
</body>
</html>
fonksiyon.html
81
Musa ÇAVUŞ
Şekil48
<html>
<body>
<script language="JavaScript">
function topla(a, b) {
document.write(a+" ve "+b+" sayisinin toplami :"+(a+b));
}
topla(5,6);
</script>
</body>
</html>
fonkparametre.html
82
Musa ÇAVUŞ
Şekil49
<html>
<body>
<script language="JavaScript">
function topla(a, b) {
document.write(a+" ve "+b+" sayisinin toplami :"+(a+b));
document.write("<br>");
}
function topla(a, b, c) {
document.write(a+", "+b+" ve "+c+" sayilarinin toplami :"+(a+b+c));
document.write("<br>");
}
topla(5,6,9);
topla(7,16,29);
</script>
</body>
</html>
fonkparametre1.html
83
Musa ÇAVUŞ
Şekil50
c değişkeni ekleyerek aynı fonksiyon ismi adı altında bir fonksiyon tanımlaması
yapılabiliniyor.
<html>
<body>
<script language="JavaScript">
a = 10;
function deger(a) {
document.write("a degiskeninin fonksiyon icindeki degeri: " + a + "<br>");
}
document.write("a degiskeninin fonksiyon oncesi degeri: " + a + "<br>");
deger(2);
document.write("a degiskeninin fonksiyon sonrasi degeri: " + a + "<br>");
</script>
</body>
</html>
fonkgeneldegisken.html
84
Musa ÇAVUŞ
Şekil51
return
<html>
<body>
<script language="JavaScript">
function modlama(a, b) {
return a % b;
document.write("Gereksiz bir yazi");
}
deger = modlama(17, 6);
document.write(deger);
</script>
</body>
</html>
fonksiyondeger.html
Şekil52
<html>
<body>
<script language="JavaScript">
i = 1;
function islem(son) {
if(i < son) {
i=i+i;
islem(son);
}
else
document.write("sonuc: " +
": " + i + "<br />");
}
islem(100);
</script>
</body>
</html>
fkendinicagir.html
Şekil53
Bu yöntemin kafanızda daha iyi yer edinebilmesi için bir önceki örnekte ufak
bir değişiklik yaptım:
<html>
<body>
<script language="JavaScript">
i = 1;
j = 1;
function islem(son) {
if(i < son) {
i=i+i;
islem(son);
}
else
document.write("sonuc: " +
": " + i + "<br />");
document.write(j+++". fonksiyondayim");
document.write("<br>");
}
islem(100);
</script>
</body>
</html>
fkendinicagir.html
Şekil54
87
Musa ÇAVUŞ
3.8 Eventhandler
Şekil55
88
Musa ÇAVUŞ
<html>
<script language="JavaScript">
function resimcerceve(){
document.resim.border=9;
}
function resimcerceveyok() {
document.resim.border=0;
}
</script>
<body>
<h3>Fareyi resime hareket ettirin</h3>
<a href="#" onMouseOver="resimcerceve()"
onMouseOut="resimcerceveyok()">
<img src="turkiye.jpg" name="resim" border="0" /></a>
</body>
</html>
resimevent.html
Şekil56
<html>
<script language="JavaScript">
function aktif(metin) {
document.getElementById("bilgi").innerHTML=metin;
}
function pasif() {
document.getElementById("bilgi").innerHTML="";
}
</script>
<body>
<form>
Kullanici Adi:
<input type="metin" name="userid"
onFocus="aktif('Kullanici adinizi girin')"
90
Musa ÇAVUŞ
onBlur="pasif()">
<br>
Sifre:
<input type="password" name="pw"
onFocus="aktif('Sifrenizi girin')"
onBlur="pasif()">
</form>
<div id="bilgi"></div>
</body>
</html>
focus.html
Şekil57
Kod parçası ilk başta biraz karışık gibi gözükebilir, özellikle Form’larla
çalışmamış kişiler yadırgayabilirler fakat anlaşıldıktan sonra çok basit olduğunu
göreceksiniz. <form> tagıyla bir Form tanımı yapıyoruz. <input> tagı giriş
yapacağımız bir nesnenin olduğunu gösteriyor. type parametresinde <input>
tagının göstereceği nesnenin tipini belirtebiliyoruz. Đlk nesnenin metin kutusu
olmasını istediğimin için type parametresine text yazdım. Đkinci nesnenin ise bir
şifre metin kutusu olmasını istedim ve type parametresini password olarak
ayarladım.
Asıl bundan sonrası çok ilginç ve bizi ilgilendiriyor. Metin kutusunda onFocus
Eventhandler’ini kullandım. onFocus Eventhandler’i kullanıcı metin kutusunu
seçerse aktif hale geliyor ve daha önce tanımladığım aktif() fonksiyonunu
çağırıyor. Bu sefer tanımladığım fonksiyonu parametrik yaptım. Parametrede
yazılan metinle beraber aktif() fonksiyonu çağrılıyor ve getElementById()
fonksiyonunun yardımıyla bilgi nesnesine ulaşılıyor. Ulaştığımız nesnenin
innerHTML değişkeninin değerini değiştiriyoruz. innerHTML değişkeni
ulaştığımız nesnenin HTML içeriğine müdahale ederek değiştirmektedir.
91
Musa ÇAVUŞ
Senaryoyu başar alırsak görüyoruz ki, kullanıcı metin kutusunu seçer seçmez
kullanıcıyı bilgilendirebilmek için tarayıcı bir yazı gösteriyor. onBlur
Eventhandler’ide onFocus Eventhandler’in tam tersidir. Metin kutusu seçili
değilken aktif olmaktadır. Aynı şekilde pw nesnesi de işlemektedir.
92
Musa ÇAVUŞ
Bölüm 4
Hata bulma ve ayıklama
93
Musa ÇAVUŞ
<html>
<body>
<table border width="100">
<script language="JavaScript">
sayi = Math.round(Math.random()* 30);
document.write("Cikis degeri: " + sayi );
for(sayac=0;sayac < say;sayac++) {
Şekil58
94
Musa ÇAVUŞ
Şekil59
<html>
<body>
<table border width="100">
<script language="JavaScript">
sayi = Math.round(Math.random()* 30);
document.write("Cikis degeri: " + sayi );
alert(sayi);
for(sayac=0;sayac < say;sayac++) {
Şekil60
4.2 Debugger
Şekil61
Kurulum bittikten sonra hatabul.html dosyasına çift tıklayarak Firefox ile tekrar
açın ve Araçlar->JavaScript Debugger seçeneğini seçin.
97
Musa ÇAVUŞ
Şekil62
Şekil63
98
Musa ÇAVUŞ
Şekil64
Şekil65
Şekil66
Şimdi 6. Satırın önündeki boşluğa tıkladığınızda orada arka planı kırmızı bir B
harfi göreceksiniz.
Şekil67
101
Musa ÇAVUŞ
Şekil68
Şekil69
Şekil70
Şekil71
Şekil72
Bölüm 5
<html>
<body>
<script language="JavaScript">
tarih = new Date();
dizi = new Array();
resim = new Image();
</script>
</body>
</html>
kurucumetot.html
107
Musa ÇAVUŞ
<html>
<body>
<img src="konya.jpg" height="100" weight="300"/>
<script language="JavaScript">
resim = new Image();
resim.src = "turkiye.jpg";
setTimeout("document.images[0].src=resim.src","3000");
</script>
</body>
</html>
nesneolustur.html
Şekil73
108
Musa ÇAVUŞ
Şekil74
<html>
<body>
<script language="JavaScript">
a = new Date(2006, 11, 15, 2, 14, 11, 7);
109
Musa ÇAVUŞ
Şekil75
Şimdiye kadar Date() sınıfından parametresiz bir kurucu metot kullanarak nesne
oluşturuyorduk. Parametresiz kullanılan Date() sınıfı güncel tarih ve saati
vermektedir. tarih1.html örneğinde Date() nesnesinin birçok kullanım şekli
vardır.a değişkenine atanan Date() nesnesinin parametrelerine bakarsak, 2006
yıl, 12 ay, 15 gün, 2 saat, 14 dakika, 11 saniye, 7 salise değerinde bir nesne
oluşturacaktır. 11 yazan yer Kasım ayı değildir, Aralık ayıdır. Date() sınıfında
ayların numaralandırılmasında sıfırdan başlamaktadır. 0 Ocak ayıdır, 11 ise
Aralık ayıdır. Salise değerini istemiyorsak, b ve c değişkenlerine atanan
nesneleri kullanabiliriz. Date() sınıfının bir başka kullanımı, parametre olarak
metin ya da bir diğer değişle String kullanımıdır. String’i istenilen formatta
110
Musa ÇAVUŞ
Date sınıfı
<html>
<style>
*{
background-color : white;
color : blue;
}
</style>
<body>
<div align="center">
<h1>Bugunku Atasozu</h1>
Bir elin nesi var iki elin sesi var
<script language="JavaScript">
var dgun,day,dyil;
function tarihGuncel(gun,ay,yil) {
if(gun<10) {
dgun="0" + gun;
}
else dgun = gun;
if(ay<10) {
day="0" + ay;
}
else day=ay;
dyil =1900 + ((1900 + tarih.getYear()) % 1900);
}
var tarih = new Date();
111
Musa ÇAVUŞ
Şekil76
Bu kodda bizi iligilendiren kısım Güncellenme tarihi kısmı. new Date() ile bir
tarih nesnesi oluşturdum. Bununla güncel tarih sorgulanıyor. Fakat daha sonraki
satırda, güncel tarihin bileşenleri, tarihGüncel adlı fonksiyonda ayrıştırılıyor ve
ekrana bizim istediğimiz formatta yazdırtılıyor. Fonksiyonun parametreleri
sırasıyla güncel tarihin, gününü, ayını ve yılını belirtmektedir. getDate() günü,
getMonth() sıfırdan başlamak şartıyla ayı ve getYear() yılı bize vermektedir.
Şimdi diyebilirsiniz ki, neden getDate(), getYear(), getMonth() fonksiyonlarını
doğrudan kullanarak tarihsel bilgileri ekrana yazdırtmıyoruz. Bunun birkaç
nedeni var. Ay ve gün bilgisi 10 sayısından ufaksa ekrana sadece tek haneli bir
sayı yazılmaktadır, çünkü getMonth() ya da getDate() tam sayı değerini iletir.
Tarayıcıda gördüğünüz gibi ay bilgisi için 05 görüntüsü sergileyebilmek için
aldığınız tam sayı değerini işlemeniz gerekiyor. Ben basit bir if kıyaslaması
yaparak dedim ki, eğer tam sayı değeri 10 sayısından ufaksa yani tek haneli ise
başına sıfır ekle.
Yıl için niye böyle komik bir kurgu yaptığımı da soruyorsunuzdur. Bilişim
sektöründe tarihler 01.01.1900 başlar ve hesaplama yapılır. Bazı tarayıcılar
buna uymazlar. Internet Explorer’in bazı versiyonlarında bu satırı işleme
koymamış olsaydık tarayıcı 2010 gösterecektir, fakat diğer tarayıcılar 110
112
Musa ÇAVUŞ
Metot Açıklama
getDate() Bir aydaki günü veriyor.
getHours() Bir gündeki saati veriyor
getMinutes() Bir saatteki dakikayı veriyor
getYear() Bulunduğumuz yılı veriyor
getSeconds() Bir dakikadaki saniyeyi veriyor
setDate() Bir aydaki günü değiştirir.
setHours() Bir gündeki saati değiştirir
setMinutes() Bir saatteki dakikayı değiştirir
setYear() Bulunduğumuz yılı değiştirir
setSeconds() Bir dakikadaki saniyeyi değiştirir
String sınıfı
<html>
<style>
*{
background-color : black;
color : white;
}
h1 {
background-color : yellow;
color : green;
113
Musa ÇAVUŞ
text-align : center;
}
div {
background-color : white;
color : purple;
text-align : center;
width : 400px;
}
</style>
<body>
<h1>Girilen Bilgi Hakkinda</h1>
<div>
<script language="JavaScript">
testText = prompt("Bir String bilgisi girin","");
document.write("String uzunlugu: "
+ testText.length + " <br />"
+ "3. harf: "
+ testText.charAt(2)+ ".<br />"
+ "String'in buyuk yazilmis hali: "
+ testText.toUpperCase()+ ".<br />"
+ "String'in kucuk yazilmis hali: "
+ testText.toLowerCase()+ ".<br />"
+ "String'in kalin yazilmis hali: "
+ testText.big()+ ".<br />"
+ "String'in ustu cizgili yazilmis hali: "
+ testText.strike()+ ".<br />"
+ "s harfi nerede?: "
+ testText.indexOf("u") + "."
);
</script>
</div>
</body
</html>
string.html
114
Musa ÇAVUŞ
Şekil77
Şekil78
5.3 Metotlar
<html>
<body>
<table >
<script language="JavaScript">
<!--
for(i = 1; i < 6; i++) {
z = Math.round(Math.random() * 50);
document.write("<tr><td>Sayi " + i + ":</td><td>" + z + "</td></tr>");
}
//-->
</script>
</table>
</body>
</html>
sayilar.html
116
Musa ÇAVUŞ
Şekil79
random() metodu 0-1 arasında bir sayı üretmektedir, bunu 50 ile çarptığımda bu
sayı 0-50 arasında bir sayı olmaktadır, tam sayı istediğim içinde round()
metoduyla bunu sağladım. Math bir sınıftır ve random() ile round() Math
sınıfının birer metodudur. Đlginç olan Math sınıfından bir nesne oluşturmadan
doğrudan metotlarını çağrılabilmesidir. Normalde böyle bir çağırma hata
vermesi gerekiyor. Bu tür nesneler statik olduğu için böyle bir kullanımda
bulunabiliriz.
Kitabımda JavaScript sınıflarından örnekler veriyorum fakat detaylara
inmiyorum, daha çok güncel kullanılan programlama şekillerine değiniyorum.
Ayrıntılı bilgi için Google Amcaya başvurmanızı öneririm. JavaScript ve
HTML referansı olarakta http://www.w3schools.com/jsref/default.asp
sayfasından yararlanabilirsiniz.
<html>
<body>
<table >
<form action="wohin.php" method="get"
onReset="return confirm(
'Bilgiler sifirlanacaktir, emin misiniz?')">
<tr>
<td>
Ad
</td>
<td>
<input type="text" name="ad" />
</td>
</tr>
<tr>
<td>
Soyad
</td>
<td>
<input type="text" name="soyad" />
</td>
</tr>
<tr>
<td>
<input type="reset" />
</td>
<td>
<input type="submit" />
</td>
</tr>
</form>
118
Musa ÇAVUŞ
</table>
</body>
</html>
formsifirla.html
Şekil80
Şekil81
Şekil82
DOM modeline göre bir web sayfası tarayıcıda gösterildikten sonra o sayfanın
tüm elemanları hafızada birer nesne olarak saklanır ve document nesnesi ile tüm
elemanlara ulaşabilinir. JavaScript’te DOM modelinden kullanabileceğimizi
kullanışlı nesneler var. Ben önemlilerini bu kitapta anlatacaığım.
document nesnesi
<html>
<script language="JavaScript">
121
Musa ÇAVUŞ
function resimYukle() {
// document.forms[0].elements[0].value = "Oylesine bir yazi";
document.getElementsByName("f1")[0].elements[0].value = "Oylesine bir
yazi";
// document.f1.elements[0].value = "Oylesine bir yazi";
document.getElementById("h").innerHTML="Yeliz";
document.getElementsByTagName("h1")[1].innerHTML = "Resim degisti";
window.document.images[0].src = "yeliz.jpg";
}
</script>
<body>
<h1 id="h">Ecrin</h1>
<form name="f1">
<input>
</form>
<h1>Resim</h1>
<img src="ecrin.jpg" width="400" onclick="resimYukle()">
</body>
</html>
dom1.html
122
Musa ÇAVUŞ
Şekil83
Şekil84
123
Musa ÇAVUŞ
window nesnesi
<html>
<body>
<script language="JavaScript">
var mPencere;
function yeniPencere() {
mPencere = open("","BosPencere");
}
function kapatPencere() {
pencere.close();
}
function boskapatPencere() {
if(mPencere.closed != true) mPencere.close();
125
Musa ÇAVUŞ
}
function init() {
mPencere = open("","BosPencere");
mPencere.close();
}
</script>
<body onLoad=init()>
<table border="4">
<form name="f1">
<tr><td>Metin</td>
<td><input type="button" value="OK"
onClick='window.open("metin.txt","MetinPencere")' /></td></tr>
<tr><td>Grafik</td>
<td> <input type="button" value="OK"
onClick='self.open("yeliz.jpg","ResimPencere")' /></td></tr>
<tr><td>Yeni bir HTML sayfasi</td>
<td><input type="button" value="OK"
onClick='self.open("clientfe.html","ClientPencere")' /></td></tr>
<tr><td>Ayni dosya ayni pencerede</td>
<td><input type="button" value="OK"
onClick='self.open("pencere1.html","AyniPencere")' /></td></tr>
<tr><td>Bos pencere ac</td>
<td><input type="button" value="OK" onClick="yeniPencere()" /></td></tr>
<tr><td><input type="button" value="BosPencereKapat"
onClick="boskapatPencere()" /></td>
<td><input type="button" value="AnaPencereKapat"
onClick="window.close()" /></td></tr>
</form>
</table>
</body>
</html>
pencere1.html
126
Musa ÇAVUŞ
Şekil84
<html>
<script language="JavaScript">
function f1() {
open("metin.txt", "f1", "width=600, height=250, resizable=yes,"
+ " directories=yes, menubar=yes, location=yes");
}
function f2() {
open("ucak.jpg", "f2", "width=600, height=250, resizable=no, "
+ " directories=no, menubar=no, location=no");
}
</script>
<body>
<a href="javascript:f1()">Metin</a>
<br />
<a href="javascript:f2()">Resim</a>
</body>
</html>
pencere2.html
Şekil85
<html>
<body>
<form name="meinFormular">
<input type="button" value="moveBy" onClick='moveBy(120, 50)' />
<input type="button" value="moveTo" onClick='moveTo(200, 200)' />
<input type="button" value="resizeBy" onClick='resizeBy(200, 200)' />
<input type="button" value="resizeTo" onClick='resizeTo(100, 200)' />
<input type="button" value="Gule gule" onClick='setTimeout("self.close()",
"1000")' />
</form>
</body>
</html>
pencere3.html
129
Musa ÇAVUŞ
Şekil86
location ve history
<html>
<body>
<a href="javascript:window.location.href='http://www.musa-
cavus.com'">Tikla</a>
</body>
</html>
location.html
130
Musa ÇAVUŞ
Şekil86
<html>
<body>
<a href="javascript:history.back()">geri</a>
</body>
</html>
history.html
5.5 Cookie
Şekil87
<html>
<script language="JavaScript">
132
Musa ÇAVUŞ
function cookieYaz() {
gecerliTarih = new Date(2010, 6, 12, 1, 0, 0);
document.cookie = SetCookie(
"user", document.mF.id.value, gecerliTarih);
document.cookie = SetCookie(
"pw", document.mF.pw.value, gecerliTarih);
}
function cookieOku() {
deger = GetCookie("user");
if(deger != null)
document.mF.id.value=deger;
deger = GetCookie("pw");
if(deger != null)
document.mF.pw.value=deger;
}
</script>
<body onLoad="cookieOku()">
<form name="mF" onSubmit="cookieYaz()">
<table>
<tr>
<td>Kullanici Adi</td>
<td><input name="id"></td>
</tr>
<tr>
<td>Sifre</td>
<td><input name="pw" type="password"></td>
</tr>
<tr>
<td><input type="Submit" value="Ok"></td>
<td><input type="reset" value="Iptal"></td>
</tr>
</table>
</form>
</body>
</html>
cookie.html
134
Musa ÇAVUŞ
Şekil88
Daha öncede belirttiğim gibi JavaScript nesnelere dayalı bir programlama dili
değildir. Yalnız bir yöntemle JavaScript’te sınıflar yazabiliriz. Bu sınıflardan
bazı kısıtlamalarda olsa nesneler oluşturabiliriz. Önce bir kurucu metot
yazıyoruz ve kurucu metot ile ile oluşturduğumuzu new anahtar kelimesiyle bir
nesne haline dönüştürüyoruz.
<html>
<body>
<script language="Javascript">
function konus(cumle) {
document.write(cumle + "<br />");
}
// Kurucu metot
function Insan(yas, ad) {
this.yas = yas;
this.ad = ad;
this.konus = konus;
}
//Nesne olusumu
aile = new Array();
aile["baba"] = new Insan(40,"Hasan");
aile["anne"] = new Insan(34,"Seyhan");
aile["ogul1"] = new Insan(4,"Tuncay");
aile["ogul2"] = new Insan(3,"Fikret");
document.write(aile["anne"].ad + ": ");
aile["anne"].konus("Yemek hazir");
document.write(aile["baba"].ad + ": ");
aile["baba"].konus("Oglen yemegi mi?");
136
Musa ÇAVUŞ
Şekil89
Kurucu metotlar, birçok programlama dilinde büyük harfle başladığı için bende
büyük harfle başladım, fakat JavaScript’te istediğinizi yapmakla özgürsünüz.
Kurucu metotları normal fonksiyonlardan ayırmakta this anahtar kelimesinin
rolü büyüktür. this, oluşturacağımız nesnenin göstergesidir. Kurucu metodunda
kullanılan this anahtar kelimesinden sonraki değişkenler oluşturulacak nesnenin
özellikleridir. Örneğimizdeki Insan kurucu metodun yas, ad ve konus gibi
özellikleri vardır. Đlginç olan konus fonksiyonunu normal bir değişkenmiş gibi
atama yapabilmemizdir. konus() fonksiyonu parametresiz atandığı için konus
değişkeni konus() fonksiyonunun bir göstergesi olarak atanmaktadır. Kurucu
metot ile Insan adında bir sınıfın yas değişkeni, ad değişkeni ve konus
metodunu oluşturmuş oldum.
Örneğe devam bakarsak, Array sınıfından bir aile nesnesi oluşturdum. aile
değişkeninden sonraki kullandığım köşeli parantezlere farklı olarakString
değerleri atadım. Array sınıfı bize bu fırsatı sunmaktadır. Daha sonra her bir
aile ferdine new anahtar kelimesiyle bir Insan nesnesini oluşturdum ve atadım.
137
Musa ÇAVUŞ
JavaScript’te kalıtım yoktur ama protyping vardır. Daha önce oluşturulmuş bir
nesneye biz metodlar ya da değişkenler ekleyebiliyoruz.
<html>
<body>
<script language="Javascript">
function konus(cumle) {
document.write(cumle + "<br />");
}
// Kurucu metot
function Insan(yas, ad) {
this.yas = yas;
this.ad = ad;
this.konus = konus;
}
//Nesne olusumu
familie = new Array();
familie["baba"] = new Insan(40,"Hasan");
familie["anne"] = new Insan(34,"Seyhan");
familie["ogul1"] = new Insan(4,"Tuncay");
familie["ogul2"] = new Insan(3,"Fikret");
document.write(familie["anne"].ad + ": ");
familie["anne"].konus("Yemek hazir");
document.write(familie["baba"].ad + ": ");
familie["baba"].konus("Oglen yemegi mi?");
document.write(familie["ogul1"].ad + ": ");
familie["ogul1"].konus("Ben Cola icerbilir miyim?");
document.write(familie["baba"].ad + ": ");
familie["baba"].konus("Sen kac yasindasin?");
document.write(familie["ogul1"].ad + ": ");
Insan.prototype.adres="Istanbul";
familie["ogul1"].konus("Benim dogum yerim "+familie["ogul1"].adres);
</script>
</body>
</html>
138
Musa ÇAVUŞ
nesneoluşumu2.html
Şekil90
Bir önceki örnekle bu örneğin tek farkı Insan kurucu metodundan sonra
prototype adlı bir tanımlamanın kullanılmasıdır. prototype tanımlamasından
sonra yaptığımız tanımlama Insan nesnelerine eklenmektedir. Bu işlemi
JavaScript’in standart sınıflarında uygulayabilirsiniz.
139
Musa ÇAVUŞ
Bölüm 6
Đstisnalar ve Event kullanımı
140
Musa ÇAVUŞ
try ve catch
Hatalar sadece geriye dönen değerlere göre hata vermezler, ayrıca kodu kontrol
ederler ve oluşan hatalar sonucu programı farklı bir program bloguna
yönlendirilir. Diyelim ki, programınızda bir matematiksel işlem
gerçekleştirmekteyiz:
<html>
<script language="Javascript">
try {
document.write(eval("15 * 5") + "<br />");
document.write(eval("a * b") + "<br />");
document.write(
"try blogun icerisinde")
}
catch(EvalError) {
alert(EvalError.toString());
}
document.write("hata olusmasina ragmen yazi cikiyor");
</script>
</html>
istisna1.html
Şekil91
141
Musa ÇAVUŞ
Şekil92
try, Türkçe dene demek. catch kelimesi de, yakala anlamını taşımaktadır. try
bloğu içerisinde olan kod önce bir deneniyor, eğer her hangi bir noktada hata
oluşuyorsa o noktadan sonra catch bloğuna geçiliyor ve catch bloğundaki
satırlar işlem görüyor. eval fonksiyonu çarpma işlemini gerçekleştirmektedir. 15
* 5 işleminde bir sorun çıkmamaktadır fakat a * b denilince JavaScript hata
vermektedir ve catch bloğuna geçilmektedir. catch bloğundaki satırlar
işlendikten sonra o bloktan çıkılmaktadır ve program devam etmektedir. try-
catch bloğu olmasaydı program hata verilen yerde duracaktı. catch bloğuna
bakarsanız EvalError yazıyor. Buna göre try bloğu içerisinde EvalError hatasını
oluşturan tüm işlemler bu catch bloğuna düşmektedir.EvalError yerine sadece
Error yazsazdık, tüm hatalarda bu bloktaki işlemler gerçekleşecekti.
<html>
<script language="JavaScript">
function mesaj() {
alert("Dugmeye tiklandi");
}
</script>
<body>
<form name="f1">
<input type="button" name="b1" value="OK" />
142
Musa ÇAVUŞ
</form>
<script language="JavaScript">
document.f1.b1.onclick = mesaj ;
</script>
</body
</html>
event1.html
Şekil93
Şekil94
<html>
<script language="JavaScript">
window.onkeypress = dugme;
function dugme(ev) {
document.getElementById("cevap").innerHTML = ev.which;
}
</script>
<body>
<h1>Bir dugmeye basin</h1>
<span id="cevap"></span>
</body>
</html>
event2.html
Şekil95
<html>
<style>
*{
background-color : green;
color : yellow;
}
#cevap {
position:absolute;
left:0px;
top:0px;
background-color:red;
color:yellow;
}
</style>
<script language="JavaScript">
function pozisyon(ev) {
var text ="";
text += "Pencereye koordinatlar (pageX, pageY): "
+ ev.pageX + ", " + ev.pageY + ".<br />";
text += "Ekrana gore koordinatlar (screenX, screenY): "
+ ev.screenX + ", " + ev.screenY + ".<br />";
text += "Klavye ve fare kodu (which): "
+ ev.which+ ".<br />";
text += "Olay tipi (type): " + ev.type + ".<br />";
document.getElementById("cevap").style.width=450;
document.getElementById("cevap").style.left = ev.pageX;
document.getElementById("cevap").style.top = ev.pageY;
document.getElementById("cevap").innerHTML = text ;
}
document.onmouseup = pozisyon;
</script>
<body>
<h1>Lutfen tiklayin</h1>
145
Musa ÇAVUŞ
<div id="cevap"></div>
</body>
</html>
degerlendirme.html
Şekil96
Böylelikle JavaScript bölümü bitmiş oldu. Đnanıyorum ki artık iyi bir JavaScript
programcısı oldunuz. JavaScript’in her şeyini belki bilmiyorsunuzdur fakat
piyasada kullanılan yöntemlerin çoğuna hâkim durumundasınız. Bu bölümden
sonra AJAX konusuna değineceğim
147
Musa ÇAVUŞ
Bölüm 7
AJAX
148
Musa ÇAVUŞ
<html>
<script language="Javascript" src="sehirler.js"></script>
<body>
<br>
<form name="f">
<select name="sehir" size="1" onclick="yolla()">
<option>Adana</option>
<option>Balikesir</option>
<option>Bursa</option>
<option>Edirne</option>
<option>Giresun</option>
<option>Hatay</option>
<option>Kayseri</option>
<option>Konya</option>
<option>Manisa</option>
<option>Nigde</option>
<option>Ordu</option>
<option>Rize</option>
<option>Sivas</option>
<option>Urfa</option>
<option>Yozgat</option>
<option>Zonguldak</option>
149
Musa ÇAVUŞ
</select>
</form>
<br>
<div id="sc"></div>
</body>
</html>
sehirler.html
Şekil97
function yolla() {
alert("merhaba");
150
Musa ÇAVUŞ
}
sehirler.js
Şekil98
yolla fonksiyonunu basit tuttum, siz seçme kutusunda her hangi bir şey
seçerseniz ekrana merhaba mesajı gelecektir.
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne= new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function yolla() {
alert("merhaba");
}
sehirler.html
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function yolla() {
alert("merhaba");
for(i = 1; i <= 16; i++) {
if(this.document.f.sehir.options[i - 1].selected) {
resNesne.open('get', 'sehir.php?nerede=' + i,true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
break;
}
}
}
function handleResponse(){
if(resNesne.readyState == 4) {
document.getElementById("sc").innerHTML = resNesne.responseText;
}
}
sehirler.html
PHP örneğini çok kısa ve anlaşılır tutmaya çalıştım, kitabın konusu PHP
olmadığı için PHP anlatmayacağım. PHP örneklerini, AJAX örneklerini
anlamanız için vermekteyim. Neden PHP anlatılmadı da, CSS, HTML, XHTML
gibi teknolojilere değinildi diyebilirsiniz. Bunun nedeni bu teknolojileri PHP
gibi Server tarafında çalışan teknolojiler olmaması ve AJAX’ın birer parçaları
olmasında yatıyor. AJAX’ın en büyük avantajlarından birisi, Server tarafında
hangi program çalışırsa çalışsın, AJAX için Server’dan alacağı bilgi önemlidir.
<?
echo "Bilgilendirme:";
switch($_REQUEST['nerede']) {
case 1: echo "Bir sehir"; break;
case 2: echo "Bir sehir"; break;
case 3: echo "Sehir degil"; break;
case 4: echo "Bir sehir"; break;
case 5: echo "Bir sehir"; break;
case 6: echo "Sehir degil"; break;
case 7: echo "Bir sehir"; break;
case 8: echo "Bir sehir"; break;
case 9: echo "Sehir degil"; break;
case 10: echo "Bir sehir"; break;
case 11: echo "Bir sehir"; break;
case 12: echo "Bir sehir"; break;
case 13: echo "Bir sehir"; break;
case 14: echo "Sehir degil"; break;
case 15: echo "Bir sehir"; break;
153
Musa ÇAVUŞ
XAMPP
Şekil99
Şekil100
Şekil101
Şekil102
Şekil103
Eğer buna benzer bir sayfa ile karşılaştıysanız XAMPP kurulumu başarıyla
sağlanmıştır. sehirler.html, sehirler.js ve sehir php dosyalarını XAMPP
dizininde bulunan htdocs dizininde ajax/sehirler dizini oluşturarak buraya
kopyalıyorum.
Şekil104
159
Musa ÇAVUŞ
Şekil105
<html>
<head>
<title>Resim bilgileri</title>
<script language="JavaScript" src="resim.js"></script>
</head>
<body>
<img src="elma.jpg" width="300" onmouseover="sndReq(1)"
onmouseout="bos()">
<br>
<img src="armut.jpg" alt="" onmouseover="sndReq(2)"
onmouseout="bos()" />
<div id="bilgi"></div>
160
Musa ÇAVUŞ
</body>
</html>
resim.html
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function sndReq(transfer) {
if (transfer == "1") {
resNesne.open('get', 'bilgi1.txt', true);
}
else {
resNesne.open('get', 'bilgi2.txt', true);
}
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse(){
if(resNesne.readyState == 4) {
document.getElementById("bilgi").innerHTML = resNesne.responseText;
}
}
function bos(){
document.getElementById("bos").innerHTML = "";
}
resim.js
elma
bilgi1.txt
armut
161
Musa ÇAVUŞ
bilgi2.txt
Şekil106
resim.html dosyasına tıkladığımda tarayıcı bana iki resim gösteriyor ve ben fare
ile elma resminin üzerine gelince aşağıda elma yazıyor. Armut yazan resime
geldiğimde armut yazıyor. Herhangi bir dizinden resim.html’yi
çalıştırabilirsiniz, PHP gibi bir dil kullanmadığım için AJAX verdiğim metin
dosyasında yazanı cevap olarak algılıyor.
Web Form’ları
AJAX ile Web Server’ine iletilen bilgilerin geri alınması, Web Form’larından
bilgilerin iletilmesi ve geri alınmasına çok benziyor. Bu bölümde AJAX ile
Web Form’larıyla nasıl kombine edildiğini göstereceğim. Form’lara daha önce
değinmiştim ve gerekli konularda açıklamalarda getirdim. Şimdiye kadar bir
Form kullanırken bilgileri Server’e nasıl yollarız buna değinmedim. Hazırlanan
Form’daki bilgilerin hangi Server’e gideceğini <form> tagındaki action
parametresinde belirtiyoruz. Form bilgileri buraya vereceğimiz adrese
gönderilecektir. method parametreside bilgilerin hangi yöntemle
gönderileceğine işarettir. get değerini koyarsak Form sayfasında belli
büyüklükteki bilgileri yollayabiliriz ve yollanan bilgiler genelde adres kısmında
162
Musa ÇAVUŞ
gözükür. post değeri ise öyle değildir, daha büyük kapasiteli bilgiler
yollayabilirsiniz ve yollanan bilgiler açık olarak gösterilmez. Form bilgilerin
yollanması için <input> tagının type parametresinde submit yazması gerekiyor.
Bunu kodladığınızda tarayıcınızda bir düğme belirecektir. Düğmenin görevi,
basıldığında Form’daki bilgileri <form> tagındaki action parametresinde
belirtilen adrese yollaması olacaktır.
<html>
<head>
<title>login</title>
</head>
<body>
<form action="login.php" method="get">
<input type="text" name="kullaniciadi"> <br />
<input type="password" name="sifre"><br />
<p><input type="submit" value="Tamam" /></p>
</form>
</body>
</html>
login.html
<?
if(("ahmet" == $_GET['kullaniciadi']) && ("mahmut" == $_GET['sifre'])) {
echo "<h3>Sifreyi bildin aferin</h3>";
}
else {
echo "<h3>Giris bilgilerinizde bir yanlislik var.</h3>";
}
?>
login.php
163
Musa ÇAVUŞ
Şekil107
<html>
<head>
164
Musa ÇAVUŞ
<title>login</title>
<script language="JavaScript" src="login.js"></script>
</head>
<body>
<form name="f">
<input type="text" name="kullaniciadi"> <br />
<input type="password" name="sifre"><br />
<p><input type="button" value="Tamam" onclick="yolla()"/></p>
</form>
<div id="sc"></div>
</body>
</html>
login.html
var resNesne;
if(navigator.appName.search("Microsoft") > -1){
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
resNesne = new XMLHttpRequest();
}
function yolla() {
resNesne.open('get', 'login.php?kullaniciadi=' +
document.f.kullaniciadi.value+
'&sifre='+document.f.sifre.value,true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse(){
if(resNesne.readyState == 4) {
document.getElementById("sc").innerHTML = resNesne.responseText;
}
}
login.js
165
Musa ÇAVUŞ
Şekil108
Ajax ve CSS
Daha önce CSS’e bir giriş yapmıştım ve önemli konulara değinmiştim. Şimdi
CSS ile AJAX’ı kombine ederek avantajlarını göstereceğim. Şimdiye kadar
yaptığım AJAX uygulamaları çalışıyordu fakat canlılık yoktu. Kullanacağımız
CSS ile bu uygulamalar hem canlılık kazanacak hemde CSS AJAX’a neler
katıyor bunu görmüş olacaksınız. Bunu görebilmek için bir örnek daha önce
166
Musa ÇAVUŞ
<html>
<head>
<title>Resim bilgileri</title>
<script language="JavaScript" src="resimcss.js"></script>
<link href="resim.css" type="text/css" rel="stylesheet" />
</head>
<body>
<img id="resim1" src="elma.jpg" width="300"
onmouseover="sndReq(1)" onmouseout="bos()">
<br>
<img id="resim2" src="armut.jpg" alt=""
onmouseover="sndReq(2)" onmouseout="bos()" />
<div id="bilgi"></div>
</body>
</html>
resimcss.html
body {
background:#dddddd;
font-size:14px;
}
#resim1{
position:absolute;
top:100px;
left:100px;
}
#resim2{
position:absolute;
top:100px;
left:400px;
}
#bilgi{
position:absolute;
top:50px;
167
Musa ÇAVUŞ
left:450px;
color:red;
border:solid;
border-width:1pt;
width:200px;
height:30px;
}
resim.css
Şekil109
Hadi bakalım bu bölüde hayırlısıyla bitirdik. Darısı diğer bölümlerin başına
168
Musa ÇAVUŞ
Bölüm 8
HTTP ve XMLHttpRequest
169
Musa ÇAVUŞ
<html>
<head>
<title>HTTP Degerlendirmesi</title>
<script language="JavaScript"
src="xmlhttprequestobjekt.js"></script>
<script language="JavaScript" src="httprequest.js"></script>
<script language="JavaScript">
window.document.onclick = sndReq;
</script>
<link href="httprequest.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Sayfaya tiklayin</h1>
<div id="cevap">
<h3>Server cevabi</h3>
<div id="bilgi"></div>
</div>
</body>
</html>
httprequest.html
body {
background:#dddddd;
font-size:14px;
font-family:"Engravers MT";
color:#1111ee;
}
170
Musa ÇAVUŞ
h1{
font-size:24px;
text-align:center;
}
h2{
font-size:20px;
}
h3{
font-size:18px;
}
h4{
font-size:16px;
}
#cevap{
position:absolute;
top:80px;
left:250px;
width:550px;
height:320px;
border:solid;
border-width:1pt;
text-align:justify;
background:blue;
color:white;
}
httprequest.css
function olsXMLHttpRequestObject(){
var resNesne = null;
try {
resNesne = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
171
Musa ÇAVUŞ
try {
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error){
try {
resNesne = new XMLHttpRequest();
}
catch(Error){
alert(
"XMLHttpRequest-Nesnesi olusturulamiyor");
}
}
}
return resNesne;
}
function OlusturAJAXObjekt(){
this.olsXMLHttpRequestObject = olsXMLHttpRequestObject;
}
o = new OlusturAJAXObjekt();
resNesne = o.olsXMLHttpRequestObject();
xmlhttprequestobjekt.js
function sndReq() {
resNesne.open('get', 'httprequest.php',true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("bilgi").innerHTML =
resNesne.responseText +
"<br>Transfer durumu: " + resNesne.readyState +
"<br>Durum: " + resNesne.status +
172
Musa ÇAVUŞ
<?
?>
httprequest.php
173
Musa ÇAVUŞ
Şekil110
AJAX sorgulaması
Bölim 9
DHTML ve AJAX
176
Musa ÇAVUŞ
<html>
<head>
<title>Resimleri yukleme/title>
<script language="JavaScript"
src="xmlhttprequestobjekt.js"></script>
<script language="JavaScript" src="dhtml1.js"></script>
<link href="dhtml.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Server'deki resimler</h1>
<div id="resim1">Resim 1</div>
<div id="resim2">Resim 2</div>
<div id="cevap">
<div id="bilgi"></div>
</div>
</body>
<script language="JavaScript" src="olay.js"></script>
</html>
dhtml1.html
function kaydet(){
if (document.addEventListener){
document.getElementById("resim1").onmouseover = sndReq1;
document.getElementById("resim2").onmouseover = sndReq2;
}
else {
status = "Hata";
}
}
kaydet();
177
Musa ÇAVUŞ
olay.js
body {
background:#dd11dd;
font-size:12px;
font-family:"Times New Roman";
color:#44aa00;
}
h1{
font-size:21px;
text-align:center;
}
h2{
font-size:17px;
}
h3{
font-size:15px;
}
h4{
font-size:13px;
}
#cevap{
position:absolute;
top:50px;
left:50px;
}
#resim1{
position:absolute;
top:50px;
left:650px;
background:yellow;
width:200px;
height:50px;
border:solid;
border-width:1pt;
text-align:center;
font-size:32px;
178
Musa ÇAVUŞ
}
#resim2{
position:absolute;
top:115px;
left:650px;
background:green;
width:200px;
height:50px;
border:solid;
border-width:1pt;
text-align:center;
font-size:32px;
}
dhtml.css
function sndReq1() {
resNesne.open('get','dhtml1.php?&resim=1', true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function sndReq2() {
resNesne.open('get','dhtml1.php?resim=2', true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("bilgi").innerHTML = resNesne.responseText;
}
179
Musa ÇAVUŞ
}
dhtml1.js
<?
if ($_REQUEST['resim'] == 1) {
echo "<img src='domates.jpg' />";
}
else {
echo "<img src='patlican.jpg' />";
}
?>
dhtml1.php
dhtml1.php kodu, gelen resim değerine göre bir <img> tagı yollamaktadır ve
tarayıcı bu tagı resım id’li <div> tagında göstermektedir. Normalde bu
mantıktaki işlemleri daha önce yapmıştık, burada kullanılan sistemin bir
bölümünde DHTML vardır, DOM yoluyla işlem görülmektedir.
Şekil111
Windows’ta bir program yükleneceğinde eğer uygulama arka planda bir şeyler
yapıyorsa ön tarafta bir kum saati çıkartıyor. Sıradaki örneğimizide bu şekilde
düşündüm. Diyelim siz bir sorgulama yolluyorsunuz ve kullanıcıyı sıkmamak
için, program arka planda işlem görürken ön tarafta işlem yapıldığını gösteren
bir saat koymak istiyorsunuz:
<html>
<script language="JavaScript" src="image1.js"></script>
<script language="JavaScript">
window.document.onkeypress = sndReq;
</script>
<body>
<h1>Bir tusa basiniz</h1>
<span id="cevap"></span>
<img src="bos.gif" height="30"
style="position:absolute;top:80px;left:400px;">
</body>
</html>
image1.html
<?
sleep(6);
echo "Biraz beklettim, ama manzarayi caktin sanirim?";
?>
image1.php
Şekil112
<html>
<link rel="stylesheet" href="stil1.css" type="text/css">
<script language="JavaScript" src="stil1.js"></script>
<body onClick="sndReq()">
<h1>Sayfaya tiklayin</h1>
<span id="cevap"></span>
<span class="stil1" id="durum">Lutfen bekleyin</span>
</body>
</html>
stil1.html
.stil1 {
color : white;
background-color : blue;
visibility : hidden;
position : absolute;
top : 100px;
left : 500px;
}
stil1.css
183
Musa ÇAVUŞ
resNesne=olsXMLHttpRequestObject();
stil1.js
<?php
sleep(5);
echo "Yine uzun surdu ama manzarayi kesin caktin";
?>
image1.php
Şekil112
<html>
<style type="text/css">
#bilgi {
background-color : blue;
color : white;
border : solid;
}
#P1 {
background-color : blue;
185
Musa ÇAVUŞ
width : 0px;
height : 10px;
position : absolute;
top : 100px;
left : 100px;
}
</style>
<script language="JavaScript" src="xmlhttprequestobjekt.js"></script>
<script language="JavaScript" src="ilerle.js"></script>
<body>
<form>
<input type="button" value="Buraya Bas" onClick="sndReq()" />
</form>
<div id="bilgi"></div>
<div id="P1"></div>
</body>
</html>
ilerle.html
function sndReq() {
resNesne.open('get', 'image1.php?z=' + Math.random(), true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
ilerle();
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("bilgi").innerHTML
= resNesne.responseText;
}
}
i = 0;
function ilerle() {
document.getElementById("P1").style.width = i++;
if(resNesne.readyState != 4)
setTimeout("ilerle()",5);
else {
i = 0;
186
Musa ÇAVUŞ
document.getElementById("P1").style.width = i;
}
}
ilerle.js
Şekil113
187
Musa ÇAVUŞ
Bölüm 10
AJAX ve XML
188
Musa ÇAVUŞ
Tipik bir AJAX uygulmasında üç çeşit veri aktarma şekli vardır. Metin, JSON
ve XML. En az problemi metinler yollarsak en fazla problemi XML ile yaşarız.
Genelde XML teknolojisi, tüm mantığı Client tarafına yüklemek istersek
kullanılır. JSON, metin ve XML veri aktarımlarında ikisinin arasında uyumlu
olan bir teknolojidir. Şimdiye kadar olan veri aktarma şekillerinde normal
metinler kullanmıştık.
10.2 XML
Elementler ve değişkenler
<?xml version="1.0"?>
<eglence tarih="31.12.10">
<misafir isim="Gizemli Kahraman">
<icecek>elma suyu</icecek>
<icecek>portakal suyu</icecek>
<medenidurum bekar="true" utangac="false"/>
</misafir>
</eglence>
eglence.xml
arasında bulunmaktadır.
Tag’ların kullanımı
<icecek>elma suyu</icecek>
Serbest şekildeki isim verme sonucu belirli bir şekilde format verme imkânsız.
HTML gibi belirli sayıda Tag yoktur. XML dokümanı Internet gezginleri
tarafından gösterilmek istenildiği zaman, ek olarak özel yazımlara ihtiyaç
duyarız.
Düzgün XML
Açıklamalar
Başlık tanımlaması
Schema
Schema’lar, XML dosyasının yapısal kavramlarını içerirler. Schema’larda
bir elementin tipi ve içeriği DTD’ye göre daha ayrıntılı ele alınmaktadır.
Geneldeki tipler, string, integer ve double tipleridir. date ve duration gibi
tiplerde bulunmaktadır. Ek olarak kendimizde tip tanımı yapabiliriz.
Schema’larla bir değerin tam sayı mı, kayan noktalı sayı mı, yoksa string mi
olduğunu belirtebiliriz.
<?xml version="1.0"?>
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xsd:complexType name="eglenceTipi">
<xsd:sequence>
<xsd:element name="misafir" type="misafirTipi" />
</xsd:sequence>
<xsd:attribute name="tarih" type="tarihTipi" />
</xsd:complexType>
<xsd:complexType name="misafirTipi">
<xsd:sequence>
<xsd:element name="icecek" type="xsd:string" />
<xsd:element name="medenidurumu"
type="medenidurumuTipi" />
</xsd:sequence>
</xsd:complexType>
<xsd:simpleType name="tarihTipi">
<xsd:restriction base="xsd:string">
<xsd:pattern value="[0–3][0–9].[0–1][0–9].[0–9][0–9]"
/>
</xsd:restriction>
</xsd:simpleType>
<xsd:complexType name="medenidurumuTipi">
<xsd:complexContent>
<xsd:restriction base="xsd:anyType">
<xsd:attribute name="bekar" type="xsd:boolean" />
</xsd:restriction>
</xsd:complexContent>
</xsd:complexType>
</xsd:schema>
eglence2Schema.xsd
Namespace
Farklı XML dosyalarının aynı XML Tag kullanması açısından kargaşalık ortaya
çıkar. Namespace ile bunu engelleyebiliriz. XML dosyasını bir Namespace
ortamına ya da birden fazla Namespace ortamlarına atamak mümkün.
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
xsd ön ek olmuş oluyor, http ile başlayan kısımda URI bölümü olmuş oluyor.
Bu tanımın önüne de <xsd:schema şeklinde bir tanımlama yaptım ki
schema buradaki yerel addır. Ön ek istenilen şekilde seçilebilir, ben xsd seçtim,
siz isminizi seçebilirsiniz.
<dogumgunu:eglence xmlns:dogumgunu="http://www.dogumgunu.com"
dogumgunu:tarih="18.09.77">
<dogumgunu:misafir dogumgunu:ad="Musa Cavus">
193
Musa ÇAVUŞ
</dogumgunu:misafir>
</dogumgunu:eglence>
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
XML hakkında yeterli ön bilgi verdikten sonra bir örnekle AJAX/XML ikilisini
anlatmaya başlamak istiyorum:
<html>
<script language="JavaScript" src="xml.js"></script>
<body onKeyPress="sndReq()">
<h1>Bir tusa basin</h1>
<span id="cevap"></span>
</body>
</html>
xml.html
function olsXMLHttpRequestObject(){
var resNesne = null;
try {
resNesne = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
try {
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(Error){
try {
resNesne = new XMLHttpRequest();
}
catch(Error){
alert("XMLHttpRequest Nesnesi olusturulamadi");
}
}
}
return resNesne;
}
function sndReq() {
resNesne.open('get', 'ad.xml',true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("cevap").innerHTML =
resNesne.responseXML.getElementsByTagName("ad")[1].firstChild.
data;
}
}
resNesne = olsXMLHttpRequestObject();
xml.js
195
Musa ÇAVUŞ
Şekil114
<html>
<link rel="stylesheet" href="ad.css" type="text/css">
<script language="JavaScript" src="ad.js"></script>
<body onKeyPress="sndReq()">
<h1>Bir tusa basiniz</h1>
<span id="cevap"></span>
</body>
</html>
ad.html
db {
background-color : green;
}
ds {
196
Musa ÇAVUŞ
background-color : yellow;
display : block;
width : 400px;
}
ad {
color : red;
}
ad.css
function olsXMLHttpRequestObject(){
var resNesne = null;
try {
resNesne = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(Error){
try {
resNesne = new ActiveXObject("MSXML2.XMLHTTP");
197
Musa ÇAVUŞ
}
catch(Error){
try {
resNesne = new XMLHttpRequest();
}
catch(Error){
alert("XMLHttpRequest Nesnesi olusturulamadi");
}
}
}
return resNesne;
}
function sndReq() {
resNesne.open('get', 'ad.xml',true);
resNesne.onreadystatechange = handleResponse;
resNesne.send(null);
}
function handleResponse() {
if(resNesne.readyState == 4){
document.getElementById("cevap").innerHTML = "Cevap:<br>"
+ resNesne.responseText;
}
}
resNesne = olsXMLHttpRequestObject();
ad.js
Şekil115
199
Musa ÇAVUŞ
Bölüm 11
jQuery ve jQuery UI
200
Musa ÇAVUŞ
11.1 jQuery
jQuery diline, jQuery’nin kendi web sayfasıyla başlamak istiyorum. Web adresi
http://jquery.com
Şekil116
Şekil117
Şekil118
Şekil119
204
Musa ÇAVUŞ
<html>
<head>
<title>Ilk jQuery Ornegi</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("#b1").click(
function() {
alert('Merhaba');
}
);
}
);
</script>
</head>
<body>
<h1>Dugmeyi tikla</h1>
<button id="b1">Tikla beni</button>
</body>
</html>
jquery1.html
205
Musa ÇAVUŞ
Şekil120
<html>
<head>
<script src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
alert('Merhaba');
});
$("#b2").click(function(){
alert('Tesekkurler');
});
$("#b3").click(function(){
alert('Iyi misin?');
});
});
</script>
</head>
<body>
<h1>Dugmeyi tikla</h1>
<button id="b1">
Bana tikla
</button>
<button id="b2">
Benide tikla
</button>
<button id="b3">
Bende varim
</button>
</body>
</html>
jquery2.html
207
Musa ÇAVUŞ
Şekil121
jQuery ile yaptığım iş çok basıt, ilk örnekteki jQuery kod bölümünü üç kere
kopyaladım ve oluşturduğum üç düğmeye bağladım.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<style type="text/css">
.cssSinif {
background: green;
font-size: 37px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#a").click(function(event){
$("#e").addClass("cssSinif");
});
$("#b").click(function(event){
$("#e").removeClass("cssSinif");
});
208
Musa ÇAVUŞ
$("#c").click(function(event){
$("#e").hide("slow");
});
$("#d").click(function(event){
$("#e").show("fast");
});
});
</script>
</head>
<body>
<h1>jQuery ile Web Sayfasi</h1>
<button id="a">
CSS-Sinifi ekle
</button>
<button id="b">
CSS-Sinifi kaldir
</button>
<button id="c">
Gizle
</button>
<button id="d">
Goster
</button>
<hr/>
<div id="e">
Bu dunya bizim kirletmeyelim
</div>
<hr/>
</body>
</html>
index.html
209
Musa ÇAVUŞ
Şekil122
Đlk iki örnekten farklı olarak jQuery ile <div> tagıyla bağlantıya geçtim. $
işaretini kullanarak aynı metotla erişim sağladım. 4 tane farklı metot
görüyorsunuz. Bunlar animasyon metotlarıdır ve DHTML özelliği taşırlar.
addClass() metodu, parametrede verilen sınıfı ekler. Bundan dolayı “Bu dunya
bizim kirletmeyelim” yazısı CSS sınıfında verilen özelliği yansıtır.
removeClass() metodu ekledğimiz CSS sınıfını siler. Hide() metodu gösterilen
<div> tagındaki yazıyı parametredeki değere göre saklar. hide parametresi,
yavaş sakla anlamını taşır. show() metodu yazıyı parametredeki ifadeye göre
gösterir. fast burada hızlı anlamını taşır.
Firebug
Şekil122
Sağ alt köşede bir böcek resmi göreceksiniz. Onun üzerine bir tıklayın, sakın
sinek minek varsa onun üzerine tıklamayın, buradaki böcekten kastım
Firefox’ta bir böcek sembolü var ona tıklayın:
211
Musa ÇAVUŞ
Şekil23
CSS-Sinifi ekle düğmesine basılınca <div> tagın nasıl değiştiğine bir bakın:
<html>
<head>
<title>Resim buyultme kucultme</title>
<script type="text/javascript" src="jquery-1.4.2.js">
212
Musa ÇAVUŞ
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#toggle1").click(function(event){
$('#b1').slideToggle('slow');
});
$("#toggle2").click(function(event){
$('#h2').slideToggle('slow');
});
});
</script>
</head>
<body>
<h1 id="u1">jQuery ile Resim buyultme kucultme</h1>
<button id="toggle1">
Toogle Resim
</button>
<button id="toggle2">
Toogle Yazi
</button>
<br/>
<img src="resim1.jpg" id="b1" />
<br/>
<h2 id="h2">Acayip birsey bu ya.</h2>
</body>
</html>
resimbuyultkucult.html
213
Musa ÇAVUŞ
Şekil124
$('#b1').slideToggle('slow').slideToggle('fast').hide('slow');
Bir tagı başka bir tak bilgisiyle kuşaltmak istiyorsam wrap() metodunu
kullanırız. wrap() metodunun nasıl çalıştığını Firebug ile daha güzel
anlayacağız.
<html>
214
Musa ÇAVUŞ
<head>
<title>Kusat</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#metin1").click(function(event){
$('#metin1’).wrap("<div style='background:green'></div>");
});
});
</script>
</head>
<body>
<h1>Elementi kusalt</h1>
<span id="metin1"/>Ben kusatilacagim</span>
</body>
</html>
kusat.html
Şekil124
215
Musa ÇAVUŞ
<html>
<head>
<body>
<h1>Elementi kusalt</h1>
<span id=”metin1”> Ben kusatilacagim</span>
</body>
</html>
<html>
<head>
<body>
<h1>Elementi kusalt</h1>
<div style=”background: none repeat scroll 0% 0% green;”>
<span id=”metin1”> Ben kusatilacagim</span>
</div>
</body>
</html>
Ek olarak style parametresine bir kaç kod daha ilave edilmektedir fakat bizim
isteğimiz dışında bir görüntü olmayacaktır.
<html>
<head>
<title>Parametre</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#toggle1").click(function(){
$("img").attr({
216
Musa ÇAVUŞ
src: "r1.jpg"
});
});
$("#toggle2").click(function(){
$("img").attr({
src: "r2.jpg"
});
});
$("#toggle3").click(function(){
$("img").attr({
width: "300"
});
});
$("#toggle4").click(function(){
$("img").attr({
width: "100"
});
});
});
</script>
</head>
<body>
<button id="toggle1">
Resim 1
</button>
<button id="toggle2">
Resim 2
</button>
<button id="toggle3">
Buyuk
</button>
<button id="toggle4">
Kucuk
</button>
<hr/><img/>
</body>
</html>
parametredegiskligi.html
217
Musa ÇAVUŞ
Şekil125
<html>
<head>
<title>CSS</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$("document").ready(function(){
$("h1:eq(1)").css({
background:"yellow",
color:"white",
textAlign:"center"
});
$("h2").css({
background:"black",
color:"red",
textAlign:"center"
});
});
</script>
</head>
<body>
<h1>Birinci satir</h1>
<h1>Ikinci satir</h1>
<h1>Ucuncu satir</h1>
<h1>Dorduncu satir</h1>
<h2>ve</h2>
<h1>Besinci satir</h1>
</body>
</html>
css.html
219
Musa ÇAVUŞ
Şekil126
Bölüm 12
jQuery Temel Bilgisi
221
Musa ÇAVUŞ
<html>
<head>
<title>Nesne olusumu</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
var x = {
ad:"Perihan",
yas:12,
konus:function(){
alert("Zipla");
}
};
alert(x.yas);
x.konus();
</script>
</head>
<body>
<h1>Nesneleri blok halinde olusturma islemi</h1>
</body>
</html>
bloknesneolusumu.html
222
Musa ÇAVUŞ
Şekil127
$("document").ready(function(){
$("h1:eq(1)").css({
background:"yellow",
color:"white",
textAlign:"center"
});
css() metoduna verilen parametre bir nesneden başka bir şey değil. Kıyaslamak
açısından kurucu metodu kullanarak ve blok sistemiyle iki nesne oluşturmak
istiyorum:
<html>
<head>
<title>Nesne Erisimi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
function Kisi(ad, yas){
this.ad = ad;
this.yas = yas;
};
var x = {
223
Musa ÇAVUŞ
ad: "Burhan",
yas: 43
};
var y = new Kisi("Fevziye", 56);
alert(x["yas"]);
alert(y["ad"]);
</script>
</head>
<body>
<h1>Nesne bolumlerine erisim</h1>
</body>
</html>
nesneerisimi.html
Şekil128
<html>
<head>
<title>Fonksiyon cagirma</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
function cikti(){
$("#cikti").html("fonksiyon cikti()");
}
$(document).ready(function(){
// cikti();
$("#b1").click(cikti);
});
</script>
</head>
<body>
<h1>Fonksiyon cagirma</h1>
<button id="b1">
Tikla
</button>
<div id="cikti">
</div>
</body>
</html>
fonksiyon.html
225
Musa ÇAVUŞ
Şekil129
Callback ve iç fonksiyonlar
<html>
<head>
<title>Callback</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>Callback</title>
<script type="text/javascript">
function benimFonksiyon(icerik){
$("#cikti").html(icerik);
}
function getText(metin){
226
Musa ÇAVUŞ
return function(){
benimFonksiyon(metin);
};
}
$(document).ready(function(){
$("#b1").click(getText("Ormanlik"));
$("#b2").click(getText("Gul bahcesi"));
});
</script>
</head>
<body>
<h1>Callback</h1>
<button id="b1">
Tikla
</button>
<button id="b2">
Tikla
</button>
<div id="cikti">
</div>
</body>
</html>
callback.html
Şekil130
queue() ve dequeue()
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>jQuery ile animasyon</title>
<script type="text/javascript">
$(document).ready(function(){
$("*").css({
background: "#ecaae2",
color: "#1e1e1e"
});
$("#resim1").css({
position: "absolute",
left: "20px",
top: "160px"
});
$("#resim2").css({
position: "absolute",
left: "450px",
top: "60px"
});
$("#b1").click(function(){
$("#resim1").animate({
left: '+=200px'
}, 2000);
$("#resim1").animate({
top: '300px'
}, 600);
$("#resim1").slideUp("slow");
$("#resim1").slideDown("slow");
228
Musa ÇAVUŞ
$("#resim1").animate({
left: '20px',
top: '160px'
}, 700);
});
$("#b2").click(function(){
$("#resim2").animate({
left: '+=200px'
}, 2000).animate({
top: '300px'
}, 600).slideUp("slow").slideDown("slow").animate({
left: '400px',
top: '60px'
}, 700);
});
});
</script>
</head>
<body>
<h1>jQuery ile animasyon</h1>
<img src="resim1.jpg" id="resim1" style=""/>
<img src="resim2.jpg" id="resim2"
style="position:absolute;left:20px;top:60px"/>
<button id="b1">
Tikla
</button>
<button id="b2">
Tikla
</button>
</body>
</html>
animasyon.html
229
Musa ÇAVUŞ
Şekil131
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>queue() ve dequeue()</title>
<script type="text/javascript">
$(document).ready(function(){
$("*").css({
background: "#ab1b52",
color: "#1e1e1e"
});
$("#resim1").css({
230
Musa ÇAVUŞ
position:"absolute",
left:"20px",
top:"160px"
});
$("#resim2").css({
position:"absolute",
left:"450px",
top:"60px"
});
$("#resim1").queue(function(){
$(this).slideUp("slow");
$(this).slideDown("slow");
});
$("#resim1").queue(function(){
$(this).fadeOut("slow");
$(this).fadeIn("slow");
});
$("#resim2").queue(function(){
$(this).fadeOut("slow");
$(this).fadeIn("slow");
});
$("#b1").click(function(){
$("#resim1").dequeue();
});
$("#b2").click(function(){
$("#resim2").dequeue();
});
});
</script>
</head>
<body>
<h1>jQuery ile animasyon</h1>
<img src="resim1.jpg" id="resim1" style=""/>
<img src="resim2.jpg" id="resim2" />
<button id="b1">
Tikla
</button>
<button id="b2">
Tikla
231
Musa ÇAVUŞ
</button>
</body>
</html>
kuyruk.html
Şekil132
12.3 Diziler
Diziler, ayni verileri kayıt ederlerse çok avantajlıdır. Dizilerdeki özellik, bir
isim ve bir belirteç ile dizi içerisindeki değerlere ulaşabilmemizdedir. Đsimden
sonra köşeli parantez içerisine belirteçle koyarak bunu yapabiliriz. new Array()
olarak nasıl bir dizi oluşturduğumuzu JavaScript bölümlerinde gösterdim.
Başka bir usül ise eşittir işaretinden sonra köşeli parantez kullanmaktır.
232
Musa ÇAVUŞ
<html>
<head>
<title>Dizi olusumu</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var a = new Array();
var b = [5, 89, 43, 33];
alert(a.length);
alert(b.length);
});
</script>
</head>
<body>
</body>
</html>
diziolusumu.html
Şekli133
Dizilere erişim
<html>
<head>
233
Musa ÇAVUŞ
<title>Dizi erisim</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
var sayilar = new Array();
var sayicek = [1, 2, 3, 4, 5, 6, 7];
$(document).ready(function(){
for (i = 0; i < 7; i++) {
sayilar[i] = Math.round(1 + Math.random() * 148);
}
for (i in sayilar) {
$("#cikti").append("Sayi " + sayicek[i] + ": ");
$("#cikti").append(sayilar[i] + "<br>");
}
});
</script>
</head>
<body>
<h1>Sayilar</h1>
<div id="cikti">
</div>
</body>
</html>
dizierisim.html
Şekil134
234
Musa ÇAVUŞ
each()
<html>
<head>
<title>each()</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
function isim() {
this.yas = 15;
this.ad = "Tarik";
}
var sayi=[1,2,3,5,7,11,13,17,19,23,29];
var kisi = new isim();
$(document).ready(function(){
jQuery.each(sayi,function(belirtec,value){
$("#cikti1").append((belirtec + 1),". Sayi: ", value,
"<br />");
});
jQuery.each(kisi,function(belirtec,value){
$("#cikti2").append("Belirtec: ", belirtec,", Deger: ",
value, "<br />");
});
});
</script>
</head>
<body>
<h1>Sayilar</h1>
<div id="cikti1"></div>
<h1>Nesne</h1>
235
Musa ÇAVUŞ
<div id="cikti2"></div>
</body>
</html>
each.html
for (belirtec=0;belirtec<sayi.length;belirtec++)
Bu çok karmaşık ben bunu for döngüsüyle daha kolay yaparım derseniz, doğru
dersiniz, fakat nesnelere ulaşmada ya da belirtecin bir tam sayı olmadığı
durumlarda each() fonksiyonu çok kolaylık sağlar. Örneğin kisi nesnesinin
değişkenlerine ulaşmak gibi. each() fonksiyonu, nesne elemanlarını sanki bir
dizi elemanıymış gibi işleme sokar ve bize iletir. Nesnelerde belirtecler birer
metindir.
236
Musa ÇAVUŞ
Şekil135
jQuery Framework’unda tüm genel değişkenler jQuery alanı denilen bir yerde
kayıt ediliyor ve bu değişkenlere, jQuery() veya $() şeklinde ulaşabilirsiniz.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>jQuery() ve $()</title>
<script type="text/javascript">
$(document).ready(function(){
$("#resim1").click(function(){
jQuery("#resim").fadeOut();
237
Musa ÇAVUŞ
});
jQuery("#resim2").click(function(){
$("#resim").fadeIn();
});
});
</script>
</head>
<body>
<h1>jQuery() $()</h1>
<img src="resim1.jpg" id="resim" style=""/><hr />
<button id="resim1">
Tikla
</button>
<button id="resim2">
Tikla
</button>
</body>
</html>
jqueryalan.html
Şekil136
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>jQuery Context</title>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("#cikti").html(jQuery("input:text", document.forms[0]).val());
});
$("#b2").click(function(){
$("#cikti").html(jQuery("input:text", document.forms[1]).val());
});
});
</script>
</head>
<body>
<h1>jQuery Context</h1>
<form>
<input/>
</form>
<form>
<input/>
</form><hr/>
<button id="b1">
Tikla
</button>
<button id="b2">
Tikla
</button>
<div id="cikti">
</div>
</body>
</html>
jquerycontext.html
239
Musa ÇAVUŞ
Şekil137
Dinamik element
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>jQuery() ve $()</title>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
var sayi = Math.random();
$("<tr><td>Sayi</td><td>" + sayi + "</td></tr>").appendTo("#t1");
});
});
</script>
</head>
240
Musa ÇAVUŞ
<body>
<h1>jQuery() ve $()</h1>
<table id="t1"/>
<button id="b1">
Tikla
</button>
</body>
</html>
jqueryelemanolustur.html
Şekil138
Şekil139
eq()
DOM elementleriyle işlem yapabilmek için eq() çok yararlı bir metottur.
Metodun parametresi, aynı guruptaki elementlerin belirtecidir. Burada <img>
tagı aynı gurup olmuş oluyor ve i değişkeniyle eq() metodundan yararlanarak
tüm <img> tagların CSS özelliklerini değiştirmiş oluyoruz.
<html>
<head>
<title>eq()</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
for (i = 0; i < $("img").length; i++) {
$("img").eq(i).css("left", 50 + (i * 200) + "px");
242
Musa ÇAVUŞ
Şekil140
get()
243
Musa ÇAVUŞ
<html>
<head>
<title>get()</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var resim = $("img").get();
for (i = 0; i < resim.length; i++) {
resim[i].style.left = 50 + (i * 200) + "px";
resim[i].style.top = 50 + (i * 80) + "px";
}
});
</script>
<style type="text/css">
img {
position: absolute;
}
</style>
</head>
<body style="text-align:center;font-size:12px">
<img src="kiristal.jpg" /><img src="krom.jpg" /><img src="kiristal.jpg"
/><img src="krom.jpg" />
</body>
</html>
get.html
244
Musa ÇAVUŞ
Şekil141
index()
<html">
<head>
<title>index()</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("img").css("width", "250px");
$("img").click(function(){
var index = $("img").index(this);
$("#cikti").text("belirtec " + index);
});
});
</script>
</head>
245
Musa ÇAVUŞ
<body style="text-align:center;font-size:12px">
<img src="krom.jpg" /><img src="kiristal.jpg" /><h1 id="cikti"></h1>
</body>
</html>
belirtec.html
Şekil142
data() ve removedata()
Bazı durumlarda özel bir element için web sayfasında ek bilgiler kayıt etmek
isteyebilirsiniz. data() metodu bize bu olanağı tanımaktadır.
<html>
<head>
<title>Veri Kayiti</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(e){
246
Musa ÇAVUŞ
var deger;
switch ($("button").index(this)) {
case 0:
deger = $("img").data("bilgi");
break;
case 1:
$("img").data("bilgi", "Bu bir deger");
deger = $("img").data("bilgi");
break;
case 2:
$("img").removeData("bilgi");
deger = undefined;
break;
}
$("span").text("" + deger);
});
});
</script>
</head>
<body>
<h1>Veri Kayiti</h1>
<img src="resim1.jpg"><hr/>
<button>
Metainfo ojlustur
</button>
<button>
Metainfo olustur ve deger ata
</button>
<button>
Metainfo sil
</button>
<h2>Metainfo degeri: <span></span>.</h2>
</body>
</html>
247
Musa ÇAVUŞ
Şekil143
Framework çakışması
jQuery ile başka bir Framework’u aynı kod içerisinde kullanma isteğinde
bulunabilirsiniz. Böyle durumlarda başka Framework, jQuery ile aynı alanı
kullandığından çakışmalar ortaya çıkabilir. Örneğin Prototype Framework’u
jQuery gibi $ işaretini kullanmaktadır. Bunu çözebilmek için noConflict()
metodunu kullanabiliriz.
<html>
<head>
<title>jQuery noconflict/title>
248
Musa ÇAVUŞ
<html>
<head>
<title>Prototyping</title>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
var x;
function Adam(ad) {
249
Musa ÇAVUŞ
this.ad = ad;
}
$(document).ready(function() {
x = new Adam("Ahmet");
$("#cikti").html(x.ad);
Adam.prototype.yas=212;
$("#cikti").append(x.yas);
var y = new Adam("Mehmet");
y.yas = 100;
$("#cikti").append(y.yas);
}
);
</script>
</head>
<body>
<div id="cikti"></div>
</body>
</html>
prototyping.html
Şekil144
var x ile bir değişken tanımladım ve function Adam(ad) derken this anahtar
kelimesini kullanarak bir nesne oluşturdum. new oepratörü ile oluşturduğum
Adam nesnesini x değişkenine atadım. x nesnesinin ad parametresini html()
fonksiyonuyla cikti id’sine sahip <div> tagına ekledim. html() fonksiyonu id’si
verilen tagın html kısmını verilen parametreye göre değiştirir. append()
fonksiyonuysa var olan html metinine ekleme yapar. Adam nesnesinden sonra
250
Musa ÇAVUŞ
12.5 extend()
<html>
<head>
<title>extend()</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
jQuery.extend({
sayi: function(){
return Math.random();
}
});
$(document).ready(function(){
$("#cikti").text(jQuery.sayi());
});
</script>
</head>
<body>
<div id="cikti">
</div>
</body>
</html>
extend1.html
Şekil145
<html>
<head>
<title>extend()</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
jQuery.fn.extend({
mavi: function(){
return this.each(function(){
this.style.color = "blue";
});
},
kirmizi: function(){
return this.each(function(){
this.style.color = "red";
});
},
yesil: function(){
return this.each(function(){
this.style.color = "green";
});
}
252
Musa ÇAVUŞ
});
$(document).ready(function(){
$("h1").mavi();
$("h2").yesil();
jQuery("h3").kirmizi();
});
</script>
</head>
<body>
<h1>Ben</h1>
<h2>burada</h2>
<h3>ne</h3>
<h2>yapiyorum</h2>
<h3>sen</h3>
<h1>bunu</h1>
<h2>biliyor musun?.</h2>
</body>
</html>
extend2.html
Şekil146
253
Musa ÇAVUŞ
Bölüm 13
Web sayfasında belirli yeleri seçebilme
255
Musa ÇAVUŞ
13.1 Selektörler
<html>
<head>
<title>Temel Selektorler</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("*").css("color", "magenta");
$("#b1").css("border", "16px solid blue");
$("hr").css({
'background-color': 'grey',
'height': '7px',
'width': '400px'
});
$(".sinif").css("fontSize", "22px");
$(".sinif1.sinif2").css({
'background-color': 'yellow',
'color': 'red',
'fontSize': '30px'
});
$("div,p,h1").css("border", "3px solid gray");
});
</script>
</head>
<body>
<h1>Temel Selektor</h1>
<span class="sinif1">Bir Logo</span>
<img src="selektor.jpg" id="b1"/><hr/>
<div class="sinif2 sinif2">
Ne haber?
</div>
</body>
256
Musa ÇAVUŞ
</html>
selektorler.html
Şekil147
$(“*”) şeklindeki bir selektör tüm taglara erişim sağlamaktadır. Ben bu şekilde
tüm tagların renklerini CSS kullanarak değiştirmiş oldum. Yıldız karakteri hepsi
demektir. $(“#b1”) ile belirli bir tagı seçebiliyorum, buradaki “#” işareti belirli
bir tag olduğunda kullanılır ve taglardaki id parametresinin değeri “#”
işaretinden sonra yazılır. $(“hr”) şeklindeki bir kullanım tüm <hr> taglarına
erişim sağlamaktadır. Yıldızdan farklı olarak bir gruplama söz konusudur.
$("div,p,h1") kullanımıyla parantez içerisinde verilen tag gruplarına erişim
sağlamaktadır. $(".sinif") kullanımında tanımlamadan önce bir nokta kullandım.
Nokta, bize class parametresi içeren taglara erişmemiz içindir. $(".sinif1.sinif2")
olarak tanımlama yaptığımızda sınıf içerisindeki bir sınıfa erişmiş oluyoru ki
bunu class=”sinif1 sinif2” biçiminde algılayabilirsiniz.
<html>
<head>
<title>Duzen Selektor</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("h1 div").css({
border: "1px magenta",
background: "blue",
color: "white",
textAlign: "center"
});
$("div span").css({
border: "2px green",
background: "yellow",
color: "white"
});
$("ul li").css("color", "blue");
$("p > img").css({
border: "2px solid yellow",
width: "100px"
});
$("label + input").css("border", "1px solid blue");
$("#id1 ~ div").css("background", "gray");
});
</script>
</head>
<body>
<h1>
<div>
Ankara
</div>
</h1>
<ul>
<li>
Konya
</li>
<li>
Danimarka
</li>
<li>
Sivas
</li>
258
Musa ÇAVUŞ
</ul>
<div>
<span>Belcika</span>
</div>
<ol>
<li>
Tahta
</li>
<li>
Ucak
</li>
<li>
Buraya tikla
</li>
</ol>
<form>
<label>
Name:
</label>
<input name="ad" />
<label>
Email:
</label>
<input name="email" /><input type="submit" />
</form>
<p>
<img src="selektor.jpg"/>
<div>
Logo
</div>
</p>
<span id="id1">Hadi ya</span>
<div>
Nerede
</div>
<div>
Gercekten mi
<div>
yaptin
</div>
</div>
<span>Burada</span>
<div>
oluyorum
259
Musa ÇAVUŞ
</div>
</body>
</html>
duzenselektor.html
Şekil148
$("h1 div")> kullanımı <h1> tagının bir altında olan <div> taglarına erişim
sağlamaktadır. $("p img") kullanımı <p> ata tagınn <img> çocuk taga erişimi
sağlamaktadır. $("label + input") kullanımı <label> ve <input> taglarının ard
arda kullanıldığı durumlarda erişim sağlanmaktadır. $("#id1 ~ div") kullanımı
#id1 id’li tagdan sonra gelen tüm <div> tagları için geçerlidir. ~ işareti ile bu
işlemi yapabiliyoruz.
13.2 Filtreler
Temel filtreler
260
Musa ÇAVUŞ
Filtreler, jQuery’ide iki nokta üst üste kullanılarak gruplar oluşturulabiliyor. Đlk
aşamada temel filtreleri göstermek istiyorum ve temel filtrelerin hepsini tek bir
örnekte toplayarak bunun daha iyi anlaşılacağından eminim. Örnek yine bira
uzun gelebilir. Anlaşılması ise çok kolaydır:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(":header").css({
background: 'black',
color: 'white'
});
$("td:even").css({
color: 'yellow'
});
$("td:odd").css({
color: 'gray'
});
$("tr:odd").css({
fontSize: '20px'
});
$("tr:first").css({
fontSize: '14px'
});
$("td:lt(2)").css({
background: '#aaa'
});
$("td:gt(3)").css({
background: '#ff0000'
});
$("td:eq(2)").css({
color: 'red'
});
});
</script>
</head>
<body>
<h1>Baslik I</h1>
<h2>Baslik II </h2>
<table>
<tr>
<td>1</td>
261
Musa ÇAVUŞ
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
temelfiltreler.html
Şekil149
Parametre filtreler
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("[target]").css({
background: 'cyan'
});
$("[src$=png]").css({
height: '250px'
});
$("[target=ortam]").css({
color: 'white'
});
$("[target^=blog]").css({
color: 'yellow'
});
$("[target*=alternatif]").css({
background: 'gray'
});
});
</script>
</head>
<body>
<a href="http://www.google.com">link1</a>
<br/>
<a href="http://www.musa-cavus.com" target="ortam">link2</a>
<br/>
263
Musa ÇAVUŞ
Şekil50
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("td:[id]").css({
background: 'green'
});
});
</script>
</head>
<body>
<table>
<tr><th id="h1">1</th><th id="h2">2</th></tr>
<tr><td id="d1">icerik 1</td><td id="d1">Icerik 2</td></tr>
</table>
</body>
</html>
parametrefiltre2.html
Şekil151
265
Musa ÇAVUŞ
Örnekte bilmemiz gereken tek bir satır var, hatta o satırda tırnak içerisinde
kullanılan mantığı anlamamız yeterlidir. $("td:[id]") ile <td> tagında id
parametresi geliyrosa o taga erişim sağlanmaktadır.
Çocuk filtreler
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div:nth-child(2)").css({
background: 'red'
});
$("p:first-child").css({
color: 'magentha'
});
$("p:last-child").css({
color: 'blue'
});
});
</script>
</head>
<body>
<div>
1
<p>
2
<div>
3
</div>
</p>
4
<p>
5
</p>
6
</div>
</body>
266
Musa ÇAVUŞ
</html>
cocukfiltre.html
Şekil152
Form fıltreleri
Form filtresi demekle, belirtli bir anahtar kelimesiyle formdaki bir elemente
ulaşmaktır. Bu konu ikiye ayrılmaktadır, Form için filtreler ve form filtreleri.
Form için filtrelere örnek verecek olursak, input, text, password, submit,
checkbox. Bunların örnekte kullanışı aşağıdaki gibidir. Đki nokta üst üste
koyuyorsunuz ve form için filtreyi yazıyorsunuz.
<html>
<head>
<title>Form Filtresi</title>
267
Musa ÇAVUŞ
Şekil153
<html>
<head>
<title>Form filtresi 2</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("form :checkbox:first").parent().append('Bana iyi bak').css({
background: "yellow",
border: "1px red solid"
});
});
</script>
</head>
<body>
<h1>Filtreler</h1>
<form>
269
Musa ÇAVUŞ
<table width="500">
<tr>
<td>
</td>
<td>
<input type="checkbox" name="agb" />
</td>
<td>
</td>
<td>
<input type="checkbox" name="nl" />
</td>
</tr>
</table><i
</form>
</body>
</html>
formfiltresi2.html
Şekil154
270
Musa ÇAVUŞ
Filtreleme metotları
not() metodu
<html>
<head>
<title>not filtresi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div").not(".kapali, #sen").css("background", "red");
});
</script>
<style type="text/css">
div {
font-size: 42px;
border: 1px solid;
width: 300px;
}
.kapali {
background: #8f8;
color: white;
}
#sen {
background: #99f;
color: yellow
}
</style>
</head>
<body>
<div>
Bir <span class="kapali">Yuzuk</span>, <span id="du">mu</span>
istedin, <span id="sen">sen</span>
271
Musa ÇAVUŞ
Şekil155
slice() metodu
272
Musa ÇAVUŞ
<html>
<head>
<title>slice filtresi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("span").slice(2).css("color", "red");
$("span").slice(1,3).css("background", "cyan");
});
</script>
<style type="text/css">
div {
font-size: 42px;
border: 1px solid;
width: 300px;
}
</style>
</head>
<body>
<div>
Bir <span>Yuzuk</span>, <span>mu</span>
istedin, <span>sen</span>
tabi getirdim <span>kapali</span>
kutu icerisinde
</div>
</body>
</html>
slicefiltremetodu.html
273
Musa ÇAVUŞ
Şekil155
filter() metodu
<html>
<head>
<title>slice filtresi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("span").filter("#evet").css("color", "blue");
});
</script>
274
Musa ÇAVUŞ
<style type="text/css">
div {
font-size: 42px;
border: 1px solid;
width: 300px;
}
</style>
</head>
<body>
<div>
Bir <span>Yuzuk</span>, <span>mu</span>
istedin, <span id="evet" >sen</span>
tabi getirdim <span>kapali</span>
kutu icerisinde
</div>
</body>
</html>
filterfiltremetodu.html
275
Musa ÇAVUŞ
Şekil156
is() filtresi
<html>
<head>
<title>is filtresi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if ($(this).is(":first-child")) {
alert("Ilk dugme");
}
276
Musa ÇAVUŞ
if ($(this).is(":last-child")) {
alert("Ikinci dugme");
}
});
});
</script>
</head>
<body>
<button>
Tikla
</button>
<button>
Tikla
</button>
</body>
</html>
is filtresi
Şekil157
Bölüm 14
jQuery ile CSS
278
Musa ÇAVUŞ
Şekil157
css() metodu
css() metodunu daha önce örneklerimizde sık sık kullanmıştım ve şimdi tekrar
ele alarak detayına iniyorum.
css() metodunu iki şekilde kullanabiliriz. Birinci şekildeki kullanımda
verdiğimiz parametreye göre değer elde ederiz. Đkinci kullanım şekliyse, iki
parametre kullanarak CSS parametresinin değerini düzenleriz. Kullanılacak ilk
parametre CSS’deki parametredir ve ikinci parametre ise onun değeridir. Birden
fazla CSS parametresine değer atamak istiyorsak parametre olarak bir nesne
kullanmamız gerekemketedir.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>css() metodu</title>
<script type="text/javascript">
$(document).ready(function(){
$("*").css({
'backgroundColor': "yellow",
color: "gray"
});
$("button:first").click(function(){
$("#cikti").text($("h1:first").css("color"));
});
$("button:last").click(function(){
$("h1:first").css("color", "blue");
});
});
</script>
</head>
<body>
<h1>Hak yerde kalmaz</h1>
<h1>Bu da gecer gardas</h1>
<button>
Renk sorgula
</button>
<button>
Renk duzenle
280
Musa ÇAVUŞ
</button>
<div id="cikti">
</div>
</body>
</html>
Şekil158
addClass() ve removeClass()
jQuery’le dinamik olarak CSS sınıfları ekleyebilirsiniz veya silebilirsiniz.
addClass() metodu sınıf ekler, removeClass() ise parametrede verilen sınıfı
siler. Aşağıdaki kodda <h1> tagı parametresiz ve belirli bir sınıfa ait değil.
Ancak düğmelerinden birisine basılınca bir sınıf eklenecek ya da bir sınıf
silinecek.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>addClass() ve removeClass()</title>
<style type="text/css">
.mavi {
color: blue;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
$("h1:first").addClass("mavi");
});
$("button:eq(1)").click(function(){
$("h1:first").removeClass("mavi");
});
});
</script>
</head>
<body>
<h1>Calisan demir paslanmaz</h1>
<button>
Sinif ekle
</button>
<button>
Sinif sil
</button>
</body>
</html>
282
Musa ÇAVUŞ
sinifeklecikar.html
Şekil159
Şekil159
283
Musa ÇAVUŞ
Şekil160
Sınıf ekle düğmesine basınca Firebug’da <h1> tagına yeni bir sınıfın nasıl
eklendiğini çok güzel izleyebilirsiniz. Düğmelere 10 defa bassanız bile birden
fazla eklenme ya da birden fazla silinme olmyacaktır.
hasClass() metodu
Bir grup elementin veya bir grup tagın CSS sınıfı var olup olmadığını
hasClass() ile kontrol edebiliriz. hasClass() metodunda parametre olarak test
etmek istediğimiz sınıfın adını yazıyoruz. Aşağıda mavi yazarak mavi CSS
sınıfını kontrol ettirmiş oluyorum.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>hasclass metodu</title>
<style type="text/css">
.mavi {
color: blue;
}
</style>
284
Musa ÇAVUŞ
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
$("h1").addClass("mavi");
});
$("button:eq(1)").click(function(){
if ($("h1").hasClass("mavi")) {
$("h1").removeClass("mavi");
}
});
});
</script>
</head>
<body>
<h1>Acele ile menzil alinmaz</h1>
<button>
Mavi sinif ekle
</button>
<button>
Mavi sinif sil
</button>
</body>
</html>
hasclass.html
285
Musa ÇAVUŞ
Şekil161
toggleClass() metodu
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>toggleClass() metodu</title>
<style type="text/css">
.mavi {
color: blue;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
286
Musa ÇAVUŞ
$("h1").toggleClass("mavi");
});
});
</script>
</head>
<body>
<h1>Bedava sirke baldan tatlidir</h1>
<button>
Sinif ekle/sil
</button>
</body>
</html>
toggleclass.html
Şekil162
Düğmeye basılınca yazı mavi oluyor ve tekrar basılınca yazı siyah oluyor.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>position() metodu</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
var position = $("h1:last").position();
$("#cikti").text("x: " + position.left + ", y: " + position.top);
});
});
</script>
</head>
<body>
<h1>Cok gezen cok bilir</h1>
<h1>Cok bilen cok yanilir</h1>
<button>
Ikinci atasozun poziyonu
</button>
<div id="cikti">
</div>
</body>
</html>
position.html
288
Musa ÇAVUŞ
Şekil163
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>offset() ve offsetParent()</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
var offset = $("h1:first").offsetParent();
289
Musa ÇAVUŞ
$("#cikti1").text("parent x: " +
offset.position().left +
", parent y: " +
offset.position().top );
var offset = $("h1:first").offset();
$("#cikti2").text( "x: " +
offset.left + ", y: " + offset.top );
});
});
</script>
</head>
<body>
<h1>Dag dag ustune olur, ev ev ustune olmaz</h1>
<button>Tikla</button>
<div id="cikti1"></div>
<div id="cikti2"></div>
</body>
</html>
offset.html
Şekil164
Aşağı yukarı ve sağ sol kaydırma çubuğunu kontrol edebilmek için jQuery,
scrollTop() ve scrollLeft() metotlarını sunmaktadır. scrollTop() ve scrollLeft()
metotlarına bir parametre değeri verirsek seçtiğimiz elementi kaydırabiliriz.
Parametresiz olarak kullanırsak, kaydırılmış elementin pozisyon değerlerini
alırız. Sizde birilerini ya da bir şeyleri oraya buraya kaydırmak istiyorsanız bu
örnek tam size göredir.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>scrollTop() ve scrollLeft()</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
$("div:eq(0)").scrollTop(45);
$("div:eq(0)").scrollLeft(90);
$("#cikti").text("scrollTop: " +
$("div:eq(0)").scrollTop() +
", scrollLeft: " +
$("div:eq(0)").scrollLeft());
});
$("div:eq(0)").css({
'width': '400px',
'height': '100px',
'overflow': 'auto',
'position':"absolute",
'left':"20px",
'top':"100px"
});
});
</script>
</head>
<body>
<button>
Kaydir
</button>
291
Musa ÇAVUŞ
<div>
<img src="birresim.jpg" alt="" />
</div>
<div id="cikti">
</div>
</body>
</html>
kaydır.html
Şekil165
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>height() ve width()</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
$("img").width(1000);
$("#cikti").text("Genislik: " + $("img").width());
});
$("button:eq(1)").click(function(){
$("img").height(100);
$("#cikti").text("Yukseklik: " + $("img").height());
});
});
</script>
</head>
<body>
<button>Genislik</button>
<button>Yukseklik</button>
<hr /><img src="birresim.jpg" />
<div id="cikti"></div>
</body>
</html>
genislikyukseklik.html
293
Musa ÇAVUŞ
Şekil166
Đç ve dış boyut
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>Ic ve dis boyut</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
294
Musa ÇAVUŞ
$("div:first").css({
'width': '200px',
'height': '100px',
'margin': '30px',
'padding': '50px',
'border-style': 'solid',
'border-width': '5px'
});
$("#cikti").html("width: " + $("div:first").width() +
"<br>innerWidth: " +
$("div:first").innerWidth() +
"<br>outerWidth: " +
$("div:first").outerWidth() +
"<br>outerWidth(true): " +
$("div:first").outerWidth(true) +
"<br>height: " +
$("div:first").height() +
"<br>innerHeight: " +
$("div:first").innerHeight() +
"<br>outerHeight: " +
$("div:first").outerHeight() +
"<br>outerHeight(true): " +
$("div:first").outerHeight(true));
});
</script>
</head>
<body>
<div>
jQuery
</div>
<div id="cikti">
</div>
</body>
</html>
icdisboyut.html
Şekil167
Şekil168
jQueryUI ile sayfanızda çok kısa sürede görsel anlamda büyük değişiklikler
gerçekleştirebilirsiniz. Benim bu bölümde başlıkta da değindiğim gibi jQuery
ile kullanabileceğiniz temalara değinmek olacaktır. Ana sayfadaki “Explore the
theme gallery” linkini tıklarsanız ThemeRoller sayfasına gelmiş olursunuz.
Kendiniz tema oluşturabileceğiniz gibi hazır oluşturulmuş temalarda değişiklik
yaparakta temalar oluşturabilirsiniz. Açılan sayfada Gallery linkini tıklayın:
297
Musa ÇAVUŞ
Şekil169
Şekil170
Şekil171
Şekil172
Düzenle sekmesini seçin ve <li> tagı ile başlayan bölümü kodunuza kopyalayın.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<title>ThemeRoller</title>
<link href="css/ui-darkness/jquery-ui-1.8.4.custom.css" type="text/css"
rel="stylesheet">
</head>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<li title=".ui-icon-circle-plus" class="ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-circle-plus"></span></li>
301
Musa ÇAVUŞ
Şekil173
Bölüm 15
Web sayfasında düğümler
303
Musa ÇAVUŞ
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("button:first").click(function(){
var str = $("p:first").html();
$("#cikti").append(str);
});
$("button:eq(1)").click(function(){
$("div:gt(0)").html(
"<i>Yagmur yagiyor</i>");
});
$("button:last").click(function(){
$("div:gt(0)").text(
"<i>Yagmur yagiyor</i>");
});
});
</script>
</head>
<body>
<p>
Benim dunyam
</p>
<button>html() sorgulama</button>
<button>html() metini</button>
<button>text() metini</button>
<div id="cikti"></div>
<div></div><div></div><div></div>
</body>
</html>
htmltext.html
304
Musa ÇAVUŞ
Şekil174
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
305
Musa ÇAVUŞ
$("button:first").click(function(){
var str = $("input:first").val();
$("#cikti").append(str);
});
$("button:eq(1)").click(function(){
var str = $("input:first").val("eklenti");
$("#cikti").text(str);
});
});
</script>
</head>
<body>
<button>Icerik sorgula</button>
<button>Icerik ekle</button>
<form action="" method="" accept-charset="utf-8">
<input type="text" />
</form>
<div id="cikti"></div>
</body>
</html>
val.html
Şekil175
306
Musa ÇAVUŞ
jQuery DOM sistemine sonradan içerik ekleyebilmemiz için bir kaç fonksiyon
sunmaktadır.append() ve appendTo() ile prepend() ile prependTo()
fonksiyonlarıyla bu işlemi esnek bir şekilde gerçekleştirebiliriz. append() ile
bilgiyi eklenecek yerin arkasına, prepend() ile de ekelencek yerin önüne
ekleyebiliyoruz. appendTo() ve prependTo() fonksiyonlarıylada eklenecek yeri
parametre olarak vermekteyiz.
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("button:first").click(function(){
$("#cikti").append(" - append() ile eklme yapildi");
});
$("button:eq(1)").click(function(){
$("#a").appendTo("#cikti");
});
$("button:eq(2)").click(function(){
$("#cikti").prepend(" - prepend() ile ekleme yapildi ");
});
$("button:eq(3)").click(function(){
$("#a").prependTo("#cikti");
});
});
</script>
</head>
<body>
<button>append()</button>
<button>appendTo()</button>
<button>prepend()</button>
<button>prependTo()</button>
<hr />
<span id="a" style="color:white;background:red"> alpha </span>
<span id="b" style="color:blue;background:yellow"> beta </span>
<span id="c" style="color:green;background:lightgray"> gamma </span>
<div id="cikti" style="color:yellow;background:gray">
Hedef</div>
</body>
</html>
ekleme.html
307
Musa ÇAVUŞ
Şekil176
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
$("#cikti").after('<span
style="color:white;background:red">Arkasina</span>');
});
$("button:eq(1)").click(function(){
$("#cikti").before('<span
308
Musa ÇAVUŞ
style="color:red;background:yellow">Onune</span>');
});
$("button:eq(2)").click(function(){
$('<span
style="color:blue;background:gray">Arkasina</span>').insertAfter('.k1');
});
$("button:eq(3)").click(function(){
$('<span
style="color:blue;background:gray">Onune</span>').insertBefore('.k1');
});
});
</script>
</head>
<body>
<button>
after()
</button>
<button>
before()
</button>
<button>
insertAfter()
</button>
<button>
insertBefore()
</button>
<hr/>
<div id="cikti" style="color:red;background:yellow">
Hedef
</div>
<hr/><hr class='k1'/><hr/>
</body>
</html>
afterbefore.html
309
Musa ÇAVUŞ
Şekil177
Düğüm kuşatma
<html>
<head>
310
Musa ÇAVUŞ
Şekil178
Elementleri değiştirme
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
312
Musa ÇAVUŞ
<script type="text/javascript">
$(document).ready(function(){
$("button:first").click(function(){
$("h1:first").replaceWith(
"<h6>" + $("h1:first").text() + "</h6>");
});
$("button:eq(1)").click(function(){
$("<hr/>").replaceAll("br");
});
});
</script>
</head>
<body>
<h1>Moralim cok iyi</h1>
<br><button>H1 --> H6</button>
<br><button>BR --> HR</button>
</body>
</html>
degistir.html
Şekil179
313
Musa ÇAVUŞ
Elementleri silme
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script type="text/javascript" >
var element=null;
$(document).ready(function(){
$("button:first").click(function(){
$("h1").empty();
});
$("button:eq(1)").click(function(){
element=$("h1").remove();
});
$("button:eq(2)").click(function(){
$("#ekle").after(element);
});
});
</script>
</head>
<body>
<h1><div>MNOPRS</div></h1>
<h1>TUVYZ</h1>
<h1>Bunu bilemeyen geveze</h1>
<button>empty()</button>
<button>remove()</button>
<button>after()</button>
<div id="ekle"></div>
</body>
</html>
bosalt.html
314
Musa ÇAVUŞ
Şekil180
Elementleri kopyalama
Bir elementi bir yerden silerek bir başka yere aktabiliyoruz ve aynı şekilde bir
elementi bir yerden silmeden başka bir yere clone() metoduylada
kopyalayabiliyoruz.
<html>
<head>
315
Musa ÇAVUŞ
Şekil181
15.2 Arama
jQuery belirli bir yapıyı aramak için bir çok güçlü metot sunmaktadır.
JavaScript ve DHTML’de neredeyse arama için hiç bir fonksiyon
bulunmamaktadır. jQuery bu alanda böylece büyük bir güç olmaktadır. Đlk
olarak children() metodunu göstermek istiyorum:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
var element=null;
$(document).ready(function(){
$("span").css("height","100px");
$("button:first").click(function(){
element=$("div:first").children();
317
Musa ÇAVUŞ
Şekil182
Đlk <div> tagların arasındaki tagları sayarsak 5 tane alt tag yani 5 çocuk tagının
olduğu görürüz. Bu yüzden “Tüm cocuklar” düğmesine dıklanınca “Cocuk
elementlerin sayisi: 5” diye bir yazı çıkmaktadır. children() metodunun length
değişkeniyle kaç tane çocuk element olduğunu bulabiliyoruz. Đkinci düğmeye
bastığınızda element sayısı 1 gösterilmektedir. parent() ve parents() metotları da
children() metodu gibi çalışmaktadır o yüzden onlar için örnek vermedim.
Çocuk yerine ebeveyn bulunmaktadır.
Kardeşleri arama
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
var element = null;
$(document).ready(function(){
$("h1").css("font-size", "14px");
$("h1:eq(2)").css("background-color", "yellow");
$("#cikti1").text($("h1:eq(2)").next().text());
$("#cikti2").text($("h1:eq(2)").nextAll().text());
$("#cikti3").text($("h1:eq(2)").prev().text());
$("#cikti4").text($("h1:eq(2)").prevAll().text());
$("#cikti5").text($("h1:eq(2)").siblings().text());
});
</script>
</head>
<body>
<div>
<h1>Kardes1</h1>
<h1>Kardes2</h1>
<h1>Kardes3</h1>
<h1>Kardes4</h1>
<h1>Kardes5</h1>
<h1>Kardes6</h1>
<h1>Kardes7</h1>
<h1>Kardes8</h1>
</div>
<hr><h3>Akrabalik</h3>
<hr>
<table border="1">
<tr>
<td>
next()
</td>
<td id="cikti1">
</td>
</tr>
<tr>
<td>
nextAll()
</td>
<td id="cikti2">
</td>
320
Musa ÇAVUŞ
</tr>
<tr>
<td>
prev()
</td>
<td id="cikti3">
</td>
</tr>
<tr>
<td>
prevAll()
</td>
<td id="cikti4">
</td>
</tr>
<tr>
<td>
siblings()
</td>
<td id="cikti5">
</td>
</tr>
</table>
</body>
</html>
kardesler.html
321
Musa ÇAVUŞ
Şekil183
Bölüm 16
jQuery ve Event
323
Musa ÇAVUŞ
<html>
<head>
<title>Event-Objesi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(
function(){
$("h1:first").click(function(event){
$("#cikti").html(event.type);
});
}
);
</script>
</head>
<body>
<h1>Tikla beni</h1>
<div id="cikti"></div>
</body>
</html>
eventobjesi.html
Şekil184
Şekil185
<html>
<head>
326
Musa ÇAVUŞ
<title>Event-Objesi</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#r1").click(function(event){
var koordinat = "( " + event.pageX + ", " + event.pageY + " )";
$("#cikti").html("e.pageX, e.pageY: " +
koordinat +
"<br />Event Dugumu: " +
event.target.nodeName);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="r1.jpg" id="r1"/>
</td>
<td id="cikti">
</td>
</tr>
</table>
</body>
</html>
eventobjesi2.html
327
Musa ÇAVUŞ
Şekil186
<html>
<head>
<title>Event-Objekt</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
alert("Izin yok. " +
event.isDefaultPrevented());
});
});
</script>
</head>
328
Musa ÇAVUŞ
<body>
<a href="http://www.musa-cavus.com">Buraya tikla</a>
</body>
</html>
eventdurdurma.html
Şekil187
ready() metodu
bind() metoduyla bir Event’i bir taga her hangi bir zaman aralağında
bağlayabilirsiniz. unbind() ile de bu bağlantıyı koparma gücünüz vardır.
<html>
<head>
<title>bind ve unbind</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
function info(event){
$("#cikti").html(event.data.text);
}
$("img").css("width", "300px");
$("button:first").bind("click", function(){
$("img:first").bind("mouseover", {
text: "Bu bir resim"
}, info);
$("img:first").bind("mouseout", {
text: ""
}, info);
});
$("button:last").bind("click", function(){
$("img:first").unbind("mouseover");
$("img:first").unbind("mouseout");
});
});
</script>
</head>
<body>
<button>
bind()
</button>
<button>
unbind()
</button>
<hr/><img src="r1.jpg" />
<div id="cikti">
</div>
</body>
bindveunbind.html
330
Musa ÇAVUŞ
Şekil188
<html>
<head>
<title>one</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
function info(event){
$("#cikti").html(event.data.text);
}
$("img").css("width", "300px");
$("img:first").one("mouseover", {
text: "Bir resim"
}, info);
$("img:first").one("mouseout", {
text: ""
}, info);
});
</script>
</head>
<body>
<img src="r1.jpg" />
<div id="cikti">
</div>
</body>
one.html
332
Musa ÇAVUŞ
Şekil189
Fareyle resime girdiğimizde bir bilgi çıkıyor. Fare ile resimden çıkınca boş bir
metin gösteriliyor. one() metodu sayesinde bu olayı bir defa
gerçekleştirebiliyoruz. Tabi ki saksınızı çalıştırarak bunu farklı şekillerde
yapabilirsiniz. Kodunuza bir sayaç koyarak tıklama miktarını sayabilirsiniz ya
da daha akrobasik hareketlerde bulunabilirsiz. jQuery’ciler böyle bir kolaylık
sağladıktan sonra tekeri tekrar icetmeye ne hacet var.
Tetikleyiciler
<html>
333
Musa ÇAVUŞ
<head>
<title>tetikleyici</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("img").css({width:"80px" });
$("img").click(function () {
$(this).css({width:"200px" });
});
$("img").dblclick(function () {
$(this).css({width:"80px" });
});
$("button:first").click(function () {
$("img").trigger('click');
});
$("button:last").click(function () {
$("img").trigger('dblclick');
});
});
</script>
</head>
<body>
<h1>Resimleri buyultmek icin uzerine tiklayin</h1>
<h1>Cift tiklarsaniz resim ufalacaktir</h1>
<img src="r1.jpg" /><img src="konya.jpg" /><hr />
<button>Resimleri buyult</button>
<button>Resimleri ufalt</button>
</body>
</html>
trigger.html
Şekil190
toggle()
<html>
<head>
<title>toggle</title>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css({
width: "80px",
height: "40px",
margin: "5px",
335
Musa ÇAVUŞ
float: "left",
background: "blue",
border: "10px outset",
cursor: "pointer"
});
$("div").toggle(function(){
$(this).css({
"border": "5px inset",
"background": "red"
});
}, function(){
$(this).css({
"border": "10px outset",
"background": "yellow"
});
}, function(){
$(this).css({
"background": "blue"
});
});
});
</script>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
toogle.html
336
Musa ÇAVUŞ
Şekil191
Tüm <div> taglarına bir css objesi yerleştiriyoruz. jQuery ile toggle metodunda
üç parametre uyguluyoruz. Birinci parametre ilk tıklama, ikinci parametre ikinci
tıklama, üçüncü parametrede üçüncü tıklamada oluşacak işlemi
programlamamızı sağlamaktadır. $(this) ile diyoruz ki şu an ait olduğum taga
ulaş ve ona ulaştıktan sonra css( yaparak o tagın css hayatını değiştiriyoruz. Çok
şnemli noktalardan birisi ise şudur ki, her <div> tagı kendisine kaç kere
tıklandığını bilmektedir.
337
Musa ÇAVUŞ
Bölüm 17
jQuery ve Animasyon
338
Musa ÇAVUŞ
Şekil192
<html>
<head>
339
Musa ÇAVUŞ
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("div.k1").css({width:"80px", height:"40px",
margin:"5px", float:"left", background:"blue",
border:"5px outset"
});
$("button:first").click(function(){
$("div.k1").show();
});
$("button:eq(1)").click(function(){
$("div.k1").show("slow");
});
$("button:eq(2)").click(function(){
$("div.k1").show(5000,function(){
$("#cikti").text("5 saniye surdu");
});
});
$("button:eq(3)").click(function(){
$("div.k1").hide();
});
$("button:eq(4)").click(function(){
$("div.k1").hide("fast");
});
$("button:eq(5)").click(function(){
$("div.k1").hide(3000,function(){
$("#cikti").text("3 saniye surdu");
});
});
});
</script>
</head>
<body>
<button>Goster</button>
<button>Animasyonlu goster</button>
<button>Zaman animasyonlu goster</button>
<button>Sakla</button>
<button>Animasyonlu sakla</button>
<button>Zaman animasyonlu sakla</button>
<hr /><div id="cikti"></div><hr />
<div class="k1"></div><div class="k1"></div>
<div class="k1"></div>
</body>
340
Musa ÇAVUŞ
</html>
showhide.html
Şekil193
Normalde aşağıdaki örnek herşeyi açıklıyor. Ben yinede bir kaç açıklama
getirmek istiyorum. Çizilen dikdörtgeni veya resimi aşağıdan yukarıya
saklamak için slideUp() metodunu kullandım. Paramtre değerini daha önce
anlatmıştım. slideDown() metoduyla aşağıya doğru resim ve dikdörtgen
çizilmektedir. slideToggle() metoduylada zamanı verebiliyoruz. show() ve
hide() metotlarındaki gibi ikinci bir parametre değeri de verebiliriz. Görevi ise
aynı show() ve hide() metotlarındaki görevi gibidir.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script>
$(document).ready(function(){
$("img").css("width", "300px");
$("div.k1").css({
width: "80px",
height: "40px",
margin: "5px",
background: "green",
border: "5px outset"
});
$("button:first").click(function(){
$("div.k1").slideDown("slow");
});
$("button:eq(1)").click(function(){
$("div.k1").slideUp("fast");
});
$("button:eq(2)").click(function(){
$("img").slideDown("slow");
});
$("button:eq(3)").click(function(){
$("img").slideUp("slow");
});
$("button:eq(4)").click(function(){
$("div.k1").slideToggle(5000);
$("img").slideToggle(10000);
});
});
</script>
</head>
<body>
<button>
Dikdortgeni goster
342
Musa ÇAVUŞ
</button>
<button>
Dikdortgeni sakla
</button>
<button>
Resimi goster
</button>
<button>
Resimi sakla
</button>
<button>
Resmi ve Diktdortgene Toggle efekti uygula
</button>
<hr/>
<div class="k1">
</div>
<img src="r1.jpg" />
</body>
</html>
Slide.html
Şekild194
metodu ise belirli bir zamana göre ve belirli bir sınıra göre
saydamlaştırmaktadır.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script>
$(document).ready(function(){
$("img").css("width", "300px");
$("div.k1").css({
width: "80px",
height: "40px",
margin: "5px",
background: "green",
border: "5px outset"
});
$("button:first").click(function(){
$("div.k1").fadeIn("slow");
});
$("button:eq(1)").click(function(){
$("div.k1").fadeOut("fast");
});
$("button:eq(2)").click(function(){
$("div.k1").fadeTo(3000, 0.2);
$("img").fadeTo(2000, 0.5);
});
});
</script>
</head>
<body>
<button>
Dikdortgeni yavas saydam sakla
</button>
<button>
Dikdortgeni hizli saydam goster
</button>
<button>
Toggle
</button>
<hr/>
<div class="k1">
</div>
<img src="r1.jpg" />
344
Musa ÇAVUŞ
</body>
</html>
slide.html
Şekil1195
Zincirlenmiş animasyonlar
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
345
Musa ÇAVUŞ
<script>
$(document).ready(function(){
$("img").css("width", "300px");
$("button:first").click(function(){
$("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow")
.hide("normal").show(5000);
});
$("button:last").click(function(){
$("img:last").fadeOut("fast");
$("img:last").fadeIn(2000);
$("img:last").slideUp("slow");
$("img:last").slideDown("slow");
$("img:last").hide("normal");
$("img:last").show(5000);
});
});
</script>
</head>
<body>
<button>
Zincirli animasyon I
</button>
<button>
Zincirli animasyon II
</button>
<hr/><img src="r1.jpg" />
<hr/><img src="r2.jpg" />
</body>
</html>
zincirleme.html
346
Musa ÇAVUŞ
Şekil196
Animasyonları durdurmak
347
Musa ÇAVUŞ
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script>
$(document).ready(function(){
$("img").css("width", "300px");
$("button:first").click(function(){
$("img:first").fadeOut("fast").fadeIn(2000).slideUp("slow").slideDown("slow")
.hide("normal").show(5000);
});
$("button:last").click(function(){
$("img:last").fadeOut("fast");
$("img:last").fadeIn(2000);
$("img:last").slideUp("slow");
$("img:last").slideDown("slow");
$("img:last").hide("normal");
$("img:last").show(5000);
});
$("button:eq(2)").click(function(){
$("img:first").stop();
});
});
</script>
</head>
<body>
<button>
Zincirli animasyon I
</button>
<button>
Zincirli animasyon II
</button>
<button>
Birinci animasyon dursun
</button>
<hr/><img src="r1.jpg" />
<hr/><img src="r2.jpg" />
</body>
</html>
348
Musa ÇAVUŞ
Şekil197
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script>
$(document).ready(function(){
$(".d1").css({
width: "80px",
height: "40px",
margin: "5px",
background: "green",
border: "5px outset",
position: "absolute"
});
$("img").css({
width: "200px",
position: "absolute"
});
$("#i1").css({
width: "200px",
left: "100px",
top: "50px"
});
$("#i3").css({
width: "200px",
left: "100px",
top: "150px"
});
$("button:first").click(function(){
$("div#i1").animate({
width: "20%",
opacity: 0.4,
borderWidth: "1px"
}, 1500);
});
$("button:eq(1)").click(function(){
$("img#i3").animate({
width: "100%",
opacity: 0.3,
top: "200px"
}, 5000);
});
});
</script>
350
Musa ÇAVUŞ
</head>
<body>
<button>
Dikdortgen 1 animasyon
</button>
<button>
Resim 2 animasyon
</button>
<hr/>
<div class="d1" id="i1">
</div>
<img src="r1.jpg" id="i3" class="img1" />
</body>
</html>
animate.html
Şekil198
351
Musa ÇAVUŞ
Bölüm 18
jQuery ile Ajax
353
Musa ÇAVUŞ
Daha önce Ajax’ı göstermiştim. jQuery burnunu her tarafa sokarak işimizi
kolaylaştırdığı gibi Ajax dunyasınada burnunu sokmuştur ve Ajax kullanımını
kolaylaştırmıştır. Bize kalan sadece nasıl olduğunu öğrenmektedir. Gerçekten
şoke olacaksınız jQuery ile Ajax kullanımının ne kadar kolay olduğunu
görünce.
Şekil199
Daha önce anlattığım Ajax’ı anladıysanız buradaki jQuery metotları sizin için
çocuk oyuncağı gibi gelecektir.
$("button:first").click(function(){
$.get("ajax.txt", function(data){
$("#cikti").text(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax.txt", function(data){
$("#cikti").text(data);
});
});
});
</script>
</head>
<body>
<button>AJAX-Sorgulama $.get()</button>
<button>AJAX-Sorgulama $.post()</button>
<div id="cikti"></div>
</body>
</html>
ajax1.html
Şekil200
göstermeme gerek yok. Yukarıdaki kodla bir süre Ajax kodu yazabilirsiniz.
jQuery ile kalın kitapları alarak Ajax kodu yazma mazilerde kaldı. Size bir kaç
örnek daha vereceğim sonra iş başvurusunda ben Ajax biliyorum diyebilirsiniz.
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("ajax2.txt", function(data){
$("#cikti").html(data);
});
});
$("button:eq(1)").click(function(){
$.post("ajax2.txt", function(data){
$("#cikti").html(data);
});
});
});
</script>
</head>
<body>
<button>$.get()</button>
<button>$.post()</button>
<div id="cikti"></div>
</body>
</html>
ajax2.html
Şekil201
Bu örneğin bir önceki örnekten tek farkı text() metodu yerine html() metodunu
kulllanmam oldu. html() metodu gelen bilgiyi HTML olarak algılıyor ve
tarayıcı ona göre gösteriyor. Metot çok kolay ve içerik çok büyük farklılık arz
ediyor.
Diyelim ki, ad, soyad ve numara gibi bilgileri Web Server’e yollamak
istiyorsunuz ve yolladığınız bu bilgiler ışığında tarayıcıda bilgiler göstermek
istiyorsunuz. Bunu da Ajax ile gerçekleştirme düşüncesindesiniz. O zaman bu
örneğe iyi bakın. Tabi diğer Ajax örneklerindeki gibi Server tarafında basit bir
metin dosyası bulundurmamız mantıksız olur. Server tarafında bir program
parçası olması gerekiyor ki bizim yolladığımız bilgileri alsın ve işledikten sonra
tekrar bize geri yollasın. Daha önceki Ajax anlatımıdan PHP kodu kullanmıştım
burada da PHP kodu kullanacağım. PHP kodunun ne yaptığını anlamanız
yeterlidir, çünkü kitap PHP kitabı değil. Ajax için Server tarafında çalışan
program parçası hiç önemli değildir, siz istiyorsanız başka bir dilde
kullanabilirsiniz. Ajax Server tarafını kapalı bir kutu gibi görmektedir.
Siz nasıl ki telefon açtığınızda karşı taraftaki kişinin cinsi, ırkı önemli değil
sadece söyledikleri önemliyse, Ajax içinde aynı kriterler geçerlidir.
sorgulamadır, tek farkı yeni bir tarayıcı penceresinde değil de aynı pencerede
gerçekleşmesidir.
<?php
$kullaniciadi = "musa";
$sifre = "cavus";
$login=false;
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$("button:first").click(function(){
$.get("login_get.php",
{
username: $("input:first").val(),
password: $("input:last").val()
},
function(data){
$("#cikti").html(data);
}
);
});
});
</script>
</head>
<body>
358
Musa ÇAVUŞ
Şekil202
359
Musa ÇAVUŞ
Bölüm 19
jQuery UI
361
Musa ÇAVUŞ
Şekil203
Şekil204
Şekil205
Daha önce belirttiğim gibi jQuery UI'yi kullanabilmek için bir kütüphane
indirmelisiniz. Download linkine tıklayın.
364
Musa ÇAVUŞ
Şekil206
Sağ tarafta 1.8.5 olan son versiyonu seçerek Download linkine tıklayın. Bu
rakam jQuery’deki gençler yenilikler getirdikçe değişebilir. jquery-ui-
1.8.5.custom.zip bir dosya indirdim. Zip formatındaki dosyayı Zip halinden
kurtarın ve onu örnekleri deneyeceğiniz dizine kopyalayın. Ben örneklerimin
bulunduğu dizinin içine bir de jquery-ui-1.8.5.custom dizini açarak açılan tüm
dosyaları onun içine kopyaladım. Daha önce böyle bir şeyler yapmıştık
hatırlıyorsanız. Şimdi tekrar yapıyoruz. Zip dosyasını açtıktan sonra sıradaki
kodu yazın. Zip dosyasının içinde neler var neler yok bilmeseniz de olur. Tabi
bakmakta yarar var zarar gelmez.
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
365
Musa ÇAVUŞ
<script type="text/javascript">
$(document).ready(function(){
$("#draggable").draggable();
});
</script>
</head>
<body>
<h1>Yukari</h1>
<img id="draggable" src="r1.jpg" /><h1>Asagi</h1>
</body>
</html>
drag.html
Şekil206
Heyecanlanmadınız değil mi? Đnanılması güç fakat işte bu kadar basit. Bir kaç
satır kodla tarayıcıdaki resimi sürükleyebiliyorsunuz. Kodda dikkat etmeniz
366
Musa ÇAVUŞ
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Tarih: <input id="datepicker" type="text"></p>
</body>
</html>
takvim.html
367
Musa ÇAVUŞ
Şekil207
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#i1").accordion();
368
Musa ÇAVUŞ
});
</script>
</head>
<body>
<h1>Benim Web Sayfam</h1>
<div id="i1">
<h3>Benim ozel sayfam</h3>
<div>
<a href="http://rjs.de">www.musa-cavus.com</a>
</div>
<h3>Bir liste</h3>
<div>
<hr/>Domates
<hr/>Biber
<hr/>Patlican
<hr/>
</div>
</body>
</html>
accordion.html
Şekil208
369
Musa ÇAVUŞ
Bu da başka bir örnek. Örneği çalıştırın ve ne kadar etkili bir Widget olduğunu
görün. Tek bir metot olan accordion() metodu il id’sine sahip <div> tagına
bağlayarak bu efekti gerçekleştirmiş oldum. accordion() metodunu daha çok
kullanmak istiyorum diyorsanız http://jqueryui.com/demos/accordion linkine
girin. Kullanabileceğiniz parametreler, renkler ve biçimleri orada bulabilirsiniz.
Tek tek anlatmama gerek yok zaten orada her şey var.Ben size sadece bu işin
temelini ve mantığını öğretmeye çalışıyorum.
Şimdi size biraz daha fazla bir şey göstereceğim. Hem Tab kullanabileceksiniz
hemde kullandığınız tab elementinin boyutunu değiştirebileceksiniz.
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs().resizable();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Bolum 1</a></li>
<li><a href="#tabs-2">Bolum 2</a></li>
<li><a href="#tabs-3">Bolum 3</a></li>
</ul>
<div id="tabs-1">
<p>Ben birinci bolumum sen kimsin?</p>
</div>
<div id="tabs-2">
<p>Ben ikinci bolumum sen birinci bolum musun?</p>
</div>
<div id="tabs-3">
<p>Kavga yapmayin bende ücüncü bolumum</p>
</div>
</div>
370
Musa ÇAVUŞ
</body>
</html>
tabs.html
Şekil209
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
371
Musa ÇAVUŞ
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#i1").dialog({
title: 'Dialog Baslik',
position: 'center',
width: '300',
height: '200'
});
$("#s1").slider();
$("#s2").slider({
slide: function(event, ui){
var genislik = 300 + $("#s2").slider('option', 'value');
$("#i1").dialog('option', 'width', genislik);
}
});
$("#s2").css({
width: "400px"
});
$("#s3").slider({
slide: function(event, ui){
var yukseklik = 200 + $("#s3").slider('option', 'value');
$("#i1").dialog('option', 'height', yukseklik);
},
orientation: 'vertical',
min: -50,
max: 50,
value: 0
});
});
</script>
</head>
<body>
<h4>Default Slider</h4>
<div id="s1">
</div>
<h4>Default Slider CSS</h4>
<div id="s2">
</div>
<h4>Slider</h4>
<div id="s3">
372
Musa ÇAVUŞ
</div>
<div id="i1">
Web sayfami ziyaret edebilirsiniz...
<a href="http://www.musa-cavus.com">tikla</a>
</div>
</body>
</html>
slider.html
Şekil210
Araç çubuğunu oluşturmak çok kolay slider() metodunu kullanınca <div> tagını
kaydırma özelliği vermiş oluyrsunuz. Bir değer alabilmek için slider()
metodunu iki parametreli olarak kullanıyorsunuz ve ilik parametreye option
yazarken ikinci parametreye value yazıyorsunuz. Bunu dokümanlarda da
görebilirsiniz ve sadece slider() metodu için geçerli değildir, bir çok jQuery UI
elementleri içinde geçerlidir. Đlk parametre option, ikinci parametre value ve son
parametreye de bir değer verirseniz araç çubuğunun genişliğini belirtmiş
oluyorsunuz.
Şimdi $("#s2").slider kısmına iyi bakın orada slide: diye bir kısım var. Bu
şekilde bir Event oluşturuyoruz ve bu Event çubukta her kaydırma yapılınca
373
Musa ÇAVUŞ
19.5 Efektler
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var opt = {};
function temizle(){
setTimeout(function(){
$("#i1").removeAttr('style').hide().fadeIn();
opt = {};
}, 2000);
};
$("button:first").click(function() {
$("#i1").effect('explode',opt,1500,temizle);
return false;
});
$("button:eq(1)").click(function() {
$("#i1").effect('puff');
return false;
});
$("button:eq(2)").click(function() {
$("#i1").effect('pulsate',opt,2000,temizle);
return false;
});
$("button:eq(3)").click(function() {
$("#i1").effect('slide',opt,2500,temizle);
return false;
374
Musa ÇAVUŞ
});
$("button:eq(4)").click(function() {
opt = { to: {width: 200,height: 60} };
$("#i1").effect('size',opt,5000,temizle);
return false;
});
});
</script>
</head>
<body>
<button>Explode</button><button>Puff</button>
<button>Pulsate</button><button>Slide</button>
<button>Size</button><hr />
<img id="i1" src="r2.jpg" width="300"/>
</body>
</html>
efekt.html
Şekil211
375
Musa ÇAVUŞ
Explode düğmesine basınca resmi patlatıyor gibi bir efekt uygulamış oldum.
Bu patlama şu kodla gerçekleşiyor: $("#i1").effect('explode',opt,1500,temizle).
Zaten efektlerle effect() metodu ilgileniyor, parametrede yapacağımız
değişikliğe görede efekt değişiklikleri elde ediyoruz. Birinci parametre efektin
kendisi, ikinci parametre seçenekler, üçüncü parametre efektin hızı ve son
parametre Callback fonksiyonudur. Örnekte bir kaç efekt kullandım. temizle
Callback fonksiyonuda belli bir süre sonra resmi eski haline getirmektedir.
Bölüm 20
Plugins
377
Musa ÇAVUŞ
http://plugins.jquery.com/
Şekil212
Şekil213
Şekil214
379
Musa ÇAVUŞ
Şekil215
Şekil216
Plugin’in dokümanı iyi değilse ya da yoksa listelemede sonlara doğru yer alır.
Tabi Plugin’in çalışabilirliği de listelemede çok önemlidir. Dokümansız Plugin
genelde hiçbir işe yaramaz, çünkü doküman olmadan Plugin’in nasıl çalıştığını
ve ne işe yaradığını nereden bileceksiniz. TreeView’in dokümanı çok güzel
yapılmış, aynı jQuery’deki gençlerin uygulamış olduğu metodu izlemiş.
Bakmakta yarar var. Şimdi TreeView Plugin’ini bir bilgisayarınıza indirin.
Homepage linkini tıklayarak bu indirmeyi oradaki Download linkine tıklayarak
gerçekleştirebilirsiniz. Đndirdiğiniz dosyayı örnekleri uyguladığınız dizine açın.
Dokümanı inceledim ve şöyle bir kod yazdım:
<html>
<head>
<link rel="stylesheet" href=
"jquery-treeview/jquery.treeview.css" />
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<script src="jquery-treeview/jquery.treeview.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
381
Musa ÇAVUŞ
var agacim=$("#cikti").treeview({
animated: "fast",
collapsed: true
});
var yeniListe =
$("<li><span class='folder'>Web sayfalari</span><ul>" +
"<li><span class='file'>" +
"<a href='http://www.musa-cavus.com'>www.musa-cavus.com</a>" +
"</span></li>" +
"<li><span class='file'>" +
"<a href='http://jquery.com'>jquery.com</a>" +
"</span></li>" +
"<li><span class='file'>" +
"<a href='http://www.w3c.org'>w3c</a>" +
"</span></li>" +
"</ul></li>")
.appendTo(agacim);
agacim.treeview({
add: yeniListe
});
});
</script>
</head>
<body>
<div id="cikti"></div>
</body>
</html>
treeview.html
Şekil216
<html>
<head>
<link type="text/css" href="jquery-ui-1.8.5.custom/css/ui-
darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.js">
</script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom/js/jquery-ui-
1.8.5.custom.min.js">
</script>
<script type="text/javascript"
src="jquery.dragwithstatuslight.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").css({'width':'300px'});
$("img").dragwithstatuslight();
});
</script>
</head>
<body>
<img src="r1.jpg" /><img src="r2.jpg" />
<img src="r3.jpg" /><img src="r4.jpg" />
</body>
</html>
plugin.html
jQuery.fn.dragwithstatuslight = function() {
return this.each(function(){
$(this).css({
border:"5px outset", cursor:"move"
});
$(this).draggable( {
start: function(event, ui) {
$(this).css({opacity : 0.5});
383
Musa ÇAVUŞ
},
stop: function(event, ui) {
status="";
$(this).css({opacity : 1});
},
drag:function(event, ui) {
status="X/Y : " +
event.pageX + "/" + event.pageY;
}
});
}
);
};
jquery.dragwithstatuslight.js
Şekil217