Practical Code Examples using JavaScript

Example#1:Create a multiplication table asking the user the number of rows and columns he wants.
Solution:
This code is editable. Click Run to Execute
1
​
2
    <html>
3
​
4
    <head>
5
​
6
    <title>Multiplication Table</title>
7
​
8
    <script type="text/javascript">
9
​
10
    var rows = prompt("How many rows for your multiplication table?");
11
​
12
    var cols = prompt("How many columns for your multiplication table?");
13
​
14
    if(rows == "" || rows == null)
15
​
16
    rows = 10;
17
​
18
    if(cols== "" || cols== null)
19
​
20
    cols = 10;
21
​
22
    createTable(rows, cols);
23
​
24
    function createTable(rows, cols)
25
​
26
    {
27
​
28
    var j=1;
29
​
30
    var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>";
31
​
32
    for(i=1;i<=rows;i++)
33
​
34
    {
35
​
36
      output = output + "<tr>";
37
​
38
      while(j<=cols)
39
​
40
      {
41
​
42
         output = output + "<td>" + i*j + "</td>";
43
​
44
         j = j+1;
45
​
46
      }
47
​
48
      output = output + "</tr>";
49
​
50
      j = 1;
51
​
52
    }
53
​
54
    output = output + "</table>";
55
​
56
    document.write(output);
57
​
58
    }
59
​
60
    </script>
61
​
62
    </head>
63
​
64
    <body>
65
​
66
    </body>
67
​
68
    </html>
69
​
Example#2: Create a form that collects the first name, last name, email, user id, password and confirm 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, display proper error messages in red color just next to the textbox where there is an error.
Solution:
This code is editable. Click Run to Execute
1
​
2
    <html>
3
​
4
    <head>
5
​
6
    <title>Form Validation</title>
7
​
8
    <script type="text/javascript">
9
​
10
    var divs = new Array();
11
​
12
    divs[0] = "errFirst";
13
​
14
    divs[1] = "errLast";
15
​
16
    divs[2] = "errEmail";
17
​
18
    divs[3] = "errUid";
19
​
20
    divs[4] = "errPassword";
21
​
22
    divs[5] = "errConfirm";
23
​
24
    function validate()
25
​
26
    {
27
​
28
         var inputs = new Array();
29
​
30
         inputs[0] = document.getElementById('first').value;
31
​
32
         inputs[1] = document.getElementById('last').value;
33
​
34
         inputs[2] = document.getElementById('email').value;
35
​
36
         inputs[3] = document.getElementById('uid').value;
37
​
38
         inputs[4] = document.getElementById('password').value;
39
​
40
         inputs[5] = document.getElementById('confirm').value;
41
​
42
          var errors = new Array();
43
​
44
         errors[0] = "<span style='color:red'>Please enter your first name!</span>";
45
​
46
         errors[1] = "<span style='color:red'>Please enter your last name!</span>";
47
​
48
         errors[2] = "<span style='color:red'>Please enter your email!</span>";
49
​
50
         errors[3] = "<span style='color:red'>Please enter your user id!</span>";
51
​
52
         errors[4] = "<span style='color:red'>Please enter your password!</span>";
53
​
54
         errors[5] = "<span style='color:red'>Please confirm your password!</span>";
55
​
56
         for (i in inputs)
57
​
58
         {
59
​
60
              var errMessage = errors[i];
61
​
62
              var div = divs[i];
63
​
64
     
65
​
66
              if (inputs[i] == "")
67
​
68
                  document.getElementById(div).innerHTML = errMessage;
69
​
70
              else if (i==2)
71
​
72
              {
73
​
74
                  var atpos=inputs[i].indexOf("@");
75
​
76
                  var dotpos=inputs[i].lastIndexOf(".");
77
​
78
                  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
79
​
80
                   document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
81
​
82
                else
83
​
84
               document.getElementById(div).innerHTML = "OK!";
85
​
86
              }
87
​
88
        else if (i==5)
89
​
90
              {
91
​
92
         var first = document.getElementById('password').value;
93
​
94
         var second = document.getElementById('confirm').value;
95
​
96
                  if (second != first)
97
​
98
  document.getElementById('errConfirm').innerHTML = "
<span style='color: red'>Your passwords don't match!</span>";
99
​
100
                  else
101
​
102
               document.getElementById(div).innerHTML = "OK!";
103
​
104
              }
105
​
106
            else
107
​
108
                  document.getElementById(div).innerHTML = "OK!";
109
​
110
         }
111
​
112
    }
113
​
114
    function finalValidate()
115
​
116
    {
117
​
118
         var count = 0;
119
​
120
        for(i=0;i<6;i++)
121
​
122
        {
123
​
124
          var div = divs[i];
125
​
126
          if(document.getElementById(div).innerHTML == "OK!")
127
​
128
               count = count + 1;
129
​
130
        }
131
​
132
       if(count == 6)
133
​
134
         document.getElementById("errFinal").innerHTML = "All
 the data you entered is correct!!!";
135
​
136
    }
137
​
138
    </script>
139
​
140
    </head>
141
​
142
    <body>
143
​
144
    <table id="table1">
145
​
146
    <tr>
147
​
148
    <td>First Name:</td>
149
​
150
    <td><input type="text" id="first" onkeyup="validate();" 
/></td>
151
​
152
    <td><div id="errFirst"></div></td>
153
​
154
    </tr>
155
​
156
    <tr>
157
​
158
    <td>Last Name:</td>
159
​
160
    <td><input type="text" id="last" onkeyup="validate();"/></td>
161
​
162
    <td><div id="errLast"></div></td>
163
​
164
    </tr>
165
​
166
    <tr>
167
​
168
    <td>Email:</td>
169
​
170
    <td><input type="text" id="email" onkeyup="validate();"/></td>
171
​
172
    <td><div id="errEmail"></div></td>
173
​
174
    </tr>
175
​
176
    <tr>
177
​
178
    <td>User Id:</td>
179
​
180
    <td><input type="text" id="uid" onkeyup="validate();"/></td>
181
​
182
    <td><div id="errUid"></div></td>
183
​
184
    </tr>
185
​
186
    <tr>
187
​
188
    <td>Password:</td>
189
​
190
    <td><input type="password" id="password" onkeyup="validate();"/></td>
191
​
192
    <td><div id="errPassword"></div></td>
193
​
194
    </tr>
195
​
196
    <tr>
197
​
198
    <td>Confirm Password:</td>
199
​
200
    <td><input type="password" id="confirm" onkeyup="validate();"/></td>
201
​
202
    <td><div id="errConfirm"></div></td>
203
​
204
    </tr>
205
​
206
    <tr>
207
​
208
    <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
209
​
210
    <td><div id="errFinal"></div></td>
211
​
212
    </tr>
213
​
214
    </table>
215
​
216
    </body>
217
​
218
    </html>
219
​
Example#3: Display a message "Welcome!!!" on your webpage and when the user hovers over the message, a popup should be displayed with a message "Welcome to my WebPage!!!".
Solution:
?
53
<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>

at