CodeBlanks Logo Icon CodeBlanks
Ücretsiz 4 seviye JavaScript

JavaScript

ES2023+ JavaScript ile değişkenlerden async programlamaya kadar tüm temelleri öğrenin.

JavaScript kursu değişkenler, DOM, async/await, modüller, sınıflar ve metaprogramlama ile tüm seviyeleri kapsar. Her seviye projeler ve meydan okumalarla biter.

  • 430 ders
  • 35 sa 37 dk
  • 10 proje

Hesap gerekmez, hemen başlayabilirsin. İlerlemeni kaydetmek istersen ücretsiz hesap aç

Seviyeler

JavaScript kursu dört seviyede sıfırdan uzmanlığa ilerler. İstediğin seviyeden başlayabilirsin.
Seviyeni bilmiyor musun? Seviye testini çöz
Başlangıç

JavaScript'in temellerini öğrenirsin: değişkenler, veri türleri, döngüler, diziler, nesneler ve fonksiyonlar.

  • Değişkenler ve veri türleri
  • Operatörler
  • Koşullar
  • Sayılar ve Math
133 ders · 10 sa 45 dk Dersleri gör →
Orta

Orta seviye

Arrow fonksiyonlar, closure, DOM, olaylar, async/await ve fetch ile tarayıcı uygulamaları yazarsın.

  • Arrow fonksiyonlar
  • Kapsam
  • Closure
  • DOM temelleri
134 ders · 11 sa 8 dk Dersleri gör →
İleri

İleri seviye

Sınıflar, prototipler, modüller, generator'lar, Proxy ve metaprogramlama ile ileri teknikleri öğrenirsin.

  • ES modülleri
  • Sınıflar
  • Prototipler
  • Destructuring
100 ders · 8 sa 25 dk Dersleri gör →
Uzman

Tasarım desenleri, performans, web workers, güvenlik ve canvas ile uzman seviye konularını işlersin.

  • Tasarım desenleri
  • Performans
  • Gözlemciler ve kanallar
  • Web Workers
63 ders · 5 sa 19 dk Dersleri gör →

Yapacağın projeler

Her seviyede öğrendiklerini gerçek bir sayfada birleştirirsin.

Nasıl çalışıyor?

Kısa anlatım

Her ders tek bir kavramı birkaç kısa kartla anlatır; uzun video ya da metin yok.

Hemen dene

Çoktan seçmeli, boşluk doldurma ve eşleştirme sorularıyla öğrendiğini anında pekiştirirsin.

Kendin yaz

Tarayıcıdaki editörde gerçek kod yazarsın; kodun anında kontrol edilir ve sonucu canlı görürsün.

Müfredat

74 grup · 430 ders · 35 sa 37 dk

JavaScript'in temellerini öğrenirsin: değişkenler, veri türleri, döngüler, diziler, nesneler ve fonksiyonlar.

1
Değişkenler ve veri türleri
6 ders · 27 dk
  1. 1 Değişken tanımlama let, const ve var ile değişken tanımlamayı ve aralarındaki temel farkı öğrenirsin. 4 dk
  2. 2 const ile let arasındaki fark Yeniden atama ve değiştirilemezlik (immutability) kavramlarını öğrenirsin. 5 dk
  3. 3 İlk veri türleri number, string ve boolean temel veri türlerini ve primitive kavramını öğrenirsin. 4 dk
  4. 4 null ve undefined farkı Boş değer ile tanımsız değer arasındaki farkı ve kullanım alanlarını öğrenirsin. 5 dk
  5. 5 typeof operatörü typeof ile bir değişkenin türünü nasıl öğreneceğini ve tuzaklarını görürsün. 4 dk
  6. 6 Özet - Değişkenler ve türler Değişken tanımlama ve veri türlerini birleştirerek küçük bir tanıtım kartı yazarsın. 5 dk
2
Operatörler
6 ders · 29 dk
  1. 1 Aritmetik operatörler +, -, *, /, % ve ** operatörleri ile temel aritmetik işlemleri yapmayı öğrenirsin. 4 dk
  2. 2 Atama operatörleri =, +=, -=, ++ ve -- ile kısayol atamalarını öğrenirsin. 5 dk
  3. 3 Karşılaştırma operatörleri ==, ===, !=, <, >, <= ve >= ile değerleri karşılaştırmayı öğrenirsin. 5 dk
  4. 4 Mantıksal operatörler &&, || ve ! ile boolean mantık kurmayı ve kısayol değerlendirmeyi öğrenirsin. 5 dk
  5. 5 Operatör önceliği İşlem sırasının nasıl belirlendiğini ve parantezlerle önceliği nasıl değiştireceğini öğrenirsin. 5 dk
  6. 6 Özet - Operatörler Aritmetik, karşılaştırma ve mantıksal operatörleri birleştirerek bir not hesaplayıcı yazarsın. 5 dk
3
Koşullar
6 ders · 28 dk
  1. 1 if deyimi if ile bir koşulu nasıl kontrol edeceğini ve kod bloğunu öğrenirsin. 4 dk
  2. 2 else ve else if Alternatif durumlar için else ve else if zincirlerini öğrenirsin. 5 dk
  3. 3 switch deyimi switch, case, break ve default ile çoklu durum seçmeyi öğrenirsin. 5 dk
  4. 4 Ternary operatörü ? : ile tek satırda koşullu ifade yazmayı öğrenirsin. 4 dk
  5. 5 Karşılaştırma tuzakları === ve == arasındaki farkı ve tip dönüşümü tuzaklarını öğrenirsin. 5 dk
  6. 6 Özet - Koşullar if, switch ve ternary'i kullanarak bir haftanın günü uygulaması yazarsın. 5 dk
4
Sayılar ve Math
6 ders · 28 dk
  1. 1 Tamsayı ve ondalık sayılar Tamsayı ve ondalıklı sayıları ve JavaScript'te tek sayı turu olduğunu öğrenirsin. 4 dk
  2. 2 Math nesnesi Math.round, Math.floor ve Math.ceil ile yuvarlama yapmayı öğrenirsin. 5 dk
  3. 3 Math.random ve Math.min/max Rastgele sayı üretmeyi ve Math.min/Math.max ile sınırları öğrenirsin. 5 dk
  4. 4 NaN ve Infinity NaN ve Infinity'nin ne anlama geldiğini ve nasıl kontrol edeceğini öğrenirsin. 4 dk
  5. 5 Sayıya dönüştürme parseInt, parseFloat ve Number() ile stringleri sayıya çevirmeyi öğrenirsin. 5 dk
  6. 6 Özet - Sayılar ve Math Math metodlarını kullanarak bir zar atış simülasyonu yazarsın. 5 dk
5
Proje: Hesap makinesiProje
5 ders · 25 dk
  1. 1 Proje: Hesap makinesi 5 derslik hesap makinesi projesine genel bakış: iki sayı ve bir operatör ile işlem yapacaksın. 4 dk
  2. 2 Sayı girişi ve operatör seçimi Kullanıcıdan iki sayı ve bir operatör alarak işlem hazırlığını yaparsın. 5 dk
  3. 3 İşlemi hesaplama switch ile operatörü seçer ve sonucu hesaplarsın. 5 dk
  4. 4 Hata durumlarını yönetme Bölme hatası ve geçersiz operatör için korumayı eklersin. 5 dk
  5. 5 Proje sonu - Hesap makinesi Tüm parçaları birleştirip hesap makinesini çalışır hale getirirsin. 6 dk
6
Dize temelleri
6 ders · 26 dk
  1. 1 Dize oluşturma Tek ve çift tırnakla dize oluşturmayı ve ikisi arasındaki farkı öğrenirsin. 4 dk
  2. 2 length ve karakter erişimi length özelliğini ve köşe ayraçlarla karaktere erişmeyi öğrenirsin. 4 dk
  3. 3 Dize birleştirme + operatörü ile dizeleri birleştirmeyi ve sıkça yapılan hataları öğrenirsin. 4 dk
  4. 4 Template literals Ters tırnak (backtick) ile template literals ve ${} içinde ifade kullanmayı öğrenirsin. 5 dk
  5. 5 Kaçış dizileri \n, \t, \\ ve \' ile dize içinde özel karakterleri nasıl yazacağını öğrenirsin. 4 dk
  6. 6 Özet - Dize temelleri Dize oluşturma, birleştirme ve template literals ile bir karşılama mesajı oluşturursun. 5 dk
7
Döngüler
6 ders · 28 dk
  1. 1 for döngüsü for döngüsünün yapısını ve sayaç, koşul, artım adımlarını öğrenirsin. 5 dk
  2. 2 while döngüsü Koşul doğru olduğu sürece çalışan while döngüsünü öğrenirsin. 4 dk
  3. 3 do...while döngüsü En az bir kez çalışan do...while döngüsünü ve while'dan farkını öğrenirsin. 4 dk
  4. 4 break ve continue break ile döngüden çıkmayı ve continue ile adım atlamayı öğrenirsin. 5 dk
  5. 5 İç içe döngüler İç içe döngülerle tablo ve matris gibi yapıları nasıl gezeceğini öğrenirsin. 5 dk
  6. 6 Özet - Döngüler for ve while döngülerini kullanarak çarpım tablosu yazdırırsın. 5 dk
