Scribd
Upload
10 views

Web Technology Lab Manual

Uploaded by

vennira8880
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

Web Technology Lab Manual

Uploaded by

vennira8880
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 33

Ex 1

8.6.2019

Static Web Page for Online Book Store

Aim: Design the static web pages required for an online book store web site.

PROCEDURE:

1) HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
Left frame: At least four links for navigation, which will display the catalogue of respective
links.
For e.g.: When you click the link “MCA” the catalogue for MCA Books should be displayed in
the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this
page contains description of the web site.
Step 1: Open the Notepad in the start menu.
Step 2: type code
Step 3 : Save as “head.html”
Step 4: Double click on the saved file (“head.html”)

PROGRAM

head.html
<html>
<head>
<title>Head Page</title>
</head>
<body>
<font face="Arial Black" size="3">
<table border="1" cellspacing="2" cellpadding="5"
width="100%"> <tr>
<td align="center"><img src="6.jpg" width="20"
height="20"/></td> <td colspan="4"
align="center">Web Site Name</td>
</tr>
<tr>
<td align="center"><a href="description.html"
target="des_page">HOME</a></td> <td align="center"><a
href="login.html" target="des_page">LOGIN</a></td>
<td align="center"><a href="registration.html"
target="des_page">REGISTRATION</a></td> <td align="center"><a
href="catalogue.html" target="des_page">CATALOGUE</a></td> <td
align="center"><a href="cart.html" target="des_page">CART</a></td>
</tr>
</table>
</font>
</body>
</html>

dept.html
<html>
<head>
<title>Departments Page</title>
</head>
<body>
<font face="Arial Black" size="4">
<table align="center" height="100%">
<tr>
<td><a href="cat_mca.html" target="des_page">MCA</a></td>
</tr>
<tr>
<td><a href="cat_mba.html" target="des_page">MBA</a></td>
</tr>
<tr>
<td><a href="cat_bca.html" target="des_page">BCA</a></td>
</tr>
</table>
</font>
</body>
</html>
Output:
desc.html
<html>
<head>
<title> Description page</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<font face="TIMES NEW ROMAN" size="5">
<center>
Description of the Website
</center>
</font>
</body>
</html>
Output:
Here we combining all three HTML files in to one HTML file.
home.html
<html>
<head>
<title>Home page</title>
</head>
<frameset rows="20,80">
<frame src="head.html" name="head_page">
<frameset cols="15,85">
<frame src="dept.html" name="dept_page">
<frame src="desc.html" name="des_page">
</frameset>
</frameset>
</html>

OUTPUT:

RESULT:
Thus the above Web page is designed successfully.
Ex 2:
19.6.2019
Sorting an array using user defined functions

Aim: To arrange the n number of elements in an array using user defined function

Algorithm:

PROGRAM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<title>Sorting </title>
<script type="text/javascript" >
function arrange()
{
//var a=[10,30,50,20,40];
//var a = [];
var i,t,n;
n = prompt('Enter n: ');
var a= new Array(n);
for(i=0; i<n; i++)
{
a[i] = prompt('Enter Array Element ' + (i+1));
}
document.writeln("Unsorted Array:"+"<br>");
for(i=0; i<5; i++)
{
document.writeln(a[i]+"<br>");
}
for(i=0;i<a.length;i++)
{
for(j=i+1;j<a.length;j++)
{
if(a[i]>a[j])
{
t=a[i];
a[i]=a[j];
a[j]=t;
}
}
}
document.writeln("<br>Sorted Array:"+"<br>");
for(i=0;i<a.length;i++)
{
document.writeln(a[i]+"<br>");
}

}
</script>
</head>
<body>
<script type="text/javascript">
arrange();
</script>
</body>
</html>

<body>
</body>
</html>

OUTPUT:

RESULT:
Thus the above program has been executed successfully and verified.

Ex 3
26.6.2019

Demonstrate String and Math Objects

Aim: To write a java script program for manipulating String and Math object using predefined
functions

Algorithm:

PROGRAM

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function str()
{
var str=document.getElementById("str1").value;

var n=str.length;
var inof=str.indexOf("hello");
var ss= str.substring(2,5);
var ca=str.charAt(2);
var lc=str.toLowerCase();
var uc=str.toUpperCase();
document.getElementById("result").value = n;
document.getElementById("iof").value = inof;
document.getElementById("subs").value = ss;
document.getElementById("ca").value = ca;
document.getElementById("lc").value = lc;
document.getElementById("uc").value = uc;
}

