İçeriğe geç

JavaScript · 1/8

Ekrana yazı yazdırma

Metin ile çalışan kod arasındaki farkı görmek ve çıktıyı okuyabilmek.

Önerilen çalışma: 25–45 dakika; örnekleri kendin uygula. Süre kişiye göre değişir.

Bu sayfada · 9 başlık

Başlamadan önce

Ön bilgi gerekmiyor. Kodu yazacağın alan ile sonucu okuyacağın alanı ayırt ederek başlayacağız.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

JavaScript · Ekrana yazı yazdırma — videolu atölye: açıklamalı kavram şeması
Webino App öğretici şeması · Uygulama ekran görüntüsü değildir.

Videoyla adım adım izle

Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.

Video bölümleri ve tam metin

Ekrana yazı yazdırma

Metin ile çalışan kod arasındaki farkı görmek ve çıktıyı okuyabilmek.

Kavramı kur

Program, bilgisayarın izlediği talimatların belirli bir sözdizimiyle yazılmış hâlidir. İlk görevimiz ekrana bir bilgi yazdırmak. Metni tırnak içinde verdiğimizde onu bir değer olarak kullanırız; tırnak dışında kalan sözcük ise değişken veya komut adı olarak yorumlanabilir. Bu ayrımı anlamak sonraki örneklerde isim ve metni birbirine karıştırmanı önler.

Neden böyle çalışıyor?

Çıktı, programın ne yaptığını gözlemlemenin en basit yollarından biridir. Çalıştırmadan önce kaç satır beklediğini ve her satırda ne yazacağını not et. Sonra gerçek çıktıyla karşılaştır. Hata mesajı görürsen sonuca atlamak yerine ilk hata satırını oku; eksik tırnak veya parantez çoğu zaman sonraki satırların da yanlış görünmesine neden olur.

Çalışma sırası

Yazdığın dosya ile çalıştırdığın dosyanın aynı olduğunu doğrula. Editördeki değişikliği kaydetmeden eski sürümü çalıştırmak çok yaygın bir başlangıç hatasıdır. Bu derste dış paket, hesap veya ağ bağlantısı gerekmez; yalnızca dilin temel çıktı mekanizmasını öğreniyoruz.

İkinci örnek · 1

İlk çıktı ifadesi bir metin değerini ekrana gönderir. Kodun tamamı yazılı derste bulunur.

Kod

console.log("İlk satır");
console.log("İkinci satır");

Beklenen sonucu oku

Çıktı metnini değiştirmek ile komut adını değiştirmek aynı şey değildir.

Beklenen çıktı: İlk satır İkinci satır

Bir değeri sen değiştir

İlk mesajı kendi belirlediğin kısa bir cümleyle değiştir. İki ayrı çıktı ifadesi kullanarak iki satır oluştur.

Hata nereden gelir?

Metnin tırnağını unutmak, dilin o metni bir isim sanmasına neden olabilir; tırnak çiftini kontrol et.

Kendi çözümünü kur

Bir tırnağı bilinçli olarak kaldır; çıkan ilk hata mesajını not et, sonra hatayı düzelt. Önce çalışan kodun kopyasını tut. Yalnızca tırnak içindeki metni değiştirerek başla.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

Kod

console.log("Bugün başladım");
console.log("Yarın devam edeceğim");

Kendini kontrol et

Bir metin değerinin çevresindeki tırnakları kaldırmak neden sorun çıkarabilir? Yanıt: Dil, sözcüğü metin yerine bir isim veya sözdizimi öğesi olarak yorumlayabilir; aynı anlama gelmez.

Beklenen çıktı: Bugün başladım Yarın devam edeceğim

Konu anlatımı

Program, bilgisayarın izlediği talimatların belirli bir sözdizimiyle yazılmış hâlidir. İlk görevimiz ekrana bir bilgi yazdırmak. Metni tırnak içinde verdiğimizde onu bir değer olarak kullanırız; tırnak dışında kalan sözcük ise değişken veya komut adı olarak yorumlanabilir. Bu ayrımı anlamak sonraki örneklerde isim ve metni birbirine karıştırmanı önler.

