FSD FRONT-END DEVELOPMENT: WRITING CODE WITH JQUERY EĞİTİMİ

jQuery ile gerçek özellikleri kodlayın

Etkileşimli arayüz bileşenleri, olay desenleri ve Ajax veri akışını jQuery ile kodlayın

FSD Front-End Development: Writing Code with jQuery Eğitimi, jQuery ile gerçek arayüz özelliklerini sıfırdan kodlamaya odaklanır. Program etkin seçim, zincirleme, DOM dolaşma ve kod organizasyonuyla başlar; olay desenleri, dinamik içerik üretimi ve sekme, ako…

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Seçimden kod organizasyonuna, etkileşimli bileşenlerden Ajax veri akışına uygulamalı akış

FSD Front-End Development: Writing Code with jQuery Eğitimi, jQuery ile gerçek arayüz özelliklerini sıfırdan kodlamaya odaklanır. Katılımcılar seçim ve zincirlemeyi etkin kullanmayı, olay desenleriyle etkileşim kurmayı ve dinamik içerik üretmeyi öğrenir. Sekme, akordeon, modal ve form gibi bileşenler adım adım kodlanır; Ajax ile veri alışverişi, hata yönetimi ve basit eklenti yazımı ele alınır. Eğitim temiz ve bakımı kolay kod düzeniyle tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; her konu bir arayüz özelliğini sıfırdan kodlamaya dönüştürülerek uygulamalı işlenir.

Seviye

Orta Seviye — jQuery ile etkileşimli arayüz özellikleri kodlama, olay desenleri ve Ajax ile veri akışı

Öğrenme Metodu

Her modülde somut bir arayüz özelliği baştan sona kodlanır; yazılan kod tarayıcıda çalıştırılır ve adım adım iyileştirilir.

Neden Bu Eğitim?

🛠️Özellik kodlama

Sekme, modal ve form gibi gerçek arayüz özelliklerini jQuery ile sıfırdan kodlayarak teoriyi çalışan koda dönüştürürsünüz.

🎛️Olay desenleri

Olay delegasyonu, namespace ve özel olaylar gibi desenlerle etkileşimleri düzenli, yeniden kullanılabilir biçimde kurarsınız.

🔄Ajax veri akışı

Ajax ile veri alıp gönderir, yükleniyor ve hata durumlarını yöneterek sayfayı yenilemeden güncelleyen akışlar kodlarsınız.

Anahtar Konular

jquery kod yazma eğitimijquery eğitimijquery ile uygulama geliştirmejquery ajax eğitimijquery bileşen kodlamaön yüz geliştirme eğitimijquery olay yönetimijquery eklenti yazmaweb geliştirme kursuetkileşimli arayüz jquery
“İyi jQuery kodu seçici bilmekle değil, etkileşimi düzenli ve okunabilir parçalara bölüp çalışan bir özelliğe dönüştürmekle yazılır.”

Ön Koşullar

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

1
HTML ve CSS

Semantik HTML ve CSS seçicilerine aşinalık, bileşenleri kodlarken yapı kurmak için gereklidir.

2
Temel JavaScript

Değişken, fonksiyon ve olay kavramı gibi temel JavaScript bilgisi kod yazımının takibini kolaylaştırır.

3
jQuery'ye giriş

Temel jQuery seçicileri ve DOM işleme fikrine aşinalık faydalıdır; eğitim bu bilgiyi hızla pekiştirir.

4
Editör ve tarayıcı

VS Code gibi bir editör ve güncel bir tarayıcı gereklidir; kod jQuery CDN ile sayfaya eklenerek çalıştı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ı seçimi etkin yönetir, zincirleme ve dolaşma metotlarıyla kısa kod yazar, seçimleri önbelleğe alır ve jQuery kodunu düzenli bir yapıda organize eder.
Modül 1
Etkin Seçim ve Önbellekleme
  • Seçim sonucunu değişkende önbelleğe alma
  • Kapsamlı seçimle DOM sorgusunu daraltma
  • Bağlam parametresiyle arama alanını sınırlama
  • Tekrarlı seçim yerine yeniden kullanım
  • Seçim maliyeti ve performans etkisi
  • is ve hasClass ile durum kontrolü
Modül 2
Zincirleme ile Akıcı Kod
  • Metotları zincirleyerek tek ifadede işlem
  • end ile zincirde önceki seçime dönme
  • addBack ile seçime öncekini ekleme
  • Zincir uzunluğunun okunabilirliğe etkisi
  • Zincirleme ile satır sayısını azaltma
  • Okunabilirlik ve kısalık arasında denge
