Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

LAB 8 - JavaScript

This document contains 9 exercises on working with JavaScript objects and dates. It demonstrates how to create objects, add properties and methods to objects, sort and display arrays of data, and perform date calculations. Key concepts covered include creating objects with the new keyword, accessing object properties with dot notation, defining methods, getting and setting date values, and using setInterval to continuously update elements on a page.

Uploaded by

Asad Akhlaq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

LAB 8 - JavaScript

This document contains 9 exercises on working with JavaScript objects and dates. It demonstrates how to create objects, add properties and methods to objects, sort and display arrays of data, and perform date calculations. Key concepts covered include creating objects with the new keyword, accessing object properties with dot notation, defining methods, getting and setting date values, and using setInterval to continuously update elements on a page.

Uploaded by

Asad Akhlaq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

LAB 8 JavaScript – Objects

JavaScript – Objects
The syntax for adding a property to an object is –

objectName.objectProperty = propertyValue;

For example − The following code gets the document title using the "title" property of the
document object.
var str = document.title;

Language − This attribute specifies what scripting language you are using. Typically, its value
will be JavaScript. Although recent versions of HTML (and XHTML, its successor) have phased
out the use of this attribute.

Object Methods
Methods are the functions that let the object do something or let something be done to it.

For example − Following is a simple example to show how to use the write() method of
document object to write any content on the document. document.write("This is test");

Exercise 1.
Try the following example; it demonstrates how to create an Object.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
Output
</body> Book name is : Perl
</html> Book author is : Mohtashim
Exercise 2.
This example demonstrates how to create an object with a User-Defined Function. Here this
keyword is used to refer to the object that has been passed to a function.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
Output
</body> Book title is : Perl
</html> Book author is : Mohtashim

Exercise 3. User-defined objects


Try the following example; it shows how to add a function along with an object.
<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
// Define a function which will work as a method
function addPrice(amount){
this.price = amount;
}
function book(title, author){
this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script> Output
</body> Book title is : Perl
</html> Book author is : Mohtashim
Book price is : 100

Exercise 4.Fuction to get time


<html>
<script type="text/javascript">
function Time()
{
var currentTime=new Date()
var hours=currentTime.getHours()
var minutes=currentTime.getMinutes()
var seconds=currentTime.getSeconds()
document.write("<b>" + hours+ "hours" + minutes + "minutes" + seconds + "seconds </b>")
}
</script>
<body onload="Time()">
</body>
</html>
Exercise 5. Write a function that takes as parameters the times table required and the values at
which it should start and end. For example, you might try the two times table displayed starting
with 2 * 1 and ending at 2 * 10.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 5. </title>
</head>
<body>
<script>
function writeTimesTable(timesTable, timesByStart, timesByEnd) {
for (; timesByStart <= timesByEnd; timesByStart++) {
document.write(timesTable + " * " + timesByStart + " = " +
timesByStart * timesTable + "<br />");
OUTPUT
} 2*1=2
} 2*2=4
2*3=6
writeTimesTable(2, 1, 10); 2*4=8
</script> 2 * 5 = 10
2 * 6 = 12
</body> 2 * 7 = 14
</html> 2 * 8 = 16
2 * 9 = 18
2 * 10 = 20

Exercise 6. Obtain a list of names from the user, storing each name entered in an array. Keep
getting another name until the user enters nothing. Sort the names in ascending order and then
write them out to the page, with each name on its own line.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 6.</title>
</head>
<body>
<script>
var inputName = "";
var namesArray = [];
while ((inputName = prompt("Enter a name", "")) != "") {
namesArray[namesArray.length] = inputName;
}
namesArray.sort();
var namesList = namesArray.join("<br/>");
document.write(namesList);
</script>
</body>
</html>
Exercise 7.Create a page that gets the user’s date of birth. Then, using that information, tell her
on what day of the week she was born.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 7</title>
</head>
<body>
<script>
var days = ["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"];
var year = prompt("Enter the four digit year you were born.");
var month = prompt("Enter your birth month (1 - 12).");
var date = prompt("Enter the day you were born.");
var birthDate = new Date(year, month - 1, date);
alert(days[birthDate.getDay()]);
</script>
</body>
</html>
Exercise 8. Create a web page display current time in hour, minutes, and seconds.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 8. </title>
</head>
<body>
<div id="output"></div>
<script>
function updateTime() {
var date = new Date();
var value = date.getHours() + ":" +
date.getMinutes() + ":" +
date.getSeconds();
Output:
document.getElementById("output").innerHTML = value; Current Time
}
setInterval(updateTime, 1000);
</script>
</body>
</html>
Exercise 9. Using the Date type, calculate the date 12 months from now and write this into a
web page.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Exercise 9. </title>
</head>
<body>
<script>
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var nowDate = new Date();
nowDate.setMonth(nowDate.getMonth() + 12);
document.write("Date 12 months ahead is " + nowDate.getDate());
document.write(" " + months[nowDate.getMonth()]);
document.write(" " + nowDate.getFullYear());
</script>
</body>
</html> Check out Put

You might also like