8
Diziler temelleri
6 ders · 28 dk
  1. 1 Dizi oluşturma ve erişim Dizi literali oluşturmayı ve index ile elemanlarına erişmeyi öğrenirsin. 4 dk
  2. 2 Diziye eleman ekleme push ve unshift ile diziye sona ve başa eleman eklemeyi öğrenirsin. 5 dk
  3. 3 Diziden eleman çıkarma pop ve shift ile dizinin sonundan ve başından eleman çıkarmayı öğrenirsin. 5 dk
  4. 4 length ve index ilişkisi length özelliğini ve son elemana nasıl erişileceğini öğrenirsin. 4 dk
  5. 5 Çok boyutlu diziler İç içe dizilerle matris ve tablo benzeri yapıları oluşturmayı öğrenirsin. 5 dk
  6. 6 Özet - Diziler temelleri push, pop, shift ve unshift kullanarak bir kuyruk uygulaması yazarsın. 5 dk
9
Fonksiyonlar
6 ders · 28 dk
  1. 1 Fonksiyon tanımlama ve çağırma function anahtar kelimesiyle fonksiyon tanımlayıp çağırmayı öğrenirsin. 4 dk
  2. 2 return deyimi return ile fonksiyondan değer döndürmeyi ve erken çıkışı öğrenirsin. 4 dk
  3. 3 Parametreler ve argümanlar Parametre ile argüman arasındaki farkı ve nasıl kullanıldığını öğrenirsin. 5 dk
  4. 4 Fonksiyon ifadesi Bir değişkene atanan anonim fonksiyon ifadesini öğrenirsin. 5 dk
  5. 5 Kapsam temelleri Fonksiyon içinde tanımlanan değişkenlerin dışarıdan neden erişilemez olduğunu öğrenirsin. 5 dk
  6. 6 Özet - Fonksiyonlar Bir kdv hesaplama fonksiyonu yazıp farklı tutarlarla çağırırsın. 5 dk
10
Proje: Alışveriş sepetiProje
5 ders · 25 dk
  1. 1 Proje: Alışveriş sepeti 5 derslik alışveriş sepeti projesine genel bakış: ürünleri sepete ekleyip toplam tutarı hesaplayacaksın. 4 dk
  2. 2 Ürün listesi tanımlama Ürün adları ve fiyatlarından oluşan diziler tanımlayarak sepetin temelini kurarsın. 5 dk
  3. 3 Sepete ürün ekleme push ile sepete ürün ekler ve döngüyle listeyi gösterirsin. 5 dk
  4. 4 Toplam tutarı hesaplama Döngüyle her ürünün fiyatını toplayarak sepetteki genel toplamı bulursun. 5 dk
  5. 5 Proje sonu - Alışveriş sepeti Sepet uygulamasını tamamlayıp eklenen ürünleri ve toplam tutarı gösterirsin. 6 dk
11
Dizi döngüleri
6 ders · 28 dk
  1. 1 forEach ile döngü forEach ile callback mantığını kullanarak diziyi nasıl gezeceğini öğrenirsin. 5 dk
  2. 2 for...of döngüsü for...of ile dizinin değerleri üzerinde nasıl döneceğini öğrenirsin. 4 dk
  3. 3 indexOf ile arama indexOf ile bir elemanın dizedeki konumunu bulmayı öğrenirsin. 5 dk
  4. 4 includes ile kontrol includes ile bir elemanın dizide olup olmadığını kontrol etmeyi öğrenirsin. 4 dk
  5. 5 findIndex ve some findIndex ile koşulu sağlayan ilk indexi ve some ile herhangi bir eşleşmeyi öğrenirsin. 5 dk
  6. 6 Özet - Dizi döngüleri forEach ve for...of kullanarak bir görev listesini ekrana yazdırırsın. 5 dk
12
Dizi dönüşümleri
6 ders · 31 dk
  1. 1 map ile dönüştürme map ile dizideki her elemanı dönüştürüp yeni bir dizi oluşturmayı öğrenirsin. 5 dk
  2. 2 filter ile süzme filter ile koşulu sağlayan elemanları seçerek yeni dizi oluşturmayı öğrenirsin. 5 dk
  3. 3 find ile bulma find ile koşulu sağlayan ilk elemanı döndürmeyi öğrenirsin. 5 dk
  4. 4 some ve every some ile en az bir eşleşmeyi ve every ile tüm elemanların şartını öğrenirsin. 5 dk
  5. 5 reduce ile birleştirme reduce ile diziyi tek bir değere indirgemeyi ve akümülatör mantığını öğrenirsin. 6 dk
  6. 6 Özet - Dizi dönüşümleri map, filter ve reduce ile bir sınıfın not ortalamasını hesaplarsın. 5 dk
13
Nesneler
6 ders · 30 dk
  1. 1 Nesne oluşturma Nesne literali ile anahtar-değer çiftlerinden nesne oluşturmayı öğrenirsin. 5 dk
  2. 2 Özellik erişimi Nokta ve köşe ayraç notasyonlarıyla özelliğe erişmeyi ve hangisini kullanacağını öğrenirsin. 5 dk
  3. 3 Özellik ekleme ve değiştirme Nesneye yeni özellik eklemeyi ve var olanı değiştirmeyi öğrenirsin. 5 dk
  4. 4 Metot tanımlama Nesne içinde metot tanımlamayı ve kısa yazım şeklini öğrenirsin. 5 dk
  5. 5 this anahtar kelimesi Metot içinde this'in neyi işaret ettiğini ve nasıl çalıştığını öğrenirsin. 5 dk
  6. 6 Özet - Nesneler Nesne ve metotlarını kullanarak bir banka hesabı uygulaması yazarsın. 5 dk
14
Proje: Quiz uygulamasıProje
5 ders · 25 dk
  1. 1 Proje: Quiz uygulaması 5 derslik quiz projesine genel bakış: soru nesneleri tanımlayıp skor hesaplayacaksın. 4 dk
  2. 2 Soru nesneleri tanımlama Soru, seçenekler ve doğru cevabı tutan nesnelerden dizi oluşturursun. 5 dk
  3. 3 Soru gösterme ve cevap alma for...of ile soruları sırayla gösterir ve kullanıcıdan cevap alırsın. 5 dk
  4. 4 Skoru hesaplama if ile doğru cevabı kontrol eder ve skor sayacını artırırsın. 5 dk
  5. 5 Proje sonu - Quiz Quiz uygulamasını tamamlayıp toplam skoru gösterirsin. 6 dk
15
Parametreler
6 ders · 29 dk
  1. 1 Varsayılan parametreler Parametreye varsayılan değer atayarak eksik argümanlarda ne olacağını öğrenirsin. 5 dk
  2. 2 Rest parametresi ...args ile sınırsız argüman toplamayı ve bir dizi olarak almayı öğrenirsin. 5 dk
  3. 3 arguments nesnesi Eski koda sıkça rastlanan arguments nesnesini ve neden rest yerine tercih edilmediğini öğrenirsin. 4 dk
  4. 4 Geri dönüş değeri türleri Fonksiyonun sayı, dizi ve nesne döndürmesini ve birden fazla değer nasıl döneceğini öğrenirsin. 5 dk
  5. 5 Yardımcı fonksiyonlar Büyük bir problemi küçük yardımcı fonksiyonlara bölmeyi öğrenirsin. 5 dk
  6. 6 Özet - Parametreler Varsayılan ve rest parametreleri kullanarak esnek bir sipariş özeti fonksiyonu yazarsın. 5 dk
16
Boolean mantığı
6 ders · 29 dk
  1. 1 Boolean değerleri true ve false değerlerini ve boolean döndüren ifadeleri öğrenirsin. 4 dk
  2. 2 Kısa devre değerlendirme && ve || operatörlerinin değeri nasıl kısa devre ettiğini ve buna dayalı desenleri öğrenirsin. 5 dk
  3. 3 Nullish coalescing ?? operatörü ile null ve undefined için varsayılan değer vermeyi öğrenirsin. 5 dk
  4. 4 İsteğe bağlı zincirleme ?. ile null ve undefined değerlere güvenle erişmeyi öğrenirsin. 5 dk
  5. 5 Mantıksal atama &&=, ||= ve ??= ile kısayol mantıksal atamalarını öğrenirsin. 5 dk
  6. 6 Özet - Boolean mantığı Kısa devre, nullish ve isteğe bağlı zincirlemeyle güvenli bir kullanıcı profili çekme fonksiyonu yazarsın. 5 dk
17
Tür dönüşümü
6 ders · 30 dk
  1. 1 Açık tür dönüşümü String(), Number() ve Boolean() ile açık tür dönüşümünü öğrenirsin. 5 dk
  2. 2 Örtük tür dönüşümü +, == ve if koşullarında örtük tür dönüşümünün nasıl çalıştığını öğrenirsin. 5 dk
  3. 3 == ve === farkı Eşitlik karşılaştırmasında tip dönüşümü yapan ve yapmayan operatörleri öğrenirsin. 5 dk
  4. 4 Truthy ve falsy değerler Hangi değerlerin boolean bağlamda false sayıldığını ve true kabul edildiğini öğrenirsin. 5 dk
  5. 5 Yaygın dönüşüm hataları Sayıya dönüşümde karşılaşılan sık hataları ve nasıl önleneceğini öğrenirsin. 5 dk
  6. 6 Özet - Tür dönüşümü Tür dönüşümünü kullanarak kullanıcıdan alınan girişleri güvenle sayıya çeviren bir fonksiyon yazarsın. 5 dk
