Ünite 5: İşlemci Taraflı Programlama: JavaScript

Giriş

1990 yılında Tim Berners-Lee adındaki bir araştırmacı tarafından geliştirilen web teknolojisinin internete kazandırdığı işlev oldukça önemlidir. Bu teknolojinin ortaya çıkmasıyla birlikte çeşitli biçimlere sahip metinlerden ve metinlerin arasına serpiştirilmiş resimlerden oluşan içerikleri hazırlayıp kolayca yayımlamak mümkün hâle gelmiştir. Üzerlerindeki özel yazılımlar sayesinde web sunucusu hâline getirilmiş bilgisayarlarda tutulan söz konusu içerikler, web tarayıcı olarak adlandırılan özel yazılımlar aracılığı ile bütün internet kullanıcıları tarafından görüntülenebilmeye başlamıştır.

Web sayfalarının daha etkileşimli ve işlevsel olmasına yönelik ihtiyaç, 1995 yılında web tarayıcısı yazılımı üreten Netscape şirketinin çalışanı olan Brendan Eich tarafından geliştirilen JavaScript dili ile karşılık bulmuştur. Bir programlama dilinde bulunan temel işlevlerin hemen hepsine sahip olan JavaScript standardı sayesinde web içeriği sağlayıcıları, basit biçimsel işaretlemelerin ötesindeki işlevleri de kullanabilir hâle gelmişlerdir. 1995 yılından bu yana geliştirilen JavaScript, günümüzde web sayfalarını neredeyse bir masaüstü yazılımı kadar işlevsel hale getirebilmektedir.

Javascript’in Çalışma Prensibi ve Entegrasyonu

Yukarıda da bahsedildiği üzere JavaScript, bir programlama dilinin sunduğu temel işlevlere sahiptir. HTML içeriğinin arasına yerleştirilen JavaScript kodları değişken, şart ifadesi ve döngü gibi yapılara sahip olabilir. Web kullanıcısı söz konusu sayfaya erişmek istediği zaman, kullandığı web tarayıcısı, web içeriğiyle birlikte içerikte bulunan JavaScript kodlarını da alır. Özel olarak işaretlenmiş olan JavaScript kodları, tarayıcı tarafından tespit edilir, derlenir ve çalıştırılır. Web sayfasının içeriğine gömülü olan JavaScript kodları, istemcinin bilgisayarına gönderilmeden önce sunucu tarafında herhangi bir derleme veya çalıştırma işlemine tabi tutulmadığı için, JavaScript “istemci taraflı” bir dil olarak sınıflandırılır.

Javascript Kodlarının Entegrasyonu

JavaScript kodları web içeriğinin başlık veya gövde kısmında yer alabilir. Sayfanın yalnızca bir yerinde JavaScript kodu olması gibi bir zorunluluk yoktur. Bir web sayfası hiç JavaScript kodu içermeyebileceği gibi, birden fazla JavaScript kod parçası da içerebilir. JavaScript kodlarının web tarayıcı tarafından tespit edilmesi ve derlenmesi için “ script ” etiketi kullanılır. JavaScript kodunun sonlandığını ifade etmek için kullanılacak etiket ise " /script " şeklindedir. “ script ”ve " /script " etiketlerinin arasında kalan kod parçası, tarayıcı tarafından JavaScript kodu olarak yorumlanır.

Javascript’in Kodlama Özellikleri

Yıllar boyunca gelişimini sürdüren JavaScript, güncel hâliyle bir kodlama dilinde olması beklenen özelliklerin neredeyse tamamına sahiptir.

Değişken Kullanımı

Programlama dillerinin vazgeçilmez ögeleri olan değişkenler, verilerin işlenmek üzere tutulduğu bellek hücreleridir. İşleyiş sırasında oluşan veya dışarıdan alınan veriler, sonradan değerlendirilmek üzere değişkenlerde tutulurlar. JavaScript değişkenleri “var” tanımlaması ile oluşturulur. Bu arada, özel durumların dışında, her JavaScript ifadesi noktalı virgül (;) karakteri ile sonlandırılmalıdır.

