Javascript Ders

JavaScript nedir?
Javascript,
JavaScript
Hafta 4
HTMLin bir parasdr ve iinde bulunduu HTML ile birlikte Web Browser program tarafndan yorumlanr. Javascript program yazmak demek, bir Web sayfas hazrlamak ve bu sayfadaki HTML kodlarnn arasna Javascript kodlar gmmek demektir. lk JavaScript ieren sayfamz, burada JavaScript kodlar HTML ile i ier girmi konumdadr.
html rnekler\rnek30.html
1 2
<SCRIPT>
Kural
Yorum Satrlar Eski Browser

 Bu blmn banda ve sonunda yer alan  iaretlerinin arasndaki her ey, eski srm Browserlar tarafndan HTML dili kurallarna gre yorum saylacak ve grmezden gelinecektir
4
Yorum satrlar
Javascript
JavaScript Yklenmesi
Javascript
dilinin yorumlar ise // iaretiyle balar ve satr sonunda sona erer. Eer yorumlarnz bir satrdan uzun olacaksa, bunu yle belirtebilirsiniz: /* yorumun birinci satr yorumun ikinci satr yorumun nc satr */
5
kodlar, ziyaretinin sayfanzda bir yeri tklamas veya klavyede bir tua basmasyla harekete geer veya HTML sayfas ziyaretinin Browsernda grntlendii anda otomatik olarak almaya balar. Otomatik alan JavaScript kodu ise iki ayr yntemle altrlabilir:
HTML kodlar icra edilmeden nce (yani sayfanz ziyaretinin Web Browsernda grntlenmeden nce veya rnek33a.html sayfa grntlendikten sonra. rnek33b.html
Javascriptin Temel lkeleri

Anahtar Kelimeler (Keyword)

Javascript
Javascript dilinin deikenleri, metodlar ve nesnelerini belirleyen isimlere Belirleyiciler (Identifier) denir. Bu snfa giren btn kelimeler ya harfle ya da alt izgi (_) ile balar. Rakam veya dier iaretler birinci karakter olarak kullanlamaz, fakat daha sonra kullanlabilir. Javascript, ayn kelimenin byk harfle yazlan ile kk harfle yazlann farkl isimler olarak grr. Bu snfta giren kelimelerin iinde boluk olamaz. Javascript kodlarnz sizin bilgisayarnzda deil, ziyaretinin bilgisayarnda altrlacana gre, kullandnz karakterlerin ziyaretinin bilgisayarnda nasl bir deer tayacan dnmeniz gerekir. Bu bakmdan gvenli yol, Bu snfa giren kelimelerde, ngilizce alfabede bulunmayan, Trke ve dier dillerdeki high-ASCII karakterleri (, , , , , ile , , , , ve ) kullanmamaktr.
dilinin nceden tanmlanm ve programn yorumunda zel anlam kazandrlm kelimelerine Anahtar Kelime denilir.
do else false finally for function if in instanceof new null return
8
break case catch continue default delete

7
switch this throw true try
typeof var void while with
Ayrlm Kelimeler (Reserved)

kinci gruba girsin-girmesin baz kelimeler, ilerde Javascript programlama ve yorumlama ilerinde kullanlabilecei dncesi ile, bir kenara ayrlmtr; Javascript kodlarnda kullanlamazlar.
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)
Deerler (Literal):
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)
1. 2. 3.
Javascript kodu icra edildii srada deimeyen rakam veya metinlere Deer denir. Javascript kodlarnda be tr deer bulunur: Tamsay Deerler (Integer Literal): Kayan Noktal Deerler (Floating-point literal): Boolean Mantk fadeleri (Boolean Literal):

True (Doru) deerini 1, False (Yanl) deerini 0 rakamyla tutar.
4. 5.
9
Alfanmerik (Karakter) Deerler (String literal): zel Karakterler

10
zel Karakterler

Javascript Deikenleri (Variable)
\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 <PRE></PRE> etiketleri arasnda olmas gerekir. Aksi taktirde Javascript ne yazdrrsa yazdrsn, HTML bu zel karakterleri dikkate almayacaktr.
11
Deiken, ad stnde, Javascript yorumlaycs tarafndan bilgisayarn belleinde tutulan ve ierdii deer programn akna gre deien bir unsurdur. Deikenlerin bir ad olur, bir de deeri. Program boyunca deikenin ad deimez; fakat ierii deiebilir. Deikenlere isim verirken Belirleyici isimleri kurallarna riayet etmeniz gerekir. Javascript, byk harf-kk harf ayrt ettii (casesensitive olduu) iin, rnein SONUC ve sonuc kelimeleri iki ayr deiken gsterir.
12
Deikenler

Deikenler
Deiken tanmlamak, bilgisayar programclarna daima gereksiz bir yk gibi grnr. Birazdan greceiz, Javascript sadece deikenleri tanmlamay zorunlu klmakla kalmaz, fakat nerede tanmlandna da zel bir nem verir. Javascripte bir Belirleyicinin deiken olarak kullanlacan bildirmek iin var anahtar-kelimesini kullanrsnz:
var var var var sonuc adi, soyadi, adres, siraNo i, j, k mouseNerede, kutuBos, kutuDolu
Baz dier programlardan farkl olarak Javascript, size deikenleri hem beyan, hem de ieriini belirleme iini ayn anda yapma imkan veriyor (initialization):
var var var var sonuc = Merhaba Dnya!; adi = Abdullah, soyadi = Aksak; i = 100, j = 0.01, k = 135; kutuBos = false, kutuDolu = true;
1. 2. 3. 4. 5.
13
Bir deikeni tanmlayarak iini doldurmadan (initializationdan) nce iindeki deeri sorgulamaya kalkarsanz, Browsern Javascript yorumlaycs o noktada durur ve tanmlanmam (undefined) deiken hatas verir. Javascript programlarnda be tr deiken bulunabilir:
Say (number): -14, 78, 87678 Boolean deiken: true, false Alfanmerik (String) Deiken: Merhaba Dnya! lev (Function) Deiken: Nesne (Object) deikenleri: window, document
14
Deikenleri simlendirmek
Yetki Alan (Scope)