18
Proje: Yapılacaklar listesiProje
5 ders · 25 dk
  1. 1 Proje: Yapılacaklar listesi 5 derslik to-do projesine genel bakış: görevleri nesne olarak tutup yöneteceksin. 4 dk
  2. 2 Görev nesnesi tasarımı id, başlık ve tamamlanma durumunu tutan görev nesnesi tasarımını yaparsın. 5 dk
  3. 3 Görev ekleme ve listeleme push ile görev ekler ve for...of ile listeyi gösterirsin. 5 dk
  4. 4 Görev tamamlama ve silme findIndex ile görevi bulup tamamlar ve filter ile silersin. 5 dk
  5. 5 Proje sonu - Yapılacaklar To-do uygulamasını tamamlayıp tüm komutları çalışır hale getirirsin. 6 dk
19
İleri dize metotları
6 ders · 29 dk
  1. 1 slice ve substring slice ve substring ile dizenin bir parçasını kesmeyi öğrenirsin. 5 dk
  2. 2 replace ve replaceAll replace ile ilk eşleşmeyi ve replaceAll ile tüm eşleşmeleri değiştirmeyi öğrenirsin. 5 dk
  3. 3 split ve join split ile dizeyi diziye, join ile diziyi dizeye çevirmeyi öğrenirsin. 5 dk
  4. 4 trim, padStart, padEnd trim ile boşlukları kesmeyi ve padStart/padEnd ile dizenin uzunluğunu tamamlamayı öğrenirsin. 5 dk
  5. 5 Büyük/küçük harf ve includes toUpperCase, toLowerCase ve includes ile dize işlemlerini öğrenirsin. 4 dk
  6. 6 Özet - İleri dize metotları split, map ve join ile bir cümleyi kelime kelime ters çeviren fonksiyon yazarsın. 5 dk
20
Konsol metotları
6 ders · 28 dk
  1. 1 console.log temelleri console.log ile nasıl çıktı alınacağını ve birden fazla argüman geçmeyi öğrenirsin. 4 dk
  2. 2 console.warn ve console.error Uyarı ve hata mesajları için warn ve error metotlarını öğrenirsin. 4 dk
  3. 3 console.table ile tablolar Dizi ve nesneleri tablo olarak gösteren console.table metodunu öğrenirsin. 5 dk
  4. 4 console.group ve groupEnd Konsol çıktılarını gruplamayı ve iç içe gruplar oluşturmayı öğrenirsin. 5 dk
  5. 5 console.time ile performans console.time ve timeEnd ile bir işlemin süresini ölçmeyi öğrenirsin. 5 dk
  6. 6 Özet - Konsol metotları console.group ve console.table ile bir veri setini düzenli şekilde yazdırırsın. 5 dk
21
Hatalar
6 ders · 30 dk
  1. 1 try...catch temelleri try ve catch ile hatayı yakalayıp uygulamanın çökmesini engellemeyi öğrenirsin. 5 dk
  2. 2 throw ile hata fırlatma throw ile kendi hatanı fırlatmayı ve ne zaman kullanılacağını öğrenirsin. 5 dk
  3. 3 Error nesnesi Error nesnesinin message ve name özelliklerini ve nasıl oluşturulacağını öğrenirsin. 5 dk
  4. 4 finally bloğu finally ile hata olsa da olmasa da çalışması gereken temizlik kodunu öğrenirsin. 5 dk
  5. 5 Yaygın hata türleri TypeError, RangeError ve ReferenceError gibi yaygın hata türlerini tanırsın. 5 dk
  6. 6 Özet - Hatalar try/catch/finally ve throw kullanarak böleni 0 olan bir bölme işlemini güvenle yürütürsün. 5 dk
22
Hata ayıklama
6 ders · 29 dk
  1. 1 Hata ayıklama nedir? Hata ayıklama sürecini ve etkili yaklaşımları öğrenirsin. 4 dk
  2. 2 console.trace ile çağrı izi console.trace ile bir fonksiyonun çağrı yığınını görmeyi öğrenirsin. 5 dk
  3. 3 debugger deyimi debugger deyimi ile kodu durdurup DevTools üzerinde adımlamayı öğrenirsin. 5 dk
  4. 4 console.assert ile kontrol console.assert ile koşul sağlanmadığında hata yazdırmayı öğrenirsin. 5 dk
  5. 5 Yaygın hata kalıpları Off-by-one, undefined erişimi ve yanlış karşılaştırma gibi sık hataları tanırsın. 5 dk
  6. 6 Özet - Hata ayıklama console.assert ve console.trace kullanarak bir hesaplama fonksiyonunu test edersin. 5 dk
23
Başlangıç finaliFinal
5 ders · 30 dk
  1. 1 Meydan okuma - Hesap makinesi Aritmetik operatörler, koşullar ve fonksiyonları birleştirerek bir hesap makinesi fonksiyonu yazarsın. 6 dk
  2. 2 Meydan okuma - Dizi işlemleri Dizi, döngü ve reduce ile bir mağaza satış listesinden toplam ciroyu hesaplarsın. 6 dk
  3. 3 Meydan okuma - Nesne yönetimi Nesneler, özellikler ve metotlarla bir kütüphane kitap uygulaması yazarsın. 6 dk
  4. 4 Meydan okuma - Dize işlemleri Dize metotları ve template literals ile bir metin biçimlendirme aracı yazarsın. 6 dk
  5. 5 Meydan okuma - Hata yönetimi try/catch ve throw kullanarak geçerli yaşı kontrol eden bir fonksiyon yazarsın. 6 dk

Arrow fonksiyonlar, closure, DOM, olaylar, async/await ve fetch ile tarayıcı uygulamaları yazarsın.

1
Arrow fonksiyonlar
6 ders · 30 dk
  1. 1 Arrow fonksiyon sözdizimi => ile kısayol fonksiyon yazmayı ve klasik fonksiyondan farkını öğrenirsin. 5 dk
  2. 2 Tek satır ve blok gövde Tek satır implicit return ile blok gövdeli arrow arasındaki farkı öğrenirsin. 5 dk
  3. 3 Arrow ile parametreler Tek parametre, parametresiz ve çok parametreli arrow yazımını öğrenirsin. 5 dk
  4. 4 this bağlamı Arrow fonksiyonlarda this'in sözcüksel olarak bağlandığını ve ne anlama geldiğini öğrenirsin. 5 dk
  5. 5 Arrow vs function Arrow fonksiyonların ne zaman kullanılamayacağını (constructor, arguments) öğrenirsin. 5 dk
  6. 6 Özet - Arrow fonksiyonlar Arrow fonksiyonları kullanarak bir dizi filtreleme ve sıralama aracı yazarsın. 5 dk
2
Kapsam
6 ders · 28 dk
  1. 1 Global kapsam Global kapsamda tanımlanan değişkenlerin her yerden erişilebilir olmasını öğrenirsin. 4 dk
  2. 2 Function kapsam Function içinde tanımlanan değişkenlerin dışarıdan erişilemez olmasını öğrenirsin. 4 dk
  3. 3 Block scope let ve const ile blok kapsamlı değişken tanımlamayı ve var'dan farkını öğrenirsin. 5 dk
  4. 4 Değişken gölgeleme İç kapsamda aynı isimli değişken tanımlayarak dış değişkeni gölgelemeyi öğrenirsin. 5 dk
  5. 5 Hoisting var ve function tanımlarının nasıl yukarı taşınıp let/const'un taşınmadığını öğrenirsin. 5 dk
  6. 6 Özet - Kapsam Global, fonksiyon ve blok kapsamını kullanarak bir sayaç modülü yazarsın. 5 dk
3
Closure
6 ders · 30 dk
  1. 1 Closure nedir? Bir fonksiyonun tanımlandığı kapsamdaki değişkenlere nasıl erişmeye devam ettiğini öğrenirsin. 5 dk
  2. 2 Üretici fonksiyonlar Bir fonksiyonun döndürdüğü fonksiyonun nasıl özel durumu yakaladığını öğrenirsin. 5 dk
  3. 3 Anonim fonksiyon (IIFE) Tanımlandığı anda çalışan IIFE yapısı ve ne zaman kullanılacağını öğrenirsin. 5 dk
  4. 4 Module pattern Closure ile özel değişkenleri dışarıdan koruyan modül desenini öğrenirsin. 5 dk
  5. 5 Closure tuzakları Döngü içinde closure oluştururken yapılan sık hatayı ve nasıl düzeleceğini öğrenirsin. 5 dk
  6. 6 Özet - Closure Closure ve IIFE kullanarak dışarıdan erişilemeyen özel değişkenleri olan bir banka hesabı yazarsın. 5 dk
