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. Görüntüleyin Mesajların konsola nasıl kaydedileceğini öğrenmek için Günlük Kaydı Mesajlarını Kullanmaya Başlama. Başlarken bölümüne bakın. JavaScript'te Hata Ayıklama ile JavaScript kodunu nasıl duraklatacağınızı ve en son adımda birlikte çalışır.

Şekil 1. Konsol.

Genel Bakış

Konsol; Okuma, Değerlendirme, Yazdır ve Döngü anlamına gelen bir REPL'dir. Şunu okuyor: yazdığınız JavaScript kodu, kodunuzu değerlendirir, oluşturduğunuz ifade'dir 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. Zaman takip ederseniz iş akışlarını hatırlama ihtimaliniz artar.

1. Açmak için Command+Option+J (Mac) veya Control+Üst Karakter+J (Windows, Linux, ChromeOS) tuşlarına basın Console'a, yani buraya, tam da bu sayfaya.

   

   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 ifadeleri Konsolda sırayla çalıştırmak genellikle yararlıdır. sayfanın görünümünü veya çalışma şeklini değiştirin.

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 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 Console'un görünümü.

   Değerlendirdiğiniz kodun altında "Hello, Console!" görünür. REPL'in 4 adımını hatırlayın: okuma, değerlendirme, yazdırma, döngü oluşturma. Kodunuz değerlendirildikten sonra bir REPL, ifadenin sonucunu yazdırır. Yani "Hello, Console!", yapılan değerlendirmenin sonucu olmalıdır document.getElementById('hello').textContent = 'Hello, Console!'.

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

Bazen, bazı kodları test edebileceğiniz veya yeni JavaScript'i deneyebileceğiniz bir kod parkı istersiniz özellikleri olabilir. 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 kodunuzun altındaki ifadenin sonucudur. Aşağıdaki Şekil 4'te Console'un sonra bunu göz önünde bulundurmalısınız.

3. Aşağıdaki kodu Konsola yazın. İçerikleri ayrı ayrı yazmak yerine kopyalayıp yapıştırdığınızdan emin olun.

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

   b=20 hakkında bilginiz yoksa işlev bağımsız değişkenleri için varsayılan değerleri tanımlama bölümüne bakın söz dizimine uygun olmalıdır.

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(25) işlevi 45 olarak değerlendirilir çünkü add işlevi ikinci bir bağımsız değişken olmadan çağrıldığında b, varsayılan olarak 20 değerine ayarlanır.

İş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 geçerli sayfanın başarısız olmasına ve girdiğiniz tüm verilerin kaybolmasına 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 şunları kullanabilirsiniz: Konsol'u kullanarak sayfanın window veya DOM ayarlarını o anda görüntüleyebilir ve değiştirebilirsiniz. Bu durum, API'yi kullanabilirsiniz. Etkileşimli ve etkileşimli yapılandırma için JavaScript Hatalarını Ayıklamaya Başlama eğiticidir.

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 yalnızca document.querySelector()
• 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.