Özet ve sonraki adımlar
Bu sayfa yeni sözdizimi eklemez. Kursun tamamını tek siparişe koyar: içecek tea, boyut regular. Açıklayabilmeniz gereken satır tea / regular.
Bu satır nereden geldi
Erişilebilirlik sayfası onu gerçek bir button type=button ile yazdı. Mouse, Enter ve Space aynı tıklamayı çalıştırır. aria-live="polite" geçerli cümlenin ardından söyler. size yoksa button.disabled true olur ve düğme kalır. Odak düğmede kalır.
İki önceki satır
Hata ayıklamada { drink: "tea", size: "regular" } üzerinde order.cup okundu. Nesnede cup değil size vardır. console.error fırlatmaz, betik sürer. O satır fixed / tea / regular idi.
throw new Error("missing size") label işlevini return öncesinde durdurur. catch, error.message değerini okur; bu missing size olur. error.name Error değeridir. finally her iki yolda da çalışır. O satır caught / missing size idi.
Yedi satır, tek sipariş
Her satır aynı siparişin bir parçasıdır. Sonuç ince geliyorsa yalnızca ilgili oturumu açın.
📊 Kurs bir siparişle ne yapar
| Grup | Yapabilirsiniz | Bir sonuç |
|---|---|---|
| Değerler ve akış | değer saklamak, if ile seçmek, listeyi dolaşmak | tea / regular |
| İşlevler | siparişi alıp bir satır döndürmek | tea / regular |
| Nesneler ve diziler | alanı okumak, JSON okumak, kopyalamak | { drink: "tea", size: "regular" } |
| Sayfa | düğmeyi bulup satırı yazmak | tea / regular |
| Bekleme | bir async işlevi duraklatmak; fetch bir Response verir | response.ok, sonra response.json() |
| Daha yeni sözdizimi | adları çekmek, metni kurmak, sınıfı oluşturmak | tea / regular |
| Özen | gerçek özelliği okumak, bilerek fırlatmak, düğmeyi tutmak | fixed / tea / regular, sonra caught / missing size, sonra tea / regular |
Harita bir anımsatmadır. İkinci bir kurs değildir ve sorusu yoktur.
Değerler ve kararlar
tea ve regular değerlerini saklar, karşılaştırır ve tekrarlarsınız. if seçer. break bir döngüden çıkar. continue bir öğeyi atlar ve sürer.
İşlevler
Bir işlev tea / regular döndürür. Ok işlevi daha kısa bir işlevdir. Bir closure, dış işlev döndükten sonra da bağlamayı görür.
Nesneler, JSON ve diziler
JSON.parse metni nesneye çevirir. map yeni bir dizi kurar. find tek bir eşleşme döndürür. spread kopyalar. rest adlandırmadığınızı toplar. Kopya yüzeyseldir.
Sayfa
querySelector düğmeyi bulur. textContent satırı yazar. setTimeout daha sonra çalışır ve düğmenin yerini almaz.
Bekleme
await yalnızca o async işlevi duraklatır. Sayfanın geri kalanı sürer. Bir async işlev her zaman bir Promise döndürür. fetch bir Response ile çözülür, ayrıştırılmış gövdeyle değil. response.json() başka bir Promise döndürür. HTTP 404 genellikle fetch çağrısını reddetmez. response.ok değerine bakın. Ağ kopması reddedebilir.
Daha yeni sözdizimi
Ayırma drink ve size değerlerini adlarıyla çeker. Eksik iç içe nesne fırlatabilir. Şablon dizeleri ${...} yerini çalışma anında doldurur. Modüller window üzerinde değildir ve HTTP ile yüklenir. Alt sınıf this öncesinde super çağırır. Özel alan sınıfın içinde kalır.
Sipariş yanlışsa
Olmayan özelliği değil size değerini okuyun. console.error fırlatmaz, sonraki satır çalışır. throw işlevi durdurur, yalnızca catch sürdürür. Eylemi bir düğmeye koyun. Odak çerçevesini görünür bırakın.
Sırada ne var
Sonraki sayfa kısa bir yapılacaklar listesi: eklemek, tamamlandı işaretlemek ve kaldırmak. Bu hâlâ çekirdek yolun içindedir.
Ardından isteğe bağlı: strict mode, Map ve Set, düzenli ifadeler, web storage, cookies ve sınıf kalıtımı. Çekirdek yolu bitirmek için gerekmezler.
Şu beş satırı sesli söyleyin
- Düğme tea / regular yazar ve aria-live="polite" geçerli cümleden sonra söyler
- console.error fırlatmaz; hata ayıklama satırı fixed / tea / regular idi
- throw new Error("missing size") label işlevini return öncesinde durdurur; catch missing size okur; satır caught / missing size idi
- fetch bir Response ile çözülür; response.json() öncesinde response.ok bakın
- Sonraki sayfa yapılacaklar listesi