JavaScript çıktısı
Sayfaya betik koymayı biliyorsunuz. Sıradaki beceri: sonuç nerede görünsün — ziyaretçi için sayfada, kapatılması gereken bir pencerede, yoksa yalnızca sizin Console’unuzda. Aynı dil, dört çok farklı yer.
JavaScript sonucunu nasıl gösterirsiniz?
Ziyaretçi için var olan bir öğeyi güncelleyin — düz metin için textContent, yalnızca sizin yazdığınız işaretlemeyi ekleyecekseniz innerHTML. Sayfayı durduran ileti için window.alert. Kendi hata ayıklamanız için console.log. document.write eski bir akıştır: dosya okunurken çoğu zaman sorun olmaz; yüklendikten sonra tehlikelidir — belgenin tamamını silebilir.
Sonuç nerede görünür?
📊 Sonucu görmenin yaygın yerleri
| Yöntem | Kim görür | Başlayan varsayılanı |
|---|---|---|
Bir öğede textContent |
Ziyaretçi, sayfada | Evet — günlük görünen çıktı |
Bir öğede innerHTML |
Ziyaretçi, HTML etiketleriyle | Yalnızca işaretleme sizinse |
window.alert |
Ziyaretçi, pencerede | Seyrek — sayfa OK’e kadar durur |
console.log |
Siz, DevTools Console’da | Evet hata ayıklama için; ziyaretçi görmez |
document.write |
HTML akışı | Yüklendikten sonra kullanmayın |
Sayfada (ziyaretçi varsayılanı)
HTML’de gerçek bir başlık veya paragraf bırakın. Betik çalışınca (önceki dersteki gibi body sonu) o düğümü değiştirin. Ziyaretçi DevTools açmadan yeni metni görür.
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>
Neden önce textContent
- Betik düşerse «Waiting…» HTML’de kalır
- Tırnak ve
<metin kalır, etiket olmaz - Body sonuna betik koyma alışkanlığıyla aynı kalıp
- DOM modülü sonra gelir; burada «sonucu buraya koy» yeter
innerHTML — sonuç işaretleme olduğunda
innerHTML dizgeyi HTML gibi okur. Bilerek kendi yazdığınız etiketleri eklerken kullanın. Kullanıcının ham girdisini innerHTML’e dökmeyin. İsim veya fiyat için textContent.
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>
document.write — tanıyın, az kullanın
document.write dosya ayrıştırılırken HTML akışına metin gönderir. Yüklendikten sonra çağırırsanız (geç tıklama) birçok tarayıcı yeni akış açar ve sayfayı siler. Güncelleme için öğeyi değiştirin; bu alışkanlığı edinmeyin.
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>
Demoyu açın, düğmeye basın, ilk paragrafın gittiğini görün. Bu yüzden kursun sonraki örneklerinde document.write kullanmayacağız.
alert — sayfayı durduran pencere
window.alert (çoğu zaman alert) sistem penceresi açar. Sayfa OK’e kadar bekler. Betiğin çalıştığını bir kez kanıtlamak için iyidir. Tek arayüz olarak zayıf: stil almaz, peş peşe rahatsız eder, ekran okuyucu ve klavyeyi keser. Asıl iletileri sayfaya yazın.
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>
console.log — sizin için, ziyaretçi için değil
Console bir geliştirici aracıdır. console.log oraya basar. Telefondaki müşteri görmez. Öğrenirken sayı veya dizge bakmak için iyidir. Başarılı log «uygulama sonucu gösterdi» demek değildir.
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);
DevTools’u açın (sık F12), Console sekmesi, yenileyin, satırları okuyun. Yalnız console.log değişir ve başlık «Waiting…» kalırsa ziyaretçi de «Waiting…» görür.
Kendiniz deneyin
textContentsayfasını kaydedin, açın, dizgeyi değiştirin, yenileyin.- Satırı
<strong>ileinnerHTMLyapın, kalın göründüğünü doğrulayın. - Console’u açıp
console.logörneğini çalıştırın — gövdede yeni bir şey olmamalı. - alert’i bir kez çalıştırın; sonra başlık güncellemesiyle değiştirin ki sayfa durmasın.
- İsteğe bağlı:
document.writedüğmesiyle silinmeyi hissedin — sonra bu kalıbı dosyalarınızdan çıkarın.
Yaygın hatalar
- Sonucu yalnız
console.logile gösterip boş sayfaya şaşırmak - Yazmadığınız metni (form, URL, sohbet)
innerHTML’e koymak,textContentyerine - Yüklendikten sonra
document.writeçağırıp tüm düzeni kaybetmek - Her tuşta
alert - Where To ile karıştırmak: orası betiğin yaşadığı yer; burası sonucun göründüğü yer
Özet
- Ziyaretçi için görünen varsayılan: öğeyi
textContentile güncelleyin innerHTMLsizin kontrol ettiğiniz işaretlemeyi ekler — güvenilmeyen dizgeler değilalertsayfayı kilitler; az kullanınconsole.logDevTools’ta geliştirici içindir- Yüklendikten sonra
document.writekullanmayın; belge silinebilir - Aynı iletiyi Console → alert → başlık yolunda taşıyarak pratik yapın
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 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