Scribd
Upload
2 views38 pages

Unit-4.2

This document covers client-side scripting using JavaScript, focusing on JavaScript objects, the Document Object Model (DOM), and form validation. It explains the creation and manipulation of user-defined objects, the use of constructors, methods, and event handling in web programming. Additionally, it discusses form validation techniques, including the use of regular expressions for email validation and various user interaction events.

Uploaded by

vaghanikaram1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views38 pages

Unit-4.2

This document covers client-side scripting using JavaScript, focusing on JavaScript objects, the Document Object Model (DOM), and form validation. It explains the creation and manipulation of user-defined objects, the use of constructors, methods, and event handling in web programming. Additionally, it discusses form validation techniques, including the use of regular expressions for email validation and various user interaction events.

Uploaded by

vaghanikaram1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

Unit:4 Client Side Scripting using JavaScript

JavaScript objects and DOM (Document


Object Model)
• What is Object?
• It is collection of named values and associated methods.
• Named values are known as properties or fields.
• An object’s properties contain information about that object.
• To refer to an object’s properties:
objectRef.propertyName
where, objectRef = name of object
propertyName = property
• objectRef can be name of variable that an object has been assigned to and
you would access its property by placing dot followed by its name.
objectRef.propertyName(parameters)
JavaScript’s Own Objects
• e.g. Math object. It has properties and methods
Math.PI
document.write(Math.PI);
myvalue = Math.round(10.2);
User-Defined Objects
• Javascript allows you to create your own objects.
var myObj = new Object();
It’s create empty object. This can then be used to start a new object
that you can give new properties and methods.
User-Defined Objects (contd…)
• Example:
<html>
<body>
<script language = “JavaScript” type=“text/JavaScript”>
var line = {xorigin:10, yorigin:15, xend:100, yend:100}
var person = { firstname:”fred”,
lastnmae:”Smith”,
age:28,
telephone: 23456
}
document.write(person.firstname+” “+person.lastname+” “+person.age);
document.write(line.xorigin, line.yorigin); </script></body></html>
User-Defined Objects (contd…)
• Example:
<script language = “JavaScript” type=“text/JavaScript”>
var person = new Object();
person.firstname = “Jane”;
person.lastnmae = “Smith”;
person.age=32;
person.hair = new Object();
person.hair.length=“long”;
person.hair.color=“red”;
document.write(person.firstname+” “+person.lastname+” “+person.age);
document.write(person.hair.length+” “+ person.hair.color);
</script>
Adding a Constructor
• Constructor is pre-defined method that will initialize an object.
• To do this, a function is used that is called through ‘new’ operator.
• Any prosperities inside newly created object are assigned using ‘this’
keyword.
<script language = “JavaScript” type=“text/JavaScript”>
Function person(firstname, lastname, age, length, color){
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
Adding a Constructor (contd…)
this.hair = new Object();
this.hair.length = length;
this.hair.color = color;
}
var person1 = new person(“jane”, ”smith”, 32, “long”, “red”);
document.write(person1.firstname+” “+person1.lastname+”
“+person1.age);
document.write(person1.hair.length+” “+person1.hair.color);
</script>
Methods
• Method is a function that is called through an object.
• Method can be assigned to an object.
myObject.method = f;
where f is name of function you want as a method of object.
• To call method, myObject.method();
The DOM
• JavaScript has inbuilt objects and also include complete object
models suitable for the context of web programming.
• The window object is primary point from which most other objects
come.
document.write(“hello”); window.document.write(“hello”);
• Window object represents window/frame that displays document
and is global object in client side programming.
• All client side objects are connected to the window object.
The DOM (contd…)
self, parent, • “screen” object: it allows information to be gained about
window, top the size of a user’s display and color depth.
• “screen” object contains width, height, availWidth,
frames[] availHeight and colorDepth peoperties.
• availWidth and availHeight properties specify the space
navigator actually available excluding task bars and other screen
Window

borders.

location

history

document

screen

The hierarchy of objects under window