HTML dosyasnn ba tarafnda, <HEAD> etiketi iinde, bir deikeni tanmladnz ve ona bir deer verdiinizi dnn. Daha sonra yazacanz btn fonksiyonlarda veya deerini belirleyebileceiniz otomatik fonksiyonlarda (metodlarda) bu deikeni bir daha tanmlamaya ve deerini belirlemeye gerek kalmadan kullanabilirsiniz; nk Javascript asndan bu deiken genel (global) deiken saylr. rnek34a.html
Javascript, deikenlerinizi isimlendirmede rakamla ve iaretle balamamak dnda kural koymuyor; ama iyi programclk teknii, deikenlere anlalr ve kullanld yeni belli eden isimler vermektir. rnein, adi eklindeki bir deiken ad, ok deikenli bir Javascript programnda yanltc olur. musteri_adi veya musteriAdi ok daha uygun olabilir. Ayrca deeri Evet (=doru, true) veya Hayr (=yanl, false) olan Boolean deikenlerin adlandrlmasnda, rnein, doluMu, tamamMi, acikMi, bittiMi gibi cevab artran deiken adlar kullanabilirsiniz.
HTMLin gvde ksmnda (<BODY> etiketi iinde) bir fonksiyon yazdmz ve bu fonksiyonun iinde bir deiken tanmladmz dnn. Daha sonra yazacanz bir fonksiyonda bu deikeni kullanamazsnz; nk Javascript bir fonksiyonun iindeki deikeni yerel (local) deiken sayar ve kendi yetki alan (scopeu) dnda kullanmanza izin vermez. rnek34b.html
16
15
Yetki Alan - Sonu

Bu
Dizi Deikenler
Dizi deikenler ise birden fazla deer tutabilirler. Bir dizi deikenin bireylerinin deerlerini dizi-deikenin indeksi ile arabilir 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 muhabbet
altrmann rettii kural yle zetlenebilir: Bir genel deiken, bir fonksiyon iinde yerel olarak deitirilebilir; ama onun genel deeri dier fonksiyonlar iin geerli kalr. Javascript programlarnz yazdnz zaman genel deikenleriniz beklediiniz deeri vermiyorsa bu deeri bir fonksiyonun yerel olarak, srf kendisi iin, deitirip deitirmediine bakmalsnz. Bu tr hatalardan kanmann bir yolu, yerel deikenlerinizle genel deikenlerinize farkl isimler vermektir.
17
Dizi
html rnekler\rnek34c.html
deerini tar. deikeni eleman saysn vererek de deklere edebilirsiniz var weekday=new Array(7);
18
Dizi deiken Metotlar

join(
) : Dizi deikenin elemanlarn birletirmek iin 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
split( ) : Bir stringi baz paralayc karakterler kullanarak (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,
reverse(
) : Dizi deikenleri elemanlarnn srasn tersine evirmek iin kullanlr.

var a = new Array(1,2,3); a.reverse( ); var s = a.join( );
// a[0] = 1, a[1] = 2, a[2] = 3 // now a[0] = 3, a[1] = 2, a[2] = 1 // s == "3,2,1"
sort( ): Dizi deikenin elemanlarn sralamak iin kullanlr.

var a = new Array("banana", "cherry", "apple"); a.sort( ); var s = a.join(", "); // s == "apple, banana, cherry" html rnekler\rnek34f.html
20
html rnekler\rnek34g.html
19
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 olmayacak ekildeki elemanlarn alarak yeni bir dizi deiken oluturulur. -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.html
21
dizi deikenin k. elemanndan isonraki l tane elemann siler. Tek argman alrsa k. Elemandan sonraki elemanlar siler.
splice(k,l) : 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]
22

push() and pop() 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
shift( ) and unshift( ) metotlar push() ve pop() gibi davranr, fakat bu ilemleri dizinin balang tarafnda gerekletirir. unshift( ) sadece Netscape taraycsnda alr.
html rnekler\rnek34n.html html rnekler\rnek34o.html
23
24

toString(
ok Boyutlu dizi deikenler

ok
dntrr.
) and toLocaleString( ) metotlar dizi deikenleri Stringe
boyutlu dizi deikenler; dizi deikenlerin dizi deikenleri 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 dizi deikenler tanmlanabilir.

var matrix = [[1,2,3], [4,5,6], [7,8,9]]; matrix[0][3]=3 html rnekler\rnek34p.html
26
25
Atama (Assignment) lemi
Aritmetik lemleri:
Javascript, drt temel ilemi yapabilir. toplama ilemini art iaretiyle (+), kartma ilemini eksi iaretiyle (-), arpma ilemini yldz (asterisk, *) iaretiyle, ve blme ilemini dz bl iaretiyle (/), % ile kalan bulma ilemi yaptrrsnz. Arttrma ve azaltma ilemleri, deikenin deerini ilemde kullanmadan veya kullandktan sonra arttrma veya azaltma ilemi yapar. Sonradan artrma x++, nceden artrma ++x. Sonradan azaltma x--, nceden azaltma x. Toplama ve kartma ilemlerinde yapabileceiniz baka bir ksaltma ise yle yazlr: x = x + y ilemini ksaltmak iin x += y x = x - y ilemini ksaltmak iin x -= y Javascript, alfanmerik deerlerle kartma, arpma ve blme ilemleri yapmaz; sonucun yerine NaN (Not a Number, Say Deil) yazar. 28
Tahmin
yaparz: var adi = Ahmet; soyadi = Arif; var siraNo = 123; sigortaNo = A123-2345-234; Javascriptte bir deikene deer atarken, bu deeri mevcut bir veya daha fazla deikenden de alabilirsiniz: var i = j + k var indexNo = siraNo + kategoriNo var tutariTL = birimFiyatTL * adet
27
ettiiniz gibi bunu eittir (=) iaretiyle
lemlerde Sra:

