Download - Java Sanalkurs
-
8/8/2019 Java Sanalkurs
1/37
-
8/8/2019 Java Sanalkurs
2/37
JAVASCRIPTEL KTABI
Gkhan Halimolu
sanalkurs.net
-
8/8/2019 Java Sanalkurs
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/ -
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
6/37
Sanalkurs.net | Javascript El Kitab
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 -
8/8/2019 Java Sanalkurs
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/8/2019 Java Sanalkurs
8/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
10/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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.
-
8/8/2019 Java Sanalkurs
12/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
14/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
16/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
18/37
Sanalkurs.net | Javascript El Kitab
15
_______________________________________________________
SORU
_______________________________________________________
imdi sizlerden ayn mantk ile sayfanz iin girilen rakamn 5tenbyk ya da kkolduunu syleyebilecek bir program yazmanzistiyorum.
__________________________________
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
20/37
Sanalkurs.net | Javascript El Kitab
{document.write(a+"
")}Dngdeki ilemler
Yukardaki rnekte, alt alta=1den balayaraka
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
22/37
Sanalkurs.net | Javascript El Kitab
19
var a=0
var c=0
while (a
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
24/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
26/37
Sanalkurs.net | Javascript El Kitab
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!")}
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
28/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
29/37
Gkhan Halimolu
26
imdi penceremizi kapatalm;
Window.close();
Komutumuz yukardaki gibidir. Fonksiyon olarak hazrlayabilirgvdede veyahut butonda altrabiliriz.
Veya;
-
8/8/2019 Java Sanalkurs
30/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
32/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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.
-
8/8/2019 Java Sanalkurs
34/37
Sanalkurs.net | Javascript El Kitab
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
-
8/8/2019 Java Sanalkurs
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
-
8/8/2019 Java Sanalkurs
36/37
Sanalkurs.net | Javascript El Kitab
33
Bulunduumuz yl:
var zaman = new Date()
document.write(zaman.getFullYear())
Yukardaki scriptte sadece yl iin gsterdim. Siz dierleri iin deuygulayabilirsiniz.
-
8/8/2019 Java Sanalkurs
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