Her Yönüyle HTML5

+HTML5-icindekiler
6/17/11
4:23 PM
Page vii
NDEKLER
1 HTML5E GRfi
Genel Bakfl
HTML5in Yaps
Yeni DOCTYPE Bildirimi
Yeni Character Set Bildirimi
HTML5 Sz Dizimi Kurallar
HTML5 iin Tarayc Destei
Tarayc Grntleme Motoru (Layout Engine) ve
JavaScript Motoru (JavaScript Engine)
Firefox
Opera
Internet Explorer
Safari
HTML5 ile Yeni Tanmlanan Elemanlara ve
zelliklere Tarayclarn Verdii Destek
Dier Specifications (W3C Bildirimleri) ve
Teknolojilere Tarayclarn Verdii Destek
HTML5 Dili erisindeki Tm Etiketlerin Listesi
2 YEN ELEMANLAR VE ZELLKLER
Standart zellikler
accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
id
lang
spellcheck
style
tabindex
title
hidden
HTML5in Getirdii Yeni Elemanlar
1
1
2
3
4
6
8
9
10
10
10
11
12
15
15
21
22
22
22
24
26
26
26
26
27
28
28
29
30
30
30
30
+HTML5-icindekiler
6/17/11
4:23 PM
Page viii
viii HER YNYLE HTML5
Yapsal Elemanlar
<header>
<hgroup>
<nav>
<article>
<section>
<aside>
<footer>
<figure>
Dier Elemanlar
<mark>
<meter>
<command>
<progress>
<time>
30
31
32
32
35
37
41
44
46
50
50
51
53
53
54
3 HTML5 VE JAVASCRIPT
querySelector()
querySelectorAll()
getElementsByClassName()
Seici Metotlarn Desteklemeyen
Tarayc Srmleri iin zm
Sonu
55
57
64
71
4 HTML5 ve CSS3
CSS3 Selectors
Structural Pseudo-Classesn
(Yapsal Szde Snflar) ncelenmesi
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:first-child ve :last-child
:first-of-type ve :last-of-type
:only-child, :only-of-type, :root ve :empty
Yapsal Szde Snflar in Tarayc Destei
87
87
75
82
97
97
101
104
106
108
110
111
113
+HTML5-icindekiler
6/17/11
4:23 PM
Page ix
NDEKLER ix
5 HTML5 VE WEB FORMLARI

Form Nesnesi
Input Eleman zellikleri ve Type Tanmlamalar
Input Eleman
autocomplete
list
pattern
placeholder
required
Form Elemanna Ait zellikleri Tekrar Tanmlayan zellikler
Type Tanmlamalar
button
checkbox
password
radio
image
submit
text
reset
file
hidden
email
search, url ve tel
number
range
color
date, month, week, time, datetime-local, datetime [HTML5]
115
116
118
18
119
119
122
125
125
126
128
128
128
128
128
128
129
129
129
129
129
129
131
132
133
134
140
6 CANVAS
getContext()
toDataUrl()
Canvas RenderingContext2D (2 Boyutlu izim Alan) Nesnesi
zellik ve Metotlar (izim Oluflturmak)
Canvas Koordinat Sistemi
context2D Nesnesi zellikleri
canvas
strokeStyle ve fillStyle
143
144
145
147
147
149
149
150
+HTML5-icindekiler
6/17/11
4:23 PM
Page x
x HER YNYLE HTML5
globalAlpha
globalCompositeOperation
shadowColor, shadowOffsetX, shadowOffsetY,
shadowBlur
lineWidth, lineCap, lineJoin ve miterLimit
context2D Nesnesi Metotlar
save() ve restore()
Dikdrtgen izim Metotlar
fillRect()
strokeRect()
clearRect()
Path Metotlar (Karmaflk fiekiller izmek)
beginPath()
moveTo()
lineTo()
quadraticCurveTo()
bezierCurveTo()
closePath()
arc ()
rect ()
fill() ve stroke()
clip() Metodu
Gradient ve Pattern Metotlar
addColorStop()
createLinearGradient()
createRadialGradient()
createPattern()
Transformation Metotlar
scale()
rotate()
translate()
transform() ve setTransform()
Canvas zerinde Metin fllemleri
font, textAlign, textBaseline zellikleri
fillText() ve strokeText()
measureText()
153
156
160
162
167
167
170
170
172
174
175
175
175
178
179
180
182
184
190
192
193
194
194
195
198
204
206
207
209
211
212
215
215
218
220
+HTML5-icindekiler
6/17/11
4:23 PM
Page xi
NDEKLER xi
Resimlerle alflmak
drawImage() Metodu
Pixel Manipulation
createImageData()
getImageData ()
putImageData()
Canvas ile Animasyon Temelleri
Nesnelerin Yatay ya da Dikeyde Dz
Bir izgi zerinde Hareket Ettirilmesi
Nesnelerin Yatay ve Dikeyde Beraber Hareket Ettirilmesi
Nesnelerin Dairesel Olarak Hareket Ettirilmesi
Tarayc Destei
221
221
227
227
229
231
249
249
255
266
277
7 HTML5 VE SVG
SVG ve HTML5 Kullanm
Dikdrtgen izimi <rect>
Daire izimi <circle>
Elips izimi <ellipse>
izgi izimi <line>
oklu izgi izimi <polyline>
okgen izimi <polygon>
Yol izimi <path>
281
281
283
285
285
286
287
287
288
8 HTML5 AUDIO VE VIDEO ELEMANLARI

<audio>
src
controls
autoplay
preload
loop
<video>
poster
<source>
HTMLMediaElement Arayz ile Tanmlanan zellikler ve Metotlar
zellikler (Properties)
Metotlar
canPlayType()
291
291
292
292
293
293
293
294
294
295
298
298
301
301
+HTML5-icindekiler
6/17/11
4:23 PM
Page xii
xii HER YNYLE HTML5
load()
play()
pause()
Medya eriini Kontrol Etmek iin Kullanlabilecek Olaylar
HTML Event Handlers (HTML Olay Ynlendiricileri)
DOM Level 0 Event Handlers
DOM Level 2,3 Event Listener
303
303
303
307
308
308
309
9 SRKLE-BIRAK fiLEMLER ARAYZ (DRAG and DROP API) 321

dataTransfer Nesnesi
321
dataTransfer Nesnesi zellikleri
321
dataTransfer Nesnesi Metotlar
322
DragEvent (Srkleme Olaylar)
323
10 GEOLOCATION API
geolocation Nesnesi
getCurrentPosition()
watchPosition()
clearWatch()
position Nesnesi
coords Nesnesi
positionError Nesnesi
positionOptions Nesnesi
Online Harita Servislerini Kullanmak
Tarayc Destei
331
331
332
333
334
334
334
335
337
338
344
11 WEB STORAGE
345
sessionStorage (Oturum Depolama)
345
localStorage (Yerel Depolama)
346
Storage Nesnesi (sessionStorage, localStorage) zellik ve Metotlar 346
setItem()
346
getItem()
346
removeItem()
347
347
clear()
key()
347
348
length zellii
356
Tarayc Destei
+HTML5-kunye
6/17/11
4:21 PM
Page i
HER YNYLE
HTML5
brahim
elikbilek
Yayn Datm Yazlm ve Eitim

Hizmetleri San. ve Tic. Ltd. fiti.
+HTML5-kunye
6/17/11
4:21 PM
Page ii
KODLAB 53
HER YNYLE HTML5
BRAHM ELKBLEK
ISBN 978-605-4205-48-6
Yaynclk Sertifika No: 13206
1. Bask: Haziran 2011

Yayn Ynetmeni: Uur Geliflken
Sayfa Dzeni: Mehmet ztrk
Satfl: Hseyin stnel
Bask: fiefik Basm ve Yaynclk San. Tic. Ltd. fiti. Tel: (212) 549 62 62
Bu kitabn btn yayn haklar Kodlab Yayn Datm Yazlm ve Eitim Hizmetleri
San. ve Tic. Ltd. fiti.ne aittir. Yaynevimizin yazl izni olmakszn ksmen veya tamamen alnt yaplamaz, kopya ekilemez, oaltlamaz ve yaynlanamaz.
KODLAB Yayn Datm Yazlm ve Eitim Hizmetleri San. ve Tic. Ltd. fiti.
Alemdar Mah. Salkm St Sok. Aa fl Han

No: 20 Kat:1 D: 3 Sultanahmet / STANBUL
tel: (212) 514 55 66 fax: (212) 514 66 61

e-posta: bilgi@kodlab.com web: www.kodlab.com
+HTML5-kunye
6/17/11
4:21 PM
Page iii
brahim elikbilek
1980 Kars doumludur. 2002 ylnda Frat niversitesi T.E.Fni bitirdi. eflitli eitim
kurulufllarnda yazlm uzmanl ile ilgili dersler verdi. 2005 ylnda Suflehri Atatrk
Endstri Meslek Lisesine Bilgisayar retmeni olarak atand. 2009 Ylndan itibaren
bu grevini Kocaelide srdrmektedir. JavaScript, CSS, DHTML, AJAX, ASP.NET
ve C# konularnda seminerler verdi ve makaleler yazd. Web programlama alannda
birok uygulama gelifltirdi. Ayrca yazarmzn daha nce KODLABtan JavaScript ve
XHTML ve CSS kitaplar kmfltr.
Yazarmz hakknda daha detayl bilgi almak iin; http://www.ibrahimcelikbilek.com
adresini ziyaret edebilirsiniz.
+HTML5-kunye
6/17/11
4:21 PM
Page iv
iv
nsz
Kitabn siz okurlarm iin faydal olmas dileiyle szlerime bafllamak istiyorum.
Kitap ierisinde HTML5 yaps ile birlikte bu yap ierisinde bulunan yeni elemanlar, zellikler ve HTML5in duyurulmas ile beraber nemi artan ek teknolojiler
hakknda genifl bilgiler bulabilirsiniz.
Konular iyice kavrayabilmek iin; kitap iinde verilen rnekleri dikkatlice inceleyip uygulamal ve bu rnekleri referans alarak yeni uygulamalar gelifltirmeye alflmalsnz.
HTML5; html dili iin yeni stratejiler ve hedefler ortaya koyan ve farkl web tarayclar iin standardizasyonu amalayan yeni nesil bir srm olarak karflmza kmaktadr. Olaya bu adan yaklaflrsak; bu dilin nmzdeki srete hzl bir flekilde gelifleceini ve poplaritesini daha da arttracan grebiliriz. Aslnda dilin sadece kendisi deil kulland ek teknolojilerde geliflime ak olmakla beraber bu dile byk
g katmaktadr.
Kitap ierisindeki konularn daha iyi anlafllmas bakmndan az da olsa JavaScript
ve CSS bilgilerine sahip olmanz gerekmektedir. nk HTML5 yapsnn kulland programlama dili JavaScripttir. Bu adan HTML5 ile beraber JavaScript dilinin hak ettii konuma geldiini dflnmekteyim.
HTML5 ya da dier programlama konular ile ilgili sorularnz www.kodlab.com
sitesinde bulunan yazara sor ksmndan ya da www.ibrahimcelikbilek.com adresinden bana iletebilirsiniz.
brahim elikbilek
Gerekli Programlar
Kitabn siz okurlarm iin faydal olmas dileiyle szlerime bafllamak istiyorum.
Kitap ierisindeki konular anlatlrken temelde kod mantn kavramanz hedeflenmifltir. Kodlar rendikten sonra uygulamalar istediiniz herhangi bir programda,
hatta bir metin editrnde bile gelifltirebilirsiniz. Profesyonel uygulamalar olufltururken; gerek tasarm ekran, gerek sunduu yardmc aralar ve dier zellikleri ile geliflmifl web sayfas editrlerini kullanmak iflinizi kolaylafltracaktr.
Kitab verimli bir flekilde takip etmek iin kullanabileceiniz programlar flunlardr:
Aptana Studio 3: www.aptana.com adresinden indirebilirsiniz.
Expression Web 4: Deneme srmn www.microsoft.com/expression/ adresinden
indirebilirsiniz.
Dreamweaver CS5.5: Deneme srmn www.adobe.com adresinden indirebilirsiniz.
+HTML5-kunye
6/17/11
4:21 PM
Page v
Merhum Babam Ali Osman ELKBLEKin ansna...
+HTML5-kunye
vi
6/17/11
4:21 PM
Page vi
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 1
HTML5E GRfi
Genel Bakfl
HTML5, html dilinin en son srmdr. Modern web uygulamalar gelifltirmek
iin yeni eklentiler ve zellikler sunar. HTML5; html dili iin yeni stratejiler ve hedefler ortaya koyan ve farkl web tarayclar iin standardizasyonu amalayan yeni nesil bir srm olarak karflmza kmaktadr. HTML5 ile html dilinin ifllevsellii, programlama ve sunum gc artmfltr. HTML5e yeni eklenen yapsal elemanlar sayesinde fazla kod yazmadan sitenizin grsel tasarmn yapabilir, JavaScript
ve CSS3 teknolojilerini daha etkili bir flekilde kullanabilirsiniz. HTML5 tasarmclarn web sayfalarnda zengin medya ierikleri kullanmalarna ve interaktif web uygulamalar gelifltirebilmelerine olanak salayan yeni elemanlar, zellikler ve teknolojiler barndrr.
HTML5 iinde bulunan tm teknolojiler aslnda HTML5 ile beraber yeni oluflturulan
ve duyurulan teknolojiler deildir. W3C tarafndan nceden oluflturulmufl ve modern
web tarayclar tarafndan ksmen desteklenen bir takm teknolojilerde (rnein;
SVG-Scalable Vector Graphics) HTML5 ierisine dahil edilmifltir. W3C HTML5 dilini gelifltirmeye devam etmektedir bu adan ilerleyen zaman dilimlerinde dile yeni
eklentilerin olmas muhtemeldir. Ayrca HTML5 dilinin dier bir avantaj da,
HTML5 dili iinde bulunmayan fakat HTML5in duyurulmas (kullanlmas) ile beraber etkinlii (nemi) artan (artacak olan) dier teknolojilerin de modern web tarayclar tarafndan desteklenmeye bafllanmasdr. (rnein; WebGL, FileReader,
Faster JavaScript, Geolocation API gibi.)
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 2
2 HER YNYLE HTML5
Ksaca HTML5 dilini flyle zetleyebiliriz:

Sadelefltirilmifl, dzeltilmifl HTML4 ve XHTML dillerinin son srmdr.
Daha fazla yapsal elemana, form elemanlarna ve yeni zelliklere sahiptir.
Geliflmifl multimedia destei sunmaktadr.
erisinde yeni teknolojiler barndrr ya da nceden var olan teknolojilerin kullanmn salar.
JavaScript ve CSS3 teknolojilerini daha etkili bir flekilde kullanmamz salar.
HTML5in nasl ortaya kt ile ilgili ksa bir bilgi verelim...
1999 ylnda W3C (Word Wide Web Consortium) tarafndan HTML 4.01 duyurulmufltur. HTMLin bu srmnden ksa bir sre sonra XML 1.0 yaps yaynland.
W3C HTML dilini XML tabanl yapmak iin bu iki yapy birlefltirdi ve 2001 ylnda XHTML 1.0 olarak duyurdu. 2003 ylnda W3C tarafndan XForms 1.0
(XHTML Extended Forms) yaynlanarak var olan XHTML yaps glendirilmek
istendi. W3C yazarlarnn dflncesi XHTML yapsnn gelifltirilmesi ve ek teknolojilerle desteklenmesi fleklindeydi (XHTML2+XForms+SVG+MathMl+RDFa).
Bu yap tarayc reticileri tarafndan kabul grmedii iin 2004 ylnda Apple, Mozilla Foundation (Firefox) ve Opera tarayc reticileri bir araya gelerek
WHATWG (Web Hypertext Application Technology Working Group) isimli bir
alflma gurubu oluflturdular. Aslnda HTML5in doufl hikayesi burada bafllamfltr.
2006 ylnda W3C konsorsiyumu XHTML dilini gelifltirmekten vazgeip
HTML5in geliflimine katlacan duyurdu. 2008 ylnda W3C tarafndan
HTML5in (First Public Working Draft) ilk alflma tasla duyuruldu. W3C konsorsiyumu 2009 ylnda XHTML 2.0 alflmalarn durduracan aklamfltr.
HTML5in Yaps
HTML5in temel elemanlar iin getirdii yeniliklere bakalm;
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5</title>
</head>
<body>
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 3
HTML5E GRfi 3
</body>
</html>
Yeni DOCTYPE Bildirimi

<!DOCTYPE html>
Belge trn ayarlamak iin kullandmz bu etiket, HTML5 ile daha ksa ve kullanfll bir hale getirilmifltir. rnein; XHTML 1.0da belge tr flekilde ayarlanabiliyordu ve tanmlama olduka uzundu. HTML5, bu karmaflay ortadan kaldrmfl
ve geriye doru uyumluluu (eski HTML srmleri ile) korumufltur. Bu etiketin
HTML5 aa yaps iinde belgenin en baflnda tanmlanmas zorunludur.
fiimdi nceki HTML srmlerinde yaplan DOCTYPE tanmlamalarna bakalm.
XHTML 1.0 DOCTYPE (Transitional) tanmlamas:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
XHTML 1.0 DOCTYPE (Strict) tanmlamas:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
HTML 4.01 DOCTYPE (Strict) tanmlamas:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

http://www.w3.org/TR/html4/strict.dtd>
Dikkat ederseniz tanmlamalar olduka uzun ve aslnda Strict olan yaplar geriye doru uyumluluu desteklemiyor. rnein; sayfanzda XHTML 1.0 DOCTYPE (Strict)
tanmlamasn kullanrsanz. Belge ierisinde sadece XHTML 1.0 srmnde var
olan (desteklenen) etiketleri ya da zellikleri kullanmanza izin verilir. Strict tanmlamas yaparsanz nceki HTML srmlerinde var olan fakat XHTML 1.0 tarafndan
desteklenmeyen etiket ya da zellikleri kullanmanza izin verilmez. flte bu durum,
Strcit yapsnn geriye doru uyumlu olmad anlamna gelir.
Belge ierisinde DOCTYPE tanmlamasn yapmazsak, tarayc sayfay Quirks
Modda alfltracaktr. Tam da burada tarayc modlar ile ilgili bilgi vermek istiyorum. Tarayc modlar taraycnn web sayfasn nasl yorumladn/yorumlayacan gsterir. IE5/MAC srm ile beraber tarayclarda gsterilecek web sayfalarnn
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 4
4 HER YNYLE HTML5
standartlara uymas beklenmifltir. Standartlara bal kalnmadan yazlan eski web

sayfalarnn tarayclar tarafndan gsterilebilmesi iin IE5 ile beraber Microsoft
DOCTYPE kavramn ortaya atmfltr. Buna gre web belgesinin en baflnda DOCTYPE
tanmlamas olan sayfalar standart modda, DOCTYPE tanmlamas olmayan (eski
sayfalar) tuhaf modda alflr. Dier tarayc firmalarnn da benimsemesi ile Tarayc Modlar kavram ortaya kmfltr.
Standard olarak tane tarayc modu bulunmaktadr. fiimdi bunlar inceleyelim.
Quirks Mode: DOCTYPE tanmlamasn yapmazsak taraycnn sayfay Quirks
Modda alfltracan sylemifltik. Bu durumda sayfanz oluflturulurken tarayc W3C standartlarna bal kalmaz. Sayfa grnm ya da elemanlarn yerleflimi kullanlan taraycya bal olarak deifliklik gsterebilir. DOCTYPE tanmlamas yapmamfl iseniz; web sayfanz taraycnn var olan eski kurallarna gre
deerlendirilecek ve taraycda oluflturulacaktr. Tarayc, Quirks modda alfltnda farkl tarayclarda CSS zelliklerinin doru olarak sayfa elemanlarna
uygulanmasnda farkl problemler kabilmektedir. Ayrca tarayc Quirks
Modda kurallara bamllk asndan daha esnek davranacaktr. rnein;
DOCTYPE tanmlamas yapmazsanz IE6 ve alt srmleri W3C kutu modeli yerine kendi kutu modelini kullanr.
Standart Mode: DOCTYPE tanmlamas yaparak sayfamzn tarayc tarafndan

standart modda gsterileceini belirtmifl oluruz. Standart modda tarayclar
standartlara dayal sayfamz yorumlayacaktr. Standart modda tarayc sk bir
denetim yapar ve sayfa grnts oluflturur. HTML5 bildiriminde no quirks
mode olarak adlandrlmfltr.
Almost Standart Mode: Standart mod ile hemen hemen ayn olan bu mod;
Opera, Safari, Chrome, Firefox ve IE8 tarafndan desteklenmektedir. HTML5
bildiriminde limited quirks mode olarak adlandrlmfltr.
Yeni Character Set Bildirimi

Meta etiketi <head> etiketleri arasnda bildirilir ve sayfa hakknda tarayclara ya

da arama motorlarna bir takm bilgiler sunar. charset zellii belge ierisinde
kullanlacak karakter seti (kmesi) tanmlamas iin kullanlr.
nceki HTML srmlerinde charset tanmlamasnn nasl yapldna bakalm.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 5
HTML5E GRfi 5
<meta http-equiv=content-type content=text/html;charset=utf-8>
meta etiketinin zelliklerine ksaca bakalm. (Standart zellikler 2. Blmde an-
latlacaktr.)
name: Meta etiketi ierisinde deer atanacak nceden tanml alt zellik isimlerini tanmlamak iin kullanlr. Bu zellikle tanmlanan alt zellie deer atamak iin content zellii kullanlr.
name zelliine atanabilecek alt zellikler aflada listelenmifltir.
application-name: Uygulama adn tanmlamak iin kullanlr.
author: Web sayfasn oluflturan kifli hakknda bilgi tanmlamak iin kullanlr.
description: Sayfa ierii ile ilgili tanmlayc bir bilgi (aklama) tanmla-
mak iin kullanlr.
generator: Sayfann oluflturulduu program (yazlm) ile ilgili bilgi tanmlamak iin kullanlr.
keywords: Arama motorlar iin virglle ayrlmfl anahtar kelimeler tanmla-
mak iin kullanlr.

rnek:
<meta name=keywords content=HTML5, HTML5 Programlama, HTML5 JavaScript>
Yukardaki bildirim web sitesi ile ilgili arama motorlar iin anahtar kelimeler
tanmlar. Ayrca WHATWG MetaExtensions ile tanmlanan afladaki alt
zellikleri de kullanabilirsiniz.
creator, googlebot, publisher, robots, slurp, viewport
http-equiv: default-style, refresh alt zelliklerini deer atamak iin tanmlar. Belirtilen alt zelliklere content zellii ile deerler atanr.
default-style: Alternatif stil tanmlamas yapmak iin kullanlr.
refresh: Belirtilen sre sonunda sayfay tekrar yklemek ya da kullancy
baflka bir URL adresine ynlendirmek iin bu alt zellii kullanabilirsiniz.

rnek:
<meta http-equiv=refresh content=5; url=http://www.ibrahimcelikbilek.com >
Mevcut sayfa yklendikten 5 sn sonra kullanc url ile belirtilen adrese ynlendirilecektir.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 6
6 HER YNYLE HTML5
content: http-equiv ya da name zelliklerinde tanmlanan alt zelliklere deer atamak iin kullanlr.
charset (HTML5): Sayfada kullanlan karakter seti (kmesi)ni tanmlamak

iin kullanlr. HTML5 ile yeni tanmlanan bir zelliktir. Aslnda UTF8 kullanmak ou zaman yeterli olacaktr. Sayfanz iin bir charset tanmlamas
yapmazsanz sayfanzdaki karakter ya da sembollerin gsteriminde problem yaflayabilirsiniz. charset ile karakter setini tanmlamak aslnda tarayclarn karakter ya da sembolleri dzgn bir flekilde gstermeleri iin kullanlan algoritmann bir parasdr.
HTML5 bildiriminde; meta etiketinin scheme zellii ve http-equiv zelliinin content-type, content-language, set-cookie alt zelliklerinin kullanlmas nerilmemektedir.
HTML5 Sz Dizimi Kurallar

HTML5, XHTML gibi XML temelli olmad iin programclara ok gevflek bir
sz dizimi yaps sunar. rnein; bir HTML5 sayfas olufltururken html, head,
body etiketlerini belirli flartlar altnda kullanmayabilirsiniz. Bu durumda sizin yazmadnz html, head, body etiketleri tarayc tarafndan sayfaya dahil edilecektir.
Ancak bu durum kullanfll deildir. nk bu durumda IEde problemler yaflabiliriz. Afladaki uygulamamz HTML5in ne kadar esnek bir sz dizimi olduunu
gstermek iin yapyorum. Biz uygulamalarmzda html, head, body elemanlarn
HTML5 temel aa yaps ierisinde her zaman kullanacaz. Afladaki rnei
farkl tarayclarda alfltrp sonuca bakalm.
<!DOCTYPE html>
<title>Her Ynyle HTML5</title>
<p>HTML5in Getirdikleri</p>
Firefox (Firebug)
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 7
HTML5E GRfi 7
Opera (Dragonfly)
Dikkat ederseniz Firefox ve Opera sayfay gsterirken; html, head, body elemanlarn sayfaya dahil etti. Bunun yannda IE8 yazlmayan html, head, body etiketlerinin sadece alfl taglarn oluflturulur.
HTML5in sz dizimi kurallarna bakalm...
1. Alan tm etiketler kapatlmaldr. Baz etiketler bir ierik barndrmaz, sakla-
dklar ierikler etiketin bir zellii ile tanmlanr. Bu durumda etiket alfl tagnda / karakteri ile kapatlr. Burada flunu belirtmek isterim. Eer elemanmz
void elements (alfl kapanfl taglar arasnda bir text (metin) ya da baflka bir
eleman bulunmayan, yani sadece alfl tag (etiketi) bulunan elemanlar; rnein; area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source) ise bu durumda / karakterinin, bu elemanlar zerinde bir etkisi olmayacaktr. Yani bu karakteri kullanmayabilirsiniz. Fakat elemanmz foreign elements (namespace-isim alan ieren elemanlar) ise bu durumda alfl
tag / karakteri ile kapatlmaldr.
rnek kullanmlar:
<a>Link (Yanlfl, kapanfl etiketi yok.)
<p>Aklama<p> (Yanlfl, kapanfl etiketi yok.)

<div>Div eleman ierii</div> (Doru.)
<span></span> (Doru.)
<meta charset=utf-8> ya da <meta charset=utf-8/> (kisi de doru.)

NOT
Tavsiye: Sadece alfl etiketi bulunan tm elemanlar kapatmadan nce / karakterini kullannz. rnein; <img src=ana.jpg alt=ana_resim />
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 8
8 HER YNYLE HTML5
2. ie girmifl, bir biri ierisine yuvalanmfl elemanlarda elemanlarn kapanfl s-
rasna dikkat edilmelidir. lk nce alan etiket, en sonda kapatlmaldr.
<div>Div <em>eleman <span>ierii</span></em></div> (Doru)
<div>Div <em>eleman <span>ierii</em></span></div> (Yanlfl)
3. Etiket ierisinde kullanlan zellik isimleri byk ya da kk harfle yazlabilir.
zelliin deeri kendisi ile ayn ismi taflyorsa sadece zellik ad yazlabilir.
zellik deerleri eer bir boflluk iermiyorsa trnak ierisine alnmayabilir. Ya da
isterseniz zellik isimlerini tek trnak ya da ift trnak ierisine alabilirsiniz.
rnek kullanmlar:
<input type=checkbox checked />
checked zelliinin deeri checked olduundan yazlmad. Sadece zellik
ad yazld.
<img src=1.jpg alt=1resim />
alt zelliine atanan metin tek trnak ierisine alnarak yazld.

<div class=header></div>
class zelliine atanan deer trnak ierisine alnmadan yazld.
Yukardaki kullanmlar HTML5 iin doru olarak kabul edilir.

NOT
Tavsiye: Etiket ismi, etiket iinde kullanlan zellik ismi ya da zellie atanan deerleri kk harfle yaznz. Deerleri ift trnak ierisine alarak zelliklere ataynz.
Temiz (okunabilir), tutarl (az hatal) kodlar oluflturmak iin tavsiyelere uymanz
neririm.
HTML5 iin Tarayc Destei

Peki, HTML5i tarayclar, ne kadar destekliyor?
Aflada ayrntl bir flekilde anlatacam ama flunu bilmenizi isterim. Yeni nesil tarayclar (Modern web tarayclarnn son srmleri), HTML5in yeni getirdii teknolojileri, elemanlar ve zellikleri destekleme konusunda hzl admlar atmaktadrlar. Bu admlar sonucunda tarayclarn son srmleri (IE9, Firefox 4, Safari 5,
Opera 11.11) HTML5i byk lde destekler duruma gelmifllerdir. HTML5e tarayclar tarafndan verilen destei sadece yeni elemanlar ya da zelliklere verilen
destek olarak dflnmemek gerekir. Bu destek; CSS3, JavaScript eklentileri, DOM
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 9
HTML5E GRfi 9
(Document Object Model) ve HTML5in duyurulmas (kullanlmas) ile beraber etkinlii (nemi) artan (artacak olan) yeni ya da var olan teknolojileri de bir paket
olarak iermektedir. Bu nedenle aflada HTML5 teknolojisinin getirdii ya da
HTML5 ile beraber kullanm artan/kullanm giren tm teknolojilerin tarayclar
tarafndan ne lde desteklendiine bakmfl olacaz.
Tarayc Grntleme Motoru

(Layout Engne) ve JavaScrpt Motoru
(JavaScrpt Engne)
Tarayc grntleme motoru, web sayfasnn ieriini tarayc ekrannda oluflturmak/gstermekle sorumludur. Tarayclar modler sistemi benimsemifllerdir. Bu
flu anlama gelir tarayc yaps genel olarak kullanc arayz ve ifl yapan arabirimler olmak zere ikiye ayrlabilir. Web taraycs gelifltiricileri aslnda grntleme
motoru temelli tarayc olufltururlar. Tarayclar kendi oluflturduklar grntleme
motorlarn kullanrlar ve bunlar gncellerler (Aslnda grntleme motorlarn
gncellediklerinde belirtilen tarayc iin yeni bir srm ortaya kmfl olur). Bu
grntleme motorlarna dayal uygulamalar gelifltirirler. Bir taraycnn yeni teknolojileri desteklemesi; grntleme motorunun belirtilen teknolojileri desteklemesi anlamna gelir. Tarayclarda kullanc arayzleri sadece grntleme motorunun iflledii verileri kullancya gsteren ve kullanc ile iletiflimde bulunan bir
yap olarak tanmlanabilir.
Tarayclar, web belgesi ierisindeki JavaScript kodlarn yorumlamak ve ifllevlerini yerine getirmek (derlemek) iin kendi oluflturduklar JavaScript motorlarn (JavaScript Engine) kullanlrlar (Bu JavaScript motorlarnn bir ksm ak kaynak
kodludur). JavaScript yorumlayclar kullandklar bellek miktar ya da dier zellikleri ile tarayc hzn etkileyen en nemli faktrlerin baflnda gelir.
Tarayclarn kullandklar grntleme motorlar, JavaScript yorumlayclar aflada listelenmifltir.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 10
10 HER YNYLE HTML5
Frefox
Layout Engine Ad: Gecko
Gecko Versiyonu
Tarayc Srm
Gecko 1.7
Firefox 1.0
Gecko 1.8
Firefox 1.5
Gecko 1.8.1
Firefox 2
Gecko 1.9
Firefox 3
Gecko 1.9.2
Firefox 3.6
Gecko 2
Firefox 4
(JS Yorumlaycs JgerMonkey)
Opera
Layout Engine Ad: Presto
Presto Versiyonu
Tarayc Srm
1.0
Opera 7.0
2.0
Opera 9.0
2.1
Opera 9.5
2.1.1
Opera 9.6
2.2.15
Opera 10.0, Opera 10.1
2.5.24
Opera 10.5
2.6.30
Opera 10.6
2.7.62
Opera 11 (JS Yorumlaycs Carakan)
Internet Explorer
Layout Engine Ad: Trident
Trident Versiyonu
Tarayc Srm
4.0
IE8
IE9 (JS Yorumlaycs Chakra)
5.0
Dier alt srmleri iin

modler bir isim belirtilmemifltir.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 11
HTML5E GRfi 11
Safar
Layout Engine Ad: WebKit
WebKit Versiyonu
Tarayc Srm
526.12.2 , 528.1.1 ,
528.16 , 528.17
Safari 4.0
530.17
Safari 4.1
530.19.1
Safari 4.0.2
531.9.1
Safari 4.0.3
531.21.10
Safari 4.0.4
531.22.7
Safari 4.0.5
533.16
Safari 5.0
533.18.5
Safari 5.0.2
533.19.4
Safari 5.0.3 (JS Yorumlaycs Nitro)
Yukardaki liste de Windows iflletim sistemi iin retilen Safari srmleri ve WebKit versiyonlar yazlmfltr.
Afladaki tablolarda tarayclarn tm versiyonlarnn; HTML5 etiket, zellik ve
teknolojilerini destek durumlarn daha iyi gstermek iin tarayclarn Layout Engine versiyon numaralar kullanlmfltr.
Tablolardaki yeni eleman, zellik ya da teknolojinin karflsnda bulunan Layout
Engine srm ve daha sonra kan srmleri ilgili eleman, zellik ya da teknolojiyi destekler. Ayrca afladaki tarayc destek durumlar bu kitap yazld tarih itibariyle var olan durumdur.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 12
12 HER YNYLE HTML5
HTML5 ile Yeni Tanmlanan Elemanlara ve

zelliklere Tarayclarn Verdii Destek
Yeni Yapsal Elemanlar
Eleman Ad
<section>
Internet Explorer
Firefox
Trident 5.0
Gecko2
Opera
Safari
<nav>
<article>
<aside>
<hgroup>
<header>
WebKit 533
Presto 2.7
<footer>
<figure>
<figcaption>
Nightly Build*
eklentisi le
<mark>
<progress>
<time>
<meter>
<command>
<details>
<summary>
<ruby>, <rt>,
<rb>
Win7 iin yok
Yok
Yok
Yok
Yok
Yok
Yok
Yok
Yok
Presto 2.7
Destei var
Yok
Yok
Yok
Yok
Yok
Yok
Yok
Ksmen
Yok
Yok
Yok
Ksmen
Destei Var
Yok
Yok
WebKit 533
Yeni Media Elemanlar

Eleman Ad
Internet Explorer
Firefox
Opera
Safari
<video>
Trident 5.0
Gecko1.9.1
(Firefox 3.5)
Presto 2.5
WebKit 525
(Safari 3.0)
IE 3.0
Gecko 1.7
Presto 1.0
Destei var
<audio>
<source>
<embed>
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 13
HTML5E GRfi 13
Canvas Eleman
Eleman Ad
<canvas>
Internet Explorer
Firefox
Opera
Safari
Trident 5.0
Gecko1.9.2
Presto 2.0
Destei var
Belirtilen tarayclarn canvas elemann hangi zellik ve yntemlerini destekledii

Blm 6da ayrntl bir flekilde anlatlacaktr.
Yeni Form Elemanlar
Eleman Ad
<datalist>
<output>
<keygen>
Internet Explorer
Yok
Firefox
Opera
Gecko 2.0
Presto 2.0
Destei var
Presto 1.0
Safari
Yok
Nightly Build*
eklentisi ile
Destei var
Input Etiketinin Type zelliine Atanabilecek Yeni Deerler

Deer Ad
search
Internet Explorer
Firefox
Opera
Presto 2.7
tel
Gecko 2.0
url
Safari
Destei var
WebKit 528
email
datetime
date
month
week
Time
datetime-local
Yok
Presto 2.0
Win7 iin yok
Yok
Number
range
color
Destei var
Presto 2.7
Win7 iin yok
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 14
14 HER YNYLE HTML5
Input Etiketi iin Yeni zellikler

zellik Ad
Internet Explorer
Firefox
Destei var (IE 8.0)
Gecko1.9.1
(Firefox 3.5)
Yok
Gecko 2.0
Destei var (IE 8.0)
Yok
Presto 2.5.24
list
Destei var
(Safari 4.0)
Gecko 2.0
Presto 2.0
Yok
min, max, step
Yok
Presto 2.0
Gecko1.9.1
(Firefox 3.5)
Sadece
type=file
in
Presto 2.7
autocomplete
autofocus
form
height and
width
multiple
novalidate
pattern
placeholder
required
formtarget
Yok
Gecko 2.0
Opera
Safari
Presto 2.0
Destei var
(Safari 4.0)
Nightly Build*
eklentisi ile
WebKit 528
Presto 2.7
Gecko 2.0
Presto 2.0
Presto 2.0
Destei var
(Safari 4.0)
WebKit 528
Presto 2.7
Nightly Build*
eklentisi ile
Presto 2.7
formaction
formmethod
formenctype
formnovalidate
min, max
Nightly Build*
eklentisi le
step
WebKit 528
WebKit 528
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 15
HTML5E GRfi 15
Dier Specfcatons (W3C Bildirimleri) ve

Teknolojilere Tarayclarn Verdii Destek
zellik Ad
Internet Explorer
Firefox
IE8
Firefox 3.5
Web SQL Database
Yok
Yok
Opera 10.5
Safari 3.2
WebSockets
Yok
Firefox 4
Opera 11
Safari 5
Web Workers
Yok
Geolocation API
Yok
Firefox 3.5
Opera 10.6
Offline Web Applications
Yok
WebGl
Yok
Firefox 4
Yok
Nightly Build*
eklentisi ile
Drag-And-Drop
Ksmen
Firefox 3.5
Yok
Destei var
Selectors API Level1

Web Storage
Opera
Opera 10
Opera 10.5
Safari
Safari 3
Safari 5
Safari 4
HTML5 ile beraber gelen Standart (Ortak) zellikler ve elemanlar iin tanmlanan
dier yeni zellikler 2. Blmde anlatlacaktr.
HTML5 Dili erisindeki

Tm Etiketlerin Listesi
Etiket
<a>
Durum
<abbr>
<acronym>
HTML5 tarafndan desteklenmiyor.
<applet>
<article>
Yeni (HTML5)
<address>
<area>
<aside>
<audio>
Yeni (HTML5)
Yeni (HTML5)
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 16
16 HER YNYLE HTML5
<b>
<base>
<basefont>
<big>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
Yeni (HTML5)
<center>
<caption>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
Yeni (HTML5)
Yeni (HTML5)
<del>
<details>
Yeni (HTML5)
<dir>
<dfn>
<div>
<dl>
<dt>
<em>
<embed>
Yeni (HTML5)
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 17
HTML5E GRfi 17
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
Yeni (HTML5)
Yeni (HTML5)
Yeni (HTML5)
<frame>,<frameset> HTML5 tarafndan desteklenmiyor.

<h1>..<h6>
<head>
<header>
<hgroup>
<hr>
Yeni (HTML5)
Yeni (HTML5)
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
Yeni (HTML5)
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
Yeni (HTML5)
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 18
18 HER YNYLE HTML5
<meter>
Yeni (HTML5)
<noframes>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
Yeni (HTML5)
<param>
<pre>
<progress>
Yeni (HTML5)
<rp>
Yeni (HTML5)
<q>
<rt>
<ruby>
<s>
Yeni (HTML5)
Yeni (HTML5)
<samp>
<script>
<section>
<select>
Yeni (HTML5)
<small>
<source>
Yeni (HTML5)
<strike>
<span>
<strong>
<style>
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 19
HTML5E GRfi 19
<sub>
<summary>
<sup>
Yeni (HTML5)
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
Yeni (HTML5)
<tr>
<tt>
<u>
<var>
<video>
<wbr>

Yeni (HTML5)
Yeni (HTML5)

<!DOCTYPE>
NOT
HTML5 dili ierisine eklenen yeni etiketler ilerleyen blmlerde uygulamal olarak anlatlacaktr. Fakat HTML diline yeni bafllyorsanz,
HTML5 yapsnda bulunan ve nceki HTML srmlerinden gelen eski
etiketlerle ilgili bilgi almak iin; KODLABtan kan XHTML ve
CSS isimli kitabmdan faydalanabilirsiniz.
+HTML5-BOLUM1
6/17/11
4:37 PM
20 HER YNYLE HTML5
Page 20
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 21
YEN ELEMANLAR
ve ZELLKLER
Bu blmde HTML5 ile beraber yeni tanmlanan elemanlar ve zelliklere bakacaz.

Fakat daha nce ierik modeli ve tm elemanlarn sahip olduklar ortak zellikleri inceleyelim.
HTML5 dilinde elemanlarn saklayabilecekleri ierikler guruplandrlmfl ve erik
Modeli (Content Models) olarak adlandrlmfltr. erik modeli elemanlarn ne eflit bir ierie sahip olabileceklerini tanmlamak iin kullanlr. Bir eleman birden
fazla ierik trn destekleyebilir.
HTML5 tarafndan tanmlanan ierik trleri flyledir:
Content Type
Aklama
Embedded
Dfl kaynakl ve ya baflka bir etiketleme dili ile ya da programatik

olarak (rnein; JavaScript ile Canvas eleman kullanm)
tanmlanan ierikler. Bu ierik trn kullanan elemanlara rnek;
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>,
<object>, <svg>, <video>
Flow
Metin, baflka bir eleman ya da gml olarak tanmlanan ierikler.

Bu ierik trn kullanan elemanlara rnek; <a>, <abbr>,
<address>, <article>, <aside>, <audio>, <b>, <bdo>,
<blockquote>, <br>, <button>, <canvas>, <cite>, <i>,
<iframe>, <img>, <input>, <script>, <section>, <select>,
<small>
Heading
Bir blmn baflln tanmlayan ierikler. Bu ierik trn kullanan

elemanlara rnek; <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 22
22 HER YNYLE HTML5
Sectioning
Metadata
<article>, <aside>, <nav>, <section> elemanlarnn ierik trdr.
<base>, <command>, <link>, <meta>, <noscript>, <script>,

<style>, <title> elemanlarnn ierik trdr. Sayfalarn grselliini
ve davranfllarn deifltirebilen ieriklerdir.
Phrasing
Paragraflar oluflturan metin ya da baflka bir eleman olarak

tanmlanan ierikler. Bu ierik trn kullanan elemanlara rnek;
<span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>,
<var>, <video>, <wbr>, <kbd>, <keygen>, <label>, <mark>,
<math>, <meter>
Interactive
Kullanc ile etkileflim iin tanmlanmfl interaktif ierikler. Bu ierik

trn kullanan elemanlara rnek; <a>, <button>, <details>,
<embed>, <iframe>, <keygen>, <label>, <select>, <textarea>
Standart zellikler
HTML5de her eleman afladaki ortak zelliklere sahiptir. fiimdi bu zelliklerin
neler olduuna bakalm.
accesskey
id
class
lang
contenteditable [HTML5]
spellcheck [HTML5]
contextmenu [HTML5]
style
dir
tabindex
draggable [HTML5]
title
dropzone [HTML5]
hidden [HTML5]
accesskey
Alabilecei Deer: {Karakter}
HTML elemanna klavye ksayolu tanmlamak iin kullanlr.
class
Ald Deerler: {Snf Seici Ad [*Birden fazla snf seici ad yazlabilir]}
Oluflturulmufl bir snf seiciyi HTML elemanna atamak (uygulanmasn salamak)

iin kullanlr.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 23
YEN ELEMANLAR VE ZELLKLER 23
rnek:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>class zellii</title>
<style type=text/css>
/*Bu Kitap boyunca uygulamalarda CSS ve JavaScript dilleri ile ilgili ksa ve uygulamaya
ynelik bilgiler verilecektir.*/
/*box-shadow zellii; html eleman iin tanml olan kutuya glge efekti vermek iin kullanlr
ve CSS3 ile tanmlanan bir zelliktir.
Sz Dizimi:
box-shadow:inset <offset-x><offset-y><blur-radius><spread-radius><color> ;
inset,blur-radius,spread-radius,color ; istee bal
<offset-x> <offset-y>:gerekli*/
.shadow{
margin-top:20px;
width:230px;
height:100px;
background-color:khaki;
/*Firefox 3.5 ve 3.6 iin*/
-moz-box-shadow:20px -10px crimson;
/*IE9 , Opera 10.5 , Firefox 4.0 iin CSS3 zellii*/
box-shadow:20px -10px
/*Safari iin*/
crimson;
-webkit-box-shadow:20px -10px
/*IE9 alt srmleri iin*/
crimson;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=20,
OffY=-10,
Color=crimson, Positive=true);
}
.renk{
font-family:calibri;
color:blue;
}
</style>
</head>
<body>
<p class=shadow>Birinci div eleman</p>
<div class=renk shadow>kinci div eleman</div>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 24
24 HER YNYLE HTML5
Eer class zelliine birden fazla snf seici ad yazlmfl ise, son yazlan snf seici en ncelikli olur.
Sayfamzn grnts:
Firefox 3.6 ekran grnts

IE8 ekran grnts
contentedtable
[HTML5]
Alabilecei Deerler: {true, false}
Eleman ieriinin dzenlenebilir olup olmadn ayarlamak iin kullanlr.

true deeri atanmflsa eleman ierii kullanc tarafndan dzenlenebilir/deifltirilebilir.
false deeri atanmflsa eleman ierii kullanc tarafndan dzenlenemez.
Eer bu zellik bir elemana atanmflsa kaltsal olarak elemann iinde bulunan alt
elemanlara geer. Bu zellii deeri ile beraber kullanmak flarttr.
rnein;
<div contenteditable></div> fleklindeki bir kullanm yanlfl olacaktr.
Dorusu;
<div contenteditable=true ></div> fleklinde olmaldr.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 25
rnek:
<!DOCTYPE HTML>
<html>
<head>
<title> contenteditable zellii</title>
</style>
</head>
<body>
<div contenteditable=true>
Dzenlenebilir erik</div>
<div contenteditable=true>
<img alt=dzenle src=html5.png />
</div>
</body>
</html>
Dikkat ederseniz sayfada bulunan div elemanlar iin contenteditable zellii true
deeri ile tanmlanmfltr. Bu durumda iki div elemannn da ierikleri kullanc tarafndan deifltirilebilir. Burada fluna dikkatinizi ekmek istiyorum. kinci div elemannn ierisinde bulunan img eleman, bu zellii kaltsal olarak almaktadr. Tm tarayclar img elemannn kullanc tarafndan silinmesine izin verir, fakat sadece IE ve
Firefox img elemannn sayfa zerindeki boyutlarn deifltirmemize izin verecektir.
Sayfann normal (varsaylan) ekran grnts
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 26
26 HER YNYLE HTML5
Tarayc Destei: Internet Explorer 5.5 +, Firefox 3+, Opera 9.0+, Safari (Destei var.)
NOT
+ karakteri belirtilen srm ve daha sonra kan srmler anlamna gelmektedir.
contextmenu
[HTML5]
Alabilecei Deer: {menu eleman id deeri}
Bir eleman menu eleman ile iliflkilendirmek iin kullanlr.

Tarayc Destei: Internet Explorer (Yok), Firefox (Yok), Opera (Yok), Safari (Yok)
dr
Alabilecei Deerler: {ltr, rtl}
HTML elemannn ierdii metnin yazlfl ynn ayarlamak iin kullanlr. ltr ile
rtl deerlerinden birini alr.
draggable
[HTML5]
Alabilecei Deerler: {true, false, auto}
Bir HTML elemannn srklenebilir olup olmayacan ayarlamak iin kullanlr.

true deeri atanmflsa kullanc mouse ile elemannn konumunu deifltirebilir.
(Eleman srklenebilir)
false deeri atanmflsa eleman srklenemez.
auto deeri atanmflsa ve yukardaki deerler kullanlmamfl ise tarayc kendi

varsaylan deerini kullanlr.
Tarayc Destei: Internet Explorer (Yok), Firefox 3.5+, Opera (Yok), Safari 5.0+
dropzone
Alabilecei Deerler: {copy, move, link }

NOT
Bu zellik, Drag and Drop isimli blmde ayrntl bir flekilde anlatlacaktr.
Srkle-brak ifllemlerinde brakma anndaki tarayc davranfln tanmlamak iin

kullanlr.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 27
copy deeri atanrsa srkleme iflleminin bittii yerde srklenen datann kopyas oluflturulur.
move deeri atanrsa srklenen datay srkleme iflleminin bittii yere taflr.
link deeri atanrsa srkleme iflleminin bittii yerde srklenen dataya bir
link oluflturur.
Tarayc Destei: Yok.
Alabilecei Deer: {Bir HTML elemann id zelliine atanan deer}
HTML elemanlarna benzersiz bir isim vermek iin kullanlr. Aslnda id zellii
ile HTML elemanlarna bir kimlik numaras verilir. JavaScript ile id zelliine deer atanmfl yani bir kimlii olan elemanlara ulaflabilir ve alflma annda bu elemann stil ve yapsal zelliklerini deifltirebiliriz.
rnek:
<!DOCTYPE HTML>
<html>
<head>
<title>id zellii</title>
<script type=text/javascript>
var goster = function (){
var yeni_text = document.createTextNode(id zellii);
/* Yeni bir text (metin) dm oluflturmak iin createTextNode() metodunu
kullandk.
*Kullanm:
*createTextNode(String):String (Bu gsterim Metodun hangi tip deer
aldn ve metodun geri dndrd deer trn tanmlar.)
*Dom Level 1,2
*/
var div = document.getElementById(icerik);
/* id zelliine icerik deerini almfl div elemannn referansn

aldk. getElementById() metodu belirtilen id deerini almfl eleman
obje(Nesne) olarak dndrr.
*Kullanm:
*getElementById(String):HTMLElement
*/
*Dom Level 1,2
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 28
28 HER YNYLE HTML5
div.appendChild(yeni_text);
/* yeni_text isimli metin dmn appendChild() metodu ile div eleman

ierisine ekledik.
*Kullanm:
*appendChild(Node):Node
*Dom Level 1,2
*/
}
</script>
#icerik
{
height: 50px;
width: 200px;
background-color: lightblue;
overflow:hidden;
}
</style>
</head>
<body>
<div id=icerik onmouseover=goster();>
</div>
</body>
</html>
id zelliine icerik deeri almfl elemann
Mouse ile zerine gelindiinde yandaki ekran grnts oluflur.
lang
Alabilecei Deer: {Dil Kodu}
HTML elemanlarnn ierdikleri metinlerin ya da zelliklerine aldklar deerlerin

dilini ayarlamak iin kullanlr. rnein; Trke: tr, Almanca: de, ngilizce: en
spellcheck
[HTML5]
Alabilecei Deerler: {true, false}
Eer true deeri atanmflsa eleman iindeki metinde dilbilgisi ve yazm hatalar
kontrol edilir. false deeri atanmflsa kontrol edilmez. Bu zellii dzenlenebilir
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 29
ierie sahip elemanlarda kullanabilirsiniz. rnein; textarea, input ya da

contenteditable=true deerini almfl dier elemanlar.
Tarayc Destei: Internet Explorer (Yok), Firefox 2+, Opera (Yok), Safari (Yok)
style
Alabilecei Deerler: {CSS tanmlamalar(zellik:Deer)}
Bu zellii kullanarak HTML elemanlarna satr ii CSS kodlar yazabilirsiniz. Bu

CSS kodlar style zellii ile yazldklar HTML elemanna uygulanr. Style
zelliine yazlan CSS kodlar bir eleman hedef alan CSS kodlar iinde en ncelikli tanmlamalar olacaktr.
rnek:
<!DOCTYPE HTML>
<html>
<head>
<title>style zellii</title>
p
{
color: Maroon; /*color tanmlamas, p elemanna uygulanmaz.
nk ncelikli olan color tanmlamas style zelliine yazlan tanmlamadr.*/
width: 100px;
}
</style>
</head>
<body>
<p style=background-color: khaki; color:hsl(360,100%,50%)>
Her Ynyle HTML5
</p>
</body>
</html>
p elemanna atanan CSS zelliklerine grsel olarak inceleyelim.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 30
30 HER YNYLE HTML5
Ekran grntsne bakalm.
p elemanna atanan CSS zellikleri
tabndex
Alabilecei Deer: {Say}
HTML eleman iin sekme srasn ayarlar.
ttle
Alabilecei Deer: {Metin}
HTML etiketine bilgi ve aklama ekleyebilirsiniz.
hdden
[HTML5]
Alabilecei Deer: {hidden}
HTML elemann gizlemek iin kullanlr.

Tarayc Destei: Internet Explorer (Yok), Firefox 4.0, Opera (Presto/2.7.7), Safari
(Nightly Build* ile)
HTML5in Getirdii
Yeni Elemanlar
HTML5 yapsnda bulunan yeni elemanlara bakalm.
Yapsal Elemanlar
Bir web sayfas tasarlarken muhtemelen sayfanz kabaca bir st bafllk alan (sitenin tantm iin), bir ierik alan ve yine ierik alan ierisinde deiflik alt bafllklar (blmler), bir alt bafllk ve bir ya da daha fazla navigasyon (ynlendirme) alanlarndan oluflacaktr (Deiflik site tasarmlar olabilir. Burada genel yaklaflmdan sz edilmektedir).
Sitenizin yapsn tasarlarken HTML5 ile yeni gelen yapsal elemanlar kullanabilirsiniz. Bu elemanlarn kullanlmas; kod okunabilirliini arttrr, anlaml eleman guruplar oluflturulmasn salar ve CSSi daha etkili bir flekilde kullanmanza yardmc olur.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 31
<header>
Bafllk eleman, bu eleman kullanarak sayfa bafllk alan (sayfa hakknda bilgiler ieren blm), blm veya alt blm bafll ya da ynlendirme alanlar iin bafllk oluflturabilirsiniz. Genelde h1, h2, h3 .. h6 elemanlarn ya da hgroup elemann ierir.
zellikleri: [Standart zellikler]
rnek:
<!DOCTYPE html>
<html>
<head>
<title>Header Eleman</title>
header
{
width: 600px;
height: 85px;
background-color: #e8ff8c;
margin: 0px auto;
padding: 5px;
}
header h1
{
font-family: calibri;
color: #ad3f23;
margin: 0px;
}
header img
{
float: right;
}
header span
{
font-style: italic;
}
</style>
</head>
<body>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 32
32 HER YNYLE HTML5
<header>
<img alt=html5 src=html_5.png/>
<h1>Her Ynyle HTML5</h1>
<span> Yeni Nesil ve Zenginletirilmi HTML srm</span
</header>
</body>
</html>
Yukardaki uygulamada site iin rnek bir bafllk alan oluflturulmufltur. Ekran grntsne bakalm.
Firefox 4.0
ekran
grnts
<hgroup>
Bafllk elemanlarn (heading elements, h1 .. h6) gruplamak ve bir belge ya da blm bafll oluflturmak iin kullanlr.
rnein;
<hgroup>
<h1>Web Developers</h1>
<h2>HTML5</h2>
</hgroup>
<nav>
Navigasyon (ynlendirme, link) alanlar oluflturmak iin kullanlr. Burada flunu
belirtelim <nav> eleman link oluflturmak iin kullandmz <a> elemannn ya da
<ul>, <ol> elemanlarnn yerlerine kullanlmaz. Sadece bu elemanlar kapsar (baflka elemanlar da kapsayabilir) ve ierdii eleman gurubunu bir navigasyon alan
olarak tanmlar.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 33
rnein;
<div id=nav_1>
<ul>
<li><a href=#>Birinci Link</a></li>
<li><a href=#>kinci Link</a></li>
<li><a href=#>nc Link</a></li>
<li><a href=#>Drdnc Link</a></li>
</ul>
</div>
...fleklindeki bir kullanm yerine afladaki kullanm tercih edebilirsiniz.

<nav>
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
</nav>
href=#>Birinci Link</a></li>
href=#>kinci Link</a></li>
href=#>nc Link</a></li>
href=#>Drdnc Link</a></li>
rnek:
<!DOCTYPE html>
<html>
<head>
<title>nav Eleman</title>
nav
{
width: 145px;
height: 260px;
background-color: #ae364c;
padding: 5px;
/*CSS3 border-radius zellii yuvarlak kenarl kutular oluflturmamz salar.*/

/* IE9,Firefox 4.0, Opera 10.5+, Safari 4.0,5.0 iin [CSS3 Standard]*/
border-radius: 5px 30px;

/*safari 3.0*/
-webkit-border-radius: 5px 30px;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 34
34 HER YNYLE HTML5

/*Firefox 3.6 ve alt srmleri iin*/
-moz-border-radius: 5px 30px;

}
nav h4
{
color: white;
margin-left: 8px;
margin: 0px;
}
nav > ul
{
margin: 5px 0px;
padding-left: 20px;
list-style-type: none;
}
nav > ul a
{
text-decoration: none;
color: #ffff00;
}
</style>
</head>
<body>
<nav>
<h4>Yapsal Elemanlar</h4>
<ul>
<li><a href=#>Header</a></li>
<li><a href=#>Footer</a></li>
<li><a href=#>Section</a></li>
<li><a href=#>Aside</a></li>
<li><a href=#>Hgroup</a></li>
</ul>
<img alt=res src=semantics.png>
</nav>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 35
Firefox 4.0
Beta11 ekran
grnts
<artcle>
Sayfann ana ierik alannda anlamsal bir btnl olan (farkl konu bafllklarna ya
da davranfllara gre ayrlmfl) alt blmler (ierikler) oluflturmak iin kullanlr. rnein; bir blog sayfasnda ana ierik blm iindeki farkl blog yaz alanlarn bu
elemanla oluflturabilirsiniz. Ya da gazete, dergi makaleleri ieren alanlar, kullanc
girifli, kullanc yorumlar gibi alanlar bu elemanla oluflturmanz mmkndr. article elemann kullanarak biimlendirdiiniz alanlar sayfann deiflik blgelerinde kullanabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>article Eleman</title>
p,h3
{
margin: 0px;
}
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 36
36 HER YNYLE HTML5
article p
{
font-style: italic;
}
footer
{
text-align: right;
}
footer a
{
background-color: hsl(306, 83%, 36.9%); /*HSL hue (renk) saturation (doygunluk) lightness (parlaklk, aydnlk) hsl (H,S,L)
CSS3 ile beraber gelen renk deeri tanmlama metodudur.
hue deeri 0-360 arasnda bir say alabilir. rnein; 240 mavi,
360 krmz gibi.
saturation ve lightness tanmlamalar yzde olarak yaplr.
[IE9 alt srmleri bu tanmlama metodunu desteklemez]
*/
color: white;
font-family: verdana;
font-size: 11px;
}
article
{
width: 437px;
height: 110px;
background-color: hsl(0, 100%, 91.4%);
padding: 15px;
/*IE9(Alt srmleri desteklemiyor), Firefox 4.0, Opera 10.5+,

Safari 4.0,5.0 iin [CSS3 Standard]
*/
border-radius: 30px;
/*safari 3.0 */
-webkit-border-radius: 30px;
/*Firefox 3.6 ve alt srmleri iin */
}
</style>
-moz-border-radius: 30px;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 37
</head>
<body>
<article>
<header>
<h3>JavaScript ve Kaltsallk</h3>
</header>
<p>JavaScript Nesne Tabanl Programlamaya olanak salar.
rnein Oluturduunuz bir yapc Fonksiyonun(Constructor
Function) ierisindeki zellik ve yntemleri kaltsal
olarak (prototype zelliini kullanarak) baka bir yapc
fonksiyona aktarabilirsiniz.
</p>
<footer>
<a href=#>Yaznn Devam iin Tklayn</a>
</footer>
</article>
</body>
</html>
Firefox 4.0
ekran
grnts
<secton>
Sayfa ierisinde genel blmler (ana ierik blm, dier blmler vb.) oluflturmak
iin kullanlr. HTML5 bu eleman mantksal, tematik alanlar (rnein; eer flyle
derseniz birinci <section> eleman ierisinde bulunan etiketler sayfann ana icerik
blmn oluflturuyor. Bu durumda section elemannn oluflturduu alan mantksal
bir alan olarak ifade edilebilir) oluflturmak iin tanmlasa da biz section elemann
sadece mantksal alanlar oluflturmak iin deil, ayn zamanda div elemannn yerine
biimlendirilmifl ana blmler oluflturmak iinde kullanabiliriz.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 38
38 HER YNYLE HTML5

rnek:
<!DOCTYPE html>
<html>
<head>
<title>section Eleman</title>
div#content
{
margin: 0px auto;
width: 642px;
height: 280px;
background-color:lightblue;
}
section
{
float: left;
margin: 5px;
}
p, h3
{
margin: 0px;
}
article p
{
font-style: italic;
}
footer
{
text-align: right;
}
footer a
{
color: white;
font-family: verdana;
font-size: 11px;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 39
}
article
{
width: 437px;
height: 110px;
padding: 15px;
/*IE9(Alt srmleri desteklemiyor), Firefox 4.0, Opera 10.5+,

Safari 4.0,5.0 iin [CSS3 Standard] */
/*safari 3.0 */
/*Firefox 3.6 ve alt srmleri iin */
}
nav
{
width: 145px;
height: 260px;
background-color: #ae364c;
padding: 5px;
border-radius: 5px 30px;
-webkit-border-radius: 5px 30px;
-moz-border-radius: 5px 30px;
}
nav h4
{
color: white;
margin-left: 8px;
margin: 0px;
}
nav > ul
{
margin: 5px 0px;
padding-left: 20px;
list-style-type: none;
}
nav > ul a
{
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 40
40 HER YNYLE HTML5
color: #ffff00;
}
</style>
</head>
<body>
<div id=content>
<section>
<nav>
<h4>Yapsal Elemanlar</h4>
<ul>
<li><a href=#>Header</a></li>
<li><a href=#>Footer</a></li>
<li><a href=#>Section</a></li>
<li><a href=#>Aside</a></li>
<li><a href=#>Hgroup</a></li>
</ul>
<img alt=res src=semantics.png>
</nav>
</section>
<section class=orta>
<article>
<header>
</header>
<p>JavaScript Nesne Tabanl Programlamaya olanak
salar. rnein Oluturduunuz bir yapc
Fonksiyonun(Constructor Function) ierisindeki
zellik ve yntemleri kaltsal olarak(prototype
zelliini kullanarak) baka bir yapc
fonksiyona aktarabilirsiniz.
</p>
<footer>
<a href=#>Yaznn Devam iin Tklayn</a>
</footer>
</article>
</section>
</div>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 41
Sayfamzn ekran grntsne bakalm.
Elemanlarn yerleflimine grsel olarak bakalm.
<asde>
erik blmleri ile alakal ek bilgi alanlar oluflturmak iin kullanlrlar. Bu durumda ierik blmnn yanna konumlandrlrlar. Ya da sayfann ana blmlerinin
dflnda sayfa kenarlarnda reklam alanlar, yan aklama ve ek bilgi alanlar tanmlamak iin kullanlrlar.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 42
42 HER YNYLE HTML5

rnek:
<!DOCTYPE html>
<html>
<head>
<title>aside Eleman</title>
p,h3
{
margin: 0px;
}
article p, article pre, aside
{
font-style: italic;
font-size: 12px;
}
article
{
width: 437px;
height: 250px;
background-color:#F9DAAE;
padding: 15px;
position: relative;
}
aside
{
position: absolute;
top: 50px;
right: -120px;
background-color: #DEE17C;
width: 120px;
height: 170px;
text-indent: 5px;
}
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 43
</style>
</head>
<body>
<article>
<header>
</header>
<p>JavaScript Nesne Tabanl Programlamaya olanak salar.
rnein Oluturduunuz bir yapc Fonksiyonun(Constructor
Function) ierisindeki zellik ve yntemleri kaltsal
olarak(prototype zelliini kullanarak) baka bir
yapc fonksiyona aktarabilirsiniz.
</p>
<pre>
var ana_constructor = function (ad) {
if (ad == undefined) {
this.ad = Her Ynyle html5
} else {
this.ad = ad;
}
};
var child_const = function (ad) { };
child_const.prototype = new ana_constructor();
// child_const isimli yapc metodtan retilen nesneler
// ad zelliine sahip olacaklar.
</pre>
<aside>
Daha Fazla Bilgi in
<img src=js.png alt=js/>
</aside>
</article>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 44
44 HER YNYLE HTML5
Ekran grntsne bakalm:
Firefox 4.0
ekran
grnts
<footer>
Bu eleman kullanarak sayfa, blm ya da alt blmler iin alt bilgi alanlar oluflturabilirsiniz. Alt bilgi alanlar genelde ierik yazar hakknda bilgi, ieriin oluflturulma tarihi ya da sayfa sahibi ile ilgili iletiflim bilgilerini ierir.
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>aside Eleman</title>
footer {
/*IE9 ,firefox 4.0 ,Safari 5.0 alt srmleri iin

display:block tanmlamas yaplmfltr*/
display:block;
width:600px;
height:70px;
font-family:consolas;
font-size:12px;
padding-top:10px;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 45

/*Arkaplan rengi olarak bir gradient tanmlama (renk geifli)*/
/*Mozilla Firefox 3.6+*/
background:-moz-linear-gradient(left top,#F5F3F0,#2CDEDE);
/*Safari 4.0+*/
background:-webkit-gradient(linear, 46% 0%, 100% 100%,

from(#F5F3F0), to(#2CDEDE));
/*IE 5.5+*/
filter:Progid:DXImageTransform.Microsoft.gradient(startColorstr=#F5F3F0,
endColorstr=#2CDEDE,gradientType=1);
}
footer p {
width:300px;
font-size:12px;
padding-left:10px;
}
</style>

</head>
<body>
<footer>
<p>
Kitap Sat Dnyas Copyright 2005 - 2011
Her Hakk Sakldr Tel:xxx.xxx.xx.
</p>
</footer>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 46
46 HER YNYLE HTML5
Ekran grntlerimize bakalm:
IE8 ekran
grnts
<fgure>
Resim, fotoraf alanlar (ya da media alanlar) tanmlamak iin kullanlr. Bu flekil
alanlarna bir metin ilifltirmek iin <figcaption> eleman kullanlr.
rnein;
<figure>
<img src=arge.jpg width=304 height=228 />
</figure>
ya da resme tanmlayc bir metin ekleyebilirsiniz.
<figure>
<img src=arge.jpg width=304 height=228 />
<figcaption>
irketimizin Arge Blm
</figcaption>
</figure>
NOT
HATIRLATMA
Yukarda anlatlan elemanlarn blok seviyesinden elemanlar olduklarn fark etmiflsinizdir. HTML elemanlar sayfadaki yerleflim dzeylerine gre ikiye ayrlr. Bunlar;
satr ii (inline element), blok seviyesi eleman (block level element)dr. Tarayc
blok seviyesi elemanndan nce ve sonra bir satr sonu oluflturur.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 47
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>Hatrlatma</title>
body> * {
background-color: crimson;
}
</style>
</head>
<body>
<header>
header
</header>
<footer>
footer
</footer>
<article>
article
</article>
<aside>
aside
</aside>
<hgroup>
hgroup
</hgroup>
<section>
section
</section>
<nav>
nav
</nav>
<figure>
figure
</figure>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 48
48 HER YNYLE HTML5
Ekran grnts:
Firefox 4.0Beta11 ekran grnts
Yukarda anlatlan elemanlar IE9, Firefox 4, Opera (Presto 2.7.70), Safari 5.0 tarayclarnn alt srmleri tarafndan desteklenmemektedir. Peki, ya bu alt srmler
bu eleman sayfaya nasl yerlefltirecekler? Hemen aklayalm.
Internet Explorer alt srmleri bu elemanlar hi tanmayacaktr. Bu elemanlar
hedef alan CSS kodlarn uygulamazlar. Bu durumun zm iin JavaScript yardmyla belirtilen elemanlar programatik olarak oluflturmak yeterli olacaktr.
IE9un tanmad dier yeni elemanlar da bu flekilde oluflturup sayfa ierisinde
kullanabilirsiniz.

+HTML5-BOLUM2
6/17/11
4:25 PM
Page 49
Yukardaki Script blou sadece IE9 alt srmlerinde alflacaktr.

Belirtilen elemanlar IE9 alt srmlerinde blok seviyesin den bir eleman olarak kullanmak iin afladaki CSS tanmlamasn yapalm.
header, hgroup, nav, article, section, aside, footer, figure {
display:block;
}
Artk IE9 alt srmlerinde bu elemanlar kullanabiliriz.

rnek:
<!DOCTYPE html>
<html>
<title>IE9 alt srmleri</title>
display:block;
}
header {
}
</style>

</head>
<body>
<header>
header Eleman
</header>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 50
50 HER YNYLE HTML5
IE8 ekran grnts
Firefox 4.0 ve Opera (Presto 2.7.70) gibi dier tarayclarn alt srmleri bu elemanlar satr ii bir eleman olarak olufltururlar oysa ki bu elemanlar sayfa blmleri ve alt
blmler oluflturmak iin kullanlrlar (Blok seviyesinden elemanlar olmalar gerekir).
Bu problemin zm iin afladaki CSS tanmlamas yeterli olacaktr.
display:block;
}
Dier Elemanlar
Yukarda anlatlan yapsal elemanlar dflnda HTML5 yaps ierisinde duyurulan
dier ifllevsel elemanlara bakalm.
<mark>
Metni iflaretlemek iin kullanlr. Bu eleman kullanarak okuyucunun dikkatini ekecek vurgulu metinler oluflturabilir ya da metnin referans olarak tanmlanmasn
salayabilirsiniz. Satr ii bir elemandr.
rnein;
<p>
</p>
Metni
<mark>
iaretlemek
</mark>iin kullanlr.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 51
CSS kodlar ile mark eleman ierisindeki metne stil vererek okuyucunun dikkatini
bu kelimeye ekebilirsiniz.
rnek:
<p>
</p>
Bu durumun zm iin JavaScript yardmyla belirtilen

elemanlar programatik olarak oluturmamz yeterli olacaktr.
<mark> IE9</mark>un tanmad dier yeni elemanlar da bu
ekilde oluturup <mark> IE9</mark> alt srmlerinde
ortaya kan bu problemi zebilirsiniz.
Sayfada yaplacak aramalarda bulunacak ayn metin paralarnn hepsini bu etiket

ierisine alp, nceden bir stil tanmlamas yapabilirsiniz.
<meter>
Belirlediiniz bir aralk iinde bir deeri (lm) kullancya grsel olarak gstermek iin kullanlr. Bu eleman bir ilerleme ubuu (progress bar) olarak kullanlmamaldr.
zellikleri: [Standart zellikler] ile form, high, low, max, min, optimum, value
form: meter elemannn bir form eleman ile iliflkili olup olmadn tanmlamak iin kullanlr. Bu zellie elemann iliflkili olduu form elemannn id
zelliine atanan deer yazlr. Aralarnda boflluk brakmak kaydyla birden
fazla form id deeri yazlabilir.
high: min, max zellikleri ile tanmlanan aralkta yksek olarak kabul edilecek
deeri tanmlar. Belirtilmezse ya da high zelliine atanan deer max zelliine
atanan deerden yksek ise max zelliine atanan deer yksek deer olarak kabul edilir. low ve optimal zellikleri ile beraber kullanlr.
low: min, max zellikleri ile tanmlanan aralkta dflk olarak kabul edilecek
deeri tanmlar. Belirtilmezse ya da low zelliine atanan deer min zelliine
atanan deerden dflkse, min zelliine atanan deer, dflk deer olarak kabul edilir. high ve optimal zellikleri ile beraber kullanlr.
max, min: Araln en dflk ve en yksek deerlerini tanmlamak iin kullanlrlar. lm, (sonuta kullancya grsel olarak sunulacak deer) bu deerler
arasndadr. Eer bu zellikler tanmlanmazsa varsaylan olarak max=1.0,
min=0 deerlerini alr.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 52
52 HER YNYLE HTML5
optimum: min, max deerleri arasnda en uygun deer tanmlamas yapmak iin
kullanlr. Bu deer high deerinden byk ise yksek deerler, low deerinden
kk ise kk deerler uygun deerler olarak kabul edilebilir. Belirtilmezse
min, max deerleri arasndaki orta nokta optimum deer olarak kabul edilir.
value (Gerekli): lm deerini (sonuta kullancya grsel olarak sunulacak

deer) tanmlamak iin kullanlr. Bu deer min, max deerleri arasnda olmaldr.
Bu zellie deer atanmazsa varsaylan deer 0 olur. min deerden daha dflk
olursa value=min, max deerden daha byk olursa value=max olur.
Afladaki rnekte value deeri low (aralkta dflk olarak kabul edilen deer) deerinden daha kktr.
<p>
llen A:
<meter min=0 max=180 low=30 optimum=90 high=120
value=25></meter>
</p>
Ekran grnts:
Opera 11.ekran grnts
fiimdi de value deerine high (aralkta yksek olarak kabul edilen deer) deerinden daha byk bir deer verelim.
<p>
llen A:
value=130></meter>
</p>
Ekran grnts:
Opera 11 ekran grnts
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 53
Dikkat ederseniz her iki durumda da ilerleme ubuunun dolgu rengi ayn olacaktr. nk deerlerden birincisi dflk olarak kabul edilen deerden (low) daha kk dieri ise byk olarak kabul edilen deerden (high) daha byktr.
value zelliine low, high deerlerinin arasnda bir deer atanrsa, ilerleme ubu-
unun dolgu rengi yukardaki durumlardan farkl olacaktr (yeflil olur).
<p>
llen A:
value=115></meter>
</p>
Ekran grnts:
Opera 11.01 grnts
<command>
Sayfada grntlenen (rnein; menu eleman ierisinde) ya da grntlenmeyen bir

komut dmesi tanmlamak iin kullanlr. Type zelliini kullanarak bu eleman
checkbox ya da radio elemanlarna dnfltrebilirsiniz. Bu elemana flu an iin tarayc destei bulunmamaktadr.
zellikleri: [Standart zellikler] ve checked, disabled, icon, label, radiogroup,
type
<progress>
Bir grevin, ifllemin tamamlanma/ilerleme srecini kullancya gstermek iin yani ilerleme ubuu oluflturmak iin kullanlr.
zellikleri: [Standart zellikler] ve max,value
max: Grevin ya da ifllemin bitirilme durumunu tanmlayan deer.
value: Grevin ya da ifllemin flu andaki durumunu gsteren deer.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 54
54 HER YNYLE HTML5
rnek:
<p>
</p>
lemin Durumu:
<progress value=78 max=100>
</progress>
Ekran grnts:
<tme>
Zaman ya da tarih ya da her ikisini birden ieren tanmlamalar yapmak iin kullanlr.
zellikleri: [Standart zellikler] ve datetime, pubdate
datetime zellii tarih ya da zaman tanmlamak iin kullanlr. Afladaki formata
gre tarih ya da zaman deerlerini girebilirsiniz.
Yl-Ay-Gn Saat:Dakika:Saniye TZD (Time Zone Designator, Saat dilimi

Tanmlaycs)
Yukardaki tanmlamada kullanlan argmanlar istee baldr.

rnek:
<p>e Balama Tarihi: <time datetime=2010-01-10 9:00>Ocak 10</time>.</p>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 55
HTML5 ve
JAVASCRIPT
HTML5 yaps kendinden nceki HTML srmleri gibi JavaScript programlama

dilini kullanr. JavaScript, tarayc da alflan ve Nesne Tabanl Programlama imkan sunan bir dildir. Browser, JavaScript komutlarn yorumlayarak ifllevlerini yerine getirir. JavaScript ECMAScript-262 (5. srm) standardn kullanr. Bilinmesi gereken dier bir konuda DOM (Document Object Model)dir. DOM, HTML ve
XML belgeleri iin oluflturulmufl bir programlama arayzdr (API).
DOM (Dokman Nesne Modeli), sayfadaki tm elemanlar birer nesne olarak tanmlar. JavaScript yardmyla DOMun tanmlad bu nesnelere (nesnelerin zellik ya da metotlarna) ulaflabilir ve kod yazabiliriz. DOM bildirimleri sayfa elemanlarnn dflnda sayfann iflleyifli, olay akfl ve dier durumlar iin zel nesneler tanmlar ve kullanma sunar.
Aflada DOM bildirimleri verilmifltir.
Document Object Model Level 1
Document Object Model Level 1 (W3C Recommendation)

Document Object Model Level 1 (Second Edition) (W3C Working Draft)
Document Object Model Level 2 Core (W3C Recommendation)

Document Object Model Level 2 Views (W3C Recommendation)
Document Object Model Level 2 Events (W3C Recommendation)
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 56
56 HER YNYLE HTML5
Document Object Model Level 2 Style (W3C Recommendation)

Document Object Model Level 2 Traversal and Range (W3C Recommendation)
Document Object Model Level 2 HTML (W3C Recommendation)
Document Object Model Level 3 Core (W3C Recommendation)

Document Object Model Level 3 Load and Save (W3C Recommendation)
Document Object Model Level 3 Validation (W3C Recommendation)
Dier Bildirimler (Sadece Selector Apiler listelenmifltir)
Selectors API Level 1

Selectors API Level 2 (W3C Working Draft)
Dikkat ederseniz; DOM bildirimleri para para yaplmfl olup, core bildirimleri ilgili srmn ekirdek yapsn oluflturmaktadr. Tarayclar asndan olaya bakarsak; modern web tarayclarnn yeni modelleri DOM Level 2 bildirimlerine byk
bir lde destek vermekle beraber, DOM Level 3 bildirimlerine desteklerini hzla
aklamaktadrlar. DOM bildirimlerinde tanmlanan nesnelere, nesnelerin zellik
ya da metotlarna tarayclarn eski srmleri ya ksmen destek verirler ya da hi
vermezler. Bu durum bizi farkl tarayclar iin farkl kodlar yazmaya yneltir.
rnein; Document Object Model Level 2 Events bildirimi ile tanmlanan olay akfl
evreden oluflur. Bunlar; capturing, target, bublingdir. Peki, bu modeli tarayclar destekliyor mu? Yani Document Object Model Level 2 Events bildirimine tarayc destei nedir?
IE9 alt srmleri olay akfln sadece bubling evresinden ibaret grr. Yani dier
evreleri desteklemez ve bu bildirim iinde bulunan olay dinleyicilerini de desteklemediinden, biz de uygulama olufltururken farkl tarayc kodlar yazarz. Sylemek istediim fley; tarayclarn bu bildirimleri farkl oranda destekledikleridir.
Peki, HTML5 ile bunun ne alakas var?
HTML5 tarayclarn DOM bildirimlerine verdikleri destei hzlandrmalarna neden
olmufltur. Tarayclar HTML5 verdikleri destekleri akladklar sayfalarda DOM,
JavaScript ve dier ek teknolojilere verdikleri destekleri de aklamaktadrlar.
HTML5, JavaScript, DOM i ie gemifl yaplardr.
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 57
HTML5 VE JAVASCRIPT 57
Tarayclar, DOM nesnelerini ve nesneler iin tanmlanan zellik ve metotlar desteledike istemci tarafl web uygulamalar gelifltirmek daha konforlu bir hal alacaktr.
JavaScript dilinin etkinlii (gc) artacak ve HTML5 dilini daha etkili bir flekilde kullanabileceiz. fiimdi aflada HTML5 yaps ile beraber tarayclarn destek verdiklerini akladklar ve W3C Selectors API Level 1 bildiriminde bulunan yeni metotlara bakalm.
NOT
Tarayclarn DOM ve CSS bildirimlerine verdikleri destekleri grmek iin tarayc

destek sayfalarna ya da http://www.quirksmode.org/ sitesine bakabilirsiniz.
querySelector()
W3C Selectors API Level 1 bildiriminde bulunan bu metot ile CSS seicilerini
kullanarak belgedeki bir elemann referansn alabilirsiniz.
Kullanm: elemanReferans=document.querySelector(selectors)
lk durumda; belge ierisinde seici tarafndan hedef alnan ilk elemann referansn
geriye dndrr.
elemanReferans=temelEleman.querySelector(selectors)
kinci durumda; belirtilen temel eleman iinde seici tarafndan hedef alnan ilk
elemann referansn geriye dndrr.
Eer seici tarafndan hedef alnan eleman bulunamazsa (seici ile eflleflen eleman
olmazsa) geriye null deeri dner.
Seici tarafndan hedef alnmak ne demektir?
CSS seicileri, HTML eleman isimleri ve birok zel karakterler ierebilir. Oluflturduunuz seiciler en kaba tabiriyle iinde barndrdklar CSS kodlarnn uygulanmas iin eleman ya da elemanlar seer (bu adan seiciler birer sorgu deyimi
gibidirler). Seici tanmlamalar yaparak CSS kodlarnn uygulanaca elemanlar
seilir, yani hedef alnr.
rnek:
<nav>
<ol>
<li>Yeil
</li>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 58
58 HER YNYLE HTML5
</nav>
</ol>
<li id=acil>Beyaz
</li>
<li>Krmz
</li>
<li>Sar
</li>
<li>Mavi
</li>
Seicilerimize bakalm...
nav ol li {
/*Bu seici srasyla nav ve ol elemanlarnn soyundan

gelen li elemanlarn hedef alr (seer).*/
color:blue;
}
nav ol> li#acil+ li {
/*Bu seici srasyla nav ve ol elemanlarnn soyundan

gelen li#acil elemannn kardefli olan li elemann hedef alr (seer).*/
color:red;
}
Ekran grnts:
Firefox 4.0 Beta11 ekran grnts
rnek:
<!DOCTYPE html>
<html>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 59
<head><meta charset=utf-8>
<title>Selector</title>
</style>
/*
*
*
*
*
*
*/
Direk script etiketleri arasnda(sayfa yklenmeden nce) bir

elemann referansn alamayz.
nk tarayc bu satrlar body elemann yorumlamadan (sayfaya
yklemeden) nce okuyacandan belirtilen eleman bulamaz ve
null deerini dndrr.
var init= function() {
/* ilk nce id zelliine html5 deeri atanmfl elemana

ulaflalm (referansn alalm, nesne olarak elde edelim)*/
var elemanHtml5=document.querySelector(#html5);
/*element.textContent:String (geriye String deer dndrr)
Dm ierisindeki metni verir.
Bildirim: DOM Level 3 Core */
console.log(elemanHtml5.textContent);
/* div#content eleman ierisindeki en son div elemanna ulaflalm.*/
var elemanJs=document.querySelector(div#content>div#css+div);
console.log(elemanJs.textContent);
/* div#html5 eleman ierisindeki span elemannn referansn alalm.*/
var elemanSpan=elemanHtml5.querySelector(span);
console.log(elemanSpan.textContent);
/* Srasyla div#html5 ve span elemanlarnn iinde olan b elemannn

referansn alalm.*/
</html>
var elemanB=elemanHtml5.querySelector(span>b);
console.log(elemanB.textContent);
</script>
</head>
<body onload=init();>
<div id=content>
<div id=html5>Her Ynyle<span>HTML<b>5</b></span></div>
<div id=css>Xhtml ve CSS</div>
<div>javascript</div>
</div>
</body>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 60
60 HER YNYLE HTML5
Firebug; Firefox tarafndan desteklenen, hata ayklama iin kullanabileceimiz, CSS

zelliklerinin eleman zerindeki etkisini grsel olarak grebileceimiz, elemanlarn
DOM zellik ve yntemlerini ayrntl bir flekilde gsteren ve dier birok zellii barndran web sayfas tasarmclar iin bulunmaz bir aratr. alflma annda firebug
konsoluna deiflken, nesne ya da bir deer yazdrmak iin console.log() metodu
kullanlr.
fiimdi ekran grntsne bakalm.
Firefox 3.6 ve Firebug 1.6.2 ekran grnts

NOT
Firebug aracn http://getfirebug.com/ sitesinden indirebilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<title>querySelector</title>
</style>
var elemanDiv=document.querySelector(div#content div)
/*Oluflturduumuz seici ile aslnda div#content eleman iindeki
tm div elemanlar seilmifl yani hedef alnmfltr.
Fakat querySelector() metodu seici tarafndan hedef alnan belge
aacndaki ilk elemann referansn dndrr.*/
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 61
</html>
console.log(elemanDiv.id);
}
</script>
</head>
<div id=content>
<div id=html5>
</div>
<div id=css>
</div>
<div id=js>
</div>
</div>
</body>
Ekran grnts:
Elemanlarn yapsal olarak grnts:
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 62
62 HER YNYLE HTML5
rnek:
<!DOCTYPE html>
<html>
</style>
var elemanDiv=document.querySelector(div#content>div)
/*Oluflturduumuz seici ile div#content elemannn ocuu olan
ilk div elemanna ulaflmak istedik. Fakat byle bir eleman yoktur (seici ile
eflleflen eleman yok).
Dolaysyla geriye null deeri dner.*/
</html>
console.log(elemanDiv);
</script>
</head>
<div id=content>
<span>Html5</span>
</div>
</body>
Ekran grnts:
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 63
rnek:
<!DOCTYPE html>
<html>
</style>
/*querySelector() metoduna arada virgl koymak kaydyla bir ya da daha fazla seici yazlabilir.
Bu durumda; eer belge zerinde birinci seicinin hedef ald eleman bulunamazsa ikinci
seicinin hedef ald eleman aranr.*/
var elemanDiv=document.querySelector(#div1,#div2);
var elemanP=document.querySelector(.p1,.p2);
alert(elemanDiv.id + \n + elemanP.className);
}
</script>
</head>
<div id=div1>
<p>
Aptana Studio 3
</p>
<p class=p2>
Dom Level 2
</p>
</div>
<div id=div2>
</div>
</body>
</html>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 64
64 HER YNYLE HTML5
Ekran grnts:
Tarayc destei: Internet Explorer 8+, Firefox 3.5+, Opera 10+, Safari 3.2+
querySelectorAll()
W3C Selectors API Level 1 bildirimi ile tanmlanan bu metot CSS seicilerini kullanarak belgedeki eleman ya da elemanlar nesne olarak elde etmek iin kullanlr.
Kullanm: elemanlistesi=document.querySelectorAll(selectors)
lk durumda; belge ierisinde seici ile eflleflen elemanlarn listesini (StaticNode-
List) dndrr.
elemanlistesi=temelEleman.querySelector(selectors)
kinci durumda; Belirtilen temel eleman iinde seici ile eflleflen elemanlarn listesini (StaticNodeList) dndrr.
Eer seici tarafndan hedef alnan eleman ya da elemanlar bulunamazsa (seici ile
eflleflen eleman olmazsa) geriye null deeri dner.
StaticNodeList (static dm listesi); querySelectorAll() metodu ile StaticNodeList nesnesi elde edildikten sonra, DOM metotlar ile belge aa yapsnda
programatik olarak yaplan deifliklikler olduunda (eleman ekleme, karma)
StaticNodeList iindeki eleman listesi gncellenmez.
StaticNodeList nesnesinin (querySelectorAll() metodunu atadmz deiflken)
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 65
iindeki eleman referanslarna ulaflmak iin; StaticNodeList[index numaras]

ya da StaticNodeList.item(index numaras)yntemlerinden birini kullanabilirsiniz. index numaras 0dan bafllayacaktr.
lk rneimizi NodeList ve StaticNodeList arasndaki fark anlatmak iin yapalm;

rnek:
<!DOCTYPE html>
<html>
<title>querySelectorAll</title>
</style>
var elemanlar1=document.querySelectorAll(div#div1>*);
/*div#div1 eleman ierisindeki tm elemanlarn static bir
listesi(StaticNodeList) alnd(elemanlar1 iinde)*/
var elemanlar2=document.getElementsByTagName(p);
/*Belge ierisindeki tm p elemanlarnn canl bir listesi
(NodeList) alnd (elemanlar2 iinde)*/
/*StaticNodeList iindeki eleman saysn yazdralm*/
console.log(StaticNodeList(querySelectorAll) eleman says+

:+elemanlar1.length);
/*StaticNodeList iindeki elemanlar konsola yazdralm*/
for(var i=0;i<elemanlar1.length;i++) {
console.log(elemanlar1.item(i));
}
/*NodeList iindeki eleman saysn yazdralm*/
console.log(NodeList(getElementsByTagName) eleman says+

/*NodeList iindeki elemanlar konsola yazdralm*/
}
console.log(Div ierisine bir p eleman ekleyip sonuca
tekrar bakalm);
/*Yeni bir p eleman oluflturulup bir text ierii eklendikten
sonra div#div1 ierisine ekleyelim*/
var yeni_eleman=document.createElement(p);
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 66
66 HER YNYLE HTML5
yeni_eleman.textContent=yeni bir div eleman;

var elemanDiv=document.querySelector(#div1);
elemanDiv.appendChild(yeni_eleman);
/*StaticNodeList iindeki eleman saysn tekrar yazdralm*/
console.log(StaticNodeList(querySelectorAll) eleman says+

/*StaticNodeList iindeki elemanlar konsola yazdralm*/
}
/*NodeList iindeki eleman saysn tekrar yazdralm*/
console.log(NodeList(getElementsByTagName) eleman says+

/*NodeList iindeki elemanlar konsola yazdralm*/
</html>
}
</script>
</head>
<div id=div1>
<p>
Aptana Studio 3
</p>
<p class=p2>
Dom Level 2
</p>
</div>
</body>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 67
Ekran grnts:
Firefox 3.6 ve
Firebug 1.6.2
ekran grnts
rnekten de anlafllaca zere NodeList, canl (gncellenen) bir eleman dm

listesi iken, StaticNodeList gncellenmeyen statik dm listesidir.
rnek:
<!DOCTYPE html>
<html>
</style>
var staticlistDiv=document.querySelector(div#div1>div);
/*div#div1 elemannn ocuu olan herhangi bir div eleman
olmadndan geriye null deeri dner*/
console.log(staticlistDiv);
}
</head>
// sonu: null
</script>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 68
68 HER YNYLE HTML5
</html>
<div id=div1>
<p>
Aptana Studio 3
</p>
<p class=p2>
Dom Level 2
</p>
</div>
</body>
rnek:
<!DOCTYPE html>
<html>
</style>
var staticlistP=document.querySelectorAll(div#div1>p);
/*div#div1 elemannn ocuu olan p elemanlarnn
listesi geriye dner*/
for(var i=0;i<staticlistP.length;i++) {
/*NodeList ya da StaticNodeList nesnelerinin saklad eleman

says length zellii ile bulunur.*/
console.log(staticlistP[i].id);
// ya da console.log(staticlistP.item(i))
/*Bir StaticNodeList nesnesinin(staticlistP)

iindeki eleman referanslarna ulaflmak iin;
NodeList[index numaras] ya da NodeList.item(index numaras)
yntemlerinden birini kullanabilirsiniz.*/
</script>
</head>
<div id=div1>
<p id=x>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 69
</html>
</body>
</div>
Aptana Studio 3
</p>
<p id=y>
Dom Level 2
</p>
<p id=z>
Dom Level 3
</p>
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
</style>
var staticlistDiv=document.querySelectorAll(body>div);
/*belge ierisinde seici ile eflleflen(seici tarafndan seilen) sadece
bir div eleman var. Bu durumda StaticNodeList(StaticElemanListesi)

ierisinde sadece bir div eleman olacaktr*/
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 70
70 HER YNYLE HTML5
console.log(staticlistDiv.length);
console.log(staticlistDiv[0]);
var staticlistP=document.querySelectorAll(p);
/*
belge ierisindeki tm p elemanlarnn listesi staticlistP nesnesine aktarld.

Aslnda liste trn(NodeList,StaticNodeList) gz ard ederseniz
getElementsByTagName() metodu ile ayn ifllemi yapt*/
console.log(staticlistP.length);
console.log(staticlistP[0]+\n +staticlistP[1]);
</script>
</head>
<div>
div ierii
</div>
<p>
birinci paragraf
</p>
<p >
ikinci Paragraf
</html>
</body>
</p>
Ekran grnts:
Firefox 3.6 ve
Firebug 1.6.2 ekran grnts
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 71
Tarayc destei: Internet Explorer 8+, Firefox 3.5+, Opera 10+, Safari 3.2 +
getElementsByClassName()
HTML5 bildirimi iinde bulunur. Bu metot, belirtilen snf seiciyi kullanan eleman
ya da elemanlarn canl (dinamik) bir listesini dndrr (bu metot, geriye NodeList
nesnesi dndrr).
Kullanm: elemanlistesi = document.getElementsByClassName(classNames)
lk durumda; belge ierisinde belirtilen snf seici adn kullanan (yani belirtilen snf seicinin atand) elemanlarn listesini (NodeList) dndrr.
elemanlistesi = temelEleman.getElementsByClassName(classNames)
kinci durumda; belirtilen temel eleman (referans alnan eleman) ierisinde bulunan ve belirtilen snf seici adn kullanan elemanlarn listesini (NodeList) dndrr.
NodeList nesnesinin iindeki eleman referanslarna ulaflmak iin;
NodeList[index numaras] ya da NodeList.item(index numaras) yntemlerinden birini kullanabilirsiniz (index numaras 0dan bafllayacaktr).
rnek:
<!DOCTYPE html>
<html>
<title>getElementsByClassName</title>
</style>
var init=function(){
/*class zelliine onem snf seici deeri atanmfl belge ierisindeki tm

elemanlarn Dinamik bir listesine ulaflalm ve bu listeyi bir deiflkene atayalm
(Listenin atand deiflken artk bir NodeList nesnesi olacaktr)*/
var elemanlarOnem=document.getElementsByClassName(onem);
/*NodeList nesnesi (elemanlarOnem) iindeki elemanlarn referansna
ulaflalm ve bu elemanlara bir color tanmlamas yapalm*/
for(var i=0;i<elemanlarOnem.length;i++){
elemanlarOnem[i].style.color=red;
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 72
72 HER YNYLE HTML5
</script>
</head>
<div id=ornek>
<p id=p1 class=onem>Context2DRendering</p>
<p id=p2 class=hata haber>Context3DRendering</p>
<p id=p3 class=baslik>Canvas<span class=onem>Uygulamalar</span></p>
</div>
</body>
</html>
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
</style>
/*class zelliine onem snf seici deeri atanmfl belge ierisindeki tm

elemanlarn Dinamik bir listesine ulaflalm ve bu listeyi bir deiflkene atayalm
(Listenin atand deiflken artk bir NodeList nesnesi olacaktr)*/
var elemanlarOnem=document.getElementsByClassName(onem);
/*NodeList nesnesi(elemanlarOnem) iindeki elemanlarn referansna ulaflalm ve
bu elemanlara bir color tanmlamas yapalm*/
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 73
elemanlarOnem[i].style.color=red;
}
</script>
</head>
<div id=ornek>
<p id=p1 class=onem hata>Context2DRendering</p>
<p id=p2 class=hata onem>Context3DRendering</p>
<p id=p3 class=baslik>Canvas<span class=onem>Uygulamalar
</span></p>
</div>
</body>
</html>
Elemanlarn class zelliklerine birden fazla snf seici ad arada boflluk olmak
kaydyla yazlabilir. Bu durumda class zelliine yazlan snf seicilerin sakladklar CSS tanmlamalar elemanlara uygulanr (Dikkat edin, ncelik ilk yazlan snf
seicinindir).
Yukardaki rneimize dnersek, belgedeki bir elemann class zelliine atanan snf
seici isimleri ierisinde onem snf seici ad varsa bu eleman getElementsByClassName(onem) metodunun oluflturduu NodeList listesine eklenir.
getElementsByClassName() metodu iin elemana belirtilen snf seicinin atanmfl
olmas yeterlidir. Seicinin ncelik sras bu metot iin nemli deildir.
getElementsByClassName(onem) metodu;
<p id=p1 class=onem hata>Context2DRendering</p>

<p id=p2 class=hata onem>Context3DRendering</p>
Her iki eleman da geri dndrd NodeList listesine ekler.
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 74
74 HER YNYLE HTML5
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
<head>
</style>
/*class zelliine onem baslik(iki tane snf seici ad) snf seici
isim listesi atanmfl belge ierisindeki tm elemanlarn dinamik bir
listesine ulaflalm ve bu listeyi bir deiflkene atayalm(Listenin atand
deiflken artk bir NodeList nesnesi olacaktr)*/
var elemanlarOnem=document.getElementsByClassName(onem baslik);

/*NodeList nesnesi(elemanlarOnem) iindeki elemanlarn referansna
ulaflalm ve bu elemanlarn ieriklerini firebug konsoluna yazdralm*/
console.log(elemanlarOnem[i].textContent);
}
</script>
</head>
<div id=ornek>
<p id=p1 class=onem>Context2DRendering</p>
<p id=p2 class=baslik>Context3DRendering</p>
<p id=p3 class=onem baslik>Canvas Uygulamalar</p>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 75
</div>
</html>
</body>
Ekran grnts:
Firefox 3.6 ve Firebug 1.6.2

ekran grnts
Tarayc destei: Internet Explorer 9, Firefox 3+, Opera 9.5+, Safari 3.1+
Seici Metotlarn Desteklemeyen

Tarayc Srmleri iin zm
Yukarda anlatlan metotlarn hangi tarayclar tarafndan ne lde desteklendiini nceki konuda anlatmfltk. Ne yazk ki tarayclar W3C bildirimlerini ya da dier bal teknolojileri ayn oranda desteklememektedirler. Bu durum programcya
ek bir yk getirir. Dflnn sayfa tasarlarken bir eleman (nesne) ya da zel bir nesne kullanacaksanz ilk nce tarayc desteine bakp, daha sonra desteklemeyen tarayclar iin ek kod yazmanz gerekecektir. Yani farkl tarayclar iin farkl kodlar yazmanz gerekebilir. Afladaki rnee bakp konumuza devam edelim.
rnee gemeden nce...
firstElementChild (Bir elemann iindeki ilk eleman dmne ulaflmak iin),
lastElementChild (Bir elemann iinde bulunan son eleman dmne ulaflmak iin),
nextElementSibling (HTML aa yapsnda referans alnan elemandan sonra ge-
len elemann (kardefl eleman) referansn almak iin),
previousElementSibling (HTML aa yapsnda referans alnan elemandan nce
gelen elemann (kardefl eleman) referansn almak iin) kullanlrlar ve bu zellikler element dmleri (elemanlar) iin tanmldrlar.
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 76
76 HER YNYLE HTML5
Bu zellikler Document Object Model Level 2 Traversal and Range bildirimi

ile tanmlanmfllardr. Bu zelliklere tarayclar tarafndan verilen destee bakalm.
Tarayc destei: Internet Explorer 9, Firefox 3.5+, Opera 10.10+, Safari 4+
fiimdi tarayclarn desteklemeyen srmleri iin bu zellikleri kullanlabilir hale

getirelim. Kodlarmz yazmaya bafllayalm.
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model Level 2 Traversal and Range</title>
var jsharp = {
/*jsharp javascript Framework 1.0
* (Document Object Model Level 2 Traversal and Range

partial support)
* brahim elikbilek*/
_firstElementChild:function(e_ref/*e_ref:elemanReferans*/){
/*Bir elemann iindeki ilk eleman dmne ulaflmak iin
*_firstElementChild() metodunu tanmladk.Eer eleman baflka
bir eleman iermiyorsa _firstElementChild() metodu geriye

null deerini dndrr.*/
if (e_ref.firstElementChild == undefined) {
//Eer firstElementChild zellii desteklenmiyorsa;
//firstChild zellii kullanlr.
//bu zellik elemann iindeki ilk dm(Node)
//geriye dndrr.
var child = e_ref.firstChild;
//e_ref ile tanml elemannn ilk ocuk dmne ulafltk.
while (child) {
if (child.nodeType == 1) {
/*Bir dmn trne bakarak bu dmn ne dm

olduunu anlayabiliriz.(Element, Text...)
* Bir dmn trne ulaflmak iin nodeType zellii
kullanlr.
* var type = node.nodeType;
* Aflada dm trleri ve nodeType deerleri
verilmifltir;
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 77
* ELEMENT_NODE = 1(Eer dmn nodeType zelliinin
deeri 1 ise bu dm element dmdr.)
* ATTRIBUTE_NODE = 2
* TEXT_NODE = 3
* .......*/
return child;
/*e_ref ile tanml elemannn ocuk dm eer

element dm ise bu elemenin referans geriye
dndrlecek ve dngden klacak.*/
}
else {
child = child.nextSibling;
/* e_ref ile tanml elemannn ilk ocuk
dm eer element dm deil ise bu

durumda bu dmn kardefli olan dier
dmn referansn nextSibling zellii ile aldk.
*Eer eleman ierisinde kardefl dm yoksa
nextSibling zellii geriye null deerini dndrr.
Bu deerde while(null){} tanmlamasna
}
}
else {
neden olacandan dngden klr.*/
/* Eer tarayc firstChildElement zelliini destekliyorsa;

Kullanm:
childNode=elNodeReference.firstElementChild;
elemann iindeki ilk elemannn referansn dndrr.*/
return e_ref.firstElementChild;
}
return null;
/*Eer eleman ierisinde bir element yoksa ya da
},
element dm yoksa geriye null deerini dndreceiz*/
_lastElementChild: function(e_ref/*e_ref:elemanReferans*/){
/*Bir elemann iinde bulunan son eleman dmne
ulaflmak iin_lastElementChild() metodunu tanmladk*/
if (e_ref.lastElementChild == undefined) {
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 78
78 HER YNYLE HTML5

/* e_ref tanml elemann iindeki en son dme ulafltk..*/
var child = e_ref.childNodes[e_ref.childNodes.length - 1];

/* e_ref referansna sahip elemann iindeki en son
elemana ulaflmak iin childNodes zellii kullanld.

Bu zellik eleman iindeki tm dmlerin
bir listesini oluflturur.(NodeList)*/
while (child) {
return child;
/* e_ref ile tanml elemann iindeki en son

dm eer element dm ise bu
elementin referans geriye dndrld.*/
}
else {
child = child.previousSibling;
/* e_ref tanml elemann iindeki en son
dm eer element dm deilse, en

son dmden bir nceki dme gemek
(bir nceki dmn referansn) almak
}
}
else {
iin previousSibling zelliini kullandk. */
/* Eer lastElementChild zelliini destekliyorsa;

Kullanm:
childNode = elNodeReference.lastElementChild;
elemann iindeki son elemannn referansn dndrr.*/
return e_ref.lastElementChild;
}
return null;
/*Eer eleman iererisinde bir element yoksa ya da element

dm yoksa geriye null deerini dndreceiz */
},
_nextElementSibling: function(e_ref/*e_ref:elemanReferans*/){
/*
HTML aa yapsnda referans alnan elemandan sonra

gelen elemann(Kardefl eleman) referansn almak iin
_nextElementSibling()metodunu tanmladk*/
if (e_ref.nextElementSibling == undefined) {
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 79
// nextElementSibling zellii desteklenmiyorsa...
var child = e_ref.nextSibling;

while (child) {
return child;
}
else {
child = child.nextSibling;
}
}
}
else {
return e_ref.nextElementSibling;
}
return null;
},
_previousElementSibling: function(e_ref/*e_ref:elemanReferans*/){
/* HTML aa yapsnda referans alnan elemandan nce
gelen elemann (kardefl eleman) referansn almak iin
_previousElementSibling metodunu tanmladk*/
if (e_ref.previousElementSibling == undefined) {
//previousElementSibling zellii desteklenmiyorsa...
var child = e_ref.previousSibling;

while (child) {
return child;
}
else {
child = child.previousSibling;
}
}
}
else {
return e_ref.previousElementSibling;
}
return null;
var init = function(){
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 80
80 HER YNYLE HTML5
var eleman = document.getElementById(bir);

var child_element_first = jsharp._firstElementChild(eleman);
var child_element_last = jsharp._lastElementChild(eleman);
var nextSiblingElement = jsharp._nextElementSibling(eleman);
var previousSiblingElement = jsharp._previousElementSibling(eleman);
alert(child_element_first.id + \n+
child_element_last.id+\n +nextSiblingElement +\n
+previousSiblingElement.id+\n );
/*nextSiblingElement isimli deiflkenin deeri null olacaktr. nk div#bir
elemanndan sonra gelen ve kardefli durumda olan bir eleman dm yoktur.*/
}
</script>
</head>
<div id=ust>Div ierii</div>
<div id=bir>
Tarayc<span id=spn>Farklklar</span>
<h1 id=head>Daha Fazla Kod</h1>
Belki Daha Fazla
</div>
Baka bir #text
</body>
</html>
Ekran grntleri:
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 81
IE8 ekran grnts
IE6 ekran grnts

(IETester v0.4.7
ile elde edildi)
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 82
82 HER YNYLE HTML5
Sonu
DOM Level 2 Traversal and Range bildirimi ierisindeki firstElementChild, lastElementChild, nextElementChild, previousElementSibling zelliklerini desteklemeyen tarayclar iin yazdmz kodlar yukarda grlmektedir. Bu durum, yeni bafllayanlara iin biraz korkutucu gelebilir. Bununla beraber nesne, metot ve zellikleri farkl tarayclarda alfltrmak iin kendiniz kod yazmak yerine, var olan hazr
JavaScript ktphanelerini (API) kullanabilirsiniz.
Kullanabileceiniz JavaScript Ktphaneleri (API):
Dojo: http://dojotoolkit.org/
Jquery: http://jquery.com/
YUI Library: http://developer.yahoo.com/yui/
querySelector(), querySelectorAll() ve getElementsByClassName() metotlar-
nn tarayclarn alt srmleri tarafndan desteklenmemesi konusuna geri dnersek; bu

metotlar sonuta CSS seicileri tarafndan hedef alnan eleman ya da elemanlarn referansn alrlar. Bu metotlarn yerine Dojo ktphanesi iinde tanml dojo.query()
metodunu kullanabiliriz. fiimdi afladaki rnekle Dojo ktphanesinin sayfaya nasl
dahil edileceini ve belirtilen metodun nasl kullanlacan grelim.
Yukarda belirtilen adresten Dojo APIsini indirmek istediinizde compressed, uncompressed (aklama satrlar ierir) isimli iki seenekle
karfllaflacaksnz. Compressed seeneine tklayarak dojo.js (ekirdek yap) isimli
JavaScript dosyasn indirin ve Script etiketini kullanarak sayfanza dahil edin.
dojo.js ierisinde Dojo ktphanesinin ekirdek yaps bulunur. Dier Dojo modllerini (Dijit, Dojox) sayfalarnzda kullanabilmek iin Dojo ktphanesinin tamamn (Dojo SDK) indirmeniz gerekir.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>Dojo</title>
<script src=http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js
type=text/javascript>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 83
/*Dojo Toolkit 1.5 ktphanesini bilgisayarnza indirmeden
(DOJO ktphanesini saklayan/yaynlayan
Sitelerden (CDN)) internet zerinden kullanabilirsiniz.*/
</script>
dojo.addOnLoad( function() {
/*dojo.addOnload(function(){//kodlar}) Dojo kodlarn yazacamz

metottur. Bu metot ierisinde Dojo modlleri (Dier
dojo>>javaScript dosyalar) ve dier Dojo nesneleri kullanma hazrdr.

DOM nesneleri ve Dojo uygulamalar kullanma hazr olduktan sonra
bu metot ierisindeki kodlar alflr.*/
/*dojo.query(selectors) bu metod ierisine yazlan CSS
seicilerinin hedef ald eleman ya da elemanlarn referansn dndrr.*/
console.log(id zelliine birP deeri atanm eleman**>);

var elemanP1 = dojo.query(#birP);
console.log(elemanP1);
console.log(id zelliine dj deeri atanm elemann
ocuu olan tm elemanlar**>);
dojo.query(#dj>*).forEach( function(node, index, arr) {
/*forEach() metodu sayesinde bir NodeList nesnesi ierisindeki
elemanlara tek tek ulaflabiliriz.*/
console.log(node);
});
var elemanSpn = dojo.query(.spn);
console.log(class zelliine spn deeri atanm eleman**>);
console.log(elemanSpn);
var sonP=dojo.query(.onem.bil).forEach(function(node,index,arr){
console.log(class zelliklerine onem bil eklinde
snf+\n+ seici listesi yazlm elemanlar**>);
console.log(node);
});
console.log(class zelliine atanan snf seici
listesi iinde onem ya +\n+da bil deeri bulunan elemanlar**>);
var sonP=dojo.query(.onem,.bil).forEach(function(node,index,arr){
console.log(node);
});
/*Ayrca kullanm rneklerine bakn;
-----------------------------------*dojo.query(h3)
Tm h3 elemanlarnn listesini dndrr(NodeList)
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 84
84 HER YNYLE HTML5

*dojo.query(#main)
#main id seicisi ile hedef alnan elemann referansn dndrr.
*dojo.query(#main h3)
id zelliine main deeri atanmfl elemann soyundan gelen h3
elemanlarnn listesini dndrr.
*dojo.query(div#main)
id zelliine main deeri atanmfl div elemannn referansn dndrr.
*dojo.query(#main div > h3)
id zelliine main deeri atanmfl elemannn soyundan gelen div
elemanlarnn ocuu durumunda olan h3 elemanlarnn listesini dndrr.
*dojo.query(.onem)
class zelliklerine onem deeri atanmfl elemanlarn listesini dndrr.
*dojo.query(.onem.bil)
class zelliklerine onem ve bil snf seici isim listesi atanan
});
</head>
<body>
</html>
</body>
elemanlarn listesini dndrr.*/
</script>
<div id=dj>
<p id=birP>
HerYnyle
<span class=onem>HTML5</span>
</p>
<p>
Dojo
<span class=spn>Framework</span>
</p>
<p class=onem bil>
Javascript
</p>
</div>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 85
Ekran grnts:
+HTML5-BOLUM3
6/17/11
4:25 PM
86 HER YNYLE HTML5
Page 86
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 87
HTML5 ve CSS3
HTML5 dilinin getirdii yeni elemanlar ve yapsal zellikler sayesinde CSS kodlarn daha etkili bir flekilde kullanabilir, daha anlamsal CSS seicileri oluflturabilirsiniz.
CSSi, basamakl stil sayfalar ya da stil flablonlar olarak tanmlayabiliriz. CSS ile
belgenizin grnmn kontrol edebilir. Sayfaya yerlefltirdiiniz ieriklere geliflmifl
grsel zellikler tanmlayabilirsiniz.
Sayfanzn sunumunu tek bir yere yazdnz CSS kodlar ile kontrol edebilir ya da
oluflturacanz harici bir CSS dosyas ile birden fazla sayfann grnmn kontrol edebilirsiniz.
CSS kuralar, szdizimi ve zellikleri olan bir yapdr. Bu yapnn CSS1, CSS2 ve
en son CSS3 srmleri karlmfltr. Aflada CSS3 seicilerinin tanm ve kullanmlaryla ilgili bilgiler verilmifltir.
CSS3 Selectors
Seici; aldklar deerlerle beraber bir grup zellii temsil eden bir addr. zellik
gruplar bu adla temsil edilirler. Baz durumlarda oluflturduunuz seiciler HTML
eleman ya da elemanlarna zelliklerin uygulanmasn salamak (belirtilen eleman
ya da elemanlar hedef almak) iin anahtar szckler ierebilir.
fiimdi CSS3 yaps ierisindeki seicilere bakalm.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 88
88 HER YNYLE HTML5
Seici Tipi
Aklama
Type Selectors
(Eleman)
HTML etiket seiciler
HTML elemanlarnn var olan

grsel zelliklerini deifltirmek
ya da belirtilen elemanlara yeni
grsel zellikler eklemek iin
kullanlrlar. Seici ismi olarak
HTML eleman isimleri kullanlr.
ID Selectors (#)
ID seiciler
Kimlik seicileri, HTML

elemanlarnn id zelliklerine
atanan benzersiz isimler seici
ad olarak kullanlr.
Class Selectors (.)

Snf seiciler
Bir HTML eleman iin farkl

CSS zellik gruplar ya da
sayfadaki tm HTML
elemanlar tarafndan
kullanlabilecek CSS zellik
gruplar tanmlayabilirsiniz.
Universal Selector (*) Body ya da temel bir eleman

Evrensel seiciler
ierisindeki tm elemanlara
CSS tanmlamalar yapmak iin
kullanlrlar. Evrensel seici *
(yldz) karakteri ile oluflturulur.
Descendant Selectors ()
Soy (torun seiciler)
seiciler
HTML elamanlarnn
oluflturduu soy aac
yapsndan faydalanarak
belirlediiniz bir elemann
soyundan gelen eleman
ya da eleman gruplarna CSS
kodlar atamak iin kullanlr.
Child Selector (>)

ocuk seiciler
Bir HTML elemann ocuu

durumdaki eleman ya da
elemanlara CSS zellikleri
atamak iin kullanlr.
Torun seicilere benzemekle
beraber daha zel durumu
olarak dflnebilirsiniz.
Kullanm
h1{bildirimler}
CSS
CSS1
Sayfadaki tm h1
elemanlarn hedef
alr.
#onemli{bildirimler}
id zelliine onemli
deeri atanmfl eleman
hedef alr.
CSS1
.baslik{bildirimler}
CSS1
class zelliine baslik
deeri atanmfl
elemanlar hedef alr.
--------------------------------p.baslik{bildirimler}
p elemanlar ierisinden
class zelliine baslik
deeri atanmfl elemanlar
hedef alr.
#anaListe*{bildirimler}
id zelliine anaListe
deeri atanmfl elemann
iindeki tm elemanlar
hedef alnr.
CSS2
div#contentp{bildirimler} CSS1
id zelliine content
deeri atanmfl elemann
soyundan gelen (iinde
olan) tm p elemanlar
hedef alnr.
div#content>p{bildirimler} CSS2
id zelliine content
ocuu durumunda olan
tm p elemanlar
hedef alnr.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 89
HTML5 VE CSS3 89
Adjacent Sibling
Selector (E1+E2)
Bitiflik kardefl seiciler
Ayn ebeveyn ierisinde

bulunan (kardefl olan)
belirlediimiz elemandan
hemen sonra gelen elemana
CSS kodlar tanmlamak
iin kullanlr.
li#acil+li{bildirimler}
id zelliine acil deeri
atanmfl li elemanndan
sonra gelen ve kardefli
durumunda olan li
eleman hedef alnr.
--------------------------------<ul id=bir>
CSS2
<li id=acil>1. eleman</li>

<li>2.eleman</li>
<li>3.eleman</li>
<li>4.eleman</li>
<li>5.elaman</li>
</ul>
General Sibling
Selectors (E1 ~ E2)
Genel kardefl seiciler
Ayn ebeveyn ierisinde

bulunan (kardefl olan)
belirlediimiz elemandan sonra
gelen elemana/elemanlara
CSS kodlar atamak iin
kullanlrlar.
li#acil~li{bildirimler} CSS3
id zelliine acil deeri
atanmfl li elemanndan
sonra gelen (kardefli
durumunda olan) li
elemanlar hedef alnr.
--------------------------------<ul id=bir>
<li id=acil>1. eleman</li>

<li>2.eleman</li>
<li>3.eleman</li>
<li>4.eleman</li>
<li>5.elaman</li>
</ul>
Attrbute Selectors (zellik Seiciler)
HTML etiketlerinde kullanlan zelliklere, bu zelliklerin aldklar deerlere ya da

zelliklere atanan deerlerin ksmi bir blmnn konumuna gre seiciler oluflturabilirsiniz.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 90
90 HER YNYLE HTML5
Seici Tipi
[attribute]
Aklama
Belirtilen zellii kullanmfl
eleman ya da elemanlara
CSS kodlar tanmlamak iin
kullanlr.
Kullanm
CSS
div#init p[title]
CSS2
{bildirimler}
id zelliine init deeri
atanmfl div elemannn
soyundan gelen title
zellii tanmlanmfl tm p
elemanlarn hedef alr.
--------------------------------<div id=init>
<p title=aciklama>
XHTML ve CSS Kitab
</p>
<p>CSS Bavuru Kayna

</p>
<p title=son>Geni
Aklama ve rneklerle
</p>
[attribute=value] Kfleli parantezler ierisinde bir

zellik ve deer tanmlamas
yaplarak seici oluflturulur.
Bu durumda belirtilen zellii
deeri ile beraber kullanan
etiketlere CSS kodlar uygulanr.
</div>
div#init p[title=son] CSS2

{bildirimler}
id zelliine init deeri
atanmfl div elemannn
soyundan gelen ve title
zelliine son deeri
atanmfl p elemann
hedef alr.
--------------------------------<div id=init>
<p title=aciklama>
XHTML ve CSS Kitab
</p>
<p>CSS Bavuru Kayna

</p>
<p title=son>Geni
Aklama ve rneklerle
</p>
</div>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 91
HTML5 VE CSS3 91
[attribute~=value] HTML eleman belirtilen zellii

(attribute) kullanmfl ve bu
zellie ald deer listesi
ierisinde bizim tanmladmz
metin (value) var ise bu elemana
belirtilen CSS kodlar uygulanr.
*Deer listesi boflluk ieren
birden fazla metnin
oluflturduu string dize.
[attribute*=value] HTML eleman belirtilen zellii
(attribute) kullanmfl ve bu
zellie ald deer ierisinde
bizim tanmladmz metin
(value) var ise bu elemana
belirtilen CSS kodlar uygulanr.
[attribute^=value] Bir HTML elemannn belirtilen

zelliine (attribute) ald
deerin baflnda tanmladmz
deer (value) var ise bu HTML
elemanna CSS kodlar uygulanr.
[attribute$=value] Bir HTML elemannn belirtilen

zelliine (attribute) ald
deerin sonunda tanmladmz
deer (value) var ise bu HTML
elemanna CSS kodlar uygulanr.
p[title~=html5]
{bildirimler}
title zelliine ald
deer listesi ierisinde
html5 metni bulunan
p elemann hedef alr.
CSS2
--------------------------------<p title=csshtml5>
XHTML ve CSS Kitab</p>
<p title=css html5>
CSS Bavuru Kayna</p>
p[title~=html5]
CSS3
{bildirimler}
title zelliine ald deer
ierisinde html5 metni
bulunan p elemanlarn
hedef alr.
--------------------------------<p title=csshtml5>
<p title=css html5>
CSS Bavuru Kayna</p>
p[title^=html5]
CSS3
{bildirimler}
title zelliine ald
deerin baflnda html5
metni bulunan p
--------------------------------<p title=html5css>
XHTML ve CSS Kitab
</p>
<p title=css html5>CSS
Bavuru Kayna</p>
p[title$=html5]
{bildirimler}
title zelliine ald
deerin sonunda html5
metni bulunan p
---------------------------------
CSS3
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 92
92 HER YNYLE HTML5
[attribute|=value] [attribute^=value]
seicisi kalb ile benzerdir
(value deeri zellie alnan
deerin baflnda olmal). Fakat
value deerinden sonra (tire)
karakteri kullanlmfl olmaldr.
<p title=html5css> CSS3

XHTML ve CSS Kitab
</p>
<p title=css html5>CSS
Bavuru Kayna</p>
p[title|=html5]
{bildirimler}
title zelliine ald
deerin baflnda html5-
metni bulunan p
---------------------------------
CSS2
<p title=html5-css>
<p title=html5css>CSS
Bavuru Kayna</p>
<p title=html5 css>
[ns|attribute]
javascript</p>
Namespace (isim alan) iin

zellik seiciler oluflturulabilir.
CSS3
Pseudo-elements (Szde Elemanlar)
Aslnda bir HTML eleman deillerdir, fakat bir HTML eleman gibi davranrlar.
Seici Tipi
::after, :after
Aklama
CSS
Bir elemandan sonra ierik oluflturmak iin kullanlr.

(Satr ii bir content oluflturulur.)
CSS2
erii tanmlamak iin content zellii kullanlr.
CSS 2 Sz Dizimi: element:after {bildirimler}
CSS 3 Sz Dizimi: element::after {bildirimler}
::before, :before
ki tanmlamada ayn ifllemi yapar. CSS3 bu zellii

szde snf ve szde elemanlar arasnda sz dizimi fark
oluflturmak iin ::after fleklinde deifltirmifltir.
Bir elemandan nce ierik oluflturmak iin kullanlr.
(Satr ii bir content oluflturulur.)
erii tanmlamak iin content zellii kullanlr.
CSS2
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 93
HTML5 VE CSS3 93
CSS 2 Sz Dizimi: element:before{bildirimler}

CSS 3 Sz Dizimi: element::before {bildirimler}
:first-letter,
::first-letter
:first-line,
::first-line
::selection
iki tanmlamada ayn ifllemi yapar. CSS3 bu zellii

szde snf ve szde elemanlar arasnda sz dizimi fark
oluflturmak iin ::before fleklinde deifltirmifltir.
Metnin ilk harfine stil tanmlamas yapmak iin kullanlr.
CSS3 bu zellii szde snf ve szde elemanlar arasnda
sz dizimi fark oluflturmak iin ::first-letter
fleklinde deifltirmifltir.
CSS1
Metnin ilk satrna stil tanmlamas yapmak iin kullanlr. CSS1

CSS3 bu zellii szde snf ve szde elemanlar arasnda
sz dizimi fark oluflturmak iin ::first-line fleklinde
deifltirmifltir.
Bir elemana kullanc tarafndan seilme durumunda
uygulanacak CSS tanmlamalar yapmak iin kullanlr.
CSS3
Bu szde snf ierisinde sadece color, background,

cursor, outline zellikleri tanmlanabilir.
Link and user action pseudo-classes

(Link ve Kullanc Eylemleri iin Szde Snflar)
Seici Tipi
:link, :visited
Aklama
link, visited szde snflar sadece <a> eleman iin

tanmlanabilir.
CSS
CSS 1/2
:link Ziyaret edilmemifl linklerin style tanmlamasn

yapmak iin kullanlan szde snftr.
:active
:focus
:hover
:visited Kullanc tarafndan ziyaret edilmifl yani

tklanmfl linklerin style tanmlamasn yapmak iin
kullanlan szde snftr.
Bir elemann mouse ile zerine tkland andaki stil

tanmlamasn yapmak iin kullanlr.
CSS 1/2
Bir input elemann zerine odaklanldnda (Eleman

klavye ya da Mouse ile seildiinde) kullanlacak CSS
zellik kodlarn tanmlar.
CSS2
Bir elemana Mouse ile zerine gelindii anda uygulanacak CSS2

stil tanmlamalarn yapmak iin kullanlr.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 94
94 HER YNYLE HTML5
Language pseudo-class :lang
Elemanlarn lang zelliklerine aldklar dil koduna gre seiciler oluflturulur.

Kullanm:
div:lang(tr){
Bildirimler
}
lang zelliine tr deeri alan div elemanlarn hedef alr.

<div lang=tr>Birinci Div</div>
<div lang=en-US>kinci Div</div>
<div lang=en>nc Div</div>
CSS Bildirimi: CSS 2

:target
Sayfa ii linke tklandnda tarayc tarafndan hedef alnan apa eleman (Hedef
Eleman) iin geerli olacak CSS tanmlamalar yapar.
Kullanm:
h1:target{Bildirimler}
<a href=#hedef1>Birinci Balk</a>


<h1 id=hedef1>Buradasnz
</h1>
Kullanc linke tklandnda CSS tanmlamalar h1 elemanna uygulanr.

Negation pseudo-class :not
Tanmlanan Seici tarafndan hedef alnmayan elemanlara CSS tanmlamas yapmak iin kullanlr.
Kullanm:
p:not(.onem){
Bildirimler}
p elemanlar ierisinden .onem snf seicisini kullanmayanlar hedef alr.

<p class=onem> XHTML ve CSS Kitab</p>
<p class=onem>CSS Bavuru Kayna</p>
<p class=duyur> javascript</p>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 95
HTML5 VE CSS3 95
Structural pseudo-classes (Yapsal Szde Snflar)

:root
:nth-child( )
:nth-of-type( )
:nth-last-child( )
:nth-last-of-type( )
:first-child
:last-child
:first-of-type
:last-of-type
:only-of-type
:only-child
:empty
Aflada ayrntl bir flekilde anlatlmfltr.

UI States pseudo-classes (Kullanc Arayz iin Szde Snflar)
Seici Tipi
:checked
Aklama
radio, checkbox ve menu

eleri kullanc tarafndan
seildiinde belirtilen elemanlar
iin aktif olacak CSS
tanmlamalar yapabilirsiniz.
:enabled, :disabled :enabled aktif, kullanlabilir

(disabled=disabled
tanmlamas yaplmamfl) form
elemanlarna CSS kodlar
tanmlamak iin kullanlr.
:disabled Pasif
(disabled=disabled
tanmlamas yaplmfl) form
elemanlarna CSS kodlar
tanmlamak iin kullanlr.
Kullanm
CSS
input[type=checkbox]:checked CSS3
{Bildirimler}
type zelliine checkbox
deeri atanan 2. input
eleman kullanc tarafndan
seildiinde (iflaretlendiinde)
belirtilen CSS kodlar elemana
uygulanr.
--------------------------------<input type=radio/>
<input type=checkbox/>
input[type=text]:enabled
{Bildirimler}
type zelliine text deeri
atanmfl kullanlabilir input
---------------------------------
input[type=text]:disabled
{Bildirimler}
type zelliine text
deeri atanmfl pasif input
--------------------------------<!Birinci Seicinin
Hedefi-->
<input type=text/>
<!kinci Seicinin
Hedefi-->
<input type=text
disabled=disabled/>
CSS3
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 96
96 HER YNYLE HTML5
:default
:invalid
:optional
:required
Kullancya birden fazla seenek

arasndan seim yapma imkan
veren HTML elemanlarnn
(menu elemanlar, alan kutular,
Listeler) iinde liste yapsn
oluflturan ve varsaylan olarak
seili bulunan alt elemanlara
CSS tanmlamalar yapmak
iin kullanlr.
Bir form elemanna girilen

deer elemana girilebilecek
veri formatnda deilse,
yani dorulama snamasnda
hata olursa belirtilen elemana
CSS kodlar uygulanr.
option:default
CSS3
{Bildirimler}
alan kutu yaps (Select
Eleman) ierisinde
varsaylan olarak seili ilk
option eleman hedef alnr.
--------------------------------<select>
<option
selected=selected>
Seenek_1/option>
<option>seenek_2</option>
<option>seenek_3</option>
</select>
input[type=email]:invalid
{Bildirimler}
type zelliine email
deeri atanmfl input
elemanna doru bir email
adresi yazlmamfl ise CSS
kodlar elemana uygulanr.
--------------------------------<input type=email/>
<input type=text/>
CSS3
Form eleman gurubu ierisinde input:optional{Bildirimler} CSS3

input elemanlar ierisinden
istee bal veri girifli yaplan
elemanlara CSS tanmlamas
required (ierik yazmak
yapmak iin kullanlr.
ya da seim yapmak
gerekli) tanmlamas
yaplmayan 1. ve 2. form
elemanlar hedef alnr.
Required (ierik yazmak ya da

seim yapmak gerekli) zelliini
kullanlmfl form elemanlarna
CSS tanmlamalar yapmak iin
kullanlr.
--------------------------------<input type=text/>
<input type=email
required=required />
input:required{Bildirimler}
input elemanlar ierisinden

required tanmlamas
yaplmfl sonuncu form
eleman hedef alnr.
--------------------------------<input type=text/>
<input type=email
required=required />
CSS3
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 97
HTML5 VE CSS3 97
Page pseudo-classes (Sayfa iin szde snflar)

Seici Tipi
Aklama
CSS
:first, :left, :right Bu szde snflar belge yazdrlrken geerli olacak stil
CSS3
tanmlamalar yapmak iin kullanlrlar. Bu szde snflarn
ierisinde sadece belge iin margin, orphans, windows
ve page break tanmlamalar yaplabilir.
Structural Pseudo-Classesn
(Yapsal Szde Snflar) ncelenmesi
fiimdi Structural Pseudo-Classesn yapsal zelliklerini inceleyelim.
:nth-chld( )
Kapsayc eleman ierisindeki pozisyonlarna (kardefl elemanlar listesindeki index
numaralarna) gre ocuk eleman ya da elemanlara CSS tanmlamalar yapabilirsiniz.
Kullanm: eleman:nth-child(index) { Bildirimler }
index deeri seici tarafndan hedef alnacak ocuk eleman ya da elemanlarn sralamadaki index numarasn tanmlamak iin kullanlr. Bir say (1, 2...) forml (n,
2n+1...) ya da n tanml bir kelime (odd, even) olabilir.
Sralamadaki ilk elemann index deeri 1den bafllar. (2n+1) forml yerine odd ve
(2n) forml yerine even anahtar kelimelerini kullanabilirsiniz. Forml oluflturulurken sayc olarak n deiflkeni kullanlr (n=0,1,2...) ve forml an+b formatnda yazlr. a, b deerleri birer tamsaydr.
rnek formller: (0n+1), (-n+3), (3n+1)
rnek:
<!DOCTYPE html>
<html>
<title>nth-child()</title>
div#cont>p:nth-child(1){
/*Bu seicinin, div#content elemannn ocuu olan ve kardefl elemanlar
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 98
98 HER YNYLE HTML5

listesinde 1. srada olan p elemann hedef almas beklenir. Fakat div#content
eleman ierisinde kardefl elemanlar listesinde 1 index numarasna sahip
p eleman olmadndan bu seici herhangi bir ifllem yapmaz.*/
background-color:blue;
}
div#cont>p:nth-child(2){
/*div#content elemannn ocuu olan ve kardefl eleman sralamasnda

2. srada olan p elemann hedef alr. Yani div elemannn 2 inci ocuu
olan p elemanna css bildirimi uygulanr.*/
</html>
background-color:red;
}
</style>
</head>
<body>
<div id=cont>
<h3>Balk 1</h3>
<p>Balk 1 ierik</p>
<h3>Balk 2</h3>
<p>Balk 2 ierik</p>
</div>
</body>
Kardefl elemanlar listesi:
div#cont eleman ierisinde bulunan (kardefl elemanlar listesindeki) ocuk elemanlara nth-child() seicisi tarafndan tanmlanan
index numaralarna bakalm. Dikkat ederseniz index numaralar
sayfa akflndaki yerlerine gre tip ayrm yaplmadan verilmifl.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 99
HTML5 VE CSS3 99
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
div#cont>p:nth-child(n+1){
}
</style>
</head>
<body>
<div id=cont>
<h3>Balk 1</h3>
<p>Balk 1 ierik</p>
<h3>Balk 2</h3>
<p>Balk 2 ierik</p>
</div>
</body>
</html>
rnekte index deeri olarak bir forml yazlmfl bu durumda n deiflkeninin deeri
0dan bafllayacaktr.
Formlmz: p:nth-child(n+1)
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 100
100 HER YNYLE HTML5
n=0 >>p:nth-child(1): Bu durumda 1 index numarasna sahip p eleman hedef

alnr. (Byle bir eleman yok.)
alnr.
alnr. (Byle bir eleman yok)
alnr.
Yani bu durumda Kardefl Elemanlar Listesinde 2. ve 4. srada bulunan p elemanlarna CSS kodu uygulanr.
rnek:
<!DOCTYPE html>
<html>
ul li:nth-child(2n+1) {
}
</style>
</head>
<body>
<ul>
<li>Bir</li>
<li>ki</li>
<li></li>
<li>Drt</li>
<li>Be</li>
</ul>
</body>
</html>
Seiciyi incelersek ul eleman ierisinde bulunan 1, 3 ve 5 numaral li elemanlarnn hedef alndn greceiz.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 101
HTML5 VE CSS3 101
Ekran grnts:
:nth-of-type()
Kapsayc eleman ierisindeki pozisyonlarna (ayn tipteki kardefl elemanlar listesindeki index numaralarna) gre ocuk eleman ya da elemanlara CSS tanmlamalar yapabilirsiniz. :nth-child() seicisinden farkl olarak ayn tipteki elemanlar
ayr ayr kardefl elemanlar listesi oluflturur.
eleman:nth-of-type(index) { Bildirimler }
index deeri seici tarafndan hedef alnacak ocuk eleman ya da elemanlarn sra-
lamadaki index numarasn tanmlamak iin kullanlr. Bir say (1, 2...), forml (n,
2n+1...) ya da n tanml bir kelime (odd, even) olabilir. ocuk elemanlar iinde bulunan bir tre ait ilk elemann index numaras 1dir. (2n+1) forml yerine odd ve
(2n) forml yerine even anahtar kelimelerini kullanabilirsiniz. Forml oluflturulurken sayc olarak n deiflkeni kullanlr (n=0, 1, 2...) ve forml an+b formatnda yazlr. a, b deerleri birer tamsaydr. rnek formller: (0n+1), (3n+1)
rnek:
<!DOCTYPE html>
<html>
<title>nth-of-type()</title>
div#cont>p:nth-of-type(1){
/*Bu seici div#content elemannn ocuu olan ve ayn tipteki kardefl

elemanlar listesinde 1. srada olan p elemann hedef alr.*/
}
div#cont>h3:nth-of-type(1){
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 102
102 HER YNYLE HTML5

/*div#content elemannn ocuu olan ve ayn tipteki kardefl eleman
sralamasnda 1. srada olan h3 elemann hedef alr.*/
</head>
<body>
</html>
</body>
</style>
<div id=cont>
<h3>Balk 1</h3>
<p>Balk 1 ierik</p>
<h3>Balk 2</h3>
<p>Balk 2 ierik</p>
</div>
Ayn tipteki (trdeki) kardefl elemanlar listesi:

Dikkat ederseniz nth-of-type() seicisi her tr (eleman) iin ayr bir kardefl
elemanlar listesi tanmlar. index numaralar elemanlarn sayfa akflndaki yerlerine gre tip ayrm yaplarak verilir.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 103
HTML5 VE CSS3 103
rnek:
<!DOCTYPE html>
<html>
<title>nth-of-type()</title>
dd:nth-of-type(n+1){
background-color: lightblue;
text-indent:10px;
border-radius: 20px;/*CSS3*/
-moz-border-radius:20px;/*firefox 3.6*/
-webkit-border-radius:20px;/*Safari 3.0*/
}
</style>
</head>
<body>
<dl>
<dt>HTML5</dt>
<dd>Her Yn ile HTML5</dd>
<dt>XHTML-CSS</dt>
<dd>Xhtml ve CSS</dd>
<dt>javaScript</dt>
<dd>JavaScript</dd>
<dt>KODLAB</dt>
<dd>brahim ELKBLEK</dd>
</dl>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 104
104 HER YNYLE HTML5
dd:nth-of-type(n+1) seicisini incelersek...
n=0 >> dd:nth-of-type(1) Bu durumda 1 index numarasna sahip dd eleman he-
def alnr.
def alnr.
def alnr.
def alnr.
n saycs 4 olduunda 5 index numarasna sahip dd eleman aranacaktr. dl eleman

ierisinde en byk index numarasna sahip dd eleman 4 olduundan sayma ifllemi
durdurulur.
dl eleman ierisindeki elemanlara nth-of-type() seicisi tarafndan tanmlanan

index numaralarna grsel olarak bakalm.
<dl>
</dl>
<dt>HTML5</dt>(dt:1)
<dd>Her Yn ile HTML5</dd>(dd:1)
<dt>XHTML-CSS</dt>(dt:2)
<dd>Xhtml ve CSS</dd>(dd:2)
<dt>javaScript</dt>(dt:3)
<dd>JavaScript</dd>(dd:3)
<dt>KODLAB</dt>(dt:4)
<dd>brahim ELKBLEK</dd>(dd:4)
:nth-last-chld( )
Kapsayc eleman ierisindeki pozisyonlarna (kardefl elemanlar listesindeki index
numaralarna) gre ocuk eleman ya da elemanlara CSS tanmlamalar yapabilirsiniz.
:nth-child() seicisinden farkl olarak son ocuun index numaras 1dir. Index
numaralar en son elemandan bafllanarak yukar doru arttrlarak verilir.
Kullanm: eleman:nth-last-child(index) { Bildirimler }
index deeri seici tarafndan hedef alnacak ocuk eleman ya da elemanlarn sralamadaki index numarasn tanmlamak iin kullanlr. Bir say (1, 2...) forml (n,
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 105
HTML5 VE CSS3 105
2n+1...) ya da n tanml bir kelime (odd, even) olabilir. (2n+1) forml yerine odd
ve (2n) forml yerine even anahtar kelimelerini kullanabilirsiniz. Forml oluflturulurken sayc olarak n deiflkeni kullanlr (n=0, 1, 2...) ve forml an+b formatnda
yazlr. a, b deerleri birer tamsaydr. rnek formller: (0n+1), (-n+4), (3n+1)
rnek:
<!DOCTYPE html>
<html>
<title>nth-last-child()</title>
p:nth-last-child(3){
/*Kardefl eleman listesinde 3.index numarasna sahip p elemann

hedef alr.*/
text-indent:10px;
-moz-border-radius:20px;/*firefox 3.6*/
}
</style>
</html>
</head>
<body>
<div id=cont>
<h3>Balk 1</h3>
<p>Balk 1 ierik</p>
<h3>Balk 2</h3>
<p>Balk 2 ierik</p>
</div>
</body>
Kardefl elemanlar listesi ve nth-last-child() seicisi tarafndan elemanlar iin

tanmlanan index numaralarna bakalm.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 106
106 HER YNYLE HTML5
Ekran grnts:
:nth-last-of-type( )
Kapsayc eleman ierisindeki pozisyonlarna (ayn tipteki kardefl elemanlar listesindeki index numaralarna) gre ocuk eleman ya da elemanlara CSS tanmlamalar yapabilirsiniz. :nth-of-type seicisinden farkl olarak bir trn son ocuk elemannn index numaras 1dir. index numaralar ayn tipteki en son elemandan
bafllanarak yukar doru arttrlarak verilir.
eleman:nth-of-type(index) { Bildirimler }
index deeri seici tarafndan hedef alnacak ocuk eleman ya da elemanlarn sra-
lamadaki index numarasn tanmlamak iin kullanlr. Bir say (1, 2...) forml (n,
2n+1...) ya da n tanml bir kelime (odd, even) olabilir. (2n+1) forml yerine odd
ve (2n) forml yerine even anahtar kelimelerini kullanabilirsiniz. Forml oluflturulurken sayc olarak n deiflkeni kullanlr (n=0, 1, 2...) ve forml an+b formatnda yazlr. a, b deerleri birer tamsaydr.
rnek formller: (0n+1), (3n+1)
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 107
HTML5 VE CSS3 107
rnek:
<!DOCTYPE html>
<html>
<title>nth-last-of-type()</title>
Div#cont>p:nth-last-of-type(n+1){
text-indent:10px;
-moz-border-radius:20px;/*Firefox 3.6*/
}
</style>
</head>
<body>
<div id=cont>
<h3>Balk 1</h3>
<p>Balk 1 ierik</p>
<h3>Balk 2</h3>
<p>Balk 2 ierik</p>
</div>
</body>
</html>
Ayn trdeki kardefl elemanlar listesi ve nth-last-of-type() seicisi tarafndan

elemanlar iin tanmlanan index numaralarna bakalm.
Bu durumda 1, 2 index numaralarna sahip p elemanlarna CSS kodlar atanr.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 108
108 HER YNYLE HTML5
Ekran grnts:
:frst-chld ve :last-chld
Kapsayc eleman ierisindeki ilk ocuk elemana CSS tanmlamas yapmak iin
:first-child, son ocuk elemana CSS tanmlamas yapmak iin :last-child
szde snflar kullanlr.
rnek:
<!DOCTYPE html>
<html>
<title>first-child,last-child</title>
div#cont h3:first-child{
/*div#cont eleman ierisindeki ilk ocuk durumunda olan

h3 eleman hedef alnmfltr.*/
text-indent:10px;
-moz-box-shadow: 0 0 1em blue;/*Firefox 3.5*/
-webkit-box-shadow: 0 0 1em blue;/*Safari 3.0*/
box-shadow: 0 0 1em blue;/*CSS3*/
}
div#cont p:first-child{
/*Bu seici ile div#cont eleman ierisindeki ilk ocuk durumunda olan p
eleman hedef alnmak istenmifltir. Fakat belirtilen eleman ierisinde
ilk ocuk durumunda olan eleman p deil, h3 elemandr. Bu seici
herhangi bir ifllem yapmaz*/
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 109
HTML5 VE CSS3 109
}
div#cont p:last-child{
/*div#cont eleman ierisindeki son ocuk durumunda olan

p eleman hedef alnmfltr.*/
</head>
<body>
</html>
</body>
background-color:black;
text-indent:10px;
color:white;
-moz-box-shadow: 0 0 1em black;/*Firefox 3.5*/
-webkit-box-shadow: 0 0 1em black;/*Safari 3.0*/
box-shadow: 0 0 1em black;/*CSS3*/
}
</style>
div id=cont>
<h3>Balk 1</h3>
<p>Balk 1 ierik</p>
<h3>Balk 2</h3>
<p>Balk 2 ierik</p>
</div>
Ekran grnts:
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 110
110 HER YNYLE HTML5
:frst-of-type ve :last-of-type
Kapsayc eleman ierisinde bir trn ilk ocuk elemanna CSS tanmlamas yapmak iin :first-of-type, son ocuk elemanna CSS tanmlamas yapmak iin
:last-of-type snflar kullanlr.
rnek:
<!DOCTYPE html>
<html>
<title>first-of-type,last-of-type</title>
dt:first-of-type{
/*dl eleman ierisindeki ilk dt elemanna CSS kodlar uygulanr.*/
text-indent:10px;
dd:first-of-type{
/*dl eleman ierisindeki ilk dd elemanna CSS kodlar uygulanr.*/
background-color:black;
text-indent:10px;
color:white;
-moz-box-shadow: 0 0 1em black;/*Firefox 3.5*/
-webkit-box-shadow: 0 0 1em black;/*Safari 3.0*/
box-shadow: 0 0 1em black;/*CSS3*/
}
dl *:last-of-type{
/*dl eleman iindeki farkl trlerin son elemanlarna CSS kodlar uygulanr.*/
background-color:crimson;
text-indent:10px;
-moz-box-shadow: 0 0 1em crimson;/*Firefox 3.5*/
-webkit-box-shadow: 0 0 1em crimson;/*Safari 3.0*/
box-shadow: 0 0 1em crimson;/*CSS3*/
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 111
HTML5 VE CSS3 111
</html>
</style>
</head>
<body>
<dl>
<dt>HTML5</dt>
<dd>Her Yn ile HTML5</dd>
<dt>XHTML-CSS</dt>
<dd>Xhtml ve CSS</dd>
<dt>javaScript</dt>
<dd>JavaScript</dd>
<dt>KODLAB</dt>
<dd>brahim ELKBLEK</dd>
</dl>
</body>
Ekran grnts:
:only-chld, :only-of-type, :root ve :empty
:only-child kapsayc eleman ierisinde tek ocuk durumunda olan elemana CSS
tanmlamas yapmak iin kullanlr.
:only-of-type kapsayc eleman ierisinde bir tre ait tek ocuk durumunda olan
elemana CSS tanmlamas yapmak iin kullanlr.
:root HTML elemanna stil tanmlamas yapmak iin kullanlr.
:empty iinde bir dm olmayan elemanlara CSS tanmlamas yapmak iin kul-
lanlr.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 112
112 HER YNYLE HTML5
rnek:
<!DOCTYPE html>
<html>
<title>only-child,only-of-type</title>
div#bir p:only-child{
/*div#bir eleman ierisinde tek ocuk durumunda olan (Ayn ya da farkl

trde baflka bir ocuk eleman olmamas gerekir.)
p elemanna CSS tanmlamalar uygulanr.*/
text-indent:10px;
}
div#bir+div p:only-of-type{
/*div#bir elemannn kardefli olan div eleman ierisinde bir tre ait tek
ocuk durumunda olan(Ayn trde baflka bir eleman olmamas lazm.
Farkl trde baflka bir eleman olabilir) p elemanna CSS
tanmlamalar uygulanr.*/
text-indent:10px;
-moz-box-shadow: 0 0 1em lightblue;/*Firefox 3.5*/
-webkit-box-shadow: 0 0 1em lightblue;/*Safari 3.0*/
box-shadow: 0 0 1em lightblue;/*CSS3*/
}
</style>
</html>
</head>
<body>
<div id=bir>
<p>Her Yn ile HTML5</p>
</div>
<div>
<h3>Balk</h3>
<p>Uzmanlar iin JavaScript</p>
</div>
</body>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 113
HTML5 VE CSS3 113
Ekran grnts:
Yapsal Szde Snflar in Tarayc Destei

Seici
:root
Internet Explorer
Firefox
Opera
1.0+
:nth-child()
Safari
1.0+
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:first-of-type
:last-of-type
3.5+
9.5+
IE9
3.1+
:only-of-type
:last-child
:only-child
:empty
:first-child
3+
E8 (Ksmen)
+HTML5-BOLUM4
6/17/11
5:52 PM
114 HER YNYLE HTML5
Page 114
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 115
HTML5 ve
WEB FORMLARI
Kullancdan bilgi almak (toplamak) iin form alanlar oluflturmalsnz. Kullanc

form ierisine bilgileri girip gnder butonuna tkladnda, form elemanlar ierisindeki bilgiler sunucu tarafl alflan bir sayfada ifllenir. Sunucu tarafl alflan sayfa, kullancdan ald bilgilerle ilgili eflitli ifllemler yapabilir ve gerekli ise kullancya geri mesaj da verebilir. Form elemanlarn kullanmak iin ilk nce form etiketi kullanmanz gerekecektir.
Form alanlar sadece kullancdan bilgi alp bir baflka sayfaya gndermek iin kullanlmaz. Bunun dflnda form alanlar oluflturarak formu baflka sayfaya gndermeden
sayfann kendi iinde JavaScript yardmyla eflitli ifllemler yapmanz mmkndr.
Sayfa ierisinde kullandnz her bir form etiketi ve form elemanlar iin DOM
nesneleri oluflturulur. Bu durumda oluflturduunuz form ve form elemanlar birer
nesnedir. Nesne zellikleri ve metotlar kullanlabilir.
HTML5 yeni form elemanlar ve form elemanlar iin yeni zellikler tanmlar.
HTML5 form yapsnda; grsel veri girifl kontrolleri, girilen verinin belirli bir formatta olup olmadn kontrol eden (istemci tarafl dorulama snamas yapan) yeni
elemanlar barndrr.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 116
116 HER YNYLE HTML5
Form Nesnesi
Form alanlar oluflturmak iin <form> etiketi kullanlr. Bu elemannn ierisinde

form elemanlar bulunur.
Metotlar: checkValidity(), dispatchFormChange(), dispatchFormInput(),
item(index), namedItem(name), submit(), reset()
zellikleri: [Standart zellikler], accept-charset, action, autocomplete,

enctype, method, name, novalidate, target
accept-charset: Veri girifli iin sunucu tarafndan kabul edilecek karakter

kodlamas listesini ayarlar.
action: Formun ifllenmesi iin gnderilecei sayfa ad.
autocomplete [HTML5]: Veri girifli yaplan form elemanlar iin otomatik tamamlama zelliini aktif ya da pasif yapmak iin kullanlr. Tarayc, kullancnn veri alanna nceden yazd deerlere gre otomatik tamamlama yapar.
(on ya da off deerlerinden birini alr.)
enctype: fiifreleme tr.
method: Gnderme metodu (get/post).

name: Formun ad.
novalidate [HTML5]: Form elemanlar iin dorulama iflleminin yaplp yaplmayacan ayarlar. Form etiketi iinde tanmlanan bu deer submit ve image
elemanlar tarafndan formnovalidate zellii ile deifltirilebilir. Boolean tr
(boolean attributes) bir zelliktir. novalidate=novalidate ya da sadece
novalidate fleklinde kullanabilirsiniz.
target: action ile belirtilen sayfann alaca hedef pencere.
id: Form iin benzersiz bir kimlik.
length: Form ierisindeki var olan eleman says.
elements: Form ierisinde kullanlmfl elemanlarn koleksiyonunu (listesini)

dndrr. Geriye HTMLFormControlsCollection tipinde bir nesne dndrr.
HTMLFormControlsCollection arayz, form elemanlar listesini saklar. Saklanan bu liste belge yapsnda deifliklik olduunda gncellenir.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 117
HTML5 VE WEB FORMLARI 117
rnek:
<html>
<title>form.elements</title>
</style>
var _load=function(){
var frmeleman=document.forms[form_1];
/*Form elemanna ulaflmak iin;
document.form[index]
document.form[name]*/
var htmllen=frmeleman.length;
//Form eleman ierisindeki eleman says
var htmlcol=frmeleman.elements;
//HTMLFormControlsCollection tipinde liste
console.log(htmllen);
/*Form ierisindeki eleman saysn yazdrdk*/
for(var i=0;i<htmllen;i++){
console.log(htmlcol[i]);
/*Form ierisindeki elemanlar konsola yazdrmak iin

bir dng oluflturduk.
htmlcol[i]
htmlcol.item(index)
</html>
Yukardaki yntemlerden herhangi birini kullanabilirdik*/
}
</script>
</head>
<body onload=_load();>
<form action= name=form_1>
Kullanc Ad:
<input type=text/>
ifre:
<input type=password/>
<input type=submit value=Gnder/>
</form>
</body>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 118
118 HER YNYLE HTML5
Ayrca liste ierisindeki elemanlara ulaflmak iin collection.namedItem(name)

metodunu kullanabilirsiniz. name parametresi elemann id ya da name zelliklerine
ald deerlerden biri olabilir.
Ekran grnts:
Input Eleman zellikleri ve

Type Tanmlamalar
Input eleman (nesnesi), form ierisine kontroller yerlefltirmek iin kullanlr. Input
nesnesinin oluflturaca elemann tr type zellii ile tanmlanr.
Input Eleman zellikleri

Standart zellikler
accept
alt
checked
dirname
disabled
name
size
src
type
value
readonly
Afladaki zellikler HTML5 ile tanmlanmfltr.

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
multiple
pattern
Hangi zelliin hangi eleman iin tanml olduuna bakalm.
placeholder
required
step
width
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 119
Input Elemanlar
zellikler
zelliklerin karflsnda bulunan * karakterleri hangi elemanlar iin tanml olduklarn gsterir.
autocomplete
Veri girifli yaplan form elemanlarnda otomatik tamamlama zelliini aktif ya da
pasif yapmak iin kullanlr. Tarayc, kullancnn veri alanna nceden yazd deerlere gre otomatik tamamlama yapar (on ya da off deerlerinden birini alr.)
Hatrlarsanz form eleman iinde autocomplate zellii bulunmaktayd. Bir input
elemanna yapacanz autocomplate tanmlamas ile form elemanndan kaltsal
olarak gelen autocomplate tanmlamasn deifltirebilirsiniz.
lst
Veri girifli yaplan alanlar iin nceden tanml bir veri listesini (seenekler listesi)
kullancnn seimine sunar. Kullanc, isterse bu seenek listesindeki bir veriyi kullanlr ya da kendisi belirtilen alana farkl bir veri girifli yapar. Bu zellie ayn belge ierisinde tanml olan bir datalist elemannn id deeri atanr.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 120
120 HER YNYLE HTML5
rnek:
<input name=text list=veri/>

<datalist id=veri>
<option value=input type=url/>
<option value=input type=date />
<option value=input type=time/>
<option value=input type=month/>
</datalist>
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
<title>list</title>
</style>
</head>
<body>
<input name=color type=color list=color/>
<datalist id=color>
<option value=#DC143C label=Crimson></option>
<option value=#DAA520 label=GoldenRod/>
<option value=#000080 label=Navy/>
<option value=#4169E1 label=RoyalBlue/>
</datalist>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 121
Dikkat ederseniz nceden tanml renk deerleri kullancya nerilmektedir.

datalist eleman HTMLDataListElement arayznden oluflturulmufltur ve bu eleman ierisinde option elemanlar ile seenekler oluflturulur. options zelliini
kullanarak ierisindeki seenek listesine programa tik olarak ulaflabiliriz.
rnek:
<!DOCTYPE html>
<html>
<title>datalist</title>
div#result {
color:crimson;
font:consolas;
font-size: 14px;
font-style: italic;
}
</style>
var goster= function() {
var elemanLst=document.querySelector(#color);
//datalist Elemannn referansn aldk
var result=document.querySelector(form#form1+div#result);
/*datalist ierisindeki seenekleri yazdracamz
div#result elemannn referansn aldk*/
var htmlCollection=elemanLst.options;
/*datalist Eleman ierisindeki option
elemanlarnn listesini aldk. options zellii geriye

HTMLCollection tipinde bir nesne dndrr.*/
for(var i=0; i<htmlCollection.length; i++){

result.innerHTML +=htmlCollection.item(i).value
+ + htmlCollection.item(i).label+<br/>;
/*for dngsyle HTMLCollection nesnesi (htmlCollection eleman)

ierisindeki option elemanlarna ulafltk ve bu elemanlarn value
ve label zelliklerini div#result eleman ierisine innerHTML
zelliini kullanarak yazdrdk.*/
</script>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 122
122 HER YNYLE HTML5
</head>
<body>
<form id=form1>
<input name=color type=color list=color />
<datalist id=color>
<option value=#DC143C label=Crimson></option>
<option value=#DAA520 label=GoldenRod/>
<option value=#000080 label=Navy/>
<option value=#4169E1 label=RoyalBlue/>
</datalist>
<input type=button value=datalist seeneklerini gster
onclick=goster();/>
</form>
<div id=result>
</div>
</body>
</html>
Ekran grnts:
pattern
Veri girifl alanlarna kullancnn belirli bir formatta (kalpta) veri girmesini salamak
iin kullanlr. Bu zellie harf, rakam ve zel karakterlerden oluflturulmufl dzenli
bir ifade (RegExp) atanr. Kullancnn girdii verinin bu kalba uygun olmas gerekir.
rnek:
<!DOCTYPE html>
<html>
<title>pattern</title>
</head>
<body>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 123
</html>
</body>
<form id=form1>
<input name=txt type=text pattern=[0-9]{4}-[a-z]{3}/>
<input type=submit value=gonder/>
</form>
Pattern zelliine atadmz dzenli ifadeye bakalm.

[0-9]{4}-[a-z]{3}
Bu alana 0 ile 9 arasndaki saylardan (0 ve 9 dahil) drt tane sonra - (tire) sonra a
ile z harfleri arasndan (a ve z dahil) tane harf girilebilir. Kullanc bu kalba uygun bir metin yazmazsa (bofl brakabilir) ve submit butonuna tklarsa, geerlilik snamasndan dolay uyar mesaj ile karfllaflr.
Ekran grntleri:
Dzenli ifadeye uygun veri

Dzenli ifadeye uygun olmayan veri
rnek:
Opera 11
ekran
grntleri
<!DOCTYPE html>
<html>
<title>pattern</title>
#form1 label{
color:crimson;
}
</style>
</head>
<body>
<form id=form1>
<label>[0262-666-66-66/ telefonu] formatnda bir
metin giriniz</label><br/>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 124
124 HER YNYLE HTML5
<input name=txt type=text pattern=[0-9]{4}[0-9]{3}-[0-9]{2}-[0-9]{2}\D{5,}/>

</form>
</body>
</html>
Dzenli ifademizi incelersek;
[0-9]{4}-[0-9]{3}-[0-9]{2}-[0-9]{2}\D{5,}
...0-9 aralnda (0 ve 9 dahil) drt say sonra - (tire) sonra 0-9 aralnda (0 ve 9
dahil) say sonra - sonra 0-9 aralnda (0 ve 9 dahil) iki say daha sonra - sonra 0-9 aralnda (0 ve 9 dahil) iki say sonra peflinden rakam dflnda kalan karakterlerden en az 5 tane kullanarak oluflturulmufl bir metin.
Ekran grntleri:
Kullanc tanmlanan formatta veri girifli yapmadnda:
Kullanc tanmlanan formatta veri girifli yaptnda;

NOT
Dzenli ifadeler (RegExp) ile ilgili ayrntl bilgi iin KODLAB yaynclktan
kan JavaScript isimli kitabmdan faydalanabilirsiniz.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 125
placeholder
Bu zellik ile veri girifl alanlar iin yer tutucu bir deer tanmlamas yapabilirsiniz.
Yani kullancya belirtilen alana ne tr veri girecei ile ilgili bir ipucu (referans) verebilirsiniz. Kullanc belirtilen elemana odaklandnda tanmlanan bu deer kaybolur. value zellii; varsaylan bir deer tanmlamas yaparken, placeholder
zellii ise sadece bir ipucu tanmlamas yapar.
rnek:
<form id=form1>
<input name=txt type=text placeholder=Sadece adnz giriniz!/>
</form>
Ekran grnts:
requred
Tanml olduu input elemanlarnn kullanc tarafndan doldurulmasn ya da seim yaplmasn gerekli hale getirir. Eer kullanc required zelliinin tanml olduu bir eleman bofl geerse (veri girmez ya da seim yapmazsa) form bilgileri
gnderilirken yaplan geerlilik denetimi dolaysyla uyar mesaj ile karfllaflr.
Boolean tr (boolean attributes) bir zelliktir. required=required ya da sadece
required fleklinde kullanabilirsiniz.
NOT
GEERLLK DENETM (SINAMASI)

Kullancnn bir denetime belirlediimiz formatta (kalpta), tipte ya da aralkta veri
girip girmediinin tarayc tarafndan kontrol edilmesidir. Geerlilik denetimi srasnda hata oluflursa tarayc, form bilgilerini belirtilen adrese gndermez (istemci tarafl dorulama ifllemi).
rnek:
<!DOCTYPE html>
<html>
<title>required</title>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 126
126 HER YNYLE HTML5
label{
display:block;
width:300px;
}
</style>
</head>
<body>
<h3>Kullanc Kayd</h3>
<form action=kayit.aspx method=post>
<label for=email> E-mail adresi</label>
<input id=email type=email required name=email size=20>

<label for=text1>Ad Soyad</label>

<input id=text1 type=text required name=txt size=20/><br/>
<input type=submit value=Kullanc Olutur!>
</form>
</body>
</html>
Ekran grnts:
Form Elemanna Ait zellikleri

Tekrar Tanmlayan zellikler
Afladaki zellikler form eleman iin tanmlanmfl action, enctype, method,

novalidate, target zelliklerini override etmek (geersiz klmak, zerine yazmak) iin kullanlrlar. Bu zellikler submit ve image elemanlar iin tanmldrlar.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 127
formaction: Form elemannn action zelliini tekrar tanmlar.
formenctype: Form elemannn enctype zelliini tekrar tanmlar.
formmethod: Form elemannn method zelliini tekrar tanmlar.
formnovalidate: Form eleman iin novalidate zelliini tanmlar. Belirtilen

zellik zaten tanmlysa herhangi bir ifllev yapmaz.
formtarget: Form elemannn target zelliini tekrar tanmlar.
rnek:
<!DOCTYPE html>
<html>
<title>formnovalidate</title>
p{
margin: 5px 0px;
}
</style>
</head>
<body>
<p>Ad:</p> <input required name=ad>
<p>Gr</p> <textarea required name=gr></textarea>
<p>
<input type=submit name=submit1 value=Dorulama Yap>
<input type=submit formnovalidate name=submit2
value=Dorulama Yapma>
</p>
</form>
</body>
</html>
Eer kullanc Dorulama Yap butonuna tklarsa form gnderilmeden dorulama

ifllemi yaplr. Dorulama Yapma butonuna tklanrsa dorulama ifllemi yaplmaz.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 128
128 HER YNYLE HTML5
Ekran grnts:
Type Tanmlamalar
Type zellii; Input etiketi ile oluflturulacak elemann trn ayarlamak iin kullanlr. Aflada bu zellie atanabilcek deerler listelenmifltir.
button
Bu form eleman ile bir olay tetikleyip JavaScript kodlarnn alflmasn salayabilirsiniz.
checkbox
Onay kutusu ile kullancnn birok seenek ierisinden istedii kadar seim yapabilecei eleman gruplar oluflturabilirsiniz. checked zellii ile checkbox elemannn seili olma durumunu renebilir ya da ayarlayabilirsiniz
password
Kullancnn girdii verileri maskeleyen metin kutusudur. Formlarda ska kullanacanz bir form elemandr. Metin kutusuna girdiiniz veriler * karakteri ile gsterilirler.
rado
Seenek dmesi ile kullancnn bir grup seenek ierisinden sadece bir seim
yapmas isteniliyorsa, bir radio eleman grubu oluflturabilirsiniz. checked zellii
ile radio elemannn seili olma durumunu renebilir ya da ayarlayabilirsiniz.
mage
Submit butonu yerine kullanabileceiniz bir resim butonu oluflturur.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 129
submt
Forma girilen verileri action zellii ile belirtilen sayfaya gnderir. Sunucu tarafl
alflan sayfa kullancdan ald bilgilerle ilgili eflitli ifllemleri yerine getirir.
text
Kullancnn bilgi girecei bir metin kutusu oluflturur. type zellii atanmazsa ya
da yanlfl yazlrsa otomatik olarak metin kutusu oluflur.
reset
Kullanc tarafndan forma girilen verileri siler, yani formu temizler.
fle
Dosyalarnz sunucudaki herhangi bir konuma gndermek iin kullanlr. multiple

zellii ile birden fazla dosya seimi yaplabilir.
hdden
Bu eleman formda gsterilmez. Elemann ierisinde name zelliine bir deer atarsanz bir de value deeri tanmlarsnz gnder butonuna tkladnzda value zelliine atadnz deer name zellii ile tanmladnz deiflkene atanmfl olur.
emal
[HTML5]
Kullancnn sadece e-posta adresi girebilecei bir form eleman oluflturur. Submit
butonuna tklandnda ya da submit() metodu arldnda Bu alana girilen veriye geerlilik denetimi yaplr.
rnek:
<!DOCTYPE html>
<html>
<title>type=e-mail</title>
form{
width:250px;
height: 130px;
}
legend{
color:crimson;
}
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 130
130 HER YNYLE HTML5
</head>
<body>
</html>
</body>
</style>
<form action=isle.aspx name=form1>
<fieldset>
<legend>e-posta adresi</legend>
<input name=email type=email required/>
<input type=submit value=gnder />
</fieldset>
</form>
<input type=email required/> ile required zellii kullanlarak kullanc-
nn bu alana veri girmesi gerekli hale getirilmifltir. Kullanc bu alan doldurmadan

ya da geerli bir e-posta adresi yazmadan submit butonuna tklarsa geerlilik snamasndan dolay uyar mesaj ile karfllaflr.
Ekran grntleri:

multiple zelliini kullanarak arada virgl olmak kaydyla birden fazla e-mail ad-
resi girilebilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<title>type=e-mail</title>
form {
width:250px;
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 131
</head>
<body>
</html>
</body>
height:130px;
}
legend {
color:crimson;
}
</style>
<form action=islem.aspx name=form1>
<fieldset>
<legend>e-posta adresi</legend>
<input name=email type=email multiple list=liste/>
<datalist id=liste>
<option value=zeynep@hotmail.com></option>
<option value=alis@hotmail.com />
<option value=yigit@ornek.com/>
<option value=asmin@ornek.com/>
</datalist>
<input type=submit value=gnder />
</fieldset>
</form>
Ekran grnts:
search, url ve tel
[HTML5]
search: Aranlacak metin ya da metin gruplarn yazmak iin kullanlr. Bu elemana tek satrlk metin gruplar yazlabilir.
url: Bir URL adresi girmek iin kullanlr. Varsaylan olarak form bilgileri gnderilirken geerlilik snamas (dorulama kontrol) yaplr.
tel: Telefon numaras girmek iin tanmlanr.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 132
132 HER YNYLE HTML5
Yukardaki input elemanlarnda pattern zellii kullanlarak kullancnn belirli

bir formatta bilgi girmesi salanabilir. Ya da maxlength zellii ile kullancnn girebilecei en uzun veri ayarlanabilir.
number
[HTML5]
Saysal deerler yazmak iin kullanlr. min zellii ile girilebilecek en dflk deer max zellii ile girilebilecek en yksek saysal deer ayarlanabilir. step zellii ise; min, max deerleri arasnda, bu alana girilebilecek dier saylar tanmlamak
iin artfl miktarn ayarlar. Elemana girilen deere value zellii ile programa tik
olarak ulaflabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<title>number</title>
</head>
<body>
<input type=number min=10 max=100 step=10
name=num/>
<input type=submit />
</form>
</body>
</html>
Ekran grntlerine bakalm...

Eer kullanc min ve max deerleri arasnda bir deer girmezse:
Opera 11
ekran
grnts
Kullanc min, max deerleri arasnda, fakat step zellii ile belirtilen artfl miktarna uygun bir say girmezse:
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 133
Kullanc; min, max deerleri arasnda ve step zellii ile belirtilen artfl miktarna
uygun bir say girerse herhangi bir hata oluflmayacaktr.
range
[HTML5]
Kaydrma ubuu kontrol; min ve max zellikleri ile tanmlanan aralkta grsel olarak (tutama ile) bir deer elde etmek iin kullanlr. min zellii ile araln en dflk deeri, max zellii ile araln en yksek saysal deeri ayarlanr. step zellii
ise min, max deerleri arasnda tutama ile elde edilebilecek dier saylar tanmlamak
iin artfl miktarn ayarlar. Bu eleman ile retilen deere value zellii ile ulafllr.
Varsaylan deerler:
min:0
max:100
step:1
value: min + (max-min)/2
rnek: range, elemannn saklad (rettii) deeri text eleman ierisinde gs-
terelim.
<!DOCTYPE html>
<html>
<title>type=range</title>
change();
/*sayfa yklendiinde kaydrma ubuunun rettii deeri gstermek iin change()
Fonksiyonunu alfltralm*/
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 134
134 HER YNYLE HTML5
var change=function(){
//formchange olaynda alflacak fonksiyon

/*form elemannn saklad deerde (ya da grsel olarak retilen deerde) deifliklik
olursa formchange olay oluflur.*/
var elSlider=document.querySelector(input[type=range]);
var elResult=document.querySelector(input[type=range]+input);
elResult.value=elSlider.value;
}
</script>
</head>
<form action= name=form1>
<input type=range name=rng max=100 min=20
step=5 onformchange=change(); />
<input type=text size=5/>
</form>
</body>
</html>
Ekran grnts:
color
[HTML5]
Renk seimi yapmak (color picker - renk seici ile), renk deeri girmek iin kullanlan elemandr. Girilen renk deerine value zellii ile ulaflabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<title>type=color</title>
var change=function(){
var elColor=document.querySelector(input[type=color]);
var elResult=document.querySelector(input[type=color]+input);
elResult.value=elColor.value;
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 135
}
</script>
</head>
<body>
</html>
</body>

<input type=color name=clr onformchange=change(); />
<input type=text size=15 />
</form>
Ekran grnts:
Kullanc color picker ile grsel olarak ya da rengin hexadecimal deerini yazarak renk seimi yapabilir. Color elemannn value zelliinde seilen rengin hexadecimal formatndaki karfll saklanr.
rnek:
<!DOCTYPE html>
<html>
<title>type=color</title>
form {
width:400px;
position: relative;
}
form tr td:nth-of-type(1) {
width:150px;
color:crimson;
font-family:Gill Sans MT Condensed;
font-size:20px;
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 136
136 HER YNYLE HTML5
}
div#renk {
width:100px;
height:118px;
position:absolute;
right:-100px;
top:10px;
}
p#result{
font-family: consolas;
font-size: 15px;
color:#11b0ee;
font-weight: bold;
}
</style>
var ch= function() {
var hsl = document.querySelector(input[name=hue]);
var saturation =
document.querySelector(input[name=saturation]);
var light=document.querySelector(input[name=light]);
/*range elemanlarnn referanslarn aldk*/
var target=document.getElementById(renk);
/*div#renk fleklinde tanml elemann referansn aldk.
var colorStr=hsl(+hsl.value+, + saturation.value +

%, +light.value+ %);
/*Kaydrma ubuklar ile retilen saysal deerleri hsl formatnda bir
renk deerine dnfltrdk ve colorStr deiflkenine atadk*/
target.style.backgroundColor=colorStr;
/*retilen bu renk deerini div#renk elemanna
arkaplan rengi olarak atadk.*/
var sonucYaz=document.getElementById(result);
sonucYaz.innerHTML=colorStr;
/*retilen hsl formatndaki deeri p#result elemannn iine yazdrdk*/
var style =
document.defaultView.getComputedStyle(target, null);
sonucYaz.innerHTML += ,hex: +
style.getPropertyValue(background-color);
/*div#renk elemannn arkaplan rengine ulafltk ve p#result eleman
ierisine yazdrdk*/
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 137
</script>
</head>
<body>
<fieldset>
<legend>
Renk Seici
</legend>
<table>
<tr>
<td>Hue(Renk)</td>
<td>
<input type=range name=hue min=0
max=360 step=1 onformchange=ch();/>360<sup>0</sup></td>
</tr>
<tr>
<td>Saturation(Doygunluk)</td>
<td>
<input type=range name=saturation min=0
max=100 step=1 onformchange=ch();/>100%</td>
</tr>
<tr>
<td>lightness(Aydnlk)</td>
<td>
<input type=range name=light min=0 max=100
step=1 onformchange=ch();/>100%</td>
</tr>
</table>
<p id=result>
</p>
</fieldset>
<div id=renk>
</div>
</form>
</body>
</html>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 138
138 HER YNYLE HTML5
Ekran grnts:
Opera 11 ekran
grnts
Kaydrma ubuklarn hareket ettirdiimizde, renk seicinin hemen yanndaki div

elemannda retilen rengi grebiliyoruz. Ayrca retilen rengin hsl ve hex formatlarndaki karfllklar da hemen altta yazmakta. Zaten rengin hsl formatndaki deerini kaydrma ubuklarndan retilen deerlerle oluflturduumuzdan, bunu biliyoruz. Peki, rengin hexadecimal karflln nasl elde ettik diye sorabilirsiniz. Biz, div
elemannn arkaplan rengini hsl formatnda tanmladk, fakat getComputedStyle
metodunu kullanarak div#renk elemannn arkaplan rengini tekrar elde ettik.
nk bu metot geriye rengin Firefox, Safari (RGB formatnda), Opera (Hexadecimal formatnda) karflln dndrecektir. getComputedStyle() metoduna biraz
daha yakndan bakalm...
Bir HTML eleman iin tanmlanan CSS zelliklerine atanan deerlere ulaflmak ve
deifltirmek mmkn m? Bu soruya flyle cevap verelim.
NOT
STYLE ZELL
<ELEMENT style = CSS Bildirimleri > // style Attribute

object.style [ = CSS Bildirimi ] // style Property
style (attribute) zellii ile (In-Line-Satr i) tanmlanan CSS zelliklerin aldklar deerlere ulaflmak ve deifltirmek mmkndr. Ayrca yine satr ii olacak flekilde yeni CSS zellikleri tanmlayabilirsiniz.
<p id=elP style=color:red;>Satr ii (In-line CSS Tanmlamas)</p>
Eleman nesne olarak elde edelim.
var elemanP=document.getElementById(elP);
console.log(elemanP.style.color);
// Konsolda red yazar
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 139
elemanP.style.color=blue;
// p elemannn yaz rengini deifltirdik.
Dikkat ederseniz eleman nesne olarak elde ettikten sonra style (property) zellii kullanlarak color CSS zelliine ulaflld ve konsola yazdrld. Elemannn
style (attribute) zelliinde tanmlanmamfl bir CSS zelliine style (property)
ile ulaflamayz. style (property) zellii geriye CSSStyleDeclaration tipinde bir
nesne dndrr.
Eer style (property) zelliini kullanarak bir eleman iin satr ii (in-line) CSS
tanmlamas yapmak istersek ya da satr ii tanmlanan bir CSS zelliinin deerini deifltirmek istersek flu flekilde kullanabiliriz.
elemanReferans.style.CSSzellikAd=deer;
Eer elemana satr ii olarak tanmlanmfl bir CSS zelliinin deerine ulaflmak istersek flu flekilde kullanabiliriz.
elemanReferans.style.CSSzellikAd
Bir HTML elemann hedef alan (HTML elemanna uygulanan) farkl alanlarda tanmlanan (style (attribute) zellii ile <style> etiketleri arasnda, <link>
etiketi ile, tarayc tarafndan varsaylan olarak tanmlanan) tm CSS zelliklerine ulaflmak iin getComputedStyle() metodu kullanlr. Bu metot, geriye
CSSStyleDeclaration tipinde sadece okunabilir bir CSS zellik listesi dndrr.
rnek:
<!DOCTYPE html>
<html>
<title>getComputedStyle</title>
p:nth-of-type(1){
/*body eleman iindeki ilk p eleman hedef alnd*/
color:blue;
background-color: gray;
font-family: consolas;
</style>
var play= function() {
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 140
140 HER YNYLE HTML5
var elemanP=document.getElementById(elP);
var computedStyle = document.defaultView.getComputedStyle(elemanP, null);
console.log(color:+computedStyle.getPropertyValue(color));
console.log(background-color: +
computedStyle.getPropertyValue(background-color));
console.log(font-family: +
computedStyle.getPropertyValue(font-family));
}
</script>
</head>
<body onload=play();>
<p id=elP style=color:white;>Elemana etki eden Tm CSS
zellikleri</p>
</body>
</html>
Dikkat ederseniz renk deerlerini renk ismi fleklinde tanmlamfl olmama ramen
getComputedStyle() metodu renk deerlerini geriye rgb formatnda (*Firefox,
Safari) dndrd.
date, month, week, tme,

datetme-local, datetme
[HTML5]
date: Grsel olarak tarih deeri girilebilecek form eleman oluflturur.

(Yl/Ay/Gn)
month: Grsel olarak ay ve yl deeri girilebilecek form eleman oluflturur.
(Yl/Ay)
week: Grsel olarak hafta ve yl deeri girilebilecek form eleman oluflturur.
(Yl/Hafta)
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 141
Hafta bilgisi tanmlanrken; [W+Yl iindeki kac hafta] fleklinde bir format
kullanlr. rnein; W01: Yln ilk haftas.
time: Saat ve dakika deeri girilebilecek form eleman oluflturur.
datetime-local: Tarih (Yl/Ay/Gn) ve saat (saat:dakika) deerleri girilebilecek form eleman oluflturur.
datetime: Tarih (Yl/Ay/Gn) ve saat (saat:dakika) deerleri girilebilecek
form eleman oluflturur. (UTC zaman standardna gre.)
Bu elemanlar ile retilen tarih ya da saat bilgisine; elemanlarn value (property)

zelliini kullanarak eriflebilirsiniz.
Opera 11 ile ekran grntleri:
<input type=date name=date />
<input type=month name=month />
<input type=week name=week />
<input type=time name=time />
<input type=datetime-local
name=dtlocal />
NOT
type zelliinin yeni deerleri iin tarayc destei ilk blmde anlatlmfltr.
+HTML5-BOLUM5
6/17/11
5:12 PM
142 HER YNYLE HTML5
Page 142
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 143
CANVAS
HTML5 dilinin getirdii en nemli elemanlardan biri hi flphesiz <canvas> elemandr. Bu elaman bir izim alan tanmlar ve bu izim alannda javaScript yardmyla grafikler oluflturulur ya da dzenlenir. Canvas (tuval) elemann kullanarak vektrel grafikler, oyun grafikleri hatta animasyonlar oluflturabilir ya da resimlerinizi
piksel tabanl olarak dzenleyebilirsiniz. Bu eleman ile grntler dinamik olarak
piksel tabanl oluflturulur. Bu eleman javaScript ile dinamik grafikler oluflturmak ya
da var olan resimleri piksel tabanl olarak dzenlemek iin kullancya gl bir imkan sunar. Ayrca sunucu tarafndaki ykn azaltlmas iin bu grntlerin istemci tarafnda oluflturulmas da nemlidir. Bu eleman HTMLCanvasElement DOM
arayz ile tanmldr.
zellikleri: [Standart zellikler], width, height
width zellii ile canvas elemannn genifllii, height zellii ile canvas eleman-
nn ykseklii ayarlanr. Aflada basit olarak bir canvas eleman oluflturalm.
<canvas id=canvas width=300px height=100px>

Tarayc canvas elemann desteklemiyor...
</canvas>
canvas etiketleri arasna taraycnn desteklememesi olaslna karfln bir metin
yazabilirsiniz. Eer tarayc bu eleman desteklemezse ierisindeki metni grntleyecektir. Eer width ve height zelliklerine deer atamazsanz varsaylan olarak width=300px, height=150px deerlerini alr.
Metotlar: getContext(), toDataUrl()
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 144
144 HER YNYLE HTML5
getContext()
Bu metot canvas eleman ile tanmlanan alan belirtilen boyutta bir izim alanna dnfltrr. Bu metot geriye grafik oluflturmak iin gerekli zellik ve metotlara sahip
CanvasRenderingContext2D tipinde bir nesne dndrr. getContext() metodu ile
oluflturulan bu izim alannn varsaylan olarak arkaplan rengi fleffaf siyahtr.
Kullanm:
CanvasRenderingContext2D Nesnesi =
canvasElemanReferans.getContext(contextId)
contextId parametresi ile izim alannn ka boyutlu olaca ayarlanr. Bu para-
metreye yerine 2D (2 boyutlu izim alan) deeri ya da ok fazla desteklenmemekle beraber webgl deeri yazlabilir. webgl deeri standart olmamakla beraber
WebGLRenderingContext tipinde 3 boyutlu bir izim alan nesnesi oluflturur.
getContext() metodunun kullanmyla ilgili basit bir rnekle ifle bafllayalm.
<!DOCTYPE html>
<html>
<title>canvas</title>
function draw() {
var canvas = document.getElementById(canvas);
if(canvas.getContext){
// Eer tarayc getContext() metodunu destekliyorsa alflacak kodlar
var context2d = canvas.getContext(2d);
// context2d deiflkeni CanvasRenderingContext2D tipinde bir nesnedir.
</html>
context2d.fillStyle = rgb(200,0,0);
context2d.fillRect (10, 10, 55, 50);
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=100>
Tarayc canvas elemann desteklemiyor...
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 145
CANVAS 145
Canvas elemannn yerleflimine ve ierisindeki izime grsel olarak bakalm.
toDataUrl()
canvas eleman ierisindeki izimi (resmi, grafii) tanmlanan (rnein; PNG) formatta temsil eden bir resim verisi dndrr.
Kullanm: ImageData = canvasElemanReferans.toDataURL(ImageType)
Bu metot ierisine canvas ierisindeki resim bilgisinin hangi formatta elde edilecei yazlr. image/png deeri flu an iin tarayclar tarafndan ortak olarak desteklenen
tek format olarak karflmza kmaktadr. Canvas eleman ierisindeki resim bilgisini bu metotla renip bir <img> elemanna resim kayna olarak tanmlayabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<title>toDataURL()</title>
function draw() {
var context2d = canvas.getContext(2d);
context2d.fillStyle = #E32756;
context2d.strokeStyle = #3BC429;
context2d.lineWidth = 3;
context2d.beginPath();
context2d.moveTo(10, 10);
context2d.lineTo(90, 10);
context2d.lineTo(10, 80);
context2d.closePath();
context2d.fill();
context2d.stroke();
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 146
146 HER YNYLE HTML5
}
var copyImage= function() {
var img=document.getElementById(img);
var dataImage=canvas.toDataURL(image/png);
// canvas ierisindeki resim bilgisini png formatnda aldk
img.src=dataImage;
}
</html>
// img referansl resim elemann src zelliine atadk.
</script>
</head>
<div>
<button onclick=copyImage()>
canvas eleman ierisindeki izimi png formatna evir
</button>
</div>
<div>
<canvas id=canvas width=200 height=100 >
</canvas>
<img id=img>
</div>
</body>
Ekran grnts:
Firefox 4 ekran grnts
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 147
CANVAS 147
Canvas RenderngContext2D
(2 Boyutlu izim Alan) Nesnesi
zellik ve Metotlar
(izim Oluflturmak)
Canvas eleman zerinde izim yapmak iin <canvas> eleman ile tanmlanan alan
getContext(2d) metoduyla bir izim alanna dnfltrmeniz gerekir.
getContext(2d) metodu 2 boyutlu izimler oluflturmak iin geriye Canvas
RenderingContext2D tipinde bir nesne dndrr. flte flimdi bu nesnenin zellik ve
metotlarna bakalm. Bu blmde anlatm boyunca Canvas RenderingContext2D
nesnesi ksaca context2d olarak adlandrlacaktr.
Canvas Koordinat Sistemi
Canvas elemannn bykl width, height zellikleri ile tanmlanr. Bu eleman

ierisinde 2 boyutlu izimler yaparken varsaylan olarak orijin noktas sol st kfle
olarak kabul edilir. izimlerde kullandmz l birimi (uzunluk birimi) pxdir.
Afladaki rnek ile canvas elemannn koordinat sistemine grsel olarak bakalm.
<!DOCTYPE html>
<html>
<head>
<title>canvas Koordinat Sistemi</title>
canvas {
margin: 20px;
}
</style>
var canvasEl = document.querySelector(canvas);
var ctx = canvasEl.getContext(2d);
// canvasRenderingContext2d nesnesini elde ettik
ctx.strokeStyle = #00ccff;
for (var i = 0; i <= canvasEl.width; i += 10) {
/*Varsaylan olarak izime bafllang noktas canvas(0,0) dr.
moveTo() metoduyla izim ifllemi iin yeni bir
bafllang noktas tanmlanr.*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 148
148 HER YNYLE HTML5
ctx.moveTo(i, 0);
ctx.lineTo(i, 200);
/*lineTo() metodu belirtilen koordinatlar arasnda bir

izgi izer.*/
}
for (var i = 0; i <= canvasEl.height; i += 10) {
ctx.moveTo(0, i);
ctx.lineTo(500, i);
}
ctx.stroke();
// izgi olufltur
}
</script>
</head>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
Ekran grntsne anlafllmas iin klavuzlar ekleyelim ve sonuca bakalm.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 149
CANVAS 149
context2D Nesnesi zellikleri

context2D nesnesi iin tanml olan zellikleri inceleyelim.
canvas
Canvas elemannn referansn almak iin kullanlr. Sadece okunabilir (readonly)
bir zelliktir. Bu zellik sayesinde canvas elemannn width, height zelliklerine
tekrar ulaflabilirsiniz.
Kullanm: context2D.canvas
rnek:
<!DOCTYPE html>
<html>
<head>
<title>canvas zellii</title>
var canvasEl = document.querySelector(canvas);
var ctx = canvasEl.getContext(2d);
ctx.strokeStyle = #c8c8c8;
for (var i = 0; i <= canvasEl.width; i += 10) {
ctx.moveTo(i, 0);
ctx.lineTo(i, 200);
}
for (var i = 0; i <= canvasEl.height; i += 10) {
ctx.moveTo(0, i);
ctx.lineTo(500, i);
}
ctx.stroke();
ctx.font = bold 20px consolas;
/*2 boyutlu izim alanna dnfltrdmz canvas elemannn
ykseklik ve genifllik deerlerine ulaflalm;*/
var canvasW = canvasWidth: + ctx.canvas.width;

var canvasH = canvasHeight: + ctx.canvas.height;
/*Belirtilen deerleri yatayda orta noktadan bafllamak kaydyla

canvas eleman ierisine yazdralm*/
ctx.fillText(canvasW, ctx.canvas.width / 2, 100);

ctx.fillText(canvasH, ctx.canvas.width / 2, 120);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 150
150 HER YNYLE HTML5
</script>
</head>
</canvas>
</body>
</html>
Ekran grnts:
strokeStyle ve fllStyle zellikleri
Vektrel flekil (grafik/izim) iin dolgu rengi fillStyle zellii ile, kenarlk rengi
ise strokeStyle zellii ile tanmlanr ya da nceden yaplan tanmlamalar, bu zelliklerle elde edilir. Bu zelliklerin varsaylan renk deerleri siyahtr.
Kullanmlar:
context2D.fillStyle[= value]
context2D.strokeStyle[= value]
Bu zelliklere CSS renk deeri veya CanvasGradient, CanvasPattern nesnelerinden birinin ad yazlabilir. rnein; afladaki tanmlamalarn hepsinde fillStyle
zelliine mavi rengi atanmfltr.
context2D.fillStyle=blue;
context2D.fillStyle=rgb(0,0,255);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 151
CANVAS 151
context2D.fillStyle=rgba(0,0,255,1);
context2D.fillStyle=#0000FF;
Dikkat ederseniz renk tanmlamas yaparken rgba() formatn kullanarak bir saydamlk deeri tanmlayabiliyoruz.
rnek:
<!DOCTYPE html>
<html>
<title>fillStyle,stroke style</title>
canvas {
background-color: #efefef;
}
</style>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
// ctx , canvasRenderingContext2d tipinde bir nesnedir
ctx.fillStyle=#127A19;
// Vektrel flekilller iin dolgu rengi
ctx.strokeStyle=rgb(255,9,23);
// Vektrel flekiller iin kenarlk rengi
ctx.fillRect(20,20,70,70);
// Sadece dolgu alan olan dikdrtgen(fillStyle zelliini kullanr)
ctx.strokeRect(100,20,70,70);
}
</html>
// Sadece kenarl olan bir dikdrtgen(strokeStyle zelliini kullanr)
</script>
</head>
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 152
152 HER YNYLE HTML5
Ekran grnts:
fillStyle, strokeStyle zellikleri ile tanmlanan renk deerleri kendilerinden son-
ra gelen ve izim ifllemi yapan metotlar iin geerli olurlar (Serbest izim alanlar
olufltururken dolgu ve kenarlk renkleri fill(), stroke() metotlaryla uygulanr. Bu
durumda fillStyle, strokeStyle zellikleri fill(), stroke() metotlarndan nce
tanmlanmaldrlar). Context2D izim formatnda bu zelliklerin kod sralamasndaki
tanmland yer nemlidir. Daha iyi anlafllmas iin afladaki rnei inceleyiniz.

ctx.fillStyle=#127A19;
/*Yukardaki stil tanmlamas aflada tanmlanan fillRect()

metodu tarafndan kullanlr*/
ctx.strokeStyle=rgb(255,9,23);
/*lk tanmlanan strokeRect() metodu iin geersiz*/
console.log(fillStyle:+ctx.fillStyle);
// Geerli olan fillStyle tanmlamas
ctx.strokeStyle=#D4CE2F;
/*Aflada tanmlanan strokeRect() metodu tarafndan kullanlr*/
ctx.fillStyle=rgb(0,255,0);
/*lk tanmlanan fillRect() metodu iin geersiz*/
console.log(strokeStyle:+ctx.strokeStyle);
// Geerli olan strokeStyle tanmlamas
/*Afladaki stil tanmlamar yukardaki dikdrtgenlere uygulanmaz*/
ctx.fillStyle=#411180;
ctx.strokeStyle=#E820CA;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 153
CANVAS 153
Ekran grnts:
Yukardaki rnekten de anlafllaca zere fillRect(), strokeRect() metotlarnn kullanaca stil tanmlamas kod akflnda kendilerinden nce yaplan ilk tanmlamadr. Dier bir yandan benzer olmakla beraber serbest izim alanlar olufltururken fill(), stroke() metotlar ile beraber kullanmlar ileride anlatlacaktr.
globalAlpha
context2D nesnesi zerinde oluflturduunuz vektrel flekil ya da resimlere saydamlk (fleffaflk) tanmlamas yapmak ya da daha nce yaplan saydamlk tanmlamasn renmek iin globalAlpha zellii kullanlr. Bu zellie 0.0 ve 1.0 arasnda
bir deer atanabilir. 0 deeri tam saydam, 1 deeri hi saydam deil anlamna gelir.
Varsaylan deeri 1.0dr.
Kullanm: context2D.globalAlpha[= value]

rnek:
<!DOCTYPE html>
<html>
<title>globalAlpha</title>
// Stil tanmlamalar
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 154
154 HER YNYLE HTML5
ctx.fillStyle=#FC3A3A;
// Dikdrtgen iin geerli olacak stil tanmlamas
// fillRect ile dikdrtgen izdik.
ctx.fillStyle=#ffffff;
/*Yukardaki stil tanmlamas arc() metodunda kullanlmak zere tanmland*/
for(var i=1;i<3;i++) {
ctx.globalAlpha=0.2*i;
/*globalAlpha zellii ilk daire iin 0.2

ikinci daire iin 0.4 olacak*/
ctx.beginPath();
ctx.arc(80,60,i*30,0,2*Math.PI,true);
ctx.fill();
}
</html>
// Daire izmek iin tanmlandlar.
</script>
</head>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran Grnts:
globalAlpha zellii; fillStyle, strokeStyle zellikleri ile benzer olarak tanmland satrdan sonra izdirilen vektrel flekil ya da resimlere uygulanr.
globalAlpha zellii; vektrel fleklin ya da resmin tamam iin bir saydamlk dee-
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 155
CANVAS 155
ri tanmlar Yani tanmland satrdan sonra izim ifllemi yapan tm metotlarn kullanaca bir saydamlk deeri tanmlar. sterseniz fillStyle, strokeStyle zelliklerine rgba() formatnda renk tanmlayarak vektrel flekillerin kenarlk ya da dolgular iin ayr ayr saydamlk tanmlamas yapabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<title>globalAlpha</title>
ctx.fillStyle =#3DF540;
ctx.fillStyle =#E2F53D;
var i=0;
// fieffaflk deerini deifltirmek iin i deiflkeni tanmladk
for(var x=0;x<=270;x+=30) {
/*Beyaz renkli fakat fleffafl deiflen 20 tane dikdrtgen

izeceiz bunun iin i ie for dnglerini oluflturdu
izeceimiz bu dikdrtgenlerin width:30,height:50 olacak.*/
</html>
ctx.fillStyle=rgba(255,255,255,+ i/10 +);

i++;
for(var y=0;y<=50;y+=50) {
ctx.fillRect(x,y,30,50);
}
</script>
</head>
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 156
156 HER YNYLE HTML5
Ekran grnts:
globalComposteOperaton
Canvas zerine bir grafik (vektrel flekil ya da resim) izdirdiinizde varsaylan olarak bu
grafik; belirlediiniz konuma ve
canvas zerinde bulunan dier
grafiklerin zerine izilecektir
(Tm canvas alan bir resmi
temsil eder). Bu durumda yeni
grafik ile nceden canvas zerinde bulunan grafikler st ste
binebilir, yani kesiflme alanlar
oluflabilir. flte tam bu noktada
canvas zerine yeni bir grafik
eklemek istediinizde taraycnn gsterdii varsaylan olan
bu davranfl deifltirmek iin
zellii kullanlabilir. Bu zellik hem okunabilir hem de yazlabilir bir zelliktir. Yandaki
flemalar inceleyelim.
Canvas zerinde var olan grafiklerin (izimler, resimler) tamam bir resmi oluflturur.
Yukardaki gsterimde; canvas zerinde bulunan grafik B-destination image (hedef
resim), canvas zerine izdirilecek yeni grafik A-source image (kaynak resim)
fleklinde tanmlanmfltr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 157
CANVAS 157
Kullanm: context2D.globalCompositeOperation[ = value ]
Bu zellie afladaki deerlerden biri atanabilir.
copy, destination-atop, destination-in, destination-out, destination-over,

lighter, source-atop, source-in, source-out, source-over(varsaylan deer),
xor
globalCompositeOperation zellii; yukarda anlatlan dier zellikler gibi tanmland satrdan sonra izdirilen vektrel flekil ya da resimlerin canvasa nasl
yerlefltirileceini (grafiklerin izim modunu) ayarlar.
Aflada rnekle bu deerlerin nasl davranfllar temsil ettiklerine bakalm.

<!DOCTYPE html>
<html>
<title>globalCompositeOperation</title>
var context2d=canvasEl.getContext(2d);
context2d.fillStyle=#1BFA39;
context2d.fillRect(10,10,80,80);
context2d.fillStyle=blue;
// globalCompositeOperation=deer
// zellii bu satrda tanmlanacak...
</html>
context2d.arc(80,80,35,0,2*Math.PI,true);
context2d.fill();
</script>
</head>
</canvas>
</body>
globalCompositeOperation zelliine deerleri tek tek atayarak sonulara bakalm.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 158
158 HER YNYLE HTML5
Afladaki gsterimde canvas zerinde olan resim kare (hedef resim B) yeni eklenecek grafik ise daire (kaynak resim A) fleklinde kullanlmfltr. canvas alannn tamam hedef resmi temsil eder. Hedef resim iinde birden fazla resim ya da flekil
olabilir. Biz afladaki rnekte hedef resim olarak sadece bir kare kullandk.
context2D.globalCompositeOperation=source-over
Varsaylan olan bu davranflta Kaynak Resim(A),

Hedef resim(B)nin zerine izilir.
context2D.globalCompositeOperation=source-in
Kaynak Resim(A)nn Hedef Resim(B) ile kesiflen alan gsterilir.

context2D.globalCompositeOperation=source-out
Kaynak Resim(A)nn Hedef Resim(B) ile kesiflmeyen alan gsterilir.

context2D.globalCompositeOperation=source-atop
Hedef Resim (B ile beraber Kaynak Resim(A)nn

Hedef Resim(B) ile kesiflen alan izilir.
context2D.globalCompositeOperation=lighter
Kaynak Resim(A)ile Hedef resim(B)nin kesifltii alann rengi,

Kesiflen alanlardaki renklerin belirli oranda toplamyla elde edilir.
context2D.globalCompositeOperation=xor
Kaynak Resim(A)ile Hedef resim(B)nn kesifltii alann rengi saydam

(fleffaf) olarak izilir. Kesiflen alanda A ya da B resimleri gsterilmez,
fakat kesiflen alan saydamdr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 159
CANVAS 159
context2D.globalCompositeOperation=destination-over
Hedef Resim(B) stte gsterilir.
context2D.globalCompositeOperation=destination-in
Hedef Resim (B)nin Kaynak Resim(A) ile kesiflen alan gsterilir.

context2D.globalCompositeOperation=destination-out
Hedef Resim(B)nin Kaynak Resim(A) ile kesiflmeyen alan gsterilir.

context2D.globalCompositeOperation=destination-atop
Kaynak Resim (A) ile beraber Hedef Resim(B)nin

Kaynak Resim(A) ile kesiflen alan izilir.
context2D.globalCompositeOperation=copy
Hedef Resim(B) Komple silinir ve sadece Kaynak Resim(A) gsterilir.
rnek:
<!DOCTYPE html>
<html>
<title>globalCompositeOperation</title>
var image=document.createElement(img);
image.src=zeynep.png;
image.onload= function() {
context2d.drawImage(image,0,0,170,155);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 160
160 HER YNYLE HTML5

// resmi canvas zerine izdik
context2d.globalCompositeOperation=destination-in;
/*Bu satrdan sonra izilecek grafikler iin izim modunu
ayarladk. Resmin (zeynep.png) daire ile kesiflen
alan gsterilecek */
context2d.arc(76,87,43,0,2*Math.PI,true);
// Daire izidik
</html>
context2d.fill();
</script>
</head>
</canvas>
</body>
Resmin orijinal hali ve tarayc ekran grnts:
zeynep.png
Yukardaki rnekten de anlafllaca zere maskeleme ifllemleri iin globalCompositeOperation zellii kullanlabilir.
shadowColor, shadowOffsetX,
shadowOffsetY, shadowBlur
Bir grafie (izim, metin, resim) glge rengi tanmlamak iin shadowColor zellii
kullanlr. Bu zellie CSS renk deerleri atanr. Bu zellik geriye tanmlanan CSS
renk deerini dndrr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 161
CANVAS 161
Kullanm: context2d.shadowColor[=value]
Grafik ile glge arasndaki yataydaki uzakl ayarlamak iin shadowOffsetX,

dikeydeki uzakl ayarlamak iin shadowOffsetY zellii kullanlr. Bu zellikler
ile glgenin pozisyonu ayarlanr. Bu zelliklerin varsaylan deeri 0dr. Pozitif ya da
negatif bir deer kullanlabilir.
Kullanmlar:
context2d.shadowOffsetX[=value]
context2d.shadowOffsetY[=value]
Glge iin uygulanacak bulanklk miktarn ayarlamak iin shadowBlur zellii

kullanlr. Bu zelliin varsaylan deeri 0dr.
Kullanm: context.shadowBlur[=value]
Yukardaki zeklikler hem okunabilir hem yazlabilir zellikleridir (read/write).

Yukarda anlatlan dier zellikler gibi tanmlandklar satrdan sonra izdirilen
grafikler iin uygulanrlar.
Glge; aslnda grafiin belirtilen stilde, konumda ve tanmlanan bulanklk deerine gre oluflturulmufl bir kopyasdr.
rnek:
<!DOCTYPE html>
<html>
<title>shadow</title>
// Stil tanmlamalar
context2d.fillStyle=black;
/*Dolgu rengi tanmlamas(fillText metodu da bu rengi kullanacak)*/
context2d.shadowColor=#F2FF63;
// Glge iin renk
context2d.shadowOffsetX=6;
context2d.shadowOffsetY=-6;
/*Grafik ile glge arasndaki yatay ve dikey uzaklklar ayarland*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 162
162 HER YNYLE HTML5
context2d.shadowBlur=3;
// Glge iin bulanklk deeri tanmland
/*Dikdrtgen izdirildi sonra yukar da anlatlan ifllemler metin iin

farkl deerlerle tekrarland*/
context2d.shadowColor=#441FCC;
context2d.shadowOffsetX=1;
context2d.shadowOffsetY=-1;
context2d.shadowBlur=1;
context2d.font=18px calibri;
// Yaz boyutu ve font ayarland
context2d.fillText(canvas uygulamalar,20,120);
}
</html>
// Metin ekrana yazdrld
</script>
</head>
</canvas>
</body>
Ekran grnts:
lneWdth, lneCap, lneJon ve mterLmt

Serbest izim alanlarnda kullanlacak ya da kenarlk izen metotlarn kullanaca
izgi kalnln lineWidth zellii ile ayarlyoruz.
Kullanm: context2d.lineWidth[=value]
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 163
CANVAS 163
Bu zelliin bafllang deeri 1.0dr. Bu zellie pozitif say deerleri atanabilir.

rnek:
<!DOCTYPE html>
<html>
<title>lineWidth</title>
context2d.strokeStyle=#AA23DB;
var i=0;
/*i deiflkenini izgi kalnln deifltirmek ve izgilerin alt alta
izilmesi iin yeni y deerleri retmek iin kullanacaz*/
</html>
while(i<10) {
context2d.lineWidth=i+1;
context2d.moveTo(0,i*20);
context2d.lineTo(300,i*20);
context2d.stroke();
i++;
}
</script>
</head>
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 164
164 HER YNYLE HTML5
Ekran grnts:
Serbest izim alanlar oluflturulurken izilen izgilerin sonlarnn (izgi ularnn)

stilini ayarlamak ii lineCap zellii kullanlr.
Kullanm: context2d.lineCap[=value]
Bu zellie butt(varsaylan*), round, square deerlerinden biri atanabilir.

butt: Varsaylan deerdir. izgi belirtilen koordinatlar arasna izilir.
round: izgi ularna bir yarm daire eklenir. Eklenen dairenin yarap izgi
geniflliinin (lineWidth) yarsdr.
square: izgi ularna izgi kalnlnn (lineWidth) yars kadar genifllie sahip olan dikdrtgenler ekler.
rnek:
<!DOCTYPE html>
<html>
<title>lineCap</title>
context2d.strokeStyle=#AA23DB;
/*Kenarlklar iin stil tanmlamas yapld*/
context2d.lineWidth=20;
/*Kenarlklar iin kalnlk tanmlamas yaptk ve afla da 3 tane

izgi izdireceiz*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 165
CANVAS 165
/*lk izgimiz iin herhangi bir lineCap tanmlamas yapmadmzdan

varsaylan lineCap deeri olan butt deerini kullanacak*/
context2d.moveTo(30,20);
context2d.lineTo(200,20);
/*Tanmlanan koordinatlara izgimizi stroke()

metoduyla izdirelim*/
</html>
context2d.stroke();
context2d.lineCap=square;
context2d.stroke();
context2d.lineCap=round;
context2d.stroke();
</script>
</head>
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 166
166 HER YNYLE HTML5
lineCap zelii; round, square deerleri ile beraber kullanldnda izgi sonlarna
izgi kalnlnn yars geniflliinde bir yarm daire ya da dikdrtgen ekliyor. Bu durumu hassas izimler yaparken dikkate almay unutmaynz!
Dier bir zelliimiz ise lineJoindir. Bu zellik izgi birleflim noktalarnn nasl
gsterileceini ayarlar.
Kullanm: context.lineJoin[=value]
Bu zellie bevel, round, miter deerlerinden biri atanabilir. Varsaylan (nceden

tanml) deer miterdir.
rnek:
<!DOCTYPE html>
<html>
<title>lineCap</title>
context2d.lineWidth=15;
// lineCap zelliini buarada tanmlayacaz.
</html>
context2d.stroke();
</script>
</head>
</canvas>
</body>
lineCap zellie deerleri atayarak sonuca bakalm.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 167
CANVAS 167
Varsaylan deer; miter:
bevel deeri:
round deeri:
Bu zellik gurubundaki son zelliimiz; miterLimit

zelliidir. izgiler eer dar a ile birleflmifl ise birleflim
alanlarnda i ve dfl kesiflim noktalar oluflacaktr. Bu iki
kesiflim noktalar arasndaki uzaklk miter length (a ler uzakl) olarak adlandrlr. flte bu zellik, oluflabilecek maksimum miterLength deerini tanmlamak iin
kullanlr (Bu zellik, bir oran tanmlar). Bu zelliin varsaylan deeri 10 tamsaysdr.
Kullanm: context.miterLimit[=value]
Yukarda anlatlan zellikler hem okunabilir hem de yazlabilir zelliklerdir. Kullanm formatndaki [=value] tanm bunu ifade etmektedir. Bu zellikler tanmlandklar satrdan sonra izdirilen grafikler iin uygulanrlar.
context2D Nesnesi Metotlar

context2D nesnesi iin tanml olan metodlar inceleyelim.
save() ve restore()
Canvas zerinde izim yaparken kesinlikle ok iflinize yarayacak metotlardr. save()

metodu tanmland satrda geerli olan stil zelliklerinin aldklar deerleri, transformasyon matrisi durumunu ve clip() metoduyla oluflturulan krplmfl alan daha
sonra tekrar kullanlmak iin hafzada saklar/kaydeder. Program akflnda save() metoduyla saklanan bu deerleri tekrar kullanmak isterseniz; restore() metodunu kul-
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 168
168 HER YNYLE HTML5
lanabilirsiniz. restore() metodu kullanld satrda daha nce save() metoduyla

tanmlanan tm stil zelliklerini (stil+transformasyon matrisi+clip()) aldklar deerlerle beraber tekrar geerli klar.
save() metoduyla saklanan deer eflitleri:
Transformasyon matrisi,
clip() metoduyla tanmlanan krplmfl alan,

Afladaki stil zelliklerinin deerlerini saklar.
zellikler:
strokeStyle
fillStyle
globalAlpha
lineWidth
lineCap
lineJoin
miterLimit
shadowOffsetX
shadowBlur
shadowColor
font
textAlign
textBaseline
Kullanmlar:
context2d.save()
context2d.restore()
rnek:
<!DOCTYPE html>
<html>
<head>
<title>save(),restore()</title>
<style>
canvas
{
border:1px solid gray;
}
</style>
var draw = function () {
var ctx =
document.getElementsByTagName (canvas)[0].getContext(2d);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 169
CANVAS 169
ctx.fillStyle = #18189E;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = -6;
ctx.shadowColor = #F725AE;
ctx.save();
ctx.fillRect(20, 20, 60, 60);
ctx.fillStyle = red;
ctx.shadowOffsetX =3;
ctx.shadowOffsetY =-3;
ctx.shadowColor = #2ABAF7;
ctx.fillRect(100,20, 60, 60);
ctx.restore();
/*Bu noktadan sonra geerli olacak stil zellikleri save() metoduyla

saklanan stil zellikleridir. Bunlar;
ctx.fillStyle = #18189E;
ctx.shadowOffsetX = 6;
ctx.shadowOffsetY = -6;
ctx.shadowColor = #F725AE;
*/
}
</script>
</head>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 170
170 HER YNYLE HTML5
Ekran grnts:
Dikdrtgen izim Metotlar

Canvas eleman zerine sadece dolgu alanna ya da kenarla sahip dikdrtgenler
izdirmek ya da canvas zerinde dikdrtgen olarak tanmlanan bir alannn temizlenmesini salamak iin kullanlrlar.
fllRect()
Bu metot; tanmlanan koordinatlarda sadece dolgu alanna sahip bir dikdrtgen izmek iin kullanlr. Bu metot, fillStyle zellii ile tanmlanan rengi kullanr. Bu
metot izim iflleminde canvas(0,0) noktasn (canvas sol st kflesi) referans alr.
Kullanm: context2d.fillRect(x, y, w, h)
x, y parametreleri canvas(0,0)[canvas sol st kesi] orijin noktas ile tanm-
lanan koordinat sisteminde yeni izilecek dikdrtgenin sol st kflesinin koordinatlarn tanmlamak iin kullanlr (x parametresi ile yataydaki uzaklk, y parametresi ile dikeydeki uzaklk ayarlanr). w, h parametreleri izilecek dikdrtgenin geniflliini ve yksekliini tanmlar.
Context2d metotlar, uzunluk birimi olarak px kullanr.
rnek:
<!DOCTYPE html>
<html>
<title>fillRect()</title>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 171
CANVAS 171

ctx.strokeStyle=#F0B4C5;
ctx.fillRect(50,50,100,100);
/*Afladaki dngler ve ierisinde kullanlan metotlar canvas zerinde

fillRect() metodunun daha iyi anlafllmas iin bir zgara oluflturmak iin
kullanld. lerleyen sayfalarda afladaki metotlarn ne ifle yaradklarn
daha iyi anlayacaksnz.*/
for(var x=0;x<=300;x+=10) {
// Dikey izgiler iin
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,200);
ctx.stroke();
}
for(var y=0;y<=200;y+=10) {
// Yatay izgiler iin
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
</script>
</head>
<canvas id=canvas width=300 height=200
style=margin:20px;>
</canvas>
</body>
</html>
Grsel yerleflime bakalm...
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 172
172 HER YNYLE HTML5
strokeRect()
Bu metot tanmlanan koordinatlarda sadece kenarla sahip bir dikdrtgen izmek
iin kullanlr. Bu metodun kullanaca kenarlk rengi strokeStyle zellii ile tanmlanr. fillRect() metodunun kulland yerleflim format, bu metot iinde geerlidir.
Kullanm: context.strokeRect(x, y, w, h)
x, y, w, h parametreleri fillRect() metodu parametreleri ile ayn grevi grr.
rnek:
<!DOCTYPE html>
<html>
<title>strokeRect()</title>
ctx.strokeStyle=red;
ctx.lineWidth=2;
/*Afladaki dngler ve ierisinde kullanlan metotlar canvas zerinde

strokeRect() metodunun daha iyi anlafllmas iin bir zgara oluflturur.
lerleyen sayfalarda afladaki metotlar ne ifle yaradklarn daha iyi
anlayacaksnz!*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 173
CANVAS 173
ctx.strokeStyle=#E6E6E6;
ctx.lineWidth=1;
for(var x=0;x<=300;x+=10) {
// Dikey izgiler iin
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,200);
ctx.stroke();
}
for(var y=0;y<=200;y+=10) {
// Yatay izgiler iin
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
</script>
</head>
style=margin:20px;>
</canvas>
</body>
</html>
Grsel yerleflime bakalm...
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 174
174 HER YNYLE HTML5
Canvasn uzunluk birim olarak px kullandn unutmaynz. Yeni izilen ve sadece

kenarlk alanna sahip olan drtgen 100 px geniflliinde ve yksekliinde, bu drtgenin sol st kflesinin koordinatlar (x=50px, y=50px) fleklindedir.
clearRect()
Bu metot fleffaf siyah renkli dolguya sahip bir dikdrtgen izer. zetle izildii
alandaki piksellerin renk deerlerini temizler. fillRect(), strokeRect() metotlarnn kulland yerleflim format bu metot iinde geerlidir.
Kullanm: context.clearRect(x, y, w, h)
x, y, w, h parametreleri fillRect() metodu parametreleri ile ayn grevi grr.
rnek:
<!DOCTYPE html>
<html>
<title>clearRect()</title>
/*Siyah renkli bir dolgu alan oluflturuldu.
fillRect metodu fillStyle zellii ile tanmlanan rengi kullanr.

fillStyle zellii tanmlanmadndan bu zelliin varsaylan deeri olan
siyah metot tarafndan kullanlacaktr.*/
ctx.clearRect(60,10,80,60);
}
</html>
/*Seffaf siyah dolgulu yani renk deerleri temizlenmifl bir alan oluflturuldu*/
</script>
</head>
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 175
CANVAS 175
Path Metotlar (Karmaflk fiekiller izmek)

Canvas zerine zel flekiller izmek iin path metotlar kullanlr. Bu metotlar bize
serbest izim alanlar oluflturma imkan salar. Koordinat sisteminde tanmlayacanz iki nokta arasnda dz ya da kvrml izgiler izdirebilir ya da bu izgileri kullanarak bir geometrik flekil elde edebilirsiniz. Oluflturulan bu geometrik flekle bir dolgu rengi tanmlayabilirsiniz. Bu metotlar kullanarak dikdrtgen tr geometrik flekillerde oluflturmamz mmkndr. fiimdi bu metotlarn neler olduuna bakalm.
begnPath()
Yeni bir serbest izime bafllamak iin kullanlr. Aslnda yapt ifllem izim iflleminde en son kullanlan ve yeni bir izim iin bafllang noktas olarak (referans
olarak) kabul edilecek izim noktas bilgisini iptal etmektir. Bu metot arldktan
sonra yeni izim ifllemi iin bir bafllang noktas tanm kalmaz. Bu metottan sonra izime bafllang noktas (izim noktas olarak adlandracaz) tanmlamak iin
moveTo() metodu kullanlr. Kendisinden sonra tanmlanmfl olan yol listesine
stroke(), fill() metotlarnn uygulanmasn salar. Ayrca closePath() metoduyla beraber kapal izim alanlar oluflturmak iin kullanlr.
Kullanm: context2d.beginPath()
moveTo()
beginPath() metodu arldktan sonra izim ifllemine bafllamak iin bir izim
noktas tanmlamak ya da serbest izim alan olufltururken yeni bir izim noktas tanmlamak iin kullanlr. Bu metot ile tanmlanan nokta izim ifllemi iin bafllang
noktasn temsil eder.
Eer beginPath() metodunu ararak yeni bir izim oluflturacaksanz moveTo()

metoduyla bir bafllang izim noktas oluflturmanz flarttr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 176
176 HER YNYLE HTML5
Kullanm: context2d.moveTo(x,y)
x, y deerleri koordinat sistemindeki izim noktasn tanmlar.
rnek:
<!DOCTYPE html>
<html>
<title>moveTo()</title>
ctx.strokeStyle=#1548ED;
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(30,40);
ctx.lineTo(150,100);
ctx.stroke();
/*Afladaki kodlar canvas zerindeki zgaray oluflturmak iin kullanld*/
ctx.strokeStyle=#A9F5BB;
ctx.lineWidth=1;
for(var y=0;y<=150;y+=10) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
}
for(var x=0;x<=300;x+=10) {
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,200);
ctx.stroke();
}
</script>
</head>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 177
CANVAS 177
</html>
</body>
</canvas>
Ekran grntsne grsel olarak bakalm.
Draw fonksiyonu ierisindeki kodlar afladaki flekilde deifltirip sonuca tekrar ba-
kalm.

ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(30,40);
ctx.moveTo(40,10);
ctx.lineTo(160,70);
ctx.stroke();
}
// Izgaray Oluflturmak iin Kodlar
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 178
178 HER YNYLE HTML5
lneTo()
Bu metot varsaylan izim noktas (bafllang izim noktas) ile kendisi ile tanmlanan bitifl noktas arasnda dz bir izgi izer. lineTo() metoduyla bitifl noktasnn
koordinatlar tanmlanr. Bafllang izim noktas moveTo() metoduyla tanmlanan
bir nokta ya da izim yolunda iflaretinin (pointer) bulunduu noktadr.
Kullanm: context2d.lineTo(x,y)
x, y deerleri koordinat sisteminde izginin bitifl noktasn tanmlar. Bu metot ile

tanmlanan izginin izdirilmesi iin stroke() metodu kullanlr.
rnek:
<!DOCTYPE html>
<html>
<title>lineTo()</title>
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(50,20);
// izim iin bafllang noktas tanmladk
ctx.lineTo(120,60);
ctx.lineTo(50,100);
ctx.lineTo(50,145);
// Tanmladmz izgileri izdirelim.
ctx.stroke();
}
</html>
</script>
</head>
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 179
CANVAS 179
Ekran grnts:
Yukardaki resimde izim noktalar ve hangi metodunun hangi izgiyi izdirdii

grlmektedir.
quadratcCurveTo()
Bir kontrol noktas (denetim noktas) kullanarak iki
nokta arasnda bir eri izmeye yarar. ki nokta arasndaki izgi kontrol noktasna gre eilerek bir izim elde edilir.
P0 bafllang izim noktas, P1 bitifl izim noktalardr. quadraticCurveTo() metodu ile kontrol noktas (Pkontrol) ve bitifl noktas (P1) tanmlanr.
Bafllang izim noktas (P0) moveTo() metoduyla tanmlanan bir nokta ya da izim yolunda iflaretinin (pointer) bulunduu noktadr.
Kullanm: context2d.quadraticCurveTo(cpx, cpy, x, y)
cpx, cpy deerleri koordinat sisteminde Pkontrol noktasn tanmlayan x ve y deerleridir. Dier x, y deerleri ile bitifl noktas (P1) tanmlanr. Bu metot ile tanmlanan erinin izdirilmesi iin stroke() metodu kullanlr.
rnek:
<!DOCTYPE html>
<html>
<title>quadraticCurveTo()</title>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 180
180 HER YNYLE HTML5
ctx.strokeStyle=#F70A0A;
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(50,70);
ctx.quadraticCurveTo(100,10,150,70);
ctx.quadraticCurveTo(200,127,250,70);
ctx.stroke();
}
</html>
</script>
</head>
</canvas>
</body>
Ekran grntsne bakalm...
bezerCurveTo()
ki kontrol noktas (denetim noktas) ile iki
nokta arasnda bir eri izmeye yarar. Kontrol noktalar ile erinin flekli belirlenir.
P0 bafllang izim noktas P1 bitifl izim noktasdr. Kontrol noktalar (Pk1, Pk2) kullanlarak P0 ve P1 noktalar arasnda bir eri oluflturulur. Bafllang izim noktas (P0) moveTo()
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 181
CANVAS 181
metoduyla tanmlanan bir nokta ya da izim yolunda iflaretinin (pointer) bulunduu

noktadr. Kontrol noktalar ve bitifl izim noktas bu metot ierisinde tanmlanr.
Kullanm: context2d.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x, cp1y deerleri Pkontrol1; cp2x, cp2y deerleri Pkontrol2yi tanmlar.

Dier x, y deerleri ile bitifl noktas (P1) tanmlanr. Bu metot ile tanmlanan erinin izdirilmesi iin stroke() metodu kullanlr.
rnek:
<!DOCTYPE html>
<html>
<title>bezierCurveTo()</title>
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(60,70);
ctx.bezierCurveTo(210,30,100,5,180,70);
ctx.stroke();
/*Afladaki kodlar canvas uzerindeki zgaray oluflturmak iin kullanld*/
ctx.lineWidth=1;
for(var y=0;y<=150;y+=10) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
}
for(var x=0;x<=300;x+=10) {
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,200);
ctx.stroke();
}
</script>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 182
182 HER YNYLE HTML5
</html>
</head>
</canvas>
</body>
Ekran grnts:
closePath()
flaretinin (pointer) bulunduu nokta ile (flaretinin bulunduu nokta: beginPath()

metoduyla bafllayan serbest izim alannda izim iflleminde kullanlan en son nokta)
moveTo() metoduyla tanmlanan izim ifllemine bafllang noktas arasnda dz bir
izgi izerek izim yolunu kapatr. Bu yntemle izim yolu kapal bir alana dnflr.
Bu metot tanmlanan izgileri izmek iin kullanlan stroke() metodundan nce
kullanlmaldr.
Kullanm: context2d.closePath()
rnek:
<!DOCTYPE html>
<html>
<title>closePath()</title>
ctx.lineWidth=3;
ctx.beginPath();
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 183
CANVAS 183
ctx.moveTo(100,30);
ctx.lineTo(20,70);
ctx.closePath();
ctx.stroke();
</html>
ctx.lineWidth=1;
for(var y=0;y<=150;y+=10) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
}
for(var x=0;x<=300;x+=10) {
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,200);
ctx.stroke();
}
</script>
</head>
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 184
184 HER YNYLE HTML5
arc ()
Canvas zerine tanmlanan yarapta daire ya da daire dilimi (paras) izdirmek
iin kullanlr. Daire ya da daire paras yol izimi ile elde edilir.
context2d.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x, y deerleri dairenin merkez noktasnn koordinatlarn tanmlamak iin kullanlr.

radius parametresi ile izdirilecek dairenin yarap ayarlanr. startAngle parametresi ile izdirilecek daire iin bir bafllang as, endAngle parametresi ile izdirile-
cek daire iin bir bitifl as tanmlanr. Bu deerler aslnda yay zerindeki izim noktalar olarak da adlandrlabilir. startAngle izime bafllang noktas, endAngle ise
izim bitifl noktasdr. Bu a deerleri radyan cinsinden olmaldr. Derece radyan dnflm afladaki formlle yaplabilir.
radyan=derece* Math.PI/180
anticlockwise parametresi ile dairenin saat ynnde mi yoksa tersi ynde mi izdirilecei ayarlanr. true deeri atanrsa ters saat ynnde, false deeri atanrsa
saat ynnde daire izimi yaplr. Bu metot ile tanmlanan dairenin kenarlnn izdirilmesi iin stroke(), dolgu alannn izdirilmesi iin fill() metodu kullanlr.
Afladaki rnekle konunun daha iyi anlafllmasn salayalm.
<!DOCTYPE html>
<html>
<title>arc()</title>
ctx.strokeStyle=#d64747;
ctx.fillStyle=#e9e9e9;
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(100,70,50,1/4*Math.PI,1.5*Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.lineWidth=1;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 185
CANVAS 185
</html>
for(var y=0;y<=150;y+=10) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
}
for(var x=0;x<=300;x+=10) {
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,200);
ctx.stroke();
}
</script>
</head>
</canvas>
</body>
arc metodumuza bakarsak merkezi (100,70) noktas olan ve 50 px yarapa sahip

bir dairenin 450 (1/4)den bafllayarak 2700 (1.5) dereceye kadar olan bir paras
tanmlanmfltr. arc() metodundan sonra kullanlan closePath() metodu ile bafllang ve bitifl noktalarnn dz bir izgi ile birlefltirilmesi salanmfltr. fill() metoduyla tanmlanan daire parasnn dolgusu, stroke() metoduyla kenarl izdirilmifltir.
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 186
186 HER YNYLE HTML5
fieklin zerinde deerleri iflaretleyerek anlafllmasn

kolaylafltralm.
arc() metodunda anticlockwise parametresi olarak
false deeri atanmfltr. Bu durumda bafllang aflsn-
dan bafllanarak saat ynnde gidilerek bitifl asna ulafllr. Bu parametreye atanan deeri true olarak deifltirip sonuca tekrar bakalm:
ctx.arc(100,70,50,1/4*Math.PI,1.5*Math.PI,true);
fieklin zerinde deerleri iflaretleyerek anlafllmasn

kolaylafltralm.
Bu durumda ise bafllang aflsndan bafllanarak ters saat ynnde gidilerek bitifl asna ulafllr.
rnek:
<!DOCTYPE html>
<html>
canvas {
/*canvas elemanna bir kenarlk ekledik*/
}
</style>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 187
CANVAS 187

/*canvas eleman iinde yaplacak izimler iin kenarlk ve dolgu renklerini

tanmlayalm*/
var coorX=[50,140,230,320];
/*canvas zerine 4 tane daire(daire paras) izdirilecek bu durumda

bu dairelerin merkez noktalarnn x koordinatlarn bir dizi ierisine atadk*/
for(var i=0;i<2;i++) {
var cor=0;
for(var t=0.5;t<=2;t+=0.5) {
ctx.beginPath();
/*beginPath() metoduyla yeni bir izime

bafllayacamz bildiriyoruz.*/
ctx.arc(coorX[cor],(i+0.5)*100,40,0,t*Math.PI,false);
/*i=0 ve t=0.5|1|1.5|2 deerleri iin;
ctx.arc(50,50,40,0,0.5*Math.PI,false)
ctx.arc(140,50,40,0,1*Math.PI,false)
arc() metodunu yukardaki flekilde 4 defa
alfltrmfl olacam*/
/*i=1 ve t=0.5|1|1.5|2 deerleri iin;
arc() metodunu yukardaki flekilde 4 defa
alfltrmfl olacam*/
ctx.closePath();
/*daire paras izimlerinde startAngle ve endAngle

noktalarn dz bir izgi ile birlefltirmek iin closePah()
metodunu kullandm*/
if(i==0) {
/*Bu dngde i=0 iin arc() metoduyla

tanmlanan dairenin dolgu ve kenarl,
i=1 iin sadece kenarl izdirilecek*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 188
188 HER YNYLE HTML5
</html>
ctx.fill();
ctx.stroke();
} else {
ctx.stroke();
}
cor++;
</script>
</head>
</canvas>
</body>
Ekran grnts:
arc() metodunu ilk anlatrken daire ya da daire paras, yol izimi ile elde edilir
fleklinde bir tanm yapmfltk. Bu flu anlama gelmektedir. Bu metot, eer izim yolunda varsaylan bir bafllang noktas, yani referans noktas varsa; bu bafllang yani referas noktasndan kendisi ile tanmlanan izime bafllang noktas (startAngle)
arasna dz bir izgi ekleyerek flekli (daire ya da daire parasn) izim yoluna ekler.
Yukardaki rneklerde arc() metodunu kullanmadan nce beginPath() metoduyla
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 189
CANVAS 189
en son kullanlan, yani iflaretinin bulunduu nokta bilgisi silinmifltir. Bundan dolay her izdirilen daire bir yola balanmadan tek baflna canvas zerine izdirilmifltir.
Afladaki rnekle bu aklamay daha iyi anlayacaksnz.
<!DOCTYPE html>
<html>
canvas {
/*canvas elemanna bir kenarlk ekledik*/
}
</style>
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(200,100,40,0,0.5*Math.PI,true);
ctx.stroke();
ctx.strokeStyle=#D8CFFF;
ctx.lineWidth=1;
for(var y=0;y<=200;y+=10) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(400,y);
ctx.stroke();
}
for(var x=0;x<=400;x+=10) {
ctx.beginPath();
ctx.moveTo(x,0);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 190
190 HER YNYLE HTML5
</html>
ctx.lineTo(x,200);
ctx.stroke();
</script>
</head>
</canvas>
</body>
Ekran grntsne flekil zerinde iflaretlemeler yaparak bakalm.

NOT
arc() metodunun dflnda iki nokta arasnda yarap tanmlanmfl bir ember yay
izdirmek iin arcTo() metodu kullanlr.
rect ()
Dikdrtgen iin kapal bir yol oluflturur. Bu metot ile yol iziminin paras olan bir
dikdrtgen izdirmifl olursunuz. Bu metot ile oluflturulan dikdrtgen, kendinden nce iflaretinin bulunduu nokta ile balanmaz (Bu metot iflaretiyi x ve y parametreleri ile belirtilen koordinatlara taflr). Fakat dikdrtgenin sol st kflesi rect() metodundan sonra kullanlan izimler iin bafllang noktasn temsil eder. Bu metot ile
tanmlanan dikdrtgenin fill() ve stroke() metotlar ile kenarl ya da dolgusu
izdirilir.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 191
CANVAS 191
Kullanm: context2d.rect(x,y,w,h)
x, y parametreleri izilecek dikdrtgenin sol st kflesinin koordinatlarn tanmla-
mak iin kullanlr.
w, h parametreleri izilecek dikdrtgenin geniflliini ve yksekliini tanmlar.
rnek:
<!DOCTYPE html>
<html>
<title>rect()</title>
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(60,60);
ctx.rect(80,40,50,50);
ctx.lineTo(280,40);
ctx.stroke();
/*Izgara*/
ctx.strokeStyle=#D8CFFF;
ctx.lineWidth=1;
for(var y=0;y<=150;y+=10) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
}
for(var x=0;x<=300;x+=10) {
ctx.beginPath();
ctx.moveTo(x,0);
ctx.lineTo(x,150);
ctx.stroke();
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 192
192 HER YNYLE HTML5
</html>
</script>
</head>
</canvas>
</body>
Ekran grnts:
fll() ve stroke()
Yol izimi metotlar ile tanmlanan izgilerin izdirilmesi iin stroke() yol izimi
ile oluflturulan kapal alanlarn dolgusunun izdirilmesi iin fill() metodu kullanlr. Ksacas; serbest yol oluflturmak iin kullanlan metotlar sadece tanmlama
yapar. Bu metotlarla tanmlanan izgi ya da flekillerin canvas zerine izilmesi iin
stroke() ve fill() metotlar kullanlr. Bu metotlar kendilerinden nce tanmlanan strokeStyle, fillStyle zelliklerine atanan renk deerlerini ve dier izgi
stil zelliklerini kullanarak (eer zellikler tanmlanmamfl ise varsaylan deerleri
kullanr) belirtilen izgiyi ya da dolguyu canvas zerinde olufltururlar.
Kullanmlar:
context2d.fill()
context2d.stroke()
Bu metotlar kendilerinden nce beginPath() metoduyla bafllanp, oluflturulmufl

serbest yol izimi iin geerlidirler.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 193
CANVAS 193
Afladaki rnei inceleyiniz.
ctx.beginPath(); /*1.izim*/
ctx.moveTo(20,20);
ctx.lineTo(60,60);
ctx.beginPath(); /*2.izim*/
ctx.moveTo(80,80);
ctx.lineTo(280,40);
ctx.stroke();
ctx.fill();
Bu durumda stroke(), fill() metotlar sadece ikinci beginPath() metoduyla

bafllayan yol tanmlamas iin geerli olurlar. Yol izimi ile ilgili bir zelliin kullanlabilmesi ya da bir metodun izim tanmlamas yapmas iin stroke() ve
fill() metotlarndan nce tanmlanmfl olmas gerekir.
clp()
Canvas zerinde izim yaplmfl alann dflnda kalan ksm krparak sadece ierii
barndran bir alan elde edilir. Bu metot kullanldktan sonra canvas zerinde sadece
krpma sonucu elde edilmifl bu alan gsterilir (Daha sonra izdirilen grafiklerin sadece bu alan iindeki ksm gsterilir).
Kullanm: context2d.clip()
rnek:
<!DOCTYPE html>
<html>
<title>clip()</title>
ctx.lineWidth=3;
ctx.fillStyle=#FFA666;
ctx.beginPath();
ctx.arc(100,70,50,0,2*Math.PI,true);
ctx.stroke();
ctx.clip();
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 194
194 HER YNYLE HTML5

/*canvas zerinde sadece ember var ve clip() metodu kullanld. Bu durumda ember dflnda
kalan alanlar krplr. Bu metodtan sonra sadece ember ve ierisine izdirilecek grafikler gsterilir.*/
</html>
</script>
</head>
</canvas>
</body>
Ekran grnts:
Dikkat ederseniz clip() metodundan sonra izdirilen dikdrtgenin sadece ember

iinde kalan ksm gsterildi.
Gradent ve Pattern Metotlar

Afladaki metotlar kullanarak renk geisi ieren ya da bir resim ya da videonun
tekrarndan oluflan (resim ya da video dolgu malzemesi olarak kullanlr) dolgular
oluflturabilirsiniz ve oluflturduunuz bu dolgular canvas zerinde izdirdiiniz flekillere dolgu ya da kenarlk rengi olarak atayabilirsiniz.
addColorStop()
createLinearGradient() ya da createRadialGradient() metotlar tanmlandnda oluflan renk geifli nesnesi bir gradient-linea sahiptir. gradient-line
renk geiflinin hangi renkle ve hangi noktada olacan tanmlamak iin kullanlan
bir referans izgisidir.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 195
CANVAS 195
Kullanm: gradientObject.addColorStop(offset,color)
offset parametresi, tanmlanan rengin gradient-line zerinde hangi noktada

tam olarak gsterileceini ayarlar. Bu flekilde birden fazla renk gradient-line
zerinde tanmlanarak renk geifli elde edilmifl olur. offset zelliine 0.0 ile 1.0
arasnda bir deer atanabilir.
color parametresi, gradinet-line zerinde offset parametresi ile tanmlanan

noktada gsterilecek rengi ayarlar. CSS color tipinde bir renk deeri olabilir.
createLnearGradent()
Bu metod dorusal renk geiflini temsil eden bir nesne oluflturur.
Kullanm: gradient=context2d.createLinearGradient(x0,y0,x1,y1)
Bu metodunun geriye dndrd gradient deiflkeni CanvasGradient tipinde

bir nesnedir. (x0,y0) parametreleri ile gradient-line (referans izgisinin) bafllang noktasnn, (x1,y1) parametreleri ile referans izgisinin bitifl noktasnn koordinatlar ayarlanr.
rnek:
<!DOCTYPE html>
<html>
<title>createLinearGradient()</title>
ctx.lineWidth=3;
*linearGradient Nesnesi oluflturalm ve gradient-line zerinde geiflte

kullanlacak renkleri ve konumlarn ayarlayalm*/
}
</head>
var lGradient=ctx.createLinearGradient(30,30,270,170);
lGradient.addColorStop(0,crimson);
lGradient.addColorStop(1.0,white);
ctx.fillStyle=lGradient;
ctx.fillRect(50,50,200,100);
</script>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 196
196 HER YNYLE HTML5
</html>
</canvas>
</body>
Ekran grnts:
Bu ekran grnts Firefox 4 ile elde edilmifltir.

Resim zerinde iflaretlemeler yaparak, gradient-line konumunu ve tanmlanan
renk deerlerini grsel olarak grelim.
gradient-line referans izgisi canvas(0,0) noktasna gre dorusal renk geifli

nesnesi (createLinearGradient) oluflturulurken tanmlanan koordinatlar baz al-
narak oluflturulur. Bu gradient-line, sadece belirtilen dolguyu kullanan izimler iin

geerli olur.
Yukardaki rnekte afladaki deifliklikleri yapp sonuca grsel olarak tekrar bakalm.
var lGradient=ctx.createLinearGradient(50,50,250,150);[Deitirin]
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 197
CANVAS 197
rnek:
<!DOCTYPE html>
<html>
<title>createLinearGradient()</title>
ctx.lineWidth=3;
var lGradient=ctx.createLinearGradient(50,50,250,150);
lGradient.addColorStop(0.0,gray);
lGradient.addColorStop(0.25,blue);
lGradient.addColorStop(0.75,red);
lGradient.addColorStop(1,white);
ctx.fillStyle=lGradient;
ctx.fillRect(50,50,200,100);
}
</script>
</head>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 198
198 HER YNYLE HTML5
Ekran grnts:

Daha iyi anlamanz iin flekil zerinde iflaretlemeler yapalm.
createRadalGradent()
Bu metod dairesel renk geiflini temsil eden bir nesne oluflturur.
Kullanm: gradient=context2d.createRadialGradient(x0,y0,r0,x1,y1,r1)
Bu metodunun geriye dndrd gradient deiflkeni CanvasGradient tipinde bir

nesnedir. Renk geifli merkez emberin yayndan bafllayarak dairesel olarak dfl
emberin yayna kadar devam eder. (x0, y0) parametreleri ile birinci emberin (i
ember) merkez noktas, r0 parametresi ile birinci emberin yarap, (x1, y1) parametreleri ile ikinci emberin (dfl ember) merkez noktas, r1 parametresi ile ikinci emberin yarap ayarlanr. Dzgn dairesel renk geiflleri oluflturmak iin i
ve dfl emberin merkez noktalarnn ayn olmas nemlidir.
gradient-line (referans izgisinin) bafllang noktas merkez emberin yay bitifl
noktas dfl emberin yaydr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 199
CANVAS 199
rnek:
<!DOCTYPE html>
<html>
<title>createRadialGradient()</title>
// radialGradient Nesnesi oluflturalm;
</html>
var rGradient=ctx.createRadialGradient(150,100,20,150,100,90);
rGradient.addColorStop(0.0,#FA2AB1);
rGradient.addColorStop(0.25,green);
rGradient.addColorStop(0.75,blue);
rGradient.addColorStop(1.0,khaki);
ctx.fillStyle=rGradient;
ctx.fillRect(10,10,280,180);
</script>
</head>
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 200
200 HER YNYLE HTML5
Daha iyi grebilmeniz iin flekil zerinde iflaretlemeler yapalm.
Renk geifli iin kullanlacak gradient-line referans izgisi yukardaki flekilde

grlmektedir.
1. colorStop1
color: #FA2AB1
offset:0.0
2. colorStop2
color: green
offset:0.25
3. colorStop3
color: blue
offset:0.75
4. colorStop4
color:khaki
offset:1.0
Afladaki rnekte form elemanlarn kullanarak tanmlanan dairesel renk geifli

dolgusu, canvas eleman ierisinde Mouse iflaretisini takip edecek. Sayfa ilk yklendiinde canvas merkezinde varsaylan deerlerle oluflturulacak bu dairesel renk
geifli alan kullancnn form elemanlarndaki deerleri deifltirmesine bal olarak
deiflebilecek ve Mouse iflaretisini takip edecek.
<!DOCTYPE html>
<html>
<title>createRadialGradient()</title>
body {
margin:0px;
}
div#edit {
position:absolute;
left:0px;
top:400px;
width:500px;
font-family:verdana;
font-size:12px;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 201
CANVAS 201
height:50px;
}
div#edit input[type=number] {
width:40px;
}
</style>
/*canvas elemanna ulafltk ve bu eleman 2 boyutlu bir izim
alanna dnfltrdk*/
ctx.fillStyle=createGradient(250,200,ctx);
/*createGradient() fonksiyonu geriye (250,200) noktas merkezli

radial gradient nesnesi dndrr.*/
/*Sayfa yklendiinde canvas eleman zerinde dairesel renk geifli

oluflturmak iin canvas boyutlarnda bir dikdrtgen izdirdik. Sadece dolgu
alanna sahip olan bu dikdrtgen fillStyle zelliine atanan dairesel renk
geifli dolgusunu kullanacak.*/
}
var createRadialgr= function(event) {
/*canvas zerinde kullanc fareyi hareket ettirdiinde alflacak fonksiyon*/
var evt=event||window.event;
/*canvas ierisinde dairesel renk geifli fareyi takip edeceinden mouseun

canvas ierisindeki pozisyonunu bilmemiz gerekir. Internet Explorer olay
nesnesini window.event fleklinde tanmlarken dier tarayclar sadece event
fleklinde tanmlar. Bu durumda eer tarayc event nesnesini destekliyorsa
evt=event eer desteklemiyorsa evt=window.event olacaktr.
var evt=event|| window.event ifadesinde mantksal(logical Or) kullanlmfltr.
Logical Or
result=operant1 || operant2
*operant1 object ise result=operant1
*operant1 false ise result=operant2
*/
var xkor=evt.clientX;
var ykor=evt.clientY;
/*clientX mouse iflaretisi ile tarayc sol kflesi arasndaki uzakl,
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 202
202 HER YNYLE HTML5

clientY mouse iflaretisi ile tarayc st kflesi arasndaki uzakl verir.
Bu durumda bizim yapmak istediimiz mouse iflaretisinin canvas ierisindeki
konumunu merkez olarak kabul eden dairesel bir gradient oluflturmaktr.
body{margin:0}tanmlamas yaptmzdan xkor, ykor deiflkenleri
mouseun canvas ierisindeki konumunu vermektedir.*/
ctx.fillStyle=createGradient(xkor,ykor,ctx);
/*mouse iflaretisinin bulunduu noktay merkez nokta olarak kabul eden

dairesel bir gradient oluflturulup fillStyle zelliine atanyor*/
/*Son olarak yukarda tanmlanan dairesel renk geifli dolgusunu

kullanacak ve canvasn tamamn kapsayacak bir dikdrtgen izdirdik*/
}
var createGradient= function(xkor,ykor,ctx) {
/*Bu fonksiyon xkor,ykor deiflkenlerine atanan deerleri ve canvas elemannn

altnda tanmlanan form elemanlar ierisindeki verileri kullanarak
radialGradient nesnesi oluflturmak iin tanmlanmfltr.*/
var number1=document.querySelector(input[name=num1]);
var number2=document.querySelector(input[name=num2]);
var color1=document.querySelector(input[name=clr1]);
var rGradient=ctx.createRadialGradient(xkor,ykor,
number1.value,xkor,ykor,number2.value);
rGradient.addColorStop(0.0,color1.value);
return rGradient;
}
</script>
</head>
<body onload=draw(); >
onmousemove=createRadialgr(event);>
</canvas>
<div id=edit>
Merkez ember r0:
<input type=number min=0 max=40 step=5
value=0 name=num1/>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 203
CANVAS 203
D ember r1:
<input type=number min=10 value=60
max=100 step=5 name=num2/>
<br/>
colorStop1:
<input type=color name=clr1 value=#ed1c24 />
colorStop2
<input type=color name=clr2 value=#fff200 />
colorStop3
<input type=color name=clr3 value=#a349a4 />
</div>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 204
204 HER YNYLE HTML5
createPattern()
Resim ya da video elemanlarnn tekrarndan oluflan dolgular oluflturmak iin kullanlr. Bu meot canvasPattern tipinde bir nesne oluflturur.
Kullanmlar:
pattern=context2d.createPattern(HTMLImageElement,repetition)
pattern=context2d.createPattern(HTMLVideoElement,repetition)
repetion parametresi repeat (dolgu malzemesi tekrar eder), repeat-x (dolgu malzemesi yatay eksende tekrar eder), repeat-y (dolgu malzemesi dikey eksende tekrar
eder), no-repeat (dolgu malzemesi tekrar etmez) string deerlerinden birini alr.
rnek:
<!DOCTYPE html>
<html>
<title>createPattern()</title>
canvas{
border:1px solid blue;
}
</style>
var canvas=document.getElementsByTagName(canvas)[0];
var context2d=canvas.getContext(2d);
var image=new Image();
image.src=html5.png;
var pattern=context2d.createPattern(image,repeat);
context2d.fillStyle=pattern;
context2d.fillRect(0,0,canvas.width,canvas.height);
}
</script>
</head>
<body onload=draw(); >
<canvas id=canvas width=300 height=150 >
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 205
CANVAS 205
Ekran grnts:
Firefox 4 ekran grnts.

Dolgu malzemesi (resmi)
html5.png
Canvas zerine izdirdiimiz dikdrtgen (canvas elemannn tamamn kaplayan)

fillStyle zellii ile tanmlanan ve resmin tekrarndan oluflan dolguyu kullanmfltr.
Burada flunu belirtelim html5.png resmi kullanlarak oluflturulan dolgu fillRect()

metodu tarafndan kullanlmfltr.
Yukardaki rnekte afladaki deifliklii yapp konumuza devam edelim.
Ekran grnts:
Sonu sizi flaflrtmfl olabilir. nk biz resmin tekrarndan oluflan dolguyu canvas
zerine izdirilecek grafikler iin tanmladk ve beklentimiz flu idi; resim izdirdiimiz dikdrtgenin sol st kflesinden bafllayp tekrar etmeli. Fakat createPattern()
metodu canvas(0,0) konumdan bafllayarak kendisine verilen repetion parametre-
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 206
206 HER YNYLE HTML5
sine bal olarak dolguyu tanmlar. Yani aslnda bu dolgu canvas elemannn tamamna gre tanmlanr. Fakat canvas zerine izdirilen grafikler konumlarna gre canvas zerine tanmlanmfl bu dolguyu kullanrlar.
Resme iflaretlemeler yaparak yakndan bakalm.
fillRect(30,30,100,100)
metoduyla izdirilen
dikdrtgen
NOT
Bu metodu oluflturduunuz resmin onload olaynda kullanrsanz zellikle Firefox

tarafnda kan problemi yaflamazsnz. Yukardaki kodu afladaki gibi yazmanz
mmkndr.

var canvas=document.getElementsByTagName(canvas)[0];
var context2d=canvas.getContext(2d);
var image=new Image();
image.src=html5.png;
image.onload = function(){
var pattern=context2d.createPattern(image,repeat);
context2d.fillStyle=pattern;
context2d.fillRect(0,0,canvas.width,canvas.height);
}
}
Transformaton Metotlar
Canvas zerine izdirdiiniz grafikler iin transformasyon metotlarn kullanarak
flekilleri tekrar boyutlandrabilir, dndrebilir, koordinatlarn deifltirebilir ya da
eebilirsiniz. fiimdi bu metotlar srasyla grelim.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 207
CANVAS 207
scale()
leklendirme (yeniden boyutlandrma) ifllemleri iin kullanlr. Kendisinden sonra tanmlanan izim metotlarnn kullanaca yatay ve dikey olmak zere iki tane
leklendirme katsays tanmlar.
Kullanm: context2d.scale(x,y)
x parametresi izim metotlar iin tanmlanan yatay deerler iin bir lekleme katsay tanmlarken, y parametresi dikey deerler iin bir lekleme katsays tanmlar.
Bu metot kendisinden sonra tanmlanan izim metotlar iin geerlidir.

rnek:
<!DOCTYPE html>
<html>
<head>
<title>scale()</title>
canvas
{
border: 1px solid blue;
}
</style>
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.fillStyle = lightblue;
ctx.scale(3, 2);
ctx.fillRect(20, 20, 60, 40);
ctx.beginPath();
ctx.moveTo(30, 10);
ctx.lineTo(40, 50);
ctx.stroke();
}
</script>
</head>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 208
208 HER YNYLE HTML5
</canvas>
</body>
</html>
Sonuca grsel iflaretlemeler yaparak bakalm.
fiimdi kod satrlarmza tekrar bakalm.

ctx.scale(3, 2);
satr ile yatay eksende (x ekseninde) tanmlanacak deerler iin 3 katsays, dikey
eksende (y ekseninde) tanmlanacak deerler iin 2 katsays tanmlanmfltr.
ctx.fillRect(20, 20, 60, 40);
satr ile canvas zerine bir dikdrtgen izdirmek istiyoruz. lk 20 deeri ve 60 deeri yatay eksen zerinde tanmlanmfl deerlerdir. Bu durumda tarayc bu deerleri 3 ile arpar. kinci 20 deeri ve 40 deeri dikey eksende tanmlanmfl deerler
olduundan tarayc bu deerleri 2 ile arpar ve sonuta bulunan deerlere gre dikdrtgen izdirilir.
Yeni deerlerle metodun son hali ctx.fillRect(60, 40, 180, 80) fleklinde olacaktr:
ctx.moveTo(30, 10)
moveTo() metodu; yeni bir izim bafllang noktas tanmlamak iin kullanlr.
context2d.moveTo(x,y); Bu durumda tarayc 30 deerini 3 ile arpar, 10 deerini 2 ile arpar ve yeni bulunan deerlere gre bafllang noktasn tanmlar. lekleme sonucunda metodun son hali ctx.moveTo(90, 20) fleklinde olacaktr.
ctx.lineTo(40, 50);
lekleme sonucu tarayc tarafndan kullanlacak metodun son hali:

ctx.stroke();
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 209
CANVAS 209
rotate()
Dndrme ifllemleri iin kullanlr. Kendisinden sonra tanmlanan izim metotlarnn
kullanaca bir dndrme as tanmlar. Dndrme ifllemi saat ynnde yaplr ve
dndrme iflleminde kullanlan orijin noktas canvas(0,0)dr.
Aslnda daha iyi kavrayabilmeniz iin flyle
dflnebilirsiniz; rotate() metodundan sonra
canvas koordinat sistemi belirtilen a kadar
dndrlr ve flekiller, yeni oluflan bu koordinat sistemine gre izdirilir. Yandaki resimle
ne demek istedimi daha iyi anlayacaksnz. x'
ve y' dndrme sonucunda oluflan yeni canvas koordinat sistemi eksenlerini tanmlar.
Buradan canvas eleman dndrlr fleklinde bir sonu karamayz. Dndrlen
canvas sol st kflesini orijin olarak kabul eden canvas koordinat sistemidir.
Kullanm: context2d.rotate(angle)
angle parametresi radyan cinsinden dndrme asn temsil eder.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>rotate()</title>
var ctx =
/*Afladaki dngler canvas zerindeki zgaray oluflturmak iin kullanlmfltr.

rotate() metodu tanmland satrdan sonra tanmlanan metotlar iin
geerlidir.*/
ctx.strokeStyle = #D8CFFF;
ctx.lineWidth = 1;
for (var y = 0; y <= 150; y += 10) {
ctx.beginPath();
ctx.moveTo(0, y);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 210
210 HER YNYLE HTML5
ctx.lineTo(300, y);
ctx.stroke();
}
for (var x = 0; x <= 300; x += 10) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 150);
ctx.stroke();
}
ctx.rotate(Math.PI / 4); // 450
/*rotate() metodu afladaki metotlarn izdirecei grafikler iin geerlidir*/
ctx.strokeStyle = black;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 0);
ctx.lineTo(300, 150);
ctx.lineTo(0, 150);
ctx.closePath();
ctx.stroke();
ctx.fillRect(100, 10, 50, 50);
}
</script>
</head>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 211
CANVAS 211
Ekran grnts:
translate()
izim metotlarnn orijin noktas olarak canvas elemann sol st kflesini (0,0) kullandn biliyorsunuz. izim metotlar tarafndan varsaylan olarak kullanlan bu
orijin noktasn deifltirmek iin translate() metodu kullanlr. translate() metodu ile tanmlanan yeni nokta izim metotlar tarafndan canvas orijin noktas
(0,0) olarak kullanlr.
Kullanm: context.translate(x,y)
x, y parametreleri canvas(0,0) sol st kflesine gre (varsaylan orijin noktas) yeni

bir orijin noktas tanmlamak iin kullanlr.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>translate()</title>
var ctx =
ctx.lineWidth = 1;
for (var y = 0; y <= 150; y += 10) {
ctx.beginPath();
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 212
212 HER YNYLE HTML5
ctx.moveTo(0, y);
ctx.lineTo(400, y);
ctx.stroke();
}
for (var x = 0; x <= 400; x += 10) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 150);
ctx.stroke();
}
ctx.fillRect(20, 20, 100, 60);
// Yeni bir orijin noktas tanmlayalm;
ctx.translate(180, 40);
// Yeni orijin noktasna gre bir dikdrtgen izdirelim...
}
</script>
</head>
</canvas>
</body>
</html>
Ekran grntsne zerinde iflaretlemeler yaparak bakalm.
transform(), setTransform()
transform() metodu, transformasyon matrisi (affine transform) ile grafikler ze-
rinde dnflm ifllemleri yapmak iin kullanlr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 213
CANVAS 213
setTransform() metodu, transform() metodu ile ayn parametreleri alr ve transformasyon matrisini varsaylan haline geri dndrdkten (resetledikten) sonra parametre olarak girilen matris deerleri ile yeni bir dnflm ifllemi yapar.
Aflada, bu metotlar ile kullanlacak (3*3) matris grnmektedir.

m11
m21
dx
m12
m22
dy
context2d.transform(m11,m12,m21,m22,dx,dy)
context2d.setTransform(m11,m12,m21,m22,dx,dy)
Aflada temel transform ifllemleri iin kullanlacak matris formatlar verilmifltir.

Rotation
cos()
sin()
sin()
cos()
context2d.transform(cos(a),sin(a),-sin(a),cos(a),0,0)
a parametresi, dndrme asdr.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>transform()</title>
var ctx =
ctx.lineWidth = 1;
for (var y = 0; y <= 150; y += 10) {
ctx.beginPath();
ctx.moveTo(0, y);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 214
214 HER YNYLE HTML5
ctx.lineTo(300, y);
ctx.stroke();
}
for (var x = 0; x <= 300; x += 10) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 150);
ctx.stroke();
}
var sin = Math.sin(Math.PI / 9);
var cos = Math.cos(Math.PI / 9);
ctx.transform(cos, sin, -sin, cos, 0, 0);
ctx.fillRect(100, 20, 100, 50);
}
</script>
</head>
</canvas>
</body>
</html>
Ekran grnts:
Dndrme iflleminde orijin noktas varsaylan olarak canvas(0,0) olacaktr.
Scale
sx
sy
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 215
CANVAS 215
context2d.transform(sx,0,0,sy,0,0)
sx parametresi, izim metotlar iin tanmlanan yatay deerler iin bir lekleme
katsay tanmlarken, sy parametresi dikey deerler iin bir lekleme katsays ta-
nmlar.
Translate
1
tx
ty
context2d.transform(1,0,0,1,tx,ty)
tx, ty parametreleri canvas(0,0) sol st kflesine gre (varsaylan orijin noktas)
yeni bir orijin noktas tanmlamak iin kullanlr. Yukardaki transformasyon matris kullanlarak eme (skew) ifllemleri de yaplabilir.
Canvas zerinde Metin fllemleri
Context2d nesnesi zerinde metin alanlar oluflturabiliriz. context2d nesnesinin
tanmlad metin zellikleri ve metotlarna bakalm.
font, textAlgn ve textBaselne

Afladaki zellikler tanmlandklar satrdan sonra geerli olacaklardr. Afladaki
zellikler okunabilir ve yazlabilir zelliklerdir.
font zellii ile canvas zerine eklenecek metinler iin font (yaz tipi) ve size
(yaz boyutu) tanmlamalar yapabilirsiniz. Bu zelliin varsaylan deeri 10px
sans-serif fleklindedir. Bu zellik, CSS font zellii ile ayn sz dizimini ve de-
erleri kullanr.
Kullanm: context2d.font[=value]
rnek: ctx.font = italic 10px Arial;
textAlign zellii; tanmlanan noktaya gre yaznn nasl konumlandrlacan

ayarlamak iin kullanlr. Bu zellik start, end, left, right, center deerlerinden birini alr.
start: Varsaylan deer, canvas eleman iin tanmlanan yaz yn (dir zellii ile) soldan saa doru ise metnin sol kenar metot tarafndan tanmlanan
noktaya (canvas zerinde yazya bafllang noktas) hizalanr. Eer canvas ele-
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 216
216 HER YNYLE HTML5
man iin tanmlanan yaz yn (dir zellii ile) sadan sola doru ise metinin
sa kenar metot tarafndan tanmlanan noktaya (canvas zerinde yazya bafllang noktas) hizalanr.
end: Canvas eleman iin tanmlanan yaz yn (dir zellii ile) soldan saa
doru ise metinin sa kenar metot tarafndan tanmlanan noktaya (canvas zerinde yazya bafllang noktas) hizalanr. Eer canvas eleman iin tanmlanan
yaz yn (dir zellii ile) sadan sola doru ise metinin sol kenar metot tarafndan tanmlanan noktaya (canvas zerinde yazya bafllang noktas) hizalanr.
left: Metnin sol kenar metot tarafndan tanmlanan bafllang noktasna hizalanr.
right: Metnin sa kenar metot tarafndan tanmlanan bafllang noktasna hizalanr.
center: Metnin orta noktas metot tarafndan tanmlanan bafllang noktasna

konumlandrlr.
Kullanm: context2d.textAlign[=value]
rnek:
<!DOCTYPE html>
<html>
<head>
<title>textAlign()</title>
<style>
canvas
{
}
</style>
var renkler = [red, blue, maroon, #9DDAF5, #F516BD];
var ctx =
ctx.font = 15px calibri;
// Metin1 textAlign:start(Varsaylan)
ctx.fillText(Metin1, 20, 20);

ciz(ctx, 20, 20);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 217
CANVAS 217
// Metin2 textAlign:end
ctx.textAlign = end;
ciz(ctx, 120, 50);
// Metin3 textAlign:left
ctx.textAlign = left;
ctx.fillText(Metin3,150, 80);
ciz(ctx, 150, 80);
// Metin4 textAlign:right
ctx.textAlign = right;
ciz(ctx, 240, 105);
// Metin5 textAlign:center
ctx.textAlign = center;
ciz(ctx, 260, 130);
}
var i = 0;
var ciz = function (ctx, x, y) {
/*Buradaki fonksiyon Metinlerin canvas zerine hangi noktadan bafllanarak

yerlefltirildiini (Bafllang noktasn) grsel olarak grebilmeniz iin izgiler
oluflturuyor.*/
ctx.strokeStyle = renkler[i];
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 150);
ctx.moveTo(0, y);
ctx.lineTo(300, y);
ctx.stroke();
i++;
}
</script>
</head>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 218
218 HER YNYLE HTML5
Grsel olarak sonuca bakalm.
Yukardaki metotta bafllang noktalarna gre metnin nasl hizaland gsterilmektedir. Siyah ember ierisine alnan noktalar yaz metotlarnn kulland bafllang noktalardr.
textBaseline zellii ile satr taban izgilerinin nasl hizalanacan ayarlayabilirsiniz. Ald deerler: top, hanging, middle, alphabetic, ideographic, bottomdr.
Varsaylan deer, alphabeticdir.
fllText() ve strokeText()
fillText() metodu; fillStyle zellii ile tanmlanan rengi kullanarak ve tanmlanan bafllang noktasn referans alarak canvas zerine metin yazdrmaya
yarar.
syrokeText() metodu; strokeStyle zellii ile tanmlanan rengi kullanarak
ve tanmlanan bafllang noktasn referans alarak canvas zerine metin yazdrmaya yarar.
fillText() metodu metni dolgu izimi ile olufltururken strokeText() meto-
du metni kenarlk izimi ile oluflturur.

Kullanmlar:
context2d.fillText(text,x,y [,maxWidth])
context2d.strokeText(text,x,y [,maxWidth])
text parametresi; yazdrlacak metni, x, y parametreleri; metin yazdrlrken referans

alnacak bafllang noktasn ayarlar. stee bal olan maxWidth parametresi ile me-
tin iin maksimum bir genifllik tanmlayabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 219
CANVAS 219
<head>
<title>fillText(),strpkeText()</title>
<style>
canvas
{
}
</style>
var renkler = [red, blue, maroon, #9DDAF5, #F516BD];
var ctx =
ctx.font = italic 200 38px/4 calibri;
ctx.strokeStyle = blue;
ctx.fillText(Canvas Uygulamalar, 10, 40);
ctx.strokeText(Her Ynyle HTML5,10,100);
}
</script>
</head>
</canvas>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 220
220 HER YNYLE HTML5
measureText()
Bu metot ierisinde tanmlanan metnin geniflliini saklayan canvasTextMetrics

nesnesi dndrr. Bu metot ierisinde tanmlanan metnin genifllii font zelliine
atanan deerler baz alnarak bulunur.
Kullanm:
metrics=context2d.measureText(text)
metrics.width
rnek:
<!DOCTYPE html>
<html>
<head>
<title>measureText()</title>
<style>
canvas
{
border: 1px solid gray;
}
</style>
var init = function () {
var ctx =
document.querySelector(#canvas).getContext(2d);
ctx.fillStyle = #54FF05;
ctx.strokeStyle = rgb(0,0,255);
ctx.font = italic bold 12px/2 calibri;
/*font zelliinin ald deerler ve sz dizimi CSS font zellii ile ayndr.
font:[font-style||font-variant||font-weight]?font-size[/line-height]? font-family
*/
var ctMetrics = ctx.measureText(Javascript Patterns !);

console.log(ctMetrics.width);
// Sonu:100px
}
</script>
</head>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 221
CANVAS 221
</canvas>
</body>
</html>
Resimlerle alflmak
Canvas eleman zerine harici bir resim dosyasn izdirebilirsiniz. Context2d nesnesi resim ifllemleri iin drawImage() metodunu tanmlar (Bu metodu kullanarak
canvas eleman zerine bir video elemann ya da baflka bir canvas eleman ieriini
izdirebilirsiniz.)
drawImage()
context2d nesnesi zerine harici bir resmi izdirmek iin kullanlr. Bu metot; 3,
5 ve 9 parametreli olarak kullanlabilir. Aflada kullanm flekilleri ve parametrele-
rinin aklamalar bulunmaktadr.
context2d.drawImage(image,dx,dy)
context2d.drawImage(image,dx,dy,dw,dh)
context2d .drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
(dx, dy) parametreleri; canvas zerinde resmin sol kflesinin yerlefltirilecei noktay ayarlar. (dw, dh) parametreleri; canvas zerine yerlefltirilecek resmin geniflliini ve yksekliini ayarlamak iin kullanlr.
(sx, sy) parametreleri ile kaynak resimden alnacak blgenin sol st kflesi tanmlanrken, (sw,sh) parametreleri ile kaynak resimden alnacak blgenin genifllii ve
ykseklii ayarlanr.
Metot parametrelerinin daha iyi anlafllmas iin grsel olarak gsterelim.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 222
222 HER YNYLE HTML5
rnek:
<!DOCTYPE html>
<html>
<head>
<title>drawImage()</title>
var ctx =
var img = new Image();
img.src = seman.png;
/*Yeni bir img nesnesi oluflturduk ve src zellii ile kaynak resmi tanmladk*/
img.onload = function () {
/*Firefox,IEde sorun karmamas adna drawImage() metodunu canvas

zerine izdireceimiz resmin onload olaynda kullanmamz gerekir.*/
ctx.drawImage(img, 50, 20, 145, 120);

// context2d.drawImage(image,dx,dy,dw,dh)
}
ctx.lineWidth = 1;
for (var y = 0; y <= 150; y += 10) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(300, y);
ctx.stroke();
}
for (var x = 0; x <= 300; x += 10) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 150);
ctx.stroke();
}
}
</script>
</head>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 223
CANVAS 223
Ekran grnts:
Dier bir rneimize geelim bu rnek ile aslnda bir puzzle oyununun temellerini atmfl olacaz. (800*400) px boyutlarnda bir resmimimiz olsun. Bu resim zerinde
32 tane nokta tanmlyoruz. Aslnda bu noktalar resmi 32 eflit paraya blmemizi salayacak.
Afladaki resimde gsterilen koordinatlar iinde bulunduklar karenin sol st kflesinin koordinatlardr. Aslnda biz resmi gerekte paralamfl felan deiliz. Fakat alflma annda drawImage() metodu ile afladaki resim paralarndan herhangi birini
alp canvas zerindeki herhangi bir blme izdireceiz. Afladaki resmi inceleyiniz.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 224
224 HER YNYLE HTML5
Aslnda yaplan ifllem drawImage() metoduyla alnabilecek 32 eflit resim paras tanmlanmaktr. Resmi 32 eflit para olarak dflndmzden dolay canvas elemannda 32 eflit paraya blnmfl gibi dflneceiz. Resim ve canvas elemanlarnn
boyutlar ayn olacak ve bu elemanlarn ikisinide 32 eflit para fleklinde dflneceiz.
Her bir parann sol st kflesinin koordinatlar resimdeki koordinatlar olacaktr.
lk nce bu koordinatlar saklayan bir dizi oluflturalm.
var cor = [];
for (var y = 0; y <= 300; y += 100) {
for (var x = 0; x <= 700; x += 100) {
cor.push([x, y, x + 100, y + 100]);
}
}
Bu dizi ierisine varsaydmz 32 eflit parann sol-st ve sa-alt noktalarnn kordinatlarn atayalm. Dizinin durumu aflada grnmektedir.
[[0, 0, 100, 100], [100, 0, 200, 100], [200, 0, 300, 100], [300, 0, 400,
100], [400, 0, 500, 100], [500, 0, 600, 100], [600, 0, 700, 100], ...
Yukardaki dizi ierisindeki alt dizilerin sadece 0. ve 1. elemanlar kullanlacak.

Yaptmz ifllem ile canvas ve resim zerinde 32 nokta tanmladk. Aslnda bu
noktalarn oluflan karelerin sol st kflelerini tanmladklarn dflnrsek 32 eflit
alan tanmladk diyebiliriz. Bu dizide ilk parann (Aflada konum olarak sz edeceiz) index numaras 0 olacaktr.
0-31 deerlerini ieren iki tane dizi tanmlyoruz.
var corSrc = [];
var corDes = [];
for (var i = 0; i < 32; i++) {

corSrc.push(i);
corDes.push(i);
}
fiimdi algoritmay nasl kuracamza bakalm.

Rasgele iki tane say retilmesini salayacaz ve bu saylarn birincisi resim zerinden drawImage() metoduyla alnacak parann konumu tanmlayacak dieri ise canvas zerinde resmin izilecei konumu tanmlayacak. Bu bulunan saylarn corSrc,
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 225
CANVAS 225
corDes dizilerinde olup olmadna bakacaz. Eer yoksa bu saylar daha nce kul-
landmzdan yeni rasgele iki say retilmesini salayacaz. Eer bu saylar belirtilen dizilerde varsa bu saylar live[] isimli diziye atayp belirtilen saylar corSrc,
corDes dizilerinden sileceiz (0-31 arasnda tekrar ayn sayy kullanmamak iin).
Sonu olarak bu saylar index numaras olarak kullanp cor[] dizisinden iki tane konum elde etmifl olacaz. Her defasnda bulunan bu ift deerler live[] dizisine alt
dizi olarak eklenecek. Ve sonu olarak live[] dizisi ierisine drawImage() metodunun kullanaca 32 farkl (sx, sy), (dx, dy) deeri atanmfl olacak.
Kodun tamam flyle olacaktr:
<!DOCTYPE html>
<html>
<head>
<title>Puzzle Image</title>
var cor = [];
var corSrc = [];
var corDes = [];
var img;
var ctx;
ctx = document.getElementsByTagName(canvas)[0].getContext(2d);
for (var y = 0; y <= 300; y += 100) {
for (var x = 0; x <= 700; x += 100) {
cor.push([x, y, x + 100, y + 100]);
}
}
for (var i = 0; i < 32; i++) {
corSrc.push(i);
corDes.push(i);
}
random();
}
var live = [];
var putImage = function () {
for (var i = 0; i < 32; i++) {
ctx.drawImage(document.getElementById(res),
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 226
226 HER YNYLE HTML5
cor[live[i][0]][0], cor[live[i][0]][1], 100, 100,

cor[live[i][1]][0], cor[live[i][1]][1], 100, 100);
/*
context2d .drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
/*
*/
}
var random = function () {
while (true) {
Bu dng live[] dizisi ierisinde 32 tane 2 elemanl farkl alt dizi olufluncaya kadar devam edecektir.
*/
if (live.length == 32) {
putImage();
return;
}
var rnd = Math.round(Math.random() * 31); // Source
var rnd_ = Math.round(Math.random() * 31); // Destination
if ((corSrc.indexOf(rnd) !== -1) &&
(corDes.indexOf(rnd_) !== -1)) {
live.push([rnd, rnd_]);
corSrc.splice(corSrc.indexOf(rnd), 1);
corDes.splice(corDes.indexOf(rnd_), 1);
}
}
}
</script>
</head>
<canvas id=cvs width=800 height=400>
</canvas>
<img id=res src=parca.png style=visibility: hidden; />
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 227
CANVAS 227
Ekran grnts:
Sonu olarak sayfa her yklendiinde 32 eflit resim parasnn canvas zerinde
farkl alanlara izildiini grmfl olacaksnz. Bu rnee bir sonraki bafllkta tekrar
dneceiz.
Pxel Manpulaton
Canvas eleman zerindeki piksel renk bilgilerine byte seviyesinde ulaflabilir ve bu
deerlerle ifllemler yapabilirsiniz.
createImageData()
Belirtilen boyutlarda bir ImageData nesnesi oluflturmak iin kullanlr. ImageData

nesnesi, varsaylan olarak fleffaf siyah renkli oluflturulur. Piksel dzenleme (pixel
manipulation) ifllemlerinde renk RGBA formatnda kullanlr.
Kullanm: imagedata = context2d.createImageData(sw, sh)
sw, sh parametreleri oluflturulacak ImageData nesnesinin genifllii ve yksekliini
ayarlar.
ImageData nesnesi afladaki zelliklere sahiptir.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 228
228 HER YNYLE HTML5
zellik
data
height
width
Aklama
ImageData nesnesinin tanmland alandaki piksellerin RGBA formatnda

renk deerlerini ieren CanvasPixelArray tipinde bir dizi dndrr.
ImageData nesnesinin px cinsinden ykseklii.
ImageData nesnesinin px cinsinden genifllii.
Konunun daha iyi anlafllmas iin 4px*2 px bir ImageData nesnesinin pixel bilgilerinin CanvasPixelArray dizisi ierisinde hangi srayla ve nasl saklandna bakalm.
Yukardaki flekilde, kanallar (red, green, blue, alpha) ierisine yazlan saysal deerler belirtilen kanaln saklad deerin CanvasPixelArray dizisi ierisindeki
yerini (index numarasn) gsterir.
Dikkat edilirse ImageData nesnesinin sol st kflesinden bafllamak kaydyla her bir
pikselin renk deeri 4 kanal ile ifade edilmektedir. Yani CanvasPixelArray dizisinin ilk 4 deeri ilk pikselin renk deerini tanmlar. Dizi ierisinde 0 indeks numaral elemandan bafllamak kaydyla her bir 4 deer bir pikselin renk deerini tanmlar.
Her bir pikselin renk deeri RGBA() formatnda tanmlanr. Her bir renk kanal alpha
kanal dahil 0-255 arasnda bir deer alabilir.
NOT
CanvasPixelArray dizisinin length zelliini kullanarak dizi ierisindeki eleman

saysn renebilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>createImageData()</title>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 229
CANVAS 229

var ctx =
var imageData = ctx.createImageData(60, 20);
console.log(imageData.data);
// Sonu: [CanvasPixelArray] [0,0,0,0,0,...]
console.log(imageData.data.length);
// Sonu:4800
}
</script>
</head>
</canvas>
</body>
</html>
createImageData() metodunun belirtilen boyutlarda fleffaf siyah renkte bir ImageData nesnesi oluflturduunu daha nce sylemifltik. [CanvasPixelArray] dizisine
bakarsak;
[CanvasPixelArray]
0.pixel 1.pixel 2.pixel

[0,0,0,0,0,0,0,0,0,0,0,0,....................]
Buradaki ilk drt deer sol st kfledeki 0 index numaral ilk pikselin renk deerini tanmlar. Her bir pixel iin yaplan 0,0,0,0 rgba tanmlamas fleffaf siyah rengi temsil eder.
NOT
Oluflturulan ImageData nesnesinin boyutu 60*20 idi. Bu durumda bu nesne iinde

1200 tane pixel bulunacaktr. Her bir pikselin renk deeri dizi ierisinde 4 say ile
temsil edildiinden CanvasPixelArray dizisinin eleman says 4800 olur.
getImageData ()
Canvas zerinde; referans olarak tanmlanan dikdrtgen iinde bulunan piksellerin
sahip olduklar renk deerlerini saklayan bir ImageData nesnesi elde etmek iin
kullanlr.
Kullanm: imagedata = context2d.getImageData(sx, sy, sw, sh)
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 230
230 HER YNYLE HTML5
(sx,sy) parametreleri ile referans dikdrtgenin sol st kflesi, (sw,sh) parametreleri ile dikdrtgenin (alann) genifllii ve yksekliini tanmlanr. Burada yanlfl anlamayn. Bu metot bir dikdrtgen izmez. Sadece tanmlanan dikdrtgenin iinde
kalan piksellerin renk bilgilerini saklayan ImageData nesnesi oluflturur.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>getImageData()</title>
var dizi = [];
var ctx =
img.src = get.jpg;
ctx.drawImage(img, 0, 0);
var _gImageData = ctx.getImageData(100, 0, 100, 50);
for (var i = 0; i < 20; i++) {
/*ImageData nesnesinin data zellii geriye CanvasPixelArray tipinde

bir dizi dndryordu. Bu dizinin ilk 20 elemann yani ilk 5 pikselinin
renk deerlerini kt olarak gstermek iin bir baflka dizi ierisine
atyoruz*/
dizi.push(_gImageData.data[i]);
}
console.log(ilk 5 pikselin renk deerleri);
console.log(dizi);
console.log(CanvasPixelArray dizisi ierisindeki
eleman says);
console.log(_gImageData.data.length);
console.log(CanvasPixelArray dizisi);
console.log(_gImageData.data);
}
}
</script>
</head>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 231
CANVAS 231
</canvas>
</body>
</html>
putImageData()
Bir ImageData nesnesini canvas zerine izdirmek iin kullanlan metodtur. ImageData nesnesi createImageData() metoduyla oluflturulmufl ya da getImageData()
metoduyla canvas zerinden elde edilmifl olabilir.
Kullanm: context2d.putImageData(imagedata,dx,dy)
imageData parametresi ile ImageData nesnesi tanmlanr. (dx, dy) parametreleri,

ImageData nesnesinin sol kflesinin yerlefltirilecei canvas zerindeki noktay tanmlar. Yukardaki parametrelerin yannda istee bal olarak dirtyX, dirtyY,
dirtyWidth, dirtyHeight parametreleri de kullanlabilir.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 232
232 HER YNYLE HTML5
Fakat bu parametreler Firefox tarafndan flu an iin desteklenmemektedir.

rnek:
<!DOCTYPE html>
<html>
<head>
<title>putImageData()</title>
canvas{
{border:1px solid gray;
}
</style>
var dizi = [];
var ctx =
// lk nce 100*50 boyutunda bir ImageData nesnesi oluflturalm;
var IData = ctx.createImageData(200, 80);
/*Yukarda oluflturduumuz IData nesnesinde 200*80 =16000 tane piksel
olacaktr. Ayn zamanda her pikselin renk deeri 4 tamsay ile tanmlandndan
IData.data(CanvasPixelArray dizisi) 64000 elemanl olacaktr*/
for (var i = 0; i < IData.data.length; i += 4) {
/*Oluflturduum bu dng ile ImageData nesnesinin data zellii ile

tanmlanan dizinin her 4 elemanna ayr ayr ulaflp bu elemanlar iin
(son elemana 255 tanmlamas yapmak kaydyla) 0-255 arasnda rasgele
bir say tanmlamas yapacaz. Belirtilen dizi ierisindeki her 4 elemannn
deeri bir pikselin rengini tanmladndan sonuta rasgele bir renk deeri
elde etmifl olurum.*/
/*Red Kanal*/
IData.data[i] = Math.round(255 * Math.random());

// Blue kanal
IData.data[i + 1] = Math.round(255 * Math.random());

// Green kanal
IData.data[i + 2] = Math.round(255 * Math.random());

// Alpha kanal(Bu kanal iin deer srekli 255 olacak, fleffaflk yok)
IData.data[i + 3] = 255;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 233
CANVAS 233
ctx.putImageData(IData,50,20);
}
</script>
</head>
</canvas>
</body>
</html>
Yukardaki rnekte 200*80 px boyutlarnda bir ImageData nesnesi oluflturduk ve

bu nesnenin her pikseli iin rasgele bir renk tanmlamas yaptk ve daha sonra bu
nesneyi putImageData() metoduyla canvas zerine izdirdik. Sonuta canvas zerinde farkl renklerdeki piksellerin birleflmesi ile oluflan 200*80 px boyutlarnda bir
alan elde etmifl oluruz.
Ekran grnts:
Resimlerle alflmak isimli blmde bir puzzle oyununun temelini atmfltk. fiimdi
yazacamz kodlarla kullancnn karflk bir flekilde yklenen bu resim paralarnn konumunu deifltirebilmesini salayalm.
Kodlarmzn en son durumunu hatrlayalm...
<!DOCTYPE html>
<html>
<head>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 234
234 HER YNYLE HTML5
<title>Puzzle Image</title>
var cor = [];
var corSrc = [];
var corDes = [];
var img;
var ctx;
ctx = document.getElementsByTagName(canvas)[0].getContext(2d);
for (var y = 0; y <= 300; y += 100) {
for (var x = 0; x <= 700; x += 100) {
cor.push([x, y, x + 100, y + 100]);
}
}
for (var i = 0; i < 32; i++) {
corSrc.push(i);
corDes.push(i);
}
random();
}
var live = [];
var putImage = function () {
for (var i = 0; i < 32; i++) {
ctx.drawImage(document.getElementById(res),
cor[live[i][0]][0], cor[live[i][0]][1], 100, 100, cor[live[i][1]][0],
cor[live[i][1]][1], 100, 100);
}
}
var random = function () {
while (true) {
if (live.length == 32) {
putImage();
return;
}
var rnd = Math.round(Math.random() * 31);
var rnd_ = Math.round(Math.random() * 31);
if ((corSrc.indexOf(rnd) !== -1)
&& (corDes.indexOf(rnd_) !== -1)) {
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 235
CANVAS 235
live.push([rnd, rnd_]);
corSrc.splice(corSrc.indexOf(rnd), 1);
corDes.splice(corDes.indexOf(rnd_), 1);
}
</script>
</head>
</canvas>
<img id=res src=parca.png style=visibility: hidden; />
</body>
</html>
fiimdi yeni kodlar yazmaya bafllayalm...

Kullanc Mouse ile konumu deifltirilecek iki resme srasyla tkladnda, bu resimlerin konumu deifltirilecektir. lk nce yapmamz gereken kullancnn Mouseun sol tuflu ile hangi resimler zerinde tkladn bulmaktr (Mouse iflaretisinin
konumunu bulmak).
lk nce canvas elemannn click olay iin bir olay dinleyicisi ekleyelim; (init()
fonksiyonu ierisine)
document.querySelector(canvas).addEventListener(click,mClick,false);
Canvas zerinde kullanc Mouseun sol tufluna bastnda mClick isimli fonksiyon
alflacak.
mClick fonksiyonu ve dier deiflkenler;
var ch = [];
var durum = 0;
var mClick = function (event) {

durum++;
var evt = event || window.event;
var mPx = evt.clientX - document.querySelector(canvas).offsetLeft;

var mPy = evt.clientY - document.querySelector(canvas).offsetTop;
for (var i = 0; i < cor.length; i++) {
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 236
236 HER YNYLE HTML5

/*Mouse iflaretisinin hangi resim paras zerinde olduunu bulmak iin for dngs oluflturuldu.
cor[] dizisi ierisindeki alt dizilerde bulunan ilk iki eleman daha nce kullanmfltk. cor[] dizisi
ierisindeki alt dizilerin saklad deerlerin ilk ikisi tanmlanan karenin sol st kflesinin dier
ikisi de karenin sa alt kflesinin koordinatlarn saklar.*/
if (mPx > cor[i][0] && mPx <= cor[i][2]

&& mPy > cor[i][1] && mPy <= cor[i][3]) {
ch.push(cor[i][0], cor[i][1]);
}
}
switch (durum) {
case 1:
ctx.strokeRect(ch[0], ch[1], 100, 100);
break;
case 2:
ctx.strokeRect(ch[2], ch[3], 100, 100);
var IData = ctx.getImageData(ch[0], ch[1], 100, 100);
var IData_ = ctx.getImageData(ch[2], ch[3], 100, 100);
ctx.putImageData(IData, ch[2], ch[3]);
ctx.putImageData(IData_, ch[0], ch[1]);
durum = 0;
ch = [];
break;
}
}
Yukardaki kodlarda ekledikten sonra artk puzzle oyununu tamamlamfl duruma

geldik.
fiimdi basit bir paint uygulmas yapalm. Kullanc, canvas zerine Mouse ile dikdrtgen, amber, izgi izebilsin ve canvas zerinde silme ifllemi yapabilsin.
Uygulamay genel olarak flyle zetleyelim...
Body elemannn ocuu durumunda olan div#paint eleman ierisine bir canvas ele-
man yerlefltirdik. Burada tanmlanan orijinal canvas elemandr (Neden orijinal dediimizi biraz sonra daha iyi anlayacaksnz). Bu orijinal canvas elemannn dflnda kullancnn izimlerini yapabilmesi iin programatik olarak bir canvas eleman daha
oluflturduk (buffer canvas). Programatik olarak oluflturduumuz bu canvas elemann
orijinal canvas elemannn tam zerine gelecek flekilde konumlandrdk (fiunu hatrlamanz isterim: Bir canvas eleman oluflturulduunda varsaylan rengi siyah ve fleffaf
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 237
CANVAS 237
olacaktr). Bu canvas elemannn zerine yaplan izimler mouseup olaynda orijinal

canvas eleman zerine izdirilecek ve aslnda genel mantmz bu olacak.
<!DOCTYPE html>
<html>
<head>
<title>Basit Paint Uygulamas</title>
div#paint
{
position: relative;
width: 800px;
height: 400px;
}
#canvas2
{
position: absolute;
left: 0px;
top: 0px;
}
div#arac
{
position: absolute;
top: 0px;
right: -32px;
background-color: #d6d6d6;
width: 30px;
height: 402px;
text-align: center;
}
div#arac img
{
margin-top:5px;
}
div#arac #maske
{
width:30px;
height:30px;
position:absolute;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 238
238 HER YNYLE HTML5
opacity:0.6;
top:0px;
left:0px;
}
</style>
var canvas1, canvas2, paint;
var ctx1, ctx2;
var sx, sy, ex, ey;
var durum = false;
/*canvas zerinde mousedown olaynn gereklefltiini tespit edebilmek iin durum

deiflkenini kullanacaz*/
var maske;
var arac = line;
/*Kullanc canvas zerine izim yapmak iin line, rect, ellipse aralarndan birisini kullanabilir.
Sayfa yklendiinde varsaylan ara line aracdr*/

paint = document.querySelector(div#paint);
canvas1 = document.getElementsByTagName(canvas)[0];
ctx1 = canvas1.getContext(2d);
canvas2 = document.createElement(canvas);
ctx2 = canvas2.getContext(2d);
canvas2.id = canvas2;
canvas2.width = canvas1.width;
canvas2.height = canvas1.height;
paint.appendChild(canvas2);
/*canvas2 adyla yeni bir canvas eleman (buffer canvas) oluflturuldu ve paint referansl
elemannn ierisine appendChild() metoduyla eklendi*/
tool,
tool,
tool,
tool,
canvas2.addEventListener(mousedown, mDown, false);

canvas2.addEventListener(mousemove, mMove, false);
canvas2.addEventListener(mouseup, mUp, false);
document.getElementsByTagName(img)[0].addEventListener(click,
false);
false);
false);
false);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 239
CANVAS 239
maske = document.getElementById(maske);
}
var mDown = function (event) {
durum = true;
/*Kullancnn izim ifllemine bafllamas ve devam etmesi iin mousedown olaynn

gerekleflmesi/gereklefliyor olmas gerekir. mousedown olaynn olufltuunu durum deiflkeni
ile anlayacaz*/

sx = evt.clientX - paint.offsetLeft;
sy = evt.clientY - paint.offsetTop;
/*canvas eleman zerinde mousedown olay gereklefltiinde mouse iflaretisinin bulunduu

pozisyon bilgisini elde ettik */
}
var mMove = function (event) {
/*Eer mousedown olayndan sonra tuflu basl tutup fareyi hareket ettirirsek, bu durumda
seilen araca gre canvas zerine izim ifllemi gereklefltirilir. izim ifllemi canvas2 eleman
(buffer canvas) zerine yaplmaktadr.*/
if (durum) {
ex = evt.clientX - paint.offsetLeft;
ey = evt.clientY - paint.offsetTop;
/*Her mousemove olaynda fare iflaretisinin konumu tekrar tespit ediliyor.*/
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
/*Afladaki aralar her mousemove olaynda alflr. Bu durumda rnein; bir dikdrtgen
izeceksiniz, Mouseu her hareket ettirdiinizde canvas zerine sol st kflesi sabit (sx,sy) yeni
bir dikdrtgen izilir.flte bu durumun nne gemek ve sadece mouse tufluna bastnz nokta
ile mouse tuflunu braktnz nokta arasnda bir dikdrtgen izmek iin yukardaki clearRect()
metodunun her mousemove olay gereklefltiinde alflmas gerekir. Aslnda bu metot buffer
canvas elemann her mousemove olaynda temizler.*/
switch (arac) {
case line:
ctx2.beginPath();
ctx2.moveTo(sx, sy);
ctx2.lineTo(ex, ey);
ctx2.stroke();
break;
case rect:
ctx2.fillStyle = khaki;
ctx2.fillRect(sx, sy, ex - sx, ey - sy);
break;
case ellipse:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 240
240 HER YNYLE HTML5
Math.PI, true);
ctx2.beginPath();
ctx2.arc(sx, sy, Math.abs(sx - ex), 0, 2 *
ctx2.fillStyle = green;
ctx2.fill();
break;
}
var mUp = function (event) {
durum = false;
ctx1.drawImage(canvas2, 0, 0);
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
/*Mouse tuflunu serbest braktnzda, yani mouseup olay gereklefltiinde; drawImage()

metoduyla ctx2 ierisinde oluflan izim ctx1 zerine izdiriliyor ve tampon izim alan (ctx2)
clearRect() metoduyla temizleniyor.*/
}
var tool = function (event) {
var tool_ = evt.target;
arac = tool_.alt;
if (arac == delete) {
ctx1.clearRect(0, 0, 800, 400);
/*Kullanc delete tufluna bastnda canvas1 zerindeki tm grafikler silinecektir.*/
}
switch (arac) {
case line:
maske.style.top = 0px;
break;
case rect:
break;
case ellipse:
break;
case delete:
break;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 241
CANVAS 241
}
</script>
</head>
<div id=paint>
</canvas>
<div id=arac>
<img src=line.png alt=line />
<img src=rec.png alt=rect />
<img src=el.png alt=ellipse />
<img src=sil.png alt=delete />
<div id=maske></div>
</div>
</div>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 242
242 HER YNYLE HTML5
rnek: Bu rneimizde glen yz isimli basit bir oyun tasarlayacaz. Kodlarmz

yazarak ierisinde aklamalar yapalm.
<!DOCTYPE html>
<html>
<head>
<title>oyun_</title>
canvas#buffer
{
position: absolute;
left:8px;
top:8px;
}
input[type=text]
{
border:none;
font-family:Calibri;
font-size:16px;
}
a
{
background-color:#bbccff;
border:none;
font-size:16px;
text-decoration:none;
}
</style>
/*Oyunumuzda ana canvas elemanmzn dflnda sadece 1 tane buffer canvas elemann
programatik olarak oluflturup kullanacaz. Ana canvas ve buffer canvas elemanlarmz
420*240 boyutlarnda olacak. Ana canvas eleman zerine programatik olarak oluflturduumuz
buffer canvas elemann yerlefltireceiz. zet olarak ifllem admlar;
1. lk olarak ana canvas ve buffer canvas elemanlarnda resim yerlefltirirken ve mouse click
olaynda kullanacamz koordinat bilgilerini saklayacak bir dizi oluflturacaz. Bu dizi ile
beraber biz canvas elemann canvas(0,0) noktasndan bafllayarak 112 eflit (30px*30px)
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 243
CANVAS 243
paraya blnmfl gibi dflneceiz ve bu dizi ierisinde bu eflit paralarn(karelerin) sol st
ve sa alt noktalarnn koordinatlarn saklayacaz. Bu dizi ierisinde 112 alt dizi bulunacak.
Ana canvas eleman zerine sml.png,nosml.png resimlerini rasgele yerlefltirirken ve kullancnn
buffer canvas zerinde hangi kareye tkladn bulmak iin cort[] isimli diziyi kullanacaz.
2. Ana canvas eleman zerinde rasgele konumlara , 40 tane nosml.png ve 72 tane sml.png
resmi yerlefltireceiz.Sayfa her yklendiinde yukardaki resimlerin yerleri deiflecek.
Dolaysyla 112 resmin her defasnda rasgele yerlefltirildii bir canvas elemanmz olmufl
olacak.Peki bu ifllemi nasl yaptk diyeceksiniz ?
konum[] , live[] dizi deiflkenleri ve konumHesapla() fonksiyonu bu ifllem iin oluflturuldu.
3. Programatik olarak oluflturduumuz buffer canvas eleman zerine beyaz renkli bir dikdrtgen
ve buffer canvas zerinde 30*30 byklnde kareler oluflturacak flekilde bir zgara izdirdik.
Artk ana canvas zerine izdirdiimiz resimler buffer canvas eleman ile maskelenmifl oldu.
(sml.png,nosml.png resmileri gzkmyor)
4. Kullancnn mouse ile tklad konumda bulunan ana canvas eleman zerindeki resmi
gstermemiz gerekecek. Bu durumda eer kullancnn tklad karede nosml.png resmi ykl
ise oyun bitirilecek yani buffer canvas eleman zerindeki tm renk deerleri temizlenecek
(Buffer canvas zerine clearRect() metoduyla siyah fleffaf bir dikdrtgen izilecek), Eer
kullancnn tklad karede sml.png resmi ykl ise buffer canvas eleman zerinde hangi
kare ierisine tkladn bulup bu kare zerindeki renk deerlerini temizliyoruz (clearRect()
metoduyla siyah fleffaf bir kare izmifl olacaz). Dolaysyla sadece kullancnn tklad
kare altndaki sml.png resmini kullancya gstermifl olacaz.
5.Kullancnn oyun baflladktan sonra ka tane sml.png resmi atrdn renmesi iin (Oyun
puann) bir tane text eleman oluflturduk ve yukardaki mClick() fonksiyonu ile iliflkilendirdik.
Evet sonu olarak genel mantmz bu olmakla beraber size karflk gibi gelebilir. Aslnda
javascript ve canvas kullanlarak yaplan oyun tasarmlarnda iyi bir algoritma kurmanz flarttr.
Yani srkle brak programcl burada yoktur. Ne kadar iyi temel oluflturursanz, uygulamanzda
o kadar sade ve okunabilir olacaktr. Yukarda uygulamann genel hatlar anlatlmfltr. Kodlara
baktnzda bir bilgiyi elde etmek iin ok deiflik varyasyonlar kullandmz greceksiniz. Kod
satrlar daha iyi anlamanz iin baz yerlerde bilinli olarak uzatlmfltr .Afladaki kodu yazmanz
ve her satrn ne ifl yapt ile ilgili verdiim bilgiler flnda dflnmenizi tavsiye ederim.
/*Global deiflkenlerimizi tanmlayalm.*/
var cort = [];
/*cort[] isimli dizi deiflkeni ierisinde canvas elemannn sol st kflesinden bafllamak kaydyla
112 tane eflit karenin koordinatlarn tanmlayacaz. cort[] isimli dizi ierisine bakarsak;
cort=[[0,0,30,30],[30,0,60,30],]
Buradan dizi ierisinde 112 tane alt dizi olduunu ve bu alt diziler ierisinde karenin sol-st
kflesi ve sa-alt kflesinin saklandn grebilirsiniz.
[x,y,x+30,y+30] x,y deerleri karelerin sol-st kflesinin koordinatlardr.*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 244
244 HER YNYLE HTML5
var konum = [];
/*konum isimli dizi ierisinde [0,1,2,3,,111] fleklinde saylar saklyoruz.

Bu diziyi ne iin kullanacaz?
konumHesapla() isimli fonksiyonu 112 defa alfltrp 112 tane deiflik say elde edeceiz (Bu
saylar live[] isimli dizi ierisinde saklanacak) ve bu saylar index numaras olarak kullanp her
defasnda cort[] dizisi ierisinden 112 tane deiflik konum bilgisi elde etmifl olacaz. cort[] dizisi
ierisindeki bir konumu (cort[] alt dizisini/elemann) sadece 1 defa kullanmak iin konum[] isimli
diziye ihtiyacmz var. Yani flyle diyelim random(), round() fonksiyonlar yardmyla ile
0<=x<112 arasndan bir x says elde edince bu sayy konum[] isimli dizi ierisinden silip bu
saynn bir daha kullanlmasn engelliyoruz.*/
var cBuffer, ctxBuffer;

var live = [];
/*live[] dizisi konumHesapla() isimli fonksiyonun oluflturduu 112 deiflik sayy saklamak iin
kullanlacak*/
var tikCor, tikResult;
/*tikCor deiflkenini kullancnn tklad karenin tanml olduu cort[] dizi ierisindeki alt dizinin
index numarasn saklamak iin, tikResult deiflkenini ise kullancnn tklad karenin altna ana
canvas elemannda belirtilen konumda izili olan resim bilgisini elde etmek iin kullanacaz.*/
var say = 0;
/*Puan bilgisini ekrana yazdrmak iin say deiflkeni oluflturdum*/
var oyunDurum = true;
/*Oyun durum bilgisini elde etmek iin oyunDurum deiflkenini oluflturdum.*/
for (var y = 0; y <= 210; y += 30) {

for (x = 0; x <= 390; x += 30) {
cort.push([x, y, x + 30, y + 30]);
}
}
for (var i = 0; i < cort.length; i++) {
konum.push(i);
}
var ctx =
/*Oyunda kullanacam iki tane resim nesnesi oluflturdum ve src zellii(property) ile
bu nesnelere kaynak tanmlamas yaptm*/

img.src = sml.png;
var img_ = new Image();
img_.src = nosml.png;
/*cBuffer isimli canvas elemann createElement() metoduyla oluflturdum ve gerekli

tanmlamalar yaptm*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 245
CANVAS 245
cBuffer = document.createElement(canvas);
document.getElementById(txt).value = 0;
cBuffer.id = buffer;
cBuffer.width = ctx.canvas.width;
cBuffer.height = ctx.canvas.height;
document.body.appendChild(cBuffer);
ctxBuffer = cBuffer.getContext(2d);
ctxBuffer.strokeStyle = gray;
ctxBuffer.fillStyle = white;
ctxBuffer.fillRect(0, 0, 420, 240);
// cBuffer eleman iin click olay dinleyicisi ekledim
cBuffer.addEventListener(click, mClick, false);

/*cBuffer eleman zerinde [30px*30px] karelerini oluflturacak
zgaray oluflturalm */
for (var x = 0; x <= 420; x += 30) {

ctxBuffer.beginPath();
ctxBuffer.moveTo(x, 0);
ctxBuffer.lineTo(x, 240);
ctxBuffer.stroke();
}
for (var y = 0; y <= 240; y += 30) {
ctxBuffer.moveTo(0, y);
ctxBuffer.lineTo(420, y);
ctxBuffer.stroke();
}
/*ki resmin onload olaylarnn sonucunda ana canvas eleman zerine toplam 112 tane resim
yerlefltirmifl olacam*/
/*konumHesapla() fonksiyonunu 112 kere alfltrlarak live[] dizisi ierisinde 0 ile 111 arasndan
farkl 112 tane deer elde etmifl olurum*/
for (var i = 0; i < 112; i++) {

konumHesapla();
}
for (var i = 0; i < 72; i++) {
/*live[] dizisi ierisindeki ilk 72 deeri index numaralar olarak kullanp cort[] dizisinden elde
edeceim 72 farkl konuma sml.png resmini izdireceim.*/
ctx.drawImage(img, cort[live[i]][0], cort[live[i]][1]);
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 246
246 HER YNYLE HTML5
img_.onload = function () {
/*live[] dizisi ierisindeki son 40 deeri index numaralar olarak kullanp cort[] dizisinden elde
edeceim 40 farkl konuma nosml.png resmini izdireceim.*/
for (var i = 72; i < 112; i++) {

ctx.drawImage(img_, cort[live[i]][0], cort[live[i]][1]);
}
}
}
var konumHesapla = function () {
/*Bu fonksiyon 112 defa alfltrlacak ve sayfa her yklendiinde live[] dizisi ierisinde farkl
olarak sralanmfl 0 ile 111 arasndan deerler saklanmfl olacak*/
while (true) {
var rnd_ = Math.round(Math.random() * 111);
if (konum.indexOf(rnd_) != -1) {
live.push(rnd_);
konum.splice(konum.indexOf(rnd_), 1);
return ;
}
}
/*konumHesapla() isimli fonksiyonun grevini daha iyi anlamanz salayalm; rnein

konumHesapla() isimli fonksiyonun ilk alflmas; Bu durumda while() dngs ierisindeki
rnd_ deiflkeninin 15 deerini sakladn dflnelim 15 deeri konum[] isimli dizide aranacak
eer var ise (15 deerinin daha nce kullanlmad anlamna gelir) bu deer live dizisine
eklenir ve konum dizisinden silinir.
live=[15],
konum=[0,1,2,3,,14,16,,,,111], deerlerini alrlar ve return deyimi ile dngden klr.
Bu fonksiyunu 2. alflmasna bakalm;
rnd_ deiflkeninin tekrar 15 deeri elde ettiini dflnelim bu durumda bu deer artk konum[]
dizisi ierisinde olmayacandan while() dngs ile tekrar rasgele bir say elde edilerek
yukardaki admlar tekrar edilir. flte bylece konumHesapla() isimli fonksiyon her arldnda
live[] dizisi ierisine 0-111 arasndan farkl bir say eklenir.*/
var mClick = function (event) {

if (!oyunDurum) {
return;
}
var event = event || window.event;
var mouseX = event.clientX - cBuffer.offsetLeft;
var mouseY = event.clientY - cBuffer.offsetTop;
/*mouseClick olay gereklefltiindeki Mouse iflaretisinin konumunu elde ediyoruz.*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 247
CANVAS 247
for (var i = 0; i < cort.length; i++) {
/*click olay gereklefltiinde, Mouse iflaretisinin canvas zerinde tanml hangi kare zerine
olduunu bulmak iin bu dng oluflturuldu. tikCor deiflkeni kullancnn tklad karenin
tanml olduu cort[] dizi ierisindeki alt dizinin index numarasn elde etmemizi salar.*/
if (mouseX > cort[i][0] && mouseX <= cort[i][2] &&

mouseY > cort[i][1] && mouseY <= cort[i][3]) {
tikCor = i;
}
}
/*Yukarda mouse iflaretisinin bulunduu cort[] dizisi ierisindeki konum bilgisinin index
numarasn buldum. fiimdi, daha nce sylemifltim sayfa her yklendiinde live[] dizisi ierisinde
0 ile 111 dahil arasndaki saylar rasgele sralanyordu. Bu saylardan ilk 72 sinin kullanmyla
cort[] dizisinden elde edilen konumlara sml.png son 40nn kullanm ile cort[] dizisinden elde
edilen konumlara nosml.png resmi izdiriliyordu. O zaman live[] dizisi ierisindeki ilk 72 say
glen yz son 40 say ise alayan yz izdirmek iin kullandmz cort[] index numaralardr.
Eer tikCor deiflkeni ierisindeki say 72 eflit ve kkse bu durumda bu alanda glen yz
izilidir ve oyun devam etmelidir. Eer tikCor ierisindeki say 72den byk ise o zaman bu
alanda alayan yz izilidir ve oyun sonlanmaldr. */
tikResult = live.indexOf(tikCor);
if (tikResult >= 72) {
ctxBuffer.clearRect(0, 0, 420, 240);
for (var x = 0; x <= 420; x += 30) {
ctxBuffer.moveTo(x, 0);
ctxBuffer.lineTo(x, 240);
ctxBuffer.stroke();
}
for (var y = 0; y <= 240; y += 30) {
ctxBuffer.moveTo(0, y);
ctxBuffer.lineTo(420, y);
ctxBuffer.stroke();
}
document.getElementById(txt).value = Oyun Bitti
Toplam Puan: + say;
oyunDurum = false;
} else {
ctxBuffer.clearRect(cort[tikCor][0] + 1,
cort[tikCor][1] + 1, 28, 28);
say++;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 248
248 HER YNYLE HTML5
document.getElementById(txt).value = say;
}
</script>
</head>
</canvas><br />
<input type=text size=25 id=txt disabled />
<a href=oyun_.html>Tekrar Oyna !</a>
</body>
</html>
Oyunu tekrar oynamak iin sayfay tekrar yklemeniz ya da Tekrar Oyna! linkine tklamanz yeterli olacaktr. Tekrar Oyna! linki, sayfay tekrar taraycya ykleyecektir (Body eleman iin load olayn oluflturur).
Kullanlan resimler:
sml.png
nosml.png
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 249
CANVAS 249
Canvas ile Animasyon Temelleri

Canvas+JavaScript kullanarak basit ya da geliflmifl animasyonlar oluflturmanz
mmkndr. HTML5 CANVAS eleman ile animasyon oluflturmak isteyen birinin
flu an iin kullanabilecei herhangi bir program yoktur. Yani animasyonu oluflturacak kodlarn hepsi programc tarafndan dflnlerek elle yazlr. Bu durumda programcnn en azndan temel geometri ve matematik bilgilerine sahip olmas gerekir.
Canvas eleman ile animasyon (hareketli nesneler) oluflturmak iin izleyeceimiz
admlar flu flekildedir.
iz > Temizle > Gncelle
Ayrca baz uygulamalarda birden fazla Canvas elemann ana Canvas eleman zerinde tampon eleman olarak kullanabiliyoruz. Canvas+JavaScript ile programlama
yapmak bazlar iin klfetli gelebilir. Ben ayn dflncede deilim. nk programlama sadece hazr programlarn salad srkle-brak aralar ile yaplmamaldr.
Ayrca HTML5 Canvas+JavaScript ile yapacanz uygulamalar programlama gcnz arttracaktr.
Nesnelerin Yatay ya da Dikeyde Dz

Bir izgi zerinde Hareket Ettirilmesi
Nesneleri sadece bir eksende (yatayda ya da dikeyde) hareket ettirmek iin nesnelerin yatay ya da dikey koordinatlarn bir zamanlayc ile gncelleyip belirtilen
nesneyi Canvas eleman zerine tekrar izdirmemiz yeterli olacaktr.
Yatay eksende hareket:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 250
250 HER YNYLE HTML5
Dikey eksende hareket:
rnek:
<!DOCTYPE html>
<html>
<head>
<title>canvas Animasyon Temelleri</title>
canvas
{
}
</style>
var ctx, arc1;
var objectArc = function (x, y) {
this.x = x;
this.y = y;
}
/*hareket ettireceimiz daireleri x ve y zelliklerine sahip birer nesne olarak

tanmlayacaz. Bu iflimizi epeyce kolaylafltracaktr*/
var pStart = {x:10,y:80};

var pEnd = { x: 390, y: 80 };
/*Harekete bafllang noktasn pStart(x1,y1) ve bitifl noktasn pEnd(x2,y1) nesne

olarak tanmlyoruz.*/
var play = function () {

ctx =
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 251
CANVAS 251
arc1 = new objectArc(pStart.x, pStart.y);

/*arc1 isimli bir daire nesnesi oluflturduk*/
draw();
}
if (arc1.x > pEnd.x) {
/*arc1.x deeri pEnd.x deerinden byk olursa bu durumda en son

izimin gereklefltii sonucu kar. Yani arc metodunun izimde
kulland en son x deeri pEnd.x deeridir. Bu durumda draw()
fonksiyonunun alflmas sonlandrlr.*/
return;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
/*Bu fonksiyon her alfltnda clearRect() metoduyla canvas eleman
zeri temizleniyor.*/
ctx.beginPath();
ctx.arc(arc1.x, arc1.y, 10, 0, Math.PI * 2, false);
/*arc1 isimli daireyi canvas eleman zerine izdirdik. Fonksiyon her
alfltnda arc1.x zelliinin deeri deifleceinden bu deiflen deere

gre daire tekrar izdirilir.*/
ctx.fill();
arc1.x += 10;
setTimeout(draw(), 50);// zamanlayc
</script>
</head>
<canvas id=canvas1 width=400 height=200>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 252
252 HER YNYLE HTML5
Ekran grnts:
Yukardaki rnekte nesnenin pStart noktasndan pEnd noktasna hareket etmesini

saladk. fiimdi nesnenin bu iki nokta (pStart, pEnd noktalar) arasnda srekli gidip gelmesini salayalm.
lk nce nesnenin geriye doru harekete gemesini salamak iin drawBack()
isimli bir fonksiyon oluflturacam bu fonksiyon draw() fonksiyonu ierisinden
arc1.x > pEnd.x flart gereklefltiinde arlacak (Yani daire pEnd nesnesinin tanmlad koordinatlara geldikten sonra).
if (arc1.x > pEnd.x) {
drawBack();
return;
}
ctx.beginPath();
ctx.fill();
arc1.x += 10;
setTimeout(draw(), 50);
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 253
CANVAS 253
drawBak() isimli fonksiyonumuzun kodlar:
var drawBack = function () {

if (arc1.x < pStart.x) {
/*arc1.x zelliinin deeri pStart.xden kk olursa bu durumda daire

iziminde kullanlan en son x deeri pStart.x fleklinde olmufltur.
Yapmamz gereken fley nesneyi ileri(saa) hareket ettirmek olacaktr.
Bu yzden draw() fonksiyonu arlmfltr.
*/
draw();
return;
}
ctx.beginPath();
ctx.fill();
arc1.x -= 10;
/*Nesnenin geriye doru hareketini salamak iin arc1.x zelliinin deerini
srekli azaltacaz.*/
}
NOT
setTimeout(drawBack(), 50);
Nesneleri dikeyde dorusal bir izgi zerinde hareket ettirmenin mant yukarda
anlatlan kodlardan ok farkl olmayacaktr. Nesnelerin x koordinat deerlerini sabit tutarak y koordinat deerlerini bir zamanlayc ile deifltirirseniz, nesneleri dorusal olarak dikey eksende hareket ettirmifl olursunuz. Afladaki rnekte nesnelerin dikey hareket ettirilmesi anlatlmfltr.
rnek:
<!DOCTYPE html>
<html>
<head>
canvas
{
}
</style>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 254
254 HER YNYLE HTML5
var ctx;
var pointY = {y1:15,y2:35,y3:55};
/*canvas zerine 3 tane daire izdireceiz. Bu dairelerin y koordinat deerlerini pointY isimli
bir nesne ierisinde saklyoruz.*/

ctx =
draw();
}
if (pointY.y3 == ctx.canvas.height-15) {
return;
/*3.dairenin y koordinat 185px olunca nesnelerin hareketini
durduruyoruz.*/
}
ctx.beginPath();
ctx.arc(40, pointY.y1, 10, 0, Math.PI * 2, false);
ctx.fill();
pointY.y1 += 5;
pointY.y2 += 5;
pointY.y3 += 5;
/*Dairelerin y koordinat deerleri arttrlyor ve setTimeout ile draw()
fonksiyonunun tekrar alfltrlmas salanyor.*/
}
</script>
</head>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 255
CANVAS 255
Ekran grnts:
Nesnelerin Yatay ve Dikeyde

Beraber Hareket Ettirilmesi
Bir nesnenin ayn anda hem yatay hem de dikey eksende hareket etmesini salayabilirsiniz. Afladaki flekli inceleyiniz.
Yukardaki flekle bakarak gerekli formlleri yazalm:

dx= x2-x1, dy=y2-y1, d= (dx)2 + (dy)2
rnek: Bu uygulama ile yatay da (saa ya da sola) ve dikeyde (aflaya ya da yukarya) rasgele 20 px hareket eden bir daire oluflturacaz ve izdireceimiz daire,
canvas eleman ierisinden kmayacak.
<!DOCTYPE html>
<html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 256
256 HER YNYLE HTML5
<head>
canvas
{
}
</style>
var ctx ,x,y;
/*Daireyi nesne olarak oluflturacamzdan dolayy arcObject isimli bir kurucu

fonksiyon tanmlanmfltr.
(constructor Pattern)
*/
var arcObject = function (x, y, r) {

this.x = x;
this.y = y;
this.r = r;
}
var arc = new arcObject(20, 30, 10);
/*arcObject isimli kurucu fonksiyon kullanlarak arc isimli bir nesne oluflturuldu*/

ctx =
draw();
}
ctx.beginPath();
ctx.arc(arc.x, arc.y, arc.r, 0, Math.PI * 2, false);
ctx.fill();
/*arc nesnesinin ilk x,y deerleri ile tanmlanan noktada bir daire izdirildi*/
while (true) {
x = Math.round(Math.random()) * 40 - 20;
y = Math.round(Math.random()) * 40 - 20;
if (!(arc.x + x < arc.r || arc.x + x
+ arc.r > ctx.canvas.width || arc.y + y < arc.r || arc.y + y
+ arc.r > ctx.canvas.height)) {
break;
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 257
CANVAS 257
}
arc.x += x;
arc.y += y;
setTimeout(play(), 50);
}
</script>
</head>
</canvas>
</body>
</html>
Yukarda uygulamada daire ilk olarak Canvas eleman zerine (x=20, y=30) merkezli ve 10 px yarapl olarak izdirilecektir. Daha sonra amacmz dairenin merkez koordinatlarn (x,y) 20 px arttrarak ya da azaltarak daireyi tekrar izdirmek
olacaktr. Bylece daire rasgele yatayda sola ya da saa, dikeyde ste ya da alta 20
px hareket edecektir. Fakat dairenin her defasnda Canvas eleman ierisine izdirilmesi nemlidir. (Canvas eleman iinde kalmas) daireyi her izimde Canvas eleman ierisinde tutmak iin afladaki while() dngs oluflturulmufltur.
while (true) {
x = Math.round(Math.random()) * 40 - 20;
y = Math.round(Math.random()) * 40 - 20;
if (!(arc.x + x < arc.r || arc.x + x + arc.r >
ctx.canvas.width || arc.y + y < arc.r || arc.y + y + arc.r >
ctx.canvas.height)) {
break;
}
}
While dng parantezleri ierisine true deerini yazyoruz. Aslnda bu durumda

sonsuz bir dng oluflturmufl olduk. Fakat istediimiz flartlar oluflunda dngden
break deyimini kullanarak kmamz mmkn. Dng ierisinde x ve y deiflkenleri +20 ya da -20 deerlerinden birini rasgele alacaktr.
Math.round(Math.random()) ifadesi geriye 1 ya da 0 deerini dndrr. Eer 1 deerini dndrrse rnein; x=20, eer 0 deerini dndrrse x=-20 olacaktr. Bulunan bu x, y deerleri dairenin merkez koordinatlarna ekleyeceimiz deerler olacaktr (Dairenin yeni merkez noktas arc.x=arc.x+x, arc.y=arc.y+y fleklinde olacak).
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 258
258 HER YNYLE HTML5
if() yaps ile yeni izilecek dairenin Canvas eleman snrlar ierisinde kalp kal-
mayaca kontrol ediliyor. Eer yeni deerlerle daire Canvas eleman ierisine izdirilebiliyor ise, break deyimi ile dngden kmamz gerekecektir. Eer yeni deerlerle daire Canvas eleman dflna izdirilecek ise, bu durumda dng tekrar alflacak ve yeni x, y deerleri hesaplayacaktr. Dng, daireyi Canvas eleman ierisinde tutacak; x ve y deerleri bulununcaya kadar devam eder.
Peki, dairenin her defasnda Canvas eleman ierisine izilmesini nasl salyoruz?
if() yaps ierisindeki flartlara yakndan bakalm.
arc.x + x < arc.r
Eer yeni izilecek dairenin x koordinat (arc.x+x) dairenin yar apndan kk

olursa, bu durumda daire Canvas elemannn sol kflesinden dflar kar.
arc.x + x + arc.r > ctx.canvas.width
Eer yeni izilecek dairenin x koordinat (arc.x + x) ve dairenin yar apnn toplam canvas elemannn geniflliinden byk olursa daire canvas elemannn sa
kflesinden dflar kar.
arc.y + y < arc.r
Eer yeni izilecek dairenin y koordinat (arc.y + y) dairenin yar apndan kk

olursa bu, durumda daire Canvas elemannn st kflesinden dflar kar.
arc.y + y + arc.r > ctx.canvas.height
Eer yeni izilecek dairenin y koordinat (arc.y + y) ve dairenin yar apnn toplam Canvas elemannn yksekliinden byk olursa daire Canvas elemannn alt
kflesinden dflar kar.
Son olarak daireyi Canvas eleman ierisinde tutan x, y deerlerini dairenin merkez
koordinatlarna ekleyip zamanlaycy yazyoruz.
arc.x += x;
arc.y += y;
Yukardaki uygulamada daire Canvas eleman ierisine rasgele izdiriliyordu. Gelin dairenin Canvas zerinde izdirildii yerin boyanmasn salayalm.
<!DOCTYPE html>
<html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 259
CANVAS 259
<head>
canvas
{
}
</style>
var ctx1,ctx2,x,y;
var arcObject = function (x, y, r) {
this.x = x;
this.y = y;
this.r = r;
}
var arc = new arcObject(20, 30, 10);
ctx1 =
ctx2 =
ctx1.fillStyle = #ffcc00;
ctx2.fillStyle = #00bb00;
draw();
}
ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
ctx2.beginPath();
ctx2.arc(arc.x, arc.y, arc.r, 0, Math.PI * 2, false);
ctx2.fill();
ctx1.beginPath();
ctx1.arc(arc.x, arc.y, arc.r-3, 0, Math.PI * 2, false);
ctx1.fill();
while (true) {
x = Math.round(Math.random()) * 40
y = Math.round(Math.random()) * 40
if (!(arc.x + x < arc.r || arc.x +
ctx2.canvas.width || arc.y + y < arc.r || arc.y + y
x
+
20;
20;
+ arc.r >
arc.r >
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 260
260 HER YNYLE HTML5
ctx2.canvas.height)) {
break;
}
}
arc.x += x;
arc.y += y;
}
</script>
</head>
<div style=width:400px;height:200px;position:relative;>
</canvas>
<canvas style=position:absolute;left:0px;top:0px; width=400
height=200></canvas>
</div>
</body>
</html>
Ekran grnts:
rnek: Bu rnekte bir nesnenin bir vektr boyunca nasl hareket ettirildiine baka-
caz. Yani nesneyi bir ayla hareket ettireceiz.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 261
CANVAS 261
<!DOCTYPE html>
<html>
<head>
canvas
{
}
</style>
var d= 5;
var pStart = {
x: 10,
y: 10
};
var angle = 30;
var rad = (angle * Math.PI) / 180;
var dx = Math.cos(rad) * d;
var dy = Math.sin(rad) * d;
var daire = pStart;
var nokta = [];
var ctx =
nokta.push([daire.x, daire.y]);
ctx.fillStyle = #cc00cc; // kk dairelerin dolgu rengi
for (var i = 0; i < nokta.length; i++) {
ctx.beginPath();
ctx.arc(nokta[i][0], nokta[i][1], 1, 0, Math.PI * 2,
false);
ctx.fill();
}
ctx.fillStyle = #888800; // Dairenin dolgu rengi
ctx.beginPath();
ctx.arc(daire.x, daire.y, 10, 0, Math.PI * 2, false);
ctx.fill();
daire.x += dx;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 262
262 HER YNYLE HTML5
daire.y += dy;
}
</script>
</head>
</canvas>
</body>
</html>
Yukardaki uygulamada yaplan ifllemi grsellefltirerek inceleyelim.

lk daire (10,10) noktas merkezli olarak izdirilecektir.
Dier dairelerin merkez noktalar; ilk dairenin merkez
noktasndan 300lik bir a ile geen vektr zerine olmaldr (Yani daireler bir a ile hem yatay hem de dikeyde hareket etmifl olacaklar).
Uygulamada ilk nce deiflken ve nesne tanmlamalar yaplmfltr.
var d= 5;
var pStart = {
x: 10,
y: 10
};
var angle = 30;
var rad = (angle * Math.PI) / 180;
var daire = pStart;
var nokta = [];
fiekilden de anlafllaca zere aslnda d deiflkeni ile hareket hzn ayarlayabilirsiniz.

pStart nesnesi ilk noktann koordinatlarn tanmlamak iin oluflturulmufltur. dx ve
dy deiflkenleri dairenin 300lik bir ayla hareket etmesi iin her defasnda dairenin
merkez noktalarna eklenecek sabit deerleri saklamaktadr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 263
CANVAS 263
draw() fonksiyonu ierisinde hesaplanan koordinatlara daire izdirildikten sonra,

yeni izilecek dairenin merkez koordinatlar; daire.x, daire.y deerlerine dx, dy
deerleri eklenerek elde edilecektir.
draw() fonksiyonu ierisinde tanmlanan nokta isimli dizi deiflkenine dikkat edin.
Bu dizi dairenin izdirildii merkez noktalarn saklamak iin oluflturulmufltur. Her
daire iziminde ilk nce nokta[] deiflkeni ierisindeki deerleri (dairenin nceden
izildii merkez noktalarn) kullanarak kk dairecikler izdiriyoruz. Amacmz
dairenin hareket yolunu grsel olarak iflaretlemek.
Ekran grnts:
Yukardaki rnekte daireyi Canvas eleman ierisinde tutma gibi bir isteimiz olmad.
fiimdi bu dairenin vektrel hareketler ile daire ierisinde kalmasn salayalm.
rnek:
<!DOCTYPE html>
<html>
<head>
canvas
{
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 264
264 HER YNYLE HTML5
}
</style>
var daireCreate = function (x, y, r) {
this.x = x;
this.y = y;
this.r = r;
}
var daire = new daireCreate(10, 10, 10);
var d = 5;
var angle = 30;
var rad = angle * Math.PI / 180;
var nokta = [];
var radUpdate = function () {
/*Daire canvas eleman kflelerine geldiinde radUpdate() fonksiyonu

arlacaktr. Bu fonksiyon gncellenen aya gre afladaki deerleri
tekrar hesaplar*/
rad = (angle * Math.PI) / 180;

dx = Math.cos(rad) * d;
dy = Math.sin(rad) * d;
}
var ctx =
ocument.getElementsByTagName(canvas)[0].getContext(2d);
nokta.push([daire.x, daire.y]);
ctx.fillStyle = #cc00cc; // Kk dairelerin dolgu rengi
for (var i = 0; i < nokta.length; i++) {
ctx.beginPath();
ctx.arc(nokta[i][0], nokta[i][1], 1, 0, Math.PI * 2,
false);
ctx.fill();
}
ctx.fillStyle = #888800; // Ddairenin dolgu rengi
ctx.beginPath();
ctx.arc(daire.x, daire.y, daire.r, Math.PI * 2, false);
ctx.fill();
daire.x += dx;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 265
CANVAS 265
daire.y += dy;
/*Daire canvas elemannn yatay ya da dikeyde kflelerine geldiinde

dairenin canvas eleman ierisinde kalmasn salamak iin a deerlerini
deifltiriyoruz. */
daire.r) {
if (daire.x + daire.r > ctx.canvas.width || daire.x <
angle = 180 - angle;

radUpdate();
} else if (daire.y + daire.r > ctx.canvas.height ||
daire.y < daire.r) {
angle = 360 - angle;
radUpdate();
}
}
</script>
</head>
</canvas>
</body>
</html>
Ekran grnts:
Noktal izgiler, dairenin hareket yollarn gstermektedir.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 266
266 HER YNYLE HTML5
Nesnelerin Dairesel Olarak

Hareket Ettirilmesi
Temel geometri bilgilerini kullanarak nesneleri dairesel olarak hareket ettirmek ok
basit olacaktr.
rnek:
<!DOCTYPE html>
<html>
<head>
canvas
{
}
</style>
var merkezNokta = { x: 100, y: 70,radius:50 };
var daire = {};
var angle = 0;
var ctx =
daire.x =
merkezNokta.x + Math.cos(angle) * merkezNokta.radius;
daire.y =
merkezNokta.y + Math.sin(angle) * merkezNokta.radius;
ctx.beginPath();
ctx.arc(daire.x, daire.y, 10, Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(merkezNokta.x, merkezNokta.y, merkezNokta.radius, 0,
Math.PI * 2, false);
ctx.stroke();
angle += 50;
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 267
CANVAS 267
</script>
</head>
</canvas>
</body>
</html>
Ekran grnts:
Kk daire emberin kenarlar ile tanmlanan yol zerinde

dnmektedir. fiimdi yukardaki uygulamada yaplan ifllemi
grsellefltirerek anlatalm.
Yandaki flekilden gerekli formlleri kartalm.
dx
dy
Cos() =
Sin() =
R
R
Dairenin merkez noktasn hareketi boyunca R yarapl emberin kenarnda tutacaz ve daireyi a asyla hareket ettireceiz. Bu durumda dairenin merkez noktas
ile emberin merkez noktas arasndaki yataydaki uzaklk dx=cos(a)*R, dikeydeki
uzaklk dy= sin(a)*R fleklinde olacaktr.
rneimize geriye dnersek, zet olarak yaptmz ifllem R(merkezNokta.radius)
deerini sabit tutarak (dairenin merkezinin emberin kenarnda kalmasn salayarak)
a deerini deifltirmektir.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 268
268 HER YNYLE HTML5
draw() fonksiyonu her alfltnda afladaki satrlar ile yeni izilecek dairenin x,y
koordinatlar hesaplanmaktadr.
daire.x = merkezNokta.x + Math.cos(angle) * merkezNokta.radius;

daire.y = merkezNokta.y + Math.sin(angle) * merkezNokta.radius;
Daha sonra daireyi yukardaki deerlere gre izdirip yeni izim ifllemi iin a deerini arttryoruz.
rnek: Bu uygulamamzda yarap 10 px olan daireler kullanp Canvas eleman
zerine HTML5 metnini yazdracaz. Kullanc Mouse ile Canvas eleman zerinde geldiinde bu daireler farkl yollar izleyerek (farkl alarla) Canvas elemannn alt kenarnda toplanacaklardr. Kullancnn Mouseu Canvas eleman zerine
getirdii her durumda dairelerin izledikleri yol (kullandklar a) farkl olacaktr.
fiimdi kodlarmzn tamamn yazp daha sonra da inceleyelim...
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Animasyon</title>
canvas
{
}
</style>
/*Global deiflkenlerimizi tanmlayalm*/
var canvas, ctx, daireKor, timer1;

var daireArray = [];
canvas = document.getElementsByTagName(canvas)[0];
ctx = canvas.getContext(2d);
canvas.addEventListener(mouseover, mouseOver, false);
canvas.addEventListener(mouseout, mouseOut, false);
/*Harfleri oluflturacak dairelerin merkez koordinatlarn(x,y) daireKor isimli
dizi deiflkeni ierisinde saklayacaz.*/
daireKor = [
// H
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 269
CANVAS 269
[24, 35], [24, 55], [24, 75], [24, 95], [24, 115], [44, 75],
[64, 35], [64, 55], [64, 75], [64, 95], [64, 115]
// T
,[94, 35], [114, 35], [134, 35], [114, 55], [114, 75],
[114, 95], [114, 115]
// M
,[164, 35], [164, 55], [164, 75], [164, 95], [164, 115],
[222, 34], [222, 54], [222, 74], [222, 94], [222, 114]
,[180, 43], [195, 54], [205, 43]
// L
,[254, 35], [254, 55], [254, 75], [254, 95], [254, 115],
[274, 115],[294, 115]
// 5
,[374, 35], [354, 35], [334, 35], [334, 55], [334, 75],
[354, 75], [374, 75], [374, 95], [374, 115]
,[354, 115], [334, 115]
];
for (var i = 0; i < daireKor.length; i++) {

daireArray.push(new daire(daireKor[i][0],
daireKor[i][1]));
}
/*izim ifllemi iin draw()fonksiyonunu ve her daire nesnesinin dx,dy,angle

zelliklerine deer atanmas iin animasyonHesapla() fonksiyonunu
aryoruz.*/
draw();
animasyonHesapla();
function daire(x, y) {
this.x = x;
this.y = y;
this.baseX = x;
this.baseY = y;
this.dx;
this.dy;
this.angle;
}
var animasyonHesapla = function () {

for (var i = 0; i < daireArray.length; i++) {
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 270
270 HER YNYLE HTML5
var tempDaire = daireArray[i];
/*Bu dngnn her alflmasnda elde edilen daire nesnesi tempDaire isimli bir deiflken
ierisinde saklanmaktadr.*/
d = 2 + Math.round(Math.random() * 7);
tempDaire.angle = 45 + Math.round(Math.random() * 100);
rad = tempDaire.angle * Math.PI / 180;
tempDaire.dx = Math.cos(rad) * d;
tempDaire.dy = Math.sin(rad) * d;
daireArray[i] = tempDaire;
ctx.clearRect(0, 0,canvas.width,canvas.height);
var tmpDaire = daireArray[i];
var rGradient = ctx.createRadialGradient(tmpDaire.x,
tmpDaire.y, 2, tmpDaire.x, tmpDaire.y, 10);
rGradient.addColorStop(0.0, #FA2AB1);
rGradient.addColorStop(0.25, green);
rGradient.addColorStop(1.0, khaki);
ctx.fillStyle = rGradient;
ctx.beginPath();
ctx.arc(tmpDaire.x, tmpDaire.y, 10, 0, Math.PI * 2,
false);
ctx.fill();
}
}
var mouseOver = function () {
if (tempDaire.x + tempDaire.dx + 10 > ctx.canvas.width
|| tempDaire.x + tempDaire.dx < 10) {
tempDaire.dx = 0;
} else if (tempDaire.y + tempDaire.dy + 10 >
ctx.canvas.height || tempDaire.y + tempDaire.dy < 10) {
tempDaire.dy = 0;
}
tempDaire.x += tempDaire.dx;
tempDaire.y += tempDaire.dy;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 271
CANVAS 271
}
draw();
timer1 = setTimeout(mouseOver(), 35);
}
var mouseOut = function () {
clearTimeout(timer1);
tempDaire.x = tempDaire.baseX;
tempDaire.y = tempDaire.baseY;
}
animasyonHesapla();
draw();
}
</script>
</head>
</canvas>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 272
272 HER YNYLE HTML5
Mouse ile Canvas elaman zerine geldiinizde:
Yazdmz kodlar ayrntl bir flekilde anlatalm.

Daire Nesneleri Oluflturmak iin Kurucu Fonksiyon
Uygulamamzda 49 tane daire kullandk. Bu durumda daireleri nesne olarak oluflturmak iflimizi olduka kolaylafltrr. Dflnn 49 tane daire var ve bu dairelerin deiflen
zellikleri, sabit zellikleri mevcut ve her daire iin bu zellikler farkl durumda. Bu
bakmdan sizde uygulamalarnzda kod yazarken nesnel dflnmelisiniz. Kurucu fonksiyonumuz sadece daire nesnesi oluflturmak iin dflardan x, y (dairenin merkez noktas) koordinatlarn kabul etmektedir. Burada nemli bir ayrnt; daire nesneleri baseX, baseY zelliklerine sahip olmaldrlar. nk biz daire nesnelerini hareket ettirdiimizde x, y zelliklerinin aldklar deerler deiflecektir. Daireleri orijinal yerlerine
geri dndrmek iin baseX, baseY zelliklerine ihtiya duyacaz. Dier zelliklere
(dx, dy, angle) animasyonHesapla() fonksiyonu ierisinden deerler atanacaktr.
function daire(x, y) {
this.x = x;
this.y = y;
this.baseX = x;
this.baseY = y;
this.dx;
this.dy;
this.angle;
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 273
CANVAS 273
Daire nesnelerini yukardaki kurcu fonksiyonu kullanarak init() fonksiyonu ierisinde tanmlyoruz.
for (var i = 0; i < daireKor.length; i++) {
daireArray.push(new daire(daireKor[i][0], daireKor[i][1]));
}
Bu daire nesneleri daireArray isimli dizi deiflkeni ierisinde saklanacaktr. Daire nesneleri daireKor isimli dizi deiflkeni ierisindeki koordinatlar kullanlarak
oluflturulmaktadr. rnein; yukardaki dngde i=0 deeri iin;
daireArray.push(new daire(daireKor[0][0],daireKor[0][1]));
...fleklinde bir komut satr alfltrlr. Bu komut satr afladaki nesneyi daireArray dizisi ierisine ekler.
new daire(24,35) >> daireArray=[Object daire(x:24,y:35)]
Her Bir Daire Nesnesi iin Rasgele Bir Hareket Yolunun Tanmlanmas
(AnmasyonHesapla Fonksiyonu)
Sayfa her yklendiinde ya da kullanc Mouseu Canvas eleman zerinden ektiinde animasyonHesapla() fonksiyonu alflr. Bu fonksiyon ierisinde dairelerin hareket yollar rasgele hesaplanr. Dairelerin hareket yollar angle(a),
d(hz,mesafe) deerine bal olarak hesaplanr. Bu hesaplamalar her daire nesnesi iin ayr ayr yaplmakta ve rasgele hesaplanan bu hareket yolunu temsil eden dx,
dy, angle deerleri daire nesnelerinin ilintili zelliklerine atanmaktadr.
var animasyonHesapla = function () {
d = 2 + Math.round(Math.random() * 7);
tempDaire.angle = 45 + Math.round(Math.random() * 100);
rad = tempDaire.angle * Math.PI / 180;
tempDaire.dx = Math.cos(rad) * d;
tempDaire.dy = Math.sin(rad) * d;
}
}
Daha nceki konularmzda bir nesnenin bir ayla nasl hareket ettirildiini genifl
olarak anlatmfltk. Yukarda her bir daire yaplan ifllem iin; 2 ile 9 arasnda rasgele bir hz (hareket miktar: d) deeri 45 ile 145 arasnda bir a deeri hesaplanmak-
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 274
274 HER YNYLE HTML5
tadr. Bu deerlere bal olarak nesnemizin mevcut merkez noktas koordinatlarna eklenecek dx,dy deerleri bulunmaktadr.
Bu dngnn her alflmasnda elde edilen daire nesnesi tempDaire isimli bir deiflken ierisinde saklanmaktadr. For dngs ile daireArray dizi deiflkeni ierisinden elde edilen daire nesnesi iin gerekli gncellemeler yapldktan sonra, bu
nesne daireArray dizisi ierisindeki bulunduu konuma tekrar yazdrlmaktadr.
Yani daireArray dizisi belirtilen eleman iin gncellenmektedir.
Daire Nesneleri iin Dolgu (Dairesel Renk geifli) Tanmlanmas ve
Nesnelerin Canvas Eleman zerine izdirilmesi (Draw Fonksiyonu)
draw() fonksiyonu daireArray dizisi ierisinde saklanan daire nesnelerinin ekrana
izdirilmesi iin kullanlmaktadr. Bu fonksiyonun her alflmasnda Canvas eleman

zerini temizler. Bu fonksiyon ierisinde bir for dngsyle daireArray dizisi ierisindeki daire nesneleri Canvas eleman zerine izdirilmektedir.

var rGradient = ctx.createRadialGradient(tmpDaire.x,
tmpDaire.y, 2, tmpDaire.x, tmpDaire.y, 10);
rGradient.addColorStop(0.25, green);
rGradient.addColorStop(1.0, khaki);
ctx.beginPath();
ctx.arc(tmpDaire.x, tmpDaire.y, 10, 0, Math.PI * 2, false);
ctx.fill();
draw() fonksiyonu ierisinde daire nesnelerine dolgu olarak kullanlacak bir dairesel
renk geifli nesnesi tanmlanmfltr. sterseniz tm daire nesneleri iin bir tane dolgu
tanmlayabilir ya da afladaki gibi tm daire nesneleri iin rasgele hesaplanan farkl
dolgular tanmlayabilirsiniz. draw() fonksiyonunu afladaki gibi deifltirip ekran
ktsna bakalm.

+HTML5-BOLUM6
6/17/11
4:28 PM
Page 275
CANVAS 275

var rGradient = ctx.createRadialGradient(tmpDaire.x, tmpDaire.y, 2,
tmpDaire.x, tmpDaire.y, 10);
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
rGradient.addColorStop(1.0,rgb( + r + , + g + , + b + ));
ctx.beginPath();
ctx.arc(tmpDaire.x, tmpDaire.y, 10, 0, Math.PI * 2, false);
ctx.fill();
}
}
Ekran grnts Firefox 4 ile elde edilmifltir.
Canvas Elemannn mouseover Olaynda Daire Nesnelerinin Rasgele Yollar

Kullanarak Canvas Elemannn Alt Kflesinde Toplanmas (mouseOver Fonksiyonu)
Bu fonksiyon ierisinde for dngsyle daireArray dizisi ierisindeki daire nesnelerine ulafllmaktadr. Bir daire nesnesinin hareket etmesi iin; daha nceden hesaplanan ve hareket yolunu tanmlayan dx, dy deerleri dairenin x, y zelliklerinin sakladklar deerlere eklenir ve daha sonra daireArray dizisi ierisindeki pozisyonlar
gncellenen daire nesneleri draw() fonksiyonu tarafndan Canvas eleman zerine
izdirilir. Dairelerin x zelliklerine aldklar deerlerle (x zellii dairenin hali hazrda izili olduu noktann yatay koordinatdr) dx zelliklerine aldklar deerler toplanr. Yine ayn flekilde dairelerin y zelliklerine aldklar deerlerle dy zelliklerinin
deerleri toplanr. Amacmz; dairenin yeni izimde Canvas eleman snrlarn terk
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 276
276 HER YNYLE HTML5
etmemesini salamaktr. Eer daire yatayda ya da dikeyde Canvas elemannn kflesine gelmiflse bir sonraki alflacak mouseOver fonksiyonunun daire nesnesini Canvas
eleman ierisinden karmamas iin dx ya da dy deerlerine 0 deeri atanmfltr.
var mouseOver = function () {
if (tempDaire.x + tempDaire.dx + 10 > ctx.canvas.width
|| tempDaire.x + tempDaire.dx < 10) {
tempDaire.dx = 0;
} else if (tempDaire.y + tempDaire.dy + 10 >
ctx.canvas.height || tempDaire.y + tempDaire.dy < 10) {
tempDaire.dy = 0;
}
tempDaire.x += tempDaire.dx;
tempDaire.y += tempDaire.dy;
}
draw();
timer1 = setTimeout(mouseOver(), 35);
}
zetle yukardaki fonksiyonda yaplan ifllemler:

Daire nesnelerine ulaflmak ve yeni izim ifllemi iin daire nesnelerinin Canvas
eleman dflna kmasn engellemek.
Her daire nesnesi iin farkl olarak rasgele tanmlanan dx, dy deerlerini daire
nesnelerinin x ve y zelliklerinin deerlerine eklemek ve dairelerin x, y zelliklerini gncellemek (Yani daireArray dizisi ierisindeki daire nesnelerinin x, y
zelliklerinin deerlerini gncellemek).
izim iflleminin yaplmas iin draw() fonksiyonunu armak.
mouseOver() fonksiyonunun tekrar alfltrlmas iin bir zamanlayc tanmlamak.
Canvas Elemannn mouseout Olaynda Daire Nesnelerinin Orijinal

Konumlarna Geri Dnmelerini Salamak (mouseOut Fonksiyonu)
Bu fonksiyon ierisinde ilk yaptmz ifllem zamanlaycy iptal etmek olacaktr. Daha sonra her nesnenin x ve y zelliklerine bafllang deerlerini (orijinal koordinat
deerlerini: baseX, baseY) atamaktr.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 277
CANVAS 277
Son olarak yeni animasyon deerlerinin hesaplanmas iin animasyonHesapla()

fonksiyonu ve nesnelerin orijinal noktalarna izdirilmesi iin draw() fonksiyonu
arlmfltr.
var mouseOut = function () {
clearTimeout(timer1);
tempDaire.x = tempDaire.baseX;
tempDaire.y = tempDaire.baseY;
}
animasyonHesapla();
draw();
}
Tarayc Destei
Yukarda anlatlan metotlar, zellikler iin tarayc desteinin ne durumda olduu
aflada listelenmifltir. Tablolarda tarayc Grntleme Motoru (Layout Engine)
ad yerine tarayc srm ad kullanlmfltr. zellik ya da metotlar taraycnn belirtilen srm ve sonra kan srmleri tarafndan desteklenir.
Canvas Eleman Metodlar
Metodlar
getContext()
Context Type 2d
Context Type WebGL

toDataURL()
Internet
Explorer
Firefox
Opera
Safari
IE9+
Firefox 1.5+
Opera 9.0
Destei var
IE9+
Firefox 3.5+
Opera 10.6
Destei var
Yok
Ksmen
Yok
Ksmen
IE9+
Firefox 1.5+
Opera 9.5
Destei var
CanvasRenderingContext 2D (context2d) zellik ve Metodlar

Metodlar / zellikler
strokeStyle
fillStyle
globalAlpha
Internet
Explorer
Firefox
Opera
Safari
IE9+
Firefox 1.5+
Opera 9.0
Destei var
IE9+
Firefox 1.5+
Opera 9.0
Destei var
IE9+
Firefox 1.5+
Opera 9.0
Destei var
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 278
278 HER YNYLE HTML5
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
lineWidth
lineCap
lineJoin
miterLimit
font
textAlign
textBaseline
save()
restore()
fillRect()
strokeRect()
clearRect()
beginPath()
moveTo()
lineTo()
quadraticCurveTo()
bezierCurveTo()
closePath()
arc()
rect()
fill()
stroke()
IE9+
Firefox 1.5+
Opera 9.0
Destei var
IE9+
Firefox 3.5+
Opera 10.5+ Destei var
IE9+
Firefox 3.5+
IE9+
Firefox 3.5+
IE9+
Firefox 3.5+
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 3.5+
Destei var
Destei var
IE9+
Firefox 3.5+
IE9+
Firefox 3.5+
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 2.0+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 279
CANVAS 279
clip()
createLinearGradient()
createRadialGradient()
createPattern()
scale()
rotate()
translate()
transform()
fillText()
strokeText()
measureText()
drawImage()
createImageData()
getImageData()
putImageData()
NOT
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 1.5+
IE9+
Firefox 3.5+
IE9+
Firefox 3.5+
IE9+
Firefox 3.5+
IE9+
Firefox 1.5+
Opera 9.0+
Destei var
IE9+
Firefox 3.5+
Opera 11+
Destei var
IE9+
Firefox 3+
IE9+
Firefox 4.0
Internet Explorer 7 ve 8 srmlerinde canvas zellik ve metotlarna ksmen destek

salamak iin Explorercanvas (excanvas.js) JavaScript ktphanesini kullanabilirsiniz.
+HTML5-BOLUM6
6/17/11
4:28 PM
280 HER YNYLE HTML5
Page 280
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 281
HTML5 ve SVG
SVG (Scalable Vector Graphics), XML tabanl 2 boyutlu izimler oluflturmak iin
kullanlan bir iflaretleme dilidir. SVG,vektrel tabanl grafikler oluflturmak iin kullanlr ve bir W3C bildirimi olarak dier W3C bildirimleri ile (rnein; XLS,
DOM) birlikte alflabilir. SVG dilini JavaScript ile beraber kullanlp interaktif ve
dinamik izimler yapabilirsiniz.
Hatrlarsanz canvas blmnde izim ifllemleri programatik olarak JavaScript yardmyla yaplmaktayd. Alternatif olarak SVG etiketlerini kullanarak izim ifllemleri yapabilirsiniz. W3C tarafndan desteklenen bu teknolojinin SVG 1.1 (Second Edition)
halihazrda tarayclar tarafndan byk oranda desteklenmekle beraber W3C yazarlar SVG 2.0 srmn gelifltirmeye devam etmektedirler.
Ayrca grsel olarak SVG dosyalar (grafikleri) oluflturmak iin kullanabileceiniz
programlar (rnein; Adobe Illustrator CS5) ve uygulamalar mevcuttur.
SVG ve HTML5 Kullanm

SVG ieriklerini ayr bir dosyada saklayabilir ve tarayclar arasnda farkllk gstermekle beraber <embed>, <object> ya da <iframe> etiketlerini kullanarak web
belgesi ierisine ekleyebilirsiniz. Ancak HTML5 yaps ile beraber tarayclarn
destekledikleri en nemli zellik inline (satr ii) SVG kodlar yazabilmemizdir.
Yani HTML5 yaps ierisinde SVG etiketlerini dier etiketler gibi direk sayfa ierisinde kullanabilirsiniz.
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 282
282 HER YNYLE HTML5
Aflada inline SVG format grlmektedir.

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</style>
</script>
</head>
<body>
<svg width= height= xmlns=http://www.w3.org/2000/svg>

</svg>
</body>
</html>
izim ifllemleri iin canvas ya da SVG hangisini kullanmaym? fleklinde bir soru
aklnza gelebilir. fiyle ksaca zetleyelim: Yksek ve srekli performans iin canvas eleman tercih etmelisiniz. Ayrca canvas elemannn piksel tabanl grnt iflleme olana salamas en byk avantajlarndan bir tanesidir. Dier bir yandan, SVG
teknolojisinin canvas elemanna gre en byk arts tm izim ifllemlerinin etiketlerle yaplmas ve her izim elemanna DOM yntemleri ile kolayca ulaflabilmemizdir. Bununla beraber SVG yapsnn znrlkten bamsz izimler oluflturmas dier bir artsdr. Canvas elemann oyun programlama, interaktif ve piksel tabanl grnt dzenleme, grnt analizi gibi uygulamalarda dier yandan SVG yapsn znrlkten bamsz kullanc arayzleri olufltururken tercih edebilirsiniz.
SVG yaps ierisindeki bir etiketin zelliine (attribute) deer atamak ya da deifltirmek iin setAttribute(), zelliin ald deeri renmek iin getAttribute()
metotlarn kullanabilirsiniz. Bu metotlar DOM Level 1 Core ile tanmlanmfltr.
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 283
HTML5 VE SVG 283

NOT
Afladaki rneklerde sadece HTML5 body eleman ierisine inline olarak eklenecek
<svg> elemannn ierii verilecektir. Bu kodlarn <body> eleman ierisine yazldn
unutmaynz!
Dikdrtgen izimi <rect>

rnek:
<svg xmlns=http://www.w3.org/2000/svg height=100 width=300>

<rect fill=blue
stroke=gray
stroke-width=5
width=150
height=70
x=10
y=10
rx=20
ry=30/>

</svg>
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 284
284 HER YNYLE HTML5
Sonu:
rnek:
<!DOCTYPE html>
<html>
<head>
<title>rect</title>
var gElement = document.getElementsByTagName(g)[0];
gElement.setAttribute(style,
fill:#FCD526;stroke:gray;stroke-width:3);
}
</script>
</head>
<g id=g1 transform=rotate(10)>
<rect x=10 y=10 width=80 height=60 rx=20 ry=20/>
<rect x=115 y=10 width=80 height=60 rx=40 ry=40/>
</g>

</svg>
</body>
</html>
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 285
HTML5 VE SVG 285
Ekran grnts:
Daire izimi <crcle>

rnek:

<circle fill=blue
stroke=gray
stroke-width=5
cx=100
cy=50
r=40/>

</svg>
Sonu:
Elips izimi <ellpse>

rnek:

<ellipse fill=rgb(247,208,34) stroke=gray stroke-width=3
cx=100
cy=100
rx=40
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 286
286 HER YNYLE HTML5
ry=60/>

Sonu:
izgi izimi <lne>

rnek:

<g style=stroke:red;stroke-width:3>
<line x1=10 y1=10 x2=100
y2=10 />
<line x1=100 y1=10 x2=100
y2=80 />
<line x1=100 y1=80 x2=10
y2=10 />
</g>

Sonu:
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 287
HTML5 VE SVG 287
oklu izgi izimi <polylne>

rnek:

<polyline style=fill:white;stroke:red;stroke-width:2
points=0,50 70,50 70,120 140,120 140,50 210,50/>
<!-svg eleman ile tanmlanan koordinat sisteminde svg(0,0) points zellii ierisine
izim iflleminde kullanlacak x,y koordinatlar atanr. points=x1,y1 x2,y2 ....
fleklinde kullanlr.
</svg>
-->
Sonuca iflaretlemeler yaparak bakalm:
okgen izimi <polygon>

rnek:

<polygon fill=gray stroke=lightblue stroke-width=10
points=110,50 160,70 166,122 136,163 82,163 50,122 110,110 />
<!-points zellii ierisine izim iflleminde kullanlacak x,y koordinatlar atanr.
points=x1,y1 x2,y2 x3,y3 ... fleklinde kullanlr. <polyline> elemanndan farkl

olarak izim yolunu kapatr(closePath() metodu gibi)
</svg>
-->
Ekran grnts:
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 288
288 HER YNYLE HTML5
Yol izimi <path>

erisinde dz ve eimli izgileri barndran yol izimleri oluflturmak iin kullanlr.
rnek:

<path d=M 20 120 L 90 10 150 120 C 100 50 50 100 20 120
fill=red stroke=blue stroke-width=3 />
</svg>
Ekran grnts:
Yol bilgisini ieren komut satr d zelliine atanr. Yol bilgisi komutlarla oluflturulur ve her bir komut kendisinden sonra yazlan koordinat bilgilerine gre yol parasn ya da paralarn izer (M, Z komutlar yol izmez tanmlama yapar). Komut
isimleri yerine aflada tanmlanan karakterler kullanlr. Z(closePath) komutu; yol
izimini kapatacandan kendinden sonra bir koordinat bilgisi almaz. M(moveTo)
komutundan sonra yazlan, koordinatlar izime bafllang noktasn tanmlar. d zelliine atanan veri okunabilirliin artmas iin birden fazla satra blnebilir.
Afladaki komutlar byk harfle yazlrlarsa mutlak pozisyonlandrma kullanlr.
Yani yol boyunca orijin noktas daima svg elemannn sol st kflesi olarak kabul
edilir. Fakat kk harfle yazlrlarsa orijin noktas olarak kendilerinden nce yol
iziminde kullanlan en son noktay kullanrlar. Komut satrnda ilk kullanlan
moveTo komutu iin M karakterinin kk yazlmas bir fley deifltirmez. nk henz yol iziminde kullanlan bir nokta bilgisi yoktur. Ya da Z, z komutlarnn birbirinden fark yoktur; ikisi de yol izimini kapatr.
Komutlar:
M (moveto): M (X,Y)+ fleklinde kullanlr.
L (lineto): L (X,Y)+ fleklinde kullanlr. Burada L(x,y)+ formatyla anlatlmak

istenen; siz L karakterinden sonra birden fazla x,y ifti yazabilirsiniz. Yani
d=M 0 0 L 50 50 100 50 gibi. Bu durumda (0,0) noktasndan (50,50)
noktasna bir izgi ve yine (50,50) noktasndan (100,50) noktasna bir izgi
izilir.
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 289
HTML5 VE SVG 289
H (horizontal lineto-yatay izgi): H(x)+ fleklinde kullanlr.

V (vertical lineto-dikey izgi): V(y)+ fleklinde kullanlr.
C (curveto): (x1 y1 x2 y2 x y)+ fleklinde kullanlr. (x1,y1) ve (x2,y2)

kontrol noktalardr. (x,y) deer ifti izim bitifl noktasn tanmlar. Bu tanm
dier komutlar iinde geerlidir.
S (smooth curveto): (x2 y2 x y)+ fleklinde kullanlr.
Q (quadratic Belzier curve): (x1 y1 x y)+ fleklinde kullanlr.
T (smooth quadratic Belzier curveto): (x y)+ fleklinde kullanlr.
A (elliptical Arc): (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

fleklinde kullanlr.
Z (closePath): z ya da Z fleklinde kullanlr.
Yukarda SVG ile temel izimlerin nasl yapld anlatlmfltr. Aslnda SVGnin tamam ayr bir kitabn konusudur. Bu kitap iin bu kadar SVG bilgisinin yeterli olduu kansndaym. nk SVG grafiklerini elle kod yazarak oluflturmak yerine var
olan grsel editrleri kullanabilir ve gerektii yerlerde bu kodlara elle mdahale edebilirsiniz. Ayrca SVG ile yapabileceiniz ve bizim bu blmde yer vermediimiz
birok ifllem mevcuttur. Bunlar; Gradients ve Patterns dolgular, SVG eleman
iinde link alanlar oluflturma Clipping, Masking ve Compositing ifllemleridir.
NOT
Inline-SVG flu an iin IE 9.0, Firefox 4.0 tarafndan desteklenmektedir.
+HTML5-BOLUM7
6/17/11
4:29 PM
290 HER YNYLE HTML5
Page 290
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 291
HTML5 AUDIO
ve VIDEO
ELEMANLARI
HTML5, herhangi bir plug-in kullanmadan tarayclarn multimedya (ses, video)

dosyalarn alfltrlabilmesini salar. Ayrca kendi medya denetleyicilerinizi (oynat, durdur gibi) oluflturup ses ya da videoyu JavaScript yardmyla kontrol edebilir
ve CSS ile bu elemanlara grsel zellikler ekleyebilirsiniz. Web sayfasna eklediiniz medya ieriinin JavaScript yardmyla kontrol edilebilir olmas nemlidir. Bu
durum bize sayfadaki dier elemanlarn herhangi bir olayna ya da kullancnn dier elemanlarla girdii herhangi bir etkileflime bal olarak ses ya da video dosyalar ile ilgili ifllem yapma imkan sunar. HTML5, medya dosyalarn web sayfalar
ierisine gmmek iin <audio> ve <video> elemanlarn tanmlar. fiimdi bu elemanlara ayrntl bir flekilde bakalm.
<audo>
Web sayfalar ierisine ses dosyalar eklemek iin kullanlan elemandr. Afladaki
tabloda tarayclarn hangi formattaki ses dosyalarna destek verdikleri listelenmektedir.
Dosya Tr
Internet Explorer
Firefox
Opera
Safari
Mp3 (.mp3)
9.0
Destei var
(QuickTime ile)
Ogg Vorbis (.ogg)
3.5+
10.5+
Wav (.wav)
Destei var
(QuickTime ile)
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 292
292 HER YNYLE HTML5
zellikleri: [Standart zellikler], src, controls, autoplay, preload, loop
src
audio eleman tarafndan alnacak kaynak ses dosyasn tanmlamak iin kullanlr.
Bu zellie ses dosyasnn sakland bir URL adresi de yazlabilir.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>audio eleman</title>
audio
{
margin:5px;
}
</style>
</head>
<body>
<audio src=audio1.ogg controls>
</audio>
</body>
</html>
Ekran grnts:
controls
Denetim ubuunun (kontrol dmelerinin) gsterilip gsterilmeyeceini ayarlamak iin kullanlr. Kontrol dmelerinin gsterilmemesini salayp, kendi oluflturduunuz kontrol dmelerini kullanabilir ya da autoplay zelliini kullanp, ses
dosyasnn sayfa yklendiinde otomatik olarak alfltrlmasn salayabilirsiniz.
Bu zellii tek baflna deer atamadan kullanabilirsiniz.
<audio src=ses.ogg controls>
</audio>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 293
HTML5 AUDIO VE VIDEO ELEMANLARI 293
Aflada tarayclar tarafndan varsaylan denetim ubuklar grnmektedir.
Firefox 4
Opera 11
IE 9
autoplay
Sayfa yklendiinde, ses dosyas verisi kullanma hazr olduunda taraycnn ses
dosyasn otomatik olarak alfltrmasn salar. Bu zellii tek baflna deer atamadan kullanabilirsiniz.
<audio src=ses.ogg autoplay>

</audio>
preload
Sayfa yklendiinde medya ieriinin alflmaya hazr olmas iin n bellee alnmasn salar. Eer autoplay zellii kullanlmflsa, bu ifllem zaten otomatik olarak yaplr. none, metadata, auto deerlerinden birini alabilir.
none deeri atanrsa medya ierii iin preload ifllemi yaplmaz. metadata deeri
atanrsa performans asndan nemli olan medya ierii ile ilgili eflitli bilgiler
(boyutu, toplam sre, kaynak listesi) iin n ykleme yaplr. auto deeri atanrsa
n ykleme ifllemi otomatik olarak tm medya ierii iin yaplr.
loop
Ses dosyas sonlandnda tekrar bafltan alfltrlmasn salamak iin kullanlr. Bu
zellii tek baflna deer atamadan kullanabilirsiniz.
<audio src=ses.ogg loop>

</audio>
Programatik olarak bir audio elemann oluflturup kullanmanz da mmkndr.

Afladaki rnei inceleyiniz.
rnek:
/*start() sayfa yklendiinde alflacak fonksiyon*/
var start = function () {

var audio = new Audio(audio1.ogg);
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 294
294 HER YNYLE HTML5
audio.controls = true;
document.body.appendChild(audio);
/*Ya da afladaki gibi bir format kullanmanzda mmkndr.

var audio = new Audio();
audio.setAttribute(src, audio1.ogg);
audio.controls = true;
document.body.appendChild(audio);
*/
}
</script>
<vdeo>
Web sayfalar ierisine video dosyalar eklemek iin kullanlan elemandr. Herhangi
bir eklenti kullanmadan video ieriklerinin tarayclar tarafndan oynatlmasn salayan bir standart sunar. Afladaki tabloda tarayclarn hangi formattaki ses dosyalarna destek verdikleri grnmektedir.
Dosya Tr
Internet Explorer
Firefox
Opera
Safari
Ogg
3.5+
10.5+
WebM
4.0
10.6+
MPEG 4
9.0
Destei var.
zellikleri: [Standart zellikler], src, controls, autoplay, preload, loop,

poster, width, height
src, controls, autoplay, preload, loop zellikleri <audio> elemannn belirtilen
zellikleri ile ayndr. width, height zellikleri video elemannn geniflliini ve yksekliini ayarlamak iin kullanlr.
poster
Video ieriini temsil eden bir resim tanmlamas yapmak iin kullanlr. Bu resim,
medya ierii alfltrlncaya kadar video eleman iinde gsterilir.
rnek:
<!DOCTYPE html>
<html>
<head>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 295
<title>poster</title>
</head>
<body>
<video id=vd src=cartoon.ogg controls poster=pre.png>
</video>
</body>
</html>
<source>
<audio> ve <video> elemanlarna alternatif, birden fazla kaynak dosya tanmlamak

iin kullanlr. Tarayc, medya elemanlar (audio, video) ierisinde source eleman-
lar ile yaplan tanmlama srasna gre kendisi tarafndan desteklenen ilk medya ieriini oynatr. source elemanlaryla kaynak ierikler tanmlayarak, audio ve video
elemanlarnn alfltracaklar medya ieriklerini dinamik olarak deifltirebilirsiniz.
zellikleri: [Standart zellikler],src, type, media
src zellii ile kaynak medya dosyas tanmlanr. type zellii ile medya kayna
iin MIME type (dosyalar snflandrmak iin kullanlan ierik tr) tanmlamas
yaplr. Medya elemannn alfltrlaca hedef ortama gre eflitli tanmlamalar
(width, height, resolution gibi) yapmak iin media zellii kullanlr.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 296
296 HER YNYLE HTML5
rnek:
<!DOCTYPE html>
<html>
<head>
<title>source</title>
input:nth-of-type(n)
{
border:none;
}
</style>
document.getElementById(vd).src =
document.getElementsByTagName(source)[0].src;
}
var start_ = function () {
document.getElementById(vd).src =
document.getElementsByTagName(source)[1].src;
}
</script>
</head>
<body onload=start();>
<video id=vd controls>
<source src=cart1.ogg/>
<source src=cart2.ogg/>
</video>
<br />
<input type=button value=animasyon1 onclick=start(); />
<input type=button value=animasyon2 onclick=start_(); />
</body>
</html>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 297
Yukardaki rnekte sayfa yklendiinde alflacak start() fonksiyonu ile video

elemannn src zelliine ilk source eleman ile tanmlanan medya kayna atanmfltr. Bu durumda sayfa yklendikten sonra kullanc oynat dmesine tkladnda video eleman cart1.ogg dosyasn oynatacaktr. Eer kullanc animasyon2
isimli butona tklarsa, bu durumda video elemannn oynataca kaynak dosya
cart2.ogg olacaktr.
NOT
Yukarda elemanlar iin anlatlan zellikler (attribute), programatik olarak elemanlarn referanslar iinde birer zellik (property) olarak tanmldrlar. Yani video eleman (DOM yaps HTML elemanlarn birer nesne olarak tanmlar) iin tanml olan
src zellii etiket ierisinde tanmlanrsa, attribute programatik olarak elemannn
referans ile kullanlrsa property olarak isimlendirilir.
<video src =kaynak ></video>

HTMLVideoElement.src [ = kaynak ]
// Attribute
// Property
Tm HTML elemanlar HTMLElement arayznden tretilmifltir. Yani HTML elemanlar HTMLElement arayz ile tanmlanan zellik ve metotlara sahiptir. audio eleman HTMLAudioElement, video eleman HTMLVideoElement DOM arayzlerini kullanr. Ayn zamanda bu iki media eleman ortak olarak HTMLMediaElement arayz ile tanmlanan zellik ve metotlar miras alr. HTMLMediaElement arayz ile ve
elemanlarn kendi arayzleri ile tanmlanan zelliklerin bir ksmn (attribute) olarak
yukarda anlatmfltk. fiimdi HTMLMediaElement arayz ile elemanlar (nesneler) iin
tanmlanan ortak zellik (property) ve metotlara bakalm.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 298
298 HER YNYLE HTML5
HTMLMedaElement Arayz ile

Tanmlanan zellikler
ve Metotlar
zellikler (Propertes)
Ad
Aklama
autoplay,
controls,
preload, loop
Daha nce ayrntl bir flekilde anlattmz bu zellikler boolean

trnden zelliklerdir. Yani bu zelliklere true ya da false
deerlerinden biri atanabilir.
src
DOMString trnden olan bu zellik medya kayna tanmlamas

iin kullanlr.
Kullanm: mediaElemanRef.ozellik[=true||false]
Kullanm: mediaElemanRef.src[=kaynak]
rnek:
currentSrc
<!DOCTYPE html>
<html>
<head>
<title>src</title>
</style>
document.getElementsByTagName(audio)[0].src=audio1.ogg;
}
</script>
</head>
<body onload=start();>
<audio controls></audio>
</body>
</html>
Sadece okunabilir olan bu zellik medya kayna bilgisini elde

etmek iin kullanlr.
Kullanm: mediaElemanRef.currentSrc
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 299
rnek: console.log(document.getElementsByTagName
(audio)[0].currentSrc);
buffered
currentTime
defaultPlaybackRate,
playbackRate
duration
ended
error
Yukardaki kodu start() fonksiyonu ierisine yerlefltirip sayfay

alfltrdnzda; file:///C:/Users/sena/Desktop/medya/audio1.ogg
fleklinde bir sonu greceksiniz.
Arabellee alnmfl medya ierii ile ilgili zaman aralklarn saklayan
TimeRanges (sadece okunabilir) trnden bir nesne dndrr.
Kullanm: mediaElemanRef.buffered
Geerli oynatma sresini saniye olarak dndrr. Daha ak olarak

oynatma akflnda gelinen noktann saniye cinsinden deerini verir
diyebiliriz.
Kullanm: mediaElemanRef.currentTime [ = value ]
Varsaylan oynatma hzn defaultPlaybackRate zellii ile

ayarlayabilirsiniz. Ya da alflma annda oynatma hzn deifltirmek
iin playbackRate zelliini kullanabilirsiniz. 1.0 deeri varsaylan
hz temsil eder. Yukardaki zelliklere atanan deer 1.0dan kk
ise medya ierii yavafl, byk ise daha hzl oynatlr.
Medya ieriinin saniye cinsinden uzunluunu renmek iin
kullanlr. Sadece okunabilir bir zelliktir. Medya ierii kullanlabilir
durumda, fakat uzunluk bilgisi bilinmiyorsa NAN, medya uzunluu
n tanml deil ise Infinity deerini alr.
Kullanm: mediaElemanRef.duration
Oynatma ifllemi ile ilgili bilgi elde etmek iin kullanlr.

Sadece okunabilir bir zelliktir. Oynatma ifllemi tamamlanmfl ise
true, tamamlanmamfl ise false deerini dndrr.
Kullanm: mediaElemanRef.ended
Oynatma akflnda meydana gelen en son hatay saklayan bir

MediaError (sadece okunabilir) nesnesi dndrr. Eer herhangi
bir hata oluflmamfl ise null deerini saklar. MediaError nesnesinin
code zelliini kullanarak hata nedenini elde edebiliriz.
mediaElemanRef.error.code
code zellii afladaki n tanml deerlerden birini dndrr.

MEDIA_ERR_ABORTED (saysal deeri 1)
MEDIA_ERR_NETWORK (saysal deeri 2)
MEDIA_ERR_DECODE (saysal deeri 3)
EDIA_ERR_SRC_NOT_SUPPORTED (saysal deeri 4)
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 300
300 HER YNYLE HTML5
networkState
A zerinden medya ieriinin indirilme durumunu elde etmek iin

kullanlr (Sadece okunabilir bir zelliktir). Bu zelliin ald deerler
tarayclar arasnda farkllk gstermektedir. zelliin ald n tanml
deerler ya da saysal deerler aflada verilmifltir.
Firefox 4:
EMPTY (0)
Medya ierii yok.
LOADING(1)
Medya ierii ykleniyor.
LOADED_METADATA(2)
Medya ieriinin metadata verisi elde edildi.
LOADED_FIRST_FRAME(3)
Medya ieriinin ilk karesi elde edildi.
LOADED(4)
Medya ieriinin tamam elde edildi.
IE ve HTML5 bildirimi:
readyState
paused
NETWORK_EMPTY (0)
NETWORK_IDLE (1)
NETWORK_LOADING (2)
NETWORK_NO_SOURCE (3)
Medya verisinin yklenmesi (kullanma hazr olmas) ile ilgili daha

ayrntl bilgiler elde etmek iin kullanlr (sadece okunabilir bir
zelliktir). zelliin ald n tanml deerler ya da saysal
deerler aflada verilmifltir.
HAVE_NOTHING(0)
Medya ierii hazr deil.
HAVE_METADATA(1)
Medya ieriinin metadata verisi hazr.
HAVE_CURRENT_DATA(2)
Geerli alma pozisyonu iin veri elde edildi.
HAVE_FUTURE_DATA(3)
Geerli alma pozisyonuna gre bir sonraki alma
pozisyonu/pozisyonlar iin veri elde edildi.
HAVE_ENOUGH_DATA(4)
Yeterli bilgi mevcut deil, fakat indirme hz yksek medya ierii
kesintisiz olarak sonuna kadar oynatlabilir.
Oynatma ifllemi duraklatlmfl ise bu zellik true, deilse false
deerini dndrr. Sadece okunabilir bir zelliktir.
Kullanm: mediaElemanRef.paused
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 301
played
muted
Oynatlmfl medya ierii ile ilgili zaman aralklarn saklayan

TimeRanges (sadece okunabilir) trnden bir nesne dndrr.
Kullanm: mediaElemanRef.played
Medya ierii sessiz olarak ayarlanmfl ise true, deilse false

deeri dndrr.
Kullanm: mediaElemanRef.muted
Dier zellikler
seekable, seeking, startTime, volume
Metotlar
HTMLMediaElement arayz ile tanmlanan metotlar kullanarak medya ieriini

kontrol edebilirsiniz. fiimdi bu metotlar inceleyelim.
canPlayType()
Taraycnn belirtilen medya formatn destekleme durumunu renmek iin kullanlr.
Kullanm: mediaElemanRef.canPlayType(medyaTr)
Bu metodun geriye dndrd deerlere bakalm.
probably: Medya tr tarayc tarafndan oynatlabilir.

maybe: Oynatlabilir olup olmad bilinmiyor.
Eer bofl bir string verisi dndrrse, tarayc belirtilen medya trn oynatamyor.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>canPlayType()</title>
p
{
margin-top: 5px;
width: 170px;
text-indent:3px;
color:White;
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 302
302 HER YNYLE HTML5
}
</style>
var video = document.getElementsByTagName(video)[0];
if (video.canPlayType(video/mp4) !== ) {
video.src = video.mp4;
} else if (video.canPlayType(video/ogg) !== ) {
video.src = video.ogg;
} else if (video.canPlayType(video/webm) !== ) {
video.src = video.webm;
}
var p_ = document.querySelector(p);
var reg = /\w+.\w+$/;
/*Video elemannn src zelliini p eleman ierisine yazdrmak istiyoruz.

(Video eleman tarafndan oynatlan dosya adn) src zelliine ulaflmak istediimizde
afladaki gibi bir ifade elde ederiz.
file:///C:/Users/sena/Desktop/medya/video.uzant bu metin ierisinden sadece
dosya ad ve uzants bilgisini elde etmek istediimden bir dzenli ifade nesnesi
(RegExp) oluflturduk. Belirtilen dzenli ifade ile eflleflen metnin sonundaki dosya ad
ve uzants bilgisini reg.exec(vSource) komut satr ile elde edip bir metin dm
olarak p eleman ierisine ekledik.*/
vSource = video.src;
p_.appendChild(document.createTextNode(oynatlan dosya:
+ + reg.exec(vSource)));
}
</script>
</head>
<video controls></video>
<p>
</p>
</body>
</html>
Yukardaki rnekte ayn medya ierii farkl tarayclarda alflabilmesi iin

farkl formatta tanmlanmfltr. Bu durumda tarayc destekledii formattaki medya
ieriini oynatacaktr.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 303
Ekran grntleri:
IE9 ekran grnts.
load()
Medya eleman tarafndan oynatlacak kaynak ierii sunucudan tekrar yklemek
iin kullanlr.
Kullanm: mediaElemanRef.load()
play()
Medya ieriini oynatmak iin kullanlr. Eer sayfa yklendikten sonra medya elemannn src zelliini deifltirdiyseniz, play() metodundan nce load() metodunu
kullanmalsnz. Bu metot alfltrldnda paused zellii false deerini alacaktr.
Kullanm: mediaElemanRef.play()
pause()
Oynatma ifllemi duraklatmak iin kullanlr. Bu metot alfltrldnda paused zellii true deerini alacaktr.
Kullanm: mediaElemanRef.pause()
rnek: Bu rnekte video eleman iin taraycnn salad kontrol ubuu yerine
kendi oluflturduunuz kontrol dmelerini kullanacaz. fiimdilik ilk rneimiz basit olmas asndan oynat/durdur ve ses a/ses kapat ifllevlerini yerine getirecek
iki tane dmeden oluflacak.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 304
304 HER YNYLE HTML5
HTML sayfas ierii:
<!DOCTYPE html>
<html>
<head>
<title>play(),pause()</title>
video
{
}
</style>
<script type=text/javascript src=video.js></script>
</head>
<video id=video1 src=bun.ogv onended=end(); width=400>
</video><br />
<img alt=pausePlay src=play.png onclick=pausePlay(); />
<img alt=pmute src=ses2.png onclick=mute(); />
</body>
</html>
video.js isimli bir JavaScript dosyas oluflturup ieriini yazmaya bafllayalm...
Komut dosyas ierisinde kullanacamz deiflkenleri direk <script> etiketi ierisinde tanmlayp, bu deiflkenlere init() fonksiyonu ierisinde deerler atayacaz.
Amacmz; tm fonksiyonlardan belirtilen deiflkenlere ulaflabilmektir.
var videoEl, img1, img2;
videoEl = document.getElementsByTagName(video)[0];
img1 = document.getElementsByTagName(img)[0];
img2 = document.getElementsByTagName(img)[1];
}
oynat/durdur ifllevini yerine getirmek iin ilk img eleman kullanlacaktr. Sayfa
yklendiinde video elemannn paused zellii true deerini alr. nk video
eleman iin oynatma ifllemi sayfa yklendiinde otomatik olarak bafllamamfltr.
Aflada ilk img eleman iin kaynak olarak kullanacamz resimler grlmektedir.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 305
Sayfa ilk yklendiinde ya da video ierii duraklatldnda ilk img elemannn

kaynak tanmlamas play.png iken, video oynatldnda kaynak tanmlamas
pause.png fleklinde olacaktr.
Kullanc ilk img elemanna tkladnda pausePlay() fonksiyonu alflacaktr. Bu

fonksiyon ierisinde video elemannn paused zellii kontrol edilecek eer bu zelliin deeri true ise video eleman oynatlacak (play() metodu kullanldndan
paused zelliinin yeni deeri false olur) ve ilk resmin kaynak tanmlamasn
pause.png olarak deifltirilecektir. Eer paused zelliinin deeri false ise medya ierii oynatlyor demektir. Bu durumda medya ierii duraklatlacak (pause()
metodu kullanldndan paused zelliinin yeni deeri true olur) ve ilk resmin
kaynak tanmlamas play.png olarak deifltirilecektir.
var pausePlay = function () {
if (videoEl.paused) {
videoEl.play();
img1.src = pause.png;
} else {
videoEl.pause();
img1.src = play.png;
}
}
Ses kontrol iin ikinci img eleman kullanlacaktr. kinci img elemanna tklandnda mute() fonksiyonu alflr. Aflada ikinci img eleman iin kaynak olarak
kullanlacak resimler grnmektedir.
Sayfa yklendiinde muted zellii varsaylan olarak false deerini alr. Bu fonksiyon ierisinde video elemannn muted zelliini kontrol edeceiz. Eer bu zellik true ise (ses kapal) muted zelliine false deerini atayp (sesi ap) ikinci img
elemannn kaynak tanmlamasn deifltiriyoruz. Eer muted zelliinin deeri
false ise (ses ak) muted zelliine true deerini atayp (sesi kapatp) ikinci img
elemannn kaynak tanmlamasn deifltiriyoruz.
var mute = function () {
if (videoEl.muted) {
videoEl.muted = false;
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 306
306 HER YNYLE HTML5
img2.src = ses2.png;
} else {
videoEl.muted = true;
}
Son olarak oynatma ifllemi tamamlandnda alflacak end() fonksiyonu ile img
elemanlarna varsaylan resimleri ve muted zelliine false deerini atyoruz.
var end = function () {
img1.src = play.png;
videoEl.muted = false;
}
Ekran grnts:
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 307
Medya eriini Kontrol Etmek

iin Kullanlabilecek Olaylar
Medya elemanlarn JavaScript yardmyla kontrol etmek iin kullanabileceiniz
olaylara bakalm.
Olay Ad
canplay
Aklama
Bu olay, sayfa yklendikten sonra medya ieriinin oynatlmas iin
yeterli tamponlanmfl veri elde edildiinde oluflur.
n koflul ile tanmlama: readyState zellii, HAVE_FUTURE_DATA

ya da HAVE_ENOUGH_DATA deerlerinden birini aldnda canplay
olay oluflur.
canplaythrough Sayfa yklendikten sonra tarayc medya ieriini tamponlama ifllemi

iin durmak zorunda kalmadan, sonuna kadar oynatacan hesaplarsa,
bu olay meydana gelir.
canplaythrough olay canplay olayndan sonra oluflur.
n koflul ile tanmlama: readyState zellii, HAVE_ENOUGH_DATA

deerini aldnda canplaythrough olay oluflur.
durationchange Medya eleman yklendikten sonra ya da medya eleman iin kaynak

dosya tanmlamas deifltirildiinde yani duration zelliinin ald
deer gncellendiinde (hesaplandnda) bu olay meydana gelir.
emptied
ended
error
loadeddata
Medya kaynak verisi elde edilemezse bu olay gerekleflir.
n koflul ile tanmlama: networkState zellii NETWORK_EMPTY

deerini aldnda emptied olay oluflur.
Oynatma ifllemi tamamlandnda oluflur. Bu olay gereklefltiinde
ended zellii true deerini alr.
Medya eleman ile ilgili bir hata meydana geldiinde bu olay oluflur.
error zelliini kullanarak hata ile ilgili bilgilere ulaflabilirsiniz.
lk alma pozisyonu iin veri elde edildiinde bu olay oluflur. Bu olay
canplay olayndan nce loadedmetadata olayndan sonra
meydana gelir.
loadedmetadata Medya ierii ile ilgili metadata verisi elde edildiinde oluflur.
Metadata verisi medya ierii ile ilgili eflitli bilgilerdir (Boyutu,
toplam sre, kaynak listesi gibi).
loadstart
Tarayc medya ieriini yklemeye baflladnda bu olay oluflur.

n koflul ile tanmlama: networkState zellii,
NETWORK_LOADING deerini aldnda loadstart olay oluflur.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 308
308 HER YNYLE HTML5
pause
Oynatma ifllemi duraklatldnda oluflur.
play
Medya ierii oynatldnda/alfltrldnda oluflur.
progress
Tarayc medya verilerini yklerken oluflur.
ratechange
Medya ieriini oynatma hz deifltiinde bu olay oluflur.
timeupdate
volumechange
Dier Olaylar
NOT
Oynatma pozisyonu deifltiinde oluflur (currentTime zelliinin

ald deer deifltiinde).
Medya ierii sessiz ya da sesli olarak ayarlandnda veya ses seviyesi
deifltirildiinde bu olay oluflur.
seeked, playing, seeking, stalled, suspend, waiting
Burada yeri gelmiflken JavaScript olay ynlendiricileri hakknda bir hatrlatma yapmak istiyorum. HTML elemanlarn iin tanml olan olaylara JavaScript kodlar yazmak iin (yani olay gereklefltiinde alflacak JavaScript kodlarn tanmlamak iin)
olay ynlendiricileri/dinleyicileri kullanlr. HTML elemanlarna olay dinleyicisi eklemek iin afladaki yntemlerden birini kullanabilirsiniz.
HTML Event Handlers

(HTML Olay Ynlendiricileri)
Olay ismine on n eki ekleyerek olay ynlendiricisi ad elde edilir. Bu isim etiket
ierisinde bir zellik (attribute) olarak kullanlr ve olay olufltuunda alflacak
JavaScript kodlarn tanmlar.
<!DOCTYPE html>
<html>
<head>
<title>Event Handler</title>
// Kodlar
}
</script>
</head>
<body>
<video id=video1 controls src=cart.ogg onended=end();
width=400>
</video>
</body>
</html>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 309
DOM Level 0 Event Handlers

Yukardaki yntemle benzer olarak elde edilen olay ynlendiricisi ad eleman referans iin bir zellik (property) olarak kullanlr ve olay olufltuunda alflacak JavaScript fonksiyonunu tanmlar.
<!DOCTYPE html>
<html>
<head>
var videoEl = document.getElementsByTagName(video)[0];
videoEl.onended = function () {
}
// Kodlar
}
</script>
</head>
<video id=video1 controls src=cart.ogg width=400>
</video>
</body>
</html>
Bir eleman iin tanmlanan olay ynlendiriciyi kaldrmak iin null deerini kullanabilirsiniz.
videoEl.onended = null;
DOM Level 2,3 Event Listener
DOM Level 2,3 bildirimleri HTML elemanlarna olay dinleyicisi eklemek iin
addEventListener() metodunu tanmlar.
Kullanm:
HTMLElement.addEventListener(type,listener,useCapture[istee Bal])
type parametresi; ile olay ad (olay trn temsil eden) tanmlanr. Olay ad on
n eki almaz.
listener parametresi; olay olufltuunda alflacak fonksiyonu tanmlar.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 310
310 HER YNYLE HTML5
useCapture parametresi; true ya da false deerlerinden birini alr. Bu parametre

ile olay dinleyicisinin eklenecei olay evresi tanmlanr.
<!DOCTYPE html>
<html>
<head>
videoEl.addEventListener(ended, end, false);
/*
Afladaki yazm formatnda kullanmanz mmkndr.
videoEl.addEventListener(ended,function(){
// kodlar
},false);
*/
}
// kodlar
}
</script>
</head>
</video>
</body>
</html>
Bir eleman iin tanmlanan olay dinleyicisini kaldrmak istiyorsanz; remove-
EventListener() metodunu kullanmalsnz.

NOT
IE 8 ve alt srmleri addEventListener(), removeEventListener() metotlarn

desteklemez. Bu metotlar yerine sadece IE tarafndan desteklenen attachEvent(),
detachEvent() metotlarn kullanabilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<head>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 311

if (document.addEventListener) {
// DOM Level 2,3 Olay Dinleyicisi
videoEl.addEventListener(ended, function () {
// Kodlar
}, false);
} else {
// Sadece IE iin olay dinleyicisi
videoEl.attachEvent(onended, function () {
});
// Kodlar
</script>
</head>
</video>
</body>
</html>
Bu blmde ksa bir flekilde olay dinleyicilerini grdk. Aslnda tarayclar arasndaki farkllklar gzeterek, bir olay dinleyici nesnesi oluflturup kullanrsanz olabilecek yazm hatalarn ortadan kaldrmfl ve fazla kod yazma derdinden kurtulmufl
olursunuz.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>Farkl Tarayclar iin olay dinleyicisi nesnesi</title>
/*Farkl tarayclarda nesnelere olay dinleyicisi(olaya karfl
fonksiyon)tanmlamak iin olay_dinleyicisi isimli bir nesne oluflturacam ve
bu nesnenin iki tane metodu olacak.*/
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 312
312 HER YNYLE HTML5
var olay_dinleyicisi = new Object();

olay_dinleyicisi.ekle = function (nesne, olay, metod) {
if (document.addEventListener) {
nesne.addEventListener(olay, metod, false);
} else if (document.attachEvent) {
nesne.attachEvent(on + olay, metod);
} else {
var olay_ad = on + olay;
nesne.olay = metod;
}
}
olay_dinleyicisi.kaldir = function (nesne, olay, metod) {
if (document.removeEventListener) {
nesne.removeEventListener(olay, metod, false);
} else if (document.detachEvent) {
nesne.detachEvent(on + olay, metod);
} else {
nesne.olay = null;
}
}
var videoEl1 = document.getElementsByTagName(video)[0];
var videoEl2 = document.getElementsByTagName(video)[1];
olay_dinleyicisi.ekle(videoEl1, ended, end1);
olay_dinleyicisi.ekle(videoEl2, ended, end2);
}
var end1 = function () {
console.log(videoEl1);
}
var end2 = function () {
console.log(videoEl2);
}
</script>
</head>
<video id=video1 controls src=cart.ogg>
</video>
<video id=video2 controls src=bun.ogv width=400>
</video>
</body>
</html>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 313
rnek: Bu rnekte yukarda yaptmz video player uygulamasna yeni zellikler
ekleyeceiz.
HTML5 sayfas ierii
<!DOCTYPE html>
<html>
<head>
<title>Video Player Uygulamas-II</title>
<link type=text/css rel=Stylesheet href=video.css />
<script type=text/javascript src=video.js>
</script>
</head>
<div id=videoPlayer>
<video id=video1 src=bun.ogv onended=end(); width=500>
Tarayc video elemann desteklemiyor.
</video>
<div id=controls>
<img alt=playPause src=play.png onclick=playPause(); />
<canvas id=progress width=300 height=20>
</canvas>
<span id=time>_:_</span>
<img alt=sesAcik src=ses1.png onclick=mute(); />
</div>
</div>
</body>
</html>
video.css dosyas ierii
div#videoPlayer
{
width: 500px;
position: relative;
height: 278px;
}
div#controls
{
position: absolute;
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 314
314 HER YNYLE HTML5
top: 238px;
left: 0px;
height: 40px;
background-color:rgba(0,0,0,0.7);
width: 500px;
visibility: hidden;
}
#controls img[alt=playPause]
{
margin-left: 10px;
margin-top: 6px;
}
canvas#progress
{
margin-bottom: 5px;
margin-left: 4px;
background-color: White;
}
#controls span
{
position:absolute;
left:370px;
top:5px;
font-size:24px;
color:#00baff;
}
#controls img[alt=sesAcik]
{
position:absolute;
left:440px;
top:4px;
}
video.js dosyas ierii
var canvas, ctx, wrap, video, controls, imgPlay,imgAudio, spanMsg;

canvas = document.getElementsByTagName(canvas)[0];
wrap = document.querySelector(div#videoPlayer);
video = document.querySelector(video);
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 315
controls = document.querySelector(div#controls);
spanMsg = document.querySelector(#controls span:nth-of-type(1));
imgPlay = document.getElementsByTagName(img)[0];
imgAudio = document.getElementsByTagName(img)[1];
wrap.addEventListener(mouseover, function () {
controls.style.visibility = visible;
}, true);
wrap.addEventListener(mouseout, function () {
controls.style.visibility = hidden;
}, true);
video.addEventListener(timeupdate, progress, false);
canvas.addEventListener(click, curPositon, false);
var playPause = function () {

if (video.paused) {
video.play();
imgPlay.src = pause.png;
} else {
video.pause();
imgPlay.src = play.png;
}
}
var progress = function () {
ctx = canvas.getContext(2d);
ctx.fillStyle = #00baff;
ctx.clearRect(0, 0, canvas.width, canvas.height);
var widthCanvas = (video.currentTime / video.duration) * (canvas.width);
if (widthCanvas > 0) {
ctx.fillRect(0, 0, widthCanvas, canvas.height);
}
var dak = Math.floor(video.currentTime / 60);
var san = Math.floor(video.currentTime) % 60;
san = (san > 9) ? san : 0 + san;
spanMsg.innerHTML = dak + : + san;
}
var curPositon = function (event) {
video.pause();
if (event.offsetX) {
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 316
316 HER YNYLE HTML5
var xcor = event.offsetX;

} else {
var xcor = event.layerX - canvas.offsetLeft;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, xcor, canvas.height);
video.currentTime = (xcor * video.duration) / canvas.width;
video.play();
imgPlay.src = pause.png;

video.muted = false;
imgAudio.src = ses1.png;
}
var mute = function () {

if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
}
Uygulama ierisinde kullandmz resim dosyalar:
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 317
Ekran grnts:
fiimdi adm adm yukardaki uygulamay nasl gereklefltirdiimizi anlatalm.

lk olarak HTML sayfas ierisinde div#videoPlayer isimli bir div eleman oluflturduk ve bu div eleman ierisinde video ve div# controls elemanlarn tanmladk. div#controls elemann kontrol ubuu olarak kullanacaz. div#controls
eleman ierisinde Oynat/Durdur, Ses a/Ses kapat grevlerini yerine getirecek
iki tane img eleman kullanacaz. Ayrca ilerleme ubuu (progress bar) olarak bir
canvas eleman ve oynatma sresini (dakika cinsinden) kontrol ubuunda gstermek iin bir span eleman kullanacaz.
Sayfa yklendiinde alflacak init() fonksiyonu ierisinde elemanlarn referanslar alnmfltr (Elemanlara nesne olarak ulafllmfltr).
Kullanc, Mouse ile div#videoPlayer eleman zerine geldiinde kontrol ubuu
gzkecek, dier durumlarda gzkmeyecektir. Bunun iin afladaki kodlar yazlmfltr.
wrap.addEventListener(mouseover, function () {
controls.style.visibility = visible;
}, true);
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 318
318 HER YNYLE HTML5
wrap.addEventListener(mouseout, function () {
controls.style.visibility = hidden;
}, true);
init() fonksiyonu ierisine video ve canvas elemanlar iin olay dinleyiciler eklenmifltir. playPause(), mute(), end() fonksiyonlarnn grevlerini bir nceki r-
nekte anlatlmfltk.
canvas eleman ile oluflturduumuz ilerleme ubuunu; video oynatm sresini

grsel olarak kullancya gstermek iin ve kullancnn video akfln bu ilerleme
ubuunu kullanarak deifltirebilmesi iin kullanacaz.
Video elemannn timeupdate olaynda progress() fonksiyonu alflacaktr. Bu

fonksiyon her alfltnda canvas eleman zerini clearRect() metodu ile temizler.
Ayn zamanda sol st kflesi canvas(0,0) noktas olan ykseklii 20px ve genifllii
geerli oynatma sresine (currentTime) bal olarak hesaplanan bir dikdrtgen izer.
currentTime zelliine bal olarak progress() fonksiyonunun her alflmasnda
izilecek dikdrtgenin genifllii artar ve bir ilerleme ubuu elde edilmifl olur. Peki,
izilecek dikdrtgenin geniflliini currentTime zelliine bal olarak nasl elde
ediyoruz? Afladaki koda bakalm...
var widthCanvas = (video.currentTime / video.duration) * (canvas.width);
currentTime (geerli oynatma sresini saniye olarak dndrr) zellii 0.0 olduunda widthCanvas deiflkeni 0dr. currentTime=duration olduunda, widthCanvas
deiflkeninin ald deer canvas.width, yani 300px olacaktr. Aslnda kurduumuz
mantk basit olmakla beraber amacmz; currentTime zelliinin ald deere bal
olarak genifllii hesaplanan bir dikdrtgeni canvas eleman zerine izdirmektir.
Ayrca progress() fonksiyonu ierisinde video akflnda gelinen zaman yani geerli oynatma sresini dakika cinsinden span eleman ierisine yazdryoruz. Bu ifllemi afladaki kodlar kullanarak yapmaktayz.
var dak = Math.floor(video.currentTime / 60);
var san = Math.floor(video.currentTime) % 60;
san = (san > 9) ? san : 0 + san;
Math.floor() metodu ondalkl sayy kendinden kk ilk tamsayya yuvarlar.

Math.floor(32.9) >> 32
Math.floor(32.2) >> 32
Math.floor(-32.9) >> -33
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 319
Kullanc, canvas eleman zerinde Mouseun sol tufluna tkladnda curPositon() isimli fonksiyon alflacaktr. Amacmz kullancnn canvas zerinde tklad noktann yatay koordinatn bulup ilerleme ubuunu bu noktaya gre gncellemek ve video akfln kullancnn canvas zerinde tklad noktaya gre elde ettiimiz currentTime deerine getirmektir. curPositon() fonksiyonu alfltnda pause() metodu ile medya akfln durduracaz. Canvas elemannn sol
st kflesi ile tklanan nokta arasndaki yatay uzakl elde edip, bu deeri xcor
deiflkeni ierisinde saklyoruz.
event.offsetX zellii; olayn olufltuu elemann (hedef eleman <canvas>) sol

st kflesi ile kullancnn tklad nokta arasndaki yatay uzakl verir. Fakat offsetX zelliini desteklemeyen tarayclar iin event nesnesinin layerX ve canvas
elemannn offsetLeft zellikleri kullanlmfltr.
currentTime deerini progress() fonksiyonunda kullandmz denklemden fay-
dalanarak elde edeceiz.
video.currentTime=(xcor *video.duration)/canvas.width;
Daha sonra video akflnn belirlediimiz noktadan itibaren devam etmesi iin play()
metodunu kullanp ifllemi bitirebiliriz.
+HTML5-BOLUM8
6/17/11
4:30 PM
320 HER YNYLE HTML5
Page 320
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 321
SRKLE-BIRAK
fiLEMLER
ARAYZ
(DRAG and
DROP API)
Srkle-brak ifllemleri, web sayfalarnda ska kullanlan bir etkileflim trdr.

HTML5 bildirimiyle tanmlanan Drag and Drop API (DnD) arayzn kullanarak
srklenebilir (taflnabilir) nesneler oluflturabilirsiniz. Tarayc DragEvents (Srkleme Olaylar) olufltuunda DnD arayznden retilen dataTransfer nesnesini
kullanarak srkleme ifllemini gereklefltirir. Srkleme ifllemi, srklenecek kaynak eleman ve bu elemann braklaca hedef eleman arasnda gereklefltirilir. Aslnda srklenen kaynak eleman deil bu elemanla iliflkili olan bir veridir.
zetle srkle-brak ifllemi; DragEvents ve dataTransfer nesnesinin zellik ve
metotlar kullanlarak gereklefltirilir.
dataTransfer Nesnesi
dataTransfer nesnesi, srklenecek veriyi saklar ve event nesnesi iinde tanmldr

(srkleme olaylarnda dataTransfer nesnesine event.dataTransfer fleklinde ula-
flacaz). Bu nesne DnD arayz ile tanmlanan zellik ve metotlara sahiptir. Aflada bu nesne iin tanml olan zellik ve metotlara bakacaz.
dataTransfer Nesnesi zellikleri

zellik
dropEffect
Aklama
Srkle-brak iflleminde kaynak veri, hedef nesne zerine brakldnda
kullanlacak tarayc davranfln ayarlar. Bu zellii kullanarak kaynak
verinin hedef nesneye kopyalanmasn ya da taflnmasn salayabilirsiniz.
Bu zelliin ald deer effectAllowed zellii ile tanmlanan deer
ya da deerlerden biri olmaldr. Bu zellie dragenter ve dragover
olaylarnda deer atanabilir.
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 322
322 HER YNYLE HTML5
Kullanm: dataTransfer.dropEffect[=value]
Bu zelliin alabilecei deerler: copy, move, link, none
effectAllowed dropEffect zellii tarafndan kullanlabilecek, izin verilen brakma

davranfln/davranfllarn ayarlamak iin kullanlr. Bu zellie
dragstart olaynda deer atanabilir.
Kullanm: dataTransfer.effectAllowed[=value]
Bu zelliin alabilecei deerler: none, copy, copyLink,

copyMove, link, linkMove, move, all, uninitialized
Aflada effectAllowed ve dropEffect zelliklerine atanabilecek

deerler sonucunda tarayc tarafndan gsterilecek davranfllar
listelenmifltir.
effectAllowed
Tarayc Davranfl
uninitialized, copy,
copyLink, copyMove, all
deerlerinden herhangi biri
copy
copy
link
link
uninitialized, move,
copyMove, linkMove, all
move
move
uninitialized, link,
copyLink, linkMove, all
Dier zellikler
dropEffect
files, types
dataTransfer Nesnesi Metotlar

Metod
setData()
Aklama
Srklenecek veriyi ve trn tanmlamak iin kullanlr.
Kullanm: dataTransfer.setData(format,data)
format parametresi ile srklenecek verinin trn tanmlanr.

Srklenecek veri; bir metin, link, dosya, resim ya da bir HTML dm
olabilir. Format zelliine atanabilecek deerlere tarayclarn verdii
destek farkllk gstermektedir. fiu an iin ou tarayc sadece
text/plain ve text/uri-list deerlerine destek vermektedir.
Bu yzden blm boyunca format zelliine sadece text/plain
deerini atayarak metin ve eleman srkleme ifllemlerini yapacaz.
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 323
SRKLE-BIRAK fiLEMLER ARAYZ (DRAG AND DROP API) 323
data parametresi srklenecek veriyi tanmlar.

getData()
Bu metot, dragstart olaynda kullanlmaldr.
Srklenen veriyi elde etmek iin kullanlr.
Kullanm: data=dataTransfer.getData(format)
format parametresi ile dataTransfer nesnesi iinde bulunan, yani

ulaflmak istediimiz verinin tr tanmlanr. Eer bir metin srkleme
ifllemi yaplyorsa, getData() metodu ierisinde kullanacamz
format deeri text/plain olmaldr.
Bu metot drop olaynda kullanlmaldr.
Dier Metotlar
addElement(), setDragImage(), clearData()
DragEvent (Srkleme Olaylar)

Olay
drag
dragend
dragstart
dragleave
dragover
dragenter
drop
Aklama
Srkleme ifllemi boyunca kaynak eleman (srklenen eleman) iin
drag olay oluflur.
Srkleme ifllemi bittiinde, yani kullanc hedef eleman zerinde
fareyi serbest braktnda kaynak eleman iin dragend olay oluflur.
Srkleme ifllemi baflladnda kaynak eleman iin dragstart olay

oluflur.
Kaynak eleman hedef eleman zerinden ayrldnda hedef eleman
iin dragleave olay oluflur.
Kaynak eleman hedef eleman zerinde srklendiinde hedef eleman

iin dragover olay oluflur.
Kaynak eleman hedef eleman zerine girifl yaptnda hedef eleman
iin dragenter olay oluflur.
Srkleme ifllemi bittiinde yani kullanc hedef eleman zerinde
fareyi serbest braktnda hedef eleman iin drop olay oluflur.
fiimdi basit bir srkle brak uygulamas yaparak iflleme bafllayalm...

<!DOCTYPE html>
<html>
<head>
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 324
324 HER YNYLE HTML5
<title>Basit Srkle-Brak</title>
<style>
#drop
{
min-height:100px;
width:200px;
border:1px solid #cc0066;
margin:5px;
padding:10px;
}
#drag
{
background-color: #990000;
width:80px;
padding:5px;
text-align: center;
color:White;
font-size:17px;
font-weight:bold;
cursor:move;
}
</style>
/*Event nesnesi meydana gelen olay(event) ile ilgili ayrntl bilgilere ulaflmak ve
olay akfln kontrol etmek iin kullanlr. DOM Event Interface(Olay Arayz) ile tanml olan event
nesnesini farkl tarayclarda doru olarak elde edebilmek iin eventObject isimli bir nesne
oluflturacaz. IEde event nesnesine window.event, Firefox ve dier tarayclarda sadece event
fleklinde ulafllr.
*/
var eventObject = {
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.SrcElement;
/*Olayn meydana geldii elemana ulaflmak iin (Eleman nesne olarak
elde etmek iin);

w3c, firefox ve dier tarayclarda>>
target zellii kullanlr. target zellii;
DOM Level 2 Events ile tanmlanmfltr.
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 325

Internet Explorer da ise>>
srcElement zellii kullanlr.
*/
},
getPreventDefault: function (event) {
/*
Olayn eleman zerinde oluflturduu varsaylan davranfl iptal

etmek iin;
w3c,firefox ve dier tarayclarda>>
preventDefault() metodu kullanlr. Bu metod;
DOM Level 2 Events ile tanmlanmfltr.
Internet Explorer da ise>>
returnValue zellii kullanlr.
Bu zellie false deeri atanmaldr.
///////////////////////////////////////////
event.preventDefault() metodu olay akfln durdurmaz.
[Bu metot cancelable=true yani engellenebilir olaylar iin kullanlr.]
*/
};
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false;
}

var target = document.querySelector(#drop);
var drag = document.querySelector(#drag);
/*HTML5 drag and drop API kullanarak en basit anlamda bir srkleme
ifllemi yapmak iin ilk olarak srklenecek elemann draggable zelliine
(attribute) true deeri atanmaldr.
Daha sonra bu elemann dragstart olayna bir olay dinleyicisi eklenmeli
ve bu olay dinleyici fonksiyon ierisinde srklenecek veri tanmlanmaldr.
*/
drag.addEventListener(dragstart, function (event) {

var evt = eventObject.getEvent(event);
// event nesnesi elde edildi.
evt.dataTransfer.setData(text, evt.target.id);
/*dataTransfer nesnesi ierisine srklenecek div#drag elemannn
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 326
326 HER YNYLE HTML5

id zelliinin deerini atyoruz. (drag verisi srklenecek)
*/
}, false);
target.addEventListener(drop, function (event) {

var idDrag = event.dataTransfer.getData(text);
/*dataTransfer nesnesi ierisindeki veri idDrag isimli deiflken
ierisine atanyor.*/
eventObject.getTarget(event).appendChild(document.getElementById(idDrag));
/*Sonu olarak id zelliinin deeri idDrag deiflkeni ierisindeki
metinle ayn olan eleman hedef eleman ierisine ekleniyor. */
eventObject.getPreventDefault(event);
}, false);
/*Hedef elemann dragover ve dragenter olaylar iin afladaki olay

dinleyicilerini ekleyerek uygulamamz bitirelim.*/
target.addEventListener(dragover, function (event) {

}, false);
target.addEventListener(dragenter, function (event) {

}, false);
}
</script>
</head>
<div id=drag draggable=true>Srkle1</div>
<div id=drop>
</div>
</body>
</html>
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 327
Ekran grnts:
Yukardaki rneimizde kaynak eleman (#drag) hedef eleman (#drop) zerine braktmzda kaynak eleman appendChild() metoduyla (#drop) isimli eleman ierisine ekleniyor. Bu ekleme ifllemi (#drop) elemann ierisindeki elemanlarn normal akflna gre yaplyor. rnein; (#drop) elemannn ierisinde bir div eleman
olsayd ve biz taflma ifllemini yapsaydk afladaki ekran grntsn alacaktk.
Afladaki satr (#drop) eleman ierisine ekleyelim.
<div style=background-color:#66CCFF;>drop>>div</div>
Sonu:
Bir sonraki sayfadaki rnekte kullancnn #drop eleman ierisine srkledii resimlerin bu eleman ierisinde birer kopyasn oluflturacaz. Ayrca bu kopyann altna resmin alt zelliine ald deeri ilifltireceiz.
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 328
328 HER YNYLE HTML5
<!DOCTYPE html>
<html>
<head>
<title>Resim Kopyala(Srkle-Brak)</title>
<style>
#drop
{
width: 64px;
padding: 2px 12px;
height: 300px;
border: 1px solid #cc0066;
float: left;
margin-left: 15px;
}
#drag
{
float: left;
width: 64px;
}
</style>
var eventObject = {
getEvent: function (event) {
return event ? event : window.event;
},
getTarget: function (event) {
return event.target || event.SrcElement;
},
getPreventDefault: function (event) {
};
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false;
}
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 329

var target = document.querySelector(#drop);
var drag = document.querySelectorAll(#drag img);
/*
document.querySelector() metodu seici ile eflleflen tm elemanlarn

bir listesini dndrr. Bu liste StaticNodeList (Static dm listesi) trndendir.
*/
for (var i = 0; i < drag.length; i++) {

drag[i].setAttribute(draggable, true);
}
/*#drag eleman ierisindeki tm img elemanlarna draggable
zelliini ekledik*/
for (var i = 0; i < drag.length; i++) {

drag[i].addEventListener(dragstart, dragStart, false);
}
/*#drag eleman ierisindeki tm img elemanlarnn dragStart olaylarna
olay dinleyicisi ekledik.*/
target.addEventListener(drop, function (event) {

var data = event.dataTransfer.getData(text);
evt.target.innerHTML += data;
/*dataTransfer nesnesi ierisindeki metin innerHTML zellii
kullanlarak #drop eleman ierisine eklendi.
*/
}, false);
target.addEventListener(dragover, function (event) {
}, false);
target.addEventListener(dragenter, function (event) {

}, false);
}
var dragStart = function (event) {
evt.dataTransfer.setData(text, <img src= +
evt.target.src + /><br/><span> + evt.target.alt + </span>);
/*dataTransfer nesnesi ierisinde metin saklayarak resim kopyalama ifllemi

yapacaz. dataTaransfer nesnesi ierisinde; HTML olarak bir img birde span eleman
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 330
330 HER YNYLE HTML5

oluflturacak formatta yazlan bir metin saklayacaz. Srklenen resmin src zelliinin deeri
metin olarak yazdmz img elemannn src zelliine atanacaktr. Ayrca srklenen resmin
alt zelliinin deeri metin olarak formatladm span eleman ierisine eklenecektir.*/
}
</script>
</head>
<div id=drag>
<img src=HTML5_Semantics_64.png alt=Semantics/>
<img src=HTML5_3D_Effects_64.png alt=3D-Effects/>
<img src=HTML5_Offline_Storage_64.png alt=offline-Storage/>
<img src=HTML5_Styling_64.png alt=Style/>
</div>
<div id=drop>
</div>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 331
GEOLOCATION
API
10
Geolocation API kullanarak gelifltireceiniz web uygulamalaryla kullanclarn konum (corafik koordinat) bilgilerine ulaflabilir ve bu bilgileri kullanclarn hizmetine sunabilirsiniz (Kullancnn konumunu paylaflmay kabul etmesi flartyla). Elde
edilen konum bilgisi Enlem ve Boylam verisi fleklinde olacaktr. Elde edilen konum
bilgisini online harita servisleri ile beraber kullanp, kullancya konumunu grsel
olarak (harita zerinde) gstermek iflin en faydal taraflarndan biridir.
geolocaton Nesnesi
Corafik konum bilgisini elde etmek iin kullanlan temel nesnedir. Geolocation
nesnesi window.navigator nesnesinin alt nesnesi olarak tanmlanmfltr. Tarayclarn eski srmlerinin Geolocation API desteklememe durumunu dikkate alarak kodlarnz afladaki gibi bir if yaps ierisine yazmay unutmaynz.
if (navigator.geolocation) {
/*geolocation API kullanlabilir*/
} else {
}
/*geolocation API desteklenmiyor*/
fiimdi bu nesnenin metotlarna bakalm.
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 332
332 HER YNYLE HTML5
getCurrentPoston()
Taraycnn alflt bilgisayarn geerli konumunu elde etmek iin kullanlan metottur.
Kullanm:
navigator.geolocation.getCurrentPosition(successCallback[,errorCallback][,options])
successCallback (gerekli) parametresi position nesnesini parametre olarak

kabul eden bir fonksiyon tanmlar. Bu fonksiyon ierisinde enlem ve boylam
bilgileri elde edilir.
errorCallback, corafik konum bilgisi elde edilirken bir hata meydana geldiinde (ifllem baflarsz olduunda) alflacak fonksiyonu tanmlar. Oluflan hata ile
ilgili bilgi elde etmek iin bu fonksiyona bir parametre tanmlamas yaplmaldr.
(Tanmlanan parametre PositionError tipinde bir nesne olarak ifllem grr.)
options parametresi pozisyon hesaplanrken kullanlacak PositionOptions
nesnesinin zelliklerine deer atamak iin kullanlr.
geolocation nesnesi ile beraber kullanlan position, PositionError,

PositionOptions nesneleri ayrntl olarak incelenecektir.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>geolocation</title>
navigator.geolocation.getCurrentPosition(successFunction,
errorFunction);
} else {
alert(Geolocaiton API tarayc tarafndan
desteklenmiyor);
}
}
var successFunction = function (position) {
var lat = position.coords.latitude; /*Enlem*/
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 333
GEOLOCATION API 333
+ lng);
var lng = position.coords.longitude; /*Boylam*/

console.log(Enlem(latitude): + lat + \nBoylam(longitude):
}
var errorFunction = function (err) {
alert(hata!);
}
</script>
</head>
</body>
</html>
Taraycy alfltrdmzda ilk nce konum bilgisini paylaflmak isteyip istemediimiz sorulacaktr.
Konumu paylafl deyip firebug konsoluna baktnzda konumunuzu saysal olarak

elde ettiinizi greceksiniz.
watchPoston()
getCurrentPosition() metodu ile ayn parametreleri alan bu metodun fark,
konum bilgilerini gncelleyebilmesidir. Elde edilmifl konum bilgisinden daha doru

bir konum bilgisine ulaflldnda ya da kullancnn pozisyonu deifltiinde konum
bilgileri gncellenir (position nesnesi ierisindeki veriler gncellenir). zellikle
mobil cihazlarda getCurrentPosition() yerine bu metodu tercih edebilirsiniz.
Kullanm:
watchId = navigator.geolocation.watchPosition(successCallback
[, errorCallback] [, options])
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 334
334 HER YNYLE HTML5
watchId deeri clearWatch() metodu ile kullanlmak zere watchPosition()
metodu tarafndan dndrlen benzersiz bir kimlik deeridir.
clearWatch()
watchPosition() metodu ile iliflkili olarak kullanlan bu metot corafik konum

gncellemelerini durdurmak iin kullanlr. Yani bu metot kullanldktan sonra kullancnn corafik konum deifliklikleri izlenmez ve konum bilgileri gncellenmez.
Kullanm: navigator.geolocation.clearWatch(watchId)
poston Nesnesi
Geolocation nesnesinin getCurrentPosition() ve watchPosition() metotlarnn

successCallback parametresini hatrlaynz. Bu parametre yerine bir fonksiyon tanmlyorduk. flte bu fonksiyon ierisinde konum bilgilerine ulaflmak iin position
nesnesi kullanlr.
zellik
Aklama
coords
getCurrentPosition() ve watchPosition() metotlar tarafndan

elde edilen corafik konum bilgilerini saklayan nesnedir.
timestamp
Konum bilgisinin elde edilme zamann dndrr.
coords Nesnesi
Afladaki zellikler readonly (sadece okunabilir)dir. Bu zelliklerin ald deerlere ulaflmak iin position.coords.zellik fleklinde bir yol izlenmelidir.
zellik
latitude
longitude
altitude
Aklama
Ondalk derece cinsinden enlem verisini elde etmek iin kullanlr.
Bu deer -90.00 ile +90.00 arasnda olabilir.
Ondalk derece cinsinden boylam verisini elde etmek iin kullanlr.
Bu deer -180.00 ile +180.00 arasnda olabilir.
Rakm bilgisini (ykseklik) elde etmek iin kullanlr. Bu veri WGS 84
(World Geodetic System) sistemi kullanlarak elde edilir.
Dier zellikler heading, speed, accuracy, altitudeAccuracy
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 335
GEOLOCATION API 335
postonError Nesnesi
getCurrentPosition() ve watchPosition() metotlarnn errorCallback para-
metresi, hata olduunda alflacak fonksiyonu tanmlyordu. flte bu fonksiyon ierisinde oluflan hata ile ilgili bilgi elde etmek iin positionError nesnesinin zellikleri kullanlr. errorCallback fonksiyonu iin yazmfl olduunuz parametre, fonksiyon ierisinde positionError nesnesi olarak ifllem grr.
rnek:
var errorFunction = function (error) {
alert(error.code);
// error parametresi positionError nesnesini temsil eder.
Afladaki zellikler readonlydir.

zellik
code
Aklama
Konum bilgisi elde edilirken meydana gelen hatann trn gsteren bir
tamsay dndrr. Aflada code zelliinin alabilecei saysal deerler
(efldeer hata kodlar) listelenmifltir.
UNKNOWN_ERROR (saysal deeri 0)
Afladaki hata durumlar dflnda bilinmeyen bir hata meydana gelmifltir.
PERMISSION_DENIED (saysal deeri 1)
Kullanc konumunu paylaflmay kabul etmemifltir.
POSITION_UNAVAILABLE (saysal deeri 2)
Kullancnn konumu tespit edilememifltir.
TIMEOUT (saysal deeri 3)
Zaman aflm meydana gelmifltir.
message
rnek:
Hata ayklama ifllemleri iin kullanlabileceiniz bir deer tanmlamas

yapabilirsiniz.
<!DOCTYPE html>
<html>
<head>
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 336
336 HER YNYLE HTML5
<title>geolocation positionError Nesnesi </title>

navigator.geolocation.getCurrentPosition(successFunction,
errorFunction);
} else {
alert(Geolocaiton API tarayc tarafndan
desteklenmiyor);
}
}
var successFunction = function (position) {
var lat = position.coords.latitude; /*Enlem*/
var lng = position.coords.longitude; /*Boylam*/
alert(Enlem(latitude): + lat + \nBoylam(longitude): + lng);
alert(position.altitude);
}
var errorFunction = function(error) {
var msg = Hata !;
switch (error.code) {
case error.UNKNOWN_ERROR:
msg= Blinmeyen bir hata olutu;
break;
case error.PERMISSION_DENIED:
msg = Kullanc konumunu paylamay kabul etmedi.;
break;
case error.POSITION_UNAVAILABLE:
msg = Pozisyon bilgisi elde edilemedi;
break;
case error.TIMEOUT:
msg = zaman am gerekleti;
break;
}
alert(msg);
}
</script>
</head>
</body>
</html>
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 337
GEOLOCATION API 337
Ekran grnts:
Reddet dmesine tklayp sonuca bakalm.
postonOptons Nesnesi
getCurrentPosition() ve watchPosition() metotlar iin options parametresini

hatrlaynz. Options parametresi, positionOptions nesnesinin zelliklerine deer
atamak iin kullanlmaktayd. positionOptions nesnesinin zellikleri aflada verilmifltir.
zellik
Aklama
enableHighAccuracy Boolean trnden bir zelliktir (true ya da false deerlerinden

birini alr). En iyi konum bilgisini elde etmek iin kullanabileceiniz
bir zelliktir. Fakat bu zelliin kullanlmas durumunda ge yant
alma ya da fazla g tketimi gibi sorunlar ortaya kabilir.
Bu zelliin varsaylan deeri falsedur.
timeout
maximumAge
Taraycnn konum verisini elde etmek iin kullanabilecei

maksimum sreyi (izin verilen sre) tanmlar. Bu zellie
milisaniye cinsinden bir deer atanmaldr.
nbellee alnan konum bilgisi iin zaman aflm sresini belirler.
Bu zellie milisaniye cinsinden bir deer atanmaldr. Bu zelliklere afladaki flekilde deer atayabilirsiniz.
navigator.geolocation.getCurrentPosition(successFunction, errorFunction,
{ enableHighAccuracy: true, timeout:17000,maximumAge: 20000 });
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 338
338 HER YNYLE HTML5
Online Harita
Servislerini Kullanmak
Geolocation nesnesini kullanarak elde edeceimiz bilgiler saysal olacaktr. Bu durumda bu saysal konum bilgileri ile beraber online harita servislerini kullanp kullancya konumunu grsel olarak harita zerinde gsterebiliriz.
Online harita servisi olarak Google Maps ya da OpenStreetMap/OpenLayers kullanabilirsiniz. Fakat kullanm kolayl ve verdii geliflmifl harita destei asndan
Google Maps kullanmay tercih edeceiz.
lk nce enlem ve boylam bilgilerini saysal olarak girerek online harita servislerinin kullanmna bakalm.
rnek:
<!DOCTYPE html>
<html>
<head>
<title>google maps</title>
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 10px;
}
</style>
<script type=text/javascript
src=http://maps.google.com/maps/api/js?sensor=true>
</script>
function init() {
var latlng = new google.maps.LatLng(41.10, 29.05);
var mapOptions = {
zoom: 10,
center: latlng,
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 339
GEOLOCATION API 339
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(map),
mapOptions);
}
</script>
</head>
<body onload=init()>
<div id=map style=width:400px; height: 200px>
</div>
</body>
</html>
Ekran grnts:
Google Maps metotlarn ksaca anlatmak iin yukardaki uygulamada enlem ve

boylam deerlerini kendimiz girdik (HTML5 Geolocation API kullanmadk).
Google Maps servisini kullanmak iin ilk nce <head> etiketleri arasna afladaki
<script> etiketini ekledik (Google Maps APIyi sayfaya dahil etmek iin).
</script>
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 340
340 HER YNYLE HTML5
Enlem ve boylam deerlerini saklayacak bir Latlng nesnesi tanmlamamz gerekir.

LatLng nesnesi oluflturmak iin afladaki yol izlenmelidir.
var Latlng = new google.maps.LatLng(Latitude, Longitude)
Latitude: Enlem.
Longitude: Boylam.
Enlem ve boylam deerlerini girerek LatLng nesnesi oluflturduk.
var latlng = new google.maps.LatLng(41.10, 29.05);
Harita ile ilgili seenekleri tanmlamak iin mapOptions isimli bir nesne oluflturduk.
var mapOptions = {
zoom: 10,
center: latlng,
};
zoom: Yaknlafltrma orann ayarlamak iin kullanlr.
center: Bu zellie latlng nesnesi atanr (Hedef konum).

mapTypeId: Kullanlacak harita trn tanmlar.
Kullanabileceiniz harita trleri de flyledir:

google.maps.MapTypeId.ROADMAP
google.maps.MapTypeId.SATELLITE
google.maps.MapTypeId.HYBRID
google.maps.MapTypeId.TERRAIN
Son olarak mapOptions nesnesi ierisindeki zellikleri kullanan ve div#map eleman

ierisinde gsterilecek bir map nesnesi tanmlayarak ifllemi bitiriyoruz.
var map = new google.maps.Map(document.getElementById(map), mapOptions);
Yukardaki uygulamadaki mapOptions nesnesi ierisinde tanmlanan mapTypeId

deerini afladaki gibi deifltirerek uygulamay tekrar alfltralm.
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 341
GEOLOCATION API 341
fiimdi HTML5 Geolocation API + Google Maps kullanarak bulunduumuz konumu bize, harita zerinde grsel olarak gsterecek bir rnek uygulama gelifltireceiz.
<!DOCTYPE html>
<html>
<head>
<title>google maps</title>
body
{
height: 100%;
margin: 0px;
padding: 10px;
}
</style>
</script>
function init() {
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 342
342 HER YNYLE HTML5

/*Eer geolocation nesnesi tarayc tarafndan destekleniyor ise
getCurrentPosition() metodu arlacak.
*/
navigator.geolocation.getCurrentPosition(pozisyonBul,hata);
} else {
alert(Tarayc geolocation API desteklemiyor....);
}
}
var pozisyonBul = function (position) {
/*Bulunduumuz konumun enlem ve boylam bilgilerini

coords nesnesini kullanarak elde edeceiz.*/
var lat = position.coords.latitude;

var lng = position.coords.longitude;
/*Enlem ve boylam deerlerini saklayan bir latlng nesnesi oluflturalm.*/
var latlng = new google.maps.LatLng(lat, lng);

/*Harita zelliklerini tanmlayalm*/
var mapOptions = {
zoom: 14,
center: latlng,
};
/*Sonu olarak haritann div#map eleman ierisinde gsterilmesini salayalm*/
var map = new google.maps.Map(document.getElementById(map),

mapOptions);
/*Son olarak basit bir flekilde bulunduumuz noktay harita zerinde
iflaretleyecek bir baloncuk oluflturarak ifllemi bitirelim*/
});
var marker = new google.maps.Marker({

position: latlng,
map: map,
title: Buradasnz
var hata = function (error) {
/*Konum bilgisi hesaplanrken hata oluflursa alflacak kodlar...*/
var msg = Hata !;

switch (error.code) {
case error.UNKNOWN_ERROR:
msg = Blinmeyen bir hata olutu;
break;
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 343
GEOLOCATION API 343
case error.PERMISSION_DENIED:
msg = Kullanc konumunu paylamay kabul
etmedi.;
break;
case error.POSITION_UNAVAILABLE:
msg = Pozisyon bilgisi elde edilemedi;
break;
case error.TIMEOUT:
msg = zaman am gerekleti;
break;
}
alert(msg);
</script>
</head>
<body onload=init()>
<div id=map style=width: 500px; height: 300px>
</div>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 344
344 HER YNYLE HTML5
Tarayc Destei
Geolocation API iin tarayc destek durumu flyledir:

Tarayc
Srm
Internet Explorer
IE9+
Firefox (Gecko)
3.5 (1.9.1)+
Opera
10.60
Safari (WebKit)
5 (533)
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 345
WEB STORAGE
11
Web Storage (DOM Storage olarak da adlandrlr) API, istemci tarafnda veri saklama ifllemini olduka basit, ifllevsel ve gvenli bir hale getirmektedir. Web storage
yapsnda veriler (anahtar = deer) fleklinde birer ikili ift olarak saklanr. Web Storage, istemci tarafnda veri saklama ifllemleri iin sessionStorage ve localStorage
olarak tanmlanan iki ayr yap sunar. stemci tarafnda veri saklamak denince hemen aklnza erezler (cookies) gelebilir.
Web Storage yapsnn erezlerden birok stnl bulunmaktadr.
erezler ile saklanacak maksimum veri bykl 4 KB iken, Web Storage ile MBlar
seviyesinde veri saklanabilir. erezler de ayn web sitesini rnein; iki farkl sekmede ya da pencerede alfltrdnzda kullanlacak erez ayn olacandan, problemler yaflanabilmektedir. Bu sorun sessionStorage (oturum depolama) yaps ile yaflanmaz. nk bu yapda veriler oturum baznda saklanr.
sessionStorage ve localStorage nesneleri ortak olarak Storage arayz ile tanmlanan metot ve zelliklere sahiptirler. Bu nesneler window nesnesinin birer zellii olarak tanmldrlar. rnein; sessionStorage nesnesine window.sessionStorage ya da sadece sessionStorage yazarak ulaflabilirsiniz.
sessonStorage
(Oturum Depolama)
Veriler sadece oturum baznda saklanr. Yani kullanc bir web sitesini atnda
sessionStorage ile saklanan veri sadece belirtilen web sitesinin ald tarayc
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 346
346 HER YNYLE HTML5
penceresi ya da sekmesi iin geerli olur. Sekme ya da pencere kapatldnda

sessionStorage ile saklanan veriler silinir.
Kullanm: window.sessionStorage.(zellik/Metot)
localStorage (Yerel Depolama)

stemci tarafnda oturumdan bamsz, kalc olarak veri saklamak iin kullanlr.
Yerel veri sadece kendisini oluflturan web sitesi tarafndan kullanlabilir (Veri sakland sre boyunca). Saklanacak veriler iin bir zaman snrlamas yoktur.
window.localStorage.(zellik/Metot)
Storage Nesnesi (sessonStorage,

localStorage) zellik ve Metotlar
sessionStorage ve localStorage nesneleri Storage arayz ile tanmlanan afla-
daki ortak zellik ve metotlara sahiptirler.
setItem()
kili bir veri ifti oluflturmak iin kullanlr. Bu veri ifti bir anahtar ad birde deerden oluflur. Ksacas; bir deiflken ve bu deiflken iin bir deer tanmlar.
Kullanm:
storage.setItem(key, deer);
storage[key] = deer;
storage.key = deer;
rnek:
window.localStorage.setItem(tarayc,firefox 4);
getItem()
Belirtilen anahtarn (deiflken ad) deerini elde etmek iin kullanlr.
Kullanm: deger = storage.getItem(key)
rnek:
localStorage.setItem(tarayc,firefox 4);
alert(localStorage.getItem(tarayc));
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 347
WEB STORAGE 347
removeItem()
Belirtilen anahtar deeri ile beraber siler.
Kullanm: storage.removeItem(key)
rnek:
localStorage.setItem(tarayc,firefox 4);
alert(localStorage.getItem(tarayc)); // sonu :firefox 4
localStorage.removeItem(tarayc)
alert(localStorage.getItem(tarayc)); // sonu:null
clear()
Tm veri iftlerini (anahtarlar ve deerleri) siler.
Kullanm: storage.clear()
key()
Indeks numaralarn kullanarak anahtar isimlere ulaflmaya yarar. Indeks numaralar
0dan bafllayacaktr.
Kullanm: storage.key(index)
rnek:
<!DOCTYPE html>
<html>
<head>
<title>storage.key()</title>
var storage=window.localStorage;
storage.setItem(A, firefox 4);
storage.setItem(B, Opera);
var key1 = storage.key(0);
var value1 = storage.getItem(key1);
var key2 = storage.key(1);
var value2 = storage.getItem(key2);
console.log(key1 + = +value1);
console.log(key2 + = +value2);
}
</script>
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 348
348 HER YNYLE HTML5
</head>
</body>
</html>
Ekran grnts:
Firefox 4 Firebug ekran grnts
length zellii
storage nesnesi ile eriflilebilecek veri iftlerinin (anahtar = deer) saysn elde et-
mek iin kullanlr.
Kullanm: storage.length
rnek:
<!DOCTYPE html>
<html>
<head>
<title>storage.length</title>
var storage = window.localStorage;
storage.clear();
/*Daha nce kaydedilmifl yerel veri iftlerini
clear() metoduyla siliyoruz.*/
storage.setItem(A, firefox 4);

storage.setItem(B, Opera);
console.log(storage.length=+storage.length);
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + = + value);
}
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 349
WEB STORAGE 349
</script>
</head>
</body>
</html>
Ekran grnts:
Firefox 4 Firebug ekran grnts

NOT
HTML 5 Web Storage yaps ierisinde storage olayn tanmlamfltr. Bu olay

storage nesnesi tarafndan kullanlabilen deer iftlerinde bir deifliklik olduu zaman
oluflur. storage olaynda event nesnesi afladaki ek zelliklere sahip olacaktr.
event.key: Gncellenen anahtar adn dndrr.
event.newValue: Gncellenen anahtar deerini dndrr.
event.oldValue: Gncellenen anahtarn bir nceki deerini dndrr.
event.storageArea: Olay ile ilintili storage nesnesini dndrr.
event.url: Yerel ya da oturum depolama ile saklanan deer iftlerinin gncellendii sayfann URL adresini dndrr.
Afladaki flekilde storage olayna olay dinleyicisi ekleyebilirsiniz;

window.addEventListener(storage, onStorage, false);
var onStorage = function (event) {
}
// event.key, event.newValue
rnek: sessionStorage ve localStorage nesnelerinin kullanmn gstermek

iin basit bir uygulama yapalm.
<!DOCTYPE html>
<html>
<head>
<title>Storage</title>
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 350
350 HER YNYLE HTML5
<style>
tr
{
font-family: Calibri;
font-size: 14px;
text-indent: 5px;
}
table td:nth-of-type(1)
{
/*<tr> elemanlar ierisindeki ilk <td> elemanlar hedef alnmfltr.*/
background-color: gray;
width: 100px;
float: left;
color: White;
}
table td:nth-of-type(2)
{
/*<tr> elemanlar ierisindeki ikinci <td> elemanlar hedef alnmfltr.*/
background-color: #cccccc;
width: 500px;
float: right;
}
caption
{
display: block;
line-height: 1.5em;
font-family: Verdana;
background-color: #ffcc99;
}
</style>
domStorageGet();
/*sayfa yklendiinde localStorage ve sessionStorage verilerinin sayfada

gsterilmesi iin domStorageGet() fonksiyonu arlmfltr. Sayfann tarayc
penceresine ilk yklenmesinde herhangi bir sessionStorage verisi olmaz.
*/
}
var domStorageGet = function () {
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 351
WEB STORAGE 351

// local Storage...................
try
{ document.body.removeChild(document.getElementById(local)); } catch (e) {
}
/*Sayfa taraycya ilk yklendiinde body eleman ierisinde table#local
eleman yoktur. Bu eleman(table#local) localStorage nesnesi ile kullanlabilecek bir veri
ifti(key,value) olduunda programatik olarak oluflturacaktr.
domStorageGet() fonksiyonu;
[1] init() fonksiyonu ierisinden arlmfl ise bu durumda nceden
oluflturduumuz yerel verilere ulaflp bu verileri programatik olarak oluflturacamz table#local
eleman ierisinde gstereceiz.
[2] localStorage ! etiketli buton eleman tarafndan alfltrlmfl ise bu
durumda kullanc yeni yerel bir veri oluflturmufltur. Yapmamz gereken fley table#local
elemann silip kullancnn oluflturduu yeni deer iftini gsterecek flekilde table#local
elemann yeniden oluflturmaktr.
[2] durumu dikkate alarak;
try { document.body.removeChild(document.getElementById(local)); }
catch (e) {
}
satrn ekledik.
{removeChild() metodu Dom Level 1,2 core ile tanmlanmfltr}
*/
var lStrLength = localStorage.length;
/*localStorage nesnesinin kullanabilecei deer iftlerinin saysn lStrLength

deiflkeni ierisine atyoruz.*/
if (lStrLength > 0) {
/*Eer localStorage nesnesi ile ulaflabileceimiz en az bir deer ifti varsa,

bu durumda bu deer iftinin/iftlerinin oluflturacamz tablo ierisinde gsterilmesini
salayacaz.*/
var table = document.createElement(table);

table.id = local;
var caption = table.createCaption();
/*createCaption() metodu table#local elemanna ilifltirilecek

Bir bafllk eleman oluflturur. (<caption></caption>)
{createCaption() metodu Dom Level 2 -HTML bildirimi ile tanmlanmfltr}

*/
caption.innerText = localStorage;
/*caption eleman ierisine localStorage metnini ekliyoruz
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 352
352 HER YNYLE HTML5

<caption>localStorage</caption>
*/
for (var i = 0; i < lStrLength; i++) {
/*Bu for dngs ile localStorage nesnesinin kullanabilecei

verileri (yani daha nce bu web belgesi tarafndan kaydedilmifl yerel
verileri) oluflturacamz tablo ierisinde gstereceiz.*/
var key = localStorage.key(i);

var data = localStorage.getItem(key);
var row = document.createElement(tr);
var col1 = document.createElement(td);
var col2 = document.createElement(td);
row.appendChild(col1); row.appendChild(col2);
table.appendChild(row);
col1.innerText = key;
col2.innerText = data;
document.body.appendChild(table);
/*element.appendChild(childElement) metodu; Bir eleman dm

ierisine kardefl eleman listesinde en sonda olacak flekilde yeni bir
ocuk eleman ekler. {appendChild() metodu DOM Level 3 Core
bildirimi ile tanmlanmfltr.}*/
// session Storage...
try
{ document.body.removeChild(document.getElementById(session)); } catch (e) {
}
var sStrLength = sessionStorage.length;
if (sStrLength > 0) {
var table = document.createElement(table);
table.id = session;
var caption = table.createCaption();
caption.innerText = sessionStorage;
/*Yukardaki satrlar localStorage kodlar ile benzer mantkla
alflmaktadr. Fakat sessionStorage nesnesi ile oturum baznda
saklanan deerlere ulaflmak ve bu deerleri tablo ierisine koymak
iin aflada daha farkl bir yol izlenmifltir. nceleyiniz... */
for (var i = 0; i < sStrLength; i++) {

var data = [sessionStorage.key(i),
sessionStorage.getItem(sessionStorage.key(i))];
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 353
WEB STORAGE 353
var row = document.createElement(tr);

for (var j = 0; j < 2; j++) {
/*Bu dng iki tane td eleman oluflturma ve
1. td elemanna key(anahtar adn)

2.td eleman ierisine value(deeri)
yazdrmak iin kullanld*/
var col = document.createElement(td);

col.innerText = data[j];
row.appendChild(col);
}
table.appendChild(row);
document.body.appendChild(table);
}
/*Afladaki fonksiyonlar;
Kullancnn metin kutularna girdii verilere gre yeni bir localStorage ya da
sessionStorage verisi oluflturmak iin yazlmfltr. Ayrca bu fonksiyonlar metin
kutularnn kullanc tarafndan doldurulup doldurulmad kontrol edilmektedir.
Son olarak veri ifti oluflturulduktan sonra tablolarn gncellenmesi iin
domStorageGet() fonksiyonu arlmfltr.*/
var lStrSet = function () {

var key = document.querySelector(input:nth-of-type(1)).value;
var value = document.querySelector(input:nth-of-type(2)).value;
if (key == || value == ) {
alert(alanlar doldurunuz);
return;
}
localStorage.setItem(key, value);
domStorageGet();
}
var sStrSet = function () {
var key = document.querySelector(input:nth-of-type(1)).value;
var value = document.querySelector(input:nth-of-type(2)).value;
if (key == || value == ) {
alert(alanlar doldurunuz);
return;
}
sessionStorage.setItem(key, value);
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 354
354 HER YNYLE HTML5
domStorageGet();
}
</script>
</head>
Anahtar(Key) :
<input type=text />
Deer(Value):<input type=text /><br/>
<button onclick=lStrSet();>
localStorage !</button>
<button onclick=sStrSet();>
sessionStorage!</button>
</body>
</html>
Ekran grnts:
localStorage ve sessionStorage verisi olarak saklanacak deerleri girip sayfamzn ekran grntsne tekrar bakalm.
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 355
WEB STORAGE 355
Metin kutularna girilen deer ifti localStorage ya da sessionStorage verisi

olarak saklanabilir. Ayn sayfay bir baflka sekmede (ya da pencerede) atnzda
sessionStorage verisi olarak saklanan deerleri gremezsiniz. nk bu deerler
oturum baznda saklanr.
Opera 11
ekran
grnts
Web sayfas tarafndan kullanlan localStorage ya da sessionStorage verilerini

grmek ve bu veriler ile ilgili ifllemler (silme, gncelleme, ekleme) yapmak iin
Operann Dragonfly aracn kullanabilirsiniz.
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 356
356 HER YNYLE HTML5
Tarayc Destei
Web Storage API iin tarayc destek durumu:
Tarayc
Srm
Internet Explorer
8+
Firefox
2+
Opera
10.50+
Safari (WebKit)
4+

Her Yönüyle HTML5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Her Yönüyle HTML5

Загружено:

Авторское право:

Доступные форматы

+HTML5-icindekiler

viii HER YNYLE HTML5

5 HTML5 VE WEB FORMLARI

x HER YNYLE HTML5

8 HTML5 AUDIO VE VIDEO ELEMANLARI

xii HER YNYLE HTML5

9 SRKLE-BIRAK fiLEMLER ARAYZ (DRAG and DROP API) 321

Yayn Datm Yazlm ve Eitim

1. Bask: Haziran 2011

Alemdar Mah. Salkm St Sok. Aa fl Han

tel: (212) 514 55 66 fax: (212) 514 66 61

Merhum Babam Ali Osman ELKBLEKin ansna...

2 HER YNYLE HTML5

Ksaca HTML5 dilini flyle zetleyebiliriz:

Yeni DOCTYPE Bildirimi

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

XHTML 1.0 DOCTYPE (Strict) tanmlamas:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

HTML 4.01 DOCTYPE (Strict) tanmlamas:

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN

4 HER YNYLE HTML5

standartlara uymas beklenmifltir. Standartlara bal kalnmadan yazlan eski web

Standart Mode: DOCTYPE tanmlamas yaparak sayfamzn tarayc tarafndan

Yeni Character Set Bildirimi

Meta etiketi <head> etiketleri arasnda bildirilir ve sayfa hakknda tarayclara ya

<meta http-equiv=content-type content=text/html;charset=utf-8>

meta etiketinin zelliklerine ksaca bakalm. (Standart zellikler 2. Blmde an-

application-name: Uygulama adn tanmlamak iin kullanlr.

mak iin kullanlr.

mak iin kullanlr.

<meta name=keywords content=HTML5, HTML5 Programlama, HTML5 JavaScript>

refresh: Belirtilen sre sonunda sayfay tekrar yklemek ya da kullancy

baflka bir URL adresine ynlendirmek iin bu alt zellii kullanabilirsiniz.

<meta http-equiv=refresh content=5; url=http://www.ibrahimcelikbilek.com >

6 HER YNYLE HTML5

charset (HTML5): Sayfada kullanlan karakter seti (kmesi)ni tanmlamak

HTML5 Sz Dizimi Kurallar

<a>Link (Yanlfl, kapanfl etiketi yok.)

<p>Aklama<p> (Yanlfl, kapanfl etiketi yok.)

<meta charset=utf-8> ya da <meta charset=utf-8/> (kisi de doru.)

8 HER YNYLE HTML5

2. ie girmifl, bir biri ierisine yuvalanmfl elemanlarda elemanlarn kapanfl s-

rasna dikkat edilmelidir. lk nce alan etiket, en sonda kapatlmaldr.

<div>Div <em>eleman <span>ierii</span></em></div> (Doru)

<div>Div <em>eleman <span>ierii</em></span></div> (Yanlfl)

3. Etiket ierisinde kullanlan zellik isimleri byk ya da kk harfle yazlabilir.

<input type=checkbox checked />

checked zelliinin deeri checked olduundan yazlmad. Sadece zellik

<img src=1.jpg alt=1resim />

alt zelliine atanan metin tek trnak ierisine alnarak yazld.

class zelliine atanan deer trnak ierisine alnmadan yazld.

Yukardaki kullanmlar HTML5 iin doru olarak kabul edilir.

HTML5 iin Tarayc Destei

Tarayc Grntleme Motoru

10 HER YNYLE HTML5

Opera 10.0, Opera 10.1

Opera 11 (JS Yorumlaycs Carakan)

Dier alt srmleri iin

Safari 5.0.3 (JS Yorumlaycs Nitro)

12 HER YNYLE HTML5

HTML5 ile Yeni Tanmlanan Elemanlara ve

Win7 iin yok

Yeni Media Elemanlar

Belirtilen tarayclarn canvas elemann hangi zellik ve yntemlerini destekledii

/IE9 , Opera 10.5 , Firefox 4.0 iin CSS3 zellii/