jQuery

5,494 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,494
On SlideShare
0
From Embeds
0
Number of Embeds
162
Actions
Shares
0
Downloads
116
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery

  1. 1. Kendinize Güvenerek jQuery
  2. 2. Bilgisayar Mühendisi Musa ÇAVUŞKENDĐNĐZE GÜVENEREK jQuery
  3. 3. 4 Musa ÇAVUŞ Almanya, 2010
  4. 4. Kendinize Güvenerek jQueryMusa ÇAVUŞBedava Dağıtım:Kasım - 2010© Musa Çavuş
  5. 5. 6 Musa ÇAVUŞBu kitabın her türlü yayın hakkı Musa Çavuş’a aittir.Sayfa Tasarımı:Musa ÇavuşWeb Adresi: www.musa-cavus.com, E–posta: jquery@musa-cavus.com
  6. 6. 7Musa ÇAVUŞ
  7. 7. 8 Musa ÇAVUŞ Önsöz İlk kitabım olan “Kendinize Güvenerek Java” kitabından sonra “Farklı Ol Mal Olma” adlı kişisel gelişim kitabımı yazdım ve dedim ki ülkemdeki insanlara faydalı olabilmen için bir teknik kitabı daha yazmalısın ve bu seferki kitap hem büyük bir açığı kapatmalı hemde çok yarar sağlamalı. Türkiye’nin, Web dünyasında gün geçtikçe çok geliştiğini biliyoruz. Web tasarımı alanında Türkçe kaynakların eksikliklerin olduğunu gördüm. Amerika ve Avrupa’da şu an büyük siteler görsellikleri için güçlü kütüphaneler kullanmaktadırlar. jQuery bu kütüphanelerin başında gelmektedir. MaalesefjQuery alanında Türkiye’de hiçbir Türkçe kaynak kitap mevcut değildir. Ben bu kitabın bu açığı kapatacağını düşünüyorum. Her kesimdeki insanın bu kitaptan faydalanması için yine Türkiye’de bir ilkeimza atarak Türkiye’deki ilk jQuery kitabını bedava dağıtmak istiyorum. Bunun için kendi emeğimle İnternet ortamında kitabımı yaygınlaştırmaya karar verdim. Sizlerden isteğim eğer kitabımı okuduysanız ve beğendiyseniz birdostunuza iletmeniz olacaktır. Ya da http://www.musa-cavus.com adresindenkitabımı indirme tavsiyesinde bulunmanızdır. Kitabı bedava dağıtmam, kitabın basit konulara değinmesi anlamını taşımamaktadır. jQuery dilini iyiöğrenmeninde temelinde JavaScript dilini iyi bilmeniz yatar. Bunun için kitapta öncelikle JavaScript konusuna ağırlık verdim. Daha sonra AJAX konusunadeğindim ve son olarak jQuery konusuna geçiş yaptım. JavaScript’in bu kitaptane işi var canım demeyin, çünkü JavaScript jQuery ile et ve tırnak gibi ayrılmaz iki parçadır. Eğer ilk kitabım olan “Kendinize Güvenerek Java” kitabımı okudysanız benimanlatım tarzımı az çok biliyorsunuzdur. Genelde kitabımda gereksiz anlatımlara değinmiyorum, çünkü gereksiz bilgilerle beyin hücrelerinizi boşu boşuna meşgul etmek boşa vakit kaybıdır. Daha çok örnekler eşliğinde konularıanlatıyorum ve bir konuda daha önce anlatmadığım konulara değinmiyorum. O yüzden size tavsiyem, kitabı baştan sona doğru okumanız ve uygulamanız olacaktır. Bazen kitaptaki örnekler uzun gelebilir, fakat sizde göreceksiniz ki örneklerin uzun olmasına rağmen bir zorluk çekmeyeceksiniz, çünkü örnekleri hem basit tuttum hemde daha önce anlattığım bölümleri koydum. Musa ÇAVUŞ - 2010
  8. 8. 9Musa ÇAVUŞ
  9. 9. 10 Musa ÇAVUŞ Bölüm 1 JavaScript’e giriş
  10. 10. 11 Musa ÇAVUŞ1.1 JavaScript ile web sayfası bağlantısıFazla lafı uzatmadan ve gereksiz yazılarla sizi meşgul etmeden hemen ilkörneğimiz olan JavaScript kullanmadan basit bir HTML örneğine geçiyorum.:<html> <body> Bu sayfada JavaScript kullanilmiyor. </body></html>jsyok.html Editör olarak herhangi basit bir metin editörü kullanabilirsiniz. Windowsaltındaki Notepad çok basit bir editördür fakat sizin ilk aşamada tümdeğişiklikleri kendiniz kodlayacağınızdan JavaScript’i daha verimliöğrenebileceksiniz. Ben biraz daha kolaylık ve renklilik olsun diye Opensourceolan Notepad++ editörünü kullanıyorum.Yukarıdaki kodu jsyok.html dosyasına kayıt edin ve fare ile çift tıkladığınızdastandart tarayıcınız açılacaktır ve şu yazıyı göreceksiniz.Bu sayfada JavaScript kullanilmiyor.Kitaptaki HTML kodlarını açıklamıyorum, çünkü sizin HTML bilgisine sahipolduğunuzu varsayıyorum. Bundan sonraki örnekleri verirken, önce örneğiyazacağım ve ardından ekran çıktısını ekleyeceğim. Yukarıdaki örneğiJavaScript ile nasıl yapabiliriz?JavaScript kullanabilmenin birkaç yolu vardır. Bunlardan ilki <script> </script>arasına yazacağımız komutlarla olabilmektedir.<html><body><script>alert("Merhaba Dünya");</script></body></html>alert.html
  11. 11. 12 Musa ÇAVUŞŞekil1Html kodunda <script> ile </script> tagları arasında alert() fonksiyonunukullandım. alert() fonksiyonunun özelliği, parametre olarak verdiğiniz metiniŞekil1’deki gibi ekranda göstermesidir. Sarı bir üçgen içerisinde bir ünlem,yanında bizim alert() fonksiyonuna parametre olarak verdiğimiz metin, bir“Tamam” düğmesi ve başlık olarak “[JavaScript Uygulaması] yazısı. Benuygulamalarımı çalıştırırken Firefox kullanıyorum. JavaScript öğrendiktensonra, size tavsiyem, örneklerinizi birkaç tarayıcıdan geçirmek olsun, çünküJavaScript her tarayıcıya göre farklı sonuç verebilmektedir. Uygulamalarınızınsonuçlarından emin olabilmek için birkaç tarayıcıdan geçirmelisiniz. Sizinuygulamanızı, web sayfanızı ziyaret eden kişilerin ne tür bir tarayıcıkullandığını önceden kestiremediğiniz için bunu yapmanız gerekmektedir.JavaScript programlamasını bizler daha çok Đnternet ortamında kullanırız. Buyüzden Đnternet hakkındaki bilgilerimiz temel seviyede yeterlilik göstermelidir.Đnternet sadece “World Wide Web” değildir, Mesela ftp’de Đnternet ortamındakullanılan bir protokoldür ve www protokolünden çok daha önce kullanılmıştır.Tarayıcınızın adres kısmına ftp://ftp.microsoft.com/ yazın ve arama tuşunabasın. Ben bunu yaptığımda karşıma şu bilgiler çıktı:
  12. 12. 13 Musa ÇAVUŞŞekil2ftp gibi birçok Đnternet hizmetleri mevcuttur. Hepimizin kullandığı E-Mail.Uzaktaki bilgisayarları kullanabilmek için kullandığımız telnet protokolü. ssh,scp ve usenet gibi.Yalnız Đnternet ortamı www sayesinde bu popülaritesinikazandı. Biz www özelliğini tarayıcımızda http protokolüyle kullanabiliriz.Yine adres çubuğunda http://www.hotmail.com.tr girdiğimde şöyle bir görüntüelde ediyoruz:
  13. 13. 14 Musa ÇAVUŞŞekil3Karıştırmamamız gereken nokta http ile html’dir. http Đnternet’te yayımlananweb sayfalarına ulaşmak için gereken bir protokoldür. html ise web sayfalarınıniçeriğini görebilmemiz sağlayan bir tarayıcı dilidir.Şekil3’te çıkan görüntünün üzerine sağ fare ile tıkladığınızda ve çıkan popupmönüsünden “Sayfa kaynağını göster” seçeneğini seçtiğinizde karşınızaŞekil3’teki sayfanın HTML, CSS ve JavaScript kodu gelecektir.
  14. 14. 15 Musa ÇAVUŞŞekil4Günümüzdeki önemli web saylarını JavaScript olmadan düşünmek mümkündeğildir. Herkes bu yüzden tarayıcısında JavaScript özelliğini kullanmaktadır,ama bazı kişiler buna rağmen JavaScript’lere izin vermek istememektedirler.Bukullanıcılar için şöyle bir kod eklentisi yapabilirsiniz:<html><body><script>alert("Merhaba Dünya");</script><noscript>Tarayiciniz JavaScript desteklemiyor.</noscript></body></html>jsdestekyok.html<noscript> tagı JavaScript desteklemeyen tarayıcılarda taglar arası verilenmetini ekranda göstermektedir.
  15. 15. 16 Musa ÇAVUŞ<script> tagını kullanırken “language” parametresiyle hangi dili kullandığımızıbelirtebiliriz. <script> tagı bir HTML tagıdır, JavaScript tagı değildir. Buparametrede “VBScript” ya da JavaScript’in eski adı “LiveScript” yazabilir. Bizörneklerimizde standart olan “JavaScript” terimini kullanacağız. Bu noktadaHTML kodu kullandığımız için, büyük küçük yazımı önemli değil, siz“JavaScript” terimini istediğiniz gibi yazabilirsiniz.<html><body><script language="JavaScript"></script></body></html>language.htmllanguage parametresinin kullanılmadığı durumlarda “type” parametresinikullanarak mime-type’ını tanımlamamız gerekiyor. mime-type, dosya formatınıtanımlamaktadır. Uluslararası bir standarttır ve bu standart ile bir çok formatıtanımlayabilirsiniz, mesela XML, HTML, grafik formatları gibi.<html><body><script type="text/javascript"></script></body></html>mimetype.htmltype parametresi, ana kategori ve alt kategori olarak iki bölümden oluşmaktadır.Yukarıdaki kodda ana kategori text terimi olmakla beraber, alt kategorijavascript terimidir.Web sayfaların %95’i language terimini parametre olarak kullanırlar. Dahaönceki örneklerde farkına vardıysanız, ne language ne de type parametresikullandım ve kodumuz çalıştı. O zaman ne diye bu kadar çene yoruyorumdersiniz? Web sayfanızı XHTML kullanarak gerçekleştirmek istiyorsanız typeparametresini kullanmak zorundasınız. JavaScript versiyon farklılıklarını
  16. 16. 17 Musa ÇAVUŞgözetmek istersenizde genelde language parametresini kullanmalısınız. Onundışında bu parametreleri kullanmadan web sayfaları oluşturabilirsiniz.1.2 JavaScript ile kütüphane kullanımıJavaScript’leri web sayfalarında kullanmak istiyorsanız bunları kütüphanelerdesaklamayı tavsiye ederim. Böylece projeler daha okunaklı olabilir ve birfonksiyona istediğiniz kadar kullanabilirsiniz. Yazdığınız kütüphaneyi HTMLiçerisinde kullanmak istiyorsanız, <script> tagında “src” parametresinikullanarak, kütüphane dosyasının yerini ve adını yazıyorsunuz.<html><script language="JavaScript" src="benimFonksiyonlarim.js"></script><body><script language="JavaScript"> hosgeldin();</script></body></html>kutuphaneKullanimi.htmlfunction hosgeldin(){ document.write("Hosgeldin");}benimFonksiyonlarim.js
  17. 17. 18 Musa ÇAVUŞŞekil5benimFonksiyonlarim.js dosyası ile kutuphaneKullanimi.html dosyası aynıdizinde olduğundan, “src” parametresine sadece benimFonksiyonlarim.jsyazmak yeterlidir. Kütüphanede, örnekte olduğu gibi fonksiyonlar ya dadeğişkenler kullanabilirsiniz. Fonksiyonlar ve değişkenler daha sonrakikonularda ele alınacaktır, şimdilik kütüphane kullanımı nasıl oluyor onubilmeniz yeterlidir. “src” bağlantısını gerçekleştirdikten sonra,kutuphaneKullanimi.html dosyasında hosgeldin() fonksiyonunun adını yazarakçağırabilirsiniz. Daha önce belirttiğim gibi bunun avantajı bir çok HTMLdosyasından bu bağlantıyı gerçekleştirerek, hosgeldin() fonksiyonununçağrılabilmenizdir.Kullandığımız kütüphaneyi incelerseniz, özel bir yapıya sahip değildir.Kullanmak istediğim fonksiyonu yazdım o kadar. Đcabında istediğimdeğişkenleri de sırasıyla tanımlayabilirdim. Kafanıza göre takılabilirsiniz.1.3 JavaScript versiyonları
  18. 18. 19 Musa ÇAVUŞJavaScript, bir çok programlama dili gibi çeşitli versiyonlarla varlığınıgöstermektedir. Geleneğe uyalım diye böyle bir şey olmamıştır. Her versiyondayeni teknolojileri bünyesinde barındırmaktadır. Eski tarayıcılar JavaScript’inyeni versiyonlarını tanıyamadığı için, kullanılacak yeni teknolojileridetanıyamayacaktır.<script language="JavaScript1.5"> location.href="index15.html";</script><script language="JavaScript1.4"> location.href="index14.html";</script><script language="JavaScript1.3"> location.href="index13.html";</script><script language="JavaScript1.2"> location.href="index12.html";</script><script language="JavaScript1.1"> location.href="index11.html";</script><script language="JavaScript"> location.href="index10.html";</script>versiyon.html“language” parametresiyle JavaScript’in versiyonunu belirtebiliyoruz.location.href çağırısıyla web sayfasının hangi sayfaya iletileceğini söylüyoruz.Diyelim ki bizim tarayıcımız JavaScript 1.3 versiyonunu destekliyor, o zamansayfa index13.html sayfasına iletilir ve tarayıcı index13.html dosyasını işlemekoyar.Internet Explorer “JavaScript1.0” ifadesini tanımamaktadır. Aynı şekilde yenitarayıcılardan bazılarda “JavaScript1.4” ve “JavaScript1.5” ifadelerinitanımamaktadır. Bu ifadeleri tanımadıkları için <script> tagında yazılan kodparçası işleme sokulmamaktadır. Şu da bir gerçek eski tarayıcıları kullanankişilerin sayısı oldukça azdır ve emin olun ki bu oran %1 bile değildir. Aslındabu konuyu koymayacaktım fakat sizi daha derin konulara girmeden önce basitkonularla ısındırmak istiyorum. Programcı olabilmek için her konuyu bilmenize
  19. 19. 20 Musa ÇAVUŞgerek yoktur sadece ihtiyacınız olan konuları bilseniz yeterlidir. Sakin herkonuyu mutlaka bilmeliyim diye düşünmeyin, çünkü her şeyi bilemezsiniz fakatnasıl yapıldığını bilebilirsiniz.1.4 JavaScript desteği var mı?JavaScript herkes tarafından kabul görmüş durumdadır, fakat yine dekullanıcılardan bazıları JavaScript’i tarayıcısında engellemiş durumundadır.Acaba bunu ortaya çıkartabilir misiniz? Cevap evettir.<html><head> <meta http-equiv="refresh" content="5;URL=jsyok.html"></head><script language="JavaScript"> location.href="jsdestekyok.html";</script><body><a href="jsyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayi tiklayin veJavaScript olmayan sayfaya yonlendirilin</a><br /><a href="jsdestekyok.html">Eger sayfa iletimi calismiyorsa, lutfen burayitiklayin ve JavaScript olan sayfaya yonlendirilin</a></body></html>Đlet.htmlBu sayfanın header kısmında bir meta tag vardır. http-equiv parametresisayfanın ne yapacağını söylüyor ve content kısmındaki 5 rakamı saniyedüzeyindeki zamanlamadır. Bir de URL ifadesindeki jsyok.html dosyası yeralmaktadır. Bunun anlamı, sayfaya gelen ziyaretçi 5 saniye sonra verilen adreseiletilsin demektir. location.href = “jsdestekyok.html” ile ziyaretçinin tarayıcısıJavaScript destekliyorsa “jsdestekyok.html” sayfasına git denilmektedir.JavaScript sayfada yoksa 5 saniye sonra jsyok.html sayfasına iletimgerçekleşecektir. Tarayıcılarda otomatik iletim engellenebildiği için buanlattıklarım çalışmaz. Bunun için ek olarak ziyaretçiye link şeklinde iki olanaksunmalıyız. Kullanıcı bu durumda JavaScript desteği almak istiyorsa gereklilinki tıklar ve JavaScript destekli sayfaya geçer. Đstemiyorsa JavaScript olmayansayfaya geçer.
  20. 20. 21 Musa ÇAVUŞ1.5 GüvenlikGerçekte JavaScript güvenlik sistemini delebilir. Bunlara bir kaç örnek verecekolursam, Đnternet adresini gösteren linkleri gizlemek, girdiğiniz sayfada birdenbir sürü popup penceresinin açılması, istenilmeden web sayfasının kapanması,ardı ardına açılan pencerelerle sisteminizin kilitlenmesi. Son yazdığıma aşağıdabir örnek var, yalnız sisteminizi seviyorsanız ve tüm bilgileriniziyedeklediyseniz bu örneği deneyebilirsiniz, çünkü çok basit ve tehlikeli biryöntem.<html><body><!--Sisteminizi seviyorsaniz bu ornegi calistirmayin--><script>while(true) open("","");</script></body></html>guvenlikacigi.txtĐçinde yazanları ileriki bölümde ayrıntılı anlatacağım. Bu kodun yaptığı birdöngü içerisinde sonsuza kadar pencere açmaktır.JavaScript ile harddiskinizin istenilen bölümüne bilgi yazamazsınız ya daistenilen bölümden çok kolay bilgileri okuyamazsınız. Eğer olumlukullanıldığında çok faydalı bir dildir. Tabi bu JavaScript’in hiç zarar vermezanlamını taşımasın. JavaScript’i ufak görmeyin, kitabın diğer bölümlerindejQuery kütüphanesi anlatılacaktır. JavaScript, jQuery’nin temelinioluşturmaktadır. jQuery ile de acayip sayfalar programlayabilmektesiniz.Acayip diyorum, çünkü gerçekten acayip sayfalar oluşturabildiğinize kendinizbile inanamayacaksınız.
  21. 21. 22 Musa ÇAVUŞ Bölüm 2 XHTML, HTML, XML ve CSS temel bilgileri
  22. 22. 23 Musa ÇAVUŞXHTML, HTML, XML ve CSS hakkında temel bilgiler vermek istiyorum,çünkü kitaptaki konular derin olmasa bile ara sıra bu teknolojilerle beraberçalışmaktadır. Bunun sebebi, günümüz web sayfalarında bu teknolojileringenelde beraber kullanılmasında yatmaktadır.Ayrıca diğer bölümlerde bu teknolojilerin kullanıldığı yerlerde buradaanlattığımın dışında komutlar kullanırsam onları da o bölümlerde anlatacağım.Böylece kitabın bu bölümünde bu konularla fazla vakit harcamamış oluruz.2.1 HTMLModern web sayfaları HTML teknolojisini sadece yapısal anlamdakullanmaktadırlar. Yani gereken komutlar kullanılıyor ve görsel kısım CSSteknolojisiyle düzenleniyor. JavaScript komutlarıylada programlama kısmıgerçekleştiriliyor. Bu yüzden HTML ile kullanacağımız az sayıda önemlikomutlar kalmaktadır. Bunlarda yapısal komutlardır. Tabi aranızda HTMLdilini su gibi içmek isteyen varsa, piyasada bu konuda oldukça çok kitap var.Ben diyorum ki gerek yok, alem uzaya çıkıyor siz hala tekeri yeniden mikeşfetme peşindesiniz?<html><head><title>Basit bir HTML Sayfasi</title></head><body></body></html>yapi.html
  23. 23. 24 Musa ÇAVUŞŞekil6HTML sayfasındaki tüm içerik <html> tagın içine konmaktadır. <html> tagıHTML sayfasının kök tagıdır. Ondan sonra <head> tagı gelmektedır. <head>tagında HTML sayfasının baş kısmı yer alır. Gördüğünüz gibi <title> tagı da bukısımda yer almaktadır. <title> tagı ile tarayıcınızın başlığınıbelirtebiliyorsunuz. Sekme özelliği gösteren tarayıcılarda da sekmedeki metnide buradan değiştirebiliyorsunuz. <body> kısmında HTML sayfasındaki görselkısım yer almaktadır. <html>, <head>, <title>, <body> tagları HTMLsayfasının temel yapısıdır. Bunların yanı sıra doküman tipini belirten bir üstyazı vardır. Onu burada vermek istemiyorum, çünkü başlangıç seviyedekikişiler için kafa karıştırıcı bir bilgidir. Tarayıcılar, doküman tipini belirtenyazıyı yazmasanız, tolerans uygulayarak, bunu bir hata olarakgörmeyeceklerdir. Zaten bu yüzden bunu bilmesek olur. Önemli gördüğümtagları, örnekler eşliğinde kısaca ve derine inmeden anlatacağım ki fazlakafanızı karıştırmak istemiyorum.Başlıklar
  24. 24. 25 Musa ÇAVUŞHTML sayfalarında yazıların üzerine başlık atabilmeniz için 6 büyüklüktebaşlık tagı mevcuttur. Bunlar, <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>taglarıdır. <h1> en büyük başlıktır. <h6> ise en küçük başlıktır.<html><head><title>Basit bir HTML Sayfasi</title></head><body><h1>Baslik</h1><h2>Baslik</h2><h3>Baslik</h3><h4>Baslik</h4><h5>Baslik</h5><h6>Baslik</h6></body></html>baslik.html
  25. 25. 26 Musa ÇAVUŞŞekil7ParagrafBir Paragraf başı yapmak istiyorsanız <p> tagını kullanabilirsiniz. <p> tagınınbittiğini göstermek için </p> tagını isteğe bağlı kullanabilirsiniz, mecburiyetyoktur.<html><head><title>Basit bir HTML Sayfasi</title></head><body><h3>Baslik</h3>
  26. 26. 27 Musa ÇAVUŞ<p>Burada Paragraf basliyor<p>Burada bir Paragraf daha basliyor<p>Bende bir Paragraf basiyim</body></html>paragraf.htmlŞekil8Satır başıMetinlerinizi bitirdikten sonra yeni bir satıra geçmek istiyorsanız <br> tagınıkullanabilirsiniz. Paragraftan farklı olarak <br> tagını istediğiniz yerekoyabilme özelliği taşımasıdır. <br> tagı metininizi, satır atlamadan ikinci satırageçirmektedir. Diyelim ki Windows’daki Notepad programını kullanıyorsunuz.Bir alt satıra geçebilmek için ne yapıyorsunuz? Enter tuşuna basıyorsunuz.HTML’yi geliştiren gençlerde bu işleme <br> demişler.<html><head>
  27. 27. 28 Musa ÇAVUŞ<title>Basit bir HTML Sayfasi</title></head><body>Satir Basi<br><br>Bugun hava cok guzel<br>Nasilsin?</body></html>satirbasi.htmlŞekil9ListelerMetinlerinizi gruplayarak göstermenin yolu listeleri kullanmaktan geçer. <li>tagı ile bir listedeki girdiyi tanımlarsınız ve </li> bu girdiyi bitirmiş olursunuz.<li> tagından önce kullanacağınız tag listenin şeklini gösterir. <ul> tagı listenizisiyah noktalı bir liste yapar. <ol> tagı ise listenizi sayısal bir liste yapar. Listeiçerisinde listede kullanabilirsiniz. Bunun için <li> tagından sonra <ol> ya da
  28. 28. 29 Musa ÇAVUŞ<ul> kullanabilirsiniz. Liste şekli olarak sadece <ul> ve <ol> yoktur, fakatbizim için bu tagları bilmek yeterlidir.<html><head><title>Basit bir HTML Sayfasi</title></head><body><ul> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li></ul><ol> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li></ol><ul> <li> <ol> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li> </ol> </li> <li> <ol> <li>Konya</li> <li>Balikesir</li> <li>Istanbul</li> </ol> </li></ul></body>
  29. 29. 30 Musa ÇAVUŞ</html>listeler.htmlŞekil9TablolarHTML’de tablolar başlı başına bir konudur, fakat burada da bu konuyaihtiyacımız olduğu ve kafa karıştırmayacak kadar değineceğim.Bir tabloyu <table> tagı ile tanımlayabilirsiniz. Tablodaki her satır için <tr>tagını ve her sütün içinde <td> tagını kullanıyoruz.<html>
  30. 30. 31 Musa ÇAVUŞ<head><title>Basit bir HTML Sayfasi</title></head><body><table border="1"><tr> <td>1. Satir, 1. Sutun</td> <td>1. Satir, 2. Sutun</td> <td>1. Satir, 3. Sutun</td></tr><tr> <td>2. Satir, 1. Sutun</td> <td>2. Satir, 2. Sutun</td> <td>2. Satir, 3. Sutun</td></tr></table></body></html>tablo.htmlŞekil10
  31. 31. 32 Musa ÇAVUŞĐlk <tr> taglı bölüme bakarsanız, üç tane <td> tagı kullandım. Tablonun ilksatırında üç tane sütun oluşturmuş oldum. Đkinci satır içinde üç sütunoluşturmak istediğim için, aynı şekilde üç tane <td> tagı kullandım. Sütunları</td> ile satırları ise </tr> ile kapatmalıyız. Son olarak tablonun bittiğinigösteren </table> tagını kullandım. Örnekteki border parametresi tablonunçerçeve kalınlığını göstermektedir. Ben 1 değerini verdim ki satır ve sütunlarıgörsel olarak ayırt edebilelim.div ve spanHTML’de bilmemiz gereken en önemli taglardır, çünkü CSS teknolojisi ile çokkullanıyoruz. <div> tagı ile HTML dokümanını bölümlere ayırabiliyoruz.<span> tagıylada metin bölümlerini ayırabiliyoruz Daha sonraki bölümlerde,özellikle CSS konusunda <div> ve <span> taglarıyla daha detaylı bir anlatımyapacağım.<html><head><title>Basit bir HTML Sayfasi</title></head><body><div style="background:red;height:100px;width:200px;"></div>Selam <span style="color:green">Ne Haber</span></body></html>divspan.html
  32. 32. 33 Musa ÇAVUŞŞekil11<div> tagı kullanarak kırmızı bölümü bir blok olarak HTML sayfasındaayırdım. <div> tagında style parametresini kullanarak bu bloğu boyadım,yüksekliğini ve genişliğini verdim. Bunu CSS bölümüne değindiğimde daha iyianlayacaksınız.<span> tagında da style parametresini kullanarak içerisinde bulunan kelimeninyeşil renk olmasını sağladım.HTML için bilmeniz gereken bu kadar. Sizi fazla sıkmadan hayattakullanabileceğiniz en önemli tagları anlattım. Gerçekten diğer tagları bilmenizegerek yok. Beyninize giden oksijeni gereksiz bilgilerle doldurmayın.2.2. XHTMLWeb ortamında XHTML uzundur varlık göstermesine rağmen, web sayfalarınınçoğu HTML dilini kullanmaktadırlar. Bunun nedeni HTML, hataları toleransgöstermesinden kaynaklanmaktadır. Aşağıdaki ilk örnek basit bir HTMLsayfasının kodudur, ikinci örnekse aynı kodu XHTML ile nasıl kodlandığınıgöstermektedir.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  33. 33. 34 Musa ÇAVUŞ<html><head> <title>Basit bir HTML sayfasi</title></head><body><h1 align=center>Web Sayfasina Hosgeldiniz</h1></body></html>htmlsayfa.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Basit bir XHTML sayfasi</title></head><body><h1 align="center">Web Sayfasina Hosgeldiniz</h1></body></html>xhtmlsayfa.xhtmlŞekil12
  34. 34. 35 Musa ÇAVUŞhtmlsayfa.html ve xhtmlsayfa.html dosyalarına tıkladığınızda Şekil12’deki aynıgörüntüyü görürsünüz. htmlsayfa.html dosyasına baktığımızda en üstte“<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">“ yazısını görüyoruz. Bu HTML 4.01 standartlarına göre doküman tipinibelirtmektedir. Şimdiye kadar böyle bir tanımlama kullanmamamıza rağmennasıl oldu da yazdığımız kodlarla HTML sayfalarımızı çalıştırabildik? HTMLbu gibi hatalara tolerans göstermektedir. Yine xhtmlsayfa.xhtml dosyasının enüstünde buna benzer bir tanımlama görüyoruz. XHTML’de bu tanımlamayıyapmaya mecburuz. Üstelik HTML tanımlamasına göre de biraz daha uzun. Đkidosya arasındaki ikinci farklılık <html> tagındaki farklılıktır. XHTML’deki<html> tagına xmlns parametresi eklenmiştir. Bu parametreyi, XHTMLkullanırken mecburen tanımlamak zorundayız. Kopyalama metoduyla ya dafarklı araçlarla bu satır otomatik olarak eklenebilir. XHTML’de mecburi olarak<head> ile tanımlanmış bir başlık kısmı ve <body> ile tanımlanmış bir gövdealanı olması gerekmektedir. Biz bunlara head ve body alanı diyoruz. Pencereninbaşlık kısmı olan <title> bile mecburi olarak tanımlanması gerekiyor. HTML dosyasında bu gibi mecburiyetler yoktur. <html> tagının altınabile metinler yazabilirsiniz ya da <title> bölümünü boş bırakabilirsiniz. HTMLbunların hepsine tolerans gösterecektir. XHTML’de ise bu gibi hatalara yerverilmemektedir.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Basit bir XHTML sayfasi</title></head><body><h1 align="center">Web Sayfasina Hosgeldiniz</h1></body></html>aloaloxhtml.html
  35. 35. 36 Musa ÇAVUŞŞekil13XHTML’de </html> tagından sonra “alo” yazdım ve XHTML buna toleransgöstermeyerek Şekil13’de gördüğünüz gibi bir hata mesajı iletti.XHTML’lerde parametre atamalarında da dikkat etmelisiniz. Tüm atamaları ""işaretleri arasına yapmanız gerekiyor. HTML’de böyle bir kısıtlamada yoktur.Dikkat etmeniz gereken bir başka nokta, XHTML’de büyüklük küçüklükyazmaları. Örneğin <H1>Baslik</H1> gibi bir kodlama XHTML’inizin hatavermesine sebep verecektir. XHTML’de tüm taglar kapatılması gerekiyor. HTML’de <br> çokkullanılır, bunu XHTML’de <br /> ya da <br> </br> şeklinde tanımlamalısınız.Görüldüğü gibi XHTML hiç bir noktada tolerans göstermemektedir. Bu daXHTML’in web dünyasında fazla tercih edilmemesini doğurmuştur.2.3. Hatasız web sayfasıHatalardan sonra web sayfamızın hatasız olduğunu nasıl anlarız diye bir sorugelebilir. Bunun için W3C yani HTML standartlarını belirleyen kurum bizimiçin bir sayfa geliştirdi. Sayfaya http://validator.w3.org adresindenulaşabilirsiniz.
  36. 36. 37 Musa ÇAVUŞŞekil14Address seçeneğine www.google.com yazarsanız ve Check düğmesinebasarsanız şöyle bir ekran çıktısı alırsınız:
  37. 37. 38 Musa ÇAVUŞŞekil15Şimdi diyebilirsiniz, google gibi dünyaca ün salmış bir firma nasıl olurdasayfasında 37 hata yapmış olabilir? Hemen sevinmeyin google amcanın hatasınıbulan ilk insanım diye. Oraya başka adresleri yazsanız hatalar olduğunugöreceksinizdir. W3C standartlarının o kadar önemli olmadığını buradangörebilirsiniz. http://validator.w3.org adresinde sisteminizde bulunan dosyaları daupload ederek kontrol ettirebilirsiniz. Yalnız bunun için Firefox eklentisi dahakullanışlıdır. Yapmanız gereken Web Developer’i Firefox ortamına yüklemekolacaktır. Firefox’unuzu açın ve Mönü kısmından Araçlar, daha sonra daEklentileri tıklayın.
  38. 38. 39 Musa ÇAVUŞŞekil16Çıkan pencerede arama kısmına “Web Developer” yazın ve Firefoxuygulamasına ekleyin düğmesini tıklayın.Şekil17
  39. 39. 40 Musa ÇAVUŞKurulum bittikten sonra Firefox yeniden başlatılacaktır. Araçlar->WebGeliştirici-> Çeşitli-> HTML denetle sekmesini tıkladığınızda sayfanız W3Csayfasına yönlendirilecektir ve bir denetleme yapılacaktır.Şekil182.4. Web sayfalarında Style Sheet kullanımıHTML’in durağan sayfalarına canlılık katabilmek için Style Sheet teknolojiniçok kolay sayfalarımıza entegre ederek kullanabiliriz. Style Sheet teknolojisininen büyük avantajı JavaScript gibi doğrudan HTML sayfasına kodlanabilmesidir.Yapılması gereken çok basittir, <style type=”text/css”> tanımlamasıyaptığımızda Style Sheet teknolojisini kullanabiliriz. Başka bir metot iseaşağıdaki gibidir:html><head> <title>CSS-Dosyasi</title> <link href="benimcss.css" type="text/css" rel="stylesheet"></head>
  40. 40. 41 Musa ÇAVUŞ<body><h1>Ates bacayi sarmis</h1><h1 class="a">Baca atesi sarmis mi?</h1><span class="b" id="b">Bu</span> <span class="b">da</span><i class="b">gecer</i>.<span id="b">Burada Span kullaniliyor</span><a href="http://www.google.com">Tikla</a></body></html>css1.htmlStyle Sheet’leri başka bir dosyada sakladığınızda o dosyanın adını “link” tagınıkullanarak “href” parametresinde tanımlayabilirsiniz. “type “ ve “rel”taglarınıda yukarıdaki örnekteki gibi tanımlarsanız benimcss.css dosyasınıHTML sayfanızda kullanabilirsiniz. Şu an böyle bir dosyamız olmadığı içinekran görüntüsü Style Sheet olmadan durağan bir görüntü verecektir.Şekil19Style Sheet kullanarak bu sayfayı canlandırmayı diğer bölümde anlatacağım.Style Sheet teknolojisinin birde üçüncü kullanım şekli vardır. Bunu daha öncekiörneklerimizde kullanmıştım. Kullandığımız HTML tagında “style” parametresiile Style Sheet teknolojisini kullanabiliriz.
  41. 41. 42 Musa ÇAVUŞ<html><body style="background:green;"></body></html>css2.htmlŞekil20Gördüğünüz gibi “style” parametresinde Style Sheet dilini kullandım vetarayıcının arka planının yeşil göstermesini sağladım. Bu tür kullanımlar çokbasittir fakat tavsiye edilmiyor, çünkü CSS kullanımdaki avantajlarıkullanmamış oluyorsunuz. CSS’teki en büyük avantaj HTML yapısını vegörselliği ayırmasıdır. Bunu bir sonraki bölümde daha iyi anlayacağız.2.5. CSS
  42. 42. 43 Musa ÇAVUŞCSS (Cascadıng Style Sheets) web tasarımcıların işini çok kolaylaştırmaktadır.JavaScript ile CSS’i kombine ettiğinizde büyük avantajlar elde etmiş olursunuz.CSS ile web sayfasındaki görünümler genelleştiriliyor. Bunu yapabilmeniz içinCSS’i anlamanız gerekiyor. Ben burada CSS konusuna kısa değinmekistiyorum, çünkü kitabımızın konusu CSS değil fakat JavaScript ile kullanımınıgösterebilmek için CSS’e kısa bir giriş mutlaka yapılması gerekmektedir.Alışılmışın dışında biraz geniş bir açıklama yapmak istiyorum. Lütfen iyiokuyun ve doğru uygulayın, çünkü bu bölümde verilen bilgiler önemlidir. Enazından CSS nasıl çalışıyor onu bilseniz bile diğer bölümlere geçebilirsiniz.<html><head><title>CSS</title></head><style type="text/css"><!-- h1, h4 { background : pink; } h1.a { color : purple; } .b { font-size : 49px; visibility : hidden; } #b { background : #aa1611; } *{ background : #a06611; } a:hover{ background : #007011; } a{ color : #ffffff; text-decoration : none;
  43. 43. 44 Musa ÇAVUŞ }--></style><body><h1>Ates bacayi sarmis</h1><h1 class="a">Baca atesi sarmis mi?</h1><span class="b" id="b">Bu</span> <span class="b">da</span><i class="b">gecer</i>.<span id="b">Burada Span kullaniliyor</span><a href="http://www.google.com">Tikla</a></body></html>css3.htmlŞekil21CSS kullanarak daha önceki web sayfamızın birden nasıl canlılık kazandığınıŞekil21’de görüyorsunuz. css3.html dosyasındaki CSS bilgisini anlarsanız,
  44. 44. 45 Musa ÇAVUŞkitaptaki CSS ile JavaScript örneklerini anlamış olursunuz. CSS’te mantık çokbasittir, önce değiştirmek istediğimiz alanı belirtiriz, sonra “{}” parantezleriiçerisinde bu alanlarla ne yapmak istediğimizi tanımlarız. h1 ve h4 alanlarındabir tanımlama yapabilmek için “h1, h4” yazarız. Bu kısma selektör deniliyor.Örnekte h1 ve h4 alanlarının arka plan rengini değiştirmek istediğim için“background” tanımlaması yaptım. Đki nokta üstü üste “background”tanımlamasına iki nokta üst üsteden sonra yazdığım değeri atamaktadır. Noktalıvirgülle bir tanımlamayı bitirmiş oluyoruz. Lütfen eşittir işareti yerine iki noktaüst üste kullanıldığına dikkat edin. Bazı tarayıcılar eşittir işaretini kabul ettikleriiçin bu hataya düşebilirsiniz ve eşittir işaretini kabul etmeyen bir tarayıcı ilekarşı karşıya kaldığınızda hatanın nereden kaynaklandığını bulamayabilirsiniz.Selektör tanımlamalarının içerisinde kullanılan tanımlamalar aslında kendiniaçıklayıcı bir nitelik taşımaktadır. Örnekte kullandığım, “font.size”,Đngilizceden tercüme edersek yazı tipi büyüklüğü anlamına gelir. “visibility”görünürlük manasını taşır. “color” renk demektir. Bu anlamlar doğrultusunda dasayfamızda değişiklikler olmaktadır. “h1.a” değişken selektörüdür. HTML kodunda “<h1 class=”a”...” olaraktanımlanan bölgeye bu değişken selektörü hükmetmektedir. “h1” HTMLtagında “class” parametresini kullanarak “h1.a” değişken selektöründekitanımlamaların burada uygulanmasını bu şekilde sağlamış olduk. “.b” gibiselektörler “class” parametresinin değeri “b” olan tüm HTML tagları işlemgörür. Bizim örneğimizdeki <span> ve <i> tagında olduğu gibi. Başka birselektör şeklide “#” ile başlayan selektörlerdir. Bu selektörler, HTML taglarında“id” parametresi kullanılan taglarla işlem görmektedirler. “*” selektörü HTMLtaglarında kısıtlama getirilmiyorsa hepsi için geçerlidir. Çok ilginç birselektörde “a:hover” selektörüdür. Fare ile çıkan web sayfasında “Tıkla”kelimesinin üzerine geldiğinizde renginin yeşil olduğunu göreceksinizdir. Ek birprogramlama yapmadan ve sadece CSS tanımlaması kullanarak bu özelliği websayfanıza katabiliyorsunuz.Firefox’unuza kurduğunuz Web Geliştiricisindeki CSS’le ilgili yardımınızakoşacak bir çok özellik vardır. Benim tavsiyem bunları tıklayarak bir bakış açısıelde etmenizdir. Araçlar->Web Geliştirici->CSS Hata yok->CSS’yi Düzenleseçeneğini seçtiğinizde, canlı olarak yaptığınız tüm değişiklikleri sayfanızdagörebiliyorsunuz.
  45. 45. 46 Musa ÇAVUŞŞekil212.6. XMLWeb sayfaları için XML öğrenmenin ne anlamı olduğunu düşünebilirsiniz.Birincisi XHTML kullanıyorsanız, XML hakkında bilgi sahibi olmalısınız.XHTML için XML öğrenmek gerekiyorsa XHTML kullanmam olur biterdiyebilirsiniz. Fakat web sayfalarını programlarken orada şurada XML ile ilgilimutlaka bağlantıya geçeceğiz, çünkü sistemler aralarındaki iletişimi XML ilegerçekleştiriyorlar. Bunun için XML temellerini bilmemiz gerekmektedir. Basitbir XML örneği verecek olursak şu şekildedir:<?xml version="1.0" encoding="UTF-8"?><websayfasi><sayfa><baslik>Musa Cavus</baslik><url>http://www.musa-cavus.com</url><aciklama>Kisisel Sayfa</aciklama></sayfa><sayfa><baslik>Google Amca</baslik><url>http://www.google.com</url><aciklama>Googlenin Ingilizce sayfasi</aciklama>
  46. 46. 47 Musa ÇAVUŞ</sayfa></websayfasi>websayfasi.xmlBu dosyayı Firefox ile açmaya çalışırsanız şöyle bir görüntü elde edersiniz:Şekil22XML’de, XHTML’de olduğu gibi kurallara uymak vardır, tolerans yoktur.Kurallara uyulmazsa dokümanınız XML dokümanı olmaktan çıkar. XMLdokümanının XHTML’den farkı tagların daha önceden belli olmamasıdır. XMLdokümanında taglarda istediğiniz kelimeyi kullanabilirsiniz. websafaysi.xmldokümanını size farklı bir şekilde göstermek istiyorum. Bunun içinFirefox’unuza ilk önce DOM Inspector Plugin’ini kurmalısınız. Firefox’unuzadaha önce Web Developer’i eklemiştik ve görsel olarak nasıl eklendiğinigöstermiştim. DOM Inspector’uda aynı şekilde arattırın ve Firefoxuygulamanıza kurun. Kurma işlemi bittikten sonra Araçlardan “Dom Inspector”sekmesini tıklayın.
  47. 47. 48 Musa ÇAVUŞŞekil23DOM Inspector ile XML dokümanını incelediğimizde, bu yapının bir ağacabenzediğini görürüz. Kök, düğümler ve yapraklar vardır. Düğümlere XMLdilinde “node” deniliyor. JavaScript içerisinde “node” objesini sıklıklakullanacağız. XML dokümanı Firefox ile normal açtığımızda ağaç yapısını gördük.Bunu Firefox bize bir metin satırı olarak iletmişti. XML dokümanına stilbağlarsak HTML sayfası olarak görebiliriz. Bu stillerden birisi CSSteknolojisidir.<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="websayfasi.css" type="text/css" ?><websayfasi><sayfa><baslik>Musa Cavus</baslik><url>http://www.musa-cavus.com</url><aciklama>Kisisel Sayfa</aciklama></sayfa><sayfa><baslik>Google Amca</baslik>
  48. 48. 49 Musa ÇAVUŞ<url>http://www.google.com</url><aciklama>Googlenin Ingilizce sayfasi</aciklama></sayfa></websayfasi>websayfasi1.xmlXML dokümanına bir CSS dosyasını bağlamak çok kolaydır. Yukarıda “<?xml-stylesheet” ile başlayan satırda “href” parametresine CSS dosyasınıbelirtiyorsunuz, o kadar. Ben örnek bir CSS dosyası tanımladım:*{ background-color: #11ff55;}sayfa { display: block; width: 300px; height: 180px; background-color: rgb(55, 215, 151); font-size: 17px; text-align: center; display: block; }baslik { display: block; background-color: rgb(251, 255, 255); color: blue;}aciklama { display: block; background-color: rgb(125, 60, 235);} websayfasi.cssDoküman XML olduğu için etkilemek istediğiniz tagıın adını selektör kısmınayazmanız yeterlidir. Mesela “sayfa” tagının ekrandaki görünümü için selektörolarak “sayfa” yazdım ve “{}” parantezlerinin arasına o bölüm ile ilgili görseltanımlamaları verdim. Tanımlamaları açıklamıyorum, çünkü CSS ile ilgilitanımlamalar, fakat isimlerinden ne işe yaradığını anlayabilirsiniz.
  49. 49. 50 Musa ÇAVUŞwebsayfasi1.xml dosyasına çift tıkladığınızda tarayıcınız şöyle bir sayfagösterecektir:Şekil24Bu sayfayı bir de DOM Inspector ile incelemek istiyorum. DOM, HTMLdokümanındaki ağaç yapısına verilen addır. DOM ağacıda diyebilirsiniz.
  50. 50. 51 Musa ÇAVUŞŞekil24Bir öncekinden farkı üst tarafında “xml-stylesheet” yazması gibi gelebilir fakatöyle değildir. “Document” yazan yazının yanındaki şekle tıklayın ve oradan“Stylesheet” sekmesini seçin. Sağ tarafta CSS dokümanında kullandığınızkuralları göreceksiniz. Sağ taraftan “sayfa” seçeneğini seçerseniz şu görüntüyüelde edersiniz:
  51. 51. 52 Musa ÇAVUŞŞekil25Analizler için DOM Inspector biçilmiş kaftandır. Örneğin “background-color”seçeneğine çift tıklayın ve “Edit Style Rule” penceresine “rgb(99, 215, 15)”değerini girin. Göreceksiniz ki “Tamam” düğmesine basar basmaz tarayıcınızyeni değerlere göre websafaysi1.xml dokümanını gösterecektir.
  52. 52. 53 Musa ÇAVUŞ Bölüm 3JavaScript Kullanımı
  53. 53. 54 Musa ÇAVUŞ3.1 DeğişkenlerDeğişkenler, ana hafızada programın çalışma esnasında değerleri saklayanalanlardır. Saklanan alanlara, değerleri, eşittir işareti ile atayabiliyoruz.Değerleri de daha önce tanımladığımız değişken ismiyle çağırabiliyoruz.JavaScript programcısı veri tipiyle ilgilenmez, çünkü JavaScript bu işlemiotomatik yapmaktadır. Bunun avantajı olduğu gibi çok büyük dezavantajı davardır.<html><body><script language="JavaScript"> benimDegiskenim = 21; alert(benimDegiskenim); benimdegiskenim = 213; alert(benimDegiskenim);</script></body></html>veritipidezavantaj.htmlŞekil26veritipidezavantaj.html dosyasını çift tıkladığınızda ekrana iki defa 21 sayısınıngeldiğini göreceksiniz. benimDegiskenim değişkenine 21 atadık sonra alert()fonksiyonuyla bu değişkeni parametre olarak verdik. Daha sonrabenimdegiskenim değişkenine 213 atadık ve alert() fonksiyonuylabenimDegiskenim değişkenini parametre olarak vermemize rağmen nedenekranda ikinci defa 21 sayısı gözüktü dersiniz? Bunun nedeni JavaScript’inbüyüklük küçüklük yazımına dikkat etmesidir. Đkinci değişkeni tanımlarken “d”harfini küçük yazdık. Tip tanımlaması yapmadığımız için yazım hatası
  54. 54. 55 Musa ÇAVUŞgözümüzden kaçtı. Özellikle büyük JavaScript programlarında bu tür hatalarınolma olasılığı çok yüksektir. JavaScript’te satır kodlaması “;” yani noktalı virgül ile biter. alert()fonksiyonu, parametre olarak verilen değeri ekranda Şekil26’da gördüğünüz birpencere stilinde gösterir.var tanımlaması<html><body><script language="JavaScript"> degisken = 5.67; alert(61 * degisken); degisken = 234 /119; a = "abc"; var b = true;</script></body></html>veritipleri.htmlŞekil27JavaScript’te değişkenlere istediğimiz değerleri atayabildiğimizi gördük.Değişken atamalarında veritipleri.html örneğindeki gibi matematiksel işlemleryaparak bunları gerçekleştirebiliriz. “var” tanımlamasına ne gerek vardenilebilir. “var” tanımlaması bir değişkenin değişken olduğunu tanımlar. “var”kullanılmadan yapılan tüm değişken tanımlamaları JavaScript dünyasında geneldeğişken olarak algılanır. Mesela fonksiyon içerisinde “var” sözcüğükullanılmadan yapılan bir tanımlama o değişkenin genel bir değişken olduğunugösterir. Başka programlama dillerinde bu böyle değildir, fonksiyon içerisindeyapılan tanımlamalar sadece fonksiyon içerisinde kalmaktadır. “var”
  55. 55. 56 Musa ÇAVUŞsözcüğüyle bunu değiştirebiliyoruz ve değişkenin sadece fonksiyona aitolduğunu söylemiş oluyoruz.3.2 Diziler (Arrays)Diziler, JavaScript’te zor konular kategorisinde yer alır. Ben doğru anlatılırsazor olmayacağı inancındayım. Ayrıca diziler size büyük kolaylıklarsağlamaktadır ve rutin olan işlemleri döngüler eşliğinde halledebilirsiniz. Dizi,bir çok veri tipinin bir değişkende tutulması ve verilere bir indeks ile erişimsağlanan mekanizmadır. Ufak bir kod ile dizileri anlatmaya başlamak istiyorum:<html><body><script language="JavaScript">dizi = new Array();document.write(dizi[0]);dizi[0] = 5;document.write(dizi[0]);dizi[0] = "Kalem";document.write(dizi[0]);</script></body></html>diziler1.htmlŞekil28
  56. 56. 57 Musa ÇAVUŞJavaScript’te bir değişken tanımlarken bir isim ve eşitlik işaretinin sağ tarafınadeğerini yazarız. Dizilerde ise bu böyle değildir. Değişken adını yazdıktan sonraeşitliğin sol tarafına “new Array()” yazarak bunun bir dizi olduğunu belirtmişoluruz. Anahtar kelime burada “new” kelimesidir. Array() ise bunun bir dizinesne olduğunu gösteriyor. Bu satırlar, Array tipinden yeni bir nesne oluşturdenilmek istenildi. Nesneleri daha sonra anlatacağım, o yüzden aman ben nesnenedir bilmiyorum diye korkmayın. Hepsini öğreneceksiniz.document.write() fonksiyonu tarayıcıya bir metin yazmak istediğinizdekullanacağınız bir fonksiyondur. Parametre olarak verilen metin tarayıcıdagösterilmektedir. dizi değişkenli dizimizi oluşturduktan sonra ben dizinin ilkelemanına “5” değerini atadım. Bunu yaparken dizi değişkeninin hemenardından bir köşeli parantez açtım ve “0” yazarak köşeli parantezi kapattım.JavaScript’te diziler sıfırdan başladıkları için ilk değeri sıfırıncı elemanakoyabiliyorsunuz. JavaScript’te bir değişkene istediğiniz tipte bir değeratayabildiğiniz için daha sonraki satırlarda dizi dizisinin ilk elemanına “Kalem”değerini atadım ve tarayıcının göstermesini sağladım.Döngülere diğer konularda değineceğim fakat dizilerin bir avantajınıgösterebilmek için döngülerden yararlanmak istiyorum. Şimdilik sadece döngüiçerisinde dizinin nasıl kullandığını anlasanız yeterli olur.<html><body><script language="JavaScript"> a = new Array(10); a[0] = 1; a[1] = 2; alert(a.length); i = 0; while(i < a.length) { document.write(a[i] + "<br>"); i++; }</script></body></html>diziler2.html
  57. 57. 58 Musa ÇAVUŞŞekil29Şekil30“a” dizisininin boyutunu “new Array(10)” tanımlamasında parantez içerisine“10” değerini yazarak onluk bir dizi olarak ayarlayabiliyorsunuz. Daha sonradizinin birinci elemanına “1” değerini atadım ve ikinci elemanına “2” değeriniatadım. length() fonksiyonu dizinin boyutunu sayısal olarak vermektedir. Bizimörneğimizde bu değer 10’dur, çünkü dizinin boyutunu 10 olarak ayarlamıştık.Ekrana alert() fonksiyonuyla önce dizinin boyutu olan 10 getirilmektedir.Tarayıcı ise dizinin ilk iki değeri atandığı için atanan sayıları göstermektedir.Dizinin diğer elemanlarına değer atanmadığı için “undefined” yazısıgelmektedir. Yani tanımlı değil yazısı gelmiştir. JavaScript kodunda “a[20]=10” gibi bir tanımlama yapsaydık dizininboyutu, ilk başta 10 olarak tanımlamamıza rağmen 21 olacaktı.
  58. 58. 59 Musa ÇAVUŞ<html><body><script language="JavaScript"> a = new Array(10); a[0] = 1; a[1] = 2; a[20] = 21; alert(a.length); i = 0; while(i < a.length) { document.write(a[i] + "<br>"); i++; }</script></body></html>diziler3.htmlŞekil31
  59. 59. 60 Musa ÇAVUŞŞekil32Buradan şunu anlıyoruz, bir diziye atama yaparsak boyutunu büyütmüşoluyoruz.3.3 OperatörlerJavaScript dilinde diğer dillerde olduğu gibi operatörler mevcuttur. Ben bunlarıbu bölümde yüzeysel olarak göstereceğim ve diğer konularda örneklerderinleştikçe operatörleri kullanarak daha geniş açıklamalar yapacağım. Buradasadece operatörlere değineceğim.
  60. 60. 61 Musa ÇAVUŞAtama operatörüBir değişkene değer atamak isteniliyorsa atama operatörü kullanılır. Đşlem “=”işaretiyle yapılır.Büyük, küçük ve eşitlik operatörleriBunlar çok kullandığımız operatörlerin başında gelir. Đleride de göreceğimizgibi if cümleciklerinde genellikle bunları kullanırız. Đnsan zihniyetine deyatkındır. Hani ufak çocuklara deriz, oğlum sen büyünce araba kullanabilirsinşimdi kullanmazsın. Burada çocuğun beyninde ben büyük isem araba kullanırımoluşuyor. if cümlesine fazla girmek istemiyorum, fakat ufak birkaç örnekverirsek bu operatörler beyin hücrelerimize daha iyi yerleşmiş olur.<html> <body> <script language="JavaScript">abi = 34;abla = 32;ben = 25;if (abi > 17) {document.write("Abim araba surebilir");document.write("<br>");}if (abi >= 18) {document.write("Abim araba surebilir");document.write("<br>");}if (abla < abi) {document.write("Ablam, abime abi diyecek");document.write("<br>");}if (ben == 15) {document.write("Ben en ufagim");document.write("<br>");}if (ben != 18) {document.write("Ben araba suremem");document.write("<br>");}
  61. 61. 62 Musa ÇAVUŞ</script></body></html>operatorler1.htmlŞekil33if cümlecikleri genellikle kıyaslama yapmak içindir, bu konuya sonra parmakbasacağız. Bizim bu konuda öğrenmek istediğimiz operatörlerdir. Đlk ifcümlesinde diyoruz ki eğer ağabeyim 17 yaşından büyükse araba sürebilir.17’den sonra gelen tam sayı 18 olduğu için ve biz abi değişkenini tam sayıolaraktanımladığımız için bu önerme doğru olmuş oluyor. Đkinci cümlecikte diyoruzki eğer ağabeyim 18 yaşından büyük ya da eşitse o zaman araba sürebilir. 18yerine 17 koysaydık, eşitlik dolaysıyla ağabey değişkeni 17 olsa bile bu önermedoğru olmuş olurdu, fakat biz biliyoruz ki araba sürmek için 18 yaşında olmakgerekiyor. Üçüncü cümlede ablam ağabeyimden küçükse ablam ağabeyimeanadoludaki geleneğe göre abi demesi gerekiyor. Gerçi şimdilerde yavaş yavaşbu siliniyor, güç, kuvvet ve para kimdeyse ona abi abla deniliyor, fakat bubizim konumuzun dışında. Dördüncü cümlede ben 15 yaşındaysam ufağım diyebir mesaj çıkıyor. Dikkat edilmesi gereken, “= = “ şeklinde bir operatörkullanılmıştır.Kıyaslamalarda “= = “ kullanılır, aktarmalarda “=” kullanılır. Birindeçift diğerinde tek eşittir operatörü kullanılır. Son cümlede ise ben 18 yaşındadeğilsem araba süremem ifadesinin JavaScript dünyasındaki şekli sunulmuştur.Eşit değil JavaScript’te görüldüğü gibi “!=” şeklinde ifade edilmektedir.
  62. 62. 63 Musa ÇAVUŞBir de && ve || operatörleri çok kullanırız, fakat bunlarda if cümleciklerindeanlatacağım. Diğer bazı operatörleri de örneklerde yeri geldiğince, ihtiyacagöre değineceğim. Operatör tablosunu da fikir edinmeniz açısından ve ihtiyaçduyulduğunda bakılması için aşağıda sunuyorum:Operatör Açıklama++, -- artırma, eksiltme+, - toplama, çıkartma~ bit tümleme! logik tümleme*, /, % çarpma, bölme, kalan+ Metinleri birleştirme<< sola kaydırma>> sağa kaydırma<, <=, >, >= nümerik eşitleme= =, != eşitlik, eşit değil& bit düzeyinde ve işlemi^ bit düzeyinde xor| Bit düzeyinde veya işlemi&& logik ve işlemi|| logik veya işlemi= atama işlemiAritmetiksel operatörlerSayısal değerler arasında hesaplamalar yapabilmek için aritmetikseloperatörlere ihtiyaç duyarız. Toplama işlemi “+”, çarpma işlemi “*”, çıkarmaişlemi “-“, bölme işlemi “”, modül işlemi “%” işaretleriyle yapılmaktadır.Ayrıca özel aritmetiksel operatörlerde kullanılabilinmektedir.JavaScript’te, operatörlerle farklı kombinasyonlu işlemlerde yapabilirsiniz.a+= 2 dediğinizde, a = a + 2 gibi bir işlem gerçekleştirmiş oluyorsunuz. Buradaa değişkeni 2 değer artırılmaktadır. Ayrıca JavaScript parantezleri otomatikolarak uygulamaktadır. Örneğin a *= 3 + 5 dediğimizde Java bunu içinde şuşekilde çevirmektedir:a = a * (3 + 5)Değişkenleri artırmak ve eksiltmek programcının en çok yaptığı işlemlerdenbiridir. Eğer biz birer sayı artırmak ya da azaltmak istiyorsak JavaScriptkardeşler bizi düşünerek bizim için bir kolaylık sağlamışlar. Aslında bukolaylığı C dünyasından gelenler için olduğunu da düşünebiliriz.i++; i = i + 1 anlamına gelmektedirj--; j = j – 1 anlamına gelmektedir
  63. 63. 64 Musa ÇAVUŞArtırma ve eksiltme işlemlerinde çoğunlukla i ve j harfleri kullanılmaktadır.Hangi nimete hikmet böyle yapılıyor, bunu bende bilmiyorum. “++” ve “--“kullanılırken dikkat edilmesi gereken nokta, bu işaret kombinasyonunudeğişkenden önce mi sonra mı kullandığımızdır. Bu işaretleri değişkenden öncekullanırsak, değişkendeki değer önce değişir ve değişken, o değer ile işlemgörür. Sonra kullanırsak tam tersi olur. Gördüklerimizin hepsini bir örnek iledaha iyi pekişeceğinin kanısındayım.<html><body><script language="JavaScript"> i = 340; j = 10; document.write(++i); document.write("<br>"); document.write(++j); document.write("<br>"); document.write(i); document.write("<br>"); document.write(j); document.write("<br>"); document.write(i+j); document.write("<br>"); document.write(i---++j);</script></body></html>operatorler2.html
  64. 64. 65 Musa ÇAVUŞŞekil34Mantıksal OperatörlerBirden çok şartı tanımlanmış kalıplar doğrultusunda bağlamak istiyorsanızbu operatörleri kullanmanız gerekmektedir. Örneğin 8 ve 11 ile bölünen sayılarıbulmak istedğimizde ya da birden fazla şartı birbirine bağlamak istediğimizd buoperatörleri kullanırız. Java’da mantıksal operatörler olarak şunlar vardır: &(Ve), | (Veya) , ^ (Xor), ! (Değil).Xor: Đki tanımlamada true ya da i false ise bu işlem bize false sonucu verir.Diğer durumlarda true değerini iletir.Ve: Tanımlamalardan birisi false ise sonuç false olur. Diğer durumlardatrue.Veya: Tanımlamalardan birisi true ise, sonuç true olur. Diğer durumlardafalse.Değil: Tanımlamanın tersidir.Ve ve Veya işlemlerinde derleyici birinci tanımlamayı göz önüne alır. Meseladiyelim iki tanımlama var ve biz bunlarla bir Ve işlemi gerçekleştiriyoruz.Şöyle ki: false & true. Açıklamamıza göre Ve işlemlerinde tanımlamalardanbirisi false ise sonuç false olacaktır.<html><body><script language="JavaScript">document.write(true | false);document.write("<br>");document.write(true & false);document.write("<br>");document.write(!false);document.write("<br>");document.write(true ^ false);document.write("<br>");document.write(1 | 3);document.write("<br>"); </script>
  65. 65. 66 Musa ÇAVUŞ </body> </html>operatorler3.htmlŞekil35true ve false işlemi Veya işlemine sokulunca sonuç true oluyor. true vefalse Ve işlemine sokulunca sonuç false oluyor. false değerinin değili trueolmuştur. true ve false Xor işleminden geçtiğinde şartımıza göre true sonucunuvermektedir. 1 ile 3 sayılarını Veya işleminden geçirince neden 3 olmaktadır? 1sayısı, 2 tabanlı sayı sistemine göre “01” şeklinde ifade edilir.3 sayısıda, “11”şeklinde ifade edilir. 0 bilgisayar dilinde false, 1 ise true değerini alır. Böylece1, sayısını “false true” şeklinde hayalımizde düşünecek olursak, 3 sayısını “truetrue” olarak düşünebiliriz. 1 sayısındaki ilk değer olan false ile 3 sayısındaki ilkdeğer olan true değerlerini Veya işleminden geçirdiğimizde true değerinialacağız. Yine 1 sayısındaki true değeriyle, 3 sayısındaki ikinci değer olan truedeğerini Veya işleminden geçirecek olursak sonuç true olacaktır. Yani 1 ile 3sayısının Veya işleminden bize “true true” gibi bir ifade çıkacaktır. Bununsonucu “11” olacaktır. “11” olan ikilik sayı sayı sistemini 10 tabanındaki birsayı sistemine çevirecek olursak bize 3 rakamını verecektir. “|”, “&” ve “^“işlemleri bit işlemleri olduğu için dikkat ettiyseniz true ve false işlemlerinde “1”ya da “0” sonucu oluşmaktadır. “1” true “0” ise false demektir.Nasıl mantık operatörlerini öğrenerek mantığınız alt üst oldu mu? Ve ve Veyaişlemi bilgisayar dünyasının temellerinden biridir. Yalnız şu da bir gerçek bitişlemleri için ben şimdiye kadar hiç bir program yazmadım, sizdeyazmayacaksınız diye düşünüyorum. Peki niye anlatıyorum bunları, dedim yayeşillik olsun ve JavaScript’e ısınalım. Diyelim ki siz bir boksörsünüz ve
  66. 66. 67 Musa ÇAVUŞısınmadan dalıyorsunuz rakibinize, kaslarınızda mutlaka bir incinme meydanagelecektir. Bende şimdi hemen dalsam derin konulara sizinde beyinhücrelerinizde bir incinme meydana gelecek. Zaten farkına vardıysanız birkonuyu fazla saçmalamıyorum, sadece gerektiği kadar anlatıyorum. Banagüvenin.3.4. AçıklamalarJavaScript kodlarınızda iki şekilde açıklama yapabilirsiniz. Birincisi “//” işaretikullanarak sadece o satırda geçerli olmak şartıyla yapabileceğiniz açıklamalar.Açıklamaların ikinci şekli “/* */” aralığında yapılmaktadır. Bu açıklama türüyledaha çok satırda açıklama yapabilirsiniz ve her satır için “//” işaretitanımlamanız gerekmemektedir.<html><body><script language="JavaScript">// Bu bir aciklamadir/*document.write(4);document.write("<br>");*/ </script> </body> </html>aciklama.html3.5 if ve switch karar yapılarıBu karar yapılarıyla programımızın akışını değiştirebiliriz. if, Türkçe olarak“eğer” demektir. Programınızı kodlarken, programınıza “eğer şu olursa şunuyap” gibi direktif vermek isteyebilirsiniz. JavaScript’te bunu yapabilmeniz için“if” ya da “switch” karar yapılarını kullanabilirsiniz. Döngülerinde kendilerineözgü karar yapıları vardır, fakat bunu döngülerde ele alacağım.if komutuylailgili kolay bir örnekle başlamak istiyorum:
  67. 67. 68 Musa ÇAVUŞ<html> <body> <script language="JavaScript"> a = 9; if (a < 10) { document.write("a degiskeni 10 sayisindan kucuk"); document.write("<br>"); } if (a > 10) { document.write("a degiskeni 10 sayisindan buyuk"); document.write("<br>"); } if(a != 20) { document.write("a degiskeni 20 sayisina esit degil"); document.write("<br>"); } </script> </body> </html>if.htmlŞekil36
  68. 68. 69 Musa ÇAVUŞif yapısı çok basittir, öncelikle “if” yazıyoruz sonra bir parantez açıyoruz,parantezin içerisine büyüklük, küçüklük veya eşitlik operatörü kullanılan birkıyaslama ifadesi yazarak parantezi kapatıyoruz. Kıyaslama doğruysa “{}”arasında olan blok işlem görüyor, yanlış ise “{}” arasındaki blok işlemgörmüyor. if yapısından sonraki blok tek satırlık bir kod ise “{}” parantezlerinikoymaya gerek yok, birden fazla satırsa mutlaka “{}” parantezlerinikullanmalıyız. Örnek “a” değişkenine “9” değerini atadım. “10” sayısından küçük mübüyük mü onu kontrol ettim. En sonunda da “20” sayısına eşit değil mi onukontrol ettim. Çoğunlukla if yapısı, else yapısıyla birleştirilir. “else” Türkçeolarak “değilse” manasını taşımaktadır. “Eğer ….. yap, değilse ….. yap” gibidüşünebilirsiniz. Daha da genişleterek, “Eğer ….. yap, değilse eğer ….. yap,değilse …. yap” şeklinde de bir yapı genellikle kullanılmaktadır.<html> <body> <script language="JavaScript"> a = 9; if (a < 10) { document.write("a degiskeni 10 sayisindan kucuk"); document.write("<br>"); }else if (a > 10) { document.write("a degiskeni 10 sayisindan buyuk"); document.write("<br>"); }else { document.write("a degiskeni 20 sayisina esit"); document.write("<br>"); } </script> </body> </html>ifelse.html
  69. 69. 70 Musa ÇAVUŞŞekil37Birinci blokta “a” değişkeninin “10” sayısından küçüklüğünü kontrol ettim.Đkinci blok, eğer birinci if karar yapısı işlem görmediyse “else if” yani “değilseeğer” şeklinde işleme giriyor ve “a” değişkenini “10” sayısından büyüklüğünükontrol ediyor. Son blok ise, ilk iki blok işlem görmediyse “else” yani “bunlarınhiçbiri doğru değilse” işleme giriyor. Birden çok kıyaslama işlemini birleştirmek istersek yardımımıza “&&”ve “||” işaretleri koşmaktadır.<html><body><script language="JavaScript"> a = 9; if (a < 10 && a > 5) { document.write("a degiskeni 10 sayisindan kucuk"+ " ve 5 sayisindan buyuk"); document.write("<br>"); } if (a > 10 || a < 20) { document.write("a degiskeni 10 sayisindan buyuk"+ " ya da 20 sayisindan kucuk"); document.write("<br>"); } </script> </body> </html>ifbirlestir.html
  70. 70. 71 Musa ÇAVUŞŞekil38“&&” işareti iki kıyaslamanın arasına “ve” bağlacı koymaktadır. “a” değişkeni“10” sayısından küçükse “ve” “5” sayısından da büyükse bloktaki işlemi yapdenilmektedir. “||” işareti iki kıyaslama arasına “ya da” bağlacı koymaktadır.“a” değişkeni “10” sayısından büyük “ya da” “20” sayısından küçükse sıradakiblok işlem görmektedir. Bu şekilde birden fazla kıyaslamayı aynı if kararyapısına dahil edebiliyorsunuz.if karar yapısını mutlaka iyi anlayın, çünkü insan beynide buna göredüşünmektedir ve karalarını vermektedir.switch“switch” işlemi,” if” işlemine bir alternatiftir. Bazı durumlarda “switch”kullanmak daha kolaydır. Açık söylemek gerekirse ben şimdiye kadar hiçkullanmadım, sadece kullanan kişilerin kodlarında değişiklik yapacağımdakullandım.<html><body><script language="JavaScript"> a = 1; switch (a) { case 0 : document.write("0" + "<br>"); break; case 1 : document.write("1" + "<br>"); break; case 2 : document.write("2" + "<br>"); break; case 3 : document.write("3" + "<br>");
  71. 71. 72 Musa ÇAVUŞ break; default: document.write("4" + "<br>"); } </script> </body> </html>switch.htmlŞekil39JavaScript, switch ile başlayan cümlelerde sırayla tüm case bloklarınıtaramaktadır. Eğer uyan bir case bulursa, bu bloğun içerisindeki kodu breakifadesini buluncaya kadar işleme sunmaktadır. break ifadesini kullanmazsak, birsonraki case bloğu otomatikman işlem görmektedir. Bir sonraki case ifadesinindoğru ya da yanlış olması bu durumda hiç önemli değildir. switch işlemlerininif karar yapısına göre en büyük dezavantajı esnek olmamasıdır ve sadece tek birdeğeri kıyaslamasıdır. Mesela if karar yapısında bir değişken aralığını kontroledebilirken switch yapısında böyle bir olanağınız yoktur. 1 ile 100 arasındakitüm sayıların bir değişkenden küçük mü değil mi olduğunu kontrol edebilmekiçin switch yapısında aralıkta bulunan tüm sayıları kod halinde teker tekeryazmalısınız.JavaScript’te diğer programlama dillerinden farklı olarak switch kararyapılarında dizgiler ya da başka bir tabirler String kullanabilirsiniz.<html><body><script language="JavaScript"> a = "Veli"; switch (a) { case "Ali" : document.write("Ali" + "<br>"); break; case "Veli" : document.write("Veli" + "<br>"); break;
  72. 72. 73 Musa ÇAVUŞ case "Selami" : document.write("Selami" + "<br>"); break; case "Hayri" : document.write("Hayri" + "<br>"); break; default: document.write("Isimsiz Kahraman" + "<br>"); } </script> </body> </html>switchdizgi.htmlŞekil403.6 DöngülerBakın bu da çok önemli bir konudur. Döngüler belirli kodları tekrarlayarakişleme sunarlar. Bir döngü, blok içeriği ve önermeden oluşur. Döngü önermesi,döngünün ne kadar süreceğini belirtir.while döngüsüwhile döngüsüne girilmeden önce, döngü önermesi kontrol edilmektedir.Eğer döngü önermesi doğru ise, döngü bloğu işlenmektedir, değilse döngü sonaerdirilmektedir. if önermelerinde olduğu gibi döngü önermesi true olmalıdır.<html><body><script language="JavaScript">i = 0;while(i < 10) { document.write(i + "<br>"); i++;}
  73. 73. 74 Musa ÇAVUŞ</script></body></html>while.htmlŞekil41while döngüsünde, önermeyi while yazdıktan sonra parantez açıyoruz veparantezin içerisine kodluyoruz. Önerme true değerini alıncıya kadar döngüdönüyor. Örnekte i değişkenine 0 değerini atadım ve while döngüsündekiönermeye, i değişkeni 10 sayısından ufak mı önermesini kodladım. Ekrana ideğişkeni 10 sayısından ufak olduğu sürece i değişkeninin o anki değeriniyazdırttım.do - while döngüsüBu döngüde ilginç olan, önermenin döngü sonunda kontrol edilmesindeyatmaktadır. Bu yüzden döngü içerisindeki blok bir kere mutlaka işlemgörmektedir.<html><body><script language="JavaScript">i = 50;do { document.write(i + "<br>"); i++;}
  74. 74. 75 Musa ÇAVUŞwhile(i < 40);</script></body></html>dowhile.htmlŞekil42Döngünün sonunda önerme kontroledildiği için, döngü önermeye kadar devam etmiştir. Önerme ilk kontrolde falseçıktığı için döngüden çıkılmıştır. Dikkat edilmesi gereken önemli husus ise,döngünün sonunda noktalı virgülü unutmamamız.for döngüsüwhile döngüsünün özelleştirilmiş halidir. Daha çok sayaçlı işlemlerdekullanılmaktadır ve benim en çok kullandığım döngüdür.<html> <body> <script language="JavaScript"> for (i = 1; i <= 10; i++) document.write("Sayi: " + i + "<br>"); </script> </body> </html>for.html
  75. 75. 76 Musa ÇAVUŞŞekil43for döngüsünün ilk kısmında değişken tanımı yapılıyor ve değeri aktarılıyor.Đkinci kısmında önerme belirtiyor. Üçüncü kısmında ise değişken bir artırılıyor.Değişkeni artırma işlemi bloğun sonunda yapılmaktadır. Kısımlar noktalıvirgüllerle ayrılmaktadır. for döngülerin avantajları kendisini dizilerdegöstermektedir.<html> <body> <script language="JavaScript"> firma = new Array(); firma[0] = "Teneke Fabrikasi<br />"; firma[1] = "Kaporta sokaka 32<br />"; firma[2] = "42123 Konya<br />"; firma[3] = "Telefon: 0332393202322"; for(i = 0; i < firma.length; i++){ document.write(firma[i]); } </script> </body></html>fordizi.html
  76. 76. 77 Musa ÇAVUŞŞekil44length() fonksiyonuyla for döngüsünü dizinin uzunluğu kadar döndürüyorum vedizideki tüm bilgileri ekrana yazdırmış oluyorum.Dizilerle çalışan for döngüleri için kolaylık olması açısında bir operatör vardır.Bu operatör in operatörüdür.<html> <body> <script language="JavaScript"> firma = new Array(); firma[0] = "Teneke Fabrikasi<br />"; firma[1] = "Kaporta sokaka 32<br />"; firma[2] = "42123 Konya<br />"; firma[3] = "Telefon: 0332393202322"; for(i in firma){ document.write(firma[i]); } </script> </body></html>fordiziozel.html
  77. 77. 78 Musa ÇAVUŞŞekil45i değişkeninden sonra in operatörü kullanıyorsunuz ve ondan sonrada hangidiziyi döngü içerisinde işleme sokacaksanız onu tanımlıyorsunuz. Bu kullanımtarzı for döngüsü sadece dizilerle kullanılacaksa geçerlidir.break ve continueHerhangi bir döngü içerisinde break komutu kullanılırsa, program döngününo noktasından sonra çıkar ve döngüden sonraki koda geçer.<html> <body> <script language="JavaScript">i = 10;while (true) { if (i < 0) { break; } document.write(i+"<br>"); i--;} </script> </body> </html>break.html
  78. 78. 79 Musa ÇAVUŞŞekil46Sonsuz bir döngünün bloğuna bir if cümleciği yazdım. Eğer i değişkenisıfır değerinden ufaksa break komutunun işlenmesini istedim. Yine herhangi bir döngü içerisinde belirli bir noktadan sonraki kısmınişlev görmesini istemiyorsak ve döngünün buna rağmen dönmesini istiyorsakcontinue komutunu kullanırız.<html><body><script language="JavaScript">for (i = 0; i <= 10; i++) { if ((i % 2) == 1) continue; document.write(i + " sayisi cift "+ "sayidir" +"<br>");}</script></body></html>continue.html
  79. 79. 80 Musa ÇAVUŞŞekil47Bu döngüde ki değişkeni ikiye bölünmekte, eğer kalan 1 ise anlıyoruz ki busayı tek bir sayıdır ve bu blokta continue komutu kullanıyoruz. Böylelikleekrana i değişkeninin çift bir sayı olduğu yazılmıyor.3.7 FonksiyonlarMuhtemelen program parçanızda birkaç adımınız vardır ve bu adımlarıbirleştirerek bir isim altında toplamak isteyebilirsiniz. JavaScript’te de diğerprogramlama dillerinde olduğu gibi bunun için fonksiyonlar vardır. Aynı program parçalarını tekrar tekrar kodlamak yerine fonksiyonlarıkullanmak daha avantajlıdır. Böylelikle fonksiyon içerisinde yapmakistediğimiz değişiklik, fonksiyon çağrıldığı tüm bölümlerde etkinliğinigöstermiş olur.• Karmaşık programlamalar ufak parçalara bölünmüş olur kianlaşılması kolaylaşmış olur. Bir fonksiyon birden fazla bileşendenoluşmaktadır. Fonksiyon başı ve fonksiyon bloğu ana bileşenlerdir. Fonksiyon,fonksiyon başı, sonuç tipi, fonksiyon ismi ve parametre listesindenoluşmaktadır. Basit bir örnekle fonksiyonlara giriş yapmak istiyorum:<html> <body> <script language="JavaScript"> function test() { document.write("Selam ne haber"); } test(); </script> </body> </html>fonksiyon.html
  80. 80. 81 Musa ÇAVUŞŞekil48Kodlamanın bir fonksiyon olduğunu function anahtar kelimesiyle belirtiyoruz.Daha sonra belirttiğimiz fonksiyona bir isim veriyoruz. Ben örnekfonksiyonumuza test adını verdim. Şimdilik parametre kullanmadığım içinparantezi açtım ve hiçbir şey yazmadan kapattım. Ardından “{}” parantezinikullandım. “{}” parantezleri arasına fonksiyonunuzun tüm kodunuyazabilirsiniz. Son olarak test(); şeklinde yazdığım fonksiyonu çağırıyorum vetarayıcı fonksiyonun içindeki işlemi ekrana yansıtıyor. test(); çağrısınıkodunuzda istediğiniz kadar kullanabilirsiniz. Ne kadar çok kullanırsanız,tarayıcınız o kadar çok “Selam” ne haber” mesajını gösterecektir.Fonksiyonların en büyük avantajı karmaşık kod parçalarını tek bir isim altındatoplamasıdır.Fonksiyonlarda parametre kullanımıFonksiyonlarımızda parametre kullanabiliriz. Parametreleri de fonksiyoniçerisinde işleve sokabiliriz.<html> <body> <script language="JavaScript"> function topla(a, b) { document.write(a+" ve "+b+" sayisinin toplami :"+(a+b)); } topla(5,6); </script> </body> </html>fonkparametre.html
  81. 81. 82 Musa ÇAVUŞŞekil49a ve b değişkenlerini topla() fonksiyonunda parametre olarak kullandım.JavaScript’te fonksiyon parametreleri virgül ile ayrılıyor. a ve b değişkenlerinitopla() fonksiyonunda parantezler arasına yazdım ve topla() fonksiyonunuçağırırken parametre olarak 5 ve 6 değerlerini verdim. Böylelikle a değişkeninindeğer 5 ve b değişkeninin değeri 6 olmuş oluyor. Fonksiyon içerisinde de 5 ve 6değişkenini toplattım ve tarayıcıda gösterttim. a ve b değişkenlerini toplarkenparantez içerisinde topladım, çünkü parantez kullanmasaydım, write()fonksiyonu bu iki değişkeni String olarak algılayacaktı ve 11 sayısı yerine 5 ve6 sayısının yan yana gelmesinden oluşan 56 sayısını gösterecekti. Đstersenizparantezleri kaldırın ve örneğinizi tekrar çalıştırarak sonucu izleyin.Farklı sayıda parametre kullanmak şartıyla aynı fonksiyon adınıkullanabilirsiniz.<html><body><script language="JavaScript">function topla(a, b) { document.write(a+" ve "+b+" sayisinin toplami :"+(a+b)); document.write("<br>");} function topla(a, b, c) { document.write(a+", "+b+" ve "+c+" sayilarinin toplami :"+(a+b+c)); document.write("<br>"); } topla(5,6,9); topla(7,16,29); </script> </body> </html>fonkparametre1.html
  82. 82. 83 Musa ÇAVUŞŞekil50c değişkeni ekleyerek aynı fonksiyon ismi adı altında bir fonksiyon tanımlamasıyapılabiliniyor.Fonksiyonlarda parametrik olarak verilen değişkenler sadece o fonksiyon içingeçerlidirler. Genel değişkenler gibi her tarafta kullanılamazlar.<html> <body> <script language="JavaScript"> a = 10; function deger(a) { document.write("a degiskeninin fonksiyon icindeki degeri: " + a + "<br>"); } document.write("a degiskeninin fonksiyon oncesi degeri: " + a + "<br>"); deger(2); document.write("a degiskeninin fonksiyon sonrasi degeri: " + a + "<br>"); </script> </body> </html>fonkgeneldegisken.html
  83. 83. 84 Musa ÇAVUŞŞekil51Fonksiyondaki a değişkeni ile fonksiyon dışında kullanılan a değişkeni farklıdeğişkenlerdir. Fonksiyon içerisinde kullanacağınız parametreler sadecefonksiyon için geçerlidir. Fonksiyon içinde yapılan değişken değer değişimlerifonksiyon dışında bir etkiye sahip değildir.returnBir fonksiyonun değeri return anahtar kelimesiyle iletilmektedir. Fonksiyoniçerisinde yaptığınız işlemlerin sonucunu return anahtar kelimesinden sonrayazın ve noktalı virgül ile kapatın. Bu fonksiyonun değeri olmuş oluyor.Fonksiyonun değerini, fonksiyon dışında kullanmak isterseniz, bir değişkenefonksiyonu atamanız yeterlidir.<html> <body> <script language="JavaScript"> function modlama(a, b) { return a % b; document.write("Gereksiz bir yazi"); } deger = modlama(17, 6); document.write(deger); </script> </body> </html>fonksiyondeger.htmlŞekil52return anahtar kelimesi çağrıldıktan sonra fonksiyondan çıkılır. Yukarıdakiörnekte de gördüğünüz gibi return işleminden sonraki satır işlemgörmemektedir, çünkü fonksiyon matematiksel işlemi değer olarak iletmektedirve fonksiyondan çıkılmaktadır.
  84. 84. 85 Musa ÇAVUŞKendini çağıran fonksiyonJavaScript kendini çağıran fonksiyon mantığını desteklemektedir.<html><body> <script language="JavaScript"> i = 1; function islem(son) { if(i < son) { i=i+i; islem(son); } else document.write("sonuc: " + ": " + i + "<br />"); } islem(100); </script> </body> </html>fkendinicagir.htmlŞekil53islem fonksiyonunun içinde if kavramı true değerini alırsa, if kavramındafonksiyon tekrar çağrılıyor. Program, fonksiyonun çağrıldığı noktayı içmekanizma olarak yığın dediğimiz bir bölgeye kayıt ediyor. Tekrar çağrılanfonksiyon yine if kavramında true sonucu çıkarsa, if kavramında kendisini birdaha çağırıyor. Bu işlem if kavramından false değeri çıkınca ve else işlemibitinceye kadar devam ediyor. Bundan sonra program yığına gidiyor ve en sonhangi fonksiyonu yığına koyduysa onu oradan alıyor ve kendisini çağırdığınoktadan devam ediyor.
  85. 85. 86 Musa ÇAVUŞBu yöntemin kafanızda daha iyi yer edinebilmesi için bir önceki örnekte ufakbir değişiklik yaptım:<html><body> <script language="JavaScript"> i = 1; j = 1; function islem(son) { if(i < son) { i=i+i; islem(son); } else document.write("sonuc: " + ": " + i + "<br />"); document.write(j+++". fonksiyondayim"); document.write("<br>"); } islem(100); </script> </body> </html>fkendinicagir.htmlŞekil54
  86. 86. 87 Musa ÇAVUŞ3.8 EventhandlerArtık ısındık diyebiliriz, kitabın bundan sonraki konuları derinleşmeyebaşlayacak ve sizde görsel olarak farklı program parçaları kodlayabileceksiniz.Isınmasaydık bundan sonraki bölümlerde sorun yaşardık.Tarayıcınızda fareyi hareket ettirmeniz, tarayıcınız tarafından bir olay olarakalgılanır. Bir düğmeye basmanız tarayıcıdan bir olay olarak algılanır. Bu türolayları JavaScript’te kullanabilirsiniz. Bu mekanizmaya Eventhandlerdeniliyor. HTML 4.0 ‘dan sonra Eventhandler mekanizması HTML’e ait oldu.http://www.w3.org/TR/html4/interact/scripts.html adresinde Attributedefinitions standartlaşmış Eventhanler’leri bulabilirsiniz. Ben size bunların birkaçını örneklerlede göstereceğim.Eventhandler, on ön ekiyle başlar ve hangi olayla bağlantı kurulacaksa o olayınĐngilizce kelimesiyle devam eder. Mesela onload, yüklenince manasınagelmektedir ya da onmousedown, fare düğmesine basılınca anlamı taşımaktadır.Örneklerime geçmeden bazı problemlere değinmek istiyorum. W3C’destandartlaşmış Eventhandler’leri tüm tarayıcılar olduğu gibi desteklemiyorlar.Bazı tarayıcılar, bir kısmını farklı desteklerken bazıları hiç desteklemiyor. Buyüzden bir sayfada Eventhandler kullanacaksanız, sayfanızı tüm tarayıcılarladenemenizi öneririm.Şekil55
  87. 87. 88 Musa ÇAVUŞonMouseOver ve onMouseOut ile ilgili bir örnek vermek istiyorum:<html> <script language="JavaScript"> function resimcerceve(){ document.resim.border=9; } function resimcerceveyok() { document.resim.border=0; } </script> <body> <h3>Fareyi resime hareket ettirin</h3> <a href="#" onMouseOver="resimcerceve()" onMouseOut="resimcerceveyok()"> <img src="turkiye.jpg" name="resim" border="0" /></a> </body></html>resimevent.htmlŞekil56Fare ile Türk bayrağının bulunduğu resmin üzerine geldiğinizde resminetrafında bir çerçeve oluşmaktadır. HTML tagı olan <a> tagının arasına yineHTML tagı olan resim tagı <src> tagını koydum. Resim tagının nameparametresinde resim tagının isminin resim olduğunu belirttim. <a> tagındaonMouseOver ve onMouseOut Eventhandler’lerini kullandım. onMouseOverEventhandler’i, fare ile resmin üzerine gelince aktif oluyor ve kendisine atanan
  88. 88. 89 Musa ÇAVUŞfonksiyonu çağırmaktadır. Burada resimcerceve() fonksiyonunu atadım.Fonksiyonum parametresiz olduğu için fonksiyonun parametresiz halini atadım.resimcerceve() fonksiyonuna baktığımızda tek bir işlem yaptığını görürsünüz.resim isimli objeye ulaşıyor ve çerçevesinin kalınlığını 9 yapıyor. documenttanımlamasının sayfamız olduğunu düşünün, resim ise o sayfadaki resim isimliobje. Daha sonra da bu objenin çerçevesini border değişkenini değiştirerekdeğiştirebiliyoruz. onMouseOut Eventhandler’i de, fareyi resimden çekinceaktif olmakta ve resimcerceveyok() fonksiyonunu çağırmaktadır. Bufonksiyonda resmin etrafındaki çerçeveyi 0 yaptım.Farkına vardıysanız W3C standartlarındaki gibi onmouseout gibi bir yazımkullanmadım ve onMouseOut yazdım. HTML olduğu için tolerans ediliyor vebüyüklük küçüklük fark etmiyor. XHTML kullansaydınız o zaman onmouseoutyazmanız gerekiyordu yoksa hata oluşurdu. W3C sayfasındakiEventhandler’leri bu şekilde sayfanıza ekleyebilirsiniz. Kullanımları çok basittirfakat sayfanıza canlılık katmaktadırlar.3.9 Form ve EventhandlerEventhandler’leri Form’larda kullanmak bize büyük avantajlar sağlayabilir.HTML bize Form kullanmamızı sağlıyor biliyorsunuz. Form’larla kullanıcılarmetin kutularını doldurabilirler, seçenekler seçebilirler ve bunları Servertarafındaki bir program parçasına yollayabilirsiniz. Hemen bir örneğe bakalım:<html><script language="JavaScript">function aktif(metin) { document.getElementById("bilgi").innerHTML=metin;}function pasif() { document.getElementById("bilgi").innerHTML="";}</script><body><form>Kullanici Adi:<input type="metin" name="userid"onFocus="aktif(Kullanici adinizi girin)"
  89. 89. 90 Musa ÇAVUŞ onBlur="pasif()"> <br> Sifre: <input type="password" name="pw" onFocus="aktif(Sifrenizi girin)" onBlur="pasif()"> </form> <div id="bilgi"></div> </body> </html>focus.htmlŞekil57Kod parçası ilk başta biraz karışık gibi gözükebilir, özellikle Form’larlaçalışmamış kişiler yadırgayabilirler fakat anlaşıldıktan sonra çok basit olduğunugöreceksiniz. <form> tagıyla bir Form tanımı yapıyoruz. <input> tagı girişyapacağımız bir nesnenin olduğunu gösteriyor. type parametresinde <input>tagının göstereceği nesnenin tipini belirtebiliyoruz. Đlk nesnenin metin kutusuolmasını istediğimin için type parametresine text yazdım. Đkinci nesnenin ise birşifre metin kutusu olmasını istedim ve type parametresini password olarakayarladım.Asıl bundan sonrası çok ilginç ve bizi ilgilendiriyor. Metin kutusunda onFocusEventhandler’ini kullandım. onFocus Eventhandler’i kullanıcı metin kutusunuseçerse aktif hale geliyor ve daha önce tanımladığım aktif() fonksiyonunuçağırıyor. Bu sefer tanımladığım fonksiyonu parametrik yaptım. Parametredeyazılan metinle beraber aktif() fonksiyonu çağrılıyor ve getElementById()fonksiyonunun yardımıyla bilgi nesnesine ulaşılıyor. Ulaştığımız nesnenininnerHTML değişkeninin değerini değiştiriyoruz. innerHTML değişkeniulaştığımız nesnenin HTML içeriğine müdahale ederek değiştirmektedir.
  90. 90. 91 Musa ÇAVUŞSenaryoyu başar alırsak görüyoruz ki, kullanıcı metin kutusunu seçer seçmezkullanıcıyı bilgilendirebilmek için tarayıcı bir yazı gösteriyor. onBlurEventhandler’ide onFocus Eventhandler’in tam tersidir. Metin kutusu seçilideğilken aktif olmaktadır. Aynı şekilde pw nesnesi de işlemektedir.
  91. 91. 92 Musa ÇAVUŞ Bölüm 4 Hata bulma ve ayıklama
  92. 92. 93 Musa ÇAVUŞ4.1 Hata aramaTüm programlama dillerinde olduğu gibi JavaScript’te de programlarken hatayapabiliriz ve kodumuz hatalı olduğu için isteğimiz dışında çalışır. Bu bölümdeyaptığınız hataları nasıl bulabilirsiniz onu öğreneceksiniz. Sıradaki örneğimizebir bakalım:<html><body><table border width="100"><script language="JavaScript">sayi = Math.round(Math.random()* 30);document.write("Cikis degeri: " + sayi );for(sayac=0;sayac < say;sayac++) { document.write("<tr><td>Sayi:</td><td> ", sayac, "</td></tr>");}</script><table></body></html>hatabul.htmlŞekil58
  93. 93. 94 Musa ÇAVUŞMath.random() fonksiyonu 0-1 arası rastgele bir sayı üretmektedir.Math.random() fonksiyonu çıkan sayıyı tam sayıya yuvarlamaktadır. Ben 0-30sayısı arasında rastgele bir sayı seçebilmek için işlemi 30 ile çarptım ve sayideğişkenine atadım. for döngüsü sayi değişkenindeki tam sayı kadar dönecekve tarayıcı tablo satırı gösterecektir. Fakat gördüğünüz gibi kod hatalı olduğuiçin isteğimiz gerçekleşmiyor. Firefox tarayıcısı da hatalı bir kod olmasınarağmen bize hiçbir hata mesajı vermemektedir.Yukarıdaki mönüden Araçlar->Hata konsolu seçeneğini seçerseniz karşınızaşöyle bir pencere çıkacaktır:Şekil59Bu konsol hata bulmada çok işinizi görebilir. Đsterseniz sadece hatalarıgörebilirsiniz ya da sadece uyarılar ve iletileri görebilirsiniz. Đsterseniz dehepsini birden görebilirsiniz. Örneğimiz için bakarsak “say is not defined” diyebir hata mesajının olduğunu ve hangi satırda olduğunu görüyoruz. Diğertarayıcılarında buna benzer hata konsol penceresi vardır. Ben Firefox’ukullandığım için onu gösterdim.

×