Scribd
Upload
79 views21 pages

Chapter 3: Client-Side Scripting Language

The document discusses JavaScript objects and dynamic HTML. It describes objects as containers for named values called properties or methods. It provides examples of built-in objects like Number, Boolean, String, Array, Date, and Math objects. It also demonstrates how to define user-created objects using the Object constructor or object literals. The document also explains how to access and modify object properties and methods. Finally, it discusses how dynamic HTML uses JavaScript to dynamically change HTML content, styles, and layouts on a webpage.

Uploaded by

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

Chapter 3: Client-Side Scripting Language

The document discusses JavaScript objects and dynamic HTML. It describes objects as containers for named values called properties or methods. It provides examples of built-in objects like Number, Boolean, String, Array, Date, and Math objects. It also demonstrates how to define user-created objects using the Object constructor or object literals. The document also explains how to access and modify object properties and methods. Finally, it discusses how dynamic HTML uses JavaScript to dynamically change HTML content, styles, and layouts on a webpage.

Uploaded by

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

Chapter 3: Client-Side Scripting Language

JavaScript Object
• Objects are a peace of data that has property and method.
• Object properties are usually variables that are used internally
in the object's methods, but can also be globally visible
variables that are used throughout the page. Objects are
variables too. But objects can contain many values
• This code assigns many values (Fiat, 500, white) to a variable
named car:
var car = {type:"Vitz", model:500, color:"white"};
• The values are written as name: value pairs (name and value
separated by a colon). JavaScript objects are containers for
named values.
• The syntax for adding a property to an object is −
objectName.objectProperty = propertyValue;
2
Object Methods

• Methods are the functions that let the object do


something or let something be done to it.
• There is a small difference between a function and a
method – at a function is a standalone unit of
statements and a method is attached to an object and
can be referenced by the this keyword.
• Methods are useful for everything from displaying
the contents of the object to the screen to performing
complex mathematical operations on a group of local
properties and parameters.
JavaScript Native Objects

• JavaScript has several built-in or native objects.


These objects are accessible anywhere in your
program and will work the same way in any browser
running in any operating system.
• Here is the list of all important JavaScript Native
Objects −
– JavaScript Number Object
– JavaScript Boolean Object
– JavaScript String Object
– JavaScript Array Object
– JavaScript Date Object
– JavaScript Math Object
<html>
<head><title>native object</title></head>
<body>
<script type="text/javascript">
//number object
var num = new Number(23.787990);
document.write("num.toFixed() is : " + num.toFixed()+"<br>");
document.write("is : " + num.toExponential()+"<br>");
document.write("is : " + num.toLocaleString()+"<br>");
document.write(" is : " + num.toPrecision()+"<br>");
document.write(" is : " + num.toString()+"<br>");
document.write(" is : " + num.valueOf()+"<br>");
//boolean object
var val = new Boolean(true);
document.write(val +"<br>")
document.write(val.valueOf() +"<br>")
document.write(val.toString() +"<br>")
// array object
var fruit = new Array(10);
fruit=["apple", "orange", "mango"];
document.write(fruit.length+"<br>");
document.write(fruit.pop()+"<br>");
document.write(fruit+"<br>");
document.write(fruit.push('banana')+"<br>");
document.write(fruit+"<br>");
document.write(fruit.sort()+"<br>");
//string object
var val2 = new String("kebede");
document.write(val2.length+"<br>");
document.write(val2.charAt(0)+"<br>");
document.write(val2.toUpperCase()+"<br>");
document.write(val2.substr(2)+"<br>");
//date object
var dt = Date();
var day = new Date("August 15, 1947");
document.write("Date and Time : " + dt +"<br>");
document.write( day.getFullYear()+"<br>");
//maths object
var pi=Math.PI;
var sine_val = Math.sin(30);
var sqof2=Math.SQRT2;
var abs=Math.abs(-1);
var pow=Math.pow(2,2);
var sqrt=Math.sqrt(9);
document.write(pi+"<br>");
document.write(sine_val+"<br>");
document.write(sqof2+"<br>");
document.write(abs+"<br>");
document.write(pow+"<br>");
document.write(sqrt+"<br>");
//user defined object
var car = Object({type:"Fiat", model:"500", color:"white"});
document.write(car.type+"<br>");
document.write(car["model"]+"<br>");
</script>
</body>
</html>
Document object
• Every web page resides inside a browser window which can be
considered as an object.
• A Document object represents the HTML document that is
displayed in that window. 
• The Document object has various properties that refer to other
objects which allow access to and modification of document
content.
• The way a document content is accessed and modified is called
the Document Object Model, or DOM. 
• The Objects are organized in a hierarchy.
– Window object − Top of the hierarchy.
• Document object − The document contains the contents of the page.
– Form object − Everything enclosed in the <form>...</form> tags sets the form object.
» Form control elements − The form object contains all the elements defined for that object
such as text fields, buttons, radio buttons, and checkboxes.
 
