Web için JavaScript Temelleri Eğitimi

Eğitim Hakkında

Değişkenlerden DOM'a, olaylardan fetch ve JSON'a web için temel JavaScript

JavaScript Essentials for Web Development Eğitimi, web geliştirme için JavaScript dilini sıfırdan ve uygulamalı öğretir. Katılımcılar değişken, veri türü, operatör, kontrol yapısı ve fonksiyonlarla başlar; DOM erişimi, olay yönetimi ve form işleme ile sayfayı etkileşimli hale getirir. Program dizi ve nesnelerle veri işleme, fetch ile JSON tabanlı sunucu iletişimi ve temel ES6 özelliklerini kapsar; her gün küçük bir etkileşimli arayüz kurulur.

Süre ve Format

3 Gün. Her gün dört modül; sade bir web sayfası üç gün boyunca değişkenlerden DOM ve sunucu iletişimine adım adım etkileşimli hale getirilir.

Seviye

Temel Seviye — Web geliştirme için JavaScript'in temellerini sıfırdan uygulamalı öğrenme

Öğrenme Metodu

Sade bir web sayfası üç gün boyunca JavaScript ile adım adım canlandırılır; her modülde yeni bir temel konu uygulamalı işlenir.

Neden Bu Eğitim?

🚀Web'in dili

JavaScript tarayıcıların tek programlama dilidir; onu öğrenerek statik sayfaları etkileşimli, canlı arayüzlere dönüştürmeye başlarsınız.

🧩Sağlam temel

Değişken, fonksiyon, DOM ve olay gibi temelleri doğru kurarak React ve Vue gibi modern araçlara güvenle geçiş sağlarsınız.

💼Aranan beceri

Temel JavaScript bilgisi ön yüz işlerinin vazgeçilmez gereğidir; bu beceriyle web projelerinde hızla katkı verir hale gelirsiniz.

Anahtar Konular

javascript temelleri eğitimiweb geliştirme javascriptjavascript dom eğitimijavascript olay yönetimijavascript başlangıç kursusıfırdan javascriptjavascript fetch jsonön yüz geliştirme eğitimijavascript form işlemejavascript kursu

“Her büyük ön yüz geliştiricisi bir gün ilk değişkenini tanımladı; sağlam temel, sonraki her çerçeveyi kolaylaştıran yatırımdır.”

Ön Koşullar

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

1

HTML bilgisi

Temel HTML etiketleri ve sayfa yapısına aşinalık beklenir; JavaScript bu yapıyı canlandırmak için kullanılır.

2

CSS temelleri

Seçici, sınıf ve temel stil kavramlarına aşinalık, DOM ve stil örneklerini anlamayı kolaylaştırır.

3

Kod düzenleyici

Bir kod düzenleyici (örneğin VS Code) ve güncel bir tarayıcının kurulu olması gerekir.

4

Programlama deneyimi gerekmez

Önceden programlama bilgisi beklenmez; eğitim JavaScript'i en temelden başlayarak adım adım öğretir.

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ı değişken ve veri türlerini öğrenir, operatör ve kontrol yapılarıyla mantık kurar, fonksiyonlarla kodu yeniden kullanılabilir parçalara ayırır.

Modül 1

Değişkenler ve Türler

let, const ve var ile değişken tanımı
Sayı, metin (string) ve boolean türleri
null ve undefined değerleri ve farkı
Tür dönüşümü ve typeof operatörü
Şablon dizesi (template literal) kullanımı
Değişken adlandırma ve kapsam temeli

Modül 2

Operatörler ve İfadeler

Aritmetik ve atama operatörleri
Karşılaştırma ve eşitlik (== ve ===)
Mantıksal operatörler (and, or, not)
Üçlü (ternary) koşul operatörü
Değer doğruluğu (truthy/falsy) kavramı
Operatör önceliği ve parantezle gruplama

Modül 3

Kontrol Akışı ve Döngüler

if, else if ve else koşul yapıları
switch ile çoklu durum kontrolü
for döngüsü ile sayaç tabanlı tekrar
while ve do-while döngüleriyle tekrar
break ve continue ile akış kontrolü
for-of ile dizi üzerinde gezinme

Modül 4

Fonksiyonlar ve Kapsam

Fonksiyon tanımı ve çağrısı (call)
Parametre ve dönüş (return) değeri
Ok fonksiyonu (arrow function) söz dizimi
Varsayılan parametre değerleri
Kapsam ve yerel değişkenlerin ömrü
Fonksiyonla kodu tekrar kullanma

Günün hedefiKatılımcı DOM üzerinden öğelere erişir ve içeriği değiştirir, olay dinleyicileriyle kullanıcı etkileşimini yakalar, form verilerini okuyup doğrular.

Modül 1

DOM Erişimi ve Seçim

querySelector ile öğe seçme ve erişim
getElementById ve sınıf seçimi
textContent ve innerHTML ile içerik
Öznitelik (attribute) okuma ve yazma
classList ile sınıf ekleyip kaldırma
style ile satır içi stil değiştirme

Modül 2

DOM İçeriğini Değiştirme

createElement ile yeni öğe oluşturma
appendChild ve append ile ekleme
remove ile öğeyi sayfadan silme
Öğe içeriğini dinamik güncelleme
Liste öğelerini döngüyle oluşturma
DOM değişiminde performans ipuçları

Modül 3

Olaylar ve Dinleyiciler

addEventListener ile olay dinleme
click, input ve change olayları
Olay nesnesi (event) ve hedef (target)
preventDefault ile varsayılanı engelleme
Olay yayılımı (bubbling) temeli
Olay delegasyonu ile tek dinleyici

Modül 4

Form İşleme ve Doğrulama

