ppt- u 2.pptx

JavaScript Objects
• A javaScript object is an entity having state
and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard,
monitor etc.
• JavaScript is an object-based language.
Everything is an object in JavaScript.
• JavaScript is template based not class based.
Here, we don't create class to get the object.
But, we direct create objects.

Creating Objects in JavaScript
There are 3 ways to create objects.By object
literal
• By creating instance of Object directly (using
new keyword)
• By using an object constructor (using new
keyword)

1) JavaScript Object by object literal
• The syntax of creating object using object
literal is given below:
• object={property1:value1,property2:value2.....
propertyN:valueN}

EXAMPLE
<script>
emp={id:102,name:"Shyam Kumar",salary:40000
}
document.write(emp.id+" "+emp.name+" "+emp
.salary);
</script>
Output of the above example
102 Shyam Kumar 40000

2) By creating instance of Object
• The syntax of creating object directly is given
below:
• var objectname=new Object();
• Here, new keyword is used to create object.

EXAMPLE
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.sa
lary);
</script>
• Output of the above example
• 101 Ravi 50000

3) By using an Object constructor
• Here, you need to create function with
arguments. Each argument value can be
assigned in the current object by using this
keyword.
• The this keyword refers to the current object.

EXAMPLE
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
• Output of the above example
• 103 Vimal Jaiswal 30000

Document Object Model
• The document object represents the whole
html document.
• When html document is loaded in the
browser, it becomes a document object.
• It is the root element that represents the html
document.
• It has properties and methods.
• By the help of document object, we can add
dynamic content to our web page.

Accessing field value by document
object
• In this example, we are going to get the value
of input text by user. Here, we are using
document.form1.name.value to get the value
of name field.
• Here, document is the root element that
represents the html document.
• form1 is the name of the form.
• name is the attribute name of the input text.

Example
• <script type="text/javascript">
• function printvalue(){
• var name=document.form1.name.value;
• alert("Welcome: "+name);
• }
• </script>
•
• <form name="form1">
• Enter Name:<input type="text" name="name"/>
• <input type="button" onclick="printvalue()" value="print n
ame"/>
• </form>

• Section 1. Getting started
• Understanding the Document Object Model in
JavaScript
• Section 2. Selecting elements
• getElementById() – select an element by id.
• getElementsByName() – select elements by name.
• getElementsByTagName() – select elements by a tag
name.
• getElementsByClassName() – select elements by one or
more class names.
• querySelector() – select elements by CSS selectors.

• Section 3. Traversing elements
• Get the parent element – get the parent node
of an element.
• Get child elements – get children of an
element.
• Get siblings of an element – get siblings of an
element.

Section 4. Manipulating elements
• createElement() – create a new element.
• appendChild() – append a node to a list of child nodes of a
specified parent node.
• textContent – get and set the text content of a node.
• innerHTML – get and set the HTML content of an element.
• innerHTML vs. createElement – explain the differences
beetween innerHTML and createElement when it comes to
creating new elements.
• DocumentFragment – learn how to compose DOM nodes
and insert them into the active DOM tree.
• insertBefore() – insert a new node before an existing node
as a child node of a specified parent node.

Section 5. Working with Attributes
• HTML Attributes & DOM Object’s Properties –
understand the relationship between HTML
attributes & DOM object’s properties.
• setAttribute() – set the value of a specified
attribute on a element.
• getAttribute() – get the value of an attribute on
an element.
• removeAttribute() – remove an attribute from a
specified element.
• hasAttribute() – check if an element has a
specified attribute or not.

Section 6. Manipulating Element’s
Styles
• style property – get or set inline styles of an
element.
• getComputedStyle() – return the computed style
of an element.
• className property – return a list of space-
separated CSS classes.
• classList property – manipulate CSS classes of an
element.
• Element’s width & height – get the width and
height of an element.

Html in Dreamweaver, and view the
Source Code in Split view.
• Download and save the project files.
• Define the alert function.
• Define the event.
• Test your JavaScript in a browser.
• Access the jQuery widgets.
• Open the second practice file.
• Add a jQuery function.
• Use <script> tags

Inserting JavaScript
• Dreamweaver includes many fun and useful
interactive effects—Spry menus, Spry form
validation, Spry effects, Dreamweaver behaviors,
and so on.
• JavaScript is the “engine” behind all of them. Of
course, you can do a lot of other cool things with
JavaScript that Dreamweaver hasn’t
programmed.
• In these cases, you need to wade into the depths
of JavaScript programming yourself.

• The most straightforward approach, especially
if you’re familiar with JavaScript, is to simply
switch into Code view (Ctrl+` [Option-`]), and
then code away.
• If you prefer, you can use Dreamweaver’s
Script window to add JavaScript code

ppt- u 2.pptx

More Related Content

Similar to ppt- u 2.pptx

Recently uploaded

ppt- u 2.pptx