JavaScript’te Konsol, Bildirim ve Kullanıcı Etkileşimi

Web sayfalarını daha akıllı ve etkileşimli hale getirmek için kullanılan JavaScript, günümüzün en popüler programlama dillerinden biridir. Bu makalede, JavaScript’in temel yapı taşlarından olan console.log(), alert() ve prompt() gibi metotları tanıyacak, onları nasıl kullanacağımızı öğreneceğiz.

Üstelik bu yöntemleri sadece tarayıcı konsolunda değil, gerçek bir JavaScript dosyasında kullanmayı da öğreneceğiz. Hazırsan başlayalım!

Kodları Sadece Konsola Değil, Dosyaya Yazmak

İlk öğrendiğimizde, JavaScript kodlarını doğrudan tarayıcıdaki geliştirici araçlarındaki konsola yazarız:

3 + 5

Bu kodu yazınca sonuç hemen çıkar: 8.

Ama gerçek dünyadaki web sitelerinde, kodlar böyle anlık yazılmaz. Bunun yerine .js uzantılı bir dosya oluşturulur ve bu dosya HTML sayfasına bağlanır:

<script src="uygulama.js"></script>

Bu dosya çalıştığında, içindeki kodlar tarayıcı tarafından yorumlanır. Ancak önemli bir fark var:

Bu dosyada yazdığın şeyler ekranda otomatik olarak görünmez.

Sonuçları görebilmek için bazı araçlar kullanmamız gerekir.

console.log() ile Konsola Mesaj Yazmak

Kodlarımız çalışırken içeride neler olduğunu anlamak isteriz. İşte tam bu noktada devreye console.log() girer. Bu fonksiyon, tarayıcının geliştirici konsoluna mesaj yazdırmak için kullanılır.

Örnek:

console.log("Bugün hava çok güzel!");

Konsolda şöyle bir mesaj çıkar:

Bugün hava çok güzel!

Yalnızca yazılar değil, sayılar da yazdırabilirsin:

console.log(6 * 7);

Bu da konsola 42 yazdırır.

Birden fazla bilgi yazdırmak istersen:

console.log("Toplam:", 10 + 20, "TL");

Sonuç:

Toplam: 30 TL

Bu yöntem, özellikle hataları bulmak veya adım adım ne olduğunu görmek için hayati önem taşır.

Verileri Tablo Halinde Görmek: console.table()

JavaScript, sadece yazı değil, liste (dizi) ve nesne gibi verileri de konsola daha okunabilir biçimde yazdırmamıza izin verir.

console.table() sayesinde bu veriler tablo gibi düzenli bir şekilde görüntülenir.

Örnek 1: Dizi Yazdırmak

let hayvanlar = ["Kedi", "Köpek", "Kuş"];
console.table(hayvanlar);

Konsolda şu şekilde görünür:

┌─────────┬──────────┐
│ (index) │ Values   │
├─────────┼──────────┤
│    0    │ "Kedi"   │
│    1    │ "Köpek"  │
│    2    │ "Kuş"    │
└─────────┴──────────┘

Örnek 2: Nesne Dizisi Yazdırmak

let ogrenciler = [
  { ad: "Ayşe", yas: 17 },
  { ad: "Mehmet", yas: 18 },
  { ad: "Zeynep", yas: 16 }
];

console.table(ogrenciler);

Bu kod şu şekilde tablo olarak görünür:

┌─────────┬──────────┬─────┐
│ (index) │   ad     │ yas │
├─────────┼──────────┼─────┤
│    0    │ "Ayşe"   │  17 │
│    1    │ "Mehmet" │  18 │
│    2    │ "Zeynep" │  16 │
└─────────┴──────────┴─────┘

Bu yöntem, özellikle çok sayıda veriyi daha anlaşılır biçimde göstermek için çok faydalıdır.

Uyarılar ve Hatalar: console.warn() ve console.error()

