WEB PROGRAMLAMA 

DERS NOTLARI / JavaScripte Giri

YARD. DO. DR. MEHTAP YALINKAYA

Betik Dili (JavaScript )

Betik dili web sayfalarnda dinamik ierik salamak ve kullancyla

iletiim kurmak iin kullanlan istemci tarafnda alan bir dildir.

Html etiketleri arasnda tanmlanarak kullanlabilir.

1995 ylnda Brendan Eich tarafndan gelitirilmitir.

Javascript dilini, C dilinin web sayfalarna uyarlanm basit srm
olarak dnlebilirsiniz. Javascript dili isim benzerliine ramen Java ile
birbirinden bamsz, farkl dillerdir. Java gerek bir programlama dilidir.
Javascript ise bir script dildir.

Javascript dili C, Java, Perl, Python, Self dillerinden etkilenmi ve
gelitirilmitir. JScript, JScript.NET, Objective-J, TIScript dillerinin
oluturulmas iin kullanlm ve gelimesine yardmc olmutur.

Javascript dili 1.0 versiyonundan balayarak 1.8.5 versiyonuna
ulamtr. Script kodlarn web editr uygulamasnda ya da notepad
kullanarak oluturup dzenleyebilirsiniz.

Betik Dili (JavaScript )

Balangta sadece Netscape tarafndan desteklenen dil, imdi tm

tarayclar tarafndan desteklenmekte ve kullanlmaktadr. Temel script
komutlar her taraycda almasna ramen ileri dzey komutlar baz
tarayclar tarafndan tam olarak desteklenmemektedir.

Script komutlarnn browser zerinde alp almamasn gvenlik
asndan kullancnn belirlemesi salanmtr. steyen browser
ayarlarndan script kullanmn kapatabilir.

HTMLe JavaScript Kodlarn Tantma

Script kodlarn htmle tantmak iin;

Betik Dili (JavaScript )

HTMLe JavaScript Kodlarn Tantma

Type parametresi script bloklar arasnda yazlacak kodlarn trn

belirtir. Language parametresi ile javascript kodlarnn srmn belirtir.
Tm tarayclarda sorunsuz almas iin javascript semek doru
olacaktr.

Betik Dili (JavaScript )

JavaScript Kodlarnn HTMLdeki Konumu

JavaScript kodlar sayfa ierisinde 3 blmde kullanlabilir;

Birinci yol script kodlarn head etiketleri arasna yazarak

kullanmaktr. Head etikletleri arasnda yazlan kodlar sayfa yklenmeden
derlenecektir. Sayfamzda gerekleen olaylar karsnda (dme
tklanmas vb.) kodlarn almasn istiyorsak gerekli fonksiyonlar ve
deikenleri bu blmde yazmamz gereklidir.

Betik Dili (JavaScript )

JavaScript Kodlarnn HTMLdeki Konumu

kinci yol script kodlarn body etiketleri arasna yazarak

kullanmaktr. Body etiketleri arasna yazlan script kodlar sayfa
yklendiinde otomatik olarak derlenip alacaktr.

Betik Dili (JavaScript )

JavaScript Kodlarnn HTMLdeki Konumu

Script altrmann dier bir yolu *.js uzantl olarak kaydettiimiz

harici bir js dosyasn sayfaya dahil edip kodlar altrmaktr.

Web sayfasna harici javascript dosyas dahil etmek iin;

Script kodlarn yazarak ilkKod.js eklinde kaydedelim.

Web editr programn altrarak yeni bir html sayfas oluturun.

Script komutunun src parametresini kullanarak oluturduunuz js
dosyasn aadaki ekilde web sayfasna dahil ediniz.

Oluturduumuz js dosyas ve html dosyas farkl klasrlerde ise js dosyasnn html

dosyasna gre adresi src parametresi ierisinde belirtilmek gerekir. Html sayfasn
altrdmzda, ekranda sola dayal olarak ilk JavaScript Kodlarm ifadesi
yazdrlacaktr.

Betik Dili (JavaScript )

JavaScript Kodlarnn Yazm Kurallar

Betik Dili (JavaScript )

JavaScript Kodlarn simlendirme

Betik Dili (JavaScript )

JavaScript Kodlarnda zel aret Gsterimi

Betik Dili (JavaScript )

JavaScript Kodlarnda zel aret Gsterimi

