javascript ders

7/31/2019 javaScript ders

1/18

1

1

JavaScript

Hafta 4

2

JavaScript nedir?

Javascript, HTMLin bir parasdr ve iinde

bulunduu HTML ile birlikte Web Browserprogram tarafndan yorumlanr. Javascript program yazmak demek, bir Web

sayfas hazrlamak ve bu sayfadaki HTMLkodlarnn arasna Javascript kodlar gmmekdemektir.

lk JavaScript ieren sayfamz, burada JavaScriptkodlar HTML ile i ier girmi konumdadr.

html rnekler\rnek30.html

3

Kural olarak, JavaScript blm, HTMLin iinde etiketlerinin arasnagmlr. rnek31.html

Genellikle kodlar ierisinekonulur.

JavaScript kodlar baka dosyada yazlp HTMLierisineeklinde de eklenebilir. rnek32.html

4

Yorum Satrlar Eski Browser

Bu blmn banda ve sonunda yer alan iaretlerinin arasndaki her ey, eskisrm Browserlar tarafndan HTML dili kurallarnagre yorum saylacak ve grmezden gelinecektir

5

Yorum satrlar

Javascript dilinin yorumlar ise // iaretiylebalar ve satr sonunda sona erer.

Eer yorumlarnz bir satrdan uzunolacaksa, bunu yle belirtebilirsiniz:

/* yorumun birinci satr

yorumun ikinci satr

yorumun nc satr */

6

JavaScript Yklenmesi Javascript kodlar, ziyaretinin sayfanzda bir yeri

tklamas veya klavyede bir tua basmasylaharekete geer veya

HTML sayfas ziyaretinin Browserndagrntlendii anda otomatik olarak almayabalar.

