jQuery & TypeScript Eğitimi

Eğitim Hakkında

jQuery ile hızlı DOM işlemlerinden TypeScript tipleriyle ölçeklenebilir ön yüz koduna geçiş

jQuery & TypeScript Eğitimi, köklü jQuery kütüphanesini modern TypeScript diliyle birleştirerek bakımı kolay ön yüz kodu yazmayı öğretir. Katılımcılar jQuery ile seçici, DOM manipülasyonu, olay yönetimi, animasyon ve AJAX işlemlerini uygular. Ardından TypeScript'in tip sistemi, arayüz, generic ve modül yapısı ele alınır. Program, @types/jquery tip tanımlarıyla jQuery kodunu tip güvenli hale getirme ve mevcut JavaScript projesini TypeScript'e taşıma ile tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; jQuery ile etkileşimli bir arayüz kurulur, ardından aynı kod TypeScript tipleriyle güvenli ve bakımı kolay hale getirilir.

Seviye

Orta Seviye — jQuery ile DOM ve AJAX, TypeScript ile tip güvenli, bakımı kolay ön yüz kodu

Öğrenme Metodu

Etkileşimli bir arayüz önce jQuery ile kurulur, sonra TypeScript'e taşınır; her modülde seçici, olay veya tip uygulamalı olarak işlenir.

Neden Bu Eğitim?

⚡Hızlı DOM işlemleri

jQuery'nin kısa ve okunabilir söz dizimiyle DOM seçme, değiştirme ve olay bağlamayı tarayıcı farklarını düşünmeden hızla yaparsınız.

🛡️Tip güvenliği

TypeScript'in tip sistemiyle hataları çalışma anından önce yakalar, büyüyen ön yüz projelerinde güvenle değişiklik yaparsınız.

🔗İkisini birleştirme

@types/jquery tanımlarıyla mevcut jQuery kodunu tip güvenli hale getirir, eski projeleri yeniden yazmadan modernleştirirsiniz.

Anahtar Konular

jquery eğitimitypescript eğitimijquery typescript kursutip güvenli javascriptön yüz geliştirme eğitimidom manipülasyonu eğitimiajax eğitimi@types/jqueryjavascript modernleştirmeweb geliştirme kursu

“jQuery işi hızlı bitirir, TypeScript kodunuzu uzun ömürlü kılar; ikisini birleştiren geliştirici hem çevik hem güvende çalışır.”

Ön Koşullar

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

1

HTML ve CSS bilgisi

Etiket, sınıf, id ve temel CSS seçicilerine aşinalık, jQuery seçicilerini ve DOM yapısını anlamayı kolaylaştırır.

2

JavaScript temeli

Değişken, fonksiyon, dizi ve nesne gibi temel JavaScript kavramlarına aşinalık beklenir; tipler bunlara eklenir.

3

Node.js ve npm

TypeScript derleyicisi ve tip paketleri için Node.js ve npm'in kurulu olması gerekir; kurulum ilk modülde gösterilir.

4

Kod editörü

Visual Studio Code gibi TypeScript desteği güçlü bir editör, tip ipuçları ve otomatik tamamlama için ö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ı jQuery seçicileriyle öğeleri seçer, metin ve nitelikleri değiştirir, DOM ağacında dolaşır ve zincirleme yöntemle kısa, okunabilir kod yazar.

Modül 1

jQuery Kurulumu ve $ Fonksiyonu

jQuery'nin CDN ve yerel dosya ile sayfaya eklenmesi
$(document).ready ile DOM hazır olunca çalışma
$ fonksiyonunun seçici ve sarmalayıcı rolü
jQuery nesnesi ile ham DOM öğesi farkı
noConflict ile $ çakışmalarının çözülmesi
Tarayıcı konsolunda jQuery ile deneme yapma

Modül 2

Seçiciler ve Filtreler

Etiket, sınıf ve id seçicileriyle öğe bulma
Nitelik seçicileri ve değer eşleştirme
:first, :last, :eq ve :even gibi filtreler
:visible, :checked ve form durum seçicileri
find, children ve closest ile hedefleme
Seçim sonucunu length ile doğrulama

Modül 3

DOM İçerik ve Nitelik İşlemleri

text, html ve val ile içerik okuma ve yazma
attr ve prop ile nitelik ve özellik yönetimi
addClass, removeClass ve toggleClass kullanımı
css yöntemiyle stil okuma ve uygulama
append, prepend, before ve after ile ekleme
remove, empty ve clone ile öğe yönetimi

Modül 4

DOM Dolaşma ve Zincirleme

parent, parents ve closest ile üst öğe bulma
next, prev ve siblings ile kardeş öğeler
each ile seçim üzerinde döngü kurma
filter ve not ile seçimi daraltma
Zincirleme yöntem çağrısıyla kod sadeleştirme
end ile zincirde önceki seçime dönme

