301: JavaScript Web programlama eğitimimizin orta seviyesinde, JavaScript öğreniyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

JavaScript Nedir?

JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan bir betik dilidir. JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanır.

JavaScript ile Basit Bir Program

Önceki eğitimlerde JavaScript kodlarının bir HTML belgesinde kullanımını görmüştük. Şimdi basit bir örnekle kullanımını hatırlayalım:

Yazıtipi ve Renk Özellikleri

Bir önceki JavaScript ile basit bir program eğitim içeriğinde, JavaScript kodu ile yazdırılan başlığın yazıtipi ve renk özellikleri, yine write metodunun argümanı olarak yerleştirilecek string türü ifadelerle değiştirilebileceğimizi görmüştük. Aşağıdaki örneği inceleyerek bu işlemi nasıl yaptığımızı görelim:

Başlığı Ayrı Satırlara Yazdırmak

HTML'in <br> tagı yardımı ile, başlık ifadesi istenilen noktadan itibaren bölünerek devamı yeni bir satıra yazdırılabilir. Aşağıdaki örneği ve çıktısını inceleyebilirsiniz:

Window Nesnesi ve Alert Metodu

Web sayfasını oluşturan belge (document) yerine, bir pencere içine mesaj ya da bilgi yazdırılmak istenirse bu durumda window nesnesi ve bu nesne üzerinde geçerli olan alert metodu devreye sokulabilir.

String türü ifade içindeki her '\n' karakteri, yeni bir satıra geçişi sağlamaktadır. Aşağıdaki örneği inceleyiniz;

JavaScript Dilinde Değişken İsimleri

Değişken, bir programlama dilinin en önemli veri yapılarından biridir. Bir değişkene ait iki temel bilgi mevcuttur:

  1. Değişkenin adı
  2. Değişkenin değeri

Değişkenin adı için, JavaScript'te bazı isimlendirme kuralları mevcuttur:

Yorum (Comment) Satırları

JavaScript'te, C dilinden alınan /* ve */ sembolleri arasına yorum (açıklama) yerleştirme tekniği aynen kullanılabilir:

Örneğin,

/*bu program bordro hesabı

için yazılmıştır*/

JavaScript'te ayrıca // sembolleri ile başlayan tek satırlık yorum ifadeleri de kullanılabilir:

// bu program bordro hesabı

// için yazılmıştır

Atama Deyimi

x=5;  

y=6;

şeklindeki satırlar birer atama deyimini (assignment statement) göstermektedir. Bu atama deyimleri ile x değişkeninin bellekteki adresinde 5 değeri ve y değişkeninin bellekteki adresinde ise 6 değeri görünecektir:

 

Bellek (Ram)

Bir atama deyimi esas itibarıyla aşağıdaki yapıda olabilir:

JavaScript'te Matematiksel İşlemler

JavaScript'te matematiksel işlem operatörleri, öncelik sıralarına göre, aşağıdaki tabloda verilmiştir.

Kontrol ve Karar Verme İşlemleri

Diğer bilgisayar programlama dillerinde olduğu gibi, JavaScript dilinde de, esas olarak iki farklı tipte kontrol yapısı ya da komutu mevcuttur:

Artırım (Increment) ve Azaltım (Decrement) Operatörleri

Aşağıda Tablo A.1'de, JavaScript dilinde kullanılan artırım ve azaltım operatörlerinin bir listesi ve işlevleri sunulmaktadır:

 

Tablo A.1-JavaScript'te artırım ve azaltım operatörleri

Operatör

Aritmetiksel Atama Operatörleri

Aşağıda, Tablo A.2'de, JavaScript'te mevcut olan aritmetiksel atama operatörlerinin bir listesi ve işlevleri görülmektedir:

 

Tablo A.2-JavaScript'te Aritmetiksel Atama Operatörleri

Switch ... case Yapısı

Bir programda çok sayıda koşul kontrolü ve bunların sonucuna göre gerçekleştirilmesi gereken işlemler mevcutsa, if –else yapıları ile program akışının izlenmesinde güçlükler oluşabilir. Bu durumlar, genellikle, switch deyiminin kullanımının uygun olacağı durumlardır. Switch deyimi, tek bir ifadeyi kontrol ederek, ifadenin değerine göre, sınırsız sayıda çalışma yolu belirleme olanağı sağlayan bir deyimdir.

Switch sözcüğünden hemen sonra gelen ifade, parantezler içinde ve bir tam sayı ifade olmalıdır. Case sözcüklerini izleyen değerler de tam sayı sabit türünde olmalıdır.

JavaScript'te Nesne Oluşturma, Fonksiyonlar ve Metotlar

JavaScript, nesne yönelimli (object oriented) paradigmanın basitleştirilmiş bir şekline dayalı bir programlama dildir.

JavaScript içinde bir nesne özellikleri ile oluşturulur. Bu özellikler JavaScript değişkenleri olabileceği gibi diğer nesneler de olabilir.

Bir nesnenin kendisine özgü fonksiyonları olabilir. Bu fonksiyonlar nesneye yönelik programlama terminolojisinde "metotlar" olarak isimlendirilir.

JavaScript'te Hazır Olarak Bulunan Nesneler

JavaScript bir saf nesneye yönelik programlama dili (object oriented programming language) değildir, buna rağmen yapısında önceden tanımlanmış nesneler mevcuttur. Bunun ötesinde kullanıcının yeni nesneler oluşturmasına da olanak sağlanır.

Saf nesneye yönelik programlama dillerinde (Java gibi) her türlü fonksiyon nesnelere bağlı olarak tanımlanır oysa JavaScript'te bağımsız fonksiyon tanımlama olanağı da mevcuttur.