Otomatik alan JavaScript kodu ise iki ayryntemle altrlabilir: HTML kodlar icra edilmeden nce (yani sayfanz

ziyaretinin Web Browsernda grntlenmeden nceveya rnek33a.html

sayfa grntlendikten sonra. rnek33b.html


2/18

2

7

Javascriptin Temel lkeleri

Javascript dilinin deikenleri, metodlar ve nesnelerinibelirleyen isimlere Belirleyiciler (Identifier) denir.

Bu snfa giren btn kelimeler ya harfle ya da alt izgi (_)ile balar. Rakam veya dier iaretler birinci karakter olarakkullanlamaz, fakat daha sonra kullanlabilir.

Javascript, ayn kelimenin byk harfle yazlan ile kkharfle yazlann farkl isimler olarak grr.

Bu snfta giren kelimelerin iinde boluk olamaz. Javascript kodlarnz sizin bilgisayarnzda deil, ziyaretinin

bilgisayarnda altrlacana gre, kullandnzkarakterlerin ziyaretinin bilgisayarnda nasl bir deertayacan dnmeniz gerekir. Bu bakmdan gvenli yol,Bu snfa giren kelimelerde, ngilizce alfabede bulunmayan,Trke ve dier dillerdeki high-ASCII karakterleri (, , , ,, ile , , , , ve ) kullanmamaktr.

8

Anahtar Kelimeler (Keyword)

Javascript dilinin nceden tanmlanm ve

program

n yorumunda zel anlam kazand

r

lm

kelimelerine Anahtar Kelime denilir.

9

Ayrlm Kelimeler (Reserved)

abstract (soyut)boolean (Boolean Mant)break (kes)byte (bayt)case (hal)catch(yakala)char (karakter)class (snf)const(sabit)continue (devam)default (varsaylan)delete (sil)do (yap)double(ift)else (baka bir durum)extends (uzanr)false (yanl)final (sonuncu)finally(sonunda)float(kesirli)for (iin)

function (ilev)goto (--ya git)if(eer)implements(uygular)import (ithal et)in (iinde)instanceof (--nn oluumu)int (integer, tam say)interface (arayz)labed (etiketli)long (uzun)native(kendinden olan)new (yeni)null (bo deer)package (paket)private (zel)protected (korunmu)public(genel)return (dn)short (ksa)static(sabit)

super (kuvvet)

switch (deitir)synchronized (uyumlu)

this (bu)

throw (iine kat)

throws (iine katar)

transient (geici)true (doru)try (dene)

typeof (tr)

var (deiken)void (geersiz)

while (iken)

with(ile)

kinci gruba girsin-girmesin baz kelimeler, ilerde Javascript programlama veyorumlama ilerinde kullanlabilecei dncesi ile, bir kenara ayrlmtr;Javascript kodlarnda kullanlamazlar.

10

Deerler (Literal):

Javascript kodu icra edildii srada deimeyenrakam veya metinlere Deer denir. Javascriptkodlarnda be tr deer bulunur:

1. Tamsay Deerler (Integer Literal):2. Kayan Noktal Deerler (Floating-point literal):3. Boolean Mantkfadeleri (Boolean Literal):

True (Doru) deerini 1, False (Yanl) deerini 0 rakamyla tutar.

4. Alfanmerik (Karakter) Deerler (String literal):5. zel Karakterler

11

zel Karakterler \b - Klavyede Geri (backspace) tuunun grevini yaptrr. \f - Yazcya sayfay bitirmeden karttrr (formfeed). \n - Yaz imlecini yeni bir satrn bana getirir (new line) \r - Klavyede Enter-Return tuunun grevini yaptrr. \t - Sekme (tab) iaretini koydurur. \\ - Yazya ters-bl iareti koydurur. \ - Yazya tek-trnak iareti koydurur. \ - Yazya ift-trnak iareti koydurur. Javascripte bu tr zel karakterlerle HTML sayfasna bir

metin yazdracanz zaman, bu yaznn etiketleri arasnda olmas gerekir. Aksi taktirde Javascriptne yazdrrsa yazdrsn, HTML bu zel karakterleri dikkatealmayacaktr.

12

Javascript Deikenleri (Variable) Deiken, ad stnde, Javascript yorumlaycs tarafndan

bilgisayarn belleinde tutulan ve ierdii deer programnakna gre deien bir unsurdur.

Deikenlerin bir ad olur, bir de deeri. Program boyuncadeikenin ad deimez; fakat ierii deiebilir.

Deikenlere isim verirken Belirleyici isimleri kurallarnariayet etmeniz gerekir.

Javascript, byk harf-kk harf ayrt ettii (case-sensitive olduu) iin, rnein SONUC ve sonuc kelimeleriiki ayr deiken gsterir.


3/18

3

13

Deikenler Deiken tanmlamak, bilgisayar programclarna daima

gereksiz bir yk gibi grnr.

Birazdan greceiz, Javascript sadece deikenleritanmlamay zorunlu klmakla kalmaz, fakat neredetanmlandna da zel bir nem verir.

Javascripte bir Belirleyicinin deiken olarak kullanlacanbildirmek iin var anahtar-kelimesini kullanrsnz:var sonucvar adi, soyadi, adres, siraNovar i, j, kvar mouseNerede, kutuBos, kutuDolu

Baz dier programlardan farkl olarak Javascript, sizedeikenleri hem beyan, hem de ieriini belirleme iini aynanda yapma imkan veriyor (initialization):var sonuc = Merhaba Dnya!;var adi = Abdullah, soyadi = Aksak;var i = 100, j = 0.01, k = 135;var kutuBos = false, kutuDolu = true; 14

Deikenler

Bir deikeni tanmlayarak iini doldurmadan(initializationdan) nce iindeki deerisorgulamaya kalkarsanz, Browsern Javascriptyorumlaycs o noktada durur ve tanmlanmam(undefined) deiken hatas verir.

Javascript programlarnda be tr deikenbulunabilir:

1. Say (number): -14, 78, 876782. Boolean deiken: true, false3. Alfanmerik (String) Deiken: Merhaba Dnya!4. lev (Function) Deiken:5. Nesne (Object) deikenleri: window, document

15

Deikenleri simlendirmek

Javascript, deikenlerinizi isimlendirmede rakamla veiaretle balamamak dnda kural koymuyor; ama iyiprogramclk teknii, deikenlere anlalr ve kullanldyeni belli eden isimler vermektir.

rnein, adieklindeki bir deiken ad, ok deikenlibir Javascript programnda yanltc olur. musteri_adi veyamusteriAdi ok daha uygun olabilir.

Ayr

ca deeri Evet (=doru, true) veya Hay

r (=yanl

,false) olan Boolean deikenlerin adlandrlmasnda,rnein, doluMu, tamamMi, acikMi, bittiMi gibicevab artran deiken adlar kullanabilirsiniz.

16

Yetki Alan (Scope) HTML dosyasnn ba tarafnda, etiketi iinde, bir

deikeni tanmladnz ve ona bir deer verdiinizi dnn. Daha sonra yazacanz btn fonksiyonlarda veya deerini

belirleyebileceiniz otomatik fonksiyonlarda (metodlarda) budeikeni bir daha tanmlamaya ve deerini belirlemeye gerekkalmadan kullanabilirsiniz; nk Javascript asndan budeiken genel (global) deiken saylr. rnek34a.html

HTMLin gvde ksmnda ( etiketi iinde) bir fonksiyon

yazdmz ve bu fonksiyonun iinde bir deiken tanmladmzdnn. Daha sonra yazacanz bir fonksiyonda bu deikeni

kullanamazsnz; nk Javascript bir fonksiyonun iindekideikeni yerel (local) deiken sayar ve kendi yetki alan(scopeu) dnda kullanmanza izin vermez. rnek34b.html

17

Yetki Alan - SonuBu altrmann rettii kural yle zetlenebilir:

Bir genel deiken, bir fonksiyon iinde yerelolarak deitirilebilir; ama onun genel deeri dierfonksiyonlar iin geerli kalr.

Javascript programlarnz yazdnz zaman geneldeikenleriniz beklediiniz deeri vermiyorsa budeeri bir fonksiyonun yerel olarak, srf kendisiiin, deitirip deitirmediine bakmalsnz.

Bu tr hatalardan kanmann bir yolu, yereldeikenlerinizle genel deikenlerinize farklisimler vermektir.

18

Dizi Deikenler

Dizi deikenler ise birden fazla deer tutabilirler. Bir dizideikenin bireylerinin deerlerini dizi-deikenin indeksi ilearabilir veya belirleyebilirsiniz.var dizinin_Ad = new Array(unsur1, unsur2, unsur3...unsurN)var kusDizi = new Array(blbl, kanarya, muhabbet,

papagan); Diziler sfrdan itibaren numaralanr. rneimizde dizinin

birinci yesi kusDizi[0], ikinci yesi kusDizi[1], nc yesi kusDizi[2] diye anlr.

Burada rnein kusDizi[2] deikeni muhabbetdeerini tar.

Dizi deikeni eleman saysn vererek de deklereedebilirsiniz

var weekday=new Array(7);

html rnekler\rnek34c.html


4/18

4

19

Dizi deiken Metotlar

join( ) : Dizi deikenin elemanlarn birletirmekiin kullanlr, sonu String olur.var a = [1, 2, 3]; // Create a new array with these three elements

var s = a.join( ); // s == "1,2,3"

html rnekler\rnek34e.html

reverse( ) : Dizi deikenleri elemanlarnn srasntersine evirmek iin kullanlr.var a = new Array(1,2,3); // a[0] = 1, a[1] = 2, a[2] = 3

a.reverse( ); // now a[0] = 3, a[1] = 2, a[2] = 1

var s = a.join( ); // s == "3,2,1"

html rnekler\rnek34g.html20


split( ) : Bir stringi baz paralayc karakterlerkullanarak (genellikle boluk, virgl, noktal virgl gibi) dizi

deikene paralar. join() in tam tersidir.var line1 = "a b c d e f"var ar1 = new Array()ar1 = line1.split(" ") // ar1[0]=a, ar1[1]=b,

sort( ): Dizi deikenin elemanlarn sralamak iinkullanlr.var a = new Array("banana", "cherry", "apple");a.sort( );var s = a.join(", "); // s == "apple, banana, cherry"

html rnekler\rnek34f.html

21

Dizi deiken Metotlar concat( ) : Dizi deikene eleman eklemek iin kullanlr.

var a = [1,2,3];a.concat(4, 5) // Returns [1,2,3,4,5]a.concat([4,5]); // Returns [1,2,3,4,5]a.concat([4,5],[6,7]) // Returns [1,2,3,4,5,6,7]a.concat(4, [5,[6,7]]) // Returns [1,2,3,4,5,[6,7]]

html rnekler\rnek34d.html slice(a,k) : Dizi deikenin a. Elemanlarn itibaren k eleman fakat

k. dahil olmayacakekildeki elemanlarn alarak yeni bir dizi deikenoluturulur. -1 son eleman ifade ederken, -3 sondan nc eleman

ifade eder.var a = [1,2,3,4,5];a.slice(0,3); // Returns [1,2,3]a.slice(3); // Returns [4,5]a.slice(1,-1); // Returns [2,3,4]a.slice(-3,-2); // Returns [3]

html rnekler\rnek34h.html22


splice(k,l) : dizi deikenin k. elemanndan isonraki ltane elemann siler. Tek argman alrsa k. Elemandansonraki elemanlar siler.

var a = [1,2,3,4,5,6,7,8];a.splice(4); // Returns [5,6,7,8]; a is [1,2,3,4]a.splice(1,2); // Returns [2,3]; a is [1,4]a.splice(1,1); // Returns [4]; a is [1]

html rnekler\rnek34k.html Bu metot ayn zamanda eleman eklemek iinde kullanlr:

var a = [1,2,3,4,5];a.splice(2,0,'a','b'); // Returns []; a is [1,2,'a','b',3,4,5]a.splice(2,2,[1,2],3); // Returns ['a','b']; a is [1,2,[1,2],3,3,4,5]

23

Dizi deiken Metotlarpush() andpop() dizi deikenler yt (stack) m gibi ilem yaptrr.push() dizi deikenin sonuna eleman ekler,pop() ise dizi deikenin

sonundan bir eleman geri getirir.html rnekler\rnek34l.html html rnekler\rnek34m.html

24


shift( ) and unshift( ) metotlarpush() vepop()gibi davranr, fakat bu ilemleri dizinin balang tarafndagerekletirir.

unshift( ) sadece Netscape taraycsnda alr. html rnekler\rnek34n.html html rnekler\rnek34o.html


5/18

5

25


toString( ) and toLocaleString( )

metotlar dizi deikenleri Stringedntrr.

26

ok Boyutlu dizi deikenler

ok boyutlu dizi deikenler; dizi deikenlerin dizideikenleri olarak tanmlanr.

Brady = new Array(3)

for (i = 0; i < Brady.length; ++ i)

Brady [i] = new Array(3);

Brady [0] [0] = "Marsha";Brady [0] [1] = "Carol";

Brady [0] [2] = "Greg";

Bunun yannda i ie gemi ekilde dizideikenler tanmlanabilir.

var matrix = [[1,2,3], [4,5,6], [7,8,9]];matrix[0][3]=3

html rnekler\rnek34p.html

27

Atama (Assignment) lemi

Tahmin ettiiniz gibi bunu eittir (=) iaretiyleyaparz:var adi = Ahmet; soyadi = Arif;var siraNo = 123; sigortaNo = A123-2345-234;

Javascriptte bir deikene deer atarken, budeeri mevcut bir veya daha fazla deikenden de

alabilirsiniz:var i = j + kvar indexNo = siraNo + kategoriNovar tutariTL = birimFiyatTL * adet

28

Aritmetiklemleri: Javascript, drt temel ilemi yapabilir. toplama ilemini art

iaretiyle (+), kartma ilemini eksi iaretiyle (-), arpmailemini yldz (asterisk, *) iaretiyle, ve blme ilemini dzbl iaretiyle (/), % ile kalan bulma ilemi yaptrrsnz.

Arttrma ve azaltma ilemleri, deikenin deerini ilemdekullanmadan veya kullandktan sonra arttrma veya azaltmailemi yapar.

Sonradan artrma x++, nceden artrma ++x. Sonradanazaltma x--, nceden azaltma x.

Toplama ve kartma ilemlerinde yapabileceiniz baka birksaltma ise yle yazlr:x = x + y ilemini ksaltmak iin x += yx = x - y ilemini ksaltmak iin x -= y

Javascript, alfanmerik deerlerle kartma, arpma veblme ilemleri yapmaz; sonucun yerine NaN (Not aNumber, Say Deil) yazar.

29

lemlerde Sra:Ayn ncelie sahip operatrler soldan saa doru ileme

dahil olurlar. lem sras iin tablo ya baknz. lem srasnda parantez varsa ncelikle parantez

ierisindeki ilemler yaplr. lem sras karmaas yaamamak iin ilemlerin uygun

parantezler ile yeniden yazlmas tavsiye edilir.x = a * b + c

x = a * (b + c)

x=a*b/c

x=a/c*b

30

zel Saysal Deerler

Special value to represent negative infinityNumber.NEGATIVE_INFINITY

Special value to represent infinityNumber.POSITIVE_INFINITY

Special not-a-number valueNumber.NaN

Smallest (closest to zero) representable numberNumber.MIN_VALUE

Largest representable numberNumber.MAX_VALUE

Special not-a-number valueNaN

Special value to represent infinityInfinity

AnlamSabit

JavaScript baz zel deerlere karlk gelecekekilde sabitlertanmlamaktadr.


6/18

6

31

Karlatrma lemleri: Javascriptin karlatrma operatrleri genellikle if (eer..ise)

ifadesiyle birlikte kullanlr; ve bu soruyu soran satra true(doru) veya false (yanl) sonucunu verir. nce, bu ilemleriyaptrtan operatrleri ve ilevlerini sralayalm:

== Eit operatr. aretin sanda ve solundaki deerlerin eitolmas halinde true (doru) sonucunu gnderir.

!= Eit deil operatr. aretin sanda ve solundaki deerlerineit olmamas halinde true (doru) sonucunu gnderir.

>Byktr operatr. Soldaki deer, dadaki deerden bykise true (doru) sonucunu gnderir.

< Kktr operatr. Soldaki deer, dadaki deerden kkise true (doru) sonucunu gnderir.

>= Byk veya eit operatr. Soldaki deer, dadaki deerdenbyk veya bu deere eit ise true (doru) sonucunu gnderir.

D && D>EE10) || !(s==y)