Form alanı değerini okuma ve alma
submit olayını yakalama ve işleme
Basit girdi doğrulama (validation)
Hata mesajını ekranda gösterme
Onay kutusu ve seçim (select) okuma
Form verisini işleyip yanıt verme

Günün hedefiKatılımcı dizi ve nesnelerle veriyi işler, fetch ile JSON tabanlı sunucu iletişimi kurar, modern ES6 özellikleriyle küçük bir etkileşimli proje tamamlar.

Modül 1

Diziler ve Yöntemleri

Dizi oluşturma ve öğeye erişim
push, pop, shift ve unshift yöntemleri
map ile dizi öğelerini dönüştürme
filter ile dizi öğelerini süzme
forEach ile dizi üzerinde gezinme
find ve includes ile öğe arama

Modül 2

Nesneler ve Özellikler

Nesne oluşturma ve özellik erişimi
Nokta ve köşeli parantez erişimi
Nesne içinde metot (method) tanımlama
Object.keys ve Object.values kullanımı
Nesne yıkımı (destructuring) kullanımı
İç içe (nested) nesne ile çalışma

Modül 3

fetch ve JSON ile Veri

fetch ile sunucudan veri isteme
JSON yanıtını ayrıştırma (parse)
Promise ve then zinciri ile bekleme
async/await ile veri yanıtını bekleme
Hata (catch) durumunu ele alma
Gelen veriyi DOM'a yansıtma ve gösterme

Modül 4

ES6 Özellikleri ve Proje

let/const ve blok kapsamı kullanımı
Ok fonksiyonu ve kısa söz dizimi
Yayma (spread) ve rest operatörü
Modül import ve export temeli (ES6)
Küçük etkileşimli uygulama kurgusu
Kodu düzenleme ve hata ayıklama

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Dil temelleri

Değişken, veri türü, operatör ve kontrol yapılarıyla temel program mantığını kurmayı sağlam biçimde öğrenirsiniz.

✅

Fonksiyon kullanımı

Fonksiyon tanımlar, parametre ve dönüş değerleriyle kodu yeniden kullanılabilir ve düzenli parçalara ayırırsınız.

✅

DOM ile çalışma

querySelector ve DOM yöntemleriyle sayfa öğelerine erişir, içeriği ve stili dinamik olarak değiştirebilirsiniz.

✅

Olay yönetimi

addEventListener ile kullanıcı etkileşimlerini yakalar, olay nesnesini kullanarak arayüzü tepkisel hale getirirsiniz.

✅

Form işleme

Form alanlarını okur, basit doğrulama yapar ve kullanıcıya anlamlı geri bildirim veren formlar kurarsınız.

✅

Dizi ve nesne işleme

Dizi ve nesnelerle veriyi düzenler, map ve filter gibi yöntemlerle dönüştürüp süzmeyi öğrenirsiniz.

✅

Sunucu iletişimi

fetch ve JSON ile sunucudan veri alır, async/await kullanarak gelen veriyi arayüze yansıtabilirsiniz.

✅

İlk etkileşimli proje

Öğrendiğiniz temelleri birleştirerek küçük ama çalışan, etkileşimli bir web uygulaması tamamlarsınız.

Kimler İçin Uygundur?

Web geliştirmeye yeni başlayan
HTML ve CSS bilen ancak JavaScript'i sıfırdan öğrenmek isteyen öğrenciler
tasarımdan geliştirmeye geçmek isteyenler
siteye etkileşim katmak isteyen ekip üyeleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web geliştirmeye yeni başlayan, HTML ve CSS bilen ancak JavaScript'i sıfırdan öğrenmek isteyen öğrenciler ve ekip üyeleri için uygundur. Önceden programlama bilgisi gerekmez; dil en temelden başlanarak adım adım öğretilir.

Önceden programlama bilmem gerekir mi?

Hayır. Eğitim JavaScript'i sıfırdan ele alır; değişken ve fonksiyon gibi kavramlar baştan anlatılır. Yalnızca temel HTML ve CSS bilgisi ile bir kod düzenleyici ve tarayıcının kurulu olması yeterlidir.

Eğitim sonunda neler yapabilir hale gelirim?

Sayfa öğelerine erişip içeriği değiştiren, kullanıcı etkileşimlerini yakalayan, form verilerini doğrulayan ve fetch ile sunucudan veri alıp gösteren küçük etkileşimli web uygulamaları geliştirebilir hale gelirsiniz.

Eğitim online mı yüz yüze mi veriliyor?

Eğitim hem yüz yüze hem online olarak verilebilir ve kurumun ihtiyaçlarına göre uyarlanır. Örnek projeler, kurumun kullandığı içerik ve arayüze göre özelleştirilebilir.

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, eğitim kapsamını ve tamamlanan modülleri 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 ESSENTIALS FOR WEB DEVELOPMENT EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Değişkenler ve Türler

Operatörler ve İfadeler

Kontrol Akışı ve Döngüler

Fonksiyonlar ve Kapsam

DOM Erişimi ve Seçim

DOM İçeriğini Değiştirme

Olaylar ve Dinleyiciler

Form İşleme ve Doğrulama

Diziler ve Yöntemleri

Nesneler ve Özellikler

fetch ve JSON ile Veri

ES6 Özellikleri 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

Web Fundamentals: Dynamic Web Pages with JavaScript Eğitimi

Working with ASK API Using Node.js & Java Eğitimi

Working with Jasmine Spies & Using Jasmine with Node.js Eğitimi

Working with JSON, Java, Node.js, & Python Eğitimi

ES ve Modern JavaScript Özellikleri Eğitimi

İleri Seviye JavaScript Geliştirme Eğitimi