Kā izveidot vārdu skaitītāju JavaScript

Vārdu skaitītājs ir rīks, ko varat izmantot, lai saskaitītu vārdu skaitu teksta daļā. Varat to izmantot, lai pārbaudītu dokumenta garumu vai izsekotu, vai atbilstat vārdu skaita ierobežojumam.

Varat izveidot savu vārdu skaitītāju, izmantojot HTML, CSS un JavaScript. Atveriet vārdu skaitītāju tīmekļa pārlūkprogrammā, ievadiet tekstu ievades laukā un skatiet, cik vārdus lietojat.

Šis projekts var būt noderīgs arī, lai palīdzētu jums praktizēt un nostiprināt savas JavaScript zināšanas.

Kā izveidot lietotāja saskarni Word skaitītājam

Lai izveidotu lietotāja saskarni vārdu skaitītājam, pamata HTML lapai pievienojiet teksta apgabala ievadi. Šeit varat ievadīt teikumu vai rindkopu, kura vārdus vēlaties skaitīt.

1. Izveidojiet jaunu HTML failu ar nosaukumu "index.html".
instagram viewer
2. Failā pievienojiet HTML tīmekļa lapas pamatstruktūru:

   html>
   <htmllang="en-US">
   <galvu>
   <virsraksts> Vārdu skaitītājs virsraksts>
   galvu>
   <ķermeni>
   
   klasē="konteiners">
   <h1> Skaitīt vārdus h1>
   div>
   ķermeni>
   html>

3. Konteinera div iekšpusē un zem virsraksta pievienojiet teksta apgabalu:

   <teksta apgabalsid="ievade"rindas="10">teksta apgabals>

4. Zem teksta apgabala pievienojiet pogu:

   <poguid="skaitīšanas poga">Skaitīt vārduspogu>

5. Pievienojiet span tagu, lai parādītu vārdu skaitu, kad lietotājs noklikšķina uz iepriekš esošās pogas:

   <div>
    Vārdi: <spanid="vārdu skaits-rezultāts">0span>
   div>

6. Tajā pašā mapē, kurā atrodas HTML fails, izveidojiet jaunu failu ar nosaukumu "styles.css".
7. Aizpildiet CSS failu ar kādu CSS, lai izveidotu tīmekļa lapas stilu:

   body {
    piemale: 0;
    polsterējums: 0;
    fona krāsa: #f0fcfc;
   }
   * {
    fontu ģimene: "Arial", sans serif;
   }
   .konteiners {
    polsterējums: 100 pikseļi 25%;
    displejs: flex;
    flex-direction: kolonna;
    līnijas augstums: 2rem;
   fonta izmērs: 1.2rem;
    krāsa: #202C39;
   }
   textarea {
    polsterējums: 20 pikseļi;
    fonta izmērs: 1 rem;
    piemale-apakšā: 40 pikseļi;
   }
   poga {
    polsterējums: 10 pikseļi;
    piemale-apakšā: 40 pikseļi;
   } 

8. Saistiet CSS failu ar savu HTML failu, iekļaujot saites tagu HTML head tagā:

   <saiterel="stila lapa"href="styles.css">

9. Lai pārbaudītu tīmekļa lapas lietotāja saskarni, noklikšķiniet uz faila "index.html", lai to atvērtu tīmekļa pārlūkprogrammā.

Kā saskaitīt katru vārdu teksta apgabalā

Kad lietotājs teksta apgabalā ievada teikumu, tīmekļa lapai ir jāuzskaita katrs vārds, kad viņš noklikšķina uz Skaitīt vārdus pogu.

Šo funkcionalitāti varat pievienot jaunā JavaScript failā. Ja nepieciešams, pārskatiet citus iesācēju JavaScript projektu idejas ja nepieciešams papildināt savas JavaScript zināšanas.

1. Tajā pašā mapē, kurā atrodas faili "index.html" un "styles.css", pievienojiet jaunu failu ar nosaukumu "script.js".
2. Saistiet savu HTML failu ar JavaScript failu, pievienojot skripta tagu pamatteksta taga apakšā:

   <ķermeni>
    Tavs kods šeit 
   <skriptssrc="script.js">skripts>
   ķermeni>

3. Programmā script.js izmantojiet funkciju getElementById(), lai izgūtu teksta apgabala, pogas un aptveres HTML elementus. Saglabājiet šos elementus trīs atsevišķos mainīgajos:

   ļaut ievade = dokumentu.getElementById("ievade");
   ļaut poga = dokumentu.getElementById("skaitīšanas poga");
   ļaut wordCountResult = dokumentu.getElementById("vārdu skaits-rezultāts");

4. Pievienojiet klikšķu notikumu uztvērēju. Šī funkcija tiks izpildīta, kad lietotājs noklikšķinās uz Skaitīt vārdus poga:

   button.addEventListener("klikšķis", funkciju() {
   });

5. Klikšķu notikumu uztvērējā iegūstiet vērtību, ko lietotājs ievadīja teksta apgabalā. Šo vērtību varat atrast ievades mainīgajā, kurā tiek saglabāts teksta apgabala HTML elements.

   ļaut str = ievade.vērtība;

6. Izmantojiet split() funkciju, lai atdalītu virkni atsevišķos vārdos. Tas notiks ikreiz, kad virknē ir atstarpe. Tādējādi katrs vārds tiks saglabāts kā jauna masīva elements. Piemēram, ja ievadītais teikums ir "Es mīlu suņus", iegūtais masīvs būtu ["es", "mīlestība", "suņi"].

   ļaut vārdiList = str.split(" ");

7. Atrodiet vārdu skaitu, izmantojot masīva garumu:

   ļaut skaits = vārdiList.length;

8. Lai parādītu rezultātu atpakaļ lietotājam, mainiet span HTML elementa saturu, lai parādītu jauno vērtību:

   wordCountResult.innerHTML = skaits; 

Kā lietot vārdu skaitītāja piemēru

Varat pārbaudīt savu vārdu skaitītāja vietni, izmantojot tīmekļa pārlūkprogrammu.

1. Atveriet index.html jebkurā tīmekļa pārlūkprogrammā.
2. Ievadiet teikumu vai rindkopu teksta apgabalā:
3. Noklikšķiniet uz Skaitīt vārdus pogu, lai atjauninātu vārdu skaitu. Tas parādīs vārdu skaitu, tāpat kā tad, ja jūs pārbaudīja vārdu skaitu pakalpojumā Google dokumenti, Microsoft Word vai jebkurš cits redaktors ar vārdu skaitu.

Vienkāršu lietojumprogrammu izveide, izmantojot JavaScript

Tagad jums, cerams, ir pamatzināšanas par to, kā izmantot JavaScript, lai skaitītu vārdus un mijiedarbotos ar elementiem HTML lapā. Lai uzlabotu savu programmēšanas izpratni, turpiniet veidot mazus noderīgus projektus JavaScript.