Modül 3
DOM Dolaşma ile Kodlama
  • closest ile tıklanan öğenin kabını bulma
  • find ile bileşen içindeki hedefe inme
  • siblings ile aktif öğe dışındakileri işleme
  • parent ve children ile yapı içinde gezinme
  • filter ve not ile seçimi kod içinde daraltma
  • Dolaşmayla esnek ve genel kod yazma
Modül 4
jQuery Kod Organizasyonu
  • document ready içinde kodu toplama
  • IIFE ile global kapsam kirliliğini önleme
  • İşlevleri adlandırılmış fonksiyonlara bölme
  • Tekrarı azaltmak için yardımcı fonksiyonlar
  • Yapılandırma değerlerini tek yerde tutma
  • Okunabilir ve sürdürülebilir dosya düzeni
Günün hedefiKatılımcı olay delegasyonu ve namespace desenlerini kullanır, dinamik içerik üretir ve sekme, akordeon ile modal gibi etkileşimli bileşenleri sıfırdan kodlar.
Modül 1
Olay Desenleri ve Delegasyon
  • on ile olay bağlama ve kod düzeni
  • Dinamik öğeler için olay delegasyonu
  • Olay namespace ile seçici kaldırma
  • Özel olay tetikleme ve dinleme
  • Olay nesnesinden hedef ve veri okuma
  • preventDefault ve stopPropagation kullanımı
Modül 2
Dinamik İçerik Üretimi
  • Şablon dizgesinden öğe oluşturma
  • Veri dizisinden liste kodla üretme
  • append ve prepend ile içeriği yerleştirme
  • data nitelikleriyle öğeye veri bağlama
  • Çok sayıda ekleme için parça biriktirme
  • Üretilen içeriğe olay delegasyonu bağlama
Modül 3
Sekme ve Akordeon Kodlama
  • Sekme başlıklarına tıklama olayı bağlama
  • Aktif sekmeyi sınıfla işaretleme
  • İlgili panel dışındakileri gizleme
  • Akordeon aç kapa mantığını kurma
  • slideToggle ile akordeon geçişi
  • Klavye ve erişilebilirlik iyileştirmesi
Modül 4
Modal ve Açılır Katman
  • Modalı açma ve kapatma olayları
  • Arka plan katmanı ile odak toplama
  • Dışarı tıklayınca modalı kapatma
  • Escape tuşu ile kapatma davranışı
  • fadeIn ve fadeOut ile görsel geçiş
  • Modal içine dinamik içerik yükleme
Günün hedefiKatılımcı Ajax ile veri alıp gönderir, form gönderimini kodlar, yükleniyor ve hata durumlarını yönetir ve yeniden kullanılabilir basit bir jQuery eklentisi yazar.
Modül 1
Ajax ile Veri Alışverişi
  • get ve post ile kısa istek kodlama
  • ajax metoduyla tam kontrollü istek
  • JSON yanıtını kodla ekrana basma
  • Sorgu parametrelerini istekte gönderme
  • done, fail ve always ile sonuç işleme
  • İstek iptali ve zaman aşımı yönetimi
Modül 2
Form Gönderimini Kodlama
  • submit olayında varsayılanı engelleme
  • serialize ile form verisini toplama
  • Form alanlarını kod içinde doğrulama
  • Hata mesajlarını alan yanına yazma
  • Ajax ile formu arka planda gönderme
  • Başarılı gönderim sonrası geri bildirim
Modül 3
Yükleniyor ve Hata Durumları
  • İstek sırasında yükleniyor göstergesi
  • Butonu geçici olarak devre dışı bırakma
  • Sunucu hatasını kullanıcıya gösterme
  • Ağ hatası ile sunucu hatası ayrımı
  • Yeniden deneme ve kibar hata mesajı
  • Durumları tek yerden yönetme deseni
Modül 4
Basit jQuery Eklentisi Yazımı
  • fn üzerinden eklenti metodu tanımlama
  • Eklentiyi her seçilen öğeye uygulama
  • Seçenekleri varsayılanla birleştirme
  • this zincirini bozmadan geri döndürme
  • data ile öğe başına durum saklama
  • Eklentiyi bileşen olarak yeniden kullanma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Etkin seçim

Seçimleri önbelleğe alır, bağlamla daraltır ve dolaşma metotlarıyla gereksiz DOM sorgusundan kaçınarak hızlı kod yazarsınız.

✅
Zincirleme kod

Metotları zincirleyerek kısa ve akıcı kod üretir, okunabilirlik ile kısalık arasında doğru dengeyi kurabilirsiniz.

✅
Kod organizasyonu

IIFE, adlandırılmış fonksiyonlar ve yardımcılarla jQuery kodunu düzenli, tekrarsız ve sürdürülebilir biçimde organize edersiniz.

✅
Olay desenleri

