MCA-202-W4-L1.pptx

MCA-202
(Web Technologies)
Document Object Model(DOM)
By
Er. Manju Bagga
Assistant Professor, MMICT&BM
Maharishi Markandeshwar (Deemed to be University)
Programme: MCA Course: Web Technologies

Contents
• HTML DOM (Document Object Model)
• Control Structure
• Form Processing

HTML DOM (Document Object Model)
When a web page is loaded, the browser creates Document Object Model of
the page.
• The HTML DOM model is constructed as a tree of Objects:
• The HTML DOM Tree of Objects

DOM Conti…

DOM Conti…
• With the object model, JavaScript gets all the power it needs to
create dynamic HTML:
• JavaScript can change all the HTML elements in the page
• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page

DOM Conti…
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and style of a
document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents

DOM Conti…
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
JavaScript - HTML DOM Methods
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or
change.

DOM Conti…
The DOM Programming Interface
• The HTML DOM can be accessed with JavaScript (and with
other programming languages).
• In the DOM, all HTML elements are defined as objects.
• The programming interface is the properties and methods of each
object.
• A property is a value that you can get or set (like changing the
content of an HTML element).
• A method is an action you can do (like add or deleting an HTML
element).

Example
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
DOM Conti…

The getElementById Method
The most common way to access an HTML element is to use the id of the
element.
In the example above the getElementById method used id="demo" to find the
element.
The innerHTML Property
The easiest way to get the content of an element is by using
the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML
elements.
The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.
DOM Conti…

Control structure actually controls the flow of execution of a
program. Following are the several control structure supported by
javascript.
• if … else
• switch case
• do while loop
• while loop
• for loop
Control Structure

If … else
The if statement is the fundamental control statement that allows JavaScript to
make decisions and execute statements conditionally.
Syntax
if (expression){
Statement(s) to be executed if expression is true
}
Control Structure Conti…

Example
<script type="text/javascript">

</script>

Switch case
The basic syntax of the switch statement is to give an expression to evaluate and
several different statements to execute based on the value of the expression. The
interpreter checks each case against the value of the expression until a match is
found. If nothing matches, a default condition will be used.
Syntax
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break; ...
case condition n: statement(s)
break; default: statement(s)}

Do while Loop
The do...while loop is similar to the while loop except that the
condition check happens at the end of the loop. This means that the
loop will always be executed at least once, even if the condition is
false.
Syntax
do{
Statement(s) to be executed;
} while (expression);

Example
</script>

While Loop
The purpose of a while loop is to execute a statement or code block
repeatedly as long as expression is true. Once expression becomes
false, the loop will be exited.
Syntax
while (expression){
Statement(s) to be executed if expression is true
}

Example
</script>

For Loop
The for loop is the most compact form of looping and includes the
following three important parts −
The loop initialization where we initialize our counter to a starting value.
The initialization statement is executed before the loop begins.
The test statement which will test if the given condition is true or not. If
condition is true then code given inside the loop will be executed
otherwise loop will come out.
The iteration statement where you can increase or decrease your counter.

Example

</script>

Form Processing
HTML Forms are required, when you want to collect some data
from the site visitor. For example, during user registration you
would like to collect information such as name, email address,
credit card, etc.
A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc.
The back-end application will perform required processing on the
passed data based on defined business logic inside the application.

Form Processing Conti…
• There are various form elements available like text fields,
textarea fields, drop-down menus, radio buttons, checkboxes,
etc.
• The HTML <form> tag is used to create an HTML form and it
has following syntax −
• <form action = "Script URL" method = "GET|POST"> form
elements like input, textarea etc.</form>

Sr.No Attribute & Description
1
action
Backend script ready to process your passed data.
2
method
Method to be used to upload data. The most frequently used are GET and POST methods.
3
target
Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent
etc.
4
enctype
You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values
are −
application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc.

HTML Form Controls
There are different types of form controls that you can use to collect data using
HTML form −
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

MCA-202-W4-L1.pptx

Recommandé

Recommandé

Contenu connexe

Similaire à MCA-202-W4-L1.pptx

Similaire à MCA-202-W4-L1.pptx (20)

Dernier

Dernier (20)

MCA-202-W4-L1.pptx