java sanalkurs

8/8/2019 Java Sanalkurs

1/37


2/37

JAVASCRIPTEL KTABI

Gkhan Halimolu

sanalkurs.net


3/37

JavaScript El Kitab(JavaScript Handbook)

Gkhan Halimolu

Sanalkurs Yaynlar

Programlama Serisi

Her hakk sakldr. Copyright 2009

Teknik Hazrlk:

Gkhan Halimolu

Bask:

Sanalkurs.net

I. Bask

www.gokhanhalimoglu.com

www.sanalkurs.net/ghalimoglu
http://www.gokhanhalimoglu.com/http://www.sanalkurs.net/ghalimogluhttp://www.sanalkurs.net/ghalimogluhttp://www.gokhanhalimoglu.com/


4/37

Sanalkurs.net | Javascript El Kitab

NDEKLER

nsz....................................................................................................2

JavaScript nedir? ..................................................................................3

JavaScript Kod Yazalm.......................................................................4

Document.write ....................................................................................5

Alert (Uyar mesajlar) .........................................................................6

Function (Fonksiyonlar) .......................................................................7

Prompt (Deer girii)............................................................................9

Confirm (Onay) ..................................................................................11

if/else komut grubu.............................................................................13

SORU .................................................................................................15

Dngler-for/next...............................................................................16While Dngs...................................................................................18

SORU .................................................................................................20

Nedir Bu Form Elemanlar? ...............................................................21

Nesneler..............................................................................................24

Window (Pencere)..............................................................................25

Location..............................................................................................27

Olaylar................................................................................................28

Zaman fonksiyonlar...........................................................................32

KAYNAK DOSYALAR....................................................................34

1


5/37

Gkhan Halimolu

nsz

Bu e-kitap ile Javascript uygulamalar gelitirmek ve orta seviyeJavascript kodlama bilgisine sahip olmak mmkn.

Konulara ayrlm olarak, seviye seviye dersler mevcut. Sras ilegittiiniz, kodlar uyguladnz srece siz de Javascript uygulamalargelitirebilirsiniz.

Bu kitap bir JavaScript El Kitab olarak deerlendirilebilir. Dierkitaplardaki sunumdan deiik bir tarz ilemeye altm. Hatrlamakistediiniz, renmek istediiniz, iinize yarayacak tm Javascriptkodlamalarn derleyerek, aama aama iindekiler ksmyla birliktesizlere aktarmaya altm.

Umarm yararl olur.

2


6/37


JavaScript nedir?C dilinin tarayclara uyarlanm hali olarak adlandrabiliriz. Websayfalarnda dinamik ierik salamak ya da kullancyla iletiimkurmak iin kullanlmaktadr. Ad benzerliine karn 'Java' ile ilikilideildir. Yaygn yanllardan biri JavaScript'in basitletirilmi Javaolarak tanmlanmasdr. Balangta yalnz Netscape tarayclarstnde alan JavaScript artk tm yaygn a tarayclar tarafndandesteklenmekte. (Vikipediden)

3
http://tr.wikipedia.org/wiki/Java_programlama_dilihttp://tr.wikipedia.org/wiki/Java_programlama_dili


7/37

Gkhan Halimolu

JavaScript Kod Yazalm

Bir Web sayfasnda JavaScript ile kod yazabilmek iin ilk ncetaraycmza kullanacamz script dilini tantmamz gerekir.

erik

Kodlarmzn HTML deil JavaScript olduunu gsterir. Kodlarmzyazmak iin gerekli tagleri hazrladktan sonra Javascript ile kodlama

yapabiliriz.

4


8/37


Document.write

JavaScriptte Sayafaya yaz yazdrmak iin document.write kullanlr.

Aadaki gibi kullanlr.

document.write(Merhabalar)

rnek sayfamza yazdrmak iin, temel komutlarmz ile birlikteyazalm.

document.write(Merhabalar)

lk Javascript kodlamamza balam olduk.

5


9/37

Gkhan Halimolu

Alert (Uyar mesajlar)

JavaScriptte uyar mesajlar yazmak iin alert kullanlr. Aadakigibi kullanlr.

Alert(mesajnnz buraya yazn)

Alert(Uyar mesaj)

Gelecek uyarya Tamam butonuna basarak programn bir altsatrdan almasna devam etmesini salarz.

6


10/37


Function (Fonksiyonlar)

Javascript fonksiyonlar arldklar zaman ilemeye balarlar.Aada bir fonksiyon tanmlamay renelim.