zel Saysal Deerler

JavaScript baz zel deerlere karlk gelecek ekilde sabitler tanmlamaktadr.
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
29
Sabit Infinity NaN Number.MAX_VALUE Number.MIN_VALUE Number.NaN Number.POSITIVE_INFINITY
Anlam Special value to represent infinity Special not-a-number value Largest representable number Smallest (closest to zero) representable number Special not-a-number value Special value to represent infinity
30
Number.NEGATIVE_INFINITY Special value to represent negative infinity
Karlatrma lemleri:
Alfanmerik (String) lemler

Javascriptin karlatrma operatrleri genellikle if (eer..ise) ifadesiyle birlikte kullanlr; ve bu soruyu soran satra true (doru) veya false (yanl) sonucunu verir. nce, bu ilemleri yaptrtan operatrleri ve ilevlerini sralayalm: == Eit operatr. aretin sanda ve solundaki deerlerin eit olmas halinde true (doru) sonucunu gnderir. != Eit deil operatr. aretin sanda ve solundaki deerlerin eit olmamas halinde true (doru) sonucunu gnderir. > Byktr operatr. Soldaki deer, dadaki deerden byk ise true (doru) sonucunu gnderir. < Kktr operatr. Soldaki deer, dadaki deerden kk ise true (doru) sonucunu gnderir. >= Byk veya eit operatr. Soldaki deer, dadaki deerden byk veya bu deere eit ise true (doru) sonucunu gnderir. <= Kk veya eit operatr. Soldaki deer, dadaki deerden kk veya eit ise true (doru) sonucunu gnderir.
31
Javascriptin alfanmerik deikenlerin deerleri ile sadece toplama ilemi yaptn sylemitik. Bu durumda buna toplama deil birletirme, ekleme ilemi denir.
Bu arada bir deikene string deer atand zaman o deikenin otomatik olarak bir karakterler dizisi olarak alglanmayaca da nemli bir zelliktir. Yani; ad="Serdar"; eklinde bir tanmlamada ad[1]=S , ad[2]=e ... olmayacaktr.
32
String
Bir stringin iinden bir harfi ya da harf grubunu almak istediimizde kullanmamz gereken komut substring komutudur. harf=ad.substring(0,1); yazdmzda harf deikeni S harfini ierecektir. Buradaki parametrelerden 0, kanc karakterden balanacan 1 ise kanc karaktere kadar alnacan gsterir.Yani harf=ad.substring(0,2) deseydik harf deikeni "Se" deerini ierecekti. Bu ilemin tam tersi de mmkndr. Yani girilen bir karakterin kanc karakter olduunu bulmak. Bunun iin de indexOf komutunu kullanyoruz. sayi=ad.indexOf("e"); yazdmzda sayi deikenine 2 deeri atanr. Ayrca bu deikenin uzunluunu bulmak iin lenght komutu kullanlr. sayi=ad.lenght; dediimizde sayi deikeninde 6 deeri bulunacaktr. html rnekler\rnek36a.html
artl lemler
Javascriptte karlatrma yaparken artl (..ise ..yap!) ilemler de yaptrabilirsiniz. artl ilemlerde ? (soru iareti) ve : (iki nokta st ste) iaretlerini kullanrsnz. sonucMsg = (y==x) ? y degiskeni x degiskenine esit ! : y degiskeni x degiskenine esit degil !; alert(sonucMsg);
33
34
Mantksal lemler

Program Ak Denetimi
Program
Birinci ifadenin deili !(a>10) || !(s==y)
Javascript, karlatrma ilemini Boolean (.. ve .. doru ise ... yap!) mantksal ilemlerini kullanarak da yapabilir. Javascriptin Boolean mantn sorgulama iaretleri unlardr: && Mantksal Ve: iki koul da doru. || Mantksal Veya: ya birinci, ya da ikinci koul doru. ! Mantksal Deil: Tek koula uygulanr; koul doru ise sonu false (yanl), koul yanl ise sonu true (doru) olur. Bu mant, imdi Boolean ifadesi haline getirelim: A>D && D>E E<=F || x==y
ierisinde belli bir art salandnda programn bir ksmnn altrlmas istenebilir. Bu durumda if deyiminden yararlanlr.
if (art) { altrlmas istenen ifade; } html rnekler\rnek37.html
36
olur
35
if else
stenilen
Dng Denetimi
if
art salandnda bir program parasnn salanmadnda ise baka bir program parasnn almasn istiyorsanz:
if (art) { altrlmas istenen ifade;} else{ altrlmas istenen baka ifade; }
37
yapsnda almas istenilen ksm bir kere alr. Baz durumlarda, istenilen program parasnn birden 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
38
While dngs

for (x in mycars)
for dngsnde saya deikeninin belli deerleri iin istenilen program parasnn altrlmas istenmektedir. Baz durumlarda bir koul saland srece istenilen program parasnn almas istenir. Bunun iin while (art) { altrlmas istenen ifade; Saya deikeni ile art ifadesi hesaplanmaldr; }
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] + "<br />") } html rnekler\rnek40b.html
40
html rnekler\rnek40.html html rnekler\rnek40a.html
39
do while (art)

break, continue

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 edilerek dngye devam edilmesi istenebilir. Bu ise do{ } while (art) html rnekler\rnek41.html html rnekler\rnek41a.html altrlmas istenen ifade; Saya deikeni ile art ifadesi hesaplanmaldr;

41
artl dngde, tekrar eden i, artn yerine geldii noktada kendiliinden kesilecektir. Ayn otomasyonu for dngsnde break (kes) ve continue (devam et) komutlaryla biz de salayabiliriz. JavaScript, break ile karlat anda dngy keser ve icraata dngden sonra gelen ilk ifadeden devam eder. continue ise JavaScriptin dngnn o andaki admn durdurup, dngnn bana dnmesini salar; dng sayacn bir sonraki deeriyle ileme devam eder. html rnekler\rnek42.html html rnekler\rnek42a.html html rnekler\rnek42b.html
42
switch
Javascriptin switch (deitir)
Javascriptte Fonksiyon
komutu, programn bir deikenin deerine gre, belirli bir durum dahilinde bir iin yapmasn salar.
switch (deitir){ case 1: ifade; break; case 2 : ifade; break; }
html
rnekler\rnek43.html
43
u ana kadar grdnz ilerin ou bir kere bavurulan ilerdi; 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
44
charAt(i), parseInt(S,n), parseFloat(S)
Saat ve Tarih