olur

36

Program Ak DenetimiProgram ierisinde belli bir art

salandnda programn bir ksmnnaltrlmas istenebilir.

Bu durumda if deyiminden yararlanlr.if (art) {

altrlmas istenen ifade;

}



7/18

7

37

if else

stenilen art salandnda bir program

parasnn salanmadnda ise baka birprogram parasnn almasn istiyorsanz:if (art) {

altrlmas istenen ifade;}

else{

altrlmas istenen baka ifade;

}

38

Dng Denetimi

if yapsnda almas istenilen ksm bir kere alr.Baz durumlarda, istenilen program parasnnbirden fazla altrlmas istenir.

Bu ilem for( I; II; III) ile yaplr. I: Dng deikeni ve balang deeri II: Sonlandrma koulu III: Bir sonraki aamaya geiteki artma miktar

for(i=1; i< 11; i++){document.writeln(i+. iterasyon);

} html rnekler\rnek39.html html rnekler\rnek39a.html html rnekler\rnek39b.html

39

While dngs

for dngsnde saya deikeninin belli deerleri iinistenilen program parasnn altrlmas istenmektedir.

Baz durumlarda bir koul saland srece istenilenprogram parasnn almas istenir.

Bunun iinwhile (art) {

altrlmas istenen ifade;

Saya deikeni ile art ifadesi hesaplanmaldr;}

html rnekler\rnek40.html html rnekler\rnek40a.html

40

for (x in mycars)

