JavaScript ile CSS Yönetimi Eğitimi

Eğitim Hakkında

Inline stilden CSSOM'a, CSS değişkenlerinden dinamik stil sayfaları ve animasyon kontrolüne akış

Managing CSS with Scripts Eğitimi, CSS'i statik olmaktan çıkarıp JavaScript ile dinamik yönetmeyi öğretir. Katılımcılar inline style özelliğini, CSSOM'u, getComputedStyle ile hesaplanan stilleri ve classList yönetimini öğrenir. CSS özel değişkenlerini okuyup değiştirme, stil sayfalarını dinamik oluşturma ve tema değiştirme işlenir. Program geçiş ve animasyonları script ile tetiklemeyi ve Sass gibi ön işlemcileri kapsar. Katılımcı tema geçişli ve dinamik bir arayüz geliştirir.

Süre ve Format

4 Gün. Her gün dört modül; inline stilden CSSOM'a, değişkenlerden animasyon kontrolüne ilerleyerek dinamik tema projesi kurulur.

Seviye

Orta Seviye — JavaScript ile CSSOM, stil, sınıf, değişken ve animasyonları programatik yönetme

Öğrenme Metodu

Her teknik tarayıcı konsolunda ve gerçek bir arayüz üzerinde denenir; stil değişiklikleri anlık olarak gözlemlenerek pekiştirilir.

Neden Bu Eğitim?

🎛️Dinamik stil

JavaScript ile stilleri çalışma zamanında değiştirerek kullanıcı etkileşimine göre uyarlanan arayüzler kurarsınız.

🌗Tema geçişi

CSS özel değişkenlerini script ile yöneterek karanlık-aydınlık tema geçişi gibi özellikleri temiz biçimde uygularsınız.

🎬Animasyon kontrolü

Geçiş ve animasyonları JavaScript ile tetikleyip yöneterek akıcı ve kontrollü hareketli arayüzler geliştirirsiniz.

Anahtar Konular

cssom eğitimijavascript css eğitimicss değişkenleri eğitimidinamik tema eğitimicss animasyon eğitimiweb animations api eğitimiclasslist eğitimisass eğitimiön yüz geliştirme eğitimidinamik stil yönetimi

“CSS artık statik bir dosya değildir; JavaScript ile yönetildiğinde arayüz kullanıcıya göre uyarlanan canlı bir sisteme dönüşür.”

Ön Koşullar

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

1

CSS bilgisi

Seçiciler, kutu modeli ve temel stiller bilgisi bu eğitimin temelini oluşturduğu için gereklidir.

2

JavaScript temeli

Değişken, fonksiyon ve DOM kavramlarına aşinalık script ile stil yönetimini kolaylaştırır.

3

DOM deneyimi

Eleman seçme ve değiştirme deneyimi CSSOM konularını hızlı kavramayı sağlar.

4

Editör ve tarayıcı

VS Code gibi bir editör ve geliştirici araçlı güncel bir tarayıcı uygulama için gereklidir.

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ı style özelliğiyle satır içi stil uygular, CSSOM yapısını kavrar ve getComputedStyle ile öğelerin hesaplanan stillerini okur.

Modül 1

style Özelliği ile Stil

element.style ile satır içi stil yazma
camelCase özellik adı dönüşümü
setProperty ve getPropertyValue kullanımı
Birimli değerler ve string ile atama
Inline stilin özgüllüğe etkisi
cssText ile toplu stil ataması

Modül 2

CSSOM Yapısı ve Erişim

CSS nesne modeli CSSOM kavramı
document.styleSheets koleksiyonu
cssRules ve stil kuralları erişimi
CSSStyleRule ve selectorText erişimi
DOM ile CSSOM arasındaki ilişki
Tarayıcının stil hesaplama süreci

Modül 3

Hesaplanan Stil Okuma

getComputedStyle ile stil okuma
Hesaplanan ve bildirilen stil farkı
Birim çözümlenmiş değerleri okuma
Pseudo-element stillerini okuma
Boyut ve konum değerlerini alma
Performans için okuma-yazma ayrımı

Modül 4

Eleman Boyut ve Ölçüleri