charAt(i): Fonksiyonlarda ve dier tr ilemlerde kullanabileceimiz bir Javascript ksaltmas, filanca yerdeki karakter diyebileceimiz charAt(i) ifadesidir.
Browsern iletim sisteminden, iletim sisteminin de bilgisayarn temel girdi/kt ilemlerini yapan BIOStan saati ve tarihi ieren bilgiyi almasn salar. Geri metod Date (gnn tarihi) adn tayor, ama Date(), Javascript asndan class (snf) saylr ve edinilen bilgi sadece ay, gn ve yl bilgisini deil, o andaki saati, dakikay ve saniyeyi de ierir.
Alfanmerik deerleri tam sayya evirmek iin parseInt(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 iin parseFloat(String) ifadesini kullanrz.
45
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
46
toString(), toLowerCase(), toUpperCase()
String Nesnesi zellikleri
toString()
metodu: Kelime anlam Stringe evir, alfanmerike evir olan bu metotla, saat nesnesinin tamamen kendine zg biimi, Javascript tarafndan HTMLin anlayabilecei ekle evrilmi olur.
toLowerCase()
(kk harfe evir) ve toUpperCase() (byk harfe evir) metotlar sadece alfanmerik (String) deerlere uygulanabilir.
47
.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 son konumun indeksini verir. kitabnAdi.lastIndexOf(a), .bold() Baladnz String nesnesini koyu yapar. rnein kitabnAdi.bold() size <B>Gazap zmleri</B> etkisini verir. .fontcolor(renk) String nesnesinin grntlenme rengini belirler. rnein kitabnAdi.fontcolor(red) size <FONT COLOR=red>Gazap zmleri</FONT> deerini verir. .fontsize(l) String nesnesinin grntlenmesinde harf bykln belirler. rnein kitabnAdi.fontsize(24) size <FONT SIZE=24>Gazap zmleri</FONT> deerini verir. .italics() String nesnesinin itelik harfle grntlenmesini salar. rnein kitabnAdi.italics() 48 size <I>Gazap zmleri</I> deerini verir.
setTimeout(fonksiyon_ad, milisaniye)
Hazr Matematik Fonksiyonlar

Operatr Math.PI Math.E Math.Sqrt(x) Math.log(x) Math.pow(x,y) Math.sin(x) Anlam Pi says E says xin karekk xin doal logaritmas xin y inci kuvveti xin sins Operatr Math.cos(x) Math.tan(x) Math.asin(x) Anlam xin cosins xin tanjant xin arcsins
stenilen fonksiyonun istenilen milisaniye aralklarla arlmasn salayan bir fonksiyondur.

t=setTimeout("timedCount()",1000) clearTimeout(t)
rnek45.html ierisinde aadaki gibi dzenleme yaparak saat 6:30 da baka bir i yaplmas ayarlanabilir.
if ((saat.getHours() == 6) && (saat.getMinutes() == 30)){ document.saatForm.saatkutusu.value = "Alarm !!!"; }
Math.acos(x) xin arccosins Math.atan(x) xin arctanjant Math.abs(x) xin mutlak deeri
50
49
Hazr Matematik Fonksiyonlar

Operatr Math.max(x,y) Anlam x, y nin maksimumu x, y nin minimumu x'saysndan byk en yakn tamsay Operatr Math.floor(x) Anlam x'saysndan kk ve en yakn tamsay 0" ile"1" arasnda rasgele bir say deeri xin exponansiyeli
Rasgele say retme

Math.random()
fonksiyonuyla 0 ile 1 arasnda rasgele bir say retilir.
Math.min(x,y)
Math.random(x)
Math.floor((n+1)*Math.random())
Math.ceil(x)
Math.exp(x)
fonksiyonuyla 0 ile n arasnda herhangi bir rasgele bir say retilmi olur. rnekler\rnek46ma.html
52
html rnekler\rnek46m.html
51
html
try catch(err)
throw
ifadesi kendi istisna durumu (ender karlalan durum) oluturmanza imkan verir. Bu ekilde ak daha detayl kontrol ederek, bir zel hata olutuunda hatay kendi belirlediiniz ekilde ortadan kaldrabilir veya kullancya daha detayl bilgi sunabilirsiniz. throw(exception)
throw
Yazlan kod ierisinde muhtemel bir hata olmas kanlmaz ise bu hatann olumas durumunda programn almasnn kesilmemesi, buna karlk bir mesaj veya baka bir ilem yaplmas isteniyorsa try catch ifadeleri kullanlr. try{ } catch(err){ } rnek46a.html rnek46b.html Bir hata olumas durumunda onerror kullanlarak hata ayklamak iin rnek46c.html
html rnekler\rnek46d.html
53 54
Nesneler, Olaylar ve zellikleri
Nesne ve Metotlar
Browsern
Javascript programclnda nesne (object), ve nesnenin zellikleri (properties), genellikle HTML belgesinin ad (name) ve deeri (value) olan her eydir. Bir HTML unsurunun etiketinde NAME ve VALUE blmleri varsa, 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 dolaysyla atfta bulunabilirsiniz. Bu tr atflarda bulunurken, u kurala uymanz gerekir: nesneAd.zellikAd
55
masastndeki penceresinin bir zellii gibi deerleri belirleyen otomatik ilevleri; nesnelerin deerlerini belirli bir dzen iinde arttran veya azaltan sreleri ve Javascriptin hazr ablonlarndan yeni bir nesne reten ilemleri, metod ad altnda toplarz. Her nesnenin kendine ait bir metodu olabilir; bir metod birden fazla nesne ile birlikte kullanlabilir. Bu gibi ifadeleri yle yazarz: nesneAd.metodAd(argman)
56
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 istediimiz deikeni gerekli parametrelerle bu fonksiyon cinsinden tanmlamalyz.
zel Nesneler
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)

