JavaScript Fonksiyonlar ve DOM Eğitimi

Eğitim Hakkında

Söz dizimi kurallarından fonksiyon ve kapsama, DOM seçimine ve olay yönetimine uzanan akış

JavaScript Rules, Functions, & HTML Elements Eğitimi, JavaScript dil kurallarını ele alıp bu bilgiyi HTML elemanlarını yönetmek için kullanır. Katılımcılar söz dizimi, tip davranışı, operatör önceliği ve hoisting gibi dil mekaniklerini öğrenir. Fonksiyonlar, kapsam, closure ve yüksek dereceli fonksiyonlar işlenir. Ardından DOM ile elemanlar seçilir, değiştirilir ve olaylarla etkileşim kurulur. Katılımcı dinamik bir arayüzü tamamen JavaScript ile yönetebilir hale gelir.

Süre ve Format

4 Gün. Her gün dört modül; dil kuralları ve fonksiyonlardan DOM ve olay yönetimine ilerleyerek etkileşimli bir arayüz kurulur.

Seviye

Orta Seviye — JavaScript dil kuralları, fonksiyonlar ve DOM ile HTML elemanlarını yönetme

Öğrenme Metodu

Her dil kuralı küçük örneklerle konsol üzerinde denenir; fonksiyon ve DOM konuları gerçek bir arayüz üzerinde uygulanır.

Neden Bu Eğitim?

📘Dili gerçekten anlama

Söz dizimi kuralları, tip davranışı ve hoisting gibi mekanikleri öğrenerek beklenmedik hataların nedenini kavrarsınız.

🔧Fonksiyon ustalığı

Kapsam, closure ve yüksek dereceli fonksiyonları kavrayarak temiz, tekrar kullanılabilir ve güçlü kod yazarsınız.

🖱️DOM kontrolü

Elemanları seçip olaylarla yöneterek sayfayı tamamen JavaScript üzerinden dinamik olarak kontrol edersiniz.

Anahtar Konular

javascript eğitimijavascript dom eğitimijavascript fonksiyonlar eğitimiclosure eğitimidom manipülasyon eğitimisaf javascript kursujavascript olay yönetimiön yüz geliştirme eğitimivanilla javascript eğitimijavascript kursu

“JavaScript'i gerçekten bilmek, dilin kurallarını ve DOM'u birlikte kavramaktır; bu eğitim ikisini tek bir bütün olarak öğretir.”

Ön Koşullar

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

1

HTML ve CSS

Temel HTML etiketleri ve CSS stilleri bilgisi DOM bölümünde elemanları yönetmek için faydalıdır.

2

Temel JavaScript

Değişken ve basit söz dizimine aşinalık yararlıdır; eğitim kuralları ayrıntılı tekrar eder.

3

Konsol kullanımı

Tarayıcı konsolunu açıp ifade çalıştırabilmek örnekleri denemek için gereklidir.

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ı JavaScript söz dizimi kurallarını, veri tiplerini, operatör önceliğini ve hoisting gibi dil mekaniklerini kavrayarak sağlam bir temel kurar.

Modül 1

Söz Dizimi ve Değişkenler

İfade, deyim ve noktalı virgül kuralları
let, const ve var kapsam farkları
Değişken adlandırma ve kod stili
strict mode ve katı çalışma kuralları
Yorum satırları ve kod okunabilirliği
Temporal dead zone ve bildirim sırası

Modül 2

Veri Tipleri ve Dönüşüm

İlkel tipler ve referans tipler farkı
string, number, boolean, null, undefined
Symbol ve BigInt tiplerinin tanıtımı
typeof operatörü ile tip kontrolü
Açık ve otomatik tip dönüşümü coercion
Truthy ve falsy değerlerin davranışı

Modül 3

Operatörler ve Öncelik

Aritmetik ve atama operatörleri
Karşılaştırma == ile === ve eşitlik
Mantıksal operatörler ve kısa devre
Nullish coalescing ve optional chaining
Operatör önceliği ve gruplama kuralları
Spread ve rest operatörlerinin kullanımı

Modül 4

Kontrol Akışı ve Mekanik

if, else ve ternary ile koşullar
switch deyimi ve çoklu dallanma
for, while ve do-while döngüleri
break, continue ve etiketli döngü
Hoisting ve değişken yükseltme
try, catch ile hata yakalama akışı