The DOM(contd…)
• The document Object
• Document object forming a large sub-tree known as the Document Object
Model (DOM).
• It is represent HTML displayed in the window.
document.bgColor = “#9F2020”;
document.fgColor = “#FAF519”;
document.bgColor = “#9781B7”;
document.write(“<h2>Hello</h2>”);
The DOM(contd…)
• The document Object (contd…)
• It is also possible to access any form information in a document by using the
forms[] array.
• This contains all the form objects that are in the document.
<form name = “userDetails”>
<input type = “text” name = “fname”/>
<input type = “text” name = “lname”/>
<input type = “submit” name = “submit”/>
</form>
The DOM(contd…)
• The document Object (contd…)
• Form data can be accessed with:
document.forms[0]
It can also be refererd to by:
document.userDetails
An individual element can then be accessed:
document.userDetails.fname
The DOM(contd…)
• Example:
<html><body>
<form name=“userDetails” onSubmit=“processForm()”>
<input type=“text” name=“fname”/>
<input type=“text” name=“lname”/>
<input type=“submit” name=“submit”/>
</form>
< script language = “JavaScript” type=“text/JavaScript”>
The DOM(contd…)
• Example (contd…):
< script language = “JavaScript” type=“text/JavaScript”>
Function processForm(){
myform=document.userDetails;
document.write(“hello, “myform.fname.valur+”
“+myform.lname.value);
}
</script></body></html>
The DOM(contd…)
• Example:
• To access the form details is through the enumerated form elements themselves,
<html> <head>
<title> JavaScript Objects </title>
< script language = “JavaScript” type=“text/JavaScript”>
function processForm(){
myform = document.userDetails;
first = document.forms[0].element[0].value;
last = document.forms[0].elements[1].value;
document.write(“hello, “+first+” “+last);
} </script></head>
The DOM(contd…)
• Example (contd…):
<body>
<form name=“userDetails” onSubmit=“processForm()”>
<input type=“text” name=“fname”/>
<input type=“text” name=“lname”/>
<input type=“submit” name=“submit”/>
</form>
</body> </html>
Forms and Validation
• Example:
<html>
<body>
<form method=“post” action=“mailto:Webmaster@localhost”
name=“logon” onSubmit=“return processForm()”>
<input type=“text” name=“password”/>
<input type=“submit” value=“log in” name=“Login”/>
</form>
Forms and Validation (contd…)
• Example (contd…):
< script language = “JavaScript” type=“text/JavaScript”>
Function processForm() {
var check=false;
myform=document.logon;
if(myform.password.value==“letmein”) {
document.write(“hello”);
check=true;
}
Forms and Validation (contd…)
• Example (contd…):
else {
alert(“Wrong Password!”);
myform.password.focus();
}
return check;
}
</script> </body> </html>
Forms and Validation (contd…)
• Using Regular Expressions for Validation
<html> <body>
<form method=“post” name=“getinfo” onSubmit=“return
processForm()”>
<input type=“text” name=“email”/>
<input type=“submit” value=“log in” name=“Login”/>
</form>
Forms and Validation (contd…)
• Using Regular Expressions for Validation
<html> <body>
<form method=“post” name=“getinfo” onSubmit=“return
processForm()”>
<input type=“text” name=“email”/>
<input type=“submit” value=“log in” name=“Login”/>
</form>
Forms and Validation (contd…)
• Using Regular Expressions for Validation (contd…)
<script language=“JavaSCript” type=“text/JavaScript”>
Function processForm() {
var myform = document.getinfo;
var check = myform.email.value;
document.write(testEmail(check));
}
Forms and Validation (contd…)
• Using Regular Expressions for Validation (contd…)
function testEmail(chkMail) {
var emailPattern = “^[\\w-_\.]*[\\w-_\.]\@[\\w]\.+[\\w]+[\\w]$”;
var regex = new RegExp(emailPattern);
return regex.test(chkMail);
}
</script>
</body>
</html>
Forms and Validation (contd…)
• Using Regular Expressions for Validation (contd…)
function testEmail(chkMail) {
var emailPattern = “^[\\w-_\.]*[\\w-_\.]\@[\\w]\.+[\\w]+[\\w]$”;
var regex = new RegExp(emailPattern);
return regex.test(chkMail);
}
</script>
</body>
</html>
Forms and Validation (contd…)
• Using Regular Expressions for Validation (contd…)
^[\\w-\.] : ^ means check the first character is a word character
represented by \\w.
*[\\w-_\.]: * means the next series of charters described can be
repeated many times or not at all.
\@[\\w]\.+: This section begins by checking for the @ character. This
should be the word characters and then at least one ‘dot’. It would not accept
a dot straight after @ character.
[\\w]+[\\w]$: The first set in square brackets makes sure that there
are some characters after the dot and the last part checks that the last
character is a word character.
Forms and Validation (contd…)
• Using Regular Expressions for Validation (contd…)
emailexp = ^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]$;
Events and Buttons
• Events are actions that the user performs when they visit your page.
• When event happens, it triggers objects that are associated with that
kind of event.
• Event handlers catch these events and execute code in response.
Events and Buttons (contd…)
• Form Events
Events and Buttons (contd…)
• Form Events (contd…)
• Example:
<html> <body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
</script> </body> </html>
Events and Buttons (contd…)
• Form Events (contd…)
• Example (contd…):
<html> <body>
<h2> Enter something to get value
here</h2>
of the input
<input type="text" id="input1" onfocus="focusevent()"/>
<script> text
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
</script> </body> </html>
Events and Buttons (contd…)
• The window
Events and Buttons (contd…)
• The window (contd…)
• Example:
<html>
<body onload="window.alert('Page successfully loaded');">
<script>
document.write("The page is loaded successfully");
</script>
</body>
</html>
Events and Buttons (contd…)
• The Mouse
Events and Buttons (contd…)
• The Mouse
• Example:
<html>
<body>
<script language="Javascript" type="text/Javascript">
function mouseoverevent()
{
alert("This is JavaTpoint");
}
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body> </html>
Events and Buttons (contd…)
• The Keyboard
Events and Buttons (contd…)
• The Keyboard
• Example:
<html> <body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
</script> </body> </html>

You might also like