JScript'te bir nceki konuda anlattmz gibi kendi tanmladmz nesnelerin yan sra halihazrda var olan nesneler de vardr. Bizim iin nemli olan yle sralayabiliriz. window Frame, parent, self, _top... location history document form text field text area
checkbox radio password select button
Buradaki this anahtar kelimesi bu nesneye ait olan zellikler iin(sadece fonksiyonun iinde) kullanlr. Daha sonra kii isimli dizinin birinci elemann insan cinsinden yeni bir nesne olduunu belirtmek iin new anahtar kelimesini kullanarak ve gerekli parametreleri vererek fonksiyonu aryoruz. Daha sonra gerekli zelliklere erimek iin yazlr.
submit reset link anchor
kisi[1].ad , kisi[1].soyad ...

57 58
Olaylar
Olaylar

Browser programlar kendiliklerinden veya GUI sonucu, yle baz olaylara (rnein Mouse iaretisinin bir nesnenin zerine gelmesi veya bilgisayar kullancsnn Mouseun veya 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, bu olay karlayan ve olay ynlendiren metot (Event Handler) ise onClick (tklandnda, tklama halinde) adn tar. Javascripte bu olayn olmas halinde icra edilmek zere zel emirler verilebilir. Bu tr komutlarn yazlmasnda u yntem izlenir: event=fonksiyon_veya_metod(argman)
59
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 Javascript metodunu da devreye sokabiliriz. Mesela: <INPUT TYPE=text SIZE=50 MAXLENGTH=100 NAME=soyadi onChange=denetle(this)> Ziyareti bu INPUT kutusuna soyadn yazdnda, kutunun ierii deimi olacak ve bu Change (deiiklik) olay, kendisini yndendiren onChange sayesinde, nceden hazrladmz denetle() isimli fonksiyonu aracaktr. Burada grdnz this (bu) kelimesi, Javascripte fonksiyonun istedii deer kmesi olarak bu nesnenin ieriini vermesini bildiriyor.
60
10
Olaylar

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
61
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
62
Mouse / Keyboard zellikleri

zellik altKey button clientX clientY ctrlKey Tanm Bir olay tetiklendiinde ALT tuuna baslp baslmad bilgisini geri getirir. Bir olay tetiklendiinde mouse un hangi tuuna basld bilgisini geri getirir. Bir olay tetiklendiinde fare iaretisinin yatay koordinat bilgisini geri getirir. Bir olay tetiklendiinde fare iaretisinin dikey koordinat bilgisini geri getirir. Bir olay tetiklendiinde CTRL tuuna baslp baslmad bilgisini geri getirir.
63

Tanm Bir olay tetiklendiinde META tuuna baslp baslmad bilgisini geri getirir. relatedTarget Bir olay tetiklendiinde olay tetikleyen eleman geri getirir. screenX Bir olay tetiklendiinde fare iaretisinin ekrana gre yatay koordinat bilgisini geri getirir. screenY Bir olay tetiklendiinde fare iaretisinin ekrana gre dikey koordinat bilgisini geri getirir. shiftKey Bir olay tetiklendiinde SHIFT tuuna baslp baslmad bilgisini geri getirir. zellik metaKey
64

zellik
bubbles cancelable
rnekler

65
Tanm
Returns a Boolean value that indicates whether or not an event is a bubbling event. (IE de yok) Returns a Boolean value that indicates whether or not an event can have its default action prevented (IE de yok)
currentTarget Returns the element whose event listeners triggered the event (IE de yok) eventPhase target timeStamp type Returns which phase of the event flow is currently being evaluated (IE de yok) Returns the element that triggered the event (IE de yok) Returns the time stamp, in milliseconds, from the epoch (system start or event trigger) (IE de yok) Returns the name of the event
Farenin hangi tuuna basld lme koordinatlar Baslan tuun unicode deeri Ekrana gre ilme koordinatlar lme koordinatlar Shift tuuna basld m? Hangi elemana tkland? Hangi olay tetiklendi? Bubbling evet olutu mu? Cancelable evet olutu mu? Fare sa tuu devre d
rnek75.html rnek75a.html rnek75b.html rnek75c.html rnek75d.html rnek75e.html rnek75f.html rnek75g.html rnek75h.html rnek75k.html rnek75p.html
66
11
Document Object Model - DOM

Document Object Model - DOM
Javascript ile yazacamz programlar, Netscape veya Internet Explorer programlarnn belge nesne modeli (Document Object Model) denen kurallar iinde hareket etmek zorundadr. Daha yksek programlama dillerine, rnein C++, Delphi veya Java gibi dillerle program yazmsanz, programc olarak baka bir programn modeli ile snrl olmadnz, hatta iletim sisteminin programlar iin salad arayzle (API) kendinizi snrl hissetmezsiniz. Fakat Javascript dahil tm Script dilleri, Browsern sunduu hiyerarik nesne modeli ile snrldr.
window.document.forms[0] window.document.forms[0].elements[0]
67
68
JavaScript HTML DOM nesneleri

getElementById() and getElementsByTagName()

JavaScript nesnelerine ek olarak HTML DOM nesnelerine de eriebilirsiniz. Window : JavaScript ierisindeki en st seviye nesnedir. Bu nesne tarayc penceresi ile ifade edilir. <body> veya <frameset> taklarnn bir rneiyle birlikte otomatik olarak 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.
69
HTML dokman ierisindeki bir elemana erimek iin kullanlr. getElementById() metodu ID si belirtilmi olan eleman geri dndrr. document.getElementById("someID"); html rnekler\rnek55.html rnein, getElementsByTagName() metodu dokman ierindeki yapy ihmal ederek ierisindeki tm <p> elemanlarn bulabilir. document.getElementsByTagName("tagname"); html rnekler\rnek55.html
70
window nesnesi

window.open
window.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 "status" statusbar'n gsterilme zellii (yes/no ya da 0/1 olarak "menubar" menubar'n gsterilme zellii (yes/no ya da 0/1 olarak
window nesnesi en st dzeyli nesne olduu iin zellikleri ve metodlarn balarna window. yazmaya gerek yoktur. Frame ve Status Bar window nesnesinin zellikleridir. Status Bar kontrol window.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.
71
belirtilir).
belirtilir).
belirtilir). "scrollbars" scrollbar denilen sayfay aa-yukar ve saa-sola oynatmamz salayan barlarn gsterilme zellii (yes/no ya da 0/1 olarak belirtilir). "resizable" alacak olan ekrann boyutunun deitirilebilir olup olmama zellii (yes/no ya da 0/1 olarak belirtilir). "width" genilik (pixel olarak belirlenir). "height" ykseklik (pixel olarak belirlenir). html rnekler\rnek47.html
72
12
window nesnesi
Ak olan pencerenin sol st ke koordinatlar deitirilerek hareket ettirilmesi iin moveTo( ) 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.

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); html rnekler\rnek51.html
73 74
html rnekler\rnek52a.html
Screen Nesnesi