Betik Dili (JavaScript )

JavaScript Kodlarnda Yorum Kodlar

Betik Dili (JavaScript )

Deikenler

Betik Dili (JavaScript )

Deikenler-Trleri

Betik Dili (JavaScript )

Deikenlere Deer Vermek

Betik Dili (JavaScript )

Deikenlere Deer Vermek

Betik Dili (JavaScript )

Deikenlere Deer Vermek

Yeni bir html sayfas ap, say, string ve boolean trnde deikenler tanmlayp
rastgele deerler aktaralm ;

Betik Dili (JavaScript )

Deikenlere Deer Vermek-Tr Dnmleri

Betik Dili (JavaScript )

Deikenler-Trler Aras lemler

Betik Dili (JavaScript )

Deikenler-Trler Aras lemler

Betik Dili (JavaScript )

Deikenler-Trler Aras lemler

Betik Dili (JavaScript )

Deikenler-Trler Aras lemler

Betik Dili (JavaScript )

Deikenler-Trler Aras lemler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Aritmetik Operatrler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Aritmetik Operatrler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Aritmetik Operatrler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Aritmetik Operatrler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Atama Operatrleri

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Karlatrma Operatrleri

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Karlatrma Operatrleri

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Mantksal Operatrler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

Mantksal Operatrler

Betik Dili (JavaScript )

Operatrler- lem ncelik Sras

lem ncelii

Betik Dili (JavaScript )

alma

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps
"Merhaba Dnya" yazs 7 defa yazlacak ve her defasnda bykl artacaktr.

var sayac=1
while (sayac <= 7)
{
document.writeln ("<font size=" + sayac + " >")
document.writeln ("<b><p>MErhaba Dnya</b></p>")
document.writeln ("</font>")
sayac++
}

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Girilen saynn karesini hesaplayan ve uygulamaya saysal deer olarak dahil

eden bir fonksiyon yazalm.
Script etiketleri arasnda karesi isminde bir fonksiyon tanmlayalm. Fonksiyonumuz
dardan tek parametre alsn.

Dardan ald x deerini fonksiyon, kendi ierisinde kare alma ilemini yapsn.
Hesaplad kare deerini fonksiyon dna veri olarak gndermek iin return
komutunu kullanalm.

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

Fonksiyonlar

Betik Dili (JavaScript )

Kodlama Yaps

DEV

Betik Dili (JavaScript )

Kodlama Yaps

DEV

Betik Dili (JavaScript )

Kodlama Yaps

DEV

Betik Dili (JavaScript )

OLAYLAR (EVENTS)
nternet sayfamzdaki her ey olaylarla gzlenebilir. Farenin herhangi bir yere
tklamas klavyeden bir eyler yazlmas, sayfann yklenmesi vb. eylemler
olaylarla kontrol edilebilir. Olaylarn gereklemesi ile yazlm fonksiyonlarn
tetiklenmesi salanr.
Olay yneticileri, olay gerekletiinde hazrladmz fonksiyonlar tetiklememizi
salar. Kullanm basittir. Html etiketlerine olay yneticisi eklerken etiketi
kapatmadan
komut satr eklenir.
Html etiketlerinin neredeyse tamamna uygulanabilir. rnein <a> etiketine olay
yneticisi eklersek yazm u ekilde olacaktr.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)
onClick Olay html etiketlerinin stne tek tklandnda gerekleen olay
Sahneye eklediimiz dmeye tklama sonucu uyar veren script kodu

// Fonksiyonumuz ekrana dme tkland

// uyarsn versin.
Fonksiyonumuz hazr. Artk body etiketleri arasna dme oluturmak iin gerekli
html komutlarn yazp olaymz dme etiketinin ierisinde tanmlayabiliriz.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)
onDblClick Olay

html etiketlerinin stne ift tklandnda gerekleen olay

<a href="http://nucleus.istanbul.edu.tr/~bilg3" ondblclick="alert ('Ders Notlar

alyor..')"> Ders Notlar</a>
onLoad Olay Sayfamzdaki herhangi bir nesnenin tamamen yklenme olayn
temsil eder. Body,img,frame ve frameset etiketlerinde
kullanlabilir.

Resim yklenmesine gre kontrol ettirseydik <img> etiketi ierisine yazmamz

gerekirdi.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)
onUnLoad Olay

onFocus Olay