4
DOM temelleri
6 ders · 29 dk
  1. 1 DOM nedir? Tarayıcının HTML'i nasıl bir ağaca çevirdiğini ve document nesnesini öğrenirsin. 5 dk
  2. 2 getElementById Bir öğeyi id'si ile seçmeyi ve null dönüşüne karşı güvenli yazmayı öğrenirsin. 4 dk
  3. 3 querySelector CSS seçicisi ile ilk eşleşen öğeyi seçmeyi öğrenirsin. 5 dk
  4. 4 querySelectorAll Birden fazla öğeyi seçip NodeList olarak almayı öğrenirsin. 5 dk
  5. 5 textContent ve innerText Bir öğenin metnini okumayı ve değiştirmeyi öğrenirsin. 5 dk
  6. 6 Özet - DOM temelleri querySelector ve textContent kullanarak bir profil kartındaki bilgileri güncellersin. 5 dk
5
DOM manipülasyonu
6 ders · 30 dk
  1. 1 createElement ile öğe oluşturma Yeni bir HTML öğesini oluşturup sayfaya eklemeyi öğrenirsin. 5 dk
  2. 2 appendChild ve removeChild Bir öğeyi başka öğeye eklemeyi ve çıkarmayı öğrenirsin. 5 dk
  3. 3 classList API add, remove, toggle ve contains ile sınıf ekleyip çıkarmayı öğrenirsin. 5 dk
  4. 4 setAttribute ve removeAttribute Özellik eklemeyi, değiştirmeyi ve silmeyi öğrenirsin. 5 dk
  5. 5 innerHTML ve insertAdjacentHTML innerHTML ile içerik değiştirmeyi ve insertAdjacentHTML ile konumlu ekleme yapmayı öğrenirsin. 5 dk
  6. 6 Özet - DOM manipülasyonu createElement ve appendChild ile bir yorum listesine yeni yorum ekleyen fonksiyon yazarsın. 5 dk
6
Olaylar
6 ders · 29 dk
  1. 1 addEventListener temelleri addEventListener ile bir öğeye olay dinleyici eklemeyi ve onclick'ten farkını öğrenirsin. 5 dk
  2. 2 Click olayları Click olayı ile kullanıcının tıklamasına nasıl tepki vereceğini öğrenirsin. 4 dk
  3. 3 Mouse olayları mouseover, mouseout ve mousemove ile fare hareketlerini izlemeyi öğrenirsin. 5 dk
  4. 4 Klavye olayları keydown ve keyup ile basılan tuşları nasıl yakalayacağını öğrenirsin. 5 dk
  5. 5 Event nesnesi Event nesnesinin target ve type özelliklerini kullanmayı öğrenirsin. 5 dk
  6. 6 Özet - Olaylar Click ve keydown olaylarını kullanarak bir kısayol girişi uygulaması yazarsın. 5 dk
7
Olay yönetimi
6 ders · 30 dk
  1. 1 Event bubbling Bir olayın nasıl yukarı doğru kabarcıkladığını ve ne anlama geldiğini öğrenirsin. 5 dk
  2. 2 stopPropagation Bir olayın yukarı yayılmasını durdurmayı ve ne zaman kullanılacağını öğrenirsin. 5 dk
  3. 3 Event delegation Tek bir üst öğeye dinleyici koyarak çok sayıda çocuk öğeyi yönetmeyi öğrenirsin. 5 dk
  4. 4 preventDefault Bir olayın varsayılan davranışını engellemeyi (örneğin form submit) öğrenirsin. 5 dk
  5. 5 once ve passive seçenekleri Bir dinleyicinin tek sefer çalışmasını ve passive ile performans kazanmayı öğrenirsin. 5 dk
  6. 6 Özet - Olay yönetimi Event delegation ve preventDefault ile çok sayıda düğmeyi tek dinleyiciyle yönetirsin. 5 dk
8
Yerel depolama
6 ders · 29 dk
  1. 1 localStorage temelleri localStorage ile tarayıcıda kalıcı anahtar-değer çifti saklamayı öğrenirsin. 5 dk
  2. 2 sessionStorage sessionStorage ile sekmeye özgü geçici veri saklamayı öğrenirsin. 5 dk
  3. 3 JSON ile veri saklama localStorage ile nesne ve dizileri JSON olarak saklamayı öğrenirsin. 5 dk
  4. 4 Storage temizleme removeItem ve clear ile depolama alanını nasıl temizleyeceğini öğrenirsin. 4 dk
  5. 5 Storage olayları Aynı sekmede açık diğer pencerelerde storage değişince haberdar olmayı öğrenirsin. 5 dk
  6. 6 Özet - Yerel depolama localStorage ve JSON kullanarak bir karanlık mod tercihini kaydedip geri yükleyen bir uygulama yazarsın. 5 dk
9
Proje: Yapılacaklar uygulamasıProje
5 ders · 25 dk
  1. 1 Proje: Yapılacaklar uygulaması 5 derslik DOM tabanlı to-do projesine genel bakış: arayüz, olaylar ve localStorage. 4 dk
  2. 2 Arayüz iskeleti createElement ve appendChild ile görev listesi arayüzünü oluşturursun. 5 dk
  3. 3 Görev ekleme addEventListener ve click olayı ile input değerini alıp görev eklersin. 5 dk
  4. 4 Görev tamamlama ve silme - DOM Event delegation ile tek bir dinleyici kullanarak tamamlama ve silme işlemlerini yaparsın. 5 dk
  5. 5 Proje sonu - Todo DOM To-do uygulamasını tamamlayıp arayüzü ve etkileşimleri çalışır hale getirirsin. 6 dk
10
Formlar
6 ders · 29 dk
  1. 1 Form öğelerine erişim Form ve input öğelerine form.elements ve querySelector ile erişmeyi öğrenirsin. 5 dk
  2. 2 Input değerini okuma value özelliği ile input değerini okumayı ve boş girişleri kontrol etmeyi öğrenirsin. 4 dk
  3. 3 Form submit olayı Formun submit olayını yakalayıp preventDefault ile sayfa yenilenmesini engellemeyi öğrenirsin. 5 dk
  4. 4 Basit doğrulama Zorunlu alan ve uzunluk kontrolü ile basit doğrulama yapmayı öğrenirsin. 5 dk
  5. 5 Checkbox ve radio checked özelliği ile checkbox ve radio düğmelerinin durumunu okumayı öğrenirsin. 5 dk
  6. 6 Özet - Formlar Submit olayı ve doğrulama ile bir kayıt formundan veri toplayıp gösteren bir uygulama yazarsın. 5 dk
11
Zamanlayıcılar
6 ders · 30 dk
  1. 1 setTimeout Belirli bir süre sonra bir kez çalışan kodu setTimeout ile yazmayı öğrenirsin. 5 dk
  2. 2 setInterval Belirli aralıklarla tekrar çalışan kodu setInterval ile yazmayı öğrenirsin. 5 dk
  3. 3 clearInterval ile durdurma Bir zamanlayıcıyı clearInterval ve clearTimeout ile durdurmayı öğrenirsin. 5 dk
  4. 4 requestAnimationFrame Akıcı animasyonlar için requestAnimationFrame döngüsünü öğrenirsin. 5 dk
  5. 5 Zamanlayıcı temizleme Bir öğe kaldırıldığında zamanlayıcıyı temizleyerek bellek sızmasını önlemeyi öğrenirsin. 5 dk
  6. 6 Özet - Zamanlayıcılar setInterval ile bir geri sayım sayacı ve requestAnimationFrame ile basit bir animasyon yazarsın. 5 dk
12
Callback'ler
6 ders · 30 dk
  1. 1 Callback fonksiyonlar Bir fonksiyona parametre olarak geçirilen callback mantığını öğrenirsin. 5 dk
  2. 2 Asenkron callback'ler Bir callback'in olay döngüsü (event loop) tarafından nasıl sonradan çağrıldığını öğrenirsin. 5 dk
  3. 3 Hata-önce callback'ler Node.js tarzı hata-önce callback geleneğini öğrenirsin. 5 dk
  4. 4 Callback hell İç içe callback'lerin oluşturduğu piramit yapısını ve neden problemli olduğunu öğrenirsin. 5 dk
  5. 5 Callback'leri yönetme İç içe callback'leri isimli fonksiyonlara bölerek yönetilebilir hale getirmeyi öğrenirsin. 5 dk
  6. 6 Özet - Callback'ler Hata-önce callback kullanarak bir dosya okuma simülasyonu yazarsın. 5 dk
13
Promise'ler
6 ders · 30 dk
  1. 1 Promise nedir? Promise'in pending, fulfilled ve rejected durumlarını öğrenirsin. 5 dk
  2. 2 then ile başarıyı yakalama then ile başarılı sonucu ve dönen değeri yakalamayı öğrenirsin. 5 dk
  3. 3 catch ile hata yakalama catch ile promise hatasını yakalamayı ve hata mesajını kullanmayı öğrenirsin. 5 dk
  4. 4 finally ile temizlik finally ile başarı veya hata ne olursa olsun çalışması gereken temizliği öğrenirsin. 5 dk
  5. 5 Promise.all ve Promise.race Birden fazla promise'i paralel yürüten Promise.all ve Promise.race'i öğrenirsin. 5 dk
  6. 6 Özet - Promise'ler Promise zincirini kullanarak bir kullanıcı bilgisi çekme ve gösterme akışı yazarsın. 5 dk