Değişken oluştururken adlarının sayı ile başlamamasına boşluk ve noktalama işaretleri içermemesine dikkat edilmelidir. Değişken adları ile değişken değerlerinin8 ayrı şeyler olduğu göz önünde bulundurulmalıdır. Bir değişkenin adı sabit kalırken değeri tekrar tekrar değiştirilebilir. Ayrıca JavaScript değişken adları büyük/küçük harf duyarlıklıdır.

JavaScript operatörleri ve işlevleri şunlardır:

+ operatörünün işlevi toplama veya metin birleştirme
- operatörünün işlevi çıkarma
* operatörünün işlevi çarpma
/ operatörünün işlevi bölme
% operatörünün işlevi mod alma
++ operatörünün işlevi değer arttırımı
-- operatörünün işlevi değer azaltımıdır

Fonksiyonların Oluşturulması

Programlamada fonksiyon adı verilen yapılar, üzerlerine tanımlanan kod parçalarının tekrarlı kullanımlarını kolaylaştıran oldukça önemli yapılardır. Fonksiyon yapısının kullanımı, daha az kod satırı oluşturduğu için daha hızlı ve daha okunabilir kod yazımına olanak sağlar. Ayrıca birden fazla kişinin aynı proje üzerinde çalışabilmesi fırsatını doğurduğu da söylenebilir.

JavaScript içeren web sayfalarında fonksiyonlar, özellikle form elemanları gibi ögelere işlev yüklemek için oldukça kullanışlıdır. Örneğin, bir web butonunun işlevine doğrudan kod yazmak, sayfa kaynağı içinde oldukça karmaşık bir görüntü sağlayacaktır. Bu durum da geliştirme ve hata giderme süreçlerini zorlaştıracaktır. Kullanılacak işlevi bir fonksiyon olarak belirleyip butonun tıklanması durumunda söz konusu fonksiyonun çağrılmasını sağlamak çok daha düzenli bir kod yapısı oluşturacaktır.

Önceden yazılmış kod parçalarının tekrar kullanılabilmesini kolaylaştıran önemli bir özellik de dışarıdan JavaScript sayfası çağırabilmektir. Geliştirici, tekrar kullanmak istediği kodları içeren JavaScript sayfasını, “ script src='cagrilacakSayfa.js' /script ” kullanımıyla çağırabilir. Çağırılan sayfadaki kod, fonksiyon yapısı ve değişken ataması gibi öğelerin tamamı, çağırıldığı sayfada geçerli olur.

Yerleşik Fonksiyonlar

Geliştiriciler, kendi fonksiyonlarını tanımlayabildikleri gibi, JavaScript platformu tarafından sağlanan yerleşik fonksiyonları da kullanabilirler. JavaScript, özellikle matematiksel, metinsel ve tarihsel işlemler için kullanışlı fonksiyonlar sunar. Bazı kaynaklarda metod olarak adlandırılan bu fonksiyonlar kullanılırken ilgili oldukları sınıfla birlikte tanımlanırlar.

JavaScript dilinde matematiksel işlemleri kolaylaştıracak onlarca yerleşik fonksiyon vardır. Bu matematiksel fonksiyonların sık kullanılanları aşağıda özetlenmiştir:

• abs (X) fonksiyonu; X’in mutlak değerini sunar.
• ceil (X) fonksiyonu; X’i yukarı yuvarlar.
• floor (X) fonksiyonu; X’i aşağı yuvarlar.
• max (X,Y,Z,…,N) fonksiyonu; Kendisine verilen sayıların en büyüğünü sunar.
• min (X,Y,Z,…,N) fonksiyonu; Kendisine verilen sayıların en küçüğünü sunar.
• pow (X,Y) fonksiyonu; X’in Y’inci kuvvetini (üssünü) sunar.
• random () fonksiyonu;0 ile 1 arasında rastgele bir sayı sunar.
• sqrt (X) fonksiyonu; X’in karekökünü sunar.

Web arayüzlerinin oluşturulması sırasında kullanımlarına sıklıkla ihtiyaç duyulabilen metinsel fonksiyonlar da JavaScript’in yerleşik kütüphanesinde geniş bir yere sahiptir. Bu fonksiyonların işlevleri şunlardır:

• concat(X): İki metni birleştirmek için kullanılır. Altında çağırıldığı değişken değeri ile X’i birleştirir.
• indexOf(X): Metinsel ifade aramak için kullanılır. Altında çağırıldığı değişken değerinin içinde X’in kaçıncı karakterden itibaren başladığını bulur.
• substr(X,Y): Alt metin çıkarmak için kullanılır. Altında çağırıldığı değişkenin değerindeki X numaralı karakterden başlayıp, Y sayıda karakter alarak yeni bir metin oluşturur.
• toLowerCase(): Altında çağırıldığı değişkenin değerini küçük harflere dönüştürerek sunar.
• toUpperCase(): Altında çağırıldığı değişkenin değerini büyük harfere dönüştürerek sunar.
• trim(): Altında çağırıldığı değişken değerinin sağ ve sol kenarlarındaki boşlukları yok ederek sunar.
• Length: Aslında fonksiyon değil, özellik olarak tanımlanır. Altında çağırıldığı değişkenin karakter sayısını sunar.

Web sayfalarında tarihsel işlemler de sıklıkla gerekmektedir. Sistem saatinin okunması veya işlemler arasındaki zaman aralıklarının tespit edilmesi sırasında tarih fonksiyonları önemli kolaylık sağlar. Tarih fonksiyonları kullanmak için önce bir tarih nesnesi oluşturmak gerekir. “var tarihnesnesi= new Date ();” şeklindeki kod satırı, “tarihnesnesi” adlı bir nesne oluşturur. Bu nesne, tarih fonksiyonlarını üzerinde bulundurur. Yanda sunulan kodda, bu nesne üzerinden tarihsel fonksiyon kullanımını örneklendirmektedir.

Doküman Yönetimi

JavaScript kodları, üzerinde çalıştığı web sayfasındaki hemen her türlü içeriğe ulaşabilir ve söz konusu içerik üzerinde değişiklik yapabilir. “document” adlı bir nesne üzerinde toplanan bu ögeler, HTML ile tanımlanmış olan bütün eleman ve özellikleri kapsar. Sayfa içeriğini oluşturan bölümler, sayfa üzerinde bulunan form ögeleri ve form ögelerinin içinde bulunan verilerin tamamı “document” adlı nesne üzerinden erişilebilir ve değiştirilebilir. Bu noktada doküman nesnesinin altında yer alan getElementById() metodu oldukça kullanışlıdır.

Tarayıcı Yönetimi

JavaScript kodlarının üzerinde çalıştığı web tarayıcısına ilişkin önemli özellik ve fonksiyonlar “window”, adlı nesne üzerinde bulunur. Bu nesne üzerinden pencerenin hem görünüm hem de gezinim özelliklerine ulaşılıp bu özellikler üzerinde değişiklik yapılabilir. JavaScript ile gezinim işlemlerini gerçekleştirmek de mümkündür. “window” adlı nesneye bağlı olarak çalışan “location”, kendine bağlı özellikler sayesinde hem gezinim özelliklerini sunar hem de gezinim işlemlerini olanaklı kılar.

Şart İfadelerinin Oluşturulması

Programların işleyişleri sırasında çoğunlukla, ortaya çıkan durumların belirli şartları sağlama ya da sağlamama durumlarına göre farklı süreçlerin işe koşulması gerekir. Örneğin kullanıcıdan alınan bir puan değerinin 100’ü geçmesi durumunda kullanıcıya “100’den küçük bir değer girmelisiniz.” uyarısını sunacak kod, puanın 100’den büyük olma şartına bağlanmalıdır. Benzer şekilde, kullanıcıya yöneltilen bir sorunun cevabının “Evet” olması durumunda, “Hayır” olması durumuna göre farklı kodların işletilmesi gerekebilir.