Fonksiyonlar;

{

}

Tagleri aras

na yaz

l

rlar.

rnek bir fonksiyon belirleyelim ve alert ile uyar mesajgnderelim ziyaretilerimize.

function mesaj(){alert(merhaba)

}

rnekler;

function mesaj(){alert(merhaba)

}

7


11/37

Gkhan Halimolu

8

{alert(merhaba)

}erikler parantezlerin ierisine yazlr.

function mesaj(){document.write(merhabalar)

}

Hazrlam olduumuz bu fonksiyonlarmz daha sonra istediimizdearabiliriz. Fonksiyonlarmz arma ilemine ilerleyen konulardabahsedilecektir.


12/37


Prompt (Deer girii)

Prompt kullancdan bilgi girileri iin kullanlr. Ziyaretilerinizdenbir deer, say, karakter v.b. istenmesi durumlarnda promptkullanrz.

Nasl kullanrz?

var deger=prompt(deer giriniz..,ltfen sadece rakam)

Kullanclarmzdan girilmesini istenen bilgileri kullanacamz iinbir deikene atarz. rnein yukarda Deger ismiyle bir deikenbelirledik ve kullancdan girileni

Deger=kullancnn bilgisi olarak eitledik.

var deger=prompot(deer giriniz..,ltfen sadece rakam)

Yukardaki girilen bilgiyi, rendiimiz yntemler ile sayfamzayazdralm.

var deger=prompot(deer giriniz..,ltfen sadece rakam)Document.write(deger)

Bunu bir fonksiyon ierisine yerletirelim ve sayfamz alr almazaralm.

9


13/37

Gkhan Halimolu

function mesaj(){

var deger=prompot(deer giriniz..,ltfen sadece rakam)doument.write(deger)}

Sayfamz aldnda istediimiz fonksiyonu yklemek iin ;

onload komutu ile sayfamz ald anda fonksiyonumuz ilemyapar.

imdi sra size, kodlarmz son olaraku hali ald ve sayfamzaldnda bizden bilgi girii istenilecek. Kullancdan alnan bilgiyi

sayfaya yazd

racakt

r.

function mesaj(){var a=prompt("Kelime veya cmle giriniz","ltfen sadece kelimegiriniz..")document.write(a)}

10


14/37


Confirm (Onay)

Cofirm Kullanc ile iletiime geer ve ona,Devam edilsin mi ?sorusunu sorar. rnein bir link verdiniz ve ziyaretinin siteyi terkedecei bilgisini veriyorsunuz sonu olarak evet/hayr butonlar ileziyaretinin cevabn ileme dntrebiliriz.