Günün hedefiKatılımcı olayları bağlar, delege eder, efekt ve animasyon uygular, AJAX ile sunucudan veri alır ve Deferred nesnesiyle asenkron akışı yönetir.

Modül 1

jQuery Olay Yönetimi

on yöntemiyle click, submit ve input bağlama
off ve one ile olay kaldırma ve tek sefer çalışma
event nesnesi, target ve preventDefault kullanımı
Olay delegasyonu ile dinamik öğelere bağlama
trigger ile olayı koddan tetikleme
stopPropagation ile olay yayılımını durdurma

Modül 2

Efektler ve Animasyon

show, hide ve toggle ile görünürlük yönetimi
fadeIn, fadeOut ve fadeToggle geçişleri
slideDown, slideUp ve slideToggle kullanımı
animate ile özel CSS animasyonu tanımlama
Animasyon süresi, easing ve tamamlanma geri çağrımı
stop ve delay ile animasyon kuyruğu yönetimi

Modül 3

AJAX ile Veri Alışverişi

$.ajax ile ayrıntılı istek yapılandırması
$.get ve $.post ile kısa istek kalıpları
$.getJSON ile JSON verisi alma ve işleme
done, fail ve always geri çağrımları
load ile sunucudan HTML parçası getirme
serialize ile form verisini isteğe hazırlama

Modül 4

Deferred ve Eklenti Kullanımı

Deferred ve Promise ile asenkron akış yönetimi
$.when ile birden çok isteği birleştirme
Hazır jQuery eklentilerini projeye dahil etme
Eklenti seçeneklerini yapılandırma ve başlatma
Kendi basit jQuery eklentini fn ile yazma
data yöntemiyle öğeye veri bağlama

Günün hedefiKatılımcı TypeScript'in temel ve gelişmiş tiplerini kullanır, arayüz ve sınıf tanımlar, generic ile yeniden kullanılabilir yapılar kurar ve modüllerle kodu düzenler.

Modül 1

Temel Tipler ve tsconfig

tsc ve tsconfig.json ile derleyici yapılandırması
string, number, boolean ve array tipleri
any, unknown, never ve void ayrımı
Tür çıkarımı ve açık tür belirtme dengesi
Birleşim (union) ve kesişim (intersection) tipleri
strict modu ve null kontrolü ayarları

Modül 2

Arayüz ve Tip Takma Adları

interface ile nesne şekli tanımlama
type takma adı ile tip oluşturma
Opsiyonel ve salt okunur (readonly) özellikler
Fonksiyon tipleri ve çağrılabilir arayüzler
İndeks imzaları ile dinamik anahtarlar
interface genişletme ve birleştirme

Modül 3

Sınıf ve Erişim Belirleyiciler

class, constructor ve alan tanımlama
public, private ve protected erişim belirleyiciler
Kalıtım (extends) ve implements ile arayüz uygulama
get ve set ile erişimci tanımlama
static üyeler ve soyut (abstract) sınıflar
Parametre özellikleriyle kısa constructor

Modül 4

Generic ve Modüller

Generic fonksiyon ve sınıf tanımlama
extends ile generic kısıtlama (constraint)
keyof ve typeof ile tip türetme
export ve import ile ES modül kullanımı
Yardımcı tipler: Partial, Pick ve Record
Literal tip ve enum ile sabit değer kümeleri

Günün hedefiKatılımcı @types/jquery tanımlarıyla jQuery kodunu tip güvenli yazar, derleme hattını kurar ve mevcut bir JavaScript projesini kademeli olarak TypeScript'e taşır.

Modül 1

Tip Tanımları ve DefinitelyTyped

DefinitelyTyped ve @types paketlerinin mantığı
npm ile @types/jquery kurulumu ve yapılandırma
Küresel $ ve jQuery tiplerinin tanınması
d.ts bildirim dosyalarının rolü ve okunması
Eksik tipler için kendi bildiriminizi yazma
declare ile küresel değişken tipleme

Modül 2

Tip Güvenli jQuery Kodu

Seçici sonucunun JQuery<HTMLElement> tiplenmesi
Olay geri çağrımında event tipinin kullanımı
AJAX yanıtını generic ile tipleme
Tip daraltma (narrowing) ile güvenli erişim
DOM öğesine güvenli cast ve kontrol
Editörde otomatik tamamlama ve ipuçlarından yararlanma

Modül 3

Derleme ve Araç Hattı

tsconfig ile hedef (target) ve modül ayarı
Kaynak haritası (source map) ile tarayıcıda hata ayıklama
watch modu ile sürekli derleme
Bundler (Webpack veya Vite) ile paketleme
ESLint ve TypeScript kuralları ile kod kalitesi
Üretim derlemesinde küçültme ve çıktı yapısı

Modül 4

JavaScript Projesini Taşıma