Bazı durumlarda sıradan bir console.log() mesajı yeterli olmaz.

Bir uyarı ya da hata mesajı göstermek istersen, bu iki yöntemi kullanabilirsin:

console.warn()

console.warn("Şarjınız azaldı!");

Bu mesaj konsolda sarı renkte ve ünlem işaretiyle görünür.

console.error()

console.error("Sunucuya bağlanılamadı!");

Bu da kırmızı renkte görünür, tıpkı bir sistem hatası gibi.

Hataları yakalamak ve çözmek için çok kullanışlıdır.

Kullanıcıya Bildirim: alert()

Bir web sayfasını açtığında karşına “Hoş geldiniz!” şeklinde bir kutucuk çıktı mı?

İşte bu, alert() fonksiyonudur.

Örnek:

alert("Sayfamıza hoş geldiniz!");

Bu komutu yazarsan, kullanıcıya bir bildirim penceresi gösterilir.

Kullanıcı "Tamam" demeden sayfa işlemleri devam etmez.

Not: Gerçek sitelerde sürekli alert() kullanmak pek hoş karşılanmaz çünkü kullanıcıyı rahatsız edebilir.

Kullanıcıdan Bilgi Almak: prompt()

JavaScript ile sadece mesaj göstermek değil, bilgi almak da mümkündür.

prompt() fonksiyonu, kullanıcıdan bilgi almak için kullanılır.

Örnek:

let sehir = prompt("Hangi şehirde yaşıyorsun?");
console.log("Yaşadığın şehir:", sehir);

Bu kod kullanıcıdan bir şehir adı ister. Kullanıcı örneğin "Bursa" yazarsa, konsolda şu görünür:

Yaşadığın şehir: Bursa

Ancak dikkat et! prompt() ile alınan her şey yazı (string) olarak gelir. Sayı bile girsen, sonuç yazı olur.

Sayı ile Gerçek Toplama: parseInt()

Aşağıdaki kodda ne yazdırılacağını tahmin et:

let sayi = prompt("Bir sayı gir:");
console.log(sayi + 2);

Kullanıcı 10 yazarsa sonuç ne olur?

Cevap: 102

Neden mi? Çünkü "10" bir yazı, 2 ise bir sayı. Yazıyla sayıyı toplarsan, JavaScript bunları birleştirir.

Gerçek matematiksel toplama yapmak istiyorsan parseInt() kullanmalısın:

Doğru Kullanım:

let sayi = prompt("Bir sayı gir:");
let sonuc = parseInt(sayi) + 2;
console.log("Gerçek sonuç:", sonuc);

Şimdi kullanıcı 10 yazarsa, çıktı şu olur:

Gerçek sonuç: 12

REPL Nedir?

Konsolda kod yazdığında, her şey anında olur:

1. Yazarsın (Read)
2. Çalıştırılır (Evaluate)
3. Sonuç gösterilir (Print)
4. Bir sonrakine geçilir (Loop)

Bu döngüye REPL denir:

Read – Evaluate – Print – Loop

Ama .js dosyasına kod yazarsan, sadece Read ve Evaluate olur.

Print yoktur, çünkü dosya kendiliğinden ekrana yazmaz.

İşte bu yüzden console.log() gibi metotlara ihtiyacımız vardır.

Sonuç: Temel Yapıları Öğrenmeden Web Sayfası Canlanmaz

JavaScript'in gücünü gösterebilmek için öncelikle bu temel araçları bilmeliyiz:

console.log() ile konsola bilgi yazdır

console.table() ile verileri tablo halinde göster

alert() ile kullanıcıya uyarı göster

prompt() ile kullanıcıdan bilgi al

parseInt() ile yazıyı sayıya çevir

console.warn() ve console.error() ile uyarı ve hata mesajları oluştur

Bu temel taşlar sayesinde, hem kullanıcıyla etkileşim kurabilir hem de kendi yazdığın kodları daha iyi anlayabilirsin.