Kuinka luoda sanalaskuri JavaScriptissä

Sanalaskuri on työkalu, jonka avulla voit laskea tekstissä olevien sanojen määrän. Voit käyttää sitä tarkistamaan asiakirjan pituuden tai seuraamaan, saavutko sanamäärän rajan.

Voit luoda oman sanalaskurin HTML: n, CSS: n ja JavaScriptin avulla. Avaa sanalaskuri verkkoselaimessa, kirjoita tekstisi syöttökenttään ja katso, kuinka monta sanaa käytät.

Tämä projekti voi myös olla hyödyllinen auttamaan sinua harjoittelemaan ja vahvistamaan JavaScript-tietoasi.

Kuinka luoda käyttöliittymä Word Counterille

Luo käyttöliittymä sanalaskimelle lisäämällä tekstialuesyöttö HTML-perussivulle. Tähän voit kirjoittaa lauseen tai kappaleen, jonka sanat haluat laskea.

1. Luo uusi HTML-tiedosto nimeltä "index.html".
instagram viewer
2. Lisää tiedoston sisällä HTML-verkkosivun perusrakenne:

   html>
   <htmllang="en-US">
   <pää>
   <otsikko> Sana laskuri otsikko>
   pää>
   <kehon>
   
   luokkaa="kontti">
   <h1> Laske Sanat h1>
   div>
   kehon>
   html>

3. Lisää säilön div-kohdan sisään ja otsikon alle tekstialue:

   <tekstialueid="syöttö"rivit="10">tekstialue>

4. Lisää tekstialueen alle painike:

   <-painikettaid="laskentapainike">Laske Sanat-painiketta>

5. Lisää span-tunniste näyttääksesi sanamäärän, kun käyttäjä napsauttaa yllä olevaa painiketta:

   <div>
    Sanat: <jänneväliid="sanamäärä-tulos">0jänneväli>
   div>

6. Luo samaan kansioon HTML-tiedoston kanssa uusi tiedosto nimeltä "styles.css".
7. Täytä CSS-tiedosto jollakin CSS: llä verkkosivusi tyylin lisäämiseksi:

   body {
    marginaali: 0;
    pehmuste: 0;
    taustaväri: #f0fcfc;
   }
   * {
    font-family: "Arial", sans-serif;
   }
   .container {
    täyte: 100px 25%;
    näyttö: flex;
    flex-suunta: pylväs;
    linjan korkeus: 2rem;
   Fonttikoko: 1.2rem;
    väri: #202C39;
   }
   tekstialue {
    täyte: 20px;
    fontin koko: 1 rem;
    marginaali-ala: 40px;
   }
   painike {
    täyte: 10px;
    marginaali-ala: 40px;
   } 

8. Linkitä CSS-tiedosto HTML-tiedostoosi lisäämällä linkkitunniste HTML-head-tagin sisään:

   <linkkirel="tyylitaulukko"href="tyylit.css">

9. Voit testata verkkosivun käyttöliittymää napsauttamalla "index.html"-tiedostoa avataksesi sen verkkoselaimessa.

Kuinka laskea jokainen sana tekstialueen sisällä

Kun käyttäjä kirjoittaa lauseen tekstialueelle, verkkosivun tulee laskea jokainen sana, kun hän napsauttaa Laske Sanat -painiketta.

Voit lisätä tämän toiminnon uuteen JavaScript-tiedostoon. Jos tarvitset, tarkista muut aloittelija JavaScript-projektiideoita jos haluat päivittää JavaScript-tietosi.

1. Lisää samaan kansioon "index.html"- ja "styles.css"-tiedostojen kanssa uusi tiedosto nimeltä "script.js".
2. Linkitä HTML-tiedostosi JavaScript-tiedostoon lisäämällä komentosarjatunniste body-tagin alaosaan:

   <kehon>
    Koodisi tässä 
   <käsikirjoitussrc="script.js">käsikirjoitus>
   kehon>

3. Käytä script.js: n sisällä getElementById()-funktiota tekstialueen, painikkeen ja span HTML-elementtien hakemiseen. Tallenna nämä elementit kolmeen eri muuttujaan:

   antaa syöttö = asiakirja.getElementById("syöttö");
   antaa painike = asiakirja.getElementById("laskentapainike");
   antaa wordCountResult = asiakirja.getElementById("sanamäärä-tulos");

4. Lisää klikkaustapahtuman kuuntelija. Tämä toiminto suoritetaan, kun käyttäjä napsauttaa Laske Sanat painike:

   button.addEventListener("klikkaus", toiminto() {
   });

5. Hae klikkaustapahtuman kuuntelun sisällä arvo, jonka käyttäjä syötti tekstialueelle. Löydät tämän arvon syöttömuuttujasta, joka tallentaa tekstialueen HTML-elementin.

   antaa str = syöte.arvo;

6. Erota merkkijono erillisiksi sanoiksi split()-funktiolla. Tämä tapahtuu aina, kun merkkijonossa on välilyönti. Tämä tallentaa jokaisen sanan uuden taulukon elementiksi. Jos syötetty lause on esimerkiksi "Rakastan koiria", tuloksena oleva taulukko olisi ["minä", "rakkaus", "koirat"].

   antaa wordsList = str.split(" ");

7. Etsi sanojen määrä käyttämällä taulukon pituutta:

   antaa count = sanatList.length;

8. Jos haluat näyttää tuloksen takaisin käyttäjälle, muuta span HTML -elementin sisältö näyttämään uusi arvo:

   wordCountResult.innerHTML = määrä; 

Esimerkkisanalaskurin käyttäminen

Voit testata sanalaskurin verkkosivuasi verkkoselaimella.

1. Avaa index.html millä tahansa verkkoselaimella.
2. Kirjoita lause tai kappale tekstialueelle:
3. Klikkaa Laske Sanat -painiketta päivittääksesi sanamäärän. Tämä näyttää sanamäärän, aivan kuten jos sinäkin tarkisti sanamäärän Google Docsissa, Microsoft Word tai mikä tahansa muu editori, jossa on sanamäärä.

Yksinkertaisten sovellusten luominen JavaScriptillä

Nyt sinulla toivottavasti on perusymmärrys siitä, miten JavaScriptin käyttö laskee sanoja ja vuorovaikutuksessa HTML-sivun elementtien kanssa. Paranna ohjelmointiymmärrystäsi jatkamalla pienten hyödyllisten projektien luomista JavaScriptillä.