Professional Documents
Culture Documents
Her Yönüyle HTML5
Her Yönüyle HTML5
Her Yönüyle HTML5
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
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
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
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
291
291
292
292
293
293
293
294
294
295
298
298
301
301
+HTML5-icindekiler
6/17/11
4:23 PM
Page xii
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
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
+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
KODLAB Yayn Datm Yazlm ve Eitim Hizmetleri San. ve Tic. Ltd. fiti.
+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
+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
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>
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:
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
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.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 5
HTML5E GRfi 5
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.
author: Web sayfasn oluflturan kifli hakknda bilgi tanmlamak iin kullanlr.
description: Sayfa ierii ile ilgili tanmlayc bir bilgi (aklama) tanmla-
generator: Sayfann oluflturulduu program (yazlm) ile ilgili bilgi tanmlamak iin kullanlr.
keywords: Arama motorlar iin virglle ayrlmfl anahtar kelimeler tanmla-
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.
Mevcut sayfa yklendikten 5 sn sonra kullanc url ile belirtilen adrese ynlendirilecektir.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 6
content: http-equiv ya da name zelliklerinde tanmlanan alt zelliklere deer atamak iin kullanlr.
HTML5 bildiriminde; meta etiketinin scheme zellii ve http-equiv zelliinin content-type, content-language, set-cookie alt zelliklerinin kullanlmas nerilmemektedir.
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:
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
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:
ad yazld.
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-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.
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 10
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
2.5.24
Opera 10.5
2.6.30
Opera 10.6
2.7.62
Internet Explorer
Layout Engine Ad: Trident
Trident Versiyonu
Tarayc Srm
4.0
IE8
IE9 (JS Yorumlaycs Chakra)
5.0
+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
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
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>
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
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
<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
Internet Explorer
Firefox
Opera
Presto 2.7
tel
Gecko 2.0
url
Safari
Destei var
WebKit 528
datetime
date
month
week
Time
datetime-local
Yok
Presto 2.0
Win7 iin yok
Yok
Number
range
color
Destei var
Presto 2.7
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 14
Internet Explorer
Firefox
Gecko1.9.1
(Firefox 3.5)
Yok
Gecko 2.0
Yok
Presto 2.5.24
list
Destei var
(Safari 4.0)
Gecko 2.0
Presto 2.0
Yok
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
Internet Explorer
Firefox
IE8
Firefox 3.5
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
Yok
WebGl
Yok
Firefox 4
Yok
Nightly Build*
eklentisi ile
Drag-And-Drop
Ksmen
Firefox 3.5
Yok
Destei var
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.
Durum
<abbr>
<acronym>
<applet>
<article>
Yeni (HTML5)
<address>
<area>
<aside>
<audio>
Yeni (HTML5)
Yeni (HTML5)
+HTML5-BOLUM1
6/17/11
4:37 PM
Page 16
<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)
HTML5 tarafndan desteklenmiyor.
Yeni (HTML5)
<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
<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
Page 20
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 21
YEN ELEMANLAR
ve ZELLKLER
Aklama
Embedded
Flow
Heading
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 22
Sectioning
Metadata
Phrasing
Interactive
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
class
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 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*/
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
Eer class zelliine birden fazla snf seici ad yazlmfl ise, son yazlan snf seici en ncelikli olur.
Sayfamzn grnts:
contentedtable
[HTML5]
Eer bu zellik bir elemana atanmflsa kaltsal olarak elemann iinde bulunan alt
elemanlara geer. Bu zellii deeri ile beraber kullanmak flarttr.
rnein;
Dorusu;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 25
rnek:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title> contenteditable zellii</title>
<style type=text/css>
</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.
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 26
Tarayc Destei: Internet Explorer 5.5 +, Firefox 3+, Opera 9.0+, Safari (Destei var.)
NOT
contextmenu
[HTML5]
dr
HTML elemannn ierdii metnin yazlfl ynn ayarlamak iin kullanlr. ltr ile
rtl deerlerinden birini alr.
draggable
[HTML5]
dropzone
Bu zellik, Drag and Drop isimli blmde ayrntl bir flekilde anlatlacaktr.
+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.
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>
<meta charset=utf-8 />
<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
*/
*/
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 28
div.appendChild(yeni_text);
*Kullanm:
*appendChild(Node):Node
*Dom Level 1,2
*/
}
</script>
<style type=text/css>
#icerik
{
height: 50px;
width: 200px;
background-color: lightblue;
overflow:hidden;
}
</style>
</head>
<body>
<div id=icerik onmouseover=goster();>
</div>
</body>
</html>
lang
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
style
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>style zellii</title>
<style type=text/css>
p
{
color: Maroon; /*color tanmlamas, p elemanna uygulanmaz.
width: 100px;
}
</style>
</head>
<body>
<p style=background-color: khaki; color:hsl(360,100%,50%)>
Her Ynyle HTML5
</p>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 30
tabndex
ttle
hdden
[HTML5]
Alabilecei Deer: {hidden}
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>
<meta charset=utf-8>
<title>Header Eleman</title>
<style type=text/css>
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
<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.
zellikleri: [Standart zellikler]
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.
zellikleri: [Standart zellikler]
+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>
<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>
<meta charset=utf-8>
<title>nav Eleman</title>
<style type=text/css>
nav
{
width: 145px;
height: 260px;
background-color: #ae364c;
padding: 5px;
font-family: calibri;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 34
+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.
zellikleri: [Standart zellikler]
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>article Eleman</title>
<style type=text/css>
p,h3
{
margin: 0px;
}
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 36
article p
{
font-family: calibri;
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;
text-decoration: none;
}
article
{
width: 437px;
height: 110px;
background-color: hsl(0, 100%, 91.4%);
padding: 15px;
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>section Eleman</title>
<style type=text/css>
div#content
{
margin: 0px auto;
width: 642px;
height: 280px;
background-color:lightblue;
}
section
{
float: left;
margin: 5px;
}
p, h3
{
margin: 0px;
}
article p
{
font-family: calibri;
font-style: italic;
}
footer
{
text-align: right;
}
footer a
{
background-color: hsl(306, 83%, 36.9%);
color: white;
font-family: verdana;
font-size: 11px;
text-decoration: none;
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 39
}
article
{
width: 437px;
height: 110px;
background-color: hsl(0, 100%, 91.4%);
padding: 15px;
border-radius: 30px;
/*safari 3.0 */
-webkit-border-radius: 30px;
/*Firefox 3.6 ve alt srmleri iin */
}
nav
{
-moz-border-radius: 30px;
width: 145px;
height: 260px;
background-color: #ae364c;
padding: 5px;
font-family: calibri;
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
text-decoration: none;
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>
<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>
</section>
</div>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 41
<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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>aside Eleman</title>
<style type=text/css>
p,h3
{
margin: 0px;
}
article p, article pre, aside
{
font-family: calibri;
font-style: italic;
font-size: 12px;
}
article
{
width: 437px;
height: 250px;
background-color:#F9DAAE;
padding: 15px;
position: relative;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
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>
<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>
<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
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.
zellikleri: [Standart zellikler]
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>aside Eleman</title>
<style type=text/css>
footer {
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
background:-moz-linear-gradient(left top,#F5F3F0,#2CDEDE);
/*Safari 4.0+*/
filter:Progid:DXImageTransform.Microsoft.gradient(startColorstr=#F5F3F0,
endColorstr=#2CDEDE,gradientType=1);
}
footer p {
width:300px;
font-family:consolas;
font-size:12px;
padding-left:10px;
}
</style>
<!--[if lt IE 9]>
<script>
document.createElement(footer);
</script>
<![endif]-->
</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
IE8 ekran
grnts
<fgure>
Resim, fotoraf alanlar (ya da media alanlar) tanmlamak iin kullanlr. Bu flekil
alanlarna bir metin ilifltirmek iin <figcaption> eleman kullanlr.
zellikleri: [Standart zellikler]
rnein;
<figure>
<img src=arge.jpg width=304 height=228 />
</figure>
<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>
<style type=text/css>
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
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.
<!--[if lt IE 9]>
<script type=text/javascript>
var elemanlar=[header,hgroup,nav,article,section,aside,
footer,figure];
for(var i=0;i<elemanlar.length;i++){
document.createElement(elemanlar[i]);
/*Yeni bir element (eleman) oluflturmak iin kullanlr.
*Kullanm:
*createElement(elementName):HTMLElement
*rnein; document.createElement(div);
*DOM Level 1,2
*/
}
</script>
<![endif]-->
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 49
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>IE9 alt srmleri</title>
<style type=text/css>
header, hgroup, nav, article, section, aside, footer, figure {
display:block;
}
header {
background-color:lightblue;
}
</style>
<!--[if lt IE 9]>
<script type=text/javascript>
var elemanlar=[header,hgroup,nav,article,section,
aside,footer,figure];
for(var i=0;i<elemanlar.length;i++){
document.createElement(elemanlar[i]);
}
</script>
<![endif]-->
</head>
<body>
<header>
header Eleman
</header>
</body>
</html>
+HTML5-BOLUM2
6/17/11
4:25 PM
Page 50
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.
header, hgroup, nav, article, section, aside, footer, figure {
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.
zellikleri: [Standart zellikler]
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>
<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
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.
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:
fiimdi de value deerine high (aralkta yksek olarak kabul edilen deer) deerinden daha byk bir deer verelim.
<p>
llen A:
<meter min=0 max=180 low=30 optimum=90 high=120
value=130></meter>
</p>
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-
<p>
llen A:
<meter min=0 max=180 low=30 optimum=90 high=120
value=115></meter>
</p>
Ekran grnts:
<command>
<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
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
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 55
HTML5 ve
JAVASCRIPT
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 56
+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
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
</nav>
</ol>
<li id=acil>Beyaz
</li>
<li>Krmz
</li>
<li>Sar
</li>
<li>Mavi
</li>
Seicilerimize bakalm...
nav ol li {
color:blue;
}
nav ol> li#acil+ li {
color:red;
}
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 59
HTML5 VE JAVASCRIPT 59
<head><meta charset=utf-8>
<title>Selector</title>
<style type=text/css>
</style>
<script type=text/javascript>
/*
*
*
*
*
*
*/
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);
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);
</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
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>querySelector</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
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
HTML5 VE JAVASCRIPT 61
</html>
console.log(elemanDiv.id);
}
</script>
</head>
<body onload=init();>
<div id=content>
<div id=html5>
</div>
<div id=css>
</div>
<div id=js>
</div>
</div>
</body>
Ekran grnts:
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 62
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>querySelector</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
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>
<body onload=init();>
<div id=content>
<span>Html5</span>
</div>
</body>
Ekran grnts:
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 63
HTML5 VE JAVASCRIPT 63
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>querySelector</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
/*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>
<body onload=init();>
<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
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)
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
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 65
HTML5 VE JAVASCRIPT 65
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>querySelectorAll</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
var elemanlar1=document.querySelectorAll(div#div1>*);
/*div#div1 eleman ierisindeki tm elemanlarn static bir
var elemanlar2=document.getElementsByTagName(p);
/*Belge ierisindeki tm p elemanlarnn canl bir listesi
(NodeList) alnd (elemanlar2 iinde)*/
/*StaticNodeList iindeki eleman saysn yazdralm*/
for(var i=0;i<elemanlar1.length;i++) {
console.log(elemanlar1.item(i));
}
/*NodeList iindeki eleman saysn yazdralm*/
for(var i=0;i<elemanlar2.length;i++) {
console.log(elemanlar2.item(i));
}
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
for(var i=0;i<elemanlar1.length;i++) {
console.log(elemanlar1.item(i));
}
/*NodeList iindeki eleman saysn tekrar yazdralm*/
</html>
for(var i=0;i<elemanlar2.length;i++) {
console.log(elemanlar2.item(i));
}
</script>
</head>
<body onload=init();>
<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
HTML5 VE JAVASCRIPT 67
Ekran grnts:
Firefox 3.6 ve
Firebug 1.6.2
ekran grnts
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>querySelectorAll</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
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
</html>
<body onload=init();>
<div id=div1>
<p>
Aptana Studio 3
</p>
<p class=p2>
Dom Level 2
</p>
</div>
</body>
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>querySelectorAll</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
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++) {
console.log(staticlistP[i].id);
// ya da console.log(staticlistP.item(i))
</script>
</head>
<body onload=init();>
<div id=div1>
<p id=x>
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 69
HTML5 VE JAVASCRIPT 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>
<head><meta charset=utf-8>
<title>querySelectorAll</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init= function() {
var staticlistDiv=document.querySelectorAll(body>div);
/*belge ierisinde seici ile eflleflen(seici tarafndan seilen) sadece
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 70
console.log(staticlistDiv.length);
console.log(staticlistDiv[0]);
var staticlistP=document.querySelectorAll(p);
/*
console.log(staticlistP.length);
console.log(staticlistP[0]+\n +staticlistP[1]);
</script>
</head>
<body onload=init();>
<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
HTML5 VE JAVASCRIPT 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>
<head><meta charset=utf-8>
<title>getElementsByClassName</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init=function(){
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
</script>
</head>
<body onload=init();>
<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>
<head><meta charset=utf-8>
<title>getElementsByClassName</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init=function(){
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
HTML5 VE JAVASCRIPT 73
for(var i=0;i<elemanlarOnem.length;i++){
elemanlarOnem[i].style.color=red;
}
</script>
</head>
<body onload=init();>
<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
getElementsByClassName(onem) metodu;
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 74
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>getElementsByClassName</title>
<style type=text/css>
</style>
<script type=text/javascript>
var init=function(){
/*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)*/
for(var i=0;i<elemanlarOnem.length;i++){
console.log(elemanlarOnem[i].textContent);
}
</script>
</head>
<body onload=init();>
<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
HTML5 VE JAVASCRIPT 75
</div>
</html>
</body>
Ekran grnts:
Tarayc destei: Internet Explorer 9, Firefox 3+, Opera 9.5+, Safari 3.1+
lastElementChild (Bir elemann iinde bulunan son eleman dmne ulaflmak iin),
nextElementSibling (HTML aa yapsnda referans alnan elemandan sonra ge-
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
_firstElementChild:function(e_ref/*e_ref:elemanReferans*/){
/*Bir elemann iindeki ilk eleman dmne ulaflmak iin
if (e_ref.firstElementChild == undefined) {
//Eer firstElementChild zellii desteklenmiyorsa;
//firstChild zellii kullanlr.
//bu zellik elemann iindeki ilk dm(Node)
//geriye dndrr.
while (child) {
if (child.nodeType == 1) {
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 77
HTML5 VE JAVASCRIPT 77
* ELEMENT_NODE = 1(Eer dmn nodeType zelliinin
deeri 1 ise bu dm element dmdr.)
* ATTRIBUTE_NODE = 2
* TEXT_NODE = 3
* .......*/
return child;
}
else {
child = child.nextSibling;
/* e_ref ile tanml elemannn ilk ocuk
}
}
else {
return e_ref.firstElementChild;
}
return null;
},
_lastElementChild: function(e_ref/*e_ref:elemanReferans*/){
/*Bir elemann iinde bulunan son eleman dmne
if (e_ref.lastElementChild == undefined) {
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 78
while (child) {
if (child.nodeType == 1) {
return child;
}
else {
child = child.previousSibling;
/* e_ref tanml elemann iindeki en son
}
}
else {
return e_ref.lastElementChild;
}
return null;
},
_nextElementSibling: function(e_ref/*e_ref:elemanReferans*/){
/*
if (e_ref.nextElementSibling == undefined) {
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 79
HTML5 VE JAVASCRIPT 79
// nextElementSibling zellii desteklenmiyorsa...
}
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...
}
else {
return e_ref.previousElementSibling;
}
return null;
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 80
}
</script>
</head>
<body onload=init();>
<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
HTML5 VE JAVASCRIPT 81
+HTML5-BOLUM3
6/17/11
4:25 PM
Page 82
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.
Dojo: http://dojotoolkit.org/
Jquery: http://jquery.com/
YUI Library: http://developer.yahoo.com/yui/
querySelector(), querySelectorAll() ve getElementsByClassName() metotlar-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<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
HTML5 VE JAVASCRIPT 83
/*Dojo Toolkit 1.5 ktphanesini bilgisayarnza indirmeden
(DOJO ktphanesini saklayan/yaynlayan
Sitelerden (CDN)) internet zerinden kullanabilirsiniz.*/
</script>
<script type=text/javascript>
dojo.addOnLoad( function() {
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
});
</head>
<body>
</html>
</body>
</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
HTML5 VE JAVASCRIPT 85
Ekran grnts:
+HTML5-BOLUM3
6/17/11
4:25 PM
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
Seici Tipi
Aklama
Type Selectors
(Eleman)
HTML etiket seiciler
ID Selectors (#)
ID seiciler
HTML elamanlarnn
oluflturduu soy aac
yapsndan faydalanarak
belirlediiniz bir elemann
soyundan gelen eleman
ya da eleman gruplarna CSS
kodlar atamak iin kullanlr.
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
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
General Sibling
Selectors (E1 ~ E2)
Genel kardefl seiciler
li#acil~li{bildirimler} CSS3
id zelliine acil deeri
atanmfl li elemanndan
sonra gelen (kardefli
durumunda olan) li
elemanlar hedef alnr.
--------------------------------<ul id=bir>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 90
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 title=son>Geni
Aklama ve rneklerle
</p>
</div>
<p title=aciklama>
XHTML ve CSS Kitab
</p>
<p title=son>Geni
Aklama ve rneklerle
</p>
</div>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 91
HTML5 VE CSS3 91
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>
XHTML ve CSS Kitab</p>
<p title=css html5>
CSS Bavuru Kayna</p>
p[title^=html5]
CSS3
{bildirimler}
title zelliine ald
deerin baflnda html5
metni bulunan p
elemanlarn hedef alr.
--------------------------------<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
elemanlarn hedef alr.
---------------------------------
CSS3
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 92
[attribute|=value] [attribute^=value]
seicisi kalb ile benzerdir
(value deeri zellie alnan
deerin baflnda olmal). Fakat
value deerinden sonra (tire)
karakteri kullanlmfl olmaldr.
CSS2
<p title=html5-css>
<p title=html5css>CSS
Bavuru Kayna</p>
[ns|attribute]
javascript</p>
CSS3
Aslnda bir HTML eleman deillerdir, fakat bir HTML eleman gibi davranrlar.
Seici Tipi
::after, :after
Aklama
CSS
CSS2
::before, :before
CSS2
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 93
HTML5 VE CSS3 93
:first-letter,
::first-letter
:first-line,
::first-line
::selection
CSS1
CSS3
:link, :visited
Aklama
CSS
CSS 1/2
:active
:focus
:hover
CSS 1/2
CSS2
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 94
div:lang(tr){
Bildirimler
}
Sayfa ii linke tklandnda tarayc tarafndan hedef alnan apa eleman (Hedef
Eleman) iin geerli olacak CSS tanmlamalar yapar.
Kullanm:
h1:target{Bildirimler}
Tanmlanan Seici tarafndan hedef alnmayan elemanlara CSS tanmlamas yapmak iin kullanlr.
Kullanm:
p:not(.onem){
Bildirimler}
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 95
HTML5 VE CSS3 95
:nth-last-of-type( )
:first-child
:last-child
:first-of-type
:last-of-type
:only-of-type
:only-child
:empty
:checked
Aklama
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
elemanlarn hedef alr.
---------------------------------
input[type=text]:disabled
{Bildirimler}
type zelliine text
deeri atanmfl pasif input
elemanlarn hedef alr.
--------------------------------<!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
:default
:invalid
:optional
:required
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
--------------------------------<input type=text/>
<input type=checkbox/>
<input type=email
required=required />
input:required{Bildirimler}
CSS3
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 97
HTML5 VE CSS3 97
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>
<head><meta charset=utf-8/>
<title>nth-child()</title>
<style type=text/css>
div#cont>p:nth-child(1){
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 98
background-color:blue;
}
div#cont>p:nth-child(2){
</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>
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>
<head><meta charset=utf-8/>
<title>nth-child()</title>
<style type=text/css>
div#cont>p:nth-child(n+1){
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>
</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
alnr.
alnr.
Yani bu durumda Kardefl Elemanlar Listesinde 2. ve 4. srada bulunan p elemanlarna CSS kodu uygulanr.
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>nth-child()</title>
<style type=text/css>
ul li:nth-child(2n+1) {
background-color:blue;
}
</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
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>
<head><meta charset=utf-8/>
<title>nth-of-type()</title>
<style type=text/css>
div#cont>p:nth-of-type(1){
background-color:blue;
}
div#cont>h3:nth-of-type(1){
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 102
background-color:red;
</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>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 103
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>nth-of-type()</title>
<style type=text/css>
dd:nth-of-type(n+1){
font-family:consolas;
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
def alnr.
def alnr.
def alnr.
def alnr.
durdurulur.
</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
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>
<head><meta charset=utf-8/>
<title>nth-last-child()</title>
<style type=text/css>
p:nth-last-child(3){
font-family:consolas;
background-color:khaki;
text-indent:10px;
border-radius: 20px;/*CSS3*/
-moz-border-radius:20px;/*firefox 3.6*/
-webkit-border-radius:20px;/*Safari 3.0*/
}
</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>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 106
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
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>nth-last-of-type()</title>
<style type=text/css>
Div#cont>p:nth-last-of-type(n+1){
font-family:consolas;
background-color:khaki;
text-indent:10px;
border-radius: 20px;/*CSS3*/
-moz-border-radius:20px;/*Firefox 3.6*/
-webkit-border-radius:20px;/*Safari 3.0*/
}
</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>
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 108
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>
<head><meta charset=utf-8/>
<title>first-child,last-child</title>
<style type=text/css>
div#cont h3:first-child{
font-family:consolas;
background-color:blue;
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
background-color:red;
}
div#cont p:last-child{
</head>
<body>
</html>
</body>
font-family:consolas;
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
: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>
<head><meta charset=utf-8/>
<title>first-of-type,last-of-type</title>
<style type=text/css>
dt:first-of-type{
font-family:consolas;
background-color:blue;
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*/
dd:first-of-type{
font-family:consolas;
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.*/
font-family:consolas;
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
</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-child kapsayc eleman ierisinde tek ocuk durumunda olan elemana CSS
:only-of-type kapsayc eleman ierisinde bir tre ait tek ocuk durumunda olan
:empty iinde bir dm olmayan elemanlara CSS tanmlamas yapmak iin kul-
lanlr.
+HTML5-BOLUM4
6/17/11
5:52 PM
Page 112
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>only-child,only-of-type</title>
<style type=text/css>
div#bir p:only-child{
font-family:consolas;
background-color:blue;
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#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.*/
font-family:consolas;
background-color:lightblue;
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
Ekran grnts:
: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
Page 114
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 115
HTML5 ve
WEB FORMLARI
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 116
Form Nesnesi
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.
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.
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 117
rnek:
<html>
<head><meta charset=utf-8/>
<title>form.elements</title>
<style type=text/css>
</style>
<script type=text/javascript>
var _load=function(){
var frmeleman=document.forms[form_1];
/*Form elemanna ulaflmak iin;
document.form[index]
document.form[name]*/
var htmllen=frmeleman.length;
var htmlcol=frmeleman.elements;
//HTMLFormControlsCollection tipinde liste
console.log(htmllen);
for(var i=0;i<htmllen;i++){
console.log(htmlcol[i]);
</html>
}
</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
Input eleman (nesnesi), form ierisine kontroller yerlefltirmek iin kullanlr. Input
nesnesinin oluflturaca elemann tr type zellii ile tanmlanr.
accept
alt
checked
dirname
disabled
name
size
src
type
value
readonly
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
multiple
pattern
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
rnek:
Ekran grnts:
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>list</title>
<style type=text/css>
</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
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>datalist</title>
<style type=text/css>
div#result {
color:crimson;
font:consolas;
font-size: 14px;
font-style: italic;
}
</style>
<script type=text/javascript>
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
</script>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 122
</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>
<head><meta charset=utf-8/>
<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>
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:
rnek:
Opera 11
ekran
grntleri
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>pattern</title>
<style type=text/css>
#form1 label{
font-family: calibri;
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
[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:
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!/>
<input type=submit value=gonder/>
</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
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>required</title>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 126
<style type=text/css>
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>
<!--size zellii veri girifl alanlarnn geniflliini ayarlamak iin kullanlr-->
Ekran grnts:
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 127
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>formnovalidate</title>
<style type=text/css>
p{
margin: 5px 0px;
}
</style>
</head>
<body>
<form action=kayit.aspx method=post>
<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>
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 128
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
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>
<head><meta charset=utf-8/>
<title>type=e-mail</title>
<style type=text/css>
form{
width:250px;
height: 130px;
}
legend{
font-family:calibri;
color:crimson;
}
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 130
</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>
multiple zelliini kullanarak arada virgl olmak kaydyla birden fazla e-mail ad-
resi girilebilirsiniz.
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8/>
<title>type=e-mail</title>
<style type=text/css>
form {
width:250px;
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 131
</head>
<body>
</html>
</body>
height:130px;
}
legend {
font-family:calibri;
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:
[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
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>
<head><meta charset=utf-8/>
<title>number</title>
</head>
<body>
<form action=kayit.aspx method=post>
<input type=number min=10 max=100 step=10
name=num/>
<input type=submit />
</form>
</body>
</html>
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>
<head><meta charset=utf-8/>
<title>type=range</title>
<script type=text/javascript>
var init=function(){
change();
Fonksiyonunu alfltralm*/
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 134
var change=function(){
var elSlider=document.querySelector(input[type=range]);
var elResult=document.querySelector(input[type=range]+input);
elResult.value=elSlider.value;
}
</script>
</head>
<body onload=init();>
<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>
<head><meta charset=utf-8/>
<title>type=color</title>
<script type=text/javascript>
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>
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>
<head><meta charset=utf-8/>
<title>type=color</title>
<style type=text/css>
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
}
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>
<script type=text/javascript>
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.
target.style.backgroundColor=colorStr;
/*retilen bu renk deerini div#renk elemanna
arkaplan rengi olarak atadk.*/
var sonucYaz=document.getElementById(result);
sonucYaz.innerHTML=colorStr;
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>
<form action= name=form1>
<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
Ekran grnts:
Opera 11 ekran
grnts
STYLE ZELL
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>
var elemanP=document.getElementById(elP);
console.log(elemanP.style.color);
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 139
elemanP.style.color=blue;
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>
<head><meta charset=utf-8/>
<title>getComputedStyle</title>
<style type=text/css>
p:nth-of-type(1){
color:blue;
background-color: gray;
font-family: consolas;
</style>
<script type=text/javascript>
var play= function() {
+HTML5-BOLUM5
6/17/11
5:12 PM
Page 140
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.
[HTML5]
+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.)
<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
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-
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
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)
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>
<head><meta charset=utf-8/>
<title>canvas</title>
<script type=text/javascript>
function draw() {
var canvas = document.getElementById(canvas);
if(canvas.getContext){
</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
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>
<head><meta charset=utf-8/>
<title>toDataURL()</title>
<script type=text/javascript>
function draw() {
var canvas = document.getElementById(canvas);
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
}
var copyImage= function() {
var canvas = document.getElementById(canvas);
var img=document.getElementById(img);
var dataImage=canvas.toDataURL(image/png);
// canvas ierisindeki resim bilgisini png formatnda aldk
img.src=dataImage;
}
</html>
</script>
</head>
<body onload=draw();>
<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:
+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.
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
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();
// izgi olufltur
}
</script>
</head>
<body onload=init();>
<canvas id=canvas width=500 height=200>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 149
CANVAS 149
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>
<meta charset=utf-8>
<title>canvas zellii</title>
<script type=text/javascript>
var init = function(){
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;*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 150
</script>
</head>
<body onload=init();>
<canvas id=canvas width=500 height=200>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
Ekran grnts:
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>
<head><meta charset=utf-8>
<title>fillStyle,stroke style</title>
<style type=text/css>
canvas {
background-color: #efefef;
}
</style>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
// ctx , canvasRenderingContext2d tipinde bir nesnedir
ctx.fillStyle=#127A19;
ctx.strokeStyle=rgb(255,9,23);
// Vektrel flekiller iin kenarlk rengi
ctx.fillRect(20,20,70,70);
ctx.strokeRect(100,20,70,70);
}
</html>
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=120>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 152
Ekran grnts:
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.strokeStyle=rgb(255,9,23);
console.log(fillStyle:+ctx.fillStyle);
// Geerli olan fillStyle tanmlamas
ctx.fillRect(20,20,70,70);
ctx.strokeStyle=#D4CE2F;
ctx.fillStyle=rgb(0,255,0);
console.log(strokeStyle:+ctx.strokeStyle);
// Geerli olan strokeStyle tanmlamas
ctx.strokeRect(100,20,70,70);
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.
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>globalAlpha</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
// Stil tanmlamalar
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 154
ctx.fillStyle=#FC3A3A;
ctx.fillRect(0,0,160,120);
// fillRect ile dikdrtgen izdik.
ctx.fillStyle=#ffffff;
for(var i=1;i<3;i++) {
ctx.globalAlpha=0.2*i;
ctx.beginPath();
ctx.arc(80,60,i*30,0,2*Math.PI,true);
ctx.fill();
}
</html>
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=160 height=120>
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>
<head><meta charset=utf-8>
<title>globalAlpha</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.fillStyle =#3DF540;
ctx.fillRect(0,0,300,50);
ctx.fillStyle =#E2F53D;
ctx.fillRect(0,50,300,50);
var i=0;
// fieffaflk deerini deifltirmek iin i deiflkeni tanmladk
for(var x=0;x<=270;x+=30) {
</html>
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=200>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 156
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
globalCompositeOperation
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
globalCompositeOperation zellii; yukarda anlatlan dier zellikler gibi tanmland satrdan sonra izdirilen vektrel flekil ya da resimlerin canvasa nasl
yerlefltirileceini (grafiklerin izim modunu) ayarlar.
</html>
context2d.beginPath();
context2d.arc(80,80,35,0,2*Math.PI,true);
context2d.fill();
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=200 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 158
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
context2D.globalCompositeOperation=source-in
context2D.globalCompositeOperation=xor
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 159
CANVAS 159
context2D.globalCompositeOperation=destination-over
context2D.globalCompositeOperation=destination-in
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>globalCompositeOperation</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var context2d=canvasEl.getContext(2d);
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
context2d.globalCompositeOperation=destination-in;
/*Bu satrdan sonra izilecek grafikler iin izim modunu
ayarladk. Resmin (zeynep.png) daire ile kesiflen
alan gsterilecek */
context2d.beginPath();
context2d.arc(76,87,43,0,2*Math.PI,true);
// Daire izidik
</html>
context2d.fill();
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=170 height=155>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
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]
context2d.shadowOffsetX[=value]
context2d.shadowOffsetY[=value]
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>shadow</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var context2d=canvasEl.getContext(2d);
// Stil tanmlamalar
context2d.fillStyle=black;
context2d.shadowColor=#F2FF63;
// Glge iin renk
context2d.shadowOffsetX=6;
context2d.shadowOffsetY=-6;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 162
context2d.shadowBlur=3;
context2d.fillRect(20,20,150,80);
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>
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=200 height=155>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 163
CANVAS 163
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>lineWidth</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var context2d=canvasEl.getContext(2d);
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.beginPath();
context2d.moveTo(0,i*20);
context2d.lineTo(300,i*20);
context2d.stroke();
i++;
}
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=155>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 164
Ekran grnts:
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>
<head><meta charset=utf-8>
<title>lineCap</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var context2d=canvasEl.getContext(2d);
context2d.strokeStyle=#AA23DB;
/*Kenarlklar iin stil tanmlamas yapld*/
context2d.lineWidth=20;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 165
CANVAS 165
context2d.beginPath();
context2d.moveTo(30,20);
context2d.lineTo(200,20);
</html>
context2d.stroke();
context2d.beginPath();
context2d.lineCap=square;
context2d.moveTo(30,60);
context2d.lineTo(200,60);
context2d.stroke();
context2d.beginPath();
context2d.lineCap=round;
context2d.moveTo(30,100);
context2d.lineTo(200,100);
context2d.stroke();
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=175>
tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 166
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]
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>lineCap</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var context2d=canvasEl.getContext(2d);
context2d.lineWidth=15;
// lineCap zelliini buarada tanmlayacaz.
</html>
context2d.moveTo(30,70);
context2d.lineTo(80,15);
context2d.lineTo(120,70);
context2d.lineTo(170,15);
context2d.stroke();
</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 167
CANVAS 167
bevel deeri:
round deeri:
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.
save() ve restore()
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 168
Transformasyon matrisi,
strokeStyle
fillStyle
globalAlpha
lineWidth
lineCap
lineJoin
miterLimit
shadowOffsetX
shadowBlur
shadowColor
globalCompositeOperation
font
textAlign
textBaseline
Kullanmlar:
context2d.save()
context2d.restore()
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>save(),restore()</title>
<style>
canvas
{
border:1px solid gray;
}
</style>
<script type=text/javascript>
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();
ctx.fillRect(180,20,60,60);
}
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 170
Ekran grnts:
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)
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>
<head><meta charset=utf-8>
<title>fillRect()</title>
<script type=text/javascript>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 171
CANVAS 171
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) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=200
style=margin:20px;>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 172
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)
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>strokeRect()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.strokeStyle=red;
ctx.lineWidth=2;
ctx.strokeRect(50,50,100,100);
+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) {
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(300,y);
ctx.stroke();
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=200
style=margin:20px;>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 174
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)
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>clearRect()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.fillRect(0,0,200,100);
/*Siyah renkli bir dolgu alan oluflturuldu.
ctx.clearRect(60,10,80,60);
}
</html>
/*Seffaf siyah dolgulu yani renk deerleri temizlenmifl bir alan oluflturuldu*/
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=200 height=100>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 175
CANVAS 175
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.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 176
Kullanm: context2d.moveTo(x,y)
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>moveTo()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.strokeStyle=#1548ED;
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(30,40);
ctx.lineTo(150,100);
ctx.stroke();
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 177
CANVAS 177
</html>
</body>
</canvas>
Draw fonksiyonu ierisindeki kodlar afladaki flekilde deifltirip sonuca tekrar ba-
kalm.
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 178
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)
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>lineTo()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.strokeStyle=#1548ED;
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);
ctx.stroke();
}
</html>
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 179
CANVAS 179
Ekran grnts:
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.
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>
<head><meta charset=utf-8>
<title>quadraticCurveTo()</title>
<script type=text/javascript>
var draw= function() {
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 180
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
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
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>bezierCurveTo()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.strokeStyle=#F70A0A;
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(60,70);
ctx.bezierCurveTo(210,30,100,5,180,70);
ctx.stroke();
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>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 182
</html>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=100>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
closePath()
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>closePath()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.strokeStyle=#F70A0A;
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.lineTo(100,100);
ctx.closePath();
ctx.stroke();
</html>
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>
<body onload=draw();>
<canvas id=canvas width=300 height=120>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 184
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)
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>
<head><meta charset=utf-8>
<title>arc()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
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.strokeStyle=#A9F5BB;
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 186
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);
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>arc()</title>
<style type=text/css>
canvas {
border:1px solid gray;
}
</style>
<script type=text/javascript>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 187
CANVAS 187
ctx.strokeStyle=#d64747;
ctx.fillStyle=#e9e9e9;
var coorX=[50,140,230,320];
for(var i=0;i<2;i++) {
var cor=0;
for(var t=0.5;t<=2;t+=0.5) {
ctx.beginPath();
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)
ctx.arc(230,50,40,0,1.5*Math.PI,false)
ctx.arc(320,50,40,0,2*Math.PI,false)
arc() metodunu yukardaki flekilde 4 defa
alfltrmfl olacam*/
/*i=1 ve t=0.5|1|1.5|2 deerleri iin;
ctx.arc(50,150,40,0,0.5*Math.PI,false)
ctx.arc(140,150,40,0,1*Math.PI,false)
ctx.arc(230,150,40,0,1.5*Math.PI,false)
ctx.arc(320,150,40,0,2*Math.PI,false)
arc() metodunu yukardaki flekilde 4 defa
alfltrmfl olacam*/
ctx.closePath();
if(i==0) {
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 188
</html>
ctx.fill();
ctx.stroke();
} else {
ctx.stroke();
}
cor++;
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=400 height=200>
Tarayc canvas elemann desteklemiyor.
</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>
<head><meta charset=utf-8>
<title>arc()</title>
<style type=text/css>
canvas {
border:1px solid gray;
}
</style>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.strokeStyle=#d64747;
ctx.fillStyle=#e9e9e9;
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100,130);
ctx.arc(200,100,40,0,0.5*Math.PI,true);
ctx.lineTo(230,180);
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
</html>
ctx.lineTo(x,200);
ctx.stroke();
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=200>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
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)
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>rect()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(60,60);
ctx.rect(80,40,50,50);
ctx.lineTo(200,100);
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
</html>
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</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()
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 193
CANVAS 193
ctx.beginPath(); /*1.izim*/
ctx.moveTo(20,20);
ctx.lineTo(60,60);
ctx.beginPath(); /*2.izim*/
ctx.moveTo(80,80);
ctx.lineTo(200,100);
ctx.lineTo(280,40);
ctx.stroke();
ctx.fill();
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>
<head><meta charset=utf-8>
<title>clip()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
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
</html>
ctx.fillRect(100,50,60,70);
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
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)
createLnearGradent()
Bu metod dorusal renk geiflini temsil eden bir nesne oluflturur.
Kullanm: gradient=context2d.createLinearGradient(x0,y0,x1,y1)
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>createLinearGradient()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
ctx.lineWidth=3;
}
</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
</html>
<body onload=draw();>
<canvas id=canvas width=300 height=200>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 197
CANVAS 197
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>createLinearGradient()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
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>
<body onload=draw();>
<canvas id=canvas width=300 height=200>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 198
Ekran grnts:
createRadalGradent()
Bu metod dairesel renk geiflini temsil eden bir nesne oluflturur.
Kullanm: gradient=context2d.createRadialGradient(x0,y0,r0,x1,y1,r1)
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 199
CANVAS 199
rnek:
<!DOCTYPE html>
<html>
<head><meta charset=utf-8>
<title>createRadialGradient()</title>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
// 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>
<body onload=draw();>
<canvas id=canvas width=300 height=200>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 200
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
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 201
CANVAS 201
height:50px;
}
div#edit input[type=number] {
width:40px;
}
</style>
<script type=text/javascript>
var draw= function() {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
/*canvas elemanna ulafltk ve bu eleman 2 boyutlu bir izim
alanna dnfltrdk*/
ctx.fillStyle=createGradient(250,200,ctx);
ctx.fillRect(0,0,500,400);
}
var createRadialgr= function(event) {
var canvasEl=document.querySelector(#canvas);
var ctx=canvasEl.getContext(2d);
var evt=event||window.event;
var xkor=evt.clientX;
var ykor=evt.clientY;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 202
ctx.fillStyle=createGradient(xkor,ykor,ctx);
ctx.fillRect(0,0,500,400);
}
var createGradient= function(xkor,ykor,ctx) {
var number1=document.querySelector(input[name=num1]);
var number2=document.querySelector(input[name=num2]);
var color1=document.querySelector(input[name=clr1]);
var color2=document.querySelector(input[name=clr2]);
var color3=document.querySelector(input[name=clr3]);
var rGradient=ctx.createRadialGradient(xkor,ykor,
number1.value,xkor,ykor,number2.value);
rGradient.addColorStop(0.0,color1.value);
rGradient.addColorStop(0.75,color2.value);
rGradient.addColorStop(1.0,color3.value);
return rGradient;
}
</script>
</head>
<body onload=draw(); >
<canvas id=canvas width=500 height=400
onmousemove=createRadialgr(event);>
Tarayc canvas elemann desteklemiyor.
</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
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>
<head><meta charset=utf-8>
<title>createPattern()</title>
<style type=text/css>
canvas{
border:1px solid blue;
}
</style>
<script type=text/javascript>
var draw= function() {
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 >
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 205
CANVAS 205
Ekran grnts:
html5.png
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
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
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.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>scale()</title>
<style type=text/css>
canvas
{
border: 1px solid blue;
}
</style>
<script type=text/javascript>
var draw = function () {
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 208
</canvas>
</body>
</html>
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);
+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)
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>rotate()</title>
<script type=text/javascript>
var draw = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.fillStyle = red;
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
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
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</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)
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>translate()</title>
<script type=text/javascript>
var draw = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.fillStyle = red;
ctx.strokeStyle = #D8CFFF;
ctx.lineWidth = 1;
for (var y = 0; y <= 150; y += 10) {
ctx.beginPath();
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 212
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);
ctx.fillRect(20,20,90,50);
}
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=400 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
transform(), setTransform()
+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.
m21
dx
m12
m22
dy
context2d.transform(m11,m12,m21,m22,dx,dy)
context2d.setTransform(m11,m12,m21,m22,dx,dy)
sin()
sin()
cos()
context2d.transform(cos(a),sin(a),-sin(a),cos(a),0,0)
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>transform()</title>
<script type=text/javascript>
var draw = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.fillStyle = red;
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 214
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
Ekran grnts:
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)
yeni bir orijin noktas tanmlamak iin kullanlr. Yukardaki transformasyon matris kullanlarak eme (skew) ifllemleri de yaplabilir.
erleri kullanr.
Kullanm: context2d.font[=value]
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
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.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>textAlign()</title>
<style>
canvas
{
border:1px solid gray;
}
</style>
<script type=text/javascript>
var renkler = [red, blue, maroon, #9DDAF5, #F516BD];
var draw = function () {
var ctx =
document.getElementsByTagName (canvas)[0].getContext(2d);
ctx.font = 15px calibri;
// Metin1 textAlign:start(Varsaylan)
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 217
CANVAS 217
// Metin2 textAlign:end
ctx.textAlign = end;
ctx.fillText(Metin2, 120, 50);
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;
ctx.fillText(Metin4, 240, 105);
ciz(ctx, 240, 105);
// Metin5 textAlign:center
ctx.textAlign = center;
ctx.fillText(Metin5, 260, 130);
ciz(ctx, 260, 130);
}
var i = 0;
var ciz = function (ctx, x, y) {
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>
<body onload=draw();>
<canvas id=canvas width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 218
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.
context2d.fillText(text,x,y [,maxWidth])
context2d.strokeText(text,x,y [,maxWidth])
rnek:
<!DOCTYPE html>
<html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 219
CANVAS 219
<head>
<meta charset=utf-8>
<title>fillText(),strpkeText()</title>
<style>
canvas
{
border:1px solid gray;
}
</style>
<script type=text/javascript>
var renkler = [red, blue, maroon, #9DDAF5, #F516BD];
var draw = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.font = italic 200 38px/4 calibri;
ctx.fillStyle = red;
ctx.strokeStyle = blue;
ctx.fillText(Canvas Uygulamalar, 10, 40);
ctx.strokeText(Her Ynyle HTML5,10,100);
}
</script>
</head>
<body onload=draw();>
<canvas id=canvas width=350 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 220
measureText()
metrics=context2d.measureText(text)
metrics.width
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>measureText()</title>
<style>
canvas
{
border: 1px solid gray;
}
</style>
<script type=text/javascript>
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
*/
}
</script>
</head>
<body onload=init();>
<canvas id=canvas width=300 height=100>
+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-
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.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 222
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>drawImage()</title>
<script type=text/javascript>
var init = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
var img = new Image();
img.src = seman.png;
/*Yeni bir img nesnesi oluflturduk ve src zellii ile kaynak resmi tanmladk*/
img.onload = function () {
}
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();
}
}
</script>
</head>
<body onload=init();>
<canvas id=canvas width=300 height=150>
</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
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], ...
+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>
<meta charset=utf-8>
<title>Puzzle Image</title>
<script type=text/javascript>
var cor = [];
var corSrc = [];
var corDes = [];
var img;
var ctx;
var init = function () {
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
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>
<body onload=init();>
<canvas id=cvs width=800 height=400>
Tarayc canvas elemann desteklemiyor.
</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()
ayarlar.
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 228
zellik
data
height
width
Aklama
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
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>createImageData()</title>
<script type=text/javascript>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 229
CANVAS 229
}
</script>
</head>
<body onload=init();>
<canvas id=cvs width=400 height=200>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
createImageData() metodunun belirtilen boyutlarda fleffaf siyah renkte bir ImageData nesnesi oluflturduunu daha nce sylemifltik. [CanvasPixelArray] dizisine
bakarsak;
[CanvasPixelArray]
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
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
(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>
<meta charset=utf-8>
<title>getImageData()</title>
<script type=text/javascript>
var dizi = [];
var init = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
var img = new Image();
img.src = get.jpg;
img.onload = function () {
ctx.drawImage(img, 0, 0);
var _gImageData = ctx.getImageData(100, 0, 100, 50);
for (var i = 0; i < 20; i++) {
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
<body onload=init();>
<canvas id=cvs width=450 height=150>
Tarayc canvas elemann desteklemiyor.
</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)
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 232
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>putImageData()</title>
<style type=text/css>
canvas{
{border:1px solid gray;
}
</style>
<script type=text/javascript>
var dizi = [];
var init = function () {
var ctx =
document.getElementsByTagName (canvas)[0].getContext(2d);
// lk nce 100*50 boyutunda bir ImageData nesnesi oluflturalm;
olacaktr. Ayn zamanda her pikselin renk deeri 4 tamsay ile tanmlandndan
IData.data(CanvasPixelArray dizisi) 64000 elemanl olacaktr*/
IData.data[i + 3] = 255;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 233
CANVAS 233
ctx.putImageData(IData,50,20);
}
</script>
</head>
<body onload=init();>
<canvas id=cvs width=300 height=150>
Tarayc canvas elemann desteklemiyor.
</canvas>
</body>
</html>
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
<meta charset=utf-8>
<title>Puzzle Image</title>
<script type=text/javascript>
var cor = [];
var corSrc = [];
var corDes = [];
var img;
var ctx;
var init = function () {
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>
<body onload=init();>
<canvas id=cvs width=800 height=400>
Tarayc canvas elemann desteklemiyor.
</canvas>
<img id=res src=parca.png style=visibility: hidden; />
</body>
</html>
Canvas zerinde kullanc Mouseun sol tufluna bastnda mClick isimli fonksiyon
alflacak.
mClick fonksiyonu ve dier deiflkenler;
var ch = [];
var durum = 0;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 236
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
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 238
background-color:crimson;
opacity:0.6;
top:0px;
left:0px;
}
</style>
<script type=text/javascript>
var canvas1, canvas2, paint;
var ctx1, ctx2;
var sx, sy, ex, ey;
var durum = false;
var maske;
var arac = line;
/*Kullanc canvas zerine izim yapmak iin line, rect, ellipse aralarndan birisini kullanabilir.
Sayfa yklendiinde varsaylan ara line aracdr*/
/*canvas2 adyla yeni bir canvas eleman (buffer canvas) oluflturuldu ve paint referansl
elemannn ierisine appendChild() metoduyla eklendi*/
tool,
tool,
tool,
tool,
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 239
CANVAS 239
maske = document.getElementById(maske);
}
var mDown = function (event) {
durum = true;
}
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) {
var evt = event || window.event;
ex = evt.clientX - paint.offsetLeft;
ey = evt.clientY - paint.offsetTop;
/*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
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);
}
var tool = function (event) {
var evt = event || window.event;
var tool_ = evt.target;
arac = tool_.alt;
if (arac == delete) {
ctx1.clearRect(0, 0, 800, 400);
}
switch (arac) {
case line:
maske.style.top = 0px;
break;
case rect:
maske.style.top = 30px;
break;
case ellipse:
maske.style.top = 60px;
break;
case delete:
maske.style.top = 90px;
break;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 241
CANVAS 241
}
</script>
</head>
<body onload=init();>
<div id=paint>
<canvas id=cvs width=800 height=400>
Tarayc canvas elemann desteklemiyor.
</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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>oyun_</title>
<style type=text/css>
canvas#buffer
{
position: absolute;
left:8px;
top:8px;
}
input[type=text]
{
background-color:khaki;
border:none;
font-family:Calibri;
font-size:16px;
}
a
{
background-color:#bbccff;
border:none;
font-family:Calibri;
font-size:16px;
text-decoration:none;
}
</style>
<script type=text/javascript>
/*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.*/
/*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
/*live[] dizisi konumHesapla() isimli fonksiyonun oluflturduu 112 deiflik sayy saklamak iin
kullanlacak*/
/*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;
/*Oyunda kullanacam iki tane resim nesnesi oluflturdum ve src zellii(property) ile
bu nesnelere kaynak tanmlamas 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
/*ki resmin onload olaylarnn sonucunda ana canvas eleman zerine toplam 112 tane resim
yerlefltirmifl olacam*/
img.onload = function () {
/*konumHesapla() fonksiyonunu 112 kere alfltrlarak live[] dizisi ierisinde 0 ile 111 arasndan
farkl 112 tane deer elde etmifl olurum*/
/*live[] dizisi ierisindeki ilk 72 deeri index numaralar olarak kullanp cort[] dizisinden elde
edeceim 72 farkl konuma sml.png resmini izdireceim.*/
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 246
img_.onload = function () {
/*live[] dizisi ierisindeki son 40 deeri index numaralar olarak kullanp cort[] dizisinden elde
edeceim 40 farkl konuma nosml.png resmini izdireceim.*/
}
}
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 ;
}
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 247
CANVAS 247
/*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.*/
/*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.beginPath();
ctxBuffer.moveTo(x, 0);
ctxBuffer.lineTo(x, 240);
ctxBuffer.stroke();
}
for (var y = 0; y <= 240; y += 30) {
ctxBuffer.beginPath();
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
document.getElementById(txt).value = say;
}
</script>
</head>
<body onload=init();>
<canvas id=canvas width=420 height=240>
</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
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 250
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas Animasyon Temelleri</title>
<style type=text/css>
canvas
{
border:1px solid gray;
}
</style>
<script type=text/javascript>
var ctx, arc1;
var objectArc = function (x, y) {
this.x = x;
this.y = y;
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 251
CANVAS 251
draw();
}
var draw = function () {
if (arc1.x > pEnd.x) {
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
ctx.fill();
arc1.x += 10;
setTimeout(draw(), 50);// zamanlayc
</script>
</head>
<body onload=play();>
<canvas id=canvas1 width=400 height=200>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 252
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 253
CANVAS 253
draw();
return;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.beginPath();
ctx.arc(arc1.x, arc1.y, 10, 0, Math.PI * 2, false);
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>
<meta charset=utf-8 />
<title>canvas</title>
<style type=text/css>
canvas
{
border:1px solid gray;
}
</style>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 254
<script type=text/javascript>
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.*/
durduruyoruz.*/
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.beginPath();
ctx.arc(40, pointY.y1, 10, 0, Math.PI * 2, false);
ctx.arc(80, pointY.y2, 10, 0, Math.PI * 2, false);
ctx.arc(120, pointY.y3, 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.*/
setTimeout(draw(), 50);
}
</script>
</head>
<body onload=play();>
<canvas id=canvas1 width=400 height=200>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 255
CANVAS 255
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 256
<head>
<meta charset=utf-8 />
<title>canvas</title>
<style type=text/css>
canvas
{
border: 1px solid gray;
}
</style>
<script type=text/javascript>
var ctx ,x,y;
/*arcObject isimli kurucu fonksiyon kullanlarak arc isimli bir nesne oluflturuldu*/
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>
<body onload=play();>
<canvas id=canvas1 width=400 height=200>
</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;
}
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 258
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) 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) 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;
setTimeout(play(), 50);
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>
<meta charset=utf-8 />
<title>canvas</title>
<style type=text/css>
canvas
{
border: 1px solid gray;
}
</style>
<script type=text/javascript>
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);
var play = function () {
ctx1 =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx2 =
document.getElementsByTagName(canvas)[1].getContext(2d);
ctx1.fillStyle = #ffcc00;
ctx2.fillStyle = #00bb00;
draw();
}
var draw = function () {
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
ctx2.canvas.height)) {
break;
}
}
arc.x += x;
arc.y += y;
setTimeout(play(), 50);
}
</script>
</head>
<body onload=play();>
<div style=width:400px;height:200px;position:relative;>
<canvas id=canvas1 width=400 height=200>
</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-
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 261
CANVAS 261
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas</title>
<style type=text/css>
canvas
{
border: 1px solid gray;
}
</style>
<script type=text/javascript>
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 draw = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
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
daire.y += dy;
setTimeout(draw(), 40);
}
</script>
</head>
<body onload=draw();>
<canvas id=canvas1 width=400 height=200>
</canvas>
</body>
</html>
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 263
CANVAS 263
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>
<meta charset=utf-8 />
<title>canvas</title>
<style type=text/css>
canvas
{
border: 1px solid gray;
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 264
}
</style>
<script type=text/javascript>
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 dx = Math.cos(rad) * d;
var dy = Math.sin(rad) * d;
var nokta = [];
var radUpdate = function () {
}
var draw = function () {
var ctx =
ocument.getElementsByTagName(canvas)[0].getContext(2d);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
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.r) {
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 266
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas</title>
<style type=text/css>
canvas
{
border: 1px solid gray;
}
</style>
<script type=text/javascript>
var merkezNokta = { x: 100, y: 70,radius:50 };
var daire = {};
var angle = 0;
var draw = function () {
var ctx =
document.getElementsByTagName(canvas)[0].getContext(2d);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
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;
setTimeout(draw(), 44);
}
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 267
CANVAS 267
</script>
</head>
<body onload=draw();>
<canvas id=canvas1 width=400 height=200>
</canvas>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 268
draw() fonksiyonu her alfltnda afladaki satrlar ile yeni izilecek dairenin x,y
koordinatlar hesaplanmaktadr.
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>
<meta charset=utf-8 />
<title>HTML5 Animasyon</title>
<style type=text/css>
canvas
{
border: 1px solid gray;
}
</style>
<script type=text/javascript>
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]
];
draw();
animasyonHesapla();
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 270
/*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);
for (var i = 0; i < daireArray.length; i++) {
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 () {
for (var i = 0; i < daireArray.length; i++) {
var tempDaire = daireArray[i];
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
daireArray[i] = tempDaire;
}
draw();
timer1 = setTimeout(mouseOver(), 35);
}
var mouseOut = function () {
clearTimeout(timer1);
for (var i = 0; i < daireArray.length; i++) {
var tempDaire = daireArray[i];
tempDaire.x = tempDaire.baseX;
tempDaire.y = tempDaire.baseY;
}
animasyonHesapla();
draw();
}
</script>
</head>
<body onload=init();>
<canvas id=canvas1 width=400 height=200>
</canvas>
</body>
</html>
Ekran grnts:
+HTML5-BOLUM6
6/17/11
4:28 PM
Page 272
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 () {
for (var i = 0; i < daireArray.length; i++) {
var tempDaire = daireArray[i];
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;
}
}
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
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)
ctx.fillStyle = rGradient;
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
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
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 () {
for (var i = 0; i < daireArray.length; i++) {
var tempDaire = daireArray[i];
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;
daireArray[i] = tempDaire;
}
draw();
timer1 = setTimeout(mouseOver(), 35);
}
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).
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
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
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
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
globalCompositeOperation
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+
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
+HTML5-BOLUM6
6/17/11
4:28 PM
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.
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 282
</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
Afladaki rneklerde sadece HTML5 body eleman ierisine inline olarak eklenecek
<svg> elemannn ierii verilecektir. Bu kodlarn <body> eleman ierisine yazldn
unutmaynz!
width:Dikdrtgen genifllii
height:Dikdrtgen ykseklii
>>
SVG eleman ile tanmlanan koordinat sisteminde dikdrtgenin sol st kflesinin
koordinatlar x,y zellikleri ile ayarlanr.
>>
Yuvarlak kfleli dikdrtgenler oluflturmak iin rx,ry zellikleri kullanlr.
SVG dikdrtgen kflelerini yuvarlatmak iin rx,ry zellikleri ile tanml bir elips oluflturur.
Elipsin x eksenindeki yarap rx, y eksenindeki yarap ry zellikleri ile ayarlanr.
>>
fill, stroke, stroke-width ... zellikleri presentation attributes (stil/sunum zellikleri)
olarak adlandrlr. sterseniz bu zelliklere yukardaki gibi ya da style zellii
ierisinde deer atayabilirsiniz.
style=fill:blue;stroke:gray;stroke-width:5 gibi.
-->
</svg>
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 284
Sonu:
Ekran grnts Firefox 4 ile elde edilmifltir.
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>rect</title>
<script type=text/javascript>
var init = function () {
var gElement = document.getElementsByTagName(g)[0];
gElement.setAttribute(style,
fill:#FCD526;stroke:gray;stroke-width:3);
}
</script>
</head>
<body onload=init();>
<svg xmlns=http://www.w3.org/2000/svg height=100 width=300>
<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
Ekran grnts:
SVG eleman ile tanmlanan koordinat sisteminde dairenin merkez noktas cx,cy zellikleri
ile tanmlanr. r zellii ile daire yarap ayarlanr.
-->
</svg>
Sonu:
Ekran grnts Firefox 4 ile elde edilmifltir.
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 286
ry=60/>
<!--
SVG eleman ile tanmlanan koordinat sisteminde elipsin merkez noktas cx,cy
zellikleri ile tanmlanr.
>>
Elipsin yatay eksendeki yarap rx, dikey eksendeki yarap ry zellikleri ile ayarlanr.
</svg>
-->
Sonu:
Ekran grnts Firefox 4 ile elde edilmifltir.
SVG eleman ile tanmlanan koordinat sisteminde x1,y1 zellikleri ile izgi bafllang
noktas x2,y2 zellikleri ile izgi bitifl noktas tanmlanr.
Unutmayn! Etiketler iindeki belirtilen zelliklere JavaScript yardmyla ulaflp
deerlerini renebilir ya da deifltirebiliriz.
</svg>
-->
Sonu:
Ekran grnts Firefox 4 ile elde edilmifltir.
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 287
</svg>
-->
</svg>
-->
Ekran grnts:
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 288
Ekran grnts:
Ekran grnts Firefox 4 ile elde edilmifltir.
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:
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 289
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
+HTML5-BOLUM7
6/17/11
4:29 PM
Page 290
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 291
HTML5 AUDIO
ve VIDEO
ELEMANLARI
<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)
3.5+
10.5+
Wav (.wav)
Destei var
(QuickTime ile)
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 292
src
audio eleman tarafndan alnacak kaynak ses dosyasn tanmlamak iin kullanlr.
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>audio eleman</title>
<style type=text/css>
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
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.
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.
<script type=text/javascript>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 294
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 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>
<meta charset=utf-8 />
+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>
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
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>source</title>
<style type=text/css>
input:nth-of-type(n)
{
background-color:lightblue;
border:none;
}
</style>
<script type=text/javascript>
var start = function () {
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
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.
// 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
Aklama
autoplay,
controls,
preload, loop
src
Kullanm: mediaElemanRef.ozellik[=true||false]
Kullanm: mediaElemanRef.src[=kaynak]
rnek:
currentSrc
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>src</title>
</style>
<script type=text/javascript>
var start = function () {
document.getElementsByTagName(audio)[0].src=audio1.ogg;
}
</script>
</head>
<body onload=start();>
<audio controls></audio>
</body>
</html>
+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
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 300
networkState
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)
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
Dier zellikler
Metotlar
canPlayType()
Taraycnn belirtilen medya formatn destekleme durumunu renmek iin kullanlr.
Kullanm: mediaElemanRef.canPlayType(medyaTr)
Eer bofl bir string verisi dndrrse, tarayc belirtilen medya trn oynatamyor.
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canPlayType()</title>
<style type=text/css>
p
{
margin-top: 5px;
width: 170px;
background-color:crimson;
text-indent:3px;
color:White;
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 302
}
</style>
<script type=text/javascript>
var init = function () {
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+$/;
vSource = video.src;
p_.appendChild(document.createTextNode(oynatlan dosya:
+ + reg.exec(vSource)));
}
</script>
</head>
<body onload=init();>
<video controls></video>
<p>
</p>
</body>
</html>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 303
Ekran grntleri:
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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>play(),pause()</title>
<style type=text/css>
video
{
border: 1px solid gray;
}
</style>
<script type=text/javascript src=video.js></script>
</head>
<body onload=init();>
<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>
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;
var init = function () {
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
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
img2.src = ses2.png;
} else {
videoEl.muted = true;
img2.src = ses1.png;
}
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;
img2.src = ses2.png;
}
Ekran grnts:
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 307
Aklama
Bu olay, sayfa yklendikten sonra medya ieriinin oynatlmas iin
yeterli tamponlanmfl veri elde edildiinde oluflur.
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
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 308
pause
play
progress
ratechange
timeupdate
volumechange
Dier Olaylar
NOT
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.
}
</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
// Kodlar
}
</script>
</head>
<body onload=init();>
<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 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.
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 310
}
var end = function () {
// kodlar
}
</script>
</head>
<body onload=init();>
<video id=video1 controls src=cart.ogg width=400>
</video>
</body>
</html>
rnek:
<!DOCTYPE html>
<html>
<head>
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 311
videoEl.addEventListener(ended, function () {
// Kodlar
}, false);
} else {
videoEl.attachEvent(onended, function () {
});
// Kodlar
</script>
</head>
<body onload=init();>
<video id=video1 controls src=cart.ogg width=400>
</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>
<meta charset=utf-8 />
<title>Farkl Tarayclar iin olay dinleyicisi nesnesi</title>
<script type=text/javascript>
/*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
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 313
ekleyeceiz.
HTML5 sayfas ierii
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video Player Uygulamas-II</title>
<link type=text/css rel=Stylesheet href=video.css />
<script type=text/javascript src=video.js>
</script>
</head>
<body onload=init();>
<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>
div#videoPlayer
{
width: 500px;
position: relative;
height: 278px;
}
div#controls
{
position: absolute;
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 314
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-family:Calibri;
font-size:24px;
color:#00baff;
}
#controls img[alt=sesAcik]
{
position:absolute;
left:440px;
top:4px;
}
+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);
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 316
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 317
Ekran grnts:
+HTML5-BOLUM8
6/17/11
4:30 PM
Page 318
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.
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;
+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.
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
Page 320
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 321
SRKLE-BIRAK
fiLEMLER
ARAYZ
(DRAG and
DROP API)
dataTransfer Nesnesi
flacaz). Bu nesne DnD arayz ile tanmlanan zellik ve metotlara sahiptir. Aflada bu nesne iin tanml olan zellik ve metotlara bakacaz.
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
Kullanm: dataTransfer.dropEffect[=value]
Tarayc Davranfl
uninitialized, copy,
copyLink, copyMove, all
deerlerinden herhangi biri
copy
copy
link
link
uninitialized, move,
copyMove, linkMove, all
deerlerinden herhangi biri
move
move
uninitialized, link,
copyLink, linkMove, all
deerlerinden herhangi biri
Dier zellikler
dropEffect
files, types
setData()
Aklama
Srklenecek veriyi ve trn tanmlamak iin kullanlr.
Kullanm: dataTransfer.setData(format,data)
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 323
Kullanm: data=dataTransfer.getData(format)
Dier Metotlar
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.
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 324
<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>
<script type=text/javascript>
/*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;
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 325
},
getPreventDefault: function (event) {
/*
};
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false;
}
/*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.
*/
evt.dataTransfer.setData(text, evt.target.id);
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 326
}, false);
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);
}
</script>
</head>
<body onload=init();>
<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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<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>
<script type=text/javascript>
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
eventObject.getPreventDefault(event);
}, false);
target.addEventListener(dragover, function (event) {
eventObject.getPreventDefault(event);
}, false);
}
var dragStart = function (event) {
var evt = eventObject.getEvent(event);
evt.dataTransfer.setData(text, <img src= +
evt.target.src + /><br/><span> + evt.target.alt + </span>);
+HTML5-BOLUM9
6/17/11
4:31 PM
Page 330
}
</script>
</head>
<body onload=init();>
<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 {
}
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 332
getCurrentPoston()
Taraycnn alflt bilgisayarn geerli konumunu elde etmek iin kullanlan metottur.
Kullanm:
navigator.geolocation.getCurrentPosition(successCallback[,errorCallback][,options])
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.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>geolocation</title>
<script type=text/javascript>
var init = function () {
if (navigator.geolocation) {
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
+ lng);
}
var errorFunction = function (err) {
alert(hata!);
}
</script>
</head>
<body onload=init();>
</body>
</html>
Taraycy alfltrdmzda ilk nce konum bilgisini paylaflmak isteyip istemediimiz sorulacaktr.
watchPoston()
watchId = navigator.geolocation.watchPosition(successCallback
[, errorCallback] [, options])
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 334
clearWatch()
Kullanm: navigator.geolocation.clearWatch(watchId)
poston Nesnesi
Aklama
coords
timestamp
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.
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 335
postonError Nesnesi
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);
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:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 336
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 337
Ekran grnts:
postonOptons Nesnesi
Aklama
maximumAge
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
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>
<meta charset=utf-8 />
<title>google maps</title>
<style type=text/css>
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>
<script type=text/javascript>
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
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:
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 340
Latitude: Enlem.
Longitude: Boylam.
Harita ile ilgili seenekleri tanmlamak iin mapOptions isimli bir nesne oluflturduk.
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 341
fiimdi HTML5 Geolocation API + Google Maps kullanarak bulunduumuz konumu bize, harita zerinde grsel olarak gsterecek bir rnek uygulama gelifltireceiz.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>google maps</title>
<style type=text/css>
body
{
height: 100%;
margin: 0px;
padding: 10px;
}
</style>
<script type=text/javascript
src=http://maps.google.com/maps/api/js?sensor=true>
</script>
<script type=text/javascript>
function init() {
if (navigator.geolocation) {
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 342
navigator.geolocation.getCurrentPosition(pozisyonBul,hata);
} else {
alert(Tarayc geolocation API desteklemiyor....);
}
}
var pozisyonBul = function (position) {
var mapOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
});
+HTML5-BOLUM10
6/17/11
4:31 PM
Page 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
Tarayc Destei
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
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
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>
<meta charset=utf-8 />
<title>storage.key()</title>
<script type=text/javascript>
var init = function () {
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
</head>
<body onload=init();>
</body>
</html>
Ekran grnts:
length zellii
storage nesnesi ile eriflilebilecek veri iftlerinin (anahtar = deer) saysn elde et-
Kullanm: storage.length
rnek:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>storage.length</title>
<script type=text/javascript>
var init = function () {
var storage = window.localStorage;
storage.clear();
/*Daha nce kaydedilmifl yerel veri iftlerini
clear() metoduyla siliyoruz.*/
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 349
</script>
</head>
<body onload=init();>
</body>
</html>
Ekran grnts:
event.url: Yerel ya da oturum depolama ile saklanan deer iftlerinin gncellendii sayfann URL adresini dndrr.
// event.key, event.newValue
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 350
<style>
tr
{
font-family: Calibri;
font-size: 14px;
text-indent: 5px;
}
table td:nth-of-type(1)
{
background-color: gray;
width: 100px;
float: left;
color: White;
}
table td:nth-of-type(2)
{
background-color: #cccccc;
width: 500px;
float: right;
}
caption
{
display: block;
line-height: 1.5em;
font-family: Verdana;
background-color: #ffcc99;
}
</style>
<script type=text/javascript>
var init = function () {
domStorageGet();
}
var domStorageGet = function () {
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 351
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}
*/
if (lStrLength > 0) {
caption.innerText = localStorage;
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 352
// 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... */
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 353
}
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.*/
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 354
domStorageGet();
}
</script>
</head>
<body onload=init();>
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
Opera 11
ekran
grnts
+HTML5-BOLUM11
6/17/11
4:32 PM
Page 356
Tarayc Destei
Web Storage API iin tarayc destek durumu:
Tarayc
Srm
Internet Explorer
8+
Firefox
2+
Opera
10.50+
Safari (WebKit)
4+