Nesnenin kaldrlmas olayn gzler. Body etiketi ierisine

parametre olarak yazlrsa sayfann kapatlma olayn gzlemi
oluruz.

Sayfa zerinde html eleman ilem yaplmak zere seildiinde

yani o nesneye odaklanldnda alan olay tipidir.

Metin kutusunun iine yaz yazmaya

altmzda artk uyar verecektir.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)
onBlur Olay

Seilen html nesnesinin seilme zelliini kaybettiinde alan

olaydr. Seilmi eleman seimden kartlmsa tetiklenir.

onMouseOver Olay Html nesnesinin stne gelme olayn gzleyen olaydr.

onMouseOut Olay

Farenin nesne zerinden ayrlmas olaydr.

onMouseMove Olay

Fare nesne zerinde gezdirildiinde meydana gelen

olaydr.

onMouseDown Olay Fare nesne zerinde basld anda gerekleen olaydr.

Click ile fark click olaynn braklma eylemidir.
onMouseUp Olay

Farenin basl olan tuu brakma olaydr.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)

DEV

onKeyDown Olay Klavyeden tua basma olaydr. Metin kutusu nesnesinde

klavyeden tua basldnda olay dinleyicisi alr.
Klavyeden baslan tuu ekranda gstermek iin;
Klavyeden baslan tuu tespit etmek iin olayn event zelliini ve keyCode
komutunu kullanacaz.

Event.keyCode baslan tuun ascii kodunu okuyacaktr.

String.fromCharCode ile okunan ascii deeri tuun ismine evirecektir.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)
onSelect Olay

Metin kutular ierisindeki yaz seildiinde meydana gelen

olaydr.

onResize Olay Tarayc penceresinin boyutunu deitirdiinde gerekleen

olaydr. Body etiketine yazlr.

Betik Dili (JavaScript )

OLAYLAR (EVENTS)

DEV

Betik Dili (JavaScript )

NESNELER

Betik Dili (JavaScript )

NESNELER

Taraycnn alt ksmndaki, durum ubuunda gsterilen mesajdr. Script

komutlar arasnda herhangi bir yere yazlabilir. Tarayclarn bir ksm bu zellii
desteklememektedir.

Betik Dili (JavaScript )

NESNELER
Alert Metodu
Daha nceki rneklerde defalarca kullandmz alert kullancy bilgilendirmek
iin uyar pencereleri oluturur. Gereksiz yere kullanmaktan kanmak gerekir.
Ekranda 10 defa uyar kutusu oluturacak script kodlar iin ;

Betik Dili (JavaScript )

NESNELER
Confirm Metodu
Yaplan ilem sonucu onay kutusu oluturur. Onay kutusunun sonucu bir boolean
olarak geri dner. True ya da false eklinde alnan cevap ile programn ak
belirlenir.
Sayfaya eklediimiz kapat dmesine basldnda sayfay kapatmak iin onay
isteyen script kodlar iin;
Head etiketleri arasnda, dmeye basldnda almak zere bir fonksiyon
oluturalm.
Fonksiyonumuz dmeye bastnda bir onaylama penceresi olutursun.
Kullancnn verecei cevaba gre sayfay kapatp kapatmamaya karar versin.
Onaylama kutusu iin karar isminde bir boolean deiken oluturalm. Confirm
kutusundan gelecek true yada false bilgisi bu deikene atanacak.

Betik Dili (JavaScript )

NESNELER

Betik Dili (JavaScript )

NESNELER

Betik Dili (JavaScript )

NESNELER
Close Metodu

Prompt Metodu

Betik Dili (JavaScript )

NESNELER
Open Metodu

Betik Dili (JavaScript )

NESNELER

Nesneler ile ilgili ders notlarnn devam;

JAVASCRIPT-Nesne.pdf
isimli belgededir.

Betik Dili (JavaScript )

NESNELER

DEV

Betik Dili (JavaScript )

NESNELER

DEV

Betik Dili (JavaScript )

NESNELER

DEV

Kaynaklar

Adm Adm HTML ve XHTML- Faithe Wempen

Fatih HAYROLU-CSS(Stil ablonlar) Balang
iin
Seval ZBALCI - Internet Programlama Ders Notu
Umut ZTRK- CSS giri
http://fatihhayrioglu.com/z-index/
http://www.aycan.net/css-position-nedir-nasilkullanilir/