Programlama dillerinin hemen hepsinde şart ifadelerinin kullanımları aynıdır ve “if ” deyimiyle başlar. “If ” deyimine bağlı olan kod satırları, şartların sağlanması hâlinde çalıştırılır, aksi takdirde çalıştırılmadan atlanır. Birçok durumda, şartın sağlanmıyor olduğu hâllerde çalıştırılacak kodları da ayrıca tanımlamak gerekebilir. Bu gereksinim, “değilse” anlamında yorumlanabilecek olan “else” deyimiyle karşılanır. =“If ” ile belirtilen şartın sağlanmaması durumunda, başka bir şart daha kontrol edilmek istenirse, “değilse eğer” anlamında “else if ” deyimi kullanılır.

“If”, “else” ve “else if” yapılarıyla, karşılaşılan bütün dallanma gereksinimleri karşılanabilir. Ancak bazı durumlarda, şart yapılarının daha kolay kurulumunu sağlamak ve kod okunurluğunu artırmak için “switchcase” adı verilen şart yapısını kullanmak fayda sağlar.

Döngü Yapılarının Kurulması

Benzer işlemlerin tekrarlı bir şekilde yapılması gereksinimiyle sıklıkla karşılaşılır. Bu gereksinimi her tekrar için ayrı kod satırı yazarak karşılamak, oldukça çok sayıda kod satırına sahip programlar yazmak anlamına gelir. Çok sayıda kod satırından oluşan programlar ise hem çalıştırılmak için daha çok sistem kaynağına ihtiyaç duyarlar hem de oluşturma ve güncelleme anlamında daha fazla zaman harcanmasını sağlarlar. Bazı durumlarda binler, hatta onbinlerce işlem yapılması gerekebileceği düşünülürse bu durum daha da netleşecektir. Her tekrar için ayrı kod yazmak yerine, bilgisayarı söz konusu süreç için döngüye sokmak çok daha mantıklıdır.

“For” adı verilen yapı, programlama dillerinin hemen hepsinde döngü oluşturmak için benzer şekilde kullanılır. “{” ve “}” işaretlerinin arasına, döngüye bağlı olarak çalışacak kod parçası yazılır. If deyiminde olduğu gibi, döngüye bağlı olarak çalıştırılacak kod tek satırsa, bu parantezlerin kullanımına gerek yoktur.

JavaScript’te döngü oluşturmak için kullanılabilecek diğer bir yapının da “while” olduğu söylenebilir. “For” yapısına göre daha sade bir kod görüntüsü oluşturan bu yapı, belirlenen bir şartın sağlanıyor olması hâlinde kendisine bağlı kodu veya kod bloğunu tekrar tekrar çalıştırır.

Döngü işleyişine ilişkin iki önemli deyimden biri “break” deyimidir. Döngü işlerken, herhangi bir noktada bu deyimle karşılaşıldığında döngü şartının sağlanıyor olup olmadığına bakılmaksızın döngü sonlandırılır. “continue” deyimi ise döngünün o an işlenmekte olan döngü adımının bitirilmesini ve bir sonraki adıma geçilmesini sağlar.

Yorum Satırları

Özellikle çok sayıda kod satırından oluşan JavaScript projelerinde kodların arasına, derleyici tarafından görülüp derlenmeyecek notlar veya yorumlar yazmak kullanışlı olmaktadır. Programlama dillerinin hemen hepsinde olduğu gibi JavaScript dilinde de “//” karakteri, bulunduğu satır için kendinden sonra gelen metnin yorum olduğunu belirtir. Birden fazla satırdan oluşan yorum satırları da “/*” karakterleri ile başlatılıp “*/” karakterleriyle sonlandırılır.

Zamanlayıcılar

Web arayüzlerinde bazı işlemlerin belirli bir zaman dilimi sonrasında bir kere veya belirli zaman aralıklarında tekrar tekrar yapılması gerekebilir. Bu gereksinim “setTimeout” ve “setInterval” adlı fonksiyonlarla kolayca karşılanabilir. Kendilerine argüman olarak başka bir fonksiyon adı ve milisaniye cinsinden zaman aralığı verilen bu fonksiyonlar, belirtilen sürenin sonunda kendisine verilen fonksiyonu çalıştırmaktadırlar. “setTimeout” adlı fonksiyon bu işlemi yalnızca bir kere yaparken “setInterval” adlı fonksiyon durdurulana kadar tekrar tekrar yapar.