function mat()
{
var opr=document.getElementById("nom").value;
var p=Math.pow(opr,2);
var sq=Math.sqrt(opr);
var ab=Math.abs(opr);
var lo=Math.log(opr);
document.getElementById("po").value = p;
document.getElementById("sq").value = sq;
document.getElementById("ab").value = ab;
document.getElementById("lo").value = lo;

</script>
</head>

<body>
<h2>
<label for="str1"></label>
String Manipulation
</h2>
<p>Enter the String
<input type="text" name="str1" id="str1">
</p>
<p>
<button onclick="str()">String Manipulation</button>
</p>
<p>
<label>Length of the String</label>
<input name="result" type="result" id="result">
</p>
<p>Index of the Specified String
<label for="iof"></label>
<input type="text" name="iof" id="iof">
</p>
<p>Substring
<label for="subs"></label>
<input type="text" name="subs" id="subs">
</p>
<p>CharAt
<label for="ca"></label>
<input type="text" name="ca" id="ca">
</p>
<p>To LowerCase
<label for="lc"></label>
<input type="text" name="lc" id="lc">
</p>
<p>To UpperCase
<label for="uc"></label>
<input type="text" name="uc" id="uc"></p>
<h2>Mathematics Operations</h2>
<p>Enter the Number to be processed
<label for="nom"></label>
<input type="text" name="nom" id="nom">
</p>
<p>
<button onclick="mat()"> Maths Operators</button>
</p>
<p>Power of 2
<input type="text" name="po" id="po">
</p>
<p>Square Root
<label for="sq"></label>
<input type="text" name="sq" id="sq">
</p>
<p>Absolute
<label for="ab"></label>
<input type="text" name="ab" id="ab">
</p>
<p>Lograthmic
<label for="lo"></label>
<input type="text" name="lo" id="lo">
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<label for="po"></label>
</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<script type="text/javascript">

</script>
</body>

</html>

OUTPUT
RESULT:
Thus the above program has been executed successfully and verified.

Ex. 4

3.7.2019
Demonstrate Array Objects and Date Objects

Aim: To write java script program to demonstrate the Array and Date objects using predefined
functions

Algorithm:
Step 1: create an array for demonstrate the array objects
Step 2: Enter total number of elements in an array
Step 3: Enter the elements of array
Step 4: Find the length of an array using length() function
Step 5: Add a new elements using Push() function
Step 5: Delete an element using POP() function
Step 6: sorting an array element using sort() method
Step 7: create an object for DATE
Step 8: Display today date using date() function
Step 9: Display the current month using month() function
Step 10. Stop the program.
PROGRAM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" >
var a=new Array();
function inp()
{

//Creation
var n=prompt("Enter n:");
//document.writeln(" Input Array:"+"<br>");
for(i=0;i<n;i++)
{
a[i]=prompt("Enter array element");
}
document.getElementById("demo").innerHTML = a;
/* for(i=0;i<n;i++)
{

//document.writeln(a[i]+"<br>");
}*/
}

function arobj()
{

var op1= document.getElementById("arr").value;


switch (op1)
{
case "Length":
{

len=a.length;
document.getElementById("re").value=len;
break;
}

case "Push":
{
ne=prompt("Enter new element to be pushed into the Array");
a.push(ne);
document.getElementById("re").value=a;
break;
}

case "Pop":
{

a.pop();
document.getElementById("re").value=a;
break;
}
case "Unshift":
{
nb=prompt("Enter new element to be pushed into the Array at beginning");
a.unshift(nb);
document.getElementById("re").value=a;
break;
}

case "Shift":
{

a.shift();
document.getElementById("re").value=a;
break;
}

case "Sort":
{

a.sort();
document.getElementById("re").value=a;
break;
}

case "Reverse":
{

a.reverse();
document.getElementById("re").value=a;
break;
}
}
}
function dman()
{
var op2= document.getElementById("dt").value;
var d = new Date();
switch (op2)
{
case "Today Date":
{

document.getElementById("dre").value=d;
break;
}
case "Today Month":
{
m=d.getMonth();
document.getElementById("dre").value=m;
break;
}

case "Today Day":


{
day=d.getDay();
document.getElementById("dre").value=day;
break;
}
case "Year":
{
y=d.getFullYear();
document.getElementById("dre").value=y;
break;
}
}

</script>
</head>

<body>
<h2>
<label for="arr"></label>
Array Objects - -Manipulation
</h2>
<script type="text/javascript">

</script>
<p>
<button value="Input Array" onclick="inp()"> Input Array</button>
<p id="demo"></p>

</p>
<p>&nbsp;</p>
<p>
<select name="arr" id="arr" onchange="arobj()">
<option>Push</option>
<option>Pop</option>
<option>Unshift</option>
<option>Sort</option>
<option>Reverse</option>
<option>Length</option>
<option>Shift</option>
</select>
</p>
<p>Result
<label for="re"></label>
<textarea name="re" id="re" cols="45" rows="5"></textarea>
</p>
<p>&nbsp;</p>
<h2>Date Objects - Manipulation</h2>
<p>&nbsp;</p>
<p>
<label for="dt"></label>
<select name="dt" id="dt" onchange="dman()">
<option>Today Date</option>
<option>Today Month</option>
<option>Today Day</option>
<option>Year</option>
</select>
</p>
<p>Result
<label for="dre"></label>
<input type="text" name="dre" id="dre" />
</p>
</body>
</html>
RESULT:
Thus the above program has been executed successfully and verified.

Ex 5
10.7.2019
Exception Handling

Aim:
To write a program in Java Script for handling the different types of Exceptions.

Algorithm:
Step1: Start the program.

Step2: Design the web page with 6 Buttons and a Paragraph in Dreamweaver..

Step3: The button “No between 5 & 10?”, when clicked will call the “usererror() “ javascript
function, to check for any user-defined error, and if found, will display the error message as the
paragraph’s innerHTML.

Step4:The button “Precision Range?”,which when clicked will call the “rangeerror()”javascript
function, to check and display Precision range error, if any.
Step5:The button “Improper Syntax?”, which when clicked will call the “syntaxerror()”
javascript function, to check and display Syntax error, if any.

Step6:The button “Improper Reference?”, which when clicked will call the “referenceerror()”
javascript function, to check and display illegal reference, if any.

Step7:The button “Improper Datatype?”, which when clicked will call the “typeerror()”
javascript function, to check and display mismatching datatype, if any.

Step8:The button “Clean Up”, which when clicked will call the “cleanup()” javascript function,
to check and clear the paragraph’s innerHTML.

Step9: Save and run the program.

Step10:Stop the program.

PROGRAM

<html><head>
<script type="text/javascript">
var num = 1;
function usererror()
{
var x=prompt("Enter a No between 5 & 10:");
try
{
if(x =="") throw "empty";
else
{
if(isNaN(x)) throw "not a number";
else
{
x = Number(x);
if(x <= 5) throw "too low";
else
{
if(x >= 10) throw "too high";
else document.getElementById("demo").innerHTML="";
}
}
}
}
catch(err)
{
document.getElementById("demo").innerHTML=err;
}
}
function rangeerror()
{
var num=prompt("Enter num:");
var p=prompt("Enter Precision value for num (1 to 100):");
try
{
num=Number(num);
p=Number(p);
num.toPrecision(p);
}
catch(err)
{
document.getElementById("demo").innerHTML = err;
}
}

function syntaxerror()
{
try
{
addlert("Welcome to JavaScript!");
}
catch(err)
{
document.getElementById("demo").innerHTML = err;
}
}

function referenceerror()
{
var x;
try
{
x = y + 1;
}
catch(err)
{
document.getElementById("demo").innerHTML = err;
}
}

function typeerror()
{
var str=prompt("Enter a string to be converted to Upper case:");
try
{
if(isNaN(str))
str=str.toUpperCase();
else
{
str=Number(str);
str.toUpperCase();
}
}
catch(err)
{
document.getElementById("demo").innerHTML = err.name;
}
}

function cleanup()
{
document.getElementById("demo").innerHTML = " ";
}
</script>
<body>
<h2>JavaScript Error Handling</h2>
<p>
<input type="submit" name="b1" id="b1" value="No between 5 &amp; 10?"
onclick="usererror()">
</p>
<p>
<input type="submit" name="b2" id="b2" value="Precision Range?" onclick="rangeerror()">
</p>
<p>
<input type="submit" name="b3" id="b3" value="Improper Syntax?" onclick="syntaxerror()">
</p>
<p>
<input type="submit" name="b4" id="b4" value="Improper Reference?"
onclick="referenceerror()">
</p>
<p>
<input type="submit" name="b5" id="b5" value="Improper Data type?" onclick="typeerror()">
</p>
<p>
<input type="submit" name="b6" id="b6" value="CLEAR" onclick="cleanup()">
</p>
<p><b>EXCEPTION MESSAGE IF ANY:</b></p>
<b><p id="demo"></p></b>
</body>
</html>

OUTPUT

RESULT:
Thus the above program has been executed successfully and verified.

Ex 6
17.7.2019
Calendar Creation

Aim: To Write a program for creating a calendar for displaying current month

Algorithm:
Step 1: Start the program
Step 2: create the function calendar() in java script
Step 3: Assign the Days to the variable day and Months to the variable month
Step 4: create an object d for Date class
Step 5: get the current day using the getDay() function
Step 6: get the current date using the getDate() function
Step 7 : get the current year using the getYear() function
Step 8: create the style sheet for designing the calendar using CSS with the name of calendar id
Step 9: Assign the day, month and year to the calendar id
Step 10: call the calendar function when the window is loaded
Step 11: Display the calendar
Step 12: stop the program

PROGRAM

<html>
<head>
<title>JavaScript calendar</title>
<script>
function displayCalendar(){

var htmlContent ="";


var FebNumberOfDays ="";
var counter = 1;

var dateNow = new Date();


var month = dateNow.getMonth();

var nextMonth = month+1; //+1; //Used to match up the current month with the correct start
date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();

// names of months and week days.


var monthNames =
["January","February","March","April","May","June","July","August","September","October","
November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday",
"Saturday"];
var dayPerMonth = ["31",
""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"]

// days in previous month and next one , and day of week.


var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays= nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];

// loop to build the calander body.


while (counter <= numOfDays){

// When to start new line.


if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}

// if counter is current day.


// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' >"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' >"+counter+"</td>";

weekdays2++;
counter++;
}

// building the calendar html body.


var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month]+" "+ year +"</th></tr>";
calendarBody +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody;

}
</script>
</head>