offsetWidth ve offsetHeight ölçüsü
clientWidth ve clientHeight ölçüsü
getBoundingClientRect ile konum
scrollWidth ve kaydırma ölçüleri
Layout thrashing ve reflow riski
Ölçü okumayı toplu yapma stratejisi

Günün hedefiKatılımcı classList ile sınıf yönetir, veri özniteliklerini kullanır ve CSS özel değişkenlerini JavaScript ile okuyup değiştirerek dinamik stil kurar.

Modül 1

classList ile Sınıf Yönetimi

add, remove ve toggle yöntemleri
contains ile sınıf varlık kontrolü
replace ile sınıf değiştirme işlemi
Durum yönetimi için sınıf deseni
Sınıf tabanlı stil ile inline farkı
classList ile performans avantajı

Modül 2

Veri Öznitelikleri

data özniteliği ve dataset erişimi
Veri özniteliğine göre stil uygulama
Öznitelik seçicileriyle CSS eşleştirme
Durum verisini DOM üzerinde tutma
Veri öznitelikleriyle tema işaretleme
Dataset ve JavaScript senkronu

Modül 3

CSS Özel Değişkenleri

custom property tanımı ve kapsamı
var fonksiyonu ile değişken kullanımı
root seviyesinde genel değişkenler
setProperty ile değişken değiştirme
getPropertyValue ile değişken okuma
Değişkenlerle tek noktadan tema yönetimi

Modül 4

Dinamik Tema Yönetimi

Değişkenlerle karanlık-aydınlık tema
Kullanıcı tercihini okuma prefers-color
Tema durumunu localStorage'da saklama
Tema geçişinde değişken güncelleme
Renk ve boşluk değişkenleri organizasyonu
Tema geçişinin akıcı uygulanması

Günün hedefiKatılımcı JavaScript ile stil sayfaları oluşturur, CSSOM üzerinden kural ekler ve değiştirir, koşullu ve duyarlı stilleri script ile yönetir.

Modül 1

Dinamik Stil Ekleme

style etiketi oluşturup ekleme
link ile dış stil sayfası yükleme
textContent ile stil kuralı yazma
Stil sayfasını dinamik kaldırma
Koşullu olarak stil sayfası yükleme
Kritik CSS ve geç yükleme mantığı

Modül 2

CSSOM ile Kural Yönetimi

insertRule ile yeni kural ekleme
deleteRule ile kural silme işlemi
Mevcut kuralları okuma ve değiştirme
Media kurallarına CSSOM erişimi
Keyframe kurallarını okuma erişimi
Kural indeksleme ve sıralama düzeni

Modül 3

Koşullu ve Duyarlı Stil

matchMedia ile media query dinleme
Ekran boyutuna göre stil uygulama
prefers-reduced-motion kontrolü
prefers-color-scheme ile tema algılama
Durum değişiminde stil güncelleme
JavaScript ile breakpoint yönetimi

Modül 4

Stil ve Performans

requestAnimationFrame ile stil güncelleme
Toplu okuma ve yazma deseni batching
will-change ile tarayıcı ipucu
Reflow ve repaint performans maliyeti
Gereksiz stil hesaplamasını önleme
Stil güncellemelerini gruplama

Günün hedefiKatılımcı geçiş ve animasyonları JavaScript ile tetikler, Web Animations API kullanır ve Sass gibi ön işlemcilerle stil üretimini yönetir.

Modül 1

Geçiş transition Kontrolü

transition özelliği ve tetikleme
Sınıf ekleyerek geçiş başlatma
transitionend olayını dinleme deseni
Geçiş süresi ve zamanlama fonksiyonu
Geçişleri JavaScript ile zincirleme
Durum tabanlı geçiş yönetim deseni

Modül 2

Keyframe Animasyonları

keyframes tanımı ve animation özelliği
Animasyonu script ile başlatma durdurma
animationstart ve animationend olayları
animation-play-state ile kontrol
Dinamik keyframe kuralı oluşturma
Animasyon döngüsü ve yön yönetimi

Modül 3

Web Animations API

element.animate ile animasyon kurma
Keyframe dizisi ve seçenek nesnesi
Animasyon nesnesi play, pause, reverse
Zaman çizelgesi ve ilerleme kontrolü
finished promise ve zincirleme
CSS animasyon ile WAAPI karşılaştırması

Modül 4