Dizi deikenin ierisindeki her bir eleman iin dng kurar.var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (var x in mycars){document.write(mycars[x] + "
")

}

html rnekler\rnek40b.html

41

do while (art) while dngsnn balayabilmesi iin ncelikle artn ilk

anda salanmas gerekmektedir. Eer salanmazsa dng hi balamaz. Bu durumda, dngnn en az bir defa almas ve

sonrasnda salanmas istenen artn kontrol edilerekdngye devam edilmesi istenebilir.

Bu ise

do{altrlmas istenen ifade;Saya deikeni ile art ifadesi hesaplanmaldr;

}while (art)

html rnekler\rnek41.html html rnekler\rnek41a.html

42

break, continue artl dngde, tekrar eden i, artn yerine geldii noktada

kendiliinden kesilecektir.Ayn otomasyonu for dngsndebreak (kes) vecontinue (devam et) komutlaryla biz de salayabiliriz.

JavaScript,break ile karlat anda dngy keser veicraata dngden sonra gelen ilk ifadeden devam eder.

continue ise JavaScriptin dngnn o andaki admndurdurup, dngnn bana dnmesini salar; dngsayacn bir sonraki deeriyle ileme devam eder.

html rnekler\rnek42.html html rnekler\rnek42a.html html rnekler\rnek42b.html


8/18

8

43

switch

Javascriptin switch (deitir) komutu,

programn bir deikenin deerine gre,belirli bir durum dahilinde bir iin yapmasnsalar.

switch (deitir){

case 1: ifade; break;

case 2 : ifade; break;

}


44

Javascriptte Fonksiyon

u ana kadar grdnz ilerin ou bir kere bavurulanilerdi; fakat ou zaman sayfanzdaki bir Javascript ileminin

defalarca yaplmas gerekebilir. Defalarca yaplmas istenen ilemler bir grup haline getirilerek

fonksiyon adn verdiimiz bir grup oluturulur. Genel hatlaryla fonksiyon, u formle gre yazlr:

function fonksiyon_ad(arg1,arg2,...,argN){ilemler;return sonu;

}

html rnekler\rnek44.html html rnekler\rnek44a.html html rnekler\rnek44b.html

45

charAt(i), parseInt(S,n), parseFloat(S)

charAt(i): Fonksiyonlarda ve dier tr ilemlerdekullanabileceimiz bir Javascript ksaltmas, filanca yerdekikarakter diyebileceimiz charAt(i) ifadesidir.

Alfanmerik deerleri tam sayya evirmek iinparseInt(String,n) ifadesini kullanrz. Buradaki n,

saynn hangi tabanda yazlmas gerektiini ifade eder (8,10, 16 lk sistemlerde).

Alfanmerik deerleri ondal sayya (floating point)evirmek iinparseFloat(String) ifadesini kullanrz.

46

Saat ve Tarih Browsern iletim sisteminden, iletim sisteminin de bilgisayarn temel

girdi/kt ilemlerini yapan BIOStan saati ve tarihi ieren bilgiyialmasn salar.

Geri metod Date (gnn tarihi) adn tayor, ama Date(),Javascript asndan class (snf) saylr ve edinilen bilgi sadece ay, gnve yl bilgisini deil, o andaki saati, dakikay ve saniyeyi de ierir.

Date(): getYear(), getMonth(), getDate(),getDay(), getTime(), getHours(),getMinutes(), getSeconds()

getYear : Yl (1900den sonra) getMonth : Ay (0=Ocak - 11=Aralk) getDate : Gn (1-31) getHours : Saat (0-23) getMinutes : Dakika (0-59) getSeconds : Saniye (0-59)

rnek45.html rnek45a.html rnek45b.html rnek45c .html

47

toString(), toLowerCase(),toUpperCase()

toString() metodu: Kelime anlam Stringeevir, alfanmerike evir olan bu metotla, saatnesnesinin tamamen kendine zg biimi,Javascript tarafndan HTMLin anlayabilecei ekleevrilmi olur.

toLowerCase() (kk harfe evir) vetoUpperCase() (byk harfe evir) metotlarsadece alfanmerik (String) deerlereuygulanabilir.

48

String Nesnesi zellikleri .indexOf(nnn) nnn ile belirttiiniz karakterlerin String iinde ilk getii

konumun indeksini verir.kitabnAd.indexOf(a)

.lastIndexOf(nn) nnn ile belirttiiniz karakterlerin String iinde getii sonkonumun indeksini verir.

kitabnAdi.lastIndexOf(a), .bold() Baladnz String nesnesini koyu yapar. rnein

kitabnAdi.bold()size Gazap zmleri etkisini verir.

.fontcolor(renk) String nesnesinin grntlenme rengini belirler.rnein

kitabnAdi.fontcolor(red)size Gazap zmleri deerini verir.

.fontsize(l) String nesnesinin grntlenmesinde harf byklnbelirler. rnein

kitabnAdi.fontsize(24)size Gazap zmleri deerini verir.

.italics() String nesnesinin itelik harfle grntlenmesini salar. rneinkitabnAdi.italics()

size Gazap zmleri deerini verir.


9/18

9

49

setTimeout(fonksiyon_ad, milisaniye)

stenilen fonksiyonun istenilen milisaniye aralklarla arlmasnsalayan bir fonksiyondur.

t=setTimeout("timedCount()",1000)clearTimeout(t)

rnek45.html ierisinde aadaki gibi dzenleme yaparak saat6:30 da baka bir i yaplmas ayarlanabilir.

if ((saat.getHours() == 6) && (saat.getMinutes() == 30)){document.saatForm.saatkutusu.value = "Alarm !!!";

}

html rnekler\rnek46.html50

Hazr Matematik Fonksiyonlar

xin mutlak deeriMath.abs(x)xin sinsMath.sin(x)

xin arctanjantMath.atan(x)xin y inci kuvvetiMath.pow(x,y)

xin arccosinsMath.acos(x)xin doal logaritmasMath.log(x)

xin arcsinsMath.asin(x)xin karekkMath.Sqrt(x)

xin tanjantMath.tan(x)E saysMath.E

xin cosinsMath.cos(x)Pi saysMath.PI

AnlamOperatrAnlamOperatr

51

Hazr Matematik Fonksiyonlar

xin exponansiyeliMath.exp(x)x'saysndanbyk enyakn tamsay

Math.ceil(x)

0" ile"1" arasndarasgele bir saydeeri

Math.random(x)x, y ninminimumu

Math.min(x,y)

x'saysndan kkve en yakntamsay

Math.floor(x)x, y ninmaksimumu

Math.max(x,y)

AnlamOperatrAnlamOperatr

html rnekler\rnek46m.html52

Rasgele say retme

Math.random() fonksiyonuyla 0 ile 1arasnda rasgele bir say retilir.

Math.floor((n+1)*Math.random())

fonksiyonuyla 0 ile n arasnda herhangi birrasgele bir say retilmi olur.

html rnekler\rnek46ma.html

53

try catch(err) Yazlan kod ierisinde muhtemel bir hata olmas kanlmaz

ise bu hatann olumas durumunda programn almasnnkesilmemesi, buna karlk bir mesaj veya baka bir ilemyaplmas isteniyorsa try catch ifadeleri kullanlr.

try{}catch(err){}

rnek46a.html rnek46b.html

Bir hata olumas durumunda onerror kullanlarak hata

ay

klamak iin rnek46c.html54

throw throw ifadesi kendi istisna durumu (ender

karlalan durum) oluturmanza imkan verir. Bu ekilde ak daha detayl kontrol ederek, bir

zel hata olutuunda hatay kendi belirlediinizekilde ortadan kaldrabilir veya kullancya dahadetayl bilgi sunabilirsiniz.

throw(exception)

html rnekler\rnek46d.html


10/18

10

55

Nesneler, Olaylar ve zellikleri

Javascript programclnda nesne (object), ve nesneninzellikleri (properties), genellikle HTML belgesinin ad(name) ve deeri (value) olan her eydir.

Bir HTML unsurunun etiketinde NAME ve VALUE blmlerivarsa, bu unsur, Javascript iin nesne saylr.

Bu tanma gre Form, Javascript iin bir nesnedir.Ayrca Form nesnesinin bir esi olan INPUT, kendisi de ad

ve deer alabildiine gre, Javascript iin bir nesne saylr.Bu nesneye daima iinde bulunduu nesne dolaysylaatfta bulunabilirsiniz.

Bu tr atflarda bulunurken, u kurala uymanz gerekir:nesneAd.zellikAd

56

Nesne ve Metotlar

Browsern masastndeki penceresinin bir zellii

gibi deerleri belirleyen otomatik ilevleri;nesnelerin deerlerini belirli bir dzen iindearttran veya azaltan sreleri ve Javascriptin hazrablonlarndan yeni bir nesne reten ilemleri,metod ad altnda toplarz.

Her nesnenin kendine ait bir metodu olabilir; birmetod birden fazla nesne ile birlikte kullanlabilir.

Bu gibi ifadeleri yle yazarz:nesneAd.metodAd(argman)

57

Nesne Oluturmak Nesne birden fazla zellii olan bir deikendir. Bir insann ad, soyad, ya,

kredi kart numaras gibi bilgileri tek bir deiken altnda tutmak mmkndr.Bunun iin de nce bunu oluturan bir fonksiyon yazp sonra istediimizdeikeni gerekli parametrelerle bu fonksiyon cinsinden tanmlamalyz.

function insan(ad,soyad,yas,kartno){this.ad=ad;this.soyad=soyad;this.yas=yas;this.kartno=kartno;

}kisi[1]= new insan(Serdar,Kalayc,22,12345678)

Buradaki this anahtar kelimesi bu nesneye ait olan zellikler iin(sadecefonksiyonun iinde) kullanlr.

Daha sonra kii isimli dizinin birinci elemann insan cinsinden yeni bir nesneolduunu belirtmek iin new anahtar kelimesini kullanarak ve gerekliparametreleri vererek fonksiyonu aryoruz.

Daha sonra gerekli zelliklere erimek iinkisi[1].ad , kisi[1].soyad ...

yazlr.

58

zel Nesneler JScript'te bir nceki konuda anlattmz gibi kendi tanmladmz

nesnelerin yan sra halihazrda var olan nesneler de vardr. Bizim iinnemli olan yle sralayabiliriz.

window Frame, parent, self, _top... location history document

form text field text area

checkboxradiopasswordselectbutton

submitresetlinkanchor

59

Olaylar Browser programlar kendiliklerinden veya GUI sonucu,

yle baz olaylara (rnein Mouse iaretisinin bir nesneninzerine gelmesi veya bilgisayar kullancsnn Mouseunveya klavyenin bir dmesini tklamas gibi) yol aarlar ki,bu olay iletim sistemi-GUI-Browser yoluyla HTML belgesi(ve dolaysyla Javascript) asndan nem tayabilir.Bunlara event (olay) denir.

Kullancnn Mouseun bir dmesini tklamas, Click, buolay karlayan ve olay ynlendiren metot (Event Handler)ise onClick (tklandnda, tklama halinde) adn tar.

Javascripte bu olayn olmas halinde icra edilmek zerezel emirler verilebilir. Bu tr komutlarn yazlmasnda uyntem izlenir:

event=fonksiyon_veya_metod(argman)

60

Olaylar Event Handlerlar, bir tr adlandrlm ama ii bo fonksiyonlar

gibi dnebilirsiniz. Programc olarak bize den, bu olay karsnda olay

ynlendiricisinin ne yapmasn istediimi belirtmekten ibarettir. Event Handlerlar, daha nceden hazrladmz bir fonksiyonu

greve arabilir; veya hemen orackta bir Javascriptmetodunu da devreye sokabiliriz. Mesela:

Ziyareti bu INPUT kutusuna soyadn yazdnda, kutununierii deimi olacak ve bu Change (deiiklik) olay, kendisiniyndendiren onChange sayesinde, nceden hazrladmzdenetle() isimli fonksiyonu aracaktr.

Burada grdnz this (bu) kelimesi, Javascriptefonksiyonun istedii deer kmesi olarak bu nesnenin ieriinivermesini bildiriyor.


11/18

11

61

Olaylar

onLoad : Sayfa yklenmesi tamamlandnda onUnload : Sayfa yklenmesi bittiinde(kullanc sayfadan ktnda)

onFocus : Eleman focusu kazandnda onBlur : Eleman focusu kaybettiinde

onChange : Seim yapldnda veya metin deitirildiinde

onSubmit : Submit(gnder) butonu basldnda onReset : Reset dmesi tklandnda

onMouseOver : Mouse pointer bir alan veya linkin zerine geldiinde onMouseOut : Mouse pointer bir alan veya linkten uzaklatrldnda onMouseDown : Mouse dmesine basldnda onMouseMove : Mouse hareket ettirildiinde onMouseUp : Mouse dmesi brakldnda

62

Olaylar

onClick : Nesne zerine mouse ile tek tklandnda onDblClick : Nesne zerine mouse ile ift tklandnda

onAbort : Resim yklemesi kesildiinde onError : Resmin veya ekrann yklenmesinde hata olutuu

zamanlar

onSelect :Yaz seildiinde onReSize : window veya frame yeniden boyutlandrldnda

onKeyDown : Bir tua basldnda onKeyUp : Basl tu brakldnda onKeyPress : Bir tua basldnda veya basl tutulduunda

63

Mouse / Keyboard zellikleri

Bir olay tetiklendiinde CTRL tuuna baslp

baslmad bilgisini geri getirir.

ctrlKey

Bir olay tetiklendiinde fare iaretisinin

dikey koordinat bilgisini geri getirir.

clientY

Bir olay tetiklendiinde fare iaretisinin

yatay koordinat bilgisini geri getirir.

clientX

Bir olay tetiklendiinde mouse un hangi

tuuna basld bilgisini geri getirir.

button

Bir olay tetiklendiinde ALT tuuna baslp

baslmad bilgisini geri getirir.altKey

Tanmzellik

64


Bir olay tetiklendiinde SHIFT tuuna baslp

baslmad bilgisini geri getirir.

shiftKey

Bir olay tetiklendiinde fare iaretisinin ekranagre dikey koordinat bilgisini geri getirir.

screenY

Bir olay tetiklendiinde fare iaretisinin ekranagre yatay koordinat bilgisini geri getirir.

screenX

Bir olay tetiklendiinde olay tetikleyen elemangeri getirir.

relatedTarget

Bir olay tetiklendiinde META tuuna baslpbaslmad bilgisini geri getirir.

metaKey

Tanmzellik

65


Returns the name of the eventtype

Returns the time stamp, in milliseconds, from the epoch

(system start or event trigger)(IE de yok)timeStamp

Returns the element that triggered the event(IE de yok)target

Returns which phase of the event flow is currently being

evaluated (IE de yok)eventPhase

Returns the element whose event listeners triggered the

event (IE de yok)currentTarget

Returns a Boolean value that indicates whether or not an

event can have its default action prevented(IE de yok)cancelable

Returns a Boolean value that indicates whether or not anevent is a bubbling event. (IE de yok)

bubbles

Tanmzellik

66

rnekler Farenin hangi tuuna basld rnek75.html lme koordinatlar rnek75a.html Baslan tuun unicode deeri rnek75b.html Ekrana gre ilme koordinatlar rnek75c.html lme koordinatlar rnek75d.html Shift tuuna basld m? rnek75e.html Hangi elemana tkland? rnek75f.html Hangi olay tetiklendi? rnek75g.html Bubbling evet olutu mu? rnek75h.html Cancelable evet olutu mu? rnek75k.html Fare sa tuu devre d rnek75p.html


12/18

12

67

Document Object Model - DOM

Javascript ile yazacamz programlar, Netscape veya Internet Explorerprogramlarnn belge nesne modeli (Document Object Model) denen

kurallar iinde hareket etmek zorundad

r. Daha yksek programlama dillerine, rnein C++, Delphi veya Javagibi dillerle program yazmsanz, programc olarak baka bir programnmodeli ile snrl olmadnz, hatta iletim sisteminin programlar iinsalad arayzle (API) kendinizi snrl hissetmezsiniz.

Fakat Javascript dahil tm Script dilleri, Browsern sunduu hiyerariknesne modeli ile snrldr.

window.document.forms[0]window.document.forms[0].elements[0]

68

Document Object Model - DOM

69

JavaScript HTML DOM nesneleri

JavaScript nesnelerine ek olarak HTML DOM nesnelerine deeriebilirsiniz.

Window : JavaScript ierisindeki en st seviye nesnedir.Bu nesne tarayc penceresi ile ifade edilir.veya

taklarnn bir rneiyle birlikte otomatikolarak oluturulur.

Navigator : kullanc taraycs hakkndaki bilgileri ierir.

Secreen : kullanc ekran hakkndaki bilgileri ierir. History : Kullanc taraycsnn ziyaret ettii URL bilgisini

ierir. Location : O andaki URL hakkndaki bilgileri ierir.

70

getElementById() andgetElementsByTagName()

HTML dokman ierisindeki bir elemana erimek iinkullanlr.

getElementById() metodu ID si belirtilmi olan elemangeri dndrr.

document.getElementById("someID");html rnekler\rnek55.html

rnein,getElementsByTagName()

metodu dokmanierindeki yapy ihmal ederek ierisindeki tm

elemanlarn bulabilir.document.getElementsByTagName("tagname");


71

window nesnesiwindow nesnesi en st dzeyli nesne olduu iin zellikleri

ve metodlarn balarnawindow. yazmaya gerek yoktur. Frame ve Status Bar window nesnesinin zellikleridir. Status

Bar kontrolwindow.status="Merhaba Dnya";

gibi bir kodla kontrol edilebilir.Ayrca window nesnesinin

alert(), rnek50.html prompt(), rnek49.html confirm() rnek48.html open()

gibi (pop up pencereleri vardr) metotlar vardr.

72

window.openwindow.open(zellikler) komutundaki zellikler ise: "HTML" gsterilmesini istediimiz sayfa "name" istediimiz bir balk "toolbar" toolbar'n gsterilme zellii (yes/no ya da 0/1 olarak

belirtilir). "status" statusbar'n gsterilme zellii (yes/no ya da 0/1 olarak