14
async/await
6 ders · 30 dk
  1. 1 async fonksiyonlar async anahtar kelimesi ile bir fonksiyonun nasıl promise döndürdüğünü öğrenirsin. 5 dk
  2. 2 await operatörü await ile bir promise'in sonucunu nasıl bekleyeceğini öğrenirsin. 5 dk
  3. 3 Asenkron hata yönetimi async fonksiyonlarda try/catch ile hata yakalamayı öğrenirsin. 5 dk
  4. 4 Paralel await Promise.all ve await kullanarak birden fazla işlemi paralel yönetmeyi öğrenirsin. 5 dk
  5. 5 await tümceleri for await...of döngüsü ile asenkron iterable'ları gezmeyi öğrenirsin. 5 dk
  6. 6 Özet - async/await async/await kullanarak sırayla iki API'den veri çekip birleştiren bir akış yazarsın. 5 dk
15
Fetch API
6 ders · 30 dk
  1. 1 fetch temelleri fetch ile bir GET isteği yapmayı ve Response nesnesini öğrenirsin. 5 dk
  2. 2 JSON okuma response.json() ile gelen isteğin gövdesini nasıl okuyacağını öğrenirsin. 5 dk
  3. 3 HTTP headers Headers oluşturmayı ve istekte Accept, Content-Type gibi başlıkları göndermeyi öğrenirsin. 5 dk
  4. 4 POST istekleri method, body ve headers ile bir POST isteği göndermeyi öğrenirsin. 5 dk
  5. 5 HTTP hata yönetimi response.ok ve status ile HTTP hatalarını yakalamayı öğrenirsin. 5 dk
  6. 6 Özet - Fetch API fetch ile GET ve POST istekleri yapan ve hataları yöneten bir istemci fonksiyonu yazarsın. 5 dk
16
Proje: Hava durumu paneliProje
5 ders · 25 dk
  1. 1 Proje: Hava durumu paneli 5 derslik hava durumu projesine genel bakış: şehir girişi, fetch ve DOM güncellemesi. 4 dk
  2. 2 Arayüz ve şehir girişi Input ve düğmeyle şehir girişi yapıp click olayını bağlarsın. 5 dk
  3. 3 Fetch ile veri çekme fetch ve async/await ile bir hava durumu API'sinden veri çekersin. 5 dk
  4. 4 Veriyi DOM'a basma Gelen veriyi template literals ve textContent ile arayüze yansıtırsın. 5 dk
  5. 5 Proje sonu - Hava durumu Hava durumu panelini tamamlayıp şehir girişiyle sıcaklık gösterimini çalıştırırsın. 6 dk
17
Proje: Galeri uygulamasıProje
5 ders · 25 dk
  1. 1 Proje: Galeri uygulaması 5 derslik galeri projesine genel bakış: API'den görsel çekme, ızgara ve büyük görünüm. 4 dk
  2. 2 API'den görsel listesi çekme async/await ile bir API'den görsel listesini çekip json olarak alırsın. 5 dk
  3. 3 Galeri ızgarası oluşturma forEach ve createElement ile her görsel için kart oluşturup ızgaraya eklersin. 5 dk
  4. 4 Büyük görsel görünümü Click olayı ve event delegation ile bir karta tıklanınca büyük görseli gösterirsin. 5 dk
  5. 5 Proje sonu - Galeri Galeri uygulamasını tamamlayıp çekme, ızgara ve büyük görünüm akışını çalıştırırsın. 6 dk
18
Hata yönetimi
6 ders · 30 dk
  1. 1 Özel hata sınıfları Error sınıfını extends ederek kendi hata sınıfını oluşturmayı öğrenirsin. 5 dk
  2. 2 Hata yayılımı Bir hatayı tekrar fırlatarak çağrı zincirinde yukarı taşınmasını öğrenirsin. 5 dk
  3. 3 Çoklu catch desenleri Bir catch bloğu içinde hata türüne göre farklı işlemler yapmayı öğrenirsin. 5 dk
  4. 4 Asenkron hata stratejileri Promise ve async fonksiyonlarda farklı hata yakalama stratejilerini öğrenirsin. 5 dk
  5. 5 Global hata yakalama window.onerror ve unhandledrejection ile yakalanmamış hataları toplamayı öğrenirsin. 5 dk
  6. 6 Özet - Hata yönetimi Özel hata sınıfı ve asenkron hata yönetimi ile bir kullanıcı kayıt akışı yazarsın. 5 dk
19
JSON
6 ders · 29 dk
  1. 1 JSON formatı JSON sözdizimini ve hangi veri türlerini desteklediğini öğrenirsin. 4 dk
  2. 2 JSON.parse JSON.parse ile bir JSON dizesini nesneye çevirmeyi öğrenirsin. 5 dk
  3. 3 JSON.stringify JSON.stringify ile bir nesneyi JSON dizesine çevirmeyi öğrenirsin. 5 dk
  4. 4 structuredClone structuredClone ile bir nesnenin derin kopyasını almayı öğrenirsin. 5 dk
  5. 5 JSON sınırlandırmaları JSON'in undefined, Date ve fonksiyonları nasıl ele aldığı gibi sınırlarını öğrenirsin. 5 dk
  6. 6 Özet - JSON JSON.stringify ve JSON.parse ile bir ayar nesnesini kaydedip geri yükleyen fonksiyon yazarsın. 5 dk
20
Tarih ve saat
6 ders · 30 dk
  1. 1 Date nesnesi oluşturma Date oluşturmayı ve now, parse gibi temel metodları öğrenirsin. 5 dk
  2. 2 Tarih bileşenlerini okuma getFullYear, getMonth ve getDate ile tarih bileşenlerini okumayı öğrenirsin. 5 dk
  3. 3 Tarih formatlama toLocaleString ve ISO format ile tarihi formatlamayı öğrenirsin. 5 dk
  4. 4 Intl.DateTimeFormat Intl.DateTimeFormat ile dile ve bölgeye özgü tarih formatlamayı öğrenirsin. 5 dk
  5. 5 Tarih hesaplamaları Timestamp kullanarak iki tarih arasındaki farkı ve tarih karşılaştırmayı öğrenirsin. 5 dk
  6. 6 Özet - Tarih ve saat Date ve Intl.DateTimeFormat kullanarak bir doğum günü geri sayım uygulaması yazarsın. 5 dk
21
RegExp temelleri
6 ders · 30 dk
  1. 1 RegExp sözdizimi RegExp literal ve nesnesi ile desen oluşturmayı öğrenirsin. 5 dk
  2. 2 Karakter sınıfları \d, \w ve \s gibi karakter sınıflarıyla deseni daraltmayı öğrenirsin. 5 dk
  3. 3 Quantifiers *, +, ? ve {} ile bir kalıbın kaç kez tekrar edeceğini öğrenirsin. 5 dk
  4. 4 test ve match test ile desen eşleşmesini ve match ile eşleşen kısmı çıkarmayı öğrenirsin. 5 dk
  5. 5 replace ve split ile regex replace ve split ile regex kullanarak dize işlemleri yapmayı öğrenirsin. 5 dk
  6. 6 Özet - RegExp temelleri Regex kullanarak bir metinden e-posta benzeri adresleri çıkaran bir doğrulama fonksiyonu yazarsın. 5 dk
22
Modüller
6 ders · 30 dk
  1. 1 Modül nedir? ES modül sisteminin ne sağladığını ve dosya kapsamını öğrenirsin. 5 dk
  2. 2 Named export Birden fazla değeri export ile dışa aktarmayı öğrenirsin. 5 dk
  3. 3 Default export Bir modülden varsayılan değeri dışa aktarmayı öğrenirsin. 5 dk
  4. 4 import deyimi Named ve default import ile modülden değerleri içe aktarmayı öğrenirsin. 5 dk
  5. 5 Module vs script type='module' ile modül ve script arasındaki farkları (strict mode vb.) öğrenirsin. 5 dk
  6. 6 Özet - Modüller Named ve default export/import kullanarak iki dosyalı basit bir hesap modülü oluşturursun. 5 dk
23
Orta seviye finaliFinal
5 ders · 30 dk
  1. 1 Meydan okuma - DOM uygulaması querySelector, createElement ve olaylar ile bir not kartları panosu yazarsın. 6 dk
  2. 2 Meydan okuma - Asenkron akış async/await ve fetch ile hata yönetimi olan bir veri çekme akışı yazarsın. 6 dk
  3. 3 Meydan okuma - Form ve depolama Form doğrulama, localStorage ve JSON ile bir iletişim formu yazarsın. 6 dk
  4. 4 Meydan okuma - Zamanlayıcı ve animasyon setInterval ve requestAnimationFrame ile akıcı bir ilerleme çubuğu yazarsın. 6 dk
  5. 5 Meydan okuma - Modüler yapı ES modülleri ve closure ile özel durumu olan bir sayaç modülü yazarsın. 6 dk

Sınıflar, prototipler, modüller, generator'lar, Proxy ve metaprogramlama ile ileri teknikleri öğrenirsin.

