JavaScript ile Dinamik Web Sayfaları Eğitimi

Eğitim Hakkında

DOM seçicilerden olay yönetimine, form doğrulamadan fetch ile dinamik içerik yüklemeye

Web Fundamentals: Dynamic Web Pages with JavaScript Eğitimi, statik HTML sayfalarını JavaScript ile etkileşimli hale getirmeyi öğretir. Katılımcılar DOM ağacını gezer, elemanları seçip değiştirir, olayları dinler ve kullanıcı etkileşimine yanıt verir. Form doğrulama, dinamik liste oluşturma, fetch ile sunucudan veri çekme ve sayfayı yeniden yüklemeden güncelleme işlenir. Program, API'den veri çeken dinamik bir tek sayfa uygulamasını sıfırdan kurmakla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; DOM, olay ve fetch kavramları adım adım kodlanarak API'den veri çeken dinamik bir uygulamaya dönüştürülür.

Seviye

Temel Seviye — JavaScript ile DOM manipülasyonu, olay yönetimi ve fetch ile dinamik web sayfaları

Öğrenme Metodu

Her kavram küçük canlı örneklerle kodlanır; üç gün boyunca statik bir sayfa, API'den veri çeken dinamik bir uygulamaya dönüştürülür.

Neden Bu Eğitim?

✨Etkileşim gücü

Statik HTML sayfalarını kullanıcı etkileşimine yanıt veren canlı arayüzlere dönüştürerek modern web geliştirmenin temelini kazanırsınız.

🌐Dinamik veri

fetch ile sunucudan veri çekip sayfayı yeniden yüklemeden güncelleyerek gerçek uygulamaların arkasındaki akışı kavrarsınız.

🚀Sağlam temel

DOM, olay ve asenkron mantığı sağlam öğrenerek React ve Vue gibi modern çerçevelere geçişte çok daha güvenli bir temel edinirsiniz.

Anahtar Konular

javascript eğitimidom manipülasyonu eğitimidinamik web sayfası javascriptfetch api eğitimiweb geliştirme temelleriön yüz geliştirme kursujavascript olay yönetimiform doğrulama javascriptfront-end eğitimiweb programlama başlangıç

“Bir web sayfasını canlı kılan şey süsü değil, kullanıcının her hareketine anlamlı yanıt verebilmesidir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve hazırlık

1

HTML bilgisi

Etiketler, öznitelikler ve temel sayfa yapısını kurabilecek düzeyde HTML bilgisi beklenir.

2

CSS temeli

Seçiciler, sınıflar ve temel stil kurallarıyla elemanları biçimlendirebilmek faydalıdır.

3

Programlama hevesi

Programlamaya yeni olanlar için uygundur; temel mantık ve problem çözme isteği yeterlidir.

4

Geliştirme ortamı

VS Code, modern bir tarayıcı ve geliştirici araçlarına erişimin hazır olması önerilir.

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ını kavrar, elemanları seçicilerle bulur, metin ve HTML içeriğini değiştirir, sınıf ve stil ile görünümü günceller ve yeni eleman oluşturur.

Modül 1

DOM Ağacını Anlama

Tarayıcının HTML'i DOM ağacına çevirmesi
Düğüm (node) ve eleman kavramı farkı
document nesnesi ve giriş noktası
Ebeveyn, çocuk ve kardeş ilişkileri
Geliştirici araçlarıyla DOM'u inceleme
DOM ile HTML kaynağı arasındaki ilişki

Modül 2

Eleman Seçme Yöntemleri

getElementById ile tekil eleman seçme
querySelector ile CSS seçici kullanımı
querySelectorAll ile çoklu eleman seçme
getElementsByClassName ve tag ile seçim
NodeList üzerinde döngüyle gezinme
Seçimi belirli bir kapsayıcıyla sınırlama

Modül 3

İçerik ve Öznitelik Değiştirme

textContent ile metin içeriğini güncelleme
innerHTML ile HTML parçası ekleme riskleri
setAttribute ve getAttribute kullanımı
value ile form alanı değerine erişim
data-* öznitelikleri ile veri saklama
innerHTML yerine güvenli metin atama

Modül 4

Stil ve Eleman Oluşturma

classList ile sınıf ekleme ve kaldırma
style özelliğiyle satır içi stil verme
createElement ile yeni eleman üretme
appendChild ve append ile ağaca ekleme
remove ile elemanı DOM'dan çıkarma
Belgenin parçası (fragment) ile verimli ekleme

Günün hedefiKatılımcı olay dinleyicileri ekler, tıklama, girdi ve gönderim olaylarına yanıt verir, formları doğrular ve olay yayılımı ile delegasyonu uygulayarak etkileşim kurar.

Modül 1

Olay Dinleme Temelleri

addEventListener ile olay dinleyici ekleme
click, mouseover ve keydown olayları
Olay (event) nesnesi ve bilgilerine erişim
removeEventListener ile dinleyici kaldırma
Satır içi onclick ile ayrımın gerekçesi
Birden çok dinleyiciyi aynı elemana ekleme

Modül 2

Olay Yayılımı ve Delegasyon

Olay kabarcıklanması (bubbling) mantığı
preventDefault ile varsayılanı engelleme
stopPropagation ile yayılımı durdurma
event.target ile kaynağı belirleme
Olay delegasyonu ile verimli dinleme
Dinamik eklenen elemanları dinleme

Modül 3

Form Yönetimi ve Girdi

submit olayını yakalayıp gönderimi yönetme
input ve change ile anlık değer okuma
FormData ile form alanlarını toplama
Checkbox, radio ve select değerini okuma
Form alanlarını JavaScript ile sıfırlama
Gönderim öncesi kullanıcıya geri bildirim

Modül 4

Girdi Doğrulama Teknikleri

Boş ve geçersiz alanları tespit etme
E-posta ve telefon için regex doğrulama
Hata mesajlarını DOM'da gösterme
HTML5 doğrulama öznitelikleriyle birleştirme
Gerçek zamanlı doğrulama geri bildirimi
Erişilebilir hata sunumu ilkeleri

Günün hedefiKatılımcı fetch ile API'den veri çeker, JSON'u işler, async/await ile asenkron akışı yönetir, dinamik liste üretir ve öğrendiklerini tek sayfa uygulamada birleştirir.

Modül 1

fetch ile Veri Çekme

fetch API ile sunucuya istek gönderme
GET isteğiyle sunucudan veri alma akışı
response.json ile yanıtı ayrıştırma
HTTP durum kodlarını kontrol etme
Promise zinciri (then/catch) kullanımı
CORS kavramına temel düzeyde giriş

Modül 2

Asenkron JavaScript

Senkron ve asenkron çalışma farkı
Callback ve Promise kavramı ilişkisi
async/await ile okunur asenkron kod
try/catch ile asenkron hata yönetimi
Yükleniyor durumu ve kullanıcı geri bildirimi
Birden çok isteği birlikte yönetme

Modül 3

Dinamik İçerik Üretme

API verisinden dinamik liste oluşturma
Şablon biçiminde HTML parçası üretme
Veriyi filtreleme ve arama ile gösterme
Boş durum ve hata durumunu ekranda sunma
Sayfalama veya sonsuz kaydırma mantığı
DOM güncellemelerini verimli yapma

Modül 4

Bitirme Projesi: Dinamik Uygulama

Herkese açık bir REST API seçme
fetch ile veriyi çekip listeleme
Arama ve filtreleme etkileşimi ekleme
Form ile kullanıcı girdisi alıp doğrulama
Yükleniyor ve hata durumlarını yönetme
Uygulamayı statik barındırmaya yayımlama

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

DOM hâkimiyeti

DOM ağacını kavrar, elemanları seçicilerle bulur ve içerik, öznitelik ve stillerini JavaScript ile güvenle güncellersiniz.

✅

Eleman oluşturma

createElement ve append ile dinamik olarak yeni elemanlar üretir, DOM'a ekler ve gereksiz olanları kaldırırsınız.

✅

Olay yönetimi

addEventListener ile tıklama, girdi ve gönderim olaylarını dinler, olay nesnesinden gelen bilgiyle etkileşim kurarsınız.

✅

Olay delegasyonu

Olay kabarcıklanmasını kavrar, delegasyon ile dinamik elemanları verimli dinler ve preventDefault ile akışı yönetirsiniz.

✅

Form ve doğrulama

Form gönderimini yönetir, FormData ile alanları toplar ve kullanıcı girdisini gerçek zamanlı doğrulayarak geri bildirim verirsiniz.

✅

fetch ile veri

fetch API ile sunucudan veri çeker, JSON yanıtını işler ve HTTP durum kodlarını kontrol ederek hataları yönetirsiniz.

✅

Asenkron akış

async/await ile asenkron kodu okunur biçimde yazar, yükleniyor ve hata durumlarını kullanıcıya düzgün biçimde sunarsınız.

✅

Dinamik uygulama

API verisinden dinamik liste üretir, arama ve filtreleme ekler ve sayfayı yeniden yüklemeden güncelleyen bir uygulama kurarsınız.

Kimler İçin Uygundur?

HTML ve CSS temeli olan
JavaScript
sayfalarını etkileşimli ve dinamik hale getirmek isteyen web geliştirmeye yeni başlayanlar ile ön yüz kariyerine hazırlanan öğrenciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim için programlama bilmek gerekir mi?

Hayır, programlamaya yeni başlayanlar için uygundur. Temel HTML ve CSS bilgisi yeterlidir; JavaScript kavramları sıfırdan ve küçük canlı örneklerle anlatılır. Yalnızca temel mantık ve problem çözme isteği beklenir. Eğitim temel seviyededir ve ön yüz geliştirmenin sağlam temelini kurmayı amaçlar.

Bir çerçeve (React, Vue) öğretiyor musunuz?

Hayır, eğitim saf (vanilla) JavaScript ile DOM, olay ve asenkron veri konularına odaklanır. Amaç, React ve Vue gibi çerçevelerin dayandığı temeli sağlam kurmaktır. Bu temeli edinen katılımcılar sonrasında modern çerçevelere çok daha bilinçli ve hızlı geçiş yapar.

Eğitimde gerçek bir proje yapılıyor mu?

Evet. Üç gün boyunca statik bir sayfa adım adım dinamik bir uygulamaya dönüştürülür. Bitirme projesinde herkese açık bir REST API'den fetch ile veri çekilir, liste oluşturulur, arama ve filtreleme ile form doğrulama eklenir, yükleniyor ve hata durumları yönetilir ve uygulama statik barındırmaya yayımlanır.

fetch ve asenkron JavaScript zor mu?

Eğitimde asenkron kavramlar kademeli anlatılır: önce senkron ve asenkron farkı, sonra Promise ve son olarak async/await ile okunur yazım gösterilir. fetch ile veri çekme, JSON işleme, hata yönetimi ve yükleniyor durumu küçük örneklerle pekiştirilir; böylece yeni başlayanlar da konuyu rahatça kavrar.

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 dinamik uygulama projesini belgeler; kurumsal gruplar için içerik, ekibin hedeflediği teknoloji yığınına göre özelleştirilebilir.

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

WEB FUNDAMENTALS: DYNAMIC WEB PAGES 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ını Anlama

Eleman Seçme Yöntemleri

İçerik ve Öznitelik Değiştirme

Stil ve Eleman Oluşturma

Olay Dinleme Temelleri

Olay Yayılımı ve Delegasyon

Form Yönetimi ve Girdi

Girdi Doğrulama Teknikleri

fetch ile Veri Çekme

Asenkron JavaScript

Dinamik İçerik Üretme

Bitirme Projesi: Dinamik Uygulama

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

JavaScript Development with Microservices Eğitimi

JavaScript Eğitimi

JavaScript with jQuery Eğitimi

JSON JavaScript Eğitimi

Node.js for JavaScript Developers Eğitimi

Temel Seviye JavaScript Geliştirme Eğitimi