belirtilir). "menubar" menubar'n gsterilme zellii (yes/no ya da 0/1 olarak

belirtilir). "scrollbars" scrollbar denilen sayfay aa-yukar ve saa-sola

oynatmamz salayan barlarn gsterilme zellii (yes/no ya da0/1 olarak belirtilir).

"resizable" alacak olan ekrann boyutunun deitirilebilir olupolmama zellii (yes/no ya da 0/1 olarak belirtilir).

"width" genilik (pixel olarak belirlenir). "height" ykseklik (pixel olarak belirlenir).



13/18

13

73

window nesnesi

Ak olan pencerenin sol st ke koordinatlardeitirilerek hareket ettirilmesi iinmoveTo( )

kullanlr.moveBy( ) ile pencere saa, sola, yukar ve aaya

istenildii kadar pixel hareket ettirilir.resizeTo( ) ve resizeBy( ) ile pencerenin

yeniden boyutlandrmasn yapabilirsiniz window veya frame in saa, sola, yukar ve aaya

istenildii kadar pixel kaydrlmasn scrollBy( )metodu ile yapabilirsiniz.

html rnekler\rnek52a.html

74

Navigator Nesnesi

Tarayc hakknda bilgiler grntlememizi salar: appName : Taraycnn ismi

appVersion : Tarayc versiyonu userAgent : Taryc ismi ve versiyonu bilgilerinin her ikisini salar. appCodeName : Taraycnn kod ismi, Netscape iin Mozilla, Internet

