When working on HTML and JavaScript projects it is very likely that you will want to respond to events. For instance you may want to run some JavaScript code when a button is clicked.

Examples of HTML events:

• When a user clicks the mouse (onClick event)
• When a web page has loaded (onLoad event)
• When the mouse moves over an element (onMouseOver and onMouseOut events)
• When an input field get the focus (onFocus event) or loses the focus (onBlur event)
• When an input field is changed (onChange event)
• When an HTML form is submitted (onSubmit event)
• When a user strokes a key (onKeyPress event)

To assign events to HTML elements you can use event attributes within your HTML code. For instance:

<INPUT type="button" value="Click Me!" onClick="JavaScript: alert('Ouch!');">

Let’s look at a few examples:

onClick Event

See the Pen JS: onClick Event by 101 Computing (@101Computing) on CodePen.

onFocus and onBlur Events

See the Pen JS: onFocus Event by 101 Computing (@101Computing) on CodePen.

Did you notice? Using “this” as a parameter in the JavaScript function enables to access the form control that triggered the event. So the same function could be used for more than one form control.

onChange Event

See the Pen JS: onChange Event by 101 Computing (@101Computing) on CodePen.

onMouseOver and onMouseOut Events

See the Pen JS: onMouseOver onMouseOut Event by 101 Computing (@101Computing) on CodePen.

Form Validation using onSubmit Event

Look at how the onSubmit event can be used to perform some validation checks before sending the data/form accross.
This code shows that it is possible to confirm or cancel an event using the “return” keyword. (return true confirms the event whereas return false cancel the event)

See the Pen JS: Form Validation by 101 Computing (@101Computing) on CodePen.

In our previous blog post we looked at how to retrieve values from various HTML form controls.

For instance the following JavaScript code shows you how to retrieve the value typed in a textbox.

See the Pen DwahE by 101 Computing (@101Computing) on CodePen.

So let’s apply this to a tiny “online calculator” project to perform a sum (+ operator) of two numbers. We would need:

• two textboxes for the user to enter the two numbers to be added.
• one textbox to display the result of adding the two numbers.

See the Pen FCGDH by 101 Computing (@101Computing) on CodePen.

This JavaScript code retrieves the values from the textboxes and add them together… But when you try to add 2 and 2 together the outcome is not 4 but 22!!!

This is because textbox entries are providing values as text (String Data Type) and not number.

If we want to perform mathematical operations we need to convert this text into numbers.

There are two main types of numbers: Integer and Real.

• Integers are whole numbers with no decimal points such as 3 or -7 or 101.
• Reals (aka float) are numbers which can have decimals such as 3.1415 or -4.99.

To convert text into an integer we can use the parseInt() function as follows:

var st="2"
var myNumber=parseInt(st);

To convert text into a real/float we can use the parseFloat() function as follows:

var st="3.14"
var myNumber=parseFloat(st);

So the code for our basic online calculator should be as follows:

See the Pen vpHKs by 101 Computing (@101Computing) on CodePen.

Retrieving value from a Textbox:

See the Pen DwahE by 101 Computing (@101Computing) on CodePen.

Retrieving value from a Textarea:

See the Pen tFJiI by 101 Computing (@101Computing) on CodePen.

Retrieving value from Checkboxes:

See the Pen asiqt by 101 Computing (@101Computing) on CodePen.

Retrieving value from Radio Buttons:

See the Pen dpJtD by 101 Computing (@101Computing) on CodePen.

Retrieving value from a Dropdown List:

See the Pen yGofD by 101 Computing (@101Computing) on CodePen.

In this project we are looking at how to read through a text file using JavaScript. We will store a list of pupils in a text file. We are going to read through this list display its content on the webpage, one line at a time.

Step 1:

Using notepad, create a CSV file called ClassList.csv (Instead of using comma we use a pipe | as a separator)

John|Lennon|Male
Katy|Perry|Female
Robbie|Williams|Male
Amy|MacDonald|Female

Step 2:

Create an HTA application (See our blog post about HTA application).

Step 3:

Add the following code somewhere in the body section of the page:

<input type="button" onClick="Javascript: displayClassList();" value="Display Class List" />
<div id="searchResults"></div>

Step 4:

Add the following Javascript  code in the head section of the page (using as <SCRIPT> tag):

function displayClassList() {

var path="ClassList.csv"
var fso = new ActiveXObject('Scripting.FileSystemObject'),
iStream=fso.OpenTextFile(path, 1, false);

document.getElementById("searchResults").innerHTML="";

while(!iStream.AtEndOfStream) {
    var line=iStream.ReadLine();
    document.getElementById("searchResults").innerHTML += line + "<br/>";
}

iStream.Close();
}

The purpose of this code is to stream through the text file, which means to read it one line at a time.

Your challenge