JQuery

Her geçen gün gelişen JavaScript’in beraberinde getirdiği deyim, fonksiyon ve özelliklerle web sayfaları, masaüstü uygulamalara yakın bir işleve sahip olabilir. Ancak işlevsel web sayfaları oluşturabilmek hem güçlü bir JavaScript deneyimi hem de fazlaca zaman gerektirebilir. Ancak JavaScript’in önceden hazırlanmış kullanımlar içeren kütüphanelere verdiği destek sayesinde, tüm JavaScript geliştiricilerin kullanımına açılmış çok sayıda kütüphane ortaya çıkmıştır. Asgari düzeyde JavaScript deneyiminden fazlasını gerektirmeyen ve JavaScript çözümlerinin hızlıca oluşturulmasını sağlayan bu kütüphanlerin en yaygın kullanıma sahip olanının ise “jQuery” olduğu söylenebilir.

jQuery, 2006 yılında John Resig isimli yazılım mühendisi tarafından geliştirilmiştir. Popülerleşmesinin ardından oldukça büyük bir yazılım geliştirme grubunun desteğini alarak günümüze kadar her geçen gün daha fazla işlev kazanmıştır. Günümüzde ise sağladığı işlevler sayesinde küçük web projelerinden devasa sosyal ağ sitelerine uzanan geniş bir kullanım alanına kavuşmuştur. Resim galerilerinin görüntülenmesi, işlevsel menülerin oluşturulması veya kullanıcı etkileşiminin sağlanması gibi geniş bir işlev yelpazesine sahip olmakla beraber, tamamen ücretsizdir.

İnternetin en çok kullanılan servislerinden biri olan web teknolojisi, JavaScript’in ortaya çıkmasıyla oldukça işlevsel hâle gelmiştir. Web tarayıcıları tarafından derlenmek üzere oluşturulan JavaScript kodları, web sayfaları içinde değişken, şart ifadesi ve döngü gibi yapıların kullanılabilmesine olanak sağlamıştır.

Ortaya çıktığı zamandan beri her geçen gün geliştirilen ve web sayfalarını oluşturan kodların arasına oldukça esnek bir şekilde yerleştirilebilen JavaScript kodları ile hem doküman hem de tarayıcı penceresinin özellikleri üzerinde önemli düzenlemeler yapılabilmektedir. Üzerinde yerleşik olan metin fonksiyonları ile hemen her türlü içerik kontrolü ve düzenlemesi işlemi kolaylıkla gerçekleştirilebilmektedir. Yine yerleşik olarak sunulan matematiksel fonksiyonlar, bir web sayfasında ihtiyaç duyulabilecek hemen her hesaplama işlemini karşılamaktadır. Birçok web işlevinde kendine yer bulan tarih işlemlerine ilişkin fonksiyonlar da JavaScript yapısında kendilerine yer bulmuştur.

JavaScript, kodların kolaylıkla tekrar kullanımını sağlamak üzere fonksiyonların oluşturulmasına da izin vermektedir. Üzerlerine argüman yüklenebilen ve üzerinden sonuç okunabilen bu fonksiyonlar, web sayfası projelerinin daha hızlı tamamlanabilmesini sağlamanın yanı sıra, kod okunabilirliğini artırır ve hata giderme süreçlerini hızlandırır. Kodların tekrar kullanımını kolaylaştırmak ve daha okunabilir web projeleri geliştirmek adına harici bir sayfada yer alan JavaScript kodlarını çağırmak da mümkündür.

Harici JavaScript kodlarının çağırılabiliyor olması, JavaScript ile çalışmayı kolaylaştıran birçok kütüphanenin ortaya çıkmasını sağlamıştır. Bu kütüphaneler arasında en işlevsel ve yaygın olanının jQuery adlı kütüphane olduğu söylenebilir. jquery. com adresinden indirilebilen söz konusu kütüphane, JavaScript ile proje geliştirme sürecini oldukça kolaylaştırmaktadır.