HTML ve JavaScript Web Uygulama Eğitimi

Eğitim Hakkında

DOM ve olaylardan form doğrulamaya, ağ isteklerinden modüler mimari ve yayına uzanan akış

Front-end Apps: HTML Applications with JavaScript Eğitimi, statik HTML sayfalarını saf JavaScript ile etkileşimli uygulamalara dönüştürmeyi öğretir. Katılımcılar DOM üzerinde öğe seçme ve değiştirme, olay yönetimi ve delegasyon, form doğrulama, fetch ile REST API çağrıları ve async/await ile asenkron akış konularını uygular. Program Web Storage ile durum saklama, ES modülleri, bileşen desenleri ve uygulamanın paketlenip yayınlanmasıyla tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; tek bir etkileşimli uygulama, DOM etkileşiminden form ve ağ katmanına kadar adım adım kurulur.

Seviye

Orta Seviye — DOM, olaylar, form doğrulama, fetch ile veri ve modüler mimariyle etkileşimli web uygulamaları

Öğrenme Metodu

Her modülde yazılan JavaScript tarayıcıda çalıştırılıp konsolla denetlenir; teknikler gerçek bir uygulama üzerinde uygulamalı işlenir.

Neden Bu Eğitim?

🖱️Gerçek etkileşim

Kullanıcı tıklamalarına, girdilerine ve olaylara yanıt veren sayfalar kurarak statik HTML'i canlı bir uygulamaya dönüştürürsünüz.

🌐Veriyle çalışma

fetch ve async/await ile uzak API'lerden veri çeker, JSON'u işler ve arayüzü dinamik olarak güncelleyen akışlar kurarsınız.

🧩Çerçeveye hazırlık

DOM, olaylar ve modül mantığını saf JavaScript ile kavrayarak React veya Vue gibi çerçevelere sağlam bir temelle geçersiniz.

Anahtar Konular

javascript eğitimidom eğitimiweb uygulama geliştirme eğitimijavascript kursufetch api eğitimiön yüz geliştirme eğitimivanilla javascript eğitimiform doğrulama eğitimifrontend uygulama eğitimiasenkron javascript

“Bir çerçeve öğrenmeden önce tarayıcının kendisine hükmetmek, sonraki her aracı daha bilinçli ve güçlü kullanmanın anahtarıdır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam

1

HTML ve CSS

Sayfa yapısını kuran temel HTML etiketleri ve basit CSS bilgisi beklenir; uygulama bu yapı üzerine kurulur.

2

Temel JavaScript

Değişken, fonksiyon, dizi ve koşul gibi temel JavaScript kavramlarına aşinalık eğitimden verim için gereklidir.

3

Geliştirici araçları

Tarayıcı konsolu, Elements ve Network sekmelerini açıp inceleme örneklerde sıkça kullanılır.

4

Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı gereklidir; canlı sunucu ile değişiklikler anında görülür.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı DOM ağacında öğe seçmeyi ve değiştirmeyi, olay dinleyicileri eklemeyi, olay yayılımını ve delegasyonu kavrar ve sayfayı dinamik olarak günceller.

Modül 1

DOM Ağacı ve Öğe Seçimi

DOM ağacının düğüm ve eleman yapısı olarak kavranması
querySelector ve querySelectorAll ile öğe seçimi
getElementById ve getElementsByClassName farkları
parentNode, children ve closest ile ağaçta gezinme
NodeList ve HTMLCollection arasındaki fark
Seçilen öğelere referans tutma ve yeniden kullanma

Modül 2

İçerik ve Nitelik Değiştirme

textContent ve innerHTML ile içerik güncelleme
innerHTML kullanımında XSS riski ve güvenli yaklaşım
setAttribute ve dataset ile nitelik yönetimi
classList ile sınıf ekleme, çıkarma ve değiştirme
style özelliğiyle satır içi stil uygulama
createElement ve append ile yeni öğe oluşturma

Modül 3

Olay Dinleyicileri

addEventListener ile olaya dinleyici bağlama
click, input, change ve submit gibi yaygın olaylar
Olay nesnesi ve event.target ile hedef öğe
preventDefault ile varsayılan davranışı durdurma
removeEventListener ile dinleyiciyi kaldırma
Olay seçeneklerinde once ve passive kullanımı

Modül 4

Olay Yayılımı ve Delegasyon

Olay yakalama ve kabarcıklanma aşamalarının farkı
stopPropagation ile yayılımı durdurma
Olay delegasyonu ile tek dinleyiciyle çok öğe yönetimi
Dinamik eklenen öğelerde delegasyonun avantajı
event.currentTarget ve event.target ayrımı
Delegasyonla liste ve tablo etkileşimi kurma