<body onload="displayCalendar()">
<div id="calendar"></div>
</body>

</html>

OUTPUT

RESULT:
Thus the above program has been executed successfully and verified.

Ex 7.
24.7.2019
Validation of Registration form

Aim: To Create a Registration form for Employees with validation controls to check the required
fields and the mail id

Algorithm:

Step 1: Start the program


Step 2: Create the form with required controls
Step 3: Mark the mandatory fields by red color asterisk mark
Step 4: Check if the mandatory fields are entered or not
Step 5: if not entered, display the error message using alert box
Step 6: check if the Name of employee fields accepts only the Alphabetic or not by using the
ASCII code for each entered value
Step 7, if not, display the error message using alert box
Step 8: check if the mail id is in proper format or not
Step 9: if all the controls are satisfied the above conditions, the registration form is submitted
successfully.
Step 10. Stop the program

PROGRAM

<html>

<head>

<title>Registration Form</title>

<script type="text/javascript">
function validate_form() {
if (document.emp.emp_name.value == "") {
alert("Please fill in the 'Your Employee Name' box.");
return false;
}
if (document.emp.num.value == "") {
alert("Enter Employee Number");
return false;
}
alert("sucessfully Submitted");

if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.emp.email_id.value)) {
alert("You have entered an invalid email address!")
return (false)
}
}

