Practical Code Examples using JavaScript

Example#1: JavaScript Multiplication Table

Create a simple multiplication table asking the user the number of rows and columns he wants.

Solution:

This code is editable. Click Run to Execute

1
<html>
2
<head>
3
  <title>Multiplication Table</title>
4
  <script type="text/javascript">
5
    var rows = prompt("How many rows for your multiplication table?");
6
    var cols = prompt("How many columns for your multiplication table?");
7
    if(rows == "" || rows == null)
8
         rows = 10;
9
    if(cols== "" || cols== null)
10
         cols = 10;
11
    createTable(rows, cols);
12
    function createTable(rows, cols)
13
    {
14
      var j=1;
15
      var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>";
16
      for(i=1;i<=rows;i++)
17
      {
18
        output = output + "<tr>";
19
        while(j<=cols)
20
        {
21
          output = output + "<td>" + i*j + "</td>";
22
          j = j+1;
23
        }
24
         output = output + "</tr>";
25
         j = 1;
26
    }
27
    output = output + "</table>";
28
    document.write(output);
29
    }
30
  </script>
31
</head>
32
<body>
33
</body>
34
</html>

Example#2: JS Forms Example:

Create a sample form program that collects the first name, last name, email, user id, password and confirms password from the user. All the inputs are mandatory and email address entered should be in correct format. Also, the values entered in the password and confirm password textboxes should be the same. After validating using JavaScript, In output display proper error messages in red color just next to the textbox where there is an error.

Solution with Source Code:

This code is editable. Click Run to Execute


55
     }
56
        function finalValidate()
57
        {
58
          var count = 0;
59
          for(i=0;i<6;i++)
60
          {
61
            var div = divs[i];
62
            if(document.getElementById(div).innerHTML == "OK!")
63
            count = count + 1;
64
          }
65
          if(count == 6)
66
            document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
67
        }
68
   </script>
69
</head>
70
<body>
71
    <table id="table1">
72
      <tr>
73
        <td>First Name:</td>
74
        <td><input type="text" id="first" onkeyup="validate();" /></td>
75
        <td><div id="errFirst"></div></td>
76
      </tr>
77
      <tr>
78
        <td>Last Name:</td>
79
        <td><input type="text" id="last" onkeyup="validate();"/></td>
80
        <td><div id="errLast"></div></td>
81
      </tr>
82
      <tr>
83
        <td>Email:</td>
84
        <td><input type="text" id="email" onkeyup="validate();"/></td>
85
        <td><div id="errEmail"></div></td>
86
      </tr>
87
      <tr>
88
        <td>User Id:</td>
89
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
90
        <td><div id="errUid"></div></td>
91
      </tr>
92
      <tr>
93
        <td>Password:</td>
94
        <td><input type="password" id="password" onkeyup="validate();"/></td>
95
        <td><div id="errPassword"></div></td>
96
      </tr>
97
      <tr>
98
        <td>Confirm Password:</td>
99
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
100
        <td><div id="errConfirm"></div></td>
101
      </tr>
102
      <tr>
103
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
104
        <td><div id="errFinal"></div></td>
105
      </tr>
106
    </table>
107
</body>
108
</html>
109

Example#3: POPUP Message using Event:

Display a simple message “Welcome!!!” on your demo webpage and when the user hovers over the message, a popup should be displayed with a message “Welcome to my WebPage!!!”.

Solution:

	<html>

	<head>

	<title>Event!!!</title>

	<script type="text/javascript">

	function trigger()

	{

	document.getElementById("hover").addEventListener("mouseover", popup);

	function popup()

	{

	alert("Welcome to my WebPage!!!");

	}

	}

	</script>

	<style>

	p

	{

	     font-size:50px;

	     position: fixed;

	     left: 550px;

	     top: 300px;

	}

	</style>

	</head>

	<body  onload="trigger();">

	<p id="hover">Welcome!!!</p>

	</body>

	</html>
top
X
Welcome to Our Website
Welcome to WPBot
wpChatIcon