Javascript Html sayfalarının içine yazılarak, sayfayı daha etkileşimli hale getirir. click olayları, uyarı mesajları gibi hareketlerle sayfayı daha dinamik hale getirir. Javascript olmadan yazılan html sayfalarıyla yapılabilecekler sınırlıdır. Javascript kodları <script> </script> etiketleri arasına yazılırlar. Html sayfası içinde ise <body>etiketinin arasına gömülürler. <head> etiketinden sonra da yazılabilir. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu.
Body etiketlerimizin arasına <script> etiketlerini yazdık ve sonunda da </script> ile kapadık. Bu <script> etiketlerinin arasına javascript kodlarımızı yazarız. Javascriptte ekrana yazdırma işlemi document.write() ile yazdırılır. <script> etiketinin içine type= text/javascript özelliğini ekledik. Burada javascriptin kullanıldığını belirttik. Ayrıca head kısmında <meta charset= utf-8 > etiketini yazmamızın sebebi ise türkçe karakter sıkıntısı yaşamamız için. Javascript Değişken Kullanımı 1. Javascriptte değişkenler var ifadesiyle tanımlanır. Örneğin -> var degisken=deger; var ad= Mehmet ; var yas=33; 2. Javascriptte değişkenin türü belirtilmez. Yani int, string, double gibi ifadeler yer almaz. Sadece değişken adı ve değeri yazılır. 3. Javascriptte her satır noktalı virgül ile biter.
4. A değişkeni ile a değişkeni farklıdır. Büyük küçük harf ayrımı vardır. (case sensitive) 5. Değişken isimleri sayı ile başlayamaz. 6. Javascriptte bir harfi bile yanlış yazarsanız sayfanızda bir şey görünmeyebilir. Yani hata olduğunda bulmanız zordur. 7. Açıklama satırları // ile yapılır ya da /* */ arasına yazılır. Burada 3 değişken tanımladık ve document.write() ile ekrana yazdık. Bunları + operatörüyle birleştirdik. Çıktısı ise aşağıdaki gibi olacaktır. Şimdi birden fazla değişken tanımlayalım ve bunlar üzerinde işlemler yapalım.
Burada 6 değişken tanımladık ve 3 er 3 er ekrana yazdırdık. Alt satıra geçildi. Bunu da html deki alt satıra geçme etiketiyle yaptık. Ayrıca açıklama satırlarının da nasıl kullanıldığını görmüş olduk. Çıktısı ise : Javascriptde Operatörler Temel operatörler =, +,, *, / Bunların dışında &, &&,,, ==, %, <, >, <=, >= operatörleri vardır. Örnek: değişken olarak tanımlanan iki sayının toplam,fark, çıkarma ve çarpımını bulan kodları yazalım.
Ayrıca if yapısı ile hangi sayının büyük olduğunu ekrana yazalım. 2 sayı üzerinde 4 işlem yapıldı. Her işlemin sonunda, alt satıra geçme etiketini de kullanarak satırların yan yana yazılması engellendi. Alt kısımda da if koşulu ile büyüktür ve küçüktür kontrolleri kullanıldı. Çıktısı ise şu şekilde olacaktır.
Çıktısı ise şu şekilde olacaktır: Fonksiyonlar Parametreli ve parametresiz fonksiyon oluşturmak, uyarı mesajları görtermek için bir buton oluşturulacak ve tıklandığında bir fonksiyon çağırarak uyarı mesajı gösterilecek. İlk olarak sayfamızın boş halini göstereceğim.
Burada 1 numaralı alanda fonksiyon tanımlanacak. Fonksiyonları body kısmından ziyade burada tanımlamak daha faydalıdır. Çünkü bu kısımdaki kodlar, sayfa ilk açıldığında ilk çalışan kısımdır. Head kısmında da javascript kullanılacağı için fonksiyon oluşturma kodları da <script> etiketi arasında yazılacaktır. 2.kısımda ise fonksiyon çağırılacak ve buton oluşturulacaktır. Fonksiyon oluşturmak için function anahtar kelimesinden sonra fonksiyon ismi yazılır ve süslü parantezler içerisine de kodlar yazılır.
mesajgoster() adlı fonksiyonu ekranda bir mesaj gösteriyor. Mesajlar, alert() fonksiyonuylaverilir. mesajgoster() fonksiyonu parametre almadan işlev görüyor. Butona basılınca fonksiyonu çağıralım. Butonu <form> etiketiyle yapılmaktadır. Burada butonun onclick özelliğine fonksiyon yazılmaktadır. Yani butona tıklanınca bu fonksiyon çağırılıyor.
Geriye değer döndüren fonksiyonlara örnek olarak: Burada topla ve carp adında 2 fonksiyon oluşturulmuştur. Parametreli fonksiyonlarda parametrelerin tipi yazılmaz.
Bu 2 fonksiyondan ilk olarak topla fonksiyonunu çağırıldı ve burada return ile dönen değer tekrar carp fonksiyonuna gönderildi. Bu çarpma işlemi yapan fonksiyondan dönen değeri de sonuc değişkenine aktarıldı. Son olarak da değer ekrana yazdırıldı. Çıktı ise : Döngüler ve Koşullar Koşullar if-else ve switch ten oluşmaktadır. Döngüler ise for,while,do-while gibi temel kısımlardan oluşur. if-else konusunda bir örnek: Bu örnekte hız değişkeni, fonksiyona gönderiliyor ve bu fonksiyondan bir mesaj dönüyor. Bu mesaj içeriği, if-else yapısına göre belirleniyor. Son olarak bu mesaj ekrana yazdırılıyor.
Ekran görüntüsü ise şu şekilde olacaktır: İf-else yapısına benzeyen bir diğer kontrol mekanizması ise switch tir. Aldığı parametreye göre doğrudan şartı çalıştırır. İfelse deki gibi tek tek kontrol etmez. Örnek: fonksiyona bir isim gönderildi. Bu isim switch mekanizmasına parametre olarak geldi.
Case ile de bu parametre kontrol edildi. Hangi case değerine uyuyorsa oraya girdi. Her case den sonra break; koymak zorunludur. Eğer yazılmazsa bütün case leri çalıştırır. Body kısmında document.write() ile ekrana yazdırma işlemi yapıldı. Javascriptte ekrana bir metin yazdırılırken bu metin, html etiketleri arasında yazdırılabiliyor. Kontrol yapılarından sonra döngülerdeki en temel döngü olan for döngüsü ise şu şekilde kullanılmaktadır. Başlangıç ve bitiş şartı belirtilir. Döngü bu kurala uydukça süslü parantezler içerisindeki kodlar çalışır.
Butona basınca hesapla() fonksiyonu çağrıldı ve döngü alert kullanılarak ile 1 den 10 a kadar olan sayıların toplamı ekrana yazıldı. Ekran çıktısı ise: Aynı örneğin çarpma olanını bu sefer while ile yapıyoruz. While da ise bitiş verilmez. Sadece şart verilir. Şart sağlandıkça kodlar çalışır. Sayının artırılır azaltılması ise for daki gibi en başta verilmez. Kod bloğu içinde yazılır. Burada sayi değişkenini 1 artırma işlemini kod bloğu içinde yaptım. Sonunda yine çarpımı alert ile ekrana bastım.
Çıktı ise şu şekilde olacaktır : Son olarak do-while döngüsü while dan farkı, şart sağlanmasa bile döngünün bir kere çalışmasıdır. Yani her şartta en az 1 defa çalışır. Bu örnekte butona basınca 0 değerini fonksiyona gönderdim. While şartında 0 dan büyükse çalışması gerekiyor fakat büyük olmadığı halde döngü 1 kere çalıştı. Çünkü while ifadesi şuan en sonda. İlk olarak do işlemi geliyor. Şart sağlanmadığı halde döngü 1 defa çalışır.
Ekran çıktısı :