function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 &&
(charCode < 48 || charCode > 57)) {
alert("Enter Number");
return false;
}
return true;
}

//-->
</script>
</head>

<body bgcolor="#FFFFFF">
<form name="emp" action="" onsubmit="return validate_form();" method="post">
<table align="center" width=40% width="100%" cellspacing="2" cellpadding="2" border="5">
<tr>
<td colspan="2" align="center"><b>Employee Registration Form.</b></td>

</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Name<span style="color:red">*</span></td>

<td width="57%"><input type="text" value="" name="emp_name" size="24"></td>


</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Number<span style="color:red">*</span></td>
<td width="57%">
<input type="text" value="" name="num" onkeypress="return isNumberKey(event)" size="24"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Address</td>

<td width="57%"><textarea rows="4" maxlen="200" name="S2" cols="20"></textarea></td>


</tr <tr>

<td align="left" valign="top" width="41%">Contact Number</td>


<td width="57%">
<input type="text" value="" onkeypress="return isNumberKey(event)" name="txtFName1"
size="24"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Job Location</td>
<td width="57%"><select name="mydropdown">
<option value="Default">Default</option>
<option value="Chennai">Chennai</option>
<option value="Bangalore">Bangalore</option>
<option value="Chennai">Pune</option>
<option value="Bangalore">Mysore</option>
<option value="Chennai">Chandigarh</option>