Her JavaScript nesnesinin (object) bazı özellikleri (properties) mevcuttur. Bir nesnenin bir özelliğini göstermek için aşağıdaki notasyon kullanılır:

Nesne Özellikleri

Her nesneyi belirleyen bazı özellikler (properties) mevcuttur. Bu özelliklerden bazılarına atama yoluyla değer atanabilir; bazıları ise sadece okunabilir (read only) tipteki özelliklerdir.

İlerleyen eğitim içeriklerinde en yaygın olarak kullanılan JavaScript nesnelerine ait özellikleri öğreneceksiniz.

Window ve Frame Özellikleri

Web tarayıcı penceresi içindeki çerçeve (frame) ve pencerelere (window) ait özellikleri atamak ya da atanmış değerleri elde etmek amacı ile bilinmesi gereken özelliklerdir.

Aşağıdaki Tablo N.6'da bu özelliklerin bir listesi sunulmaktadır:

Tablo N.6-Window ve frame özellikleri

JavaScript Metot ve Fonksiyonları

Metotlar nesneler için tanımlanmış olan fonksiyonlar ya da işlevlerdir. Her nesnenin kendisine özgü metotları mevcuttur. Metotlar bir anlamda nesnenin yapabileceği eylemler olarak da görülebilir. Bir metot ya nesne üzerinde bazı değişiklikler yapar ya da nesnenin algıladığı bazı mesajlara cevap olarak bir eylem oluşturur.

Örneğin document nesnesinin metotlarından biri de write metodudur ve bu metot kendisine verilen bilgileri document nesnesi üzerine yazar.

Bir nesneye ait metodu harekete geçirmek için,

JavaScript Fonksiyonları

JavaScript'te nesnelerden bağımsız olarak kullanılabilen bazı hazır fonksiyonların da mevcut olduğunu yukarda belirtmiştik. Bu fonksiyonlar 7 tanedir ve aşağıdaki tabloda bunların listesi ve gerçekleştirdikleri işler verilmiştir:

Olay Yöneticileri (Event Handlers)

JavaScript event-driven (olay tarafından yönlendirilen) türde programlamaya olanak sağlayan bir dildir. Olay yöneticisi bir olay meydana geldiği zaman bir işlemler grubunu harekete geçirebilen bir nesnedir.

Aşağıdaki tabloda JavaScript olayları ve işlevleri verilmektedir:

Tek Boyutlu Diziler (One Dimensional Arrays)

Tüm programlama dillerinde olduğu gibi JavaScript dilinde de dizi (array) yapısı son derecede önemli ve faydalı bir veri yapısıdır. Önce dizi yapısının tanımını vererek başlayacağız:

 

Dizinin tanımı

Dizi, bilgisayar belleğinde aynı isim altında genellikle aynı tipten çok sayıda veriyi bir arada saklayan veri yapısıdır. Aşağıda, x adlı bir dizinin mantıksal görünümü verilmiştir:

JavaScript Dilinde Fonksiyon Çağırma Teknikleri

JavaScript dilinde çağıran fonksiyon ile çağrılan fonksiyon arasındaki veri değişimi ya da paylaşımı iki farklı teknikten biri ile gerçekleştirilir. Bunlar,

  1. Değer ile Çağırma (Call by Value)
  2. Referans ile Çağırma (Call by Reference)

teknikleridir.

Join Fonksiyonu

Bir dizi üzerinde uygulanabilecek olan join fonksiyonu, bir dizinin elemanlarını belirtilen bir ayraç sembolünü dizi elemanlarının arasına koyarak bir string halinde birleştirir. Bu işlem dizi elemanlarının toptan bir komutla yazdırılması işlemi dâhil birçok uygulamada yarar sağlayabilir.

Join fonksiyonunun kullanılış biçimi aşağıdaki gibidir:

DiziAdı.join(DiziAyracı)

Join fonksiyonu örneğini dikkatle inceleyelim:

Verilerin Sıralanması - Sıralama (Sortıng) Algoritmaları

Tüm dünyada belirli bir zaman periyodu içinde bilgisayarların en çok hangi işlemi yaptıkları sorulsa bu sorunun cevabı mutlaka sıralama olurdu. Gerçekten de sıralama işlemi en çok ihtiyaç duyulan işlemdir; çünkü biz veri ya da veri gruplarını incelerken bunların belirli bir alana göre sıralanmış olmasını isteriz.

Döngü (Loop) Oluşturma

Döngüsel işlem veya tekrarlı işlem (iterasyon, İng: iteration) bilgisayarı aynı işlemler grubunu belirli bir koşul sağlanana kadar tekrar tekrar yapmak için yönlendirir. JavaScript dilinde döngü yapısını oluşturmak için üç deyim mevcuttur:

  • while deyimi
  • do... while deyimi
  • for deyimi

İç İçe Döngüler

Bir döngü yapısının içine başka bir döngü yapısının yerleştirilmesiyle elde edilen yapıya iç içe döngü (nested loop) adı verilir.

JavaScript dilinde, if deyimlerini herhangi bir derinliğe kadar iç içe kullanmak nasıl mümkünse, döngü deyimlerini de iç içe kullanmak mümkün olacaktır. İç içe döngülerde hatırlanacak anahtar bilgi, önce en içteki döngülerin tamamlanması gerektiğidir. Bu konuda aşağıdaki kural iç içe döngüler için daima geçerlidir:

İç içe döngülerde en içteki döngü en önce tamamlanır.