Introduction to JavaScript Language (2)

To continue from where I stopped in the previous article, am going to introduce loops, Objects, Event Handler and how to use events to send out alert.

Loop:

Loop is a block of code that allows you to repeat a section of code a certain number of times while adding different values. Loops can execute a block of code a number of times.JavaScript has three types which are: for loop, while loop and do while.

for loop syntax:

for(statement1; statement2; statement3){
Block of code to be executed
}

Example:

for(i=5; i<=5; i++){
document.write(i + “<br />”);
}

In the example above, statement1 sets a variable before the loop starts (var i = 1),

statement2 defines the condition for the loop to run (i must be less than or equal to 5),

statement 3 increases the value (i++) for each time the code block in the loop is executed.

The code will output values of :

1
2
3
4
5

while loop:

while loop repeats through a block of code, as long as a specified condition is true.

Syntax for while loop:

while (condition){
Block of code to be executed
}

Example:

var count=1;
while(count<=5){
document.write(count + “<br />”);
count++;
}

This code will produce the same result as for loop.

Do while:

For do while loop, code within the loop is executed once, and then comparison is used each time afterward to determine whether or not it should repeat.

Syntax for do while loop:

do{
block of code to be executed
}
while(condition);

Example:

var i=20;
do{
document.write(i + “<br />”);
i++;
}
while(i<=25);

The code above will output values of:

20
21
22
23
24
25

Objects:

Since JavaScript is an object-based language, it is important to understand the concept of objects. Objects are used to organize things within the script, instead of having several similar variables on their own, it can be grouped under an object.
Objects properties are accessed through the use of dot operator.
There are two ways to create objects in JavaScript: by using a constructor function or by using object initializer. I will only discuss constructor function which uses the same basic syntax as a regular function.

Syntax for creating object:

function name () {
Properties of the function
}

After the above declaration, an instance of the car object is created as well.

Example:

Creating a constructor function named car, with properties like seats, engine, theradio

function car(seats, engine, theradio){
this.seats= seats;
this.engine=engine;
this.theradio=theradio;
}
var work_car = new car(“cloth”, “v-6”, “CD-player”);
var funcar = new car("leather","v-8","CD-player");
var customcar = new car(funcar.seats,workcar.engine,funcar.theradio);
var workcarpayment = workcar.getpayment ();
var funcarpayment = funcar.getpayment ();
var customcarpayment = customcar.getpayment ();
document.write("<h2>The information on the cars you requested</h2>");
document.write("<strong>Work Car: </strong>");
document.write(workcar.seats+","+workcar.engine+","+workcar.theradio);
document.write("<br/>");
document.write("<strong>Payments: </strong> $"+workcarpayment);
document.write("<p>");
document.write("<strong>Fun car: </strong>");
document.write(funcar.seats+","+funcar.engine+","+funcar.theradio);
document.write("<br/>");
document.write("<strong>Payments</strong> $"+funcarpayment);
document.write("</p>");
document.write("<p>");
document.write("<strong>Custom Car: </strong>");
document.write(customcar.seats+","+customcar.engine+","+customcar.theradio);
document.write("<br/>");
document.write("<strong>Payments</strong> $"+customcarpayment);
document.write("</p>");

Adding Method:

Method is a function call that is part of an object. It can be used to perform various tasks that can be executed with properties of the object. If you want to make calculations like payment or create a function for car to stop or accelerate, functions to be used as the method will be defined.

Calculation for monthly payment will be added to the car property used in the previous example by creating function as shown below:

function getpayment(){
var thepayment=250;
if(this.seats == "leather")
{
thepayment+=100;
}
else{
thepayment+=50;
}
if(this.engine=="v-8")
{
thepayment+=150;
}
else{
thepayment+=75;
}
if(this.theradio=="CD-player")
{
thepayment+=35;
}
else{
thepayment+=10;
}
return thepayment;
}
function car(seats,engine,theradio){
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
this.getpayment=getpayment;
}
var workcar = new car("cloth","v-6","Deck");
var funcar = new car("leather","v-8","CD-player");
var customcar = new car(funcar.seats,workcar.engine,funcar.theradio);
var workcarpayment = workcar.getpayment ();
var funcarpayment = funcar.getpayment ();
var customcarpayment = customcar.getpayment ();
document.write("<h2>The information on the cars you requested</h2>");
document.write("<strong>Work Car: </strong>");
document.write(workcar.seats+","+workcar.engine+","+workcar.theradio);
document.write("<br/>");
document.write("<strong>Payments: </strong> $"+workcarpayment);
document.write("<p>");
document.write("<strong>Fun car: </strong>");
document.write(funcar.seats+","+funcar.engine+","+funcar.theradio);
document.write("<br/>");
document.write("<strong>Payments</strong> $"+funcarpayment);
document.write("</p>");
document.write("<p>");
document.write("<strong>Custom Car: </strong>");
document.write(customcar.seats+","+customcar.engine+","+customcar.theradio);
document.write("<br/>");
document.write("<strong>Payments</strong> $"+customcarpayment);
document.write("</p>");

The output is shown below:

Event Handlers:

Event handler is used to react to users events such as user clicking on submit a form, clicking on a button, or the user moving a mouse over certain element. It is an element in the document that is used to handle an event on a web page.
As a programmer, if you want to send alert to the viewer when he/she moves the mouse over a link, event handler is used to invoke JavaScript alert coded by the programmer to react to the event. By this, Programmer is making things happen based on the action of the viewer, which enables the making of web pages interactive.

Using event handler in an HTML element:

To use an event handler in HTML elements, the keyword for the event handler and where to place the event handler within the HTML code must be known. For example, onclick event handler is the keyword, and it is used to make things happen when the user clicks on a specific area of the document. The element that can be clicked is a form button. The code below shows how to create a button and activate it for responding to reactions.

<body>
<form>
<input type="button" value="click me"   onclick="window.alert(‘Hello’);" />
</form>
</body>

When the user clicks on the button click me, an alert will pop up showing Hello.
points to note:
When using the event handler with its attribute, the use of double quote around the JavaScript code is required, the alert command also ends with a semicolon, this enables the addition of JavaScript code after the alert.

Using an Event Handler in the Script code:

Event handler can be used within the script code, either using the script tag in HTML document or using an external JavaScript file. To achieve this, give the element an id attribute, then use the JavaScript method document.getElementById() to access the element, then attach an event to the element.
The code below shows how to add id attribute and how to access the element:

<body>
<form>
<input type="button" value="click me" id=”greeting” />
</form>
<script type=”text/javascript” src=”greet.js”>
</script>
</body>

In the greet.js file, input the code below in the text editor to access the element:

document.getElementById(“greeting”);

Example:

The code below shows how the event handlers such as onfocus, onblur, onclick and onmouseover was used:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>eventhandler</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script> 
</head>
<body>
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-4"></div>
   <div id="middle" div class="col-md-4">
    <h4>Kindly input correct information</h4>
    <div class="container-fluid">
     <div class="row">
      <div class="col-md-6">
       <h5><b>Phone Number:</b></h5>
       <h5><b>Name:</b></h5>
       <h5><b>Email-address:</b></h5>
      </div>
      <div id="areatext" class="col-md-6">
       <input type="textbox" onfocus="window.alert('Format is xxx-xxxx.');" />
       <input type="textbox" onblur="window.alert('Thanks, if that is your real name!');" />
       <input type="textbox" value="reply@gmail.com" onclick="window.alert('input your E-mail address');" />
       <input type="submit" value="click here to submit" />
      </div>
     </div>
     <a href="http://www.yahoo.com" onmouseover="window.alert('Sorry, \I\' m not in the mood for you to leave yet!');"><b>Link Tag</b></a>
     <hr>
     <script type="text/javascript"></script>
</div>
   </div>
   <div class="col-md-4"></div>
</div>  
 </div>
</body>
</html>

This shows the output of the form created

This is the alert message that appeared when the user moves his mouse over the Link Tag above