History
Taraycnn almakta olduu ekran hakknda bilgiler sunar. Pixel insinden ekrann genilii ve ykseklii, screen.width ve screen.height ile belirlenir. availWidth and availHeight zelikleriyle de kullanlabilir ekran genilik ve yksekli hakknda bilgi alnr. Ekrann destekledii renk derinlii screen.colorDepth zellii ile belirlenir. html rnekler\rnek52.html html rnekler\rnek53.html
zellik length Methot back() go(-2)
Tanm history listesindeki eleman saysn verir Tanm history listesindeki bir nceki URL yi ykler history listesinde istenilen URL ye gider.
forward() history listesindeki bir sonraki URL yi ykler
75
76
Location
zellik hash host hostname href pathname port protocol search Methot assign() reload() replace()
Tanm
style
Bir
rnek54a.html rnek54b.html
Hash (#) iareti ayarlar veya geri gnderir. O andaki URL hostname ve port numarsn verir. rnek54.html URL nin hostnameini verir. URL nin tamamn geri gnderir. URL yolunu ayarlar veya geri getirir. URL nin port numarasn ayarlar veya geri getirir. URL protokoln geri getirir. (?) soru iaretinden URL ayarlar veya geri getirir.
Tanm
nesneye ait zelliklerin ayarlanmasna veya bu zelliin deerinin geri getirilmesine imkan salar.
document.getElementById("id").style.property="value"
style
nesnesi alt kategorileri:

Positioning Printing Scrollbar Table Text Standard
78
Yeni sayfa ykler Sayfay tekrar ykler Sayfann yerine yenisini ykler
77
Background Border and Margin Layout List Misc
13
Background zellikleri
Property background Description Sets all background properties in one

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 geri alabilirsiniz. Cookie rnekleri:
backgroundAttachment Sets whether a background-image is fixed or scrolls with the page backgroundColor backgroundImage backgroundPosition backgroundPositionX backgroundPositionY backgroundRepeat Sets the background-color of an element Sets the background-image of an element Sets the starting position of a background-image Sets the x-coordinates of the backgroundPosition property Sets the y-coordinates of the backgroundPosition property Sets if/how a background-image will be repeated
79
sim cookie : ziyareti web sayfanz ziyaret ettiinde isminin girilmesi istenebilir. Bu isim bir cookie ierisinde depolanr. Daha sonra ayn ziyaretci tekrar sayfanz atnda ona Merhaba ibrahim eklinde cookie ierisindeki ismi okuyarak gzel bir karlama yapabilirsiniz. Password cookie: Ziyareti sayfanz ziyaret ettiinde bir kullanc ad ve ifre girmesi istenir. Kullanc ad ve ifre bir cookie ierisine depolanr ve gelecek seferde kii ayn sayfaya girdiinde bu deerler otomatik kullanlarak bu ilemler tekrarlanmaz. Date cookie: Ziyareti sayfanz ziyaret ettiinde o anki tarih cookie ierisinide depolanr. Daha sonraki ziyarette kiinin ka gn nce zyarette bulunduu bir mesaj ile cookie deki tarih deeri geri arlarak bir mesaj halinde sunulabilir.
80
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
81
Cookie deerleri armak

function 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+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)); } } return "" }
82
Cookie deeri kontrol etmek

function 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) } } } html rnekler\rnek56.html
83
Dme Grafii Animasyonu