1
ES modülleri
6 ders · 30 dk
  1. 1 Dynamic import import() ifadesi ile modülü çalışma anında yüklemeyi öğrenirsin. 5 dk
  2. 2 Import aliases import ile as kullanarak içe aktarımı yeniden adlandırmayı öğrenirsin. 5 dk
  3. 3 Re-export export ... from ile bir modüldeki değeri başka modüle aktarmayı öğrenirsin. 5 dk
  4. 4 Import meta import.meta ile modül hakkında meta bilgi almayı öğrenirsin. 5 dk
  5. 5 Import maps Import maps ile çıplak modül adlarını nasıl çözeceğini öğrenirsin. 5 dk
  6. 6 Özet - ES modülleri Dynamic import ve re-export kullanarak tembel yüklenen bir modül yapısını oluşturursun. 5 dk
2
Sınıflar
6 ders · 30 dk
  1. 1 Sınıf tanımlama class anahtar kelimesi ile sınıf tanımlamayı öğrenirsin. 5 dk
  2. 2 constructor ve instance constructor ile yeni bir örnek oluşturmayı ve new operatörünü öğrenirsin. 5 dk
  3. 3 Metotlar ve this Sınıf içinde metot tanımlamayı ve this bağlamını öğrenirsin. 5 dk
  4. 4 extends ve super Bir sınıfı extends ile türetmeyi ve super ile üst sınıfı çağırmayı öğrenirsin. 5 dk
  5. 5 static üyeler static ile sınıfa ait metot ve özellikleri öğrenirsin. 5 dk
  6. 6 Özet - Sınıflar extends, super ve static ile bir geometrik şekil sınıf hiyerarşisi yazarsın. 5 dk
3
Prototipler
6 ders · 30 dk
  1. 1 Prototype nedir? Her nesnenin bağlı olduğu prototype nesnesini ve paylaşılan davranışı öğrenirsin. 5 dk
  2. 2 __proto__ ve Object.getPrototypeOf Bir nesnenin prototipini __proto__ ve Object.getPrototypeOf ile öğrenirsin. 5 dk
  3. 3 Object.create Object.create ile var olan bir prototipi kullanarak nesne oluşturmayı öğrenirsin. 5 dk
  4. 4 Prototype zinciri Bir özelliğe erişirken prototype zincirinde nasıl arama yapıldığını öğrenirsin. 5 dk
  5. 5 Prototype pollution Prototype pollution riskini ve hasOwnProperty ile nasıl korunacağını öğrenirsin. 5 dk
  6. 6 Özet - Prototipler Object.create ve prototype zincirini kullanarak bir hayvan miras yapısını yazarsın. 5 dk
4
Proje: Yardımcı kütüphaneProje
5 ders · 25 dk
  1. 1 Proje: Yardımcı kütüphane 5 derslik yardımcı kütüphane projesine genel bakış: sınıf + modül ile tekrar kullanılabilir yapılar. 4 dk
  2. 2 Sınıf iskeleti Bir koleksiyon sınıfı tanımlayıp constructor ile iç durumu kurarsın. 5 dk
  3. 3 Metot ekleme Sınıfa ekleme, çıkarma ve arama metotlarını eklersin. 5 dk
  4. 4 Modül olarak dışa aktarma Sınıfı hem named hem default export ile dışa aktarırsın. 5 dk
  5. 5 Proje sonu - Kütüphane Kütüphaneyi tamamlayıp modülü başka dosyadan içe aktarıp kullanırsın. 6 dk
5
Destructuring
6 ders · 30 dk
  1. 1 Nesne destructuring Bir nesnenin özelliklerini değişkenlere kısayol ile çıkarmayı öğrenirsin. 5 dk
  2. 2 Dizi destructuring Bir dizinin elemanlarını sırayla değişkenlere çıkarmayı öğrenirsin. 5 dk
  3. 3 Varsayılan değerler Destructuring'de eksik özellikler için varsayılan değer vermeyi öğrenirsin. 5 dk
  4. 4 Yeniden adlandırma Destructuring sırasında bir özelliği başka isimle değişkene atamayı öğrenirsin. 5 dk
  5. 5 İç içe destructuring İç içe nesnelerin derin özelliklerini çıkarmayı öğrenirsin. 5 dk
  6. 6 Özet - Destructuring Destructuring kullanarak bir API cevabını ayrıştıran bir fonksiyon yazarsın. 5 dk
6
Spread ve rest
6 ders · 30 dk
  1. 1 Spread operatörü (diziler) ... ile bir dizinin elemanlarını tek tek yaymayı öğrenirsin. 5 dk
  2. 2 Spread (nesneler) ... ile bir nesnenin özelliklerini başka nesneye yaymayı öğrenirsin. 5 dk
  3. 3 Rest ile esnek parametreler Rest parametresini destructuring ile birlikte kullanmayı ve arguments nesnesinden farkını öğrenirsin. 5 dk
  4. 4 Spread ile kopyalama Spread ile dizilerin ve nesnelerin sığ kopyasını almayı öğrenirsin. 5 dk
  5. 5 Fonksiyon çağrısında spread Bir dizinin elemanlarını fonksiyon argümanları olarak yaymayı öğrenirsin. 5 dk
  6. 6 Özet - Spread ve rest Spread ve rest kullanarak bir config nesnesini birleştiren ve varsayılanlarla dolduran fonksiyon yazarsın. 5 dk
7
Map ve Set
6 ders · 30 dk
  1. 1 Map veri yapısı Map ile herhangi bir anahtar türünü kabul eden sıralı anahtar-değer yapısı öğrenirsin. 5 dk
  2. 2 Set veri yapısı Set ile benzersiz değerler tutan bir koleksiyon öğrenirsin. 5 dk
  3. 3 Map iteration Map üzerinde for...of, entries ve forEach ile gezinmeyi öğrenirsin. 5 dk
  4. 4 WeakMap ve WeakSet WeakMap ve WeakSet'in çöp toplayıcı ile nasıl çalıştığını öğrenirsin. 5 dk
  5. 5 Map vs Object Map ve Object arasındaki farkları ve hangisini ne zaman kullanacağını öğrenirsin. 5 dk
  6. 6 Özet - Map ve Set Map ve Set kullanarak bir kelime sayacı uygulaması yazarsın. 5 dk
8
Iterator'lar
6 ders · 30 dk
  1. 1 Iterator protokolü next() metodu ve done/value yapısını öğrenirsin. 5 dk
  2. 2 Iterable protokolü Symbol.iterator ile bir nesnenin nasıl iterable olduğunu öğrenirsin. 5 dk
  3. 3 for...of derinlemesine for...of döngüsünün arka planda iterator protokolünü nasıl kullandığını öğrenirsin. 5 dk
  4. 4 Özel iterator oluşturma Bir nesneye Symbol.iterator ekleyerek özel iterator oluşturmayı öğrenirsin. 5 dk
  5. 5 Yaygın iterable'lar Dizi, dize, NodeList ve Map gibi yaygın iterable'ları öğrenirsin. 5 dk
  6. 6 Özet - Iterator'lar Symbol.iterator kullanarak bir sayı aralığı iterable nesnesi yazarsın. 5 dk
9
Generator'lar
6 ders · 30 dk
  1. 1 Generator fonksiyonlar function* ile generator tanımlamayı ve generator nesnesini öğrenirsin. 5 dk
  2. 2 yield anahtar kelimesi yield ile bir generator'ı nasıl duraklatıp değer döndüreceğini öğrenirsin. 5 dk
  3. 3 Generator iteration next() ile generator'ı adım adım ilerletmeyi öğrenirsin. 5 dk
  4. 4 yield* ile delegasyon yield* ile başka bir generator'ı veya iterable'i nasıl delege edeceğini öğrenirsin. 5 dk
  5. 5 Asenkron generator'lar async function* ile asenkron generator'ları ve for await...of ile gezinmeyi öğrenirsin. 5 dk
  6. 6 Özet - Generator'lar Generator kullanarak sonsuz bir sayı dizisi üreten bir fonksiyon yazarsın. 5 dk
10
Fonksiyonel programlama
6 ders · 30 dk
  1. 1 Saf fonksiyonlar Yan etkisi olmayan, aynı girişe aynı çıktıyı veren saf fonksiyonları öğrenirsin. 5 dk
  2. 2 Immutability Veriyi değiştirmek yerine kopyalayarak güncellemeyi öğrenirsin. 5 dk
  3. 3 Kompozisyon Küçük fonksiyonları birleştirerek büyük fonksiyonlar yapmayı öğrenirsin. 5 dk
  4. 4 Curry Bir fonksiyonu argümanları sırayla alan zincir haline getirmeyi öğrenirsin. 5 dk
  5. 5 Higher-order fonksiyonlar Fonksiyonu argüman alan veya döndüren higher-order fonksiyonları öğrenirsin. 5 dk
  6. 6 Özet - Fonksiyonel programlama compose ve curry kullanarak bir fiyat hesaplama zinciri yazarsın. 5 dk
