Ara.31

Ara.27

Hızlandırılmış EcmaScript 6+ Dersleri – 13: Babel

Makale serimiz boyunca işlemiş olduğumuz EcmaScript 6 kodlarımızı tarayıcılarımızda (en azından benim tarayıcımda) sorunsuzca kullandık. Ancak bölüm başında da belirttiğim gibi bazı kullanıcılar hala eski sürüm tarayıcılar kullanıyor olabilir ve bu da EcmaScript 6 standartlarının desteklenememesine sebep olabilir. İşimizi garantiye almak adına Babel isimli bir JavaScript derleyicisidir. ES2015+ üzeri kod standartlarını eski JavaScript motorlar ı tarafından çalıştırılmasını sağlar.

Projelerimizde en üst seviyede babel.js’i eklersek, diğer script dosyalarındaki kodlar eski sürüme istemci tarafında dönüştürülmüş olacaktır.

Genel

Ara.24

Ara.24

Hızlandırılmış EcmaScript 6+ Dersleri – 12: Promise (Söz)

Promise, yani Türkçe karşılığı ile “Söz Vermek”, JavaScript’te bir işi yapmak için istekte bulunduğumuzda bu işin gerçekten yapılıp yapılmadığına dair karşı tarafın bize söz vermesi anlamına gelir. Bir iş yapmaya zorlanır, ancak yapılamazsa da yine bu durum haber verilir. Böylece istek yapıldığında oldu mu olmadı mı kontrolü yapmak ve buna göre programın akışına devam etmek oldukça önemlidir.

Promise olmadan önce bir şekilde Event yönetimi yaparak bir işlemin başarılı olup olmadığını kontrol edebiliyorduk, ancak oldukça elverişsiz ve çöp kod oluşmasına neden oluyordu.

Mesela bir resmi sayfaya yüklemek istediğimizde yüklenip yüklenmediğini kontrol edeli…

EcmaScript 6+

Ara.16

Hızlandırılmış EcmaScript 6+ Dersleri – 11: Class (Sınıf) Yapısı ile Çalışmak

JavaScript, oldukça dinamik bir yapıya sahiptir. EcmaScript 6 öncesinde JavaScript’te Nesne Tabanlı Programlama yönelimi ile programlama yapmak biraz zahmetli bir işti. Aslında direkt olarak NYP (OOP) desteklemez, fakat Class yerine Object’ler oluşturmak ve bunları prototipleyerek kullanarak bir şekilde işimizi görüyorduk. Microsoft tarafında geliştirilen TypeScript ile de nesne yönelimli programlama daha güçlü bir hale gelmişti. Aşağıdaki EcmaScript 6 öncesinde prototipleme metodunun kullanımını ve aynı işlevi yapan Class’ı inceleyin.

EcmaScript 6+

Ara.10

Hızlandırılmış EcmaScript 6+ Dersleri – 10: Modüller (import, export)

Yeni nesil JavaScript Framework’lerin, özellikle de React’ın temelini oluşturan modülleri kullanmanız, her alanda işinizi oldukça kolaylaştıracak ve daha profesyonel, ölçeklendirilebilir ve sürdürülebilir projeler yapmanızı sağlayacaktır.

Modüller, iki veya daha fazla dosya arasında import ve export deyimleri ile fonksiyon ve sınıfların aktarılabilmesini sağlayarak modüler programlamanın temellerini sağlar.

Temel mantığı kavrayarak bir örnek üzerinden modül kullanımını öğrenelim.

EcmaScript 6+

Ara.02

Hızlandırılmış EcmaScript 6+ Dersleri – 9: Yeni Built-in (Yerleşik) Metotlar

EcmaScript 6 ile birlikte bazı yerleşik metotlar gelmiştir. Bunlardan sıklıkla işimize yarayabilecek olanları kısa kısa örneklerle inceleyelim…

Object Özellik Atamaları

Bir Object’e başka Object’lerin eklenmesi durumudur.  Eğer hedef nesnede aynı key’ler varsa, kaynaktaki key’ler üzerine yazılır ve diğer key’ler de eklenir.

Object.assign(hedef_nesne, …kaynak_nesneler)

EcmaScript 6+

Kas.28

Kas.28

Kas.25

Hızlandırılmış EcmaScript 6+ Dersleri – 6: Template (Şablon) Kullanımı

Template, yani şablon kullanımı aslında bir metin dizisi içerisinde değişken kullanılabilmesine izin veren yapılardır. Şablon olarak anılması, tek bir metin dizisi içerisine çeşitli veri beslemeleri yapılarak farklı farklı sonuçlar elde edilebilmesini sağlaması özelliğini gösterir. Normal JavaScript’te aşağıdaki gibi değişkenleri ve metinleri birleştirebiliyorduk.

EcmaScript 6+