explorer iin IE.platform : Taraycnn alt platform.

var browser = "BROWSER INFORMATION:\n";for(var propname in navigator) {

browser += propname + ": " + navigator[propname] + "\n"}alert(browser);


75

Screen Nesnesi

Taraycnn almakta olduu ekran hakknda bilgilersunar.

Pixel insinden ekrann genilii ve ykseklii,screen.width ve screen.height ile belirlenir.

availWidth and availHeight zelikleriyle dekullanlabilir ekran genilik ve yksekli hakknda bilgi alnr.

Ekrann destekledii renk derinlii screen.colorDepth

zellii ile belirlenir.

html rnekler\rnek52.html html rnekler\rnek53.html

76

History

history listesindeki eleman saysn verirlength

Ta nmzel l ik

history listesinde istenilen URL ye gider.go(-2)

history listesindeki bir sonraki URL yi yklerforward()history listesindeki bir nceki URL yi yklerback()

Ta nmMetho t

77

Location

(?) soru iaretinden URL ayarlar veya geri getirir.search

URL protokoln geri getirir.protocol

URL nin port numarasn ayarlar veya geri getirir.port

URL yolunu ayarlar veya geri getirir.pathname

URL nin tamamn geri gnderir.href

URL nin hostnameini verir.hostname

O andaki URL hostname ve port numarsn verir.host