Ön İşlemci ve Proje

Sass değişken, iç içe ve mixin
Sass ile tema değişkeni üretimi
Derleme ve çıktı CSS dosya yönetimi
PostCSS ve autoprefixer tanıtımı
Dinamik tema ve animasyon birleştirme
Proje: tema geçişli arayüz tamamlama

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Inline stil

element.style ve setProperty ile öğelerin stillerini JavaScript üzerinden çalışma zamanında doğru biçimde değiştirirsiniz.

✅

CSSOM erişimi

document.styleSheets ve cssRules üzerinden stil kurallarına erişir, CSSOM ile stilleri programatik olarak yönetirsiniz.

✅

Hesaplanan stil

getComputedStyle ile öğelerin gerçek hesaplanan stillerini okur ve layout thrashing riskini bilinçli biçimde önlersiniz.

✅

Sınıf yönetimi

classList add, remove ve toggle yöntemleriyle durum tabanlı stil değişimini verimli ve temiz biçimde uygularsınız.

✅

CSS değişkenleri

CSS özel değişkenlerini JavaScript ile okuyup değiştirerek tek noktadan tema ve stil yönetimi kurarsınız.

✅

Dinamik tema

Karanlık-aydınlık tema geçişini değişkenler ve localStorage ile kullanıcı tercihine göre akıcı biçimde uygularsınız.

✅

Animasyon kontrolü

Geçiş, keyframe animasyonları ve Web Animations API'yi JavaScript ile tetikleyip yöneterek kontrollü hareketler oluşturursunuz.

✅

Ön işlemci

Sass değişken, mixin ve iç içe yapılarıyla sürdürülebilir stil üretir ve dinamik tema ile birleştirirsiniz.

Kimler İçin Uygundur?

CSS ve JavaScript bilgisini birleştirmek isteyen ön yüz geliştiriciler
dinamik tema
stil yönetimi kurmak isteyenler ve animasyonları script ile kontrol etmek isteyen geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

CSS ve JavaScript bilgisini birleştirmek isteyen ön yüz geliştiriciler, dinamik tema ve stil yönetimi kurmak isteyenler ve animasyonları script ile kontrol etmek isteyen geliştiriciler için uygundur. Temel CSS ve JavaScript bilgisi gereklidir.

CSS zaten var, neden JavaScript ile yönetelim?

Statik CSS kullanıcı etkileşimine, tema tercihine veya çalışma zamanı verisine göre değişemez. JavaScript ile CSS yönetmek tema geçişi, dinamik stil ve kontrollü animasyon gibi etkileşimli özellikleri temiz biçimde mümkün kılar.

Web Animations API ve Sass da işleniyor mu?

Evet, son gün geçiş ve keyframe animasyonlarının script ile kontrolü, element.animate ile Web Animations API ve Sass değişken, mixin, iç içe yapıları işlenir. Bunlar dinamik tema projesinde birleştirilir.

Eğitim online olarak alınabilir mi?

Evet, eğitim hem online hem yüz yüze verilebilir ve kurumsal taleplere göre uyarlanır. Her iki formatta da katılımcı konsol ve geliştirici araçlarıyla stil değişikliklerini anlık gözlemler.

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, katılımcının CSS'i script ile uygulamalı olarak yönettiğini belgeler.

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

MANAGING CSS WITH SCRIPTS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

style Özelliği ile Stil

CSSOM Yapısı ve Erişim

Hesaplanan Stil Okuma

Eleman Boyut ve Ölçüleri

classList ile Sınıf Yönetimi

Veri Öznitelikleri

CSS Özel Değişkenleri

Dinamik Tema Yönetimi

Dinamik Stil Ekleme

CSSOM ile Kural Yönetimi

Koşullu ve Duyarlı Stil

Stil ve Performans

Geçiş transition Kontrolü

Keyframe Animasyonları

Web Animations API

Ön İşlemci ve Proje

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Basic Coding in Adobe Dreamweaver CC Eğitimi

Bootstrap & Dashboards Eğitimi

Bootstrap Environment, Requirements, & Setup Eğitimi

Bootstrap Forms & Layout Eğitimi

Browsers and HTML in Adobe Dreamweaver CC Eğitimi

Creating Responsive Projects with Captivate Eğitimi