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

Bu etkileşimli eğitim, Chrome Geliştirici Araçları Konsolu'nda JavaScript'in nasıl çalıştırılacağını gösterir. Mesajları Console'a nasıl günlüğe kaydedeceğinizi öğrenmek için Günlük Mesajlarını Kullanmaya Başlayın bölümüne bakın. JavaScript kodunu nasıl duraklatacağınızı ve koda satır tek tek nasıl ilerleyeceğinizi öğrenmek için JavaScript Hatalarını Ayıklamaya Başlayın bölümüne bakın.

Şekil 1. Konsol.

Genel bakış

Konsol; Okuma, Değerlendirme, Yazdırma ve Döngü anlamına gelen bir REPL'dir. Girdiğiniz 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ı kur

Bu eğitim, demoyu açıp tüm iş akışlarını kendiniz deneyebilmeniz için tasarlanmıştır. Fiziksel olarak takip ettiğinizde iş akışlarını daha sonra hatırlama olasılığınız artar.

1. Tam bu sayfada, Konsol'u 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 solda ve Geliştirici Araçları sağdadır.

Sayfanın JavaScript veya DOM kodunu 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 genellikle Konsol'da ifadeleri çalıştırmak yararlı olur.

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

   Merhaba Dünya,

2. Konsol'a document.getElementById('hello').textContent = 'Hello, Console!' yazın ve ardından 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 Konsolun nasıl göründüğü.

   Değerlendirdiğiniz kodun altında "Hello, Console!" ifadesini görürsünüz. REPL’nin 4 adımını hatırlayın: okuma, değerlendirme, yazdırma, döngü. Kodunuzu değerlendirdikten sonra, REPL ifadesi ifadenin sonucunu yazdırır. Dolayısıyla "Hello, Console!", document.getElementById('hello').textContent = 'Hello, Console!' değerlendirmesinin sonucu olmalıdır.

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

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

1. Konsola 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şlarına basın. Konsol, kodunuzun altına ifadenin sonucunu yazdırır. Aşağıdaki Şekil 4, bu ifadeyi değerlendirdikten sonra Console'un nasıl görünmesi gerektiğini göstermektedir.

3. Konsol'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ğerleri tanımlama bölümüne bakın.

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

   add(25);
   

   

   4. Şekil. Yukarıdaki ifadeler değerlendirildikten sonra Konsolun nasıl göründüğü.

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

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

Sonraki adımlar

Console'da JavaScript çalıştırmayla ilgili diğer özellikleri keşfetmek için JavaScript çalıştırma başlıklı makaleye göz atın.

Geliştirici Araçları, yürütülürken bir komut dosyasını duraklatmanıza olanak tanır. Duraklatılmış durumdayken, sayfanın window veya DOM değerini 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 Hatalarını Ayıklamaya Başlayın bölümüne bakın.

Konsol bir dizi biçim tanımlayıcıyı da destekler. Konsol mesajlarını biçimlendirme ve biçimlendirme yöntemlerini keşfetmek için Konsolda mesajları biçimlendirme ve biçimlendirme başlıklı makaleye bakın.

Bunun dışında, Konsol'da sayfayla etkileşimi kolaylaştıran bir dizi kullanışlı işlev bulunur. Örneğin:

• Bir öğeyi seçmek için document.querySelector() yazmak yerine, $() yazabilirsiniz. Bu söz dizimi jQuery'den esinlenilmiş, ancak aslında jQuery değil. Bu, document.querySelector() için bir takma addır.
• debug(function), bu işlevin ilk satırında etkili bir şekilde bir ayrılma noktası ayarlar.
• 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.