JavaScript'te Word Sayacı Nasıl Oluşturulur

Kelime sayacı, bir metin parçasındaki kelime sayısını saymak için kullanabileceğiniz bir araçtır. Bir belgenin uzunluğunu kontrol etmek veya bir kelime sayısı sınırını karşılayıp karşılamadığınızı izlemek için kullanabilirsiniz.

HTML, CSS ve JavaScript kullanarak kendi kelime sayacınızı oluşturabilirsiniz. Kelime sayacınızı bir web tarayıcısında açın, metninizi bir giriş alanına girin ve kaç kelime kullandığınızı görün.

Bu proje, JavaScript bilginizi uygulamanıza ve sağlamlaştırmanıza da yardımcı olabilir.

Kelime Sayacı için Kullanıcı Arayüzü Nasıl Oluşturulur

Kelime sayacı için kullanıcı arabirimi oluşturmak üzere, temel bir HTML sayfasına bir metin alanı girişi ekleyin. Kelimelerini saymak istediğiniz cümleyi veya paragrafı girebileceğiniz yer burasıdır.

1. "index.html" adlı yeni bir HTML dosyası oluşturun.
2. Dosyanın içine bir HTML web sayfası için temel yapıyı ekleyin:

   html>
   <htmldil="tr-US">
   <KAFA>
   <başlık> Kelime Sayacı başlık>
   KAFA>
   <vücut>
   
   sınıf="konteyner">
   <h1> kelimeleri say h1>
   div>
   vücut>
   html>

3. Kapsayıcı div'in içine ve başlığın altına bir metin alanı ekleyin:

   <metin alanıİD="giriş"sıralar="10">metin alanı>

4. Metin alanının altına bir düğme ekleyin:

   <düğmeİD="sayma düğmesi">kelimeleri saydüğme>

5. Kullanıcı yukarıdaki düğmeyi tıkladığında kelime sayısını görüntülemek için bir yayılma etiketi ekleyin:

   <div>
    Kelimeler: <açıklıkİD="kelime sayısı sonucu">0açıklık>
   div>

6. HTML dosyanızla aynı klasörde "styles.css" adında yeni bir dosya oluşturun.
7. Web sayfanızın stilini oluşturmak için CSS dosyasını biraz CSS ile doldurun:

   vücut {
    kenar boşluğu: 0;
    dolgu: 0;
    arka plan rengi: #f0fcfc;
   }
   * {
    font ailesi: "Arial", sans Serif;
   }
   .konteyner {
    dolgu: 100 piksel %25;
    ekran: esnek;
    esnek yön: sütun;
    satır yüksekliği: 2rem;
   yazı Boyutu: 1.2rem;
    renk: #202C39;
   }
   metin alanı {
    dolgu: 20 piksel;
    yazı tipi boyutu: 1rem;
    kenar boşluğu: 40px;
   }
   düğme {
    dolgu: 10 piksel;
    kenar boşluğu: 40px;
   } 

8. HTML baş etiketinin içine bir bağlantı etiketi ekleyerek CSS dosyasını HTML dosyanıza bağlayın:

   <bağlantırel="stil sayfası"href="stil.css">

9. Web sayfasının kullanıcı arayüzünü test etmek için, bir web tarayıcısında açmak üzere "index.html" dosyasına tıklayın.

Textarea İçindeki Her Kelime Nasıl Sayılır?

Bir kullanıcı metin alanına bir cümle girdiğinde, web sayfası, tıklandığında her kelimeyi saymalıdır. kelimeleri say düğme.

Bu işlevi yeni bir JavaScript dosyasına ekleyebilirsiniz. Gerekirse, diğerlerini gözden geçirin acemi JavaScript proje fikirleri JavaScript bilginizi tazelemeniz gerekiyorsa.

1. "index.html" ve "styles.css" dosyalarınızla aynı klasöre "script.js" adında yeni bir dosya ekleyin.
2. Gövde etiketinin altına bir komut dosyası etiketi ekleyerek HTML dosyanızı JavaScript dosyanıza bağlayın:

   <vücut>
    Kodunuz burada 
   <senaryokaynak="script.js">senaryo>
   vücut>

3. script.js içinde, textarea, button ve span HTML öğelerini almak için getElementById() işlevini kullanın. Bu öğeleri üç ayrı değişkende saklayın:

   izin vermek giriş = belge.getElementById("giriş");
   izin vermek düğme = belge.getElementById("sayma düğmesi");
   izin vermek wordCountSonuç = belge.getElementById("kelime sayısı sonucu");

4. Bir tıklama olayı dinleyicisi ekleyin. Bu fonksiyon, kullanıcı üzerine tıkladığında çalışacaktır. kelimeleri say düğme:

   button.addEventListener("tıklamak", işlev() {
   });

5. Click olay dinleyicisinin içinde, kullanıcının textarea'ya girdiği değeri alın. Bu değeri, textarea HTML öğesini saklayan giriş değişkeninde bulabilirsiniz.

   izin vermek str = girdi.değer;

6. Dizeyi ayrı sözcüklere ayırmak için split() işlevini kullanın. Bu, dizede bir boşluk olduğunda gerçekleşir. Bu, her kelimeyi yeni bir dizinin bir öğesi olarak saklayacaktır. Örneğin, girilen cümle "Köpekleri seviyorum" ise, ortaya çıkan dizi ["Ben", "aşk", "köpekler"] olacaktır.

   izin vermek kelimelerListesi = str.split(" ");

7. Dizinin uzunluğunu kullanarak kelime sayısını bulun:

   izin vermek say = wordList.uzunluk;

8. Sonucu kullanıcıya geri göstermek için span HTML öğesinin içeriğini yeni değeri gösterecek şekilde değiştirin:

   wordCountResult.innerHTML = sayım; 

Örnek Kelime Sayacı Nasıl Kullanılır?

Kelime sayacı web sayfanızı bir web tarayıcısı kullanarak test edebilirsiniz.

1. Herhangi bir web tarayıcısında index.html dosyasını açın.
2. Metin alanına bir cümle veya paragraf girin:
3. Tıkla kelimeleri say kelime sayısını güncellemek için düğmesine basın. Bu, tıpkı sizin gibi, kelime sayısını gösterecektir. Google Dokümanlar'daki kelime sayısını kontrol etti, Microsoft Word veya kelime sayımı olan başka bir düzenleyici.

JavaScript Kullanarak Basit Uygulamalar Oluşturma

Artık, bir HTML sayfasındaki sözcükleri saymak ve öğelerle etkileşim kurmak için JavaScript'i nasıl kullanacağınız konusunda temel bir anlayışa sahip olduğunuzu umarız. Programlama anlayışınızı geliştirmek için JavaScript'te küçük faydalı projeler oluşturmaya devam edin.