Hash (#) iareti ayarlar veya geri gnderir.hash

Tanmzellik

Sayfann yerine yenisini yklerreplace()

Sayfay tekrar yklerreload()

Yeni sayfa yklerassign()

Ta nmMethot

rnek54.html

rnek54a.html

rnek54b.html

78

style Bir nesneye ait zelliklerin ayarlanmasna veya bu

zelliin deerinin geri getirilmesine imkan salar.document.getElementById("id").style.property="value"

style nesnesi alt kategorileri: Background

Border and Margin

Layout

List Misc

Positioning Printing Scrollbar Table Text Standard


14/18

14

79

Background zellikleri

Sets if/how a background-image will be repeatedbackgroundRepeat

Sets the y-coordinates of the backgroundPositionproperty

backgroundPositionY

Sets the x-coordinates of the backgroundPosition

property

backgroundPositionX

Sets the starting position of a background-imagebackgroundPosition

Sets the background-image of an elementbackgroundImage

Sets the background-color of an elementbackgroundColor

Sets whether a background-image is fixed or

scrolls with the page

backgroundAttachment

Sets all background properties in onebackground

DescriptionProperty

80

cookies

Cookies ziyaretinin bilgisayarnda depolanan bir deikendir. Bilgisayar tarayc ile bir sayfa istediinde, cookie de gnderilecektir. JavaScrip ile hem cookie oluturabilir hem de cookie deerlerini gerialabilirsiniz. Cookie rnekleri:

sim cookie : ziyareti web sayfanz ziyaret ettiinde isminin girilmesiistenebilir. Bu isim bir cookie ierisinde depolanr. Daha sonra ayn ziyaretcitekrar sayfanz atnda ona Merhaba ibrahimeklinde cookieierisindeki ismi okuyarak gzel bir karlama yapabilirsiniz.

Password cookie: Ziyareti sayfanz ziyaret ettiinde bir kullanc ad veifre girmesi istenir. Kullanc ad ve ifre bir cookie ierisine depolanr vegelecek seferde kii ayn sayfaya girdiinde bu deerler otomatikkullanlarak bu ilemler tekrarlanmaz.

Date cookie: Ziyareti sayfanz ziyaret ettiinde o anki tarih cookieierisinide depolanr. Daha sonraki ziyarette kiinin ka gn nce zyarettebulunduu bir mesaj ile cookie deki tarih deeri geri arlarak bir mesajhalinde sunulabilir.

81

Cookie oluturmak

function setCookie(c_name,value,expiredays) {var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" :";expires="+exdate.toGMTString())

}

escape(string) fonksiyonu string ifadesi ierisindeki karakterleri btn

bilgisayarlarn anlayabilecei kodlara dntrr. Bunun etkisi zel

semboller zerinde grlr.

escape("?!=()#%&"))

%3F%21%3D%28%29%23%25%26

82

Cookie deerleri armakfunction getCookie(c_name) {

if (document.cookie.length>0) {c_start=document.cookie.indexOf(c_name + "=")

if (c_start!=-1) {

c_start=c_start + c_name.length+1c_end=document.cookie.indexOf(";",c_start)

if (c_end==-1)

c_end=document.cookie.length

returnunescape(document.cookie.substring(c_start,c_end));

}

}

return ""

}

83

Cookie deeri kontrol etmekfunction checkCookie() {

username=getCookie('username')

if (username!=null && username!="") {

alert('Welcome again '+username+'!')}

else {

username=prompt('Please enter your name:',"")

if (username!=null && username!="") {setCookie('username',username,365)

}

}

}


84

Dme Grafii AnimasyonuHTMLin Anchor etiketi, Mouse iaretisinin zerine

gelmesi (MouseOver) ve geri ekilmesi (MouseOut)olaylarna kar tepki verebilmektedir.

Biz iki olay onMouseOver ve onMouseOutynlendiricileri ile istediimiz fonksiyonabalyabiliyorduk.

nce fonksiyonumuzda kullanmak zere drtdeiken tanmlyoruz ve bunlara dmelerimizinadlarn ve boyutlarn deer olarak veriyoruz.


15/18

15

85

Dme Grafii Animasyonu

Bu altrmay yapmaya balamadan nce ayn boyda drtgrafiiniz olmas gerekir: (1) leri dmesinin Mouse iaretisi zerine geldii sradakigrnts (ileri_on.gif), (2) leri dmesinin Mouse iaretisi zerinden ekildii sradaki

grnts (ileri_out.gif), (3) Geri dmesinin Mouse iaretisi zerine geldii sradaki

grnts (geri_on.gif), (4) Geri dmesinin Mouse iaretisi zerinden ekildii sradaki

grnts (geri_out.gif).

Konumuz grafikilik deil, fakat dme grafiklerinizde yazve dier unsurlarn yerlerinin ayn olmas ve on ve outtrleri arasnda dikkat ekici bir derinlik (boyut) farkbulunmas yerinde olur.


Katman Teknii (DIV, LAYER) DIV veya LAYER etiketi ile oluturacanz katman ile HTML

sayfasnn zerine, altn gsteren bir parmen kat koymuoluyorsunuz.

CSS tekniklerini kullanarak Layer zelliklerini sayfada dierherhangi bir HTML unsurundan daha byk lde ve okdaha hassas ekilde biimlendirebilir; hatta hareket zelliikazandrabilirsiniz.

Javascript, katmanlarn bu zelliklerini, eitli olaylardanyararlanarak, olay-ynlendiricilerine ve metotlarabalayabilirsiniz.

Katman oluturmakta kullanabileceimiz etiketlerden biriolan LAYER Netscape tarafndan tannr fakat IE tarafndantanmaz.

87

Katman Teknii (DIV, LAYER)

Bu sebeple sayfalarmzda katmanlar LAYER yerineDIV ile oluturarak, iki Browseru da kullanabiliriz.

DIV etiketi de LAYER gibi katmanlar yapar;zellikleri ve metotlar da LAYER gibidir.

Aralarndaki tek fark, DIV ile oluturulacakkatmanlarn biim ve konum zellikleri kendiSTYLE komutlar ile kazandrmak zorundasnz;

oysa LAYERin ok daha kestirme kendi biimzellikleri vardr.Bununla birlikte STYLE metodunu kullanmakla DIV

etiketine Javascript ile biimlendirilecek daha okzellik kazandrabiliriz.

88

DIV

...


90

CSS HTML bize metin biimlendirme alannda ok geni olanaklar sunar.

CSS, uzun yazlyla Cascading Style Sheets, Trkesiyle Stil ablonlar ise bunu bir adm daha teye gtrr, Bize sayfalarmz iin global ablonlar hazrlama olana verdii gibi, tek

bir harfin stilini; yani renk, font, byklk gibi zelliklerini deitirmekiin de kullanlabilir.

Bir web sayfas ierisinde zaten estetik kurallar gerei yzlerce renk vefont kullanmayz.

Genelde birbiriyle uyumlu birka renk ve birka font kullanrz ki,bunlar her sayfada ayr ayr tekrar belirtmek yerine CSS yardmyla birsefer tanmlayp btn web sayfamzda kullanabiliriz.

Bu ekilde gncelleme yaparken de onlarca sayfay deitirmektenkurtuluruz.

