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

Kayce Basques

Bu etkileşimli eğitim, Chrome Geliştirici Araçları Konsolu'nda JavaScript'in nasıl çalıştırılacağını gösterir. Mesajları konsola nasıl kaydedeceğinizi öğrenmek için Günlük Kaydı Mesajlarını Kullanmaya Başlama bölümüne bakın. JavaScript kodunu nasıl duraklatacağınızı ve kodu her seferinde bir satırlık adımın nasıl işleyeceğini öğrenmek için JavaScript Hatalarını Ayıklamaya Başlarken bölümüne bakın.

Şekil 1. Konsol.

Genel bakış

Konsol; Okuma, Değerlendirme, Yazdır ve Döngü anlamına gelen bir REPL'dir. içine yazdığınız JavaScript'i okur, kodunuzu değerlendirir, ifadenizin sonucunu yazdırır ve daha sonra 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. Fiziksel olarak takip ettiğinizde, iş akışlarını daha sonra hatırlama ihtimaliniz artar.

1. Konsolu tam bu sayfada açmak için Command+Option+J (Mac) veya Control+Üst Karakter+J (Windows, Linux, ChromeOS) tuşlarına basın.

   

   2. Şekil. Bu eğitim sol tarafta, Geliştirici Araçları ise sağ taraftadır.

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

Bir sayfa oluştururken veya hata ayıklarken sayfanın görünümünü veya çalışma şeklini değiştirmek için Konsol'da ifadeler çalıştırmak genellikle 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.

   

   3. Şekil. Yukarıdaki ifade değerlendirildikten sonra Console'un görünümü.

   Değerlendirdiğiniz kodun altında "Hello, Console!" görünür. REPL'nin 4 adımını hatırlayın: okuma, değerlendirme, yazdırma, döngü. Kodunuz değerlendirildikten sonra bir REPL, 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. Konsola 5 + 15 yazın. Sonuç olarak 20, ifadenizin altında görünür (ifadenizin değerlendirilmesi çok fazla zaman almadığı sürece).
2. İfadeyi değerlendirmek için Enter tuşuna basın. Console, ifadenin sonucunu kodunuzun altında yazdırır. Aşağıdaki Şekil 4'te, bu ifade değerlendirildikten sonra Konsolunuzun nasıl görünmesi gerektiği gösterilmektedir.

3. Aşağıdaki kodu Konsola yazın. Kopyalayıp yapıştırmak yerine karakter tek tek 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ğerleri tanımlama bölümüne bakın.

4. Şimdi, tanımladığınız fonksiyonu çağırın.

   add(25);
   

   

   4. Şekil. Yukarıdaki ifadeler değerlendirildikten sonra Console'un nasıl görüneceği.

   add işlevi ikinci bir bağımsız değişken olmadan çağrıldığında b, varsayılan olarak 20 değerine sahip olduğu için add(25), 45 olarak değerlendirilir.

İşleviniz geri dönene kadar bu konsol oturumunda kod çalıştıramazsınız. Bu çok uzun sürerse zaman alan hesaplamayı iptal etmek için Görev Yöneticisi'ni kullanabilirsiniz. Ancak bu işlem, geçerli sayfanın başarısız olmasına ve girdiğiniz tüm verilerin kaybolmasına da neden olur.

Sonraki adımlar

Konsolda JavaScript çalıştırmayla ilgili diğer özellikleri keşfetmek için JavaScript'i çalıştırma konusuna bakın.

Geliştirici Araçları, bir komut dosyasını yürütme işlemi ortasında duraklatmanıza olanak tanır. Duraklatılmış durumdayken sayfanın window veya DOM değerlerini o anda görüntülemek ve değiştirmek için Konsol'u kullanabilirsiniz. Bu, güçlü bir hata ayıklama iş akışı sağlar. Etkileşimli bir eğitim için JavaScript Hata Ayıklamaya Başlama bölümüne bakın.

Konsol, bir dizi biçim tanımlayıcısını da destekler. Konsol mesajlarını biçimlendirme ve stil özelliklerini ayarlamayla ilgili 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 esinlenilmiş olsa da aslında jQuery değildir. Bu sadece document.querySelector() için bir takma addır.
• debug(function), bu işlevin ilk satırında etkili bir şekilde bir ayrılma 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.