allowJs ile JavaScript ve TypeScript birlikte kullanımı
Dosyaları kademeli olarak .ts uzantısına geçirme
checkJs ile mevcut JavaScript'te tip kontrolü
any kullanımından güçlü tiplere ilerleme
Üçüncü parti kütüphaneler için tip bulma
Taşıma sonrası kod tabanının yeniden düzenlenmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

jQuery seçiciler

jQuery seçicileri ve filtreleriyle DOM öğelerini bulur, dolaşır ve zincirleme yöntemle kısa, okunabilir kod yazarsınız.

✅

DOM manipülasyonu

text, html, attr ve css yöntemleriyle içerik ve stilleri değiştirir, öğe ekleyip kaldırarak sayfayı dinamik hale getirirsiniz.

✅

Olay yönetimi

on ile olayları bağlar, delegasyonla dinamik öğeleri yönetir ve event nesnesiyle kullanıcı etkileşimini denetlersiniz.

✅

AJAX işlemleri

$.ajax, $.get ve $.getJSON ile sunucudan veri alır, Deferred ve $.when ile asenkron akışı güvenle yönetirsiniz.

✅

TypeScript tipleri

Temel ve gelişmiş tipleri, arayüz ve sınıfları kullanır, generic ile yeniden kullanılabilir ve güvenli yapılar kurarsınız.

✅

Modüler kod

export ve import ile kodu modüllere böler, Partial ve Record gibi yardımcı tiplerle esnek yapılar oluşturursunuz.

✅

Tip güvenli jQuery

@types/jquery ile jQuery kodunu tip güvenli yazar, editör ipuçları ve tip daraltma ile hataları erken yakalarsınız.

✅

Projeye taşıma

allowJs ve checkJs ile mevcut JavaScript projesini kademeli olarak TypeScript'e taşır, derleme hattını kurarsınız.

Kimler İçin Uygundur?

jQuery kullanan veya kullanmayı öğrenmek isteyen
kodunu TypeScript
tip güvenli ve ölçeklenebilir hale getirmek isteyen ön yüz geliştiricileri ve mevcut projelerini modernleştiren web ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

jQuery kullanan veya öğrenmek isteyen, kodunu TypeScript ile tip güvenli ve ölçeklenebilir hale getirmek isteyen ön yüz geliştiricileri ve mevcut projelerini modernleştiren web ekipleri için uygundur. Temel HTML, CSS ve JavaScript bilgisi beklenir; TypeScript sıfırdan ele alınır.

jQuery hâlâ öğrenilmeye değer mi?

Evet. Çok sayıda mevcut proje, kurumsal uygulama ve WordPress gibi platform jQuery kullanmaya devam ediyor. Eğitim jQuery'yi hem bakım hem yeni geliştirme için öğretir, ayrıca kodu TypeScript ile güvenli hale getirerek eski projeleri yeniden yazmadan modernleştirmeyi gösterir.

TypeScript için önceden bilgi gerekir mi?

Hayır, TypeScript sıfırdan anlatılır. Temel ve gelişmiş tipler, arayüz, sınıf, generic ve modül sistemi örneklerle işlenir. Yalnızca temel JavaScript bilgisi gerekir; eğitim bu bilgiyi tip güvenli ve bakımı kolay bir yapıya taşır.

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. Etkileşimli bir arayüz önce jQuery ile kurulur, ardından aynı kod TypeScript tipleriyle güvenli hale getirilir. Yüz yüze veya online yapılabilir; içerik kurumun mevcut kod tabanına 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 uygulanan örnek arayüzü belgeler; kurumsal gruplara özel uyarlama ve mevcut projeye yönelik TypeScript geçiş danışmanlığı ile genişletilebilir.

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

JQUERY & TYPESCRIPT EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

jQuery Kurulumu ve $ Fonksiyonu

Seçiciler ve Filtreler

DOM İçerik ve Nitelik İşlemleri

DOM Dolaşma ve Zincirleme

jQuery Olay Yönetimi

Efektler ve Animasyon

AJAX ile Veri Alışverişi

Deferred ve Eklenti Kullanımı

Temel Tipler ve tsconfig

Arayüz ve Tip Takma Adları

Sınıf ve Erişim Belirleyiciler

Generic ve Modüller

Tip Tanımları ve DefinitelyTyped

Tip Güvenli jQuery Kodu

Derleme ve Araç Hattı

JavaScript Projesini Taşıma

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

JavaScript Essentials with jQuery Eğitimi

JavaScript Front-end Development: Data, Decision Making, & Arrays Eğitimi

JavaScript Front-end Development: Errors, Events, Objects, & New Features Eğitimi

JavaScript Front-end Development: Frameworks Eğitimi

JavaScript Front-end Development: Functions & Objects Eğitimi

JavaScript Front-end Development: Fundamentals Eğitimi