Introduction to JavaScript Series - #1 - Form with String Object

Subhajit Saha — Sat, 23 Jan 2021 10:21:31 +0000

Let's design a text editor where you can input your text and get a result of the number of words in your text using HTML, JavaScript and CSS styling.

<!--Code Segment1-->
<!DOCTYPE html>
<html>
<head>
  <title>Form with String object</title>
</head>

In this portion of code we are giving a title to our webpage which is "Form with String object" inside the <title> tag, which is embedded inside the <head> tag.

<!--Code Segment1-->
<body style="background-color:orange">

Inside the style attribute of the <body> tag, we are specifying the CSS styling of background-color to orange. This will set the background color of the webpage to orange.

<!--Code Segment3-->
<h3>Enter your text in the given text area</h3>
<form name="wordcount">
  <textarea name="wordcount2" rows="12" cols="38" wrap="virtual" style="color:white;background-color:black;font-size:20px;"></textarea><br></br>
  <input type="button" value="Calculate Words" onClick="Countit()">
  <input type="text" name="wordcount3" size="20">
</form>

In this code segment, we are giving a name to the <form> which is wordcount and specifying the text area, in which the user will input the text. The text area name is given as wordcount2, which will be helpful for JavaScript to access the specific document elements. We are prescribing this specific styling to the text area:

Number of rows in height: 12
Number of Columns in width: 38
Wrap attribute: virtual (The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form. Wrap when set to virtual means long lines are wrapped in the textarea, but are not wrapped in the data sent to the processing script.)
Text color is white and font size of text is set as 20px.
Background color is set as black for the text area.

A button is also placed with value Calculate Words, which on pressing will show the results of the number of words i.e. invoke the Countit() function. And a text area is specified which will display the output.

<!--Code Segment4-->
<script type="text/javascript">
    function Countit()
    {
      var formcontent = document.wordcount.wordcount2.value
      formcontent = formcontent.split(" ")
      document.wordcount.wordcount3.value = formcontent.length
    }
</script>

We have created a function named Countit() inside the <script> tag. Inside this function, we have initiated a String object formcontent which will hold the text being entered by the user, referenced by the document element names. Then, we call the split() function on the String object and store the result in the same object.

Use of split() function:
Split a string into an array of substrings
Eg:
var str = "How are you doing today?";
var res = str.split(" ");
Output:
["How", "are", "you", "doing", "today?"]

Then we count the length of the array String object formcontent using the length attribute of the array and output the result in the value attribute of the text element wordcount3.

<!--Code Segment5-->
</body>
</html>

DEV Community: Subhajit Saha

Introduction to JavaScript Series - #1 - Form with String Object

Thanks for Reading,

Keep an eye on the next few articles on the same series.

Follow: @subhajit_saha