JavaScript öğrenmeye başlarken atılan ilk adımlardan biri, basit komutlarla kod yazmak ve çalıştırmaktır. Bu noktada en çok kullanılan iki yöntem console.log ve alert fonksiyonlarıdır. Peki, bu iki fonksiyon ne işe yarar, nasıl kullanılır? İşte detaylı açıklamasıyla “İlk JavaScript Kodun” yazmanın yolu!
console.log() Nedir ve Nasıl Kullanılır?
console.log() fonksiyonu, JavaScript kodunuzun çalışma sırasında ürettiği çıktıları tarayıcının konsol (console) bölümüne yazdırır. Geliştiriciler tarafından en çok tercih edilen debug (hata ayıklama) yöntemidir. Böylece kodun hangi aşamada ne değer aldığını kolayca görebilirsiniz.
Örnek kullanım:
console.log("Merhaba Dünya!");
Bu kod, tarayıcının geliştirici araçlarındaki konsola “Merhaba Dünya!” yazısını yazdırır. Konsolu görmek için genellikle F12 tuşuna basabilir veya sağ tıklayıp “İncele” seçeneğini seçebilirsiniz.
alert() Fonksiyonu ile Kullanıcıya Mesaj Gösterme
alert() fonksiyonu, tarayıcı penceresinde kullanıcıya küçük bir uyarı penceresi (popup) gösterir. Bu pencere, kullanıcı tarafından kapatılana kadar sayfada başka işlem yapılamaz. Basit bilgi mesajları veya uyarılar için kullanılır.
Örnek kullanım:
alert("Hoşgeldiniz!");
Bu komut çalıştığında, ekranda “Hoşgeldiniz!” yazan bir uyarı kutusu belirir.
console.log ve alert Arasındaki Farklar
console.log()daha çok geliştirici amaçlıdır, kullanıcı tarafından görülmez; kodu test etmek ve değerleri takip etmek için idealdir.alert()doğrudan kullanıcıya görünür ve dikkat çeker; kullanıcı etkileşimi gerektirir.
İlk JavaScript Kodunu Yazmak İçin Örnek
<!DOCTYPE html>
<html>
<head>
<title>İlk JavaScript Kodum</title>
</head>
<body>
<script>
console.log("Bu bir test mesajıdır.");
alert("JavaScript'e hoşgeldiniz!");
</script>
</body>
</html>
Bu basit sayfayı bir .html dosyası olarak kaydedip tarayıcıda açtığınızda, önce konsolda mesaj görecek, ardından uyarı penceresi çıkacaktır.
İkisi Arasındaki Farklar
| Özellik | console.log() | alert() |
|---|---|---|
| Görünürlük | Sadece konsol | Kullanıcıya pop-up |
| Kullanım Amacı | Debug için | Kullanıcıyı bilgilendirme |
| Çoklu Veri | Destekler (virgülle ayırarak) | Sadece string birleştirme |
| Kullanıcı Etk. | Gerekmez | Tamam butonuna basılmasını bekler |
Örnek Uygulama
// Kullanıcı bilgileri
let kullaniciAdi = "furkanmorova";
let sifre = "123456";
// Konsola yazdır
console.log("Giriş Denemesi:", {
kullanici: kullaniciAdi,
zaman: new Date()
});
// Kullanıcıya hoşgeldin mesajı
alert("Merhaba " + kullaniciAdi + "! Sisteme hoş geldiniz.");
// Hesaplama örneği
let gunlukKazanc = 500;
let haftalik = gunlukKazanc * 7;
console.log("Haftalık kazanç:", haftalik);
alert("Bu hafta " + haftalik + " TL kazandınız!");
Geliştirme İpuçları
console.log()ile farklı stiller deneyebilirsiniz:
console.log("%cBu özel bir mesaj", "color: red; font-size: 20px;");
alert()çok sık kullanıldığında kullanıcı deneyimini olumsuz etkiler, dikkatli kullanın.- Konsolda gruplama yapabilirsiniz:
console.group("Kullanıcı Detayları");
console.log("Ad: Ahmet");
console.log("Yaş: 30");
console.groupEnd();