</select></td>

</tr>

<tr>
<td align="left" valign="top" width="41%">Designation</td>
<td width="57%">
<select name="mydropdown">
<option value="Default">Default</option>
<option value="Systems Engineer">Systems Engineer</option>
<option value="Senior Systems Engineer">Senior Systems Engineer</option>
<option value="Technology Analyst">Technology Analyst</option>
<option value="Technology Lead">Technology Lead</option>
<option value="Project Manager">Project Manager</option>
</select></td>

</tr>
<tr>
<td align="left" valign="top" width="41%">Email<span style="color:red">*</span></td>
<td width="57%">
<input type="text" value="" name="email_id" size="24"></td>
</tr>

<tr>
<td colspan="2">
<p align="center">
<input type="submit" value=" Submit"
name="B4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;
<input type="reset" value=" Reset All " name="B5"></td>
</tr>

</table>
</form>
</body>

</html>

OUTPUT
RESULT
Thus the above Registration form has been submitted successfully and satisfied the required
conditions.

Ex. 8.

21.8.2019

Open a Window from the Current Window

Aim:
To write a program in Java Script for opening a new window from the current window.

Algorithm:
Step1: Start the program.

Step2: Design the web page with 2 Paragraphs with values namely “Google” &” Dr.N.G.P” in
Dreamweaver.

Step3: Write a javascript function “newwindow()” to open a new window.If “Google” is


clicked, it opens Google’s web page as a new webpage using window.open() function.

Step4: If “Dr.N.G.P.” is clicked, it opens Dr.N.G.P Arts and Science homepage on the same
page itself using window.open() function.
Step5: Save and run the program.

Step6:Stop the program.

PROGRAM

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var p;
function newwindow(p)
{
if(p==1)
window.open("https://
www.google.com","_blank","width=400,height=400,top=500,left=500,toolbar=yes","false");
if(p==2)
window.open("http://
www.drngpasc.ac.in","_self","width=800,height=800,top=800,left=800,toolbar=no","true");
}
</script>
</head>

<body>
<p id="p1" onclick="newwindow(1)">Google</p>
<p id="p2" onclick="newwindow(2)">Dr.N.G.P</p>
</body>
</html>

OUTPUT
RESULT:
Thus the above program has been executed successfully and verified.

Ex. 9.

23.8.2019

Background Color Change

Aim:
To write a program in Java Script for changing the background color of a webpage on each click
of a button.

Algorithm:
Step1: Start the program.

Step2: Design the web page with 1 Button named “Background Change”in Dreamweaver.

Step3: On every button click, it will call the “change(i)“ javascript function, to change the
background of the webpage using the different colors stored in the array.

Step4: Save and run the program.


Step5:Stop the program.

PROGRAM

i<html>
<head>
<title> Background Change </title>
</head>
<body>
<script type="text/javascript">
var c= new
Array("red","blue","green","yellow","pink","black","orange","cyan","violet","white","purple","meganta");
var i;
var j=0;
function change(i)
{
document.bgColor=c[i];
}

</script>
<input type="button" onClick="if(j<12){ change(j); j++;} else { j=0; change(j);}" value="BackgroundChange" />
</body>
</html>

OUTPUT
o

RESULT:
Thus the above program has been executed successfully and verified.
Ex. 10.
4.9.2019

Month wise Calendar

Aim: To Write a java script program for creating a calendar to display the specified month
Algorithm:
Step 1: start the program
Step 2: create the function in java script
Step 3: Assign the Days to the variable DaysofWeek and Months to the variable month
Step 4: create an object d for Date class
Step 5: get the current day using the getDay() function
Step 6: get the current date using the getDate() function
Step 7 : get the current year using the getYear() function
Step 8: create the style sheet for designing the calendar using CSS with the name of calendar id
Step 9: create two buttons for displaying previous and next months
Step 10: the previous month will be displayed when clicking the previous button
Step 11: the next month will be displayed when clicking the next button
Step 12: stop the program

PROGRAM
<html>
<head>

<title>Simple Month Calendar</title>

<script type="text/javascript">

var Calendar = function(divId) {

//Store div id
this.divId = divId;

// Days of week, starting on Sunday


this.DaysOfWeek = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
];

// Months, stating on January


this.Months = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'Septemper', 'October', 'November', 'December' ];

// Set the current month, year


var d = new Date();

this.CurrentMonth = d.getMonth();
this.CurrentYear = d.getFullYear();

};

