Konsolda JavaScript'i çalıştırın

Kayce Basques

Bu etkileşimli eğitimde, Chrome Geliştirici Araçları Konsolu'nda JavaScript'in nasıl çalıştırılacağı gösterilmektedir. Console'a mesajları nasıl kaydedeceğinizi öğrenmek için Mesaj Günlüğe Kaydetme Özelliğini Kullanmaya Başlama başlıklı makaleyi inceleyin. JavaScript kodunu nasıl duraklatacağınızı ve bir satırda bir adım atarak nasıl ilerleyeceğinizi öğrenmek için JavaScript Hata Ayıklama ile Başlayın başlıklı makaleyi inceleyin.

Şekil 1. Console'u (Konsol)

Genel Bakış

Konsol, Okuma, Değerlendirme, Yazdırma ve Döngü anlamına gelen bir REPL'dir. Yazdığınız JavaScript'i okur, kodunuzu değerlendirir, ifadenizin sonucunu yazdırır ve ardından ilk adıma geri döner.

Geliştirici Araçları'nı ayarlama

Bu eğitim, demoyu açıp tüm iş akışlarını kendiniz deneyebileceğiniz şekilde tasarlanmıştır. Adım adım takip ettiğinizde iş akışlarını daha sonra hatırlama olasılığınız artar.

1. Bu sayfadaki Konsol'u açmak için Command+Option+J (Mac) veya Control+Shift+J (Windows, Linux, ChromeOS) tuşlarına basın.

   

   Şekil 2. Sol tarafta bu eğitim, sağ tarafta ise Geliştirici Araçları gösterilmektedir.

Sayfanın JavaScript'ini veya DOM'unu görüntüleme ve değiştirme

Bir sayfayı oluştururken veya sayfayla ilgili hata ayıklamaya çalışırken sayfanın görünümünü ya da çalışma şeklini değiştirmek için genellikle Console'da komut çalıştırmak yararlıdır.

1. Aşağıdaki düğmede yer alan metne dikkat edin.

   Merhaba Dünya!

2. Konsola document.getElementById('hello').textContent = 'Hello, Console!' yazın ve ifadeyi değerlendirmek için Enter tuşuna basın. Düğmenin içindeki metnin nasıl değiştiğine dikkat edin.

   

   Şekil 3. Console, yukarıdaki ifadeyi değerlendirdikten sonra nasıl görünür?

   Değerlendirdiğiniz kodun altında "Hello, Console!" gösterilir. REPL'nin 4 adımını hatırlayın: oku, değerlendir, yazdır, döngü. REPL, kodunuzu değerlendirdikten sonra ifadenin sonucunu yazdırır. Yani "Hello, Console!", document.getElementById('hello').textContent = 'Hello, Console!' değerlendirmesinin sonucu olmalıdır.

Sayfayla ilgili olmayan rastgele JavaScript çalıştırmak

Bazen, bazı kodları test edebileceğiniz veya bilmediğiniz yeni JavaScript özelliklerini deneyebileceğiniz bir kod oyun alanı istersiniz. Console, bu tür denemeler için mükemmel bir yerdir.

1. Konsol'a 5 + 15 yazın. 20 sonucu, ifadenizin altında görünür (ifadenizin değerlendirilmesi çok uzun sürmediği sürece).
2. İfadeyi değerlendirmek için Enter tuşuna basın. Konsolda, ifadenin sonucu kodunuzun altına yazdırılır. Aşağıdaki Şekil 4'te, bu ifade değerlendirildikten sonra Konsol'unuzun nasıl görünmesi gerektiği gösterilmektedir.

3. Console'a aşağıdaki kodu yazın. Kopyalayıp yapıştırmak yerine karakter karakter yazmayı deneyin.

   function add(a, b=20) {
     return a + b;
   }
   

   b=20 söz dizimine aşina değilseniz işlev bağımsız değişkenleri için varsayılan değerler tanımlama başlıklı makaleyi inceleyin.

4. Şimdi, az önce tanımladığınız işlevi çağırın.

   add(25);
   

   

   Şekil 4. Console, yukarıdaki ifadeleri değerlendirdikten sonra nasıl görünür?

   add işlevi ikinci bir bağımsız değişken olmadan çağrıldığında b varsayılan olarak 20 değerini aldığından add(25), 45 değerini döndürür.

İşleviniz döndürülene kadar bu konsol oturumunda kod çalıştıramazsınız. Bu işlem çok uzun sürerse zaman alıcı hesaplamayı iptal etmek için Görev Yöneticisi'ni kullanabilirsiniz. Ancak bu işlem, mevcut sayfanın başarısız olmasına neden olur ve girdiğiniz tüm veriler kaybolur.

Sonraki adımlar

Konsol'da JavaScript çalıştırmayla ilgili daha fazla özellik keşfetmek için JavaScript çalıştırma başlıklı makaleyi inceleyin.

Geliştirici Araçları, bir komut dosyasını yürütme işlemi ortasında duraklatmanıza olanak tanır. Duraklattığınızda Console'u kullanarak sayfanın o anki window veya DOM değerini görüntüleyebilir ve değiştirebilirsiniz. Bu, güçlü bir hata ayıklama iş akışı sağlar. Etkileşimli bir eğitim için JavaScript'de Hata Ayıklama ile Başlama başlıklı makaleyi inceleyin.

Konsol, bir dizi biçim tanımlayıcısını da destekler. Konsol mesajlarını biçimlendirme ve biçimlendirmeye yönelik tüm yöntemleri keşfetmek için Konsol'da mesajları biçimlendirme ve biçimlendirme başlıklı makaleyi inceleyin.

Konsolda, sayfalarla etkileşimi kolaylaştıran bir dizi kullanışlı işlev de bulunur. Örneğin:

• Bir öğe seçmek için document.querySelector() yerine $() yazabilirsiniz. Bu söz dizimi jQuery'den esinlenmiştir ancak aslında jQuery değildir. Bu, document.querySelector() için yalnızca bir takma addır.
• debug(function), söz konusu işlevin ilk satırında bir kesme noktası belirler.
• keys(object), belirtilen nesnenin anahtarlarını içeren bir dizi döndürür.

Tüm kolaylık işlevlerini keşfetmek için Console Utilities API Referansı'na bakın.