Web Sitesi Kodlama Eğitimi – 7: JavaScript Temelleri ve Mantıksal Yapı
Kodlama Eğitiminde, şu ana kadar öğrendiğimiz HTML ve CSS ile görsel olarak kusursuz, ancak “statik” sayfalar oluşturduk. Şimdi ise bu sayfalara akıl ve hareket katma vakti. Bu kodlama eğitimi bölümünde, dünyanın en popüler programlama dili olan JavaScript (JS) ile tanışacak ve web sitenizi yaşayan bir uygulama haline getirmenin temellerini atacaksınız.
1. JavaScript Nedir? Web’in Beyni
JavaScript, bir web sayfasının davranışlarını kontrol eden programlama dilidir. HTML sayfanın iskeleti, CSS dış görünüşü ise JavaScript bu yapının kas ve sinir sistemidir.
Tarayıcı Tabanlı Güç: JS, doğrudan kullanıcının tarayıcısında çalışır. Sayfayı yenilemeden içerik değiştirmek, form verilerini anlık kontrol etmek ve etkileşimli haritalar oluşturmak JS sayesinde mümkündür.
Programlama Mantığı: Bu kodlama eğitimi aşamasında, sadece kod yazmayı değil, bir problemleri nasıl adım adım çözeceğinizi (algoritma kurmayı) de öğreneceksiniz.
2. Değişkenler ve Veri Tipleri: Bilgiyi Hafızada Tutma
Programlama, verileri işleme sanatıdır. Bu verileri daha sonra kullanmak üzere “kutulara” koymaya değişken tanımlama diyoruz.
Değişken Tanımlama: Modern JS’de let (değişebilir değerler) ve const (sabit, değişmez değerler) kullanılır. Eskiden kullanılan var artık tavsiye edilmez.
Veri Tipleri:
String: Metinsel ifadeler (“Merhaba Dünya”).
Number: Sayısal değerler (25, 3.14).
Boolean: Sadece doğru (true) veya yanlış (false) değerleri.
SEO Notu: JavaScript değişkenlerinizin isimlendirmesi kod okunabilirliğini artırır, bu da ekip projelerinde profesyonellik göstergesidir.
3. Fonksiyonlar (Functions): Kodun İşlem Merkezi
Sürekli tekrar etmeniz gereken bir işlem varsa, bunu bir fonksiyon içine alarak istediğiniz zaman çağırabilirsiniz.
Fonksiyon Tanımlama: function selamVer() { alert(“Hoş geldin!”); } yapısı basit bir örnektir.
Parametreler: Fonksiyonlar dışarıdan bilgi alabilir ve bu bilgiyi işleyip size bir sonuç dönebilir (return).
Kullanım Amacı: Kod kalabalığını engeller ve bu kodlama eğitimi sürecinde öğrendiğiniz “DRY” (Don’t Repeat Yourself – Kendini Tekrar Etme) prensibine uymanızı sağlar.
4. Karar Yapıları ve Döngüler: Akıllı Sayfalar
Bir web sitesinin “Eğer kullanıcı giriş yaptıysa profilini göster, yapmadıysa giriş ekranını göster” diyebilmesi için karar yapılarına ihtiyacı vardır.
if-else Yapısı: Belirli şartlar sağlandığında kodun çalışmasını, sağlanmadığında ise alternatif yolun izlenmesini sağlar.
Döngüler (Loops): Bir işlemi yüzlerce kez tekrar etmeniz gerektiğinde (örneğin 100 tane ürün listelemek) for veya while döngülerini kullanırsınız.
Otomasyon: Döngüler, manuel olarak saatlerce sürecek işleri milisaniyeler içinde tamamlamanızı sağlayan bu kodlama eğitimi içindeki en güçlü araçlardandır.
5. DOM Manipülasyonuna Giriş
JavaScript’in asıl büyüsü, HTML öğelerine (DOM – Document Object Model) erişip onları değiştirebilmesidir.
Öğeye Erişmek: document.getElementById(“baslik”) gibi komutlarla bir HTML etiketini yakalayabilirsiniz.
İçeriği Değiştirmek: Yakaladığınız bir butonun rengini CSS kullanmadan değiştirebilir veya bir paragrafın içindeki yazıyı anlık olarak güncelleyebilirsiniz.
Olay İzleyiciler (Event Listeners): “Kullanıcı şu butona tıkladığında bu fonksiyonu çalıştır” diyerek tam bir etkileşim döngüsü kurarsınız.
Uzmanından İpuçları ve Sık Yapılan Hatalar
Hata: Tüm JavaScript kodlarını HTML dosyasının içine yazmak.
Çözüm: CSS’de olduğu gibi JS kodlarınızı da .js uzantılı harici bir dosyada tutun ve HTML’in en altına (kapanış </body> etiketinden hemen önce) ekleyin.
İpucu: JavaScript öğrenirken konsolu (Console) kullanmayı alışkanlık haline getirin. console.log() komutu, kodunuzun o an ne yaptığını görmeniz için en iyi dostunuzdur.
Sıkça Sorulan Sorular (SSS)
Soru 1: Java ve JavaScript aynı şey mi? Cevap: Kesinlikle hayır. Hamster ve Jambon ne kadar farklıysa Java ve JavaScript de o kadar farklıdır. İsim benzerliği tamamen bir pazarlama stratejisidir.
Soru 2: JavaScript öğrenmek ne kadar sürer? Cevap: Temel mantığı bir haftada kavrayabilirsiniz ancak profesyonel projeler geliştirmek aylar süren bir pratik gerektirir. Bu kodlama eğitimi size bu yolculuğun temel haritasını sunar.
Soru 3: Sitemde JavaScript kapalıysa ne olur? Cevap: Modern web sitelerinin çoğu çalışmaz hale gelir. Ancak profesyonel bir geliştirici olarak, temel içeriğin JS olmadan da görünmesini (Progressive Enhancement) sağlamalısınız.
Soru 4: Değişken tanımlarken neden hep const kullanmalıyım? Cevap: Bir değerin değişmeyeceğinden eminseniz const kullanmak, kodun ilerleyen kısımlarında yanlışlıkla o değeri değiştirmenizi engeller ve daha güvenli bir yapı sunar.
Soru 5: JavaScript SEO’ya zarar verir mi? Cevap: Eskiden zordu ancak günümüzde Google botları JavaScript’i çok iyi tarayabiliyor. Yine de önemli SEO metinlerinin sunucu taraflı veya statik HTML içinde olması daha garantidir.
Bölüm Özeti ve Gelecek Ders
Bu bölümde statik sayfalarımıza can veren JavaScript’in temel taşlarını; değişkenleri, fonksiyonları ve mantıksal döngüleri öğrendik. Artık kodlarınız sadece “görünmüyor”, aynı zamanda “düşünüyor”.
Eğitim 8’de bizi ne bekliyor? Sıradaki dersimizde JavaScript’in gücünü somutlaştıracağız: “JavaScript ile Etkileşim: Eventler ve DOM Yönetimi”. Bir butona tıklandığında neler olabileceğini, animasyonları ve kullanıcı etkileşimlerini derinlemesine işleyeceğiz.
Uygulama Ödevi: Bir değişken tanımlayın ve bu değişkene isminizi atayın. Ardından bir fonksiyon yazın; bu fonksiyon çağrıldığında konsola “Merhaba [isminiz], hoş geldin!” yazdırsın!