// Goes to next month


Calendar.prototype.nextMonth = function() {
if ( this.CurrentMonth == 11 ) {
this.CurrentMonth = 0;
this.CurrentYear = this.CurrentYear + 1;
}
else {
this.CurrentMonth = this.CurrentMonth + 1;
}
this.showCurrent();
};

// Goes to previous month


Calendar.prototype.previousMonth = function() {
if ( this.CurrentMonth == 0 ) {
this.CurrentMonth = 11;
this.CurrentYear = this.CurrentYear - 1;
}
else {
this.CurrentMonth = this.CurrentMonth - 1;
}
this.showCurrent();
};

// Show current month


Calendar.prototype.showCurrent = function() {
this.showMonth(this.CurrentYear, this.CurrentMonth);
};

// Show month (year, month)


Calendar.prototype.showMonth = function(y, m) {

var d = new Date()


// First day of the week in the selected month
, firstDayOfMonth = new Date(y, m, 1).getDay()
// Last day of the selected month
, lastDateOfMonth = new Date(y, m+1, 0).getDate()
// Last day of the previous month
, lastDayOfLastMonth = m == 0 ? new Date(y-1, 11,
0).getDate() : new Date(y, m, 0).getDate();

var html = '<table>';

// Write selected month and year


html += '<tr><td colspan="7">' + this.Months[m] + ' - ' + y +
'</td></tr>';

// Write the header of the days of the week


html += '<tr>';
for(var i=0; i < this.DaysOfWeek.length;i++) {
html += '<td>' + this.DaysOfWeek[i] + '</td>';
}
html += '</tr>';

// Write the days


var i=1;
do {

var dow = new Date(y, m, i).getDay();

// If Sunday, start new row


if ( dow == 0 ) {
html += '<tr>';
}
// If not Sunday but first day of the month
// it will write the last days from the previous month
else if ( i == 1 ) {
html += '<tr>';
var k = lastDayOfLastMonth -
firstDayOfMonth+1;
for(var j=0; j < firstDayOfMonth; j++) {
html += '<td class="not-current">' + k
+ '</td>';
k++;
}
}

// Write the current day in the loop


html += '<td>' + i + '</td>';

// If Saturday, closes the row


if ( dow == 6 ) {
html += '</tr>';
}
// If not Saturday, but last day of the selected month
// it will write the next few days from the next month
else if ( i == lastDateOfMonth ) {
var k=1;
for(dow; dow < 6; dow++) {
html += '<td class="not-current">' + k
+ '</td>';
k++;
}
}

i++;
}while(i <= lastDateOfMonth);

// Closes table
html += '</table>';

// Write HTML to the div


document.getElementById(this.divId).innerHTML = html;
};

// On Load of the window


window.onload = function() {

// Start calendar
var c = new Calendar("divCalendar");
c.showCurrent();

// Bind next and previous button clicks


getId('btnNext').onclick = function() {
c.nextMonth();
};
getId('btnPrev').onclick = function() {
c.previousMonth();
};
}

// Get element by id
function getId(id) {
return document.getElementById(id);
}

</script>

</head>
<body>
<div id="divCalendar">

</div>

<button id="btnPrev" type="button">Previous</button>


<button id="btnNext" type="button">Next</button>

</body>
</html>

\OUTPUT

You might also like