Günün hedefiKatılımcı form öğelerini okuyup işlemeyi, tarayıcının yerleşik doğrulamasını ve Constraint Validation API'sini kullanmayı ve kullanıcıya anlamlı hata geri bildirimi vermeyi öğrenir.

Modül 1

Form Öğeleriyle Çalışma

input, textarea ve select değerlerini okuma
checkbox ve radio durumlarını değerlendirme
value, checked ve selected özelliklerinin kullanımı
input ve change olaylarıyla canlı tepki verme
Form öğelerine programatik odaklanma ve seçim
Çok adımlı form alanlarını mantıksal gruplama

Modül 2

Yerleşik HTML Doğrulama

required, min, max ve pattern nitelikleri
type email, url ve number ile biçim denetimi
minlength ve maxlength ile uzunluk sınırı
Tarayıcının varsayılan doğrulama kabarcığı
novalidate ile yerleşik doğrulamayı kapatma
:valid ve :invalid sözde sınıflarıyla stil verme

Modül 3

Constraint Validation API

checkValidity ve reportValidity metotları
setCustomValidity ile özel hata mesajı tanımlama
validity nesnesi ve hata türlerinin okunması
Alanlar arası bağımlı doğrulama kuralları
Gönderimi engelleyip hataları toplu gösterme
Erişilebilir hata mesajı ve aria-describedby bağı

Modül 4

FormData ve Gönderim

FormData ile form verisini toplu okuma
submit olayında preventDefault ile kontrol alma
Verinin fetch ile sunucuya gönderilmesi
URLSearchParams ile sorgu dizesi oluşturma
Dosya girdisi ve çoklu dosya seçiminin işlenmesi
Gönderim sonrası formu sıfırlama ve geri bildirim

Günün hedefiKatılımcı fetch ile REST API çağrıları yapar, Promise ve async/await ile asenkron akışı yönetir, JSON verisini işler ve Web Storage ile uygulama durumunu saklar.

Modül 1

fetch ve REST İstekleri

fetch ile GET ve POST istekleri gönderme
Response nesnesi ve response.json ile veri okuma
Durum kodları ve response.ok denetimi
İstek başlıkları ve Content-Type ayarı
Sorgu parametreleri ve dinamik uç nokta kurma
REST kaynakları üzerinde listeleme ve ekleme

Modül 2

Promise ve async/await

Promise'in bekleyen, çözülen ve reddedilen durumu
then ve catch zinciriyle akış yönetimi
async fonksiyon ve await ile okunabilir akış
Promise.all ile paralel istekleri bekleme
Promise.race ve zaman aşımı deseni
Asenkron döngülerde sıralı ve paralel seçim

Modül 3

Hata Yönetimi ve Durum

try, catch ve finally ile hata yakalama
Ağ hatası ile HTTP hata durumunun ayrımı
Yükleniyor, hata ve boş durum arayüzleri
AbortController ile isteği iptal etme
Kullanıcıya anlamlı hata mesajı gösterme
Yeniden deneme ve zarif bozulma yaklaşımı

Modül 4

Web Storage ve Önbellek

localStorage ve sessionStorage farkları
JSON.stringify ve JSON.parse ile veri saklama
Uygulama durumunu depolamadan geri yükleme
Depolama sınırları ve veri geçerlilik yönetimi
Kullanıcı tercihlerini kalıcı olarak tutma
storage olayıyla sekmeler arası eşitleme

Günün hedefiKatılımcı ES modülleriyle kodu düzenler, yeniden kullanılabilir bileşen desenleri kurar, istemci tarafı yönlendirme mantığını kavrar ve uygulamayı paketleyip yayınlar.

Modül 1

ES Modülleri ve Kod Düzeni

import ve export ile modüler kod yapısı
Adlandırılmış ve varsayılan dışa aktarım
Modül kapsamı ve küresel kirliliğin önlenmesi
Dosyaları sorumluluğa göre bölme stratejisi
Yardımcı fonksiyonların ayrı modüle alınması
type module ile tarayıcıda modül kullanımı

Modül 2

Bileşen ve Şablon Desenleri

Fonksiyon tabanlı yeniden kullanılabilir bileşen
template etiketi ve content ile klonlama
Veriye göre liste öğelerinin üretilmesi
Durum değişiminde arayüzü yeniden çizme deseni
Olayların bileşen içinde kapsüllenmesi
Web Components ve custom element'e giriş

Modül 3

İstemci Tarafı Yönlendirme

Tek sayfa uygulama mantığının kavranması
history.pushState ile URL güncelleme
popstate olayıyla geri ve ileri yönetimi
Hash tabanlı ve yol tabanlı yönlendirme
Görünümler arası geçişte içerik değişimi
Basit bir istemci yönlendirici kurma