confirm("Devam edilsin mi ?)

Confirmde sonu, evet ise unu yap deilse unu yap gibi artlarbelirtilebilir. Ancak biz if yapsn renmediimiz iin tek birrnek ile konumuzu kapatyoruz.

rnek;

rnek, kullancdan istenen Sayfadan klsn m? rneidir.Kullanc onaylarsa, sayfa kapatlr. Onaylamaz ise kullancya mesajgnderilip iptal edildii belirtilir.

function kapat(){

if(confirm("Sayfamzdan kmak istediinizden emin misiniz?")){parent.close();}elsealert("ptal edildi."); {

}}

11


15/37

Gkhan Halimolu

Yukardaki kodlar sayfanza kopya edebilir sayfanzdadeneyebilirsiniz. leriki konularda if-else yapsndan bahsedeceiz,ancak o zaman bu rnei anlayabilirsiniz. imdilik sadece rneiinceleyip deneyebilirsiniz.

rnek;

Ana Sayfam

12


16/37


if/else komut grubuf/then/else olarak bilinen komut grubu, JavaScriptte if/else olarakkullanlmaktadr. Bu komut grubu iki deeri karlatrr ve sonucagre farkl ilemler yapmanz salar.ngilizce de if=eer else=deilse anlamnda kullanlmaktadr.

f/else kullanm renmeden nce, karlatrma operatrlerini

renelim.

Denk =Denk deil !=Kk Kk eit =

Ayrca ++ Trnak ierisindeki ++ operatr birer artrmay salar.

f (deer==deer)

Karlatrma operatrleri kullanlarak, parantez ierisinde belirtilirler.Aadaki rnekten incelemeye devam edelim

function mesaj(){var a=prompt("Kelime veya cmle giriniz","ltfen sadece kelimegiriniz..")if(a=="gkhan")alert("merhaba Gkhan.")else

alert("Gkhan yok mu?")}

13


17/37

Gkhan Halimolu

Yukardaki rnekte, bir fonksiyon hazrladk ve fonksiyon ierisindekullancdan isim girmesini istedik.

Kullanc tarafndan girilen bilgiyi, deikenimiz ile karlatryoruz

a.f (a=="gkhan") ise;Alert(merhaba Gkhan)deilse,alert(Ltfen sonra tekrar deneyin)

eklinde bir mesaj gndermi oluruz.

Komutumuzu *.html olarak kaydedebilmeniz iin aada derlenmihali bulunmaktadr.

function mesaj(){var a=prompt("Kelime veya cmle giriniz","ltfen sadece kelimegiriniz..")if(a=="gkhan")alert("merhaba Gkhan.")

elsealert("Gkhan yok mu?")}

14


18/37


15

_______________________________________________________

SORU

_______________________________________________________

imdi sizlerden ayn mantk ile sayfanz iin girilen rakamn 5tenbyk ya da kkolduunu syleyebilecek bir program yazmanzistiyorum.

__________________________________


19/37

Gkhan Halimolu

Dngler-for/next

Dngleri bir bei birden ok tekrarlamak iin kullanrz.rnein bir ismi alt alta binlerce defa yazdrabiliriz.

Genel olarak kullanm biimi u ekildedir.

for(balang; koul; artma says){

Dngdeki ilemler}

rnek;

for(a=1;a


20/37


{document.write(a+"
")}

Dngdeki ilemler

Yukardaki rnekte, alt alta=1den balayaraka


21/37

Gkhan Halimolu

While Dngs

Bu dngde dngdeki ilemlerin ka kere yaplmas gibi eyler szkonusu deil. While dngsnde durum gerekletii srece dngdevam eder.

Kullanm;

While(a


22/37


19

var a=0

var c=0

while (a


23/37

Gkhan Halimolu

SORU

Kullanc tarafndan girilen rakam ve kelimemiz olsun. Bu bilgilerdorultusunda girilen rakam kadar ekrana kelimeyi alt alta yazdran

bir program yapmanz istiyorum.

__________________________________

20


24/37


Nedir Bu Form Elemanlar?

Form elemanlar kullancdan bilgi girilerini kontrol edebildiimizbuton, text, radyo dmeleri v.b. elemanlardr.

Javascript uygulamalarnda form elemanlar zerinde fazladurmayacam, genelde ASP ve PHP gibi diller ierisinde formbilgilerini almak iin kullanrz. Burada ierisine girilen bilgiyi kaytedemeyeceimiz iin ben aktarmlar, devretme, ileme gnderme tarz

rnekler sunup yolumuza devam etmeyi dnyorum.Bu rneimizde bir kullanc giri (login) sistemi gelitirelim.Balayalm isterseniz ilk olarak form elemanlarndan (text) in naslaktarlabilecei zerinde durmak istiyorum.

Bir form oluturalm: Bunu iin sadece parola istense yeterliolacaktr sanrm.

Formumuzu oluturduk. Burada dikkat etmemiz gereken forma veoluturduumuz form elemanlarna (name=) isimlendirme

verilmesidir.

imdi formumuz hazr olduuna gre, yapmamz gereken bilgileriierisine girilen bilgileri kullanabilmek.

Aada yazacam adnz gibi bilmeniz gerekiyor:

document.FORM_ADI.PASS_ADI.value==

21


25/37

Gkhan Halimolu

Yukardaki tablo ierisinde sorguya gre, kendi form elemanlarmznadn dzenleyelim.

document.goko.gok.value

Artk kullanc giri sistemi (login) iin gerekli algoritmay alalm.

lk olarak texte girilen bilgiyi kontrol etsin, doruysa ilem deilse

ilem ite bu kadar basit. if/else diyerek kodlamamza balayalm ozaman.

Ben oku() adndan bir fonksiyon hazrlyorum sizlerde istediinizisimle bir fonksiyon an ve if/else kodlarmz yazn.

function oku(){if (document.goko.gok.value=="123")document.write("Sper!")elsedocument.write("Baarszz oldunuz.")}

Function oku()

Oku adnda birfonksiyon atk.

22


26/37


23

if (document.goko.gok.value=="123")

Eer;textin iine girilen bilgi 123 iseDocumen.write(sper deilse

Document.write(baarsz oldunuz)Yaz demi olduk.

Giri(login) sistemimizin son halini aadaki kodlarda bulabilirsiniz.

function oku(){if (document.goko.gok.value=="123")document.write("sper!")elsedocument.write("baarszz oldunuzz!")}


27/37

Gkhan Halimolu

Nesneler

Javascript ierisinde kendi hazrlayacamz nesneler dnda belirlikalplam nesneler vardr. Bunlar kodlamalar ierisinde ok iimizeyarayacaklardr. Bunlardan nemli olan birkandan bahsetmekistiyorum.

frame, self,_top location

submit reset location

Bunlardan bazlardr.

24


28/37


Window (Pencere)

Pencere (Window) zerinde sadece nesneler deilolaylardan da bahsetmek istiyorum.

ncelikle yeni bir pencere aalm.

Window.open

Window.open(yeni pencere a ) olarak kullanacaz ancak busadece istediimiz pencereyi aacaktr. imdi bu pencere zerindeistediimiz zelikleri sunmay renelim.

lk olarak pencere komutlarmzdan bahsedelim sonra zerindeuygulamaya geebiliriz.

window.name ; Balnztoolbar ; toolbar'n gsterilme zellii (yes/no )status; statusbarn gsterilme zellii (yes/no )menubar; menubarn gsterilme zellii (yes/no )scrollbars; scrollbar gsterilme zellii (yes/no )resizable; alacak olan ekrann boyutunun deitirilebilirlii (yes/no)width; genilikheight; ykseklik

imdi yeni bir sayfa aalm ve istediimiz zelikleri aktaralm.

window.open("http://ghalimoglu.com", "gko", "toolbar=no,status=no, menubar=yes,scrollbars=yes,resizable=no,width=760,height=460")

25


29/37

Gkhan Halimolu

26

imdi penceremizi kapatalm;

Window.close();

Komutumuz yukardaki gibidir. Fonksiyon olarak hazrlayabilirgvdede veyahut butonda altrabiliriz.

Veya;


30/37


Location

Ne ie yaryor bu location?

Ynlendirme ilemlerinde kullanyoruz location.

Nasl kullanldna gelince, rnek bir pencere ynlendirmesi yazalm;kullanm gayet basittir.

window.location.href=url

Veya istenilen sayfa iin;

window.location.href=ders.html

eklinde olabilir.

location nesnesini, rnein az nce yapm olduumu login(kullanc giri sistemi)inde kullanabiliriz.

Sayfaya yaz yazdrma yerine, kullancya giri yaptrdktan sonraistenilen sayfaya ynlendirmesini syleyebiliriz.

Ayn kodlama ile imdi sizlerin kullanc giri sistemimizi

gelitirmenizi istiyorum.

Girilen ifre doruysa web sitenizin istenilen sayfasna ynlendirilsin,yanl ise yalnz girdiniz ekilde bir uyar iletisi gndermesiniistiyorum.

27


31/37

Gkhan Halimolu

Olaylar

Onload:

Onload; sayfamzn ald anda hangi ilemi yapacan belirttiimizolay biimidir.

Daha aklayc olmak gerekirse, yazm odluunuz bir fonksiyonusayfa aldnda anda altrmak istiyorsanz onload olayn

kullanabilirsiniz.

rnek;

Bir fonksiyon hazrlayalm ve bunu sayfamz ilk aldnda onloadile aralm.

function mesaj(){alert(sitemize ho geldiniz)}

Yukardaki fonksiyonumuzda, kullancya Uyar halinde ho

geldiniz mesaj

sunmu olaca

z. Bunu onload olay

ile sayfam

zilk aldnda gerekletirelim.

28


32/37


Html tagleri arasna yerletirdik ve imdi taglerimizlebtnletirerek sayfamzn tamamn oluturalm.

rnek onload uygulamamz;

Web sitemize giri yapld anda, ho geldiniz mesaj ileziyaretilerimizi karlayacaz.

rnek uygulama;

function mesaj(){alert ("Sitemize hogeldiniz.")}

OnMouseOver/Out:

Belirlediimiz cisim alan ierisinde Mouse ile zerine gelindiindeistediimiz ilemi yapabileceimiz bir komut over/out olarakkullanldnda haber balklar/resim slaytlar v.s. hazrlanabilir.

Nasl kullanldn bir gz atalm.

onMouseOver="ilem"

29


33/37

Gkhan Halimolu

30

lem yazan yer zerinde, fonksiyonlar, komutlar kullanabiliriz. Buaamaya gelmiken birde /out/ olayndan bahsedip bir duyuru sistemirnei yapmay renelim.

OnMouseOut=ilem

imdi bununla ilgili zerin gelindiinde Uyar mesaj veren bir link

rnei gstermek istiyorum. Daha sonra over/out rneinin bir aradabulunduu haber baleklinde bir rnek ile devam edeceim.

function goko(){alert("Merhabalar");

}ghalimoglu.com

Bu rneimizde sayfaya link ekledik ve zerine gelindiinde bir uyarmesaj kmasn gstermi olduk. Herkes kodlar yazp deneyebilir.


34/37


Duyuru rnei;

sanalkurs.net

onmouseover="this.stop()"

Mouse zerindeyken(dur!)

onmouseout="this.start()">

Mouse zerindenekildikten sonra (devamet!)

Ayn yntem ile, sadan-sola doru kayan resimler, linklereklindede olabilir.Ynlendirmeleri

direction=" "

Komutu ile istediiniz alana yapabilirsiniz.rnein down yazarsanz aa ynde gidecektir.

31


35/37

Gkhan Halimolu

Zaman fonksiyonlar

Zaman fonksiyonlarnda ekranmza, hangi gn, hangi ay gibi bilgileriaktarabileceiz.

Bunlardan nce ilk kodumuz,

new date()

Bu kod ile deikenin zaman deeri tadn belirteceiz.

getDate() Ayn ka olduunu gsterir.getMonth() Hangi ayda olduumuzu gsterir. Ocak iin 0, ubat iin1, Mart iin 2, ...,getHours() Saat deerini ifade eder. 24"lk sistem kullanlr.getMinutes() Dakika deerini ifade eder.getSeconds() Saniye deerini ifade eder.

imdi, deikenimizi belirleyelim ve scriptimizi yazalm, ekranda birkt alalm.

32


36/37


33

Bulunduumuz yl:

var zaman = new Date()

document.write(zaman.getFullYear())

Yukardaki scriptte sadece yl iin gsterdim. Siz dierleri iin deuygulayabilirsiniz.


37/37

Gkhan Halimolu

KAYNAK DOSYALAR

Hazrlam olduumuz dosyalar aadakiler linklerden birindenindirebilirsiniz.

http://rapidshare.de/files/46346652/oernekler.rar.html

http://vip-file.com/download/9e2a63929038/--rnekler.rar.html

http://www.2shared.com/file/5176317/a0fe5a52/rnekler.html

http://s1.dosya.tc/_rnekler.rar.html

http://www.uploadyeri.com/download.php?file=d9d0b5bd4593370f90bb2ec8331ee6b0

Sonunu getirdiyseniz kendiniz iin atm olduunuz adm baar ile

bitirmisiniz demektir.

Umuyorum herkese az da olsa bireyler katabilmiimdir.
http://rapidshare.de/files/46346652/oernekler.rar.htmlhttp://rapidshare.de/files/46346652/oernekler.rar.htmlhttp://vip-file.com/download/9e2a63929038/--rnekler.rar.htmlhttp://vip-file.com/download/9e2a63929038/--rnekler.rar.htmlhttp://www.2shared.com/file/5176317/a0fe5a52/rnekler.htmlhttp://www.2shared.com/file/5176317/a0fe5a52/rnekler.htmlhttp://s1.dosya.tc/_rnekler.rar.htmlhttp://s1.dosya.tc/_rnekler.rar.htmlhttp://www.uploadyeri.com/download.php?file=d9d0b5bd4593370f90bb2ec8331ee6b0http://www.uploadyeri.com/download.php?file=d9d0b5bd4593370f90bb2ec8331ee6b0http://www.uploadyeri.com/download.php?file=d9d0b5bd4593370f90bb2ec8331ee6b0http://www.uploadyeri.com/download.php?file=d9d0b5bd4593370f90bb2ec8331ee6b0http://www.uploadyeri.com/download.php?file=d9d0b5bd4593370f90bb2ec8331ee6b0http://s1.dosya.tc/_rnekler.rar.htmlhttp://www.2shared.com/file/5176317/a0fe5a52/rnekler.htmlhttp://vip-file.com/download/9e2a63929038/--rnekler.rar.htmlhttp://rapidshare.de/files/46346652/oernekler.rar.html

java sanalkurs

Documents