Javascript dili webmasterlar tarafından çok popüler kullanıma sahip bir dinamik web geliştirme yazılımıdır. Javascript ile yazılan betik kodları tarayıcılarla kullanıcılar arasında köprü oluşturan , tarayıcıyla etkileşimde bulunan , sunucularla bağlantılar kuran , ve web platformundaki içeriklerin değiştirilmesini sağlayan bir yapıya sahiptir. Son zamanlarda sunucu ile etkileşimin arttırılması için Node.js kütüphanesi de web geliştirici kişiler tarafından yaygın olarak kullanılmaktadır.
Javascript temel olarak fonksiyonlar üzerinden çalışan nesne yönelimli programdır (Object Oriented Programming) . Bu dil yazılış bakımından C diliyle benzerlik gösterirken, programlaması ve yapı bakımından şeması, Self ve Scheme dilleri ile benzer özelliklerdedir.
Javascript İle Neler Yapılabilir?
Javascript öğrenmesi bakımından kolay bir dildir. Web sayfalarının tüm davranışlarını yönetirken kullanılan javascript ile hareketli oyunlar, web sitelerinde bulunan hava durumu, borsa bilgileri, canlı saat gibi pek çok uygulama geliştirilebilir. Bu özelliklerin dışında javascript diline destek olacak en büyük projelere Github üzerinden ulaşabilir, projeleriniz üzerinde değişiklikler yapabilirsiniz.
Javascript Dilinin Sektördeki Durumu
2000’li yıllardan sonra kullanımı büyük oranda artış gösteren javascript, günümüzde web geliştirme alanında olmazsa olmaz diller arasında yer alıyor. HTML ve CSS gibi dillerle birlikte kullanılan Javascript , C , Python, SQL gibi dillerin önüne geçerek %67.8 gibi muazzam dereceye ulaşan ve popülaritesi oldukça yüksek bir dildir.
En Çok Kullanılan Javascript Kütüphaneleri
Angular
Google tarafından destek verilen ve bir çok yazılımcının da sürekli olarak geliştirdiği açık kaynaklı bir javascript kütüphanesidir. Basit uygulamalar yazarken sıkça kullanılmaktadır. Angular kütüphanesinin 2.versiyonu TypeScript ile desteklenir.
Node.js
Node.js sunucu bazlı olarak çalışan açık kaynak kodlu ve sürekli olarak geliştirilen kütüphanelerden birisidir. Genellikle javascript dili kullanılarak geliştirilir. En büyük avantajlarından birisi yüksek veri aktarımına izin vermesidir. Node.js web sunucusu görevini de üstlenir. Betik dilini yorumlama özelliği ile javanın en sevilen kütüphanelerinden birisidir.
React
Kullanıcı arayüzleri geliştirmek için kullanılan açık kaynak koduna sahip bir javascript kütüphanesidir. React Facebook, Youtube, Netflix, Yahoo, Sony gibi dünyaca ünlü markalarda da kullanılan bir araçtır.
Jquery
Jquery Dom ağaç hiyearşisini kullanan, web sayfalarının tümünü içeren yapılardan oluşur. CSS’te oluşturulan animasyonların daha detaylı bir şekilde oluşturulması, Olayların (Event) işlenmesi gibi görevleri üstlenen kullanımı basit olan bir araçtır. Tarayıcılar arasındaki HTML-Javascript uyumsuzluk sorunlarına da Jquery kütüphanesiyle müdahale edilebilir.
D3.js
Web sayfalarında bulunan anlamsız verileri işleyerek görsel hale dönüştürülmesini sağlayan bir araçtır. Bu belgeleri görsel anlamlı hale getirmek için HTML, SVG ve CSS teknolojilerini kullanır. D3 kitaplığı sayesinde etkileyici web grafikleri ya da istatistiki tablolar oluşturabilirsiniz.
QUnit
QUnit aracı komplike javascript projelerinin test edilmesini sağlar. Projeler manuel olarak test edildiğinde hatalar , sorunlar veya iyileştirmeler gözden kaçabilir. Bu zahmetli test aşaması için QUnit oldukça başarılı bir görevi üstleniyor.
Parsley
Web sitelerinizde kullanıcılarınıza form sunan bir sayfanız varsa parsley kütüphanesi tam da size göre. Form araçlarını doğrulamaya yarayan bu kütüphane kullanılabilirliği büyük ölçüde arttırmaktadır. Örnek vermek gerekirse sitenizde üyelere özel olarak hazırladığınız kullanıcı adı ve şifre bölümü var. Kullanıcılarınız giriş yaparken doldurulması zorunlu alanları doldurmadığında ekrana bir alert ( uyarı) çıkar ve ilgili form doldurulmadığı takdirde sisteme girişi engellenir.
Glimmer
Jquery kitaplığı ile benzer özellikler taşıyan glimmer aracı Ember isimli ekip tarafından ortaya çıkarıldı. Bu araç kullanıcı arabirimi ve dom ağaç yapısına odaklanarak web sitelerinin oluşturulmasına katkıda bulunur.
Anime.js
Hareketli görsel geçişlerle kullanıcılarını etkilemek isteyen web sitesi sahipleri için üretilmiş olan bir javascript kütüphanesidir. Kullanıcı etkileşimini arttıran bu araç animasyonları oluştururken CSS, SVG ve DOM gibi teknolojilerden faydalanır.
Multiple.js
Multiple.js dinamik arka plan görselleri ve uygulamaları oluşturmaya elverişli bir kitaplıktır. Yaratıcı bir web sitesi oluşturmak için tercih edilebilecek araçlar arasında kendine yer bulmuştur.
Javascript Dilinin Dezavantajları
Javascript kodları birçok durumda web geliştiricilere yardımcı olmaktadır. Web dünyasında bulunan bütün yazılım dillerinde olduğu gibi Javascript dilinin de açıkları bulunabiliyor. Bu durumda üçüncü taraf saldırganlar ve dolandırıcıların odak noktaları haline geliyor. Web platformunda oldukça popüler olan javascriptin zayıf yönleri şu şekilde listelenebilir:
- Güvenlik açıkları yaşandığında korunmasızdır.
- Kullanıcılar karşı tarafın kişisel bilgisayarında zararlı bir kod çalıştırmak için bu programlama dilinden faydalanabilir.
- Tarayıcı ve cihazlarda uyumsuzluk sorunları ile karşılaşılabilir.
- Yüksek boyutlu oldukları için web sitelerinin sayfa yükleme hızını (pagespeed insights) düşürür. Sayfa yükleme hızını test etmek için Google’ın test aracını kullanabilirsiniz. (https://developers.google.com/speed/pagespeed/insights/?hl=TR)
- Farklı cihazlarda çalıştırıldığında görünüm sorunları yaşanabilir.
Güvenlik açıkları nedeniyle oluşan bu tür sorunlarla karşılaşmamak için Javascript sürümünüzü sürekli olarak güncellemelisiniz.
Web Sitelerine Javascript Kodlarını Eklemek
Bir web sayfasına javascript kodları <script tagları ile eklenmektedir. Örnek bir javascript kodu şu şekilde görüntülenmelidir:
<script type = “text/javascript”>
Javascript kodlarınızı bu alana yazmalısınız.
</script>
Javascript kodlarınızın web sayfalarınızda başarılı bir şekilde çalışabilmesi için script kodlarını sayfalarınızın kök dizininde bulunan header.php bölümündeki <head> </head> tagları arasına yerleştirmelisiniz. Javascript kodları web sayfalarınızda işlemci yükü harcayacağı için ayrı bir klasör içerisinde sadece kullanacağınız javascript kodlarını depolayıp gerektiği zamanlarda ana dizininize ekleyerek daha dinamik bir web sitesi oluşturabilirsiniz.
Javascriptin Temelleri
Javascript mimari itibariyle içerisinde oldukça detaylı konuları barındırmaktadır. Javascript dersleri için web geliştiricilerin sıkça kullandığı https://www.w3schools.com/js/default.asp platformunu kullanarak teknik bilgilerinizi geliştirebilir , istediğiniz projeleri oluşturmak için bir adım daha ilerleyebilirsiniz. Javascript dilinde bulunan temel konular şu şekilde ele alınabilir:
Değişkenler (var, let)
Javascript üzerinde belirtilen değişkenler verileri geçici sürelerle bellekte saklayarak istemci tarafında size gösterilen değerlerdir. Değişken tanımlamak için iki farklı koddan yararlanılır. Var ve let. Bu komutlar genellikle aynı görevi üstlenirler fakat output kısmıında ufak-tefek farklılıkları bulunmaktadır. Örnek olarak bir değişken şu şekilde tanımlanmaktadır:
var isim;
isim= “Ozcan”Yukarıdaki örnekte ilk olarak var değişkeni tanımlandı. Daha sonrasında tanımlanan bu değişken içerisine yerleştirilen “Ozcan” metni için bellekte bir yer ayrıldı ve bu değeri görüntülemek istediğimizde console.log(isim); kod parçasını kullanarak bellekte yer alan bu string yapısı karşımıza gelecektir. Javascript kodları ekrana yansıtılmadığı için output çıktısını tarayıcı üzerinde CTRL+Shift+I yollarını kullanarak Console kategorisi üzerinde görüntüleyebiliriz.
Sabit Değerler(const)
Bütün bir javascript yapısı için sadece bir defa tanımlanan const değişkenleri herhangi bir değişikliğe sokulamaz. Constant kelimesinin açılımı olan “const” için farklı bir değer girildiğinde geliştirici seçeneklerinde Type Error hatası ile karşılaşılır. Genellikle nesnel değerler için kullanılan const yapısının kullanımı aşağıdaki gibi olmalıdır:
Const pi;
Pi = 3,14;
Console.log(pi);
Veri Şekilleri (tipleri)
Web dünyasında çok fazla veri tipi bulunduğu için javascript dilinde bu veri şekilleri kategorizelendirilmiştir. Javascriptte 2 tür veri bulunmaktadır. Bunlar ilkel ve referans verileridir.
İlkel Değişkenler (Primitive)
- Numbers : Sayıları ifade eden değişkenleri saklar.
- Boolean Bir döngü içerisinde true ya da false değerini tutar. Değişken tutarlıysa true , tutarsızsa false değeri ekrana yazdırılır.
- Undefined: Bir değişken tanımlanmadığında bastırılan komuttur.
- Strings : Kelime ve sözcük yapılarını içerisinde barındıran veri türüdür. Tırnak işareti ile birlikte kullanılmalıdır.
- Null: Tanımlanan veri içerisine herhangi bir değer girilmediğinde null olarak tanımlanır. Hata değildir ve size veri girilmediğini bildiren bir veri türüdür.
Referans Değişkenleri (Reference)
- Nesneler
- Fonksiyonlar
- Diziler
Nesneler (class)
Nesne veri türü içerisinde en kapsamlı bilgileri tutar. Örneğin Egemen isimli kişi 25 yaşındadır. Mavi gözlüdür. 1.75 boyundadır. Mesleği web geliştiricisidir. Bu örnekte kullanılan “Egemen” kişisi erkek nesnesidir ve bu nesne içerisinde tutulan yaş, göz rengi , boyu ve mesleği erkek nesnesine ait olan özelliklerdir. Nesneler çok farklı değişkenler barındırabilir. Fakat bunları tek bir let değişkeni üzerinde toplayarak daha estetik bir görünüme kavuşturabiliriz. Hayattan verilen bu örneğin kodlanmış biçimi aşağıda gösterilmiştir:
let erkek = {
ad : “Mehmet” ,
yas: 25,
gozRengi: “mavi” ,
boy: 1.75 ,
meslek: “Web geliştiricisi”
} ;
Diziler (arrays)
Bir değişken içerisinde birden fazla veriyi tutmak istediğimiz durumlarda javascript array (dizi) yapılarından faydalanırız. Bir senaryo oluşturmak gerekirse: Elif isminde bir web programlamacısı var ve javascript , python , c# ve kotlin dillerini biliyor. Öğrendiği web programlama dillerini göstermek istiyoruz. Bunun için şu komutları vermeliyiz:
Let programlamaDilleri = [];
programlamaDilleri = [“javascript” , “python” , “c#” , “kotlin”];
4 uzunluğa sahip bir dizi oluşturmuş olduk. Dizilerin içerisindeki veriler 0’dan başlayarak listelendiği için 3.sırada olan c# verisine şu indis değeri ile ulaşabiliriz:
programlamaDilleri[2]; Fonksiyonlar(func)
Javascript fonksiyon kullanımı genellikle belirli bir olayı gerçekleştirmek içindir. Herhangi bir işlevi yerine getiren fonksiyonlar en temel tabirle şu şekilde kullanılırlar:
A, B ve C olmak üzere 3 sayının çarpımı
Function carpmaIslemi (a,b,c) {
return a*b*c;
}
carpmaIslemi(5,4,3);
Return değeri gösterilen değişkenleri döndürmek için kullanılan bir terimdir. Console.log gibi düşünülebilir. En sonda belirtilen 5,4 ve 3 değerleri carpmaIslemi fonksiyonunda sırasıyla a,b ve c alanlarına yerleştirilerek çıktı olarak 60 değerinin gözükmesini sağlar.
Koşullu İfadeler(IF)
Eğer anlamına gelen if koşullu ifadesi belirli bir eylemin koşulu geçerli olduğu durumlarda çalışır. Durum geçersiz ise else koşulu devreye girer.Örneğin ;
Let sayi = 15;
if(sayi == 15 ){
console.log(“Belirtilen sayı 15’tir.”);
}
else {
console.log(“Belirtilen sayı 15’ten farklı bir sayıdır.”);
}
Yukarıda verilen örnekte 15 sayı değeri belleğe alındı ve bu değer ilk olarak if alanında tetiklendi. Orada sayının 15 olduğu doğrulandı ve çıktı olarak “Belirtilen sayı 15’tir. ” değeri basıldı. Eğer if bloğunda farklı bir sayı girilseydi fonksiyon else kısmına gidecek ve çıktı olarak “Belirtilen sayı 15’ten farklı bir sayıdır” değeri olacaktı.
Döngüler(for)
For döngüsünün temel çalışma mantığı verilen bir eylemin true olması durumunda sürekli olarak false verene kadar döndürülerek ekrana bastırılmasıdır. Örnek vermek gerekirse 1’den 10’a kadar olan sayılar for döngüsü ile şu şekilde ekrana yazdırılır:
for(i=1; i<=10; i++){
console.log(i);
}
Yukarıdaki örnekte i değeri 1 ile başladı ve fonksiyon sürekli true değerini bastığı için 10 sayısına kadar ulaştı 11 değeri geçerli olmadığı için 1’den 10’a kadar(10 dahil) olan tüm sayılar bastırıldı.
Switch-Case Yapısı
Javascript dilinde farklı olayları farklı koşullar üzerinden değerlendirmek için swith-case yapıları kullanılır. Bu yapılar genellikle bankaların ATM yapılarında kullanılır. Daha basit bir örnekle anlatmak gerekirse bir öğrenci not bilgi sisteminde basit olarak kullanılan switch-case yapısı şu şekilde gösterilebilir:
let not = “Matematik”;
switch (not) {
case “edebiyat” :
console.log(“Edebiyat notu : 75 “);
break;
case “tarih” :
console.log(“Tarih notu : 90”);
break;
case “Matematik” :
console.log(“Matematik notu : 50 “);
break;
case “Coğrafya ” :
console.log(“Coğrafya notu : 85 ”);
break;
}
Verilen örnekte not değişkeni içerisinde “Matematik ” ögesini tutmaktadır. Not değişkeninin değeri switch-case yapısında bulunan her bir değerle tek tek karşılaştırılarak uyuma bakılır. Aynı değere ulaşan “matematik” case bloğuna gelindiğinde ise ekrana “Matematik notu : 50 ” ifadesi bastırılarak fonksiyon sonlandırılır.
