Her Web Geliştiricisinin Bilmesi Gereken 7 JavaScript Kavramını Keşfedin

Yayınlanan: 2021-12-24

JavaScript, web geliştiricilerinin etkileşimi artırmak ve kullanıcılar için dinamik deneyimi artırmak için kullandığı bir programlama dilidir. Statista'ya göre, dünya çapındaki yazılım geliştiricilerin yaklaşık %65'i web sayfası geliştirme için JavaScript kullanıyor.

JavaScript, modern internetin vazgeçilmez bir parçasıdır. Web3Techs, web sitelerinin %95'inin JavaScript kullandığını ve dünyanın en popüler programlama dillerinden biri olduğunu bildiriyor. Ek olarak, çok yönlü, yeni başlayanlar için uygun, kompakt ve son derece esnek olup, web geliştiricilerinin JavaScript dilinin üzerine çeşitli araçlar yazmasını kolaylaştırır.

JavaScript Nedir?

JavaScript, web sayfalarında aşağıdakiler gibi karmaşık özellikleri uygulamanıza olanak tanıyan bir istemci tarafı komut dosyası veya programlama dilidir:

  • Görüntü kaydırma
  • Sayfayı yenilemeden web sayfası yükleniyor
  • açılır menüler
  • Hareketli 2D/3D görüntüler
  • kaydırma videoları
  • Etkileşimli haritalar
  • Ses ve video oynatma
  • otomatik tamamlama

JavaScript'in en güçlü işlevlerinden biri, uzak bir sunucuyla eşzamansız etkileşimdir. Programlama dili, kullanıcı etkileşimini kesmeden arka planda sunucu ile iletişim kurar. Örneğin, bir kullanıcı "ayakkabı satın al" yazdığında, "çevrimiçi ayakkabı satın al", "ABD ayakkabı satın al", "yakınımdaki ayakkabı satın al" gibi olası önerilerin bir listesi çıkar.

Bunun nedeni, JavaScript'in mektubu kullanıcının yazdığından daha fazla okuması ve otomatik tamamlama önerisini geri gönderen uzak bir sunucuya göndermesidir. Programlama dilinin kullanıcının makinesindeki işlevi, kullanıcının deneyimini yavaşlatmamak için olabildiğince basittir.

JavaScript'ten önce, web sayfaları kullanıcılara çok az etkileşim seçeneği sunuyordu veya hiç etkileşim seçeneği sunmuyordu, müşterilerin eylemlerini yalnızca sayfaları yüklemek ve bağlantıları tıklamakla sınırlandırıyordu. Ancak 1990'ların sonlarında JavaScript'in gelişmesiyle, web sayfaları animasyonları ve diğer etkileşimli içerik biçimlerini içerebilir.

JavaScript Nasıl Çalışır?

Herhangi bir web uygulamasını kullandığınızda, kullanıcının cihazı ile uzak sunucu arasında bir etkileşim olur. Bu nedenle, örneğin, arama motorunda herhangi bir şey arattığınızda, uzak sunucu yazılımı, verileri okuyan ve gerekli web sayfasını kullanıcının ekranına yükleyen istemci yazılımına gerekli bilgileri gönderir.

Ancak, programlama dili JavaScript, istemcinin cihazındaki tüm işlevleri gerçekleştirir ve uzak sunucuyla etkileşime girmesi gerekmez. Örneğin, cihazınıza bir web sayfası yüklediğinizde ve internet aniden kesildiğinde, web sayfasını yenilemediğiniz sürece yine de görüntüleyebilirsiniz.

JavaScript, HTML, CSS ile çalışır ve Google Chrome, Internet Explorer, Firefox, Opera, Microsoft Edge vb. gibi modern web tarayıcılarıyla uyumludur. Bir web tarayıcısı bir sayfa yüklediğinde, HTML'yi ayrıştırır ve Belge Nesne Modeli'ni (DOM) oluşturur. JavaScript koduna web sayfasının canlı bir görünümünü sunan .

Tarayıcı, resimler ve CSS dosyaları gibi HTML ile ilgili her şeyi saklar. Ardından DOM, web sayfasını oluşturmak için HTML ve CSS'yi birleştirir. JavaScript motoru JavaScript dosyalarını ve satır içi kodları yükledikten sonra, onu hemen çalıştırmaz, HTML ve CSS'nin yüklenmesini bitirmesini bekler.

Tamamlandığında, yazılım JavaScript programını yazılan kodun sırasına göre yürütür. Bu, kodun DOM'yi güncellemesine yardımcı olur ve tarayıcının onu oluşturmasını sağlar.