HTMLin
Anchor etiketi, Mouse iaretisinin zerine gelmesi (MouseOver) ve geri ekilmesi (MouseOut) olaylarna kar tepki verebilmektedir. Biz iki olay onMouseOver ve onMouseOut ynlendiricileri ile istediimiz fonksiyona balyabiliyorduk. nce fonksiyonumuzda kullanmak zere drt deiken tanmlyoruz ve bunlara dmelerimizin adlarn ve boyutlarn deer olarak veriyoruz.
84
14
Dme Grafii Animasyonu
Katman Teknii (DIV, LAYER)
Bu altrmay yapmaya balamadan nce ayn boyda drt grafiiniz olmas gerekir:
(1) leri dmesinin Mouse iaretisi zerine geldii sradaki grnts (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 yaz ve dier unsurlarn yerlerinin ayn olmas ve on ve out trleri arasnda dikkat ekici bir derinlik (boyut) fark bulunmas yerinde olur. html rnekler\rnek85.html
85
DIV veya LAYER etiketi ile oluturacanz katman ile HTML sayfasnn zerine, altn gsteren bir parmen kat koymu oluyorsunuz. CSS tekniklerini kullanarak Layer zelliklerini sayfada dier herhangi bir HTML unsurundan daha byk lde ve ok daha hassas ekilde biimlendirebilir; hatta hareket zellii kazandrabilirsiniz. Javascript, katmanlarn bu zelliklerini, eitli olaylardan yararlanarak, olay-ynlendiricilerine ve metotlara balayabilirsiniz. Katman oluturmakta kullanabileceimiz etiketlerden biri olan LAYER Netscape tarafndan tannr fakat IE tarafndan tanmaz.
86
Katman Teknii (DIV, LAYER)

Bu
DIV
<DIV
sebeple sayfalarmzda katmanlar LAYER yerine DIV ile oluturarak, iki Browseru da kullanabiliriz. DIV etiketi de LAYER gibi katmanlar yapar; zellikleri ve metotlar da LAYER gibidir. Aralarndaki tek fark, DIV ile oluturulacak katmanlarn biim ve konum zellikleri kendi STYLE komutlar ile kazandrmak zorundasnz; oysa LAYERin ok daha kestirme kendi biim zellikleri vardr. Bununla birlikte STYLE metodunu kullanmakla DIV etiketine Javascript ile biimlendirilecek daha ok zellik kazandrabiliriz.
87
LEFT, RIGHT Sayfada veya tablo iinde bulunduu yere gre, ortaya, sola veya saa hizalanmasn salar. CLASS=snf_adi Uygulanan stil snf varsa, burada belirterek btn DIVin ayn stili almasn salarz. DATAFLD=stun_ad DIVe bir veritabannn deeri veriliyor, verilerin gelecei stunun adi burada belirtilir. DATAFORMATAS=HTML , TEXT Balanan veritabannn HTML olarak mi, yoksa dz yaz olarak mi yorumlanacan belirtmeye yarar. DATASRC=#ID Varsa, balanan veritabannn kimlii ID=deer Bu DIVin kimlii
ALIGN=CENTER,
88
DIV
LANG=dil ISO standartlarna gre bu blmde yer

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 deitirmek iin de kullanlabilir. Bir web sayfas ierisinde zaten estetik kurallar gerei yzlerce renk ve font kullanmayz. Genelde birbiriyle uyumlu birka renk ve birka font kullanrz ki, bunlar her sayfada ayr ayr tekrar belirtmek yerine CSS yardmyla bir sefer tanmlayp btn web sayfamzda kullanabiliriz. Bu ekilde gncelleme yaparken de onlarca sayfay deitirmekten kurtuluruz. CSS kodlar HTML kodlarnn iine yazlrlar. Trne gre body veya head blmlerinde yer alabilirler.
90
alacak metnin yorumlanmasnda uygulanacak dil kodu LANGUAGE=dil JAVASCRiPT, JSCRiPT, VBS veya VBSCRiPT. Bu DiV etiketinin iindeki Scriptin dili. Hi bir deer belirtmezseniz, JavaScript varsaylr. STYLE=css1-zellikleri Bu etiketin unsurlarna uygulanacak stil komutlar TITLE=balk Bilgi iin kullanlr; Bu unsurun deeri onMouseOver halinde ara bilgi notu olarak grntlenir.
>
...
</DIV>
89
15
CSS TRLER
Yerel
CSS TRLER
Stil ablonu : Yerel stil ablonlar HTML belgesinin body blmne yazlrlar. Sadece bir kereliine, yazldklar yerde etkili olurlar.
<html> <head> <title>Yerel CSS</title> <META content=text/html; CHARSET=iso-8859-9 http-equiv=Content-Type> </head> <body> <h1>Deneme</h1> <h1 style="color:teal ;font-size:15">Deneme</h1> <h1>Deneme</h1> </body> </html>
Genel Stil ablonlar : Yerel Stil ablonlarnn aksine genel ablonlar, HTML belgesinin head blmne yazlrlar ve belgenin tmn etkilerler.
<html> <head> <title>Genel CSS</title> <META content=text/html; CHARSET=iso-8859-9 http-equiv=Content-Type> <style type="text/css"> h1 {color:teal; font-size:15} </style> </head> <body> <h1>Deneme</h1> <h1>Deneme</h1> <h1>Deneme</h1> </body>
91
92
CSS TRLER

HTML'E CSS TAKVYES
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}
CSS bu zamana kadar anlattmz zelliklerinin dnda, baz HTML etiketlerine ekstra parametreler kazandrr, veya baz zelliklere kendi araclyla ulap onlar ekillendirmemize olanak verir. Text zellikleri
text-align: Yatay hizalama

Sonra bu HTML kodlarn yazp stil1.css ile ayn dizine kaydedin.
<html> <head> <title>Harici CSS </title> <METAcontent=text/html; CHARSET=iso-8859-9 http-equiv= Content-Type> <link rel="stylesheet" type="text/css" href="stil1.css"> </head> <body> <h1>Deneme</h1> <h2>Deneme</h2> <h3>Deneme</h3> </body> </html>
93
text-transform: Metni byk veya kk harflerle grntleme

left: Sola hizalama right: Saa hizalama center: Ortaya hizalama line-height: Satr yksekliinin pixel deeri line-intdent: Sol kenardan uzakln piksel deeri 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
94
HTML'E CSS TAKVYES
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.

Liste zellikleri

List-style-type: Liste elemanlarnn bana:

disc: Daire circle: ember, square: Kare, decimal: Say koyar.
italic: Yazy eik yapar normal: Yazy bir deiiklik yapmadan yazar. bold: Yazy koyu yazar. normal: Yazy bir deiiklik yapmakszn yazar.
font-weight: Yaznn bold olup olmamasn belirler.
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:

95
inside: Listenin ikinci satrn en soldan balatr. outside: kinci satr bir ncekinin dikey hizasndan balatr.
96
16
HTML'E CSS TAKVYES
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.

Katman (DIV) zellikleri

width: Katmann genilii height: Katmann ykseklii position:
background-position:

