YazılımJavascript Nedir? Dinamik Web Sitesi Oluşturmak İçin Detaylı Bilgiler

Javascript Nedir? Dinamik Web Sitesi Oluşturmak İçin Detaylı Bilgiler

-

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.

Yorum Yapabilirsiniz

Please enter your comment!
Please enter your name here

Son Makaleler

Windows 10 Kayıt Defteri Temizleme İşlemi Nasıl Yapılır?

Windows 10 kayıt defteri temizleme işlemi kullanıcılar için bazı zamanlarda oldukça önemli olabiliyor. Çünkü bu işlem sayesinde bilgisayarda oluşan...

Arduino vs Raspberry Pi: En iyi Kart hangisi?

Tek kartlı bilgisayarlar, yeni başlayanlar için geliştirme ve öğrenme sürecinde kullanılabilmeleri nedeniyle son yıllarda oldukça popüler hale geldi. Tek kartlı...

Hidrofilik polimerler Yeşil bir geleceğin anahtarı

Surrey Üniversitesi ve Bristol Üniversitesi'nden araştırmacılar, rüzgar ve güneş gibi öngörülemeyen kaynaklardan gelen karbonsuz yenilenebilir enerjiyi evcilleştirmek ve depolamak...

Ember JS Nedir, Niçin Kullanılır?

Ember js, web uygulamaları geliştirmek için kullanılan açık kaynaklı ve ücretsiz bir JavaScript çerçevesidir. Daha açık bir dille, bir...

Kuantum Fiziği Neden Önemlidir ve Olmasaydı Neler Olurdu?

Bütün fizikçilerin bildiği gibi kuantum fiziği çok karmaşık bir konudur. Çünkü bu fizik evreninde bizim bildiğimiz kurallar geçerli değildir....

Simyanın Önemi ve Simya ile Bilim İlişkisi

Yüzyıllardır inanlar simyanın uğraşları içerisine girmişlerdir. Bu uğraşların temel amaçlarına yazımı içerisinde değineceğiz. Ancak çok genel bir çerçeve ile...

Önerilen Makaleler

Windows 10 Kayıt Defteri Temizleme İşlemi Nasıl Yapılır?

Windows 10 kayıt defteri temizleme işlemi kullanıcılar için bazı...

Arduino vs Raspberry Pi: En iyi Kart hangisi?

Tek kartlı bilgisayarlar, yeni başlayanlar için geliştirme ve öğrenme...

ilgili diğer makalelerBAĞLANTILI
sizin için öneriliyor