Web geliştirme dünyasına adım atmaya karar verdiniz; harika bir seçim! JavaScript öğrenmek, modern web dünyasında yapabileceğiniz en mantıklı ve gelecek vadeden başlangıçlardan biridir. 1995 yılında Brendan Eich tarafından yaratılan JavaScript, günümüzde web sitelerinin %98.9’unda kullanıcı tarafı (client-side) dinamik davranışları kontrol etmek için kullanılmaktadır. Temel bir web sayfası HTML ile oluşturulup CSS ile görsel olarak biçimlendirilirken, JavaScript bu statik sayfalara “hayat” ve etkileşim katar.
Programlamaya yeni başlayan herkesin ilk adımı genellikle ekrana bir mesaj yazdırmaktır. Bir dili öğrenirken, yazdığınız komutların nasıl bir tepki verdiğini görmek, mantığı anlamanızı ve motivasyonunuzu artırmanızı sağlar. JavaScript, derleme (compile) gerektirmeyen ve doğrudan tarayıcınız (browser) tarafından anında yorumlanarak çalıştırılan (interpreted) oldukça esnek bir dildir.
Bu kapsamlı rehberde, ilk JavaScript kodlarınızı nasıl yazacağınızı, geliştirici dünyasının en çok kullanılan çıktı araçları olan console.log ve alert komutlarının ne işe yaradığını, aralarındaki farkları ve bu komutları web sayfanıza nasıl entegre edeceğinizi örneklerle pekiştirerek öğreneceğiz.
Tarayıcı Konsolu (Browser Console) Nedir ve Nasıl Açılır?
JavaScript kodlarınızı yazmak ve test etmek için bilgisayarınıza başlangıçta karmaşık programlar kurmanıza gerek yoktur; Firefox, Chrome, Microsoft Edge ve Safari gibi modern web tarayıcılarının hepsi JavaScript kodlarını çalıştırmak için hazır bir altyapı sunar. Tarayıcınız, içerisinde yazılan kodları anlamak ve denemeler yapmak için geliştiricilere özel bir araç sunar: Geliştirici Konsolu (Developer Console).
Windows işletim sistemli bir bilgisayarda web tarayıcısındayken klavyenizden F12 tuşuna basarak veya web sayfasında boş bir yere sağ tıklayıp “İncele” (Inspect) seçeneğini seçerek bu paneli açabilirsiniz. Açılan yan veya alt panelde “Console” (Konsol) sekmesine tıkladığınızda, doğrudan JavaScript kodlarınızı yazabileceğiniz boş bir alan göreceksiniz. Geliştiriciler, uygulamaların doğru çalışıp çalışmadığını anlamak, olayların arka planını takip etmek ve hataları ayıklamak (debugging) için bu konsolu sürekli olarak kullanırlar.
console.log() Nedir ve Nasıl Kullanılır?
console.log(), JavaScript’teki en temel, en meşhur ve geliştirme sürecinde en çok kullanacağınız komuttur. Bu komut, parantez içine yazdığınız değerleri veya metinleri tarayıcının geliştirici konsoluna yazdırır. Kullanıcılar web sayfasında gezinirken bu mesajları görmezler; bu mesajlar sadece geliştiricilerin kodun beklenen tepkiyi verip vermediğini test etmesi içindir.
Örnek Kullanım:
console.log("Merhaba Dünya!");
Bu kodu konsolunuza yazıp Enter tuşuna bastığınızda, alt satırda Merhaba Dünya! çıktısını göreceksiniz.
Bu basit kod parçasında yeni başlayanların dikkat etmesi gereken bazı temel JavaScript yazım kuralları (syntax) bulunur:
- Tırnak İşaretleri: JavaScript’te metin (string) verilerini her zaman tırnak işaretleri içinde yazmalısınız. İhtiyacınıza göre çift tırnak (
" ") veya tek tırnak (' ') kullanabilirsiniz. - Noktalı Virgül (;): Her JavaScript ifadesinin (statement) sonuna noktalı virgül koymak iyi bir alışkanlıktır. JavaScript bazen bunu unutsanız da hatasız çalışabilir, ancak karmaşık uygulamalarda hataları önlemek adına bu disipline uymak son derece önemlidir.
Sadece metinleri değil, sayıları ve matematiksel işlemleri de aynı fonksiyonla konsola yazdırabilirsiniz:
console.log(10);
console.log(5 + 7);
Bunun yanında, tanımladığınız değişkenlerin o anki durumunu görmek için de console.log() komutuna başvururuz:
let kullaniciAdi = "Maaike";
console.log(kullaniciAdi);
Bu kod çalıştırıldığında ekrana Maaike değerini yazdıracaktır. Geliştirdiğiniz bir özellikte işler ters gittiğinde, “Acaba bu değişken şu anda hangi değeri tutuyor?” diye merak ederseniz, console.log() imdadınıza yetişecektir.
Ek bir bilgi olarak; konsolun sunduğu tek komut log değildir. Eğer liste halinde bir veriniz varsa console.table(), veya bir sorun olduğunu kırmızı ve dikkat çekici bir tasarımla vurgulamak isterseniz console.error() fonksiyonlarını da kullanabilirsiniz.
alert() Nedir ve Nasıl Kullanılır?
console.log() komutunun yalnızca geliştiriciler için olduğunu, normal bir web sitesi ziyaretçisinin F12 tuşuna basmadığı sürece bu yazıları göremeyeceğini belirttik. Peki ya ziyaretçiye, yani son kullanıcıya doğrudan bir karşılama, onay veya hata mesajı göstermek istersek ne yapmalıyız? İşte burada devreye alert() girer.
alert(), web tarayıcısında kullanıcıya küçük bir açılır pencere (pop-up) içinde mesaj göstermeye yarayan yerleşik bir JavaScript fonksiyonudur. Kullanıcı bu uyarıyı okuyup kutudaki “Tamam” veya “OK” butonuna tıklayana kadar sayfanın geri kalanıyla etkileşime giremez.
Örnek Kullanım:
alert("Harika! İlk JavaScript kodunu yazdın!");
Bu kodu çalıştırdığınızda ekranın üst orta kısmında bir uyarı kutusu belirir. Kullanıcının dikkati tamamen bu mesaja çekilir. Geçmişte bu pencereler çok sık kullanılmış olsa da, günümüzde kullanıcı deneyimini (UX) doğrudan kestiği için, genellikle sadece çok önemli uyarıları (örneğin: “Kayıt işlemi başarısız oldu” gibi) göstermek amacıyla tercih edilmektedir.
Kullanıcıyla etkileşime giren pop-up türleri alert ile sınırlı değildir. Kullanıcıdan bir soruya karşılık olarak klavyeden metin girmesini istemek için de prompt() komutu kullanılır. Örneğin prompt("Adınız nedir?"); komutu, kullanıcının veri girebileceği bir alanla birlikte pop-up açar.
HTML İçinde JavaScript Kullanımı: İlk Kodlarımızı Birleştirelim
Öğrendiğimiz console.log ve alert komutlarının sadece konsolda kalmaması, gerçek bir web sayfası dosyasında (HTML) çalışması için doğru şekilde entegre edilmesi gerekir. JavaScript kodlarını bir web sayfasına dahil etmenin iki yaygın yolu vardır:
1. HTML İçine Doğrudan Yazmak (Inline Script): JavaScript kodlarınızı HTML dosyanızın içine, bir <script> ve </script> etiketi (tag) açarak arasına yazabilirsiniz. Bu yöntem küçük denemeler için idealdir.
<!DOCTYPE html>
<html>
<head>
<title>İlk JavaScript Sayfam</title>
</head>
<body>
<h1>Merhaba Web!</h1>
<script>
alert("Sayfamıza hoş geldiniz!");
console.log("Kullanıcı siteye başarıyla giriş yaptı.");
</script>
</body>
</html>
Bu HTML dosyasını bilgisayarınıza kaydedip tarayıcıda açtığınızda, ekranda önce “Sayfamıza hoş geldiniz!” yazan bir uyarı penceresi belirecektir. Tamam butonuna tıkladıktan sonra sağ tıklayıp İncele diyerek Konsolu (F12) açarsanız, geliştiriciler için bıraktığınız “Kullanıcı siteye başarıyla giriş yaptı.” bilgisini görebilirsiniz.
2. Harici (External) Bir Dosyadan Çağırmak: Yazdığınız kodlar uzadıkça, tüm JavaScript satırlarını HTML dosyasında tutmak karmaşaya yol açar. Bu yüzden kodlarınızı ayrı bir dosyaya yazıp HTML’e bağlamak en iyi uygulama (best practice) olarak kabul edilir. Bunun için kodunuzu .js uzantılı ayrı bir dosyaya (örneğin app.js isminde) kaydedin. Ardından HTML dosyanıza şu etiketi ekleyin:
<script src="app.js"></script>
Bu sayede app.js içine yazdığınız console.log ve alert komutlarınız sanki sayfanın içindeymiş gibi çalışacaktır. Bu yöntem aynı JavaScript kodlarını sitenizdeki diğer sayfalarda da kolayca tekrar kullanabilmenize olanak tanır.
Sonuç ve Sonraki Adımlar
Bu içerikte, web dünyasına hükmeden JavaScript diline güçlü bir başlangıç yaptınız. Her yazılımcının en çok kullandığı iki çıktı fonksiyonunu tüm detaylarıyla pekiştirdiniz:
console.log(): Geliştiricinin kapalı kapılar ardında (konsolda) kodları test etmesini, verileri takip etmesini ve sorunları çözmesini sağlar.alert(): Son kullanıcıya ön planda (tarayıcı ekranında) doğrudan uyarılar ve mesajlar ileterek dikkati üzerine çeker.
İlk komutlarınızı verip ekranda başarıyla gösterdikten sonra, artık değişkenler (variables), veri tipleri (data types) ve if-else gibi mantıksal koşullar (logic statements) aşamalarına geçmeye hazırsınız. Kendi HTML ve JS dosyalarınızı oluşturarak öğrendiğiniz bu ilk komutları denemeyi, konsola adınızı veya sevdiğiniz cümleleri yazdırmayı unutmayın. Bol bol pratik yaparak kodlama mantığını pekiştirebilirsiniz.
