Introduction to JavaScript Series - #1 - Form with String Object
Tags: javascript, webdev, introduction
Published: 2021-01-23 10:21:31

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:
1. Number of rows in height: 12
2. Number of Columns in width: 38
3. 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.)*
4. Text color is white and font size of text is set as 20px.
5. 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>
```
This is the ending of the code segment.

Output:

![img](https://dev-to-uploads.s3.amazonaws.com/i/ty1vublfxqzyofg9agg3.png)
 
####Thanks for Reading,
####Keep an eye on the next few articles on the same series.
####Follow: [@subhajit_saha](https://dev.to/subhajit_saha)