11
Proxy ve Reflect
6 ders · 30 dk
  1. 1 Proxy nedir? Proxy ile bir nesne üzerindeki işlemleri yakalamayı öğrenirsin. 5 dk
  2. 2 get ve set trap'leri get ve set trap'leri ile özellik okuma ve yazmayı yakalamayı öğrenirsin. 5 dk
  3. 3 has, deleteProperty trap'leri has ve deleteProperty trap'leri ile in operatörünü ve silme işlemini yakalamayı öğrenirsin. 5 dk
  4. 4 Reflect API Reflect nesnesini ve trap içinde varsayılan davranışı nasıl uygulayacağını öğrenirsin. 5 dk
  5. 5 Proxy kullanım örnekleri Doğrulama, loglama ve izleme gibi gerçek proxy kullanımlarını öğrenirsin. 5 dk
  6. 6 Özet - Proxy ve Reflect Proxy ve Reflect kullanarak bir nesnenin özelliklerine erişimi loglayan bir sarmalayıcı yazarsın. 5 dk
12
Symbol
6 ders · 30 dk
  1. 1 Symbol nedir? Symbol ile benzersiz ve değişmez bir primitive değer oluşturmayı öğrenirsin. 5 dk
  2. 2 Symbol.for ve Symbol.keyFor Global symbol kaydından symbol alma ve anahtarını bulmayı öğrenirsin. 5 dk
  3. 3 Well-known symbols Symbol.iterator ve Symbol.toPrimitive gibi yerleşik sembolleri öğrenirsin. 5 dk
  4. 4 Symbol ile gizli özellikler Symbol özelliklerinin nasıl gizli sayıldığını ve for...in'de görünmediğini öğrenirsin. 5 dk
  5. 5 Symbol kullanım örnekleri Enum deseni ve eklenti güvenli özellikler gibi gerçek symbol kullanımlarını öğrenirsin. 5 dk
  6. 6 Özet - Symbol Symbol kullanarak bir nesneye for...in'de görünmeyen özel bir özellik eklersin. 5 dk
13
Asenkron desenler
6 ders · 30 dk
  1. 1 Promise.allSettled Tüm promise'lar sonlanana kadar bekleyip her birinin sonucunu öğrenirsin. 5 dk
  2. 2 Promise.any Promise.any ile ilk başarılı promise'i yakalamayı öğrenirsin. 5 dk
  3. 3 Promise.race derinlemesine Promise.race ile zaman aşımı deseni ve ilk sonucu kullanmayı öğrenirsin. 5 dk
  4. 4 Asenkron iterasyon for await...of ile asenkron iterable'ları gezmeyi öğrenirsin. 5 dk
  5. 5 Eş zamanlılık kontrolü Aynı anda kaç işlem çalışacağını sınırlayarak batch işleme yapmayı öğrenirsin. 5 dk
  6. 6 Özet - Asenkron desenler Promise.allSettled ve for await...of ile birden fazla API çağrısını güvenle yönetirsin. 5 dk
14
History API
6 ders · 30 dk
  1. 1 History API nedir? Tarayıcı oturum geçmişiyle çalışmanın temelini ve history nesnesini öğrenirsin. 5 dk
  2. 2 pushState pushState ile URL'i değiştirip sayfa yeniden yüklenmeden geçmişe yeni kayıt eklemeyi öğrenirsin. 5 dk
  3. 3 replaceState replaceState ile mevcut geçmiş kaydını değiştirmeyi öğrenirsin. 5 dk
  4. 4 popstate olayı Geri ve ileri düğmeleri basınca oluşan popstate olayını yakalamayı öğrenirsin. 5 dk
  5. 5 SPA yönlendirme temelleri History API ile sayfa yenilenmeden çalışan basit bir istemci tarafı yönlendirmeyi öğrenirsin. 5 dk
  6. 6 Özet - History API pushState ve popstate ile iki sayfalı basit bir SPA yönlendirme uygulaması yazarsın. 5 dk
15
IndexedDB
6 ders · 30 dk
  1. 1 IndexedDB nedir? IndexedDB'nin ne sağladığını ve localStorage'dan farkını öğrenirsin. 5 dk
  2. 2 Veritabanı açma indexedDB.open ile bir veritabanı açmayı ve versiyon değişimini öğrenirsin. 5 dk
  3. 3 Object store oluşturma Bir veritabanında object store oluşturmayı ve keyPath'i öğrenirsin. 5 dk
  4. 4 Veri ekleme ve okuma Bir transaction üzerinden veri ekleyip getirmeyi öğrenirsin. 5 dk
  5. 5 Indeks ve sorgu Bir object store'a indeks ekleyip range sorgusu yapmayı öğrenirsin. 5 dk
  6. 6 Özet - IndexedDB IndexedDB kullanarak bir not uygulamasının verilerini kalıcı saklayan bir uygulama yazarsın. 5 dk
16
İleri DOM
6 ders · 30 dk
  1. 1 MutationObserver DOM değişikliklerini gözlemlemek için MutationObserver kullanmayı öğrenirsin. 5 dk
  2. 2 IntersectionObserver Bir öğenin görünür alana girip çıkmasını gözlemleyerek lazy loading yapmayı öğrenirsin. 5 dk
  3. 3 ResizeObserver Bir öğenin boyut değişikliklerini gözlemlemeyi öğrenirsin. 5 dk
  4. 4 Custom elements customElements.define ile kendi HTML öğeni oluşturmayı öğrenirsin. 5 dk
  5. 5 Shadow DOM temelleri Bir öğeye shadow root ekleyerek stilleri ve DOM'u kapsüllemeyi öğrenirsin. 5 dk
  6. 6 Özet - İleri DOM IntersectionObserver ve custom elements ile lazy yüklenen bir resim bileşeni yazarsın. 5 dk
17
İleri seviye finaliFinal
5 ders · 30 dk
  1. 1 Meydan okuma - Sınıf hiyerarşisi Sınıf, extends, super ve static ile bir çalışan-yönetici hiyerarşisi yazarsın. 6 dk
  2. 2 Meydan okuma - Fonksiyonel zincir Saf fonksiyonlar, kompozisyon ve curry ile bir metin işleme zinciri yazarsın. 6 dk
  3. 3 Meydan okuma - Custom iterable Symbol.iterator ve generator ile özel bir iterable koleksiyon yazarsın. 6 dk
  4. 4 Meydan okuma - IndexedDB uygulaması IndexedDB ile bir yer imi uygulamasının veri ekleyip sorgulama akışını yazarsın. 6 dk
  5. 5 Meydan okuma - Custom element Custom elements ve shadow DOM ile bileşen yapısı yazarsın. 6 dk

Tasarım desenleri, performans, web workers, güvenlik ve canvas ile uzman seviye konularını işlersin.

1
Tasarım desenleri
6 ders · 30 dk
  1. 1 Tasarım deseni nedir? Tasarım desenlerinin ne sağladığını ve yaygın katalogları öğrenirsin. 5 dk
  2. 2 Singleton deseni Bir sınıftan yalnızca tek örnek oluşmasını sağlayan Singleton desenini öğrenirsin. 5 dk
  3. 3 Factory deseni Nesne oluşturma mantığını ayrı bir fabrika fonksiyonuna taşıyan deseni öğrenirsin. 5 dk
  4. 4 Observer deseni Bir konunun birden fazla gözlemciyi haberdar etmesi desenini öğrenirsin. 5 dk
  5. 5 Module deseni - modern karşılaştırma Klasik module desenini ES modülleriyle karşılaştırıp ne zaman hangisini kullanacağını öğrenirsin. 5 dk
  6. 6 Özet - Tasarım desenleri Observer ve factory desenlerini kullanarak bir olay yayınlama kütüphanesi yazarsın. 5 dk
2
Performans
6 ders · 30 dk
  1. 1 Performans ölçümü performance.now ve profiling ile bir işlemin süresini ölçmeyi öğrenirsin. 5 dk
  2. 2 Memoization Pahalı bir fonksiyonun sonucunu önbellekte tutarak memoization yapmayı öğrenirsin. 5 dk
  3. 3 Debounce Sık tetiklenen bir olayı debounce ile belirli bir süre bekleyerek çalıştırmayı öğrenirsin. 5 dk
  4. 4 Throttle Throttle ile bir fonksiyonun belirli aralıklarla en fazla bir kez çalışmasını sağlarsın. 5 dk
  5. 5 Bellek sızmaları Sık karşılaşılan bellek sızması nedenlerini ve nasıl önleneceğini öğrenirsin. 5 dk
  6. 6 Özet - Performans Memoization, debounce ve throttle kullanarak bir arama girişi uygulaması yazarsın. 5 dk
3
Gözlemciler ve kanallar
6 ders · 30 dk
  1. 1 PerformanceObserver PerformanceObserver ile performans girdilerini nasıl gözlemleyeceğini öğrenirsin. 5 dk
  2. 2 ResizeObserver derinlemesine ResizeObserver ile öğe boyut değişimlerini ve content box size'i öğrenirsin. 5 dk
  3. 3 Reporting API Reporting API ile tarayıcı raporlarını toplamayı öğrenirsin. 5 dk
  4. 4 Broadcast channel Aynı kökenli sekmeler arası mesajlaşmayı BroadcastChannel ile yapmayı öğrenirsin. 5 dk
  5. 5 MessageChannel MessageChannel ile iki port arası iki yönlü haberleşmeyi öğrenirsin. 5 dk
  6. 6 Özet - Gözlemciler ve kanallar PerformanceObserver ve BroadcastChannel ile çok sekmeli bir metrik toplama demosu yazarsın. 5 dk
