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:
[Link]
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.
[Link](parameters)
JavaScript’s Own Objects
• e.g. Math object. It has properties and methods
[Link]
[Link]([Link]);
myvalue = [Link](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
}
[Link]([Link]+” “+[Link]+” “+[Link]);
[Link]([Link], [Link]); </script></body></html>
User-Defined Objects (contd…)
• Example:
<script language = “JavaScript” type=“text/JavaScript”>
var person = new Object();
[Link] = “Jane”;
[Link] = “Smith”;
[Link]=32;
[Link] = new Object();
[Link]=“long”;
[Link]=“red”;
[Link]([Link]+” “+[Link]+” “+[Link]);
[Link]([Link]+” “+ [Link]);
</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){
[Link] = firstname;
[Link] = lastname;
[Link] = age;
Adding a Constructor (contd…)
[Link] = new Object();
[Link] = length;
[Link] = color;
}
var person1 = new person(“jane”, ”smith”, 32, “long”, “red”);
[Link]([Link]+” “+[Link]+”
“+[Link]);
[Link]([Link]+” “+[Link]);
</script>
Methods
• Method is a function that is called through an object.
• Method can be assigned to an object.
[Link] = f;
where f is name of function you want as a method of object.
• To call method, [Link]();
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.
[Link](“hello”); [Link](“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.
[Link] = “#9F2020”;
[Link] = “#FAF519”;
[Link] = “#9781B7”;
[Link](“<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:
[Link][0]
It can also be refererd to by:
[Link]
An individual element can then be accessed:
[Link]
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=[Link];
[Link](“hello, “[Link]+”
“+[Link]);
}
</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 = [Link];
first = [Link][0].element[0].value;
last = [Link][0].elements[1].value;
[Link](“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=“[Link]
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=[Link];
if([Link]==“letmein”) {
[Link](“hello”);
check=true;
}
Forms and Validation (contd…)
• Example (contd…):
else {
alert(“Wrong Password!”);
[Link]();
}
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 = [Link];
var check = [Link];
[Link](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 [Link](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 [Link](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()
{
[Link]("input1").[Link]=" 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()
{
[Link]("input1").[Link]=" aqua";
}
</script> </body> </html>
Events and Buttons (contd…)
• The window
Events and Buttons (contd…)
• The window (contd…)
• Example:
<html>
<body onload="[Link]('Page successfully loaded');">
<script>
[Link]("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()
{
[Link]("input1");
alert("Pressed a key");
}
</script> </body> </html>