Çıktı, programın ne yaptığını gözlemlemenin en basit yollarından biridir. Çalıştırmadan önce kaç satır beklediğini ve her satırda ne yazacağını not et. Sonra gerçek çıktıyla karşılaştır. Hata mesajı görürsen sonuca atlamak yerine ilk hata satırını oku; eksik tırnak veya parantez çoğu zaman sonraki satırların da yanlış görünmesine neden olur.

Yazdığın dosya ile çalıştırdığın dosyanın aynı olduğunu doğrula. Editördeki değişikliği kaydetmeden eski sürümü çalıştırmak çok yaygın bir başlangıç hatasıdır. Bu derste dış paket, hesap veya ağ bağlantısı gerekmez; yalnızca dilin temel çıktı mekanizmasını öğreniyoruz.

console.log geliştirici konsoluna yazar; HTML sayfasına bir paragraf eklemez. Bu sitedeki çalıştırıcı konsol çıktısını bir sonuç alanında gösterir. Gerçek tarayıcıda DevTools Console bölümünü aç. Bir DOM öğesinin metnini değiştirmek ayrı bir işlemdir.

İlk örneği oku ve dene

1

Ekrana yazı yazdırma

console.log yazdığın şeyi tarayıcının konsol penceresine yazar. Satırlar genelde noktalı virgül ; ile biter.

JavaScript 
console.log("Merhaba Dünya!");

▶ Sonuç

Merhaba Dünya!

Adım adım neden böyle çalışıyor?

  1. İlk çıktı ifadesi bir metin değerini ekrana gönderir.
  2. İkinci ifade ayrı bir çalıştırma adımıdır; beklenen satır sayısını artırır.
  3. Tırnak içindeki boşluk da metnin bir parçasıdır.
  4. Çıktı metnini değiştirmek ile komut adını değiştirmek aynı şey değildir.
101

İkinci çözümlü örnek

Metin ile çalışan kod arasındaki farkı görmek ve çıktıyı okuyabilmek.

JavaScript 
console.log("İlk satır");
console.log("İkinci satır");

▶ Sonuç

İlk satır
İkinci satır

Kolaydan zora sen dene

  1. İlk mesajı kendi belirlediğin kısa bir cümleyle değiştir.
  2. İki ayrı çıktı ifadesi kullanarak iki satır oluştur.
  3. Bir tırnağı bilinçli olarak kaldır; çıkan ilk hata mesajını not et, sonra hatayı düzelt.
İpucunu aç

Önce çalışan kodun kopyasını tut. Yalnızca tırnak içindeki metni değiştirerek başla.

Üç görevin açıklamalı çözümünü oku
  1. Mesajın yalnızca tırnak içindeki kısmını değiştir; komut adını aynı tut. Çıktıda yeni cümlenin görünmesini bekle.
  2. İki çıktı çağrısı iki ayrı satır üretir. Çağrıları tek bir metin içinde birleştirmek aynı kaynak yapısı değildir.
  3. Eksik tırnak sözdizimini bozar. İlk hata satırındaki konumu incele; eşleşen tırnağı geri koyduğunda başlangıçtaki çıktı yeniden oluşmalıdır.
Bir çözüm varyasyonu gör
201

Çözüm varyasyonu

Önce kendi görevlerini dene. Bu varyasyonda girdi ve sonuçları karşılaştır.

JavaScript 
console.log("Bugün başladım");
console.log("Yarın devam edeceğim");

▶ Sonuç

Bugün başladım
Yarın devam edeceğim

Yaygın hata ve çözümü

  1. Metnin tırnağını unutmak, dilin o metni bir isim sanmasına neden olabilir; tırnak çiftini kontrol et.
  2. Aynı kodun eski çıktısını görüyorsan kaydetme ve çalıştırılan dosya yolunu denetle.

Kendini değerlendir

Ekrana yazdırma komutunun temel amacı nedir?

Ezberlemeden açıklayabiliyor musun?

Bir metin değerinin çevresindeki tırnakları kaldırmak neden sorun çıkarabilir?

Açıklamalı yanıt

Dil, sözcüğü metin yerine bir isim veya sözdizimi öğesi olarak yorumlayabilir; aynı anlama gelmez.

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.

Resmî dil belgeleri
Bu içerik işine yaradı mı?

Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.