Print bookPrint book

Submodule 7.3: Word count

Site: ΕΛ/ΛΑΚ Moodle
Course: Study / Web Design and Web Development
Book: Submodule 7.3: Word count
Printed by: Guest user
Date: Thursday, 21 November 2024, 5:39 PM

Description

  • JavaScript word counter

Table of contents

The idea!

A textarea accepts text input from the keyboard.  We will add a feature to this textarea that provides an approximate word count for the user input.  

To do this successfully, you'll need to:

  • Create your own Javascript file in the "js" directory of the folder "yourNameWEB2JS". You have already created this directory in the exercise of submodule 6.1. Call it "countsTheWords.js".
  •  Add a <script> tag to the page at the bottom that loads your new js file.
  • In your js file:
    • Use document.getElementById() to get the textarea element from the page. You'll need its id, which you can find on the HTML page.
    • Write an event handler function that runs every time someone types in the textarea. It will look something like this:
      myTextareaElement.onkeyup = function(){
          /* your code goes here*/
      }
    • You'll want to access the .value property of the textarea to get the contents of the box as a String
    • Use string.split() to divide the string (at word boundaries) into an array of Strings
    • Count the elements in the array. This will be (roughly) the number of words in the box
    • Write that value into the HTML element that looks like this: <span id="wordcount"></span>

The HTML file

This is the HTML file:

As you can see, we have given an id to the textarea. Also, we have given an id to an empty span. This is where we will display our wordcount using JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Word counter </title>
  </head>
  <body>
     <h3> Word counter </h3>
     <textarea id="myWordsToCount" rows="5" cols="60" ></textarea><br>
     The wordcount is: <span id="wordcount"></span><br>
     <script type="text/javascript" src="js/countsTheWords.js"></script>
  </body>
</html>

Exercise

  1. Open your editor, create a new file and save it as exersice07.3.01.html in the folder "yourNameWEB2JS".
  2. Copy the above code and paste it into the new file.
  3. Modify and save the file. 

The JavaScript file

This is the JavaScript file:

In this example, as long as i will be smaller than array length, this code will run.

var myTextareaElement = document.getElementById("myWordsToCount");
myTextareaElement.onkeyup = function(){
  var i=0;
  var sum=0;
  var myValue = document.getElementById("myWordsToCount").value;
  var res = myValue.split(" ");
  while (i<res.length) {
    sum=sum+1;
    i=i+1;
  }
  document.getElementById("wordcount").innerHTML = sum;
  console.log(res, i, res.length);
};

Exercise

  1. Open your editor, create a new file and save it as countsTheWords.js in the folder "yourNameWEB2JS/js".
  2. Copy the above code and paste it into the new file.
  3. Modify and save the file. Preview the exersice0873.01.html file. Is there any difference from the introductory video?

Solution:

Yes, the wordcount increases even extra 'whitespace' characters are inserted in your text

Exercise

Exercise

Redesign your JavaScript file so that extra consecutive whitespaces are not counted.

Tip: The variable sum should increase if the inserted character is not the white space

Solution:

var myTextareaElement = document.getElementById("myWordsToCount");
myTextareaElement.onkeyup = function(){
  var i=0;
   sum=0;
   var myValue = document.getElementById("myWordsToCount").value;
   var res = myValue.split(" ");
   while (i<res.length) {
     /* The variable sum increases if the inserted character is not the white space*/ 
     if (res[i] != "") {
         sum=sum+1;
     }
   i=i+1;
 }
 document.getElementById("wordcount").innerHTML = sum;
 console.log(res, i, res.length);