Günün hedefiKatılımcı fonksiyon tanım türlerini, kapsam zincirini, closure mekanizmasını ve yüksek dereceli fonksiyonları kullanarak güçlü ve tekrar kullanılabilir kod yazar.

Modül 1

Fonksiyon Tanım Türleri

Fonksiyon bildirimi ve ifadesi farkı
Arrow function ve kısa söz dizimi
Parametre, argüman ve dönüş değeri
Varsayılan parametre değerleri
rest parametre ve arguments nesnesi
IIFE anında çağrılan fonksiyon

Modül 2

Kapsam ve Closure

Global, fonksiyon ve blok kapsamı
Kapsam zinciri ve değişken çözümleme
Closure tanımı ve çalışma mantığı
Closure ile özel değişken saklama
Döngü ve closure ortak hataları
Bellek ve closure yaşam süresi

Modül 3

this Anahtar Kelimesi ve Bağlam

this değerinin çağrıya göre değişmesi
Arrow function ve this davranışı
call, apply ve bind yöntemleri
Nesne yöntemlerinde this kullanımı
Olay işleyicilerinde this bağlamı
Yaygın this hataları ve çözümleri

Modül 4

Yüksek Dereceli Fonksiyonlar

Fonksiyonu argüman olarak geçirme
Fonksiyon döndüren fonksiyonlar
Callback ve geri çağırma deseni
map, filter ve reduce kullanımı
Fonksiyon kompozisyonu ve zincirleme
Saf fonksiyon ve yan etki kavramı

Günün hedefiKatılımcı DOM ağacını kavrar; HTML elemanlarını seçer, oluşturur, değiştirir ve nitelik ile stillerini JavaScript üzerinden yönetir.

Modül 1

DOM Ağacı ve Düğümler

Belge nesne modeli DOM yapısı ve rolü
Düğüm türleri eleman, metin, öznitelik
parentNode, childNodes ve siblings
document nesnesi ve giriş noktaları
DOM ile HTML kaynak kodu farkı
DOM ağacında gezinme yöntemleri

Modül 2

Eleman Seçim Yöntemleri

getElementById ve getElementsByClassName
querySelector ve querySelectorAll
CSS seçicileriyle eleman hedefleme
NodeList ve HTMLCollection farkı
Canlı ve statik koleksiyon davranışı
Seçilen elemanlar üzerinde döngü

Modül 3

Eleman Oluşturma ve Değiştirme

createElement ve createTextNode
appendChild, insertBefore ve remove
textContent ve innerHTML güncelleme
setAttribute ve getAttribute kullanımı
classList add, remove ve toggle
dataset ile veri öznitelikleri

Modül 4

Stil ve Form Elemanları

style özelliği ile satır içi stil
getComputedStyle ile hesaplanan stil
Form elemanlarının değerini okuma
input, select ve checkbox durumu
Eleman oluşturup DOM'a dinamik ekleme
DocumentFragment ile verimli ekleme

Günün hedefiKatılımcı olay dinleyicileriyle kullanıcı etkileşimini yönetir, olay delegasyonu kullanır ve dil, fonksiyon ve DOM bilgisini etkileşimli bir arayüzde birleştirir.

Modül 1

Olay Yönetimi Temelleri

addEventListener ve removeEventListener
Olay türleri click, input ve keydown
Olay nesnesi event ve özellikleri
target ve currentTarget arasındaki fark
preventDefault ve stopPropagation
Olay işleyici fonksiyon tasarımı

Modül 2

Olay Yayılımı ve Delegasyon

Olay akışı capture ve bubbling
Olay yayılımını durdurma yöntemleri
Olay delegasyonu mantığı ve avantajı
Dinamik öğelerde delegasyon kullanımı
closest ile hedef eleman eşleştirme
Performans için tek dinleyici deseni

Modül 3

Form İşleme ve Doğrulama

submit olayı ve varsayılanı durdurma
Form değerlerini okuma ve doğrulama
Hata mesajı gösterme ve stilleme
Girdi olaylarıyla anlık doğrulama
FormData ile form verisini toplama
Erişilebilir doğrulama geri bildirimi

Modül 4

Proje: Dinamik Arayüz

