Yükleniyor...

JavaScript Giriş

JavaScript, web sitelerini dinamik ve etkileşimli hale getiren güçlü bir programlama dilidir. Bir web sitesini ev inşa etmeye benzetirsek, HTML evi oluşturan temel ve duvarlar gibidir, CSS odaları süsleyen dekorasyon gibidir ve JavaScript evi canlandıran unsurdur: ışıkları yakar, kapıları açar ve kullanıcıyla etkileşim kurar.
JavaScript, günümüzde kişisel web siteleri, bloglar, e-ticaret siteleri ve haber siteleri için vazgeçilmezdir.

  • Bir kişisel web sitesinde, ziyaretçiyi karşılama mesajları gösterebilirsiniz.
  • Bir blogda, yeni içerikleri sayfayı yenilemeden yükleyebilirsiniz.
  • Bir e-ticaret sitesinde, alışveriş sepeti ve form doğrulama işlemlerini yönetebilirsiniz.
  • Bir haber sitesinde, anlık haber başlıklarını dinamik olarak güncelleyebilirsiniz.
    Bu derste, JavaScript’in temelini öğrenecek, basit komut dosyaları yazacak ve kullanıcı etkileşimlerine yanıt verebileceksiniz. Dersi tamamladığınızda, web sitenizi bir mektup gibi “yazan” ve ziyaretçilerinize interaktif bir deneyim sunan küçük kod parçaları oluşturabileceksiniz.

Temel Örnek

javascript
JAVASCRIPT Code 
// Show a welcome message to the user
// This runs immediately when the page is loaded
alert("Web siteme hoş geldiniz!");

Yukarıdaki örnek, JavaScript’in temel kullanımını gösterir. Kodu adım adım inceleyelim:

  1. alert() fonksiyonu, tarayıcıda bir uyarı penceresi (popup) gösterir.
  2. Parantez içindeki "Web siteme hoş geldiniz!" ifadesi, kullanıcıya gösterilecek olan string (metin) verisidir.
  3. Metinler, JavaScript’te çift veya tek tırnak içinde yazılmalıdır.
  4. Tarayıcı sayfayı yüklediğinde bu kod otomatik olarak çalışır ve kullanıcıya mesaj gösterir.
    Yeni başlayanların sorduğu sorular:
  • Bu kodu nereye yazmalıyım? — HTML’de <script> etiketleri içine, genellikle <body> kapanışından hemen önce.

  • Ne işe yarar? — Kullanıcıyı bilgilendirmek, karşılamak veya basit bildirimler vermek için idealdir.
    Uygulama örnekleri:

  • Kişisel sitenizde ziyaretçiyi karşılama.

  • Blogda yeni yazılar için uyarı gösterme.
  • E-ticaret sitesinde ürünü sepete ekleme bildirimleri.
    Bu basit örnek, JavaScript’in temel amacını gösterir: kullanıcı ile etkileşim kurmak.

Pratik Örnek

javascript
JAVASCRIPT Code 
// Show a blog notification on button click
// HTML: <button id="notifyBtn">Yeni Yazıyı Göster</button>
let notifyButton = document.getElementById("notifyBtn");

notifyButton.onclick = function() {
alert("Yeni blog yazısı: JavaScript Temelleri!");
};

En İyi Uygulamalar ve Sık Yapılan Hatalar
Önerilen En İyi Uygulamalar:

  1. Modern sözdizimi kullanın: let ve const kullanarak değişkenleri yönetin.
  2. Olayları doğru yönetin: onclick yerine mümkünse addEventListener ile esnek olay yönetimi sağlayın.
  3. Hataları izleyin: console.log() kullanarak kodun akışını ve değerleri takip edin.

  4. Kodu düzenli tutun: Fonksiyonlar kullanarak uzun scriptlerden kaçının ve performansı artırın.
    Sık Yapılan Hatalar:

  5. DOM elemanına erken erişmek: getElementById çağrısı, öğe henüz yüklenmeden yapılırsa null döner.

  6. Konsol hatalarını görmezden gelmek: Küçük bir yazım hatası bile tüm scripti durdurabilir.
  7. Global değişkenleri aşırı kullanmak: Bellek sızıntılarına ve çakışmalara neden olabilir.
  8. Ana iş parçacığını bloke etmek: Uzun döngüler veya ağır işlemler, sayfanın donmasına neden olur.
    Hata Ayıklama İpuçları:
  • Tarayıcı konsolunu (F12) kullanın.
  • Küçük parçaları test ederek ilerleyin.
  • console.log() ile değerleri takip edin.

📊 Hızlı Referans

Property/Method Description Example
alert() Tarayıcıda uyarı mesajı gösterir alert("Merhaba")
console.log() Konsola mesaj yazar console.log("Debug")
getElementById() Belirli bir id’ye sahip HTML elemanını seçer document.getElementById("btn")
onclick Tıklama olayında çalışacak kodu belirler element.onclick = myFunction
let Blok kapsamlı değişken tanımlar let sayac = 0
const Sabit bir değer tanımlar const PI = 3.14

Özet ve Sonraki Adımlar:
Bu derste, JavaScript’in temel kullanımını öğrendiniz. Artık:

  • Basit scriptler yazabilir,
  • Kullanıcıya mesaj gösterebilir,

  • Buton gibi basit etkileşimler oluşturabilirsiniz.
    Bu bilgiler, HTML DOM (Document Object Model) ile çalışmaya başlamanın temelidir. DOM sayesinde metinleri, görselleri ve stilleri sayfayı yenilemeden değiştirebilirsiniz.
    Sonraki konular:

  • Olay yönetimi ve animasyonlar

  • Dinamik içerik güncellemeleri
  • Sunucu ile iletişim (Fetch API, AJAX)
    Pratik öneri:
    Küçük projelerle pratik yapın. Örneğin, renk değiştiren buton, mini form doğrulaması veya haber başlığı güncelleyici. Düzenli pratik, daha karmaşık JavaScript projelerine hazırlık sağlar.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
3
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 2
Javascript Ders