JavaScript İkinci ve Üçüncü Hafta

... konulu sunumlar: "JavaScript İkinci ve Üçüncü Hafta"— Sunum transkripti:

1 JavaScript İkinci ve Üçüncü Hafta

2 JavaScript de Döngü for ... Döngüsü
for (sayac = 1 ; sayac < 101 ; sayac++) { … //Bu bölümdeki komut(lar) 100 kez icra edilecek! }

3 JavaScript de Döngü while ... Döngüsü
While (şart) { … //Yapılacak işler }

4 JavaScript de Döngü do ... while Döngüsü do { …. // En az bir kere yapılacak iş } while( şart ) … // Şart gerçeklenmediğinde yapılacak işler

5 JavaScript de Döngü Break İfadesi Döngü içinde kullanılır.
Bir döngü içerisinde break ifadesini kullandığımız noktada döngü koşulları ne olursa olsun sonlanır. (if gun==13) break

6 JavaScript de Döngü Continue İfadesi
Kullanıldığı yerde döngünün o adımının atlanmasını sağlar. (if sayac==23) continue

7 JavaScript de fonksiyon
JavaScript de olaylar, tanımı ve kullanımı Web sayfası üzerinde yapılan işlemlerin oluş anlarında tetiklenen yordamlardır. Örneğin sayfa üzerinde bulunan bir düğmeye tıklanması veya farenin yine sayfa üzerinde bulunan bir nesne üzerine gelmesi birer olaydır. <form name=isim olayAdı=“fonksiyon()”>

8 Düğmelerin, resimlerin, sayfadaki linklerin tıklanması
onClick farenin link veya resim üzerine gelmesi onOver tarayıcı penceresinin kapatılması onClose tarayıcı bir web sayfasını yüklemeyi bitirdiğinde tetiklenir onLoad giriş yapmak için nesnenin seçilmesi onFocus farenin resim üzerinden çekilmesi onBlur farenin bir link, resim gibi nesnelerin üzerine gelmesi sırasında tetiklenir onMouseover form içerisindeki reset düğmesine tıklandığında tetiklenir onReset text veya textarea alanları içinde bulunan metin içinde bir seçme yapıldığında tetiklenir. onSelect Kullanıcı form içerisinde bulunan submit özelliğine sahip düğmeyi tıkladığında tetiklenir. TRUE veya FALSE döner. onSubmit

9 JavaScript de nesne ve metod
JavaScript tam anlamıyla nesneye yönelik (object oriented) değildir. Ancak nesne tabanlı (object based) olarak tanımlanabilir. Hazır nesneleri kullanma “new” operatörü ile yeni nesne oluşturma Özellik ve metod tanımlama ve iptal etme JavaScript tarayıcının nesne modeline bağlı olarak çalışır.

10 window Nesnesi alert() Bilgi veren bir pop-up pencere açar close()
Bildirilen pencereyi kapatır. confirm(mesaj) Kullanıcıya onay isteyen bir pop-up pencere açar. open(url, isim, özellik) Tanımlanan özelliklerde yeni bir pencere açar. prompt(mesaj, ilkdeğer) Kullanıcıdan veri almaya yönelik bir pop-up pencere açar. status() Pencerenin durum çubuğuna yazı yazdırır. setTimeOut(ifade,zaman) Milisaniye cinsinden belirtilen süre sonunda istenilen işi gerçekleştirir. clearTimeout(id) Bir üstteki metodun durdurulması için kullanılır

11 open() Metodu width Pencerenin genişliğinin piksel cinsinden değeri
height Pencerenin yüksekliği piksel cinsinden değeri top Pencerenin ekranın üst kenarından uzaklığının piksel cinsinden değeri left Pencerenin ekranın sol kenarından uzaklığının piksel cinsinden değeri toolbar Araç çubuğunun olması(yes) veya olmaması(no) menubar Menubar'ın olması(yes) veya olmaması(no) status Status bar'ın olması(yes) veya olmaması(no) location Browser'ın location çubuğunun olması (yes) veya olmaması.

12 history() Metodu Özellikler:
length  geçmişte ziyaret edilmiş linklerin sayısı current  şu anda ziyaret edilen URL next  kullanıcı “ileri (forward)” düğmesine bastığında gidilecek adres previous  kullanıcı “geri (backward)” düğmesine bastığında gidilecek adres Metotlar: back()  Tarayıcının “ileri (forward)” düğmesinin işlevini taşır forward()  Tarayıcının “geri (backward)” düğmesinin işlevini taşır go(x)  History’de x tamsayısının + veya – değerine göre ileri/geri gider

13 location() Metodu Özellikler:
host  URL’in host ismini ve port numarasını hostname  URL’in host ismini href  URL’in tamamını pathname  Nesnenin belirttiği dosya ya da dosya yolunu port  URL’in port numarasını protocol  URL’in protokol bilgilerinin olduğu kısmını döndürür ya da belirler Metotlar: assign(“URL”)  Yeni bir doküman yükler reload()  Mevcut dokümanı yeniden yükler. replace(“URL”)  Mevcut dokümanı belirtilenle değiştirir

14 navigator Nesnesi Appname Browser’ın adı AppVersion Browser’ın sürümü
AppCodeName Browser’ın kod adı UserAgent Browser server’a kendisini tanıtırken verdiği isim.

15 document Nesnesi Özellikler:
alinkColor  kullanılan linklerin rengini belirler bgColor  dokümanın arka plan rengi fgcolor  dokümanın metin rengi forms  tüm formları indeksleyen dizi oluşturur images  tüm resimleri indeksleyen dizi oluşturur linkColor  kullanılmayan linklerin rengini belirler lastModified  en son değiştirme tarih ve zamanını tutar links  tüm linkleri indeksleyen dizi oluşturur location  yüklü web dokümanının URL adresini belirler referrer  yüklü web dokümanına hangi URL’den gelindiğini belirler title  yüklü web dokümanının başlığını belirler

16 document Nesnesi clear() Yüklü dokümanı temizler close()
Open() ile açılan dokümanı kapatır. open() Write() ile yazmak için bir doküman aralığı açar. write() writeln() Dokümana metin ya da kod yazar.

17 Buraya kadar anlatılanlar tarayıcıya ait nesnelerdir.
window frame document location history anchor forms image link checkbox button select radio submit reset textarea text file password option

18 array() Nesnesi Metod Açıklama Kullanımı toString()
Dizi nesnesini String tipinde karakter katarına çevirir. document.write(sayilar.toString()); join() toString’e benzer. Ancak karakter katarına çevirirken araya seçilen ayıracı yerleştirir. Ayıraç kullanılmazsa ‘,’ ekler. document.write(sayilar.join(‘;’)); reverse() Diziyi tersten yeniden sıralar document.write(sayilar.reverse()); sort() Dizide alfabetik sıralama yapar. document.write(sayilar.sort());

19 Örnek

20 string() Nesnesi konu = “Örnekler” //değişkeninin değeri “Örnekler” oldu Metod ismi Örnek length konu.length anchor konu.anchor("bağlantı") bold konu.bold() charAt konu.charAt(4) italics konu.italics() link konu.link("index. html") small konu.small() sub konu.sub() toLowerCase konu.toLowerCase() toUpperCase konu.toUpperCase()

21 Örnek

22 date() Nesnesi getYear() getMonth() getDate() getDay() getTime()
getHours() getMinutes() getSeconds()