4
Web Workers
6 ders · 30 dk
  1. 1 Web Workers nedir? Web Workers ile ağır işlemleri arka plan dizisine taşıyıp ana diziyi bloklamamayı öğrenirsin. 5 dk
  2. 2 Worker oluşturma Worker constructor ile bir worker oluşturmayı ve scriptini bağlamayı öğrenirsin. 5 dk
  3. 3 postMessage Ana diziden worker'a ve worker'dan ana diziye mesaj göndermeyi öğrenirsin. 5 dk
  4. 4 Worker'dan veri alma onmessage ile worker'dan gelen mesajları yakalamayı öğrenirsin. 5 dk
  5. 5 Transferable objects Bellek kopyalamadan büyük veriyi worker'a transfer etmeyi öğrenirsin. 5 dk
  6. 6 Özet - Web Workers Worker kullanarak büyük bir diziyi arka planda sıralayan bir uygulama yazarsın. 5 dk
5
Güvenlik
6 ders · 30 dk
  1. 1 XSS nedir? Cross-site scripting (XSS) saldırılarının ne olduğunu ve türlerini öğrenirsin. 5 dk
  2. 2 innerHTML riskleri innerHTML'in XSS açığı nasıl oluşturduğunu ve güvenli alternatifleri öğrenirsin. 5 dk
  3. 3 CSP temelleri Content Security Policy ile hangi kaynaklardan script çalışabileceğini sınırlamayı öğrenirsin. 5 dk
  4. 4 Güvenli değerlendirme eval ve Function constructor'unun risklerini ve güvenli alternatifleri öğrenirsin. 5 dk
  5. 5 Input sanitization Kullanıcı girişini temizleyip çıktıyı encode ederek XSS önlemeyi öğrenirsin. 5 dk
  6. 6 Özet - Güvenlik textContent, escape fonksiyonu ve CSP başlıklarıyla güvenli bir yorum render fonksiyonu yazarsın. 5 dk
6
Proje: Güvenli yorum uygulamasıProje
5 ders · 25 dk
  1. 1 Proje: Güvenli yorum uygulaması 5 derslik güvenli yorum projesine genel bakış: XSS-korunmalı render ve CSP. 4 dk
  2. 2 Yorum formu iskeleti addEventListener ve DOM ile yorum formunu oluşturursun. 5 dk
  3. 3 XSS-korunmalı render textContent ve escape fonksiyonu ile kullanıcı girişini güvenli gösterirsin. 5 dk
  4. 4 CSP ve nonce CSP başlıkları ve script nonce ile inline script çalışmasını sınırlarsın. 5 dk
  5. 5 Proje sonu - Güvenli yorum Yorum uygulamasını tamamlayıp XSS-korunmalı render ve CSP uygulamasını çalıştırırsın. 6 dk
7
Metaprogramlama
6 ders · 30 dk
  1. 1 Metaprogramlama nedir? Kodun başka kodu nasıl yönettiğini ve yansıma (reflection) kavramını öğrenirsin. 5 dk
  2. 2 Proxy ile doğrulama Proxy ile özellik atamalarını doğrulayan bir sarmalayıcı yazmayı öğrenirsin. 5 dk
  3. 3 Reflect ile varsayılan davranış Reflect ile trap içinde varsayılan davranışı uygulayıp yan etkileri yönetmeyi öğrenirsin. 5 dk
  4. 4 Symbol.iterator ile özel davranış Symbol.iterator ile bir nesneye özel iterasyon davranışı eklemeyi öğrenirsin. 5 dk
  5. 5 Dekoratör deseni Bir fonksiyonu başka bir fonksiyonla sarmalayarak davranış eklemeyi öğrenirsin. 5 dk
  6. 6 Özet - Metaprogramlama Proxy, Reflect ve dekoratör deseni ile bir loglama sarmalayıcı yazarsın. 5 dk
8
Canvas
6 ders · 29 dk
  1. 1 Canvas elementi canvas öğesini ve 2D çizim bağlamını (context) nasıl alacağını öğrenirsin. 5 dk
  2. 2 Çizim koordinatları Canvas koordinat sistemini ve orijin noktasını öğrenirsin. 4 dk
  3. 3 Dikdörtgen çizme fillRect, strokeRect ve clearRect ile dikdörtgen çizmeyi öğrenirsin. 5 dk
  4. 4 Yol ve çizgiler beginPath, moveTo, lineTo ve stroke ile yol ve çizgi çizmeyi öğrenirsin. 5 dk
  5. 5 Çizim animasyonu requestAnimationFrame ile bir canvas animasyon döngüsü kurmayı öğrenirsin. 5 dk
  6. 6 Özet - Canvas fillRect ve requestAnimationFrame kullanarak zıplayan bir top animasyonu yazarsın. 5 dk
9
Proje: Canvas mini oyunProje
5 ders · 25 dk
  1. 1 Proje: Canvas mini oyun 5 derslik canvas mini oyun projesine genel bakış: sahne, hareket, çarpışma ve oyun döngüsü. 4 dk
  2. 2 Sahne ve oyuncu Canvas 2D bağlamında bir sahne ve oyuncu çizimini kurarsın. 5 dk
  3. 3 Hareket ve etkileşim keydown olayı ile oyuncuyu hareket ettirip oyun döngüsünde pozisyon güncellersin. 5 dk
  4. 4 Çarpışma algılama İki dikdörtgenin çarpışıp çarpışmadığını bounding box ile kontrol edersin. 5 dk
  5. 5 Proje sonu - Mini oyun Mini oyunu tamamlayıp sahne, hareket ve çarpışma akışını çalıştırırsın. 6 dk
10
İleri Intl
6 ders · 30 dk
  1. 1 Intl.NumberFormat Intl.NumberFormat ile dile ve bölgeye özgü sayı ve para birimi formatlamayı öğrenirsin. 5 dk
  2. 2 Intl.PluralRules Intl.PluralRules ile dile göre çoğul kategori seçmeyi öğrenirsin. 5 dk
  3. 3 Intl.Collator Intl.Collator ile dile özgü sıralama ve karşılaştırma yapmayı öğrenirsin. 5 dk
  4. 4 Intl.ListFormat Intl.ListFormat ile bir listeyi dile uygun bağlaçları kullanarak birleştirmeyi öğrenirsin. 5 dk
  5. 5 Intl.RelativeTimeFormat Intl.RelativeTimeFormat ile '3 gün önce' gibi görece zaman ifadelerini formatlamayı öğrenirsin. 5 dk
  6. 6 Özet - İleri Intl Intl.NumberFormat, PluralRules ve ListFormat ile bir bildirim metni oluşturucu yazarsın. 5 dk
11
Uzman finaliFinal
5 ders · 30 dk
  1. 1 Meydan okuma - Performans optimizasyonu Memoization, debounce ve performans ölçümü ile bir arama önerisi fonksiyonu yazarsın. 6 dk
  2. 2 Meydan okuma - Worker mimarisi Web Workers ve transferable objects ile büyük bir hesabı arka plan dizisinde yaparsın. 6 dk
  3. 3 Meydan okuma - Proxy ile doğrulama Proxy ve Reflect ile bir ayar nesnesinin özelliklerini doğrulayan bir sarmalayıcı yazarsın. 6 dk
  4. 4 Meydan okuma - Canvas oyun akışı Canvas, requestAnimationFrame ve çarpışma algılama ile bir top-sepet oyunu yazarsın. 6 dk
  5. 5 Meydan okuma - Güvenli uygulama XSS-korunmalı render, CSP ve input sanitization ile güvenli bir form uygulaması yazarsın. 6 dk

Dersler ücretsiz, hesap ilerlemeni korur

Hesap açmak zorunlu değil. Açarsan kaldığın yerden devam eder, emeğini kaybetmezsin.

  • İlerlemen her cihazda kayıtlı
  • XP ve rozet kazan
  • Günlük seriyi koru
  • Kursu bitirince sertifika al
ücretsiz hesap aç

Sık sorulan sorular

JavaScript dersleri ücretsiz mi?

Evet. JavaScript kursundaki 430 dersin tamamı ücretsiz ve hesap açmadan başlayabilirsin.

Başlamak için ön bilgi gerekiyor mu?

Hayır. Başlangıç seviyesi sıfırdan anlatır; yalnızca bir tarayıcı yeterli. Konuyu biliyorsan üst seviyelerden başlayabilirsin.

Kursu bitirmek ne kadar sürer?

Dersler 2–8 dakikalık. Tüm kurs yaklaşık 36 saat; günde 15–20 dakikayla birkaç ayda bitirebilirsin.

Sertifika veriliyor mu?

Evet. Ücretsiz hesapla kursu tamamladığında adına doğrulanabilir bir sertifika oluşturulur.

Hesap açmadan ilerlemem kaybolur mu?

Hesapsız ilerlemen yalnızca kullandığın tarayıcıda tutulur. Ücretsiz hesap açtığında bu ilerleme hesabına aktarılır.

Sonraki adım PHP

Modern PHP 8.3 ile değişkenlerden OOP, PDO ve uzman seviye konulara kadar tüm temelleri öğrenin.