Tüm Web Geliştiricilerinin Bilmesi Gereken 7 JavaScript Kavramı

Web geliştirme dünyası hızla hareket ederken, JavaScript öğrenmenin uzun vadede size fayda sağlayabilmesini sağlamak çok önemlidir. JavaScript'i arka arkaya dokuzuncu kez en yaygın kullanılan programlama dili olarak taçlandıran 2021 StackOverflow geliştirici anketi ile bu komut dosyasında uzmanlaşmanın gerekliliğinden korkmanıza gerek yok.

Şu anda, dünya çapındaki web sitelerinin %90'ından fazlası, kullanıcı deneyimini geliştirmek ve etkileşimi artırmak için JavaScript'i şu veya bu biçimde kullanıyor. Ayrıca, bu dilde yeterlilik, mevcut pazarda harika iş fırsatlarına sahip bir beceri olan sıfırdan web siteleri oluşturmanıza olanak tanır.

Öyleyse, komut dosyasında ustalaşmak istiyorsanız bilmeniz gereken 7 temel JavaScript kavramına geçelim:

1. JavaScript Kapsamı

JavaScript'te Kapsam, değişkenlerin ve diğer kaynakların JavaScript'e erişilebilirliğini belirleyen geçerli kod bağlamıdır. Karşılaşacağınız iki tür kapsam vardır:

  • Blok dışında bildirilen global değişkenler
  • Blok içinde bildirilen yerel değişkenler

Şimdi, bir fonksiyon oluşturmak ve global kapsamda tanımlanan bir değişkene erişmek istediğinizi varsayalım. Şimdi global bir değişken oluşturalım:

// Global bir değişkeni başlat

var yaratık = “kurt”;

Artık, yerel bir kapsam kullanarak, orijinal değeri değiştirmeden veya yeniden atamadan, dış kapsamdakiyle aynı ada sahip yeni değişkenler oluşturabilirsiniz.

2. JavaScript Kapanışları

JavaScript'te bir kapatma, işlevi ve kullanıcı geliştiricinin işlevi bildirdiği sözcüksel ortamı birleştirir. Dış çevreleyen işlevin değişkenlerine erişebilen bir iç işlevdir. Bir dış işlevden bir iç işleve değişkenler geçirmek gibi bir davranışı genişletmek için kapatmayı kullanabilirsiniz. Ek olarak, dış fonksiyonda tanımlanan bağlama iç fonksiyondan erişebildiğiniz için, olaylarla çalışmanız gerektiğinde yararlıdır.

Kapatmanın üç kapsam zinciri vardır:

  • Kendi kapsamına yani küme parantezlerinde tanımlanan değişkenlere erişebilir.
  • Dış fonksiyonun değişkenlerine erişebilir
  • Global değişkenlere erişebilir

Örneğin aşağıdaki kodu göz önünde bulundurun:

function makeFunc() {

var name = 'Mozilla';

function displayName() {

alert(name);

}

return displayName;

}

var myFunc = makeFunc();

myFunc();

Bu kodu çalıştırdığınızda, dış işlev dış işlevi makeFunc(), yürütülmeden önce displayName() olarak bir iç işlevi döndürür.

3. Kaldırma

JavaScript'te kaldırma, kod yürütmeden önce değişkenleri ve işlev bildirimlerini kapsamlarının en üstüne taşıyabileceğiniz işlemdir. Koddaki işlevleri ve değişkenleri nerede bildirdiğiniz önemli değil, global veya yerel olmasına bakılmaksızın otomatik olarak kapsamın üstüne çıkmalarını sağlar. Bu nedenle, bildirimden önce bir işlev veya değişken kullanabilirsiniz.

Örneğin,

// using test before declaring

console.log(test); // undefined

var test;

Bu programın çıktısı şu şekilde davrandığı için tanımsızdır :

// using test before declaring

var test;

console.log(test); // undefin

Test değişkeni bildirildiği için henüz bir değeri olmadığı için, ona undefined değeri eklenir.

Barındırma sırasında, programda bildirim yukarı hareket etse bile, işlev ve değişken bildirimlerinin derleme aşaması belleğine eklendiğini unutmamalısınız.

4. Not alma

Notlandırma, programın önceki hesaplanan sonuçları önbelleğe alarak işlevin performansını artırdığı optimizasyon işlemidir. JavaScript'in ilişkisel diziler gibi davranma yeteneği, onu önbellek görevi görmek için mükemmel bir aday yapar. Ağır hesaplamalar yapılırken hız gerekliliği, not almayı hayati bir işlev haline getirir. Bunun bir örneği:

// a simple function to add something

const add = (n) => (n + 10);

add(9);

// a simple memoized function to add something

const memoizedAdd = () => {

let cache = {};

return (n) => {

if (n in cache) {

console.log('Fetching from cache');

return cache[n];

}

else {

console.log('Calculating result');

let result = n + 10;

cache[n] = result;

return result;

}

}

}

// returned function from memoizedAdd

const newAdd = memoizedAdd();

console.log(newAdd(9)); // calculated

console.log(newAdd(9)); // cached

5. Modül Kalıbı

Modül, çeşitli JavaScript tasarım modellerinin temeli olan bağımsız, yeniden kullanılabilir kodun küçük bir birimidir. Önemsiz olmayan bir JavaScript tabanlı uygulama oluşturmanız gerektiğinde de hayati önem taşır.

Ek olarak, bir dizi değişkeni ve işlevi tek bir kapsamda bir araya getirmek için bir modül deseni kullanabilirsiniz. Bu modül modelinin faydaları şunlardır:

  • Sürdürülebilirlik – Modül modeli, her kod tek bir mantıksal blokta kapsüllendiğinden daha iyi sürdürülebilirlik sağlar. Bu, bağımsız blokları güncellemeyi kolaylaştırır.
  • Yeniden Kullanılabilirlik – Modül kalıbı, tüm platformda tek bir kod birimini yeniden kullanmanıza da olanak tanır. Ayrıca modülde yer alan işlevleri birden çok kez yeniden kullanabileceğiniz için aynı işlevleri tekrar tekrar tanımlamanız gerekmeyecektir.

6. IIFE

Hemen Çağrılan İşlev İfadesi olarak da bilinen IIFE, JavaScript'te popüler bir tasarım modelidir. Programlama komut dosyası, dışında erişemeyeceğiniz bir işlevin içindeki değişkenleri ve işlevleri tanımlamanıza olanak tanır. Ancak bazen, aynı adı kullanarak global işlevleri veya değişkenleri yanlışlıkla kirlettiğinizde bir sorun ortaya çıkar.

Ancak IIFE, bu sorunu kendi kapsamına sahip olarak, işlevleri ve değişkenleri global olacak şekilde kısıtlayarak çözer. Bu gibi durumlarda, IIFE içinde bildirdiğiniz işlevler ve değişkenler, aynı global işlevlere ve değişkenlere sahip olmalarına rağmen global kapsamı kirletemezler.

7. Polimorfizm

Polimorfizm, farklı biçimlerde tek bir eylem gerçekleştirmenize izin veren Nesne Yönelimli Programlama'nın (OOP) bir ilkesidir. Ayrıca, aynı yöntemi diğer JavaScript nesnelerinde çağırmanıza izin vererek, belirtilen sağlanan nesnelerle herhangi bir davranışı geçersiz kılabilmeleri için nesneleri tasarlamayı mümkün kılar.

Örneğin:

<script>

a sınıfı
{
display()
{

document.writeln("A is invoked");

}

}

class B extends A

{

}

var b=new B();

b.display();

</script>

Burada çıktı:

A çağrılır

Böylece, alt sınıf nesnesinin üst sınıf yöntemini nasıl çağırdığını görebilirsiniz.

Özetlemek gerekirse,

JavaScript dünya çapında en popüler programlama dillerinden biri olduğundan, web geliştirme endüstrisinde çok aranan bir beceri olduğuna şüphe yoktur. Ne yazık ki, talep, bu programlama dilinde usta insanların arzından daha ağır basmaktadır. JavaScript'i keşfetmeyi planlıyorsanız, bu blogdaki yedi kavramda uzmanlaşmak size çok yardımcı olabilir. Minimum kodlama gerektiren yeni başlayanlar için uygun bir dil olduğundan, sonuçları yakında görmeyi bekleyebilirsiniz.

Yazar biyografisi:

Diana Rosell, MyAssignmenthelp.com'da İngiltere, ABD ve Kanada'daki öğrencilere tez açıklamalarıyla ilgili BT yardımı sağlayan profesyonel bir akademik uzmandır. İngiltere'de tanınmış bir üniversiteden Master derecesini tamamladıktan sonra, dünya çapındaki en son BT trendlerini araştırmaya devam etmeyi planlıyor. Buna ek olarak, Rosell hafta sonlarını ailesiyle birlikte kamp yaparak geçirmeyi çok seviyor.