CSS kodlar HTML kodlarnn iine yazlrlar. Trne gre body veyahead blmlerinde yer alabilirler.


16/18

16

91

CSS TRLER

Yerel Stil ablonu :Yerel stil ablonlar HTMLbelgesinin body blmne yazlrlar. Sadece bir

kereliine, yazldklar yerde etkili olurlar.

Yerel CSS

Deneme

Deneme

Deneme

92

CSS TRLER Genel Stil ablonlar :Yerel Stil ablonlarnn aksine

genel ablonlar, HTML belgesinin head blmne yazlrlarve belgenin tmn etkilerler.

Genel CSS

h1 {color:teal; font-size:15}DenemeDenemeDeneme

93

CSS TRLER Harici Stil ablonlar : CSS 'in sizi byk bir ykten, yani her sayfa

iin ayr ayr kod yazmaktan kurtaran tr harici stil ablonlardr. Aadaki kodlar stil1.css adyla kaydedin

h1 {font-size:15; color:teal}h2 {font-size:25; color:silver}h3 {font-size:35; color:red}

Sonra bu HTML kodlarn yazp stil1.css ile ayn dizine kaydedin.Harici CSS

DenemeDenemeDeneme

94

HTML'E CSS TAKVYES CSS bu zamana kadar anlattmz zelliklerinin dnda,

baz HTML etiketlerine ekstra parametreler kazandrr, veyabaz zelliklere kendi araclyla ulap onlarekillendirmemize olanak verir.

Text zellikleri text-align:Yatay hizalama

left: Sola hizalama right: Saa hizalama center: Ortaya hizalama line-height: Satr yksekliinin pixel deeri line-intdent: Sol kenardan uzakln piksel deeri

text-transform: Metni byk veya kk harflerle grntleme uppercase: Metni byk harflerle yazar lowercase: Metni kk harflerle yazar.

text-decoration: underline: Alt izgili yazar overline: st izgili yazar line-trough: Yaznn stn izer. none: Herhangi bir izgi olmakszn yazar. rnek90.html

95

HTML'E CSS TAKVYES Font zellikleri

font-size: Yaz byklnn piksel cinsinden deerini bildirir. color: Yaznn rengini bildirir. font-family:Yaznn tipini belirler (Times New Roman, vedana vs.) font-style:Yaznn italik olup olmamasn belirler.

italic: Yazy eik yapar normal: Yazy bir deiiklik yapmadan yazar.

font-weight:Yaznn bold olup olmamasn belirler. bold: Yazy koyu yazar. normal: Yazy bir deiiklik yapmakszn yazar.


96

HTML'E CSS TAKVYES Liste zellikleri

List-style-type: Liste elemanlarnn bana: disc: Daire circle: ember, square: Kare, decimal: Say koyar.

lower(upper)-roman: Liste elemanlarnn bana kk(byk)romen rakamlar koyar.

lower(upper)-alpha: Liste elemanlarnn bana kk(byk)harfler

none: Listeleme iin herhangi bir sembol kullanmaz. list-syle-image: Listelemeyi vereceiniz resim ile yapar list-style-position:

inside: Listenin ikinci satrn en soldan balatr. outside: kinci satr bir ncekinin dikey hizasndan balatr.



17/18

17

97

HTML'E CSS TAKVYES

Background zellikleri background-color: Arkaplan rengi, Hexdecimal veya renk ad olarak

yazabilirsiniz. background-image: Arkaplan resmi, url(ResimAd.gif) eklinde

yazlr. background-repeat: Resmin;

repeat: tm ynlerde, repeat-x: x ekseni boyunca, repeat-y: y ekseni boyunca tekrar edilmesini, veya no-repeat: Tekrar edilmemesini bildirir.

background-position: left: Resmi pencerenin sol kenarna yaklatrr. right: Resmi pencerenin sa kenarna yaklatrr. center: Resmi ortalar.


HTML'E CSS TAKVYES

Katman (DIV) zellikleri width: Katmann genilii height: Katmann ykseklii position:

absolute: Katmann konumunu kesin olarak bildireceimiz zamankullanrz.

relative: Katmann konumunu dier elere gre deiebilen ekildevermemizi salar.

top: Katmannn pencerenin st kenarndan uzakl left: Katmann pencerenin sol kenarndan uzakl overflow: 'auto' deerini verirseniz katmann belirtilen alana

smayan elerini otomatik olarak belirler, 'scroll' deeri isekaydrma ubuklar ekler.

visibility: Grnlrlk, visible veya hidden deerlerini alr. z-index: Sayfann grntlenme nceliini bildiren sra numaras.


99

SECLER Seiciler(Selectors) bize oluturduumuz , ... gibi etiketlerin

mevcut zelliklerini ayn brakarak onlara yeni zellikler ekleme olanaverdii gibi istediimiz bir kelimeye style zellikleri atayp istediimizzaman armamz da salarlar.

ki eit seici reneceiz: ID seicisi ve CLASS (snf) seicisi.

Id Selectors(Id Seicileri) : Snf seicileri head blmndetanmlanrlar. Seicinin keyfi isminin bana Sharp(#) iareti konur, vetakip eden keli parantezlerin arasna stil zellikleri yazlr. rnek95.html

Class Selectors(Snf Seicileri) : Bir etikti tanmladnz, fakat

sayfann baz yerlerinde bu etiketin 'color' parametresinin deeri 'red'olsun, fakat geri kalanlar ayn kalsn istiyorsunuz. Bunu snf seicileriyleyapabilirsiniz. rnek95a.html

Bu ilem, Snf seicileri genel olarak da tanmlanabilirler.rnek95b.html

100

BALANTILAR VE CSS

CSS ile can skc 'mavi ve alt izili' linkler yerine,olduka estetik grnml linkler oluturabiliriz.

etiketinin stilini belirlerken olas durumubildiren ifade kullanrz. Bunlar: active: Mouse'un link'in zerine tklad anki stili, visited: Link en az bir kere tklandktan sonraki stili , hover: Mouse'un imleci link'in zerindeyken (bir nevi

onMouseOver) nasl bir stil alacan belirler.

rnek96.html

101

CSS UYARIGrdnz gibi bu teknik stiller konusunda

HTML'in eksik ynlerini tamamlyor, ayrca byksayfalar hazrlarken zamandan tasarruf etmemizisalyor.

Daha ok pratik yaparak CSS tekniine iyice hakimolabilirsiniz.

Fakat her zaman aklnzn bir kesinde olsun: Stilablonlarnn Netscape tarafndan desteklenmeyenzelliklerinin says bir hayli fazladr.

102

rneklerDikey Kayan menler rnek76.html

Yatay Kayan menler rnek76a.html

Drop down menler rnek76b.html

Sayfa al rnek76c.htmlSayfa al rnek76d.htmlDme arka plan resmi rnek76e.htmlTextarea arka plan rengi rnek76f.html


18/18

javascript ders

Documents