Home/ Questions/Q 3178

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T12:18:07+00:00

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

  • 61k

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

This is the ending of the code segment.

Output:

img

Thanks for Reading,

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

Follow: @subhajit_saha

introductionjavascriptwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,