left: Resmi pencerenin sol kenarna yaklatrr. right: Resmi pencerenin sa kenarna yaklatrr. center: Resmi ortalar.
97
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 ise kaydrma ubuklar ekler. visibility: Grnlrlk, visible veya hidden deerlerini alr. z-index: Sayfann grntlenme nceliini bildiren sra numaras.
absolute: Katmann konumunu kesin olarak bildireceimiz zaman kullanrz. relative: Katmann konumunu dier elere gre deiebilen ekilde vermemizi salar.
98
SECLER
Seiciler(Selectors) bize oluturduumuz <h1>, <h2> ... gibi etiketlerin mevcut zelliklerini ayn brakarak onlara yeni zellikler ekleme olana verdii gibi istediimiz bir kelimeye style zellikleri atayp istediimiz zaman armamz da salarlar. ki eit seici reneceiz: ID seicisi ve CLASS (snf) seicisi. Id Selectors(Id Seicileri) : Snf seicileri head blmnde tanmlanrlar. Seicinin keyfi isminin bana Sharp(#) iareti konur, ve takip eden keli parantezlerin arasna stil zellikleri yazlr. rnek95.html Class Selectors(Snf Seicileri) : Bir <h1> etikti tanmladnz, fakat sayfann baz yerlerinde bu etiketin 'color' parametresinin deeri 'red' olsun, fakat geri kalanlar ayn kalsn istiyorsunuz. Bunu snf seicileriyle yapabilirsiniz. rnek95a.html Bu ilem, Snf seicileri genel olarak da tanmlanabilirler. rnek95b.html
99
BALANTILAR VE CSS
CSS
ile can skc 'mavi ve alt izili' linkler yerine, olduka estetik grnml linkler oluturabiliriz. etiketinin stilini belirlerken olas durumu bildiren 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.
<A>
rnek96.html
100
CSS UYARI
Grdnz
rnekler
Dikey
gibi bu teknik stiller konusunda HTML'in eksik ynlerini tamamlyor, ayrca byk sayfalar hazrlarken zamandan tasarruf etmemizi salyor. Daha ok pratik yaparak CSS tekniine iyice hakim olabilirsiniz. Fakat her zaman aklnzn bir kesinde olsun: Stil ablonlarnn Netscape tarafndan desteklenmeyen zelliklerinin says bir hayli fazladr.
101
Kayan menler Kayan menler Drop down menler Sayfa al Sayfa al Dme arka plan resmi Textarea arka plan rengi
Yatay
rnek76.html rnek76a.html rnek76b.html rnek76c.html rnek76d.html rnek76e.html rnek76f.html

102
17
JavaScript ve Framler
Frame
JavaScript ve Framler
<html> <head> <title>ereveler</title> </head> <frameset cols="*,*"> <frame name="sol" src="htm1.html"> <frame name="sag" src="htm2.html"> </frameset> <noframes><body></body></noframes> </html>
103 104
kullanlan sayfalar en az web sayfasndan oluur. Frameleri ieren ilk sayfa dier frameset olarak adlandrlr. Framesetin ierisindeki dier frameler child olarak adlandrlr. Uygulamalarda, her bir child iin farkl isimler kullanlr. Framesetler ise top veya parent olarak isimlendirilir. Parent framedeki en st seviye grnt seviyesidir. Child pencereler parent pencereler ierisinde ortaya kar.
18

Javascript Ders

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Ders

Uploaded by

Copyright:

Available Formats

JavaScript nedir?

Yorum Satrlar Eski Browser

Javascriptin Temel lkeleri

Anahtar Kelimeler (Keyword)

break case catch continue default delete

switch this throw true try

typeof var void while with

Ayrlm Kelimeler (Reserved)

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

Alfanmerik (Karakter) Deerler (String literal): zel Karakterler

Javascript Deikenleri (Variable)

Yetki Alan (Scope)

Yetki Alan - Sonu

Dizi deiken Metotlar

Dizi deiken Metotlar

) : Dizi deikenin elemanlarn birletirmek iin kullanlr, sonu String olur.

) : Dizi deikenleri elemanlarnn srasn tersine evirmek iin kullanlr.

sort( ): Dizi deikenin elemanlarn sralamak iin kullanlr.

Dizi deiken Metotlar

Dizi deiken Metotlar

Bu metot ayn zamanda eleman eklemek iinde kullanlr:

Dizi deiken Metotlar

Dizi deiken Metotlar

Dizi deiken Metotlar

ok Boyutlu dizi deikenler

) and toLocaleString( ) metotlar dizi deikenleri Stringe

boyutlu dizi deikenler; dizi deikenlerin dizi deikenleri olarak tanmlanr.

yannda i ie gemi ekilde dizi deikenler tanmlanabilir.

Atama (Assignment) lemi

ettiiniz gibi bunu eittir (=) iaretiyle

zel Saysal Deerler

Sabit Infinity NaN Number.MAX_VALUE Number.MIN_VALUE Number.NaN Number.POSITIVE_INFINITY

Number.NEGATIVE_INFINITY Special value to represent negative infinity

Alfanmerik (String) lemler

Birinci ifadenin deili !(a>10) || !(s==y)

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

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

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

toString(), toLowerCase(), toUpperCase()

String Nesnesi zellikleri

Hazr Matematik Fonksiyonlar

stenilen fonksiyonun istenilen milisaniye aralklarla arlmasn salayan bir fonksiyondur.

Hazr Matematik Fonksiyonlar

Rasgele say retme

fonksiyonuyla 0 ile 1 arasnda rasgele bir say retilir.

Nesneler, Olaylar ve zellikleri

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)

submit reset link anchor

kisi[1].ad , kisi[1].soyad ...

Mouse / Keyboard zellikleri

Mouse / Keyboard zellikleri

Mouse / Keyboard zellikleri

Document Object Model - DOM

Document Object Model - DOM

JavaScript HTML DOM nesneleri

getElementById() and getElementsByTagName()

zellik length Methot back() go(-2)

forward() history listesindeki bir sonraki URL yi ykler

nesnesi alt kategorileri:

Background Border and Margin Layout List Misc

Cookie deerleri armak

Cookie deeri kontrol etmek

Dme Grafii Animasyonu