Proje gereksinimleri ve HTML yapısı
Fonksiyonlarla modüler kod organizasyonu
DOM ile dinamik liste ekleme ve silme
Olaylarla kullanıcı etkileşimi yönetimi
localStorage ile durumun saklanması
Hata ayıklama ve projenin tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Dil kuralları

Söz dizimi, tip davranışı, operatör önceliği ve hoisting gibi JavaScript mekaniklerini kavrayarak hataların nedenini anlarsınız.

✅

Tip yönetimi

İlkel ve referans tipleri, tip dönüşümünü ve truthy-falsy davranışını kavrayarak beklenmedik sonuçları önlersiniz.

✅

Fonksiyon ustalığı

Fonksiyon türlerini, varsayılan ve rest parametreleri kullanarak tekrar kullanılabilir ve okunaklı fonksiyonlar yazarsınız.

✅

Kapsam ve closure

Kapsam zincirini ve closure mekanizmasını kavrayarak veri saklama ve durum yönetimi desenlerini uygularsınız.

✅

this bağlamı

this değerinin çağrıya göre nasıl değiştiğini ve call, apply, bind ile nasıl kontrol edildiğini kavrarsınız.

✅

DOM yönetimi

Elemanları seçer, oluşturur, değiştirir ve nitelik, sınıf ve stillerini JavaScript üzerinden dinamik olarak yönetirsiniz.

✅

Olay yönetimi

Olay dinleyicileri, yayılımı ve delegasyonu kullanarak kullanıcı etkileşimlerini verimli ve düzenli biçimde yönetirsiniz.

✅

Etkileşimli arayüz

Dil, fonksiyon ve DOM bilgisini birleştirerek tamamen JavaScript ile yönetilen dinamik bir arayüz geliştirirsiniz.

Kimler İçin Uygundur?

JavaScript dilini temelden sağlamlaştırmak isteyen geliştiriciler
DOM
olay yönetimini derinleştirmek isteyen ön yüz geliştiriciler ve framework öncesi saf JavaScript öğrenmek isteyenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

JavaScript dilini temelden sağlamlaştırmak isteyen geliştiriciler, DOM ve olay yönetimini derinleştirmek isteyen ön yüz geliştiriciler ve framework öncesi saf JavaScript öğrenmek isteyenler için uygundur. Temel HTML ve CSS bilgisi faydalıdır.

Framework öğrenmeden önce bu eğitim gerekli mi?

React, Vue veya Angular gibi framework'leri öğrenmeden önce dilin kurallarını, fonksiyonları ve DOM'u kavramak çok faydalıdır. Bu eğitim saf JavaScript üzerinde sağlam bir temel kurarak framework öğrenimini kolaylaştırır.

Closure ve this gibi zor konular işleniyor mu?

Evet, kapsam zinciri, closure mekanizması ve this bağlamının çağrıya göre nasıl değiştiği ayrıntılı örneklerle işlenir. call, apply ve bind yöntemleri ile this kontrolü uygulamalı olarak gösterilir.

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 örnekleri kendisi çalıştırır.

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 dil kurallarını ve DOM yönetimini uygulamalı olarak kullandığını 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

JAVASCRIPT RULES, FUNCTIONS, & HTML ELEMENTS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Söz Dizimi ve Değişkenler

Veri Tipleri ve Dönüşüm

Operatörler ve Öncelik

Kontrol Akışı ve Mekanik

Fonksiyon Tanım Türleri

Kapsam ve Closure

this Anahtar Kelimesi ve Bağlam

Yüksek Dereceli Fonksiyonlar

DOM Ağacı ve Düğümler

Eleman Seçim Yöntemleri

Eleman Oluşturma ve Değiştirme

Stil ve Form Elemanları

Olay Yönetimi Temelleri

Olay Yayılımı ve Delegasyon

Form İşleme ve Doğrulama

Proje: Dinamik Arayüz

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Bootstrap Forms & Layout Eğitimi

Browsers and HTML in Adobe Dreamweaver CC Eğitimi

Creating Responsive Projects with Captivate Eğitimi

CSS Responsive Web Design Training Eğitimi

Databases, Bootstrap, & jQuery in Web Design Eğitimi

Defensive Coding for JavaScript and HTML Eğitimi