Here is a simple hierarchy of a few important objects
The window Object
 Represents the current window.
window.document.write(“Hello World!”);
Document Object
Document property
 Document.title:-display the title of the document
Document Methods
– document.write() :print statement the output goes into the
HTML document.
– document.writeln() :adds a newline after printing.
E.g document.write("My title is" + document.title);
User-Defined Objects:
• Real Life Objects, Properties, and Methods
– In real life, a car is an object.
– A car has properties like weight and color and methods like start and
stop:
– Property: car.name = Vitz, car.model = 500, car.weight = 850kg,
car.color = white
– Methods: car.stop, car.start
– All cars have the same properties, but the property values differ from car
to car.
– All cars have the same methods, but the methods are performed at
different times.
var car = {type:"Fiat", model:"500", color:"white"};
• The values are written as name:value pairs (name and value
separated by a colon).
• The name:values pairs (in JavaScript objects) are
called properties.
User-Defined Objects:

• A method is actually a function definition stored as a property


value.
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function()
{return this.firstName + " " + this.lastName;}

• JavaScript objects are containers for named values called


properties or methods.
User-Defined Objects:
• All user-defined objects and built-in objects are descendants of
an object called Object.
• To create an object, the new operator is followed by the
constructor method.
• In the following example, the constructor methods are
Object(), Array(), and Date().
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
Object Definition

• A constructor is a function that creates and initializes an


object.
• JavaScript provides a special constructor function
called Object() to build the object.
• You define also (and create) a JavaScript object with an
object literal:
Example
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Accessing Object Properties and method

• You can access object properties in two ways:


objectName.propertyName
or
objectName["propertyName"]
e.g. person.lastName;
You access an object method with the following syntax:
objectName.methodName()
e.g. name = person.fullName();
or
name = person.fullName;
Example
<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> </body> </html>
Example
<html><body>
<p>Creating and using an object method.</p>
<p>An object method is a function definition, stored as a property
value.</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.write(person.fullName());
</script></body></html>
Dynamic HTML
Introduction
 DHTML stands for Dynamic HTML.
 DHTML is NOT a language or a web standard.
 DHTML means the combination of HTML, JavaScript,
DOM(D0cument Object Model) and CSS.
DHTML - JavaScript
DHTML java script is nothing but it is as we have learnt before.
 In JavaScript, the statement:  document. Write(), is used to
write output to a web page.
Example
The Below example uses JavaScript to display the current date
and time on a page:
Cont’d…
<html>
<body>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>
Dynamic styles

• Dynamic styles are a key feature of DHTML.


• By using CSS, you can quickly change the
appearance and formatting of elements in a
document without adding or removing elements.
• This helps keep your documents small and the
scripts that manipulate the document fast.
• The object model provides programmatic access
to styles. This means you can change inline styles
on individual elements and change style rules
using simple JavaScript programming.
Cont’d
• Inline styles are CSS style assignments that have
been applied to an element using the style attribute.
• You can examine and set these styles by retrieving
the style object for an individual element.
• For example, to highlight the text in a heading when
the user moves the mouse pointer over it, you can
use the style object to enlarge the font and change
its color, as shown in the following simple example.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8">
<title>Dynamic Styles</title>
<style> ul { display: none; } </style>
</head> <body>
<h1 id="firstHeader">Welcome to Dynamic HTML</h1>
<p><a id="clickableLink" href="#">Dynamic styles are a key feature of DHTML.</a>
</p>
<ul id="unorderedList"> <li>Change the color, size, and typeface of text</li>
<li>Show and hide text</li>
<li>And much, much more</li>
</ul>
<p>We've only just begun!</p>
<script> function showMe()
{
document.getElementById("firstHeader").style.color = "red";
document.getElementById("unorderedList").style.display = "inline";
}
document.getElementById("clickableLink").addEventListener("click", function (e) {
e.preventDefault(); showMe();
});
</script>
</body>

You might also like