Modül 4

Paketleme ve Yayın

Vite gibi bir araçla geliştirme ortamı
Üretim için derleme ve küçültme adımı
Statik dosyaların yapılandırılması
Netlify veya benzeri ortama dağıtım
Ortam değişkenleri ve API anahtarı yönetimi
Temel performans ve konsol hata denetimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

DOM yönetimi

DOM ağacında öğe seçer, içeriği ve nitelikleri değiştirir ve dinamik olarak öğe oluşturarak sayfayı canlı biçimde güncellersiniz.

✅

Olay mimarisi

Olay dinleyicileri, yayılım ve delegasyon ile dinamik öğeler dahil tüm etkileşimleri tek ve temiz bir yapıyla yönetirsiniz.

✅

Form doğrulama

Yerleşik HTML doğrulamayı ve Constraint Validation API'sini kullanarak erişilebilir hata geri bildirimli güvenilir formlar kurarsınız.

✅

Ağ istekleri

fetch, Promise ve async/await ile REST API'lerden veri çeker, JSON'u işler ve arayüzü asenkron olarak güncellersiniz.

✅

Hata ve durum

Yükleniyor, hata ve boş durumları yönetir, istekleri iptal eder ve kullanıcıya anlamlı geri bildirim veren akışlar kurarsınız.

✅

Veri saklama

localStorage ve sessionStorage ile uygulama durumunu ve kullanıcı tercihlerini kalıcı olarak saklar ve geri yüklersiniz.

✅

Modüler mimari

ES modülleri ve bileşen desenleriyle kodu düzenler, yeniden kullanılabilir parçalar ve basit bir yönlendirme mantığı kurarsınız.

✅

Paketleme ve yayın

Vite gibi bir araçla uygulamayı derler, küçültür ve statik bir ortama dağıtarak çalışan bir ürünü canlıya alırsınız.

Kimler İçin Uygundur?

HTML ve temel JavaScript bilen
çerçeveye geçmeden önce DOM
tarayıcı API'leriyle gerçek uygulama kurmak isteyen ön yüz geliştiriciler ile JavaScript temelini uygulamalı pekiştirmek isteyen web geliştiricileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML ve temel JavaScript bilen, bir çerçeveye geçmeden önce DOM ve tarayıcı API'leriyle gerçek uygulama kurmak isteyen ön yüz geliştiriciler için uygundur. React veya Vue öğrenmeden önce sağlam bir JavaScript temeli edinmek isteyenler de hedef kitledir.

Bir çerçeve mi kullanıyoruz yoksa saf JavaScript mi?

Eğitim tamamen saf, yani çerçevesiz JavaScript üzerine kuruludur. Amaç DOM, olaylar, ağ istekleri ve modül mantığını tarayıcının doğal araçlarıyla kavramaktır. Bu temel, sonrasında React veya Vue gibi çerçeveleri çok daha bilinçli kullanmanızı sağlar.

fetch ve async/await neden önemli?

Modern web uygulamaları verilerini sunucudan asenkron olarak çeker. fetch ile REST API çağrıları yapmayı, Promise ve async/await ile bu asenkron akışı okunabilir biçimde yönetmeyi öğrenmek, dinamik ve veriye dayalı arayüzler kurmanın temelidir.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Tek bir etkileşimli uygulama DOM etkileşiminden form ve ağ katmanına kadar adım adım kurulur. Yüz yüze veya online yapılabilir; içerik kurumun kullandığı teknolojilere göre uyarlanabilir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve geliştirilen örnek uygulamayı belgeler; kurumsal gruplara özel uyarlama yapılabilir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

FRONT-END APPS: HTML APPLICATIONS WITH JAVASCRIPT EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

DOM Ağacı ve Öğe Seçimi

İçerik ve Nitelik Değiştirme

Olay Dinleyicileri

Olay Yayılımı ve Delegasyon

Form Öğeleriyle Çalışma

Yerleşik HTML Doğrulama

Constraint Validation API

FormData ve Gönderim

fetch ve REST İstekleri

Promise ve async/await

Hata Yönetimi ve Durum

Web Storage ve Önbellek

ES Modülleri ve Kod Düzeni

Bileşen ve Şablon Desenleri

İstemci Tarafı Yönlendirme

Paketleme ve Yayın

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Managing CSS with Scripts Eğitimi

Managing HTML Assets, Servers, & Browsers Eğitimi

Other HTML Helpers for ASP.NET MVC Eğitimi

Salesforce ile HTML ve CSS Eğitimi

Tailwind CSS Eğitimi

Temel Web Programlama (HTML, CSS, JavaScript) Eğitimi