Olay delegasyonu, namespace ve özel olaylarla etkileşimleri düzenli ve yeniden kullanılabilir biçimde kodlayabilirsiniz.

✅
Dinamik içerik

Veri dizisinden şablonla öğe üretir, DOM'a verimli ekler ve üretilen içeriğe delegasyonla olay bağlarsınız.

✅
Bileşen kodlama

Sekme, akordeon ve modal gibi etkileşimli arayüz bileşenlerini sıfırdan, erişilebilirliği gözeterek kodlayabilirsiniz.

✅
Ajax ve form

Ajax ile veri alıp gönderir, form gönderimini kodlar ve yükleniyor ile hata durumlarını kullanıcı dostu biçimde yönetirsiniz.

✅
Eklenti yazımı

fn üzerinden seçenek alan, zinciri koruyan ve öğe başına durum tutan yeniden kullanılabilir basit eklentiler yazarsınız.

Kimler İçin Uygundur?

  • jQuery temellerini bilen ve bu bilgiyi gerçek özellik geliştirmeye dönüştürmek isteyen ön yüz geliştiriciler
  • etkileşimli arayüz bileşenleri kodlamak isteyen web geliştiricileri
  • ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
jQuery temellerini bilen ve bu bilgiyi gerçek özellik geliştirmeye dönüştürmek isteyen ön yüz geliştiriciler, etkileşimli arayüz bileşenleri kodlamak isteyen web geliştiricileri ve ekipler için uygundur. Temel HTML, CSS, JavaScript ve giriş düzeyi jQuery bilgisi beklenir.
Bu eğitim Essential jQuery eğitiminden farklı mı?
Evet. Temel jQuery eğitimi seçiciler, DOM ve olayların kavramsal temelini verirken bu eğitim o bilgiyi gerçek özellik kodlamaya dönüştürür. Sekme, modal, form gibi bileşenler sıfırdan yazılır; olay desenleri, Ajax veri akışı ve eklenti yazımı kod odaklı işlenir.
Hangi bileşenleri kodlamayı öğreneceğiz?
Eğitimde sekme, akordeon ve modal gibi sık kullanılan etkileşimli bileşenler ile Ajax ile veri getiren dinamik listeler ve arka planda gönderilen formlar sıfırdan kodlanır. Ayrıca yeniden kullanılabilir basit bir jQuery eklentisinin nasıl yazıldığı adım adım gösterilir.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Her konu somut bir arayüz özelliğini sıfırdan kodlamaya dönüştürülerek uygulanır. Yüz yüze veya online yapılabilir; içerik kurumun mevcut jQuery tabanlı projelerine 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 kodlanan örnek bileşenleri belgeler; kurumsal gruplara özel içerik uyarlaması 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 d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. FSD Front-End Development: Writing Code with jQuery Eğitimi Sertifika Kodu DV-2026XX00 Tarih 14.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeOrta Seviye
FormatOnline / Yüz Yüze / Hibrit
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

JavaScript ve TypeScriptApplication Development with Node.js: Managing Advanced Application Elements Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Managing Advanced Application Elements Eğitimi

5 günİleriOnline / Yüz Yüze / Hibrit

İleri Node.js: stream, cluster, worker threads, önbellek, güvenlik, WebSocket, test ve Docker ile üretim ölçeğinde uygulama yönetimi eğitimi.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Microservices Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Microservices Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js ile mikroservis mimarisi: servis tasarımı, REST ve gRPC, mesaj kuyruğu, API gateway, dayanıklılık ve Docker ile dağıtım eğitimi.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Microservices Frameworks, & Utilities Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Microservices Frameworks, & Utilities Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js ile mikroservis mimarisi, NestJS, Moleculer, gRPC, mesaj kuyrukları, API Gateway, dayanıklılık ve Docker dağıtımını öğreten uygulamalı eğitim.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Node Clusters & Memory Optimizations Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Node Clusters & Memory Optimizations Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

Node.js cluster, worker_threads, V8 bellek modeli, çöp toplama, bellek sızıntısı tespiti ve profilleme ile ölçekleme optimizasyonunu öğreten eğitim.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Process Managers Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Process Managers Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

PM2 ile Node.js süreç yönetimi, cluster modu, log, izleme, kesintisiz yeniden yükleme, systemd ve Docker dağıtımını öğreten uygulamalı kurumsal eğitim.

Detayları Gör →
JavaScript ve TypeScriptApplication Development with Node.js: Real-time Applications Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Application Development with Node.js: Real-time Applications Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

Node.js ile WebSocket ve Socket.IO kullanarak sohbet, bildirim ve canlı veri akışı yapan ölçeklenebilir gerçek zamanlı uygulamalar geliştirmeyi öğreten eğitim.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn