HTML Documents
The Web Programming Triangle
HTML (Hyper Text Markup Language)
It is a language used to create web pages.
HTML does this by using tags that have attributes.
HTML language was introduced by Tim Berners Lee in 1989.
HTML Tags:
HTML tags are keywords enclosed in angle brackets (usually come
in pairs)
First tag is start tag / opening tag. Second tag is end tag / Closing
tag.
End tag is same as start tag, with a forward slash before the
tagname
Format: eg: Start tag Content Endtag
<Fontsize=“10pt”> text </font>
<tagname attribute_name=“value”> content</tagname>
Basic syntax of HTML:
<html>
<head>
<title>FIRST WEB PAGE </title>
</head>
<body>
HELLO STUDENTS WELCOME TO THE WORLD OF HTML
</body>
</html>
Tags
<Html>tag : This elements tells a browser that it is an HTML document.
Format:
<html><body> -----bodyofHTML……..</body></html>
Example:
<html><body>This is my first page</body></html>
<head>tag : This tag defines information about the document. The head
section can be <Meta>,<script>,<style>,<title>
Format:
<html><head> … head sections… </head><body> ….bodyofHTML…</body></html>
Example:
<html><head><title>BASIC TAG</title></head><body>This is my first page</body></html>
TAGS
<body>tag : This tag defines the document’s body. (text, image, colors,
graphics etc)
Format:
<body bgcolor=“color_name” background=“file_name” text=“color_name”>
Example:
<body bgcolor=“red” background=“c:\img\[Link]” text=“white”>
<hn>tag : These tags are used to display headings in an HTML document.(6
levels of headings are supported)
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
Format:
<hn>…….text……</hn>
Example:
<h1>this is my first page</h1>
Attribute of <hn> tag: Align = “value” may be right, left, center and justified
Eg: <h1 align=“right”>text</h1>
TAGS:
Tag Description Format Example
<p> Paragraph tag <p> …text…</p> <p>This is test of paragraph </p>
<br> Break tag. Inserts Text…..<br>……..text This is break <br> in the line.
single line break
<hr> Horizontal rule <hr align=“right/left/centre” This is the test of the hr <hr> tag <hr>
size=“n” width =“n”>
<!..> Comment Tag <! … add comments here …> <! … add comments here …>
<b> Make Text bold <b> ….text…..</b> <b> This is bold</b>
<i> Italic tag <i>,,,,text,,,,</i> <i>This is Italic</i>
<tt> Typewriter text <tt>….text….</tt> <tt>Typewriting text</tt>
<u> Underlined text <u>….text….</u> <u>Underlined text</u>
<em> Emphasized text <em>….text….</em> <em>Emphasized text</em>
<big> Display big text <big>….text….</big> <big>this is big text</big>
<small Display small <small>….text….</small> <small>this is small text</small>
> text
TAGS
Tag Description Format Example
<strong> Display strong text <strong>….text….</strong> <strong>this is strong
text</strong>
<s> or Strikethrough tags <s>text</s> <s>strikeout</s>
<strike>
<sub> tag Subscripted format <sub>….text…..</sub> H<sub>2</sub>O
<sup> tag Superscripted <sup>….text…..</sup> a<sup>2</sup>+b<sup>2</s
format up>+2ab
<pre> Preformatted text. <pre>….text…..</pre> <pre>
Preserves both Mary
spaces and line Had a little lamb
breaks </pre>
<acronym Start of an <acronym title=“text to be <acronym
> tag acronym displayed”>..text.. </acronym> title=“HypertextTransferProtoco
l”>HTML</acronym>
<abbr>tag Indicates <abbr title=“abbreviation”>full <abbr title=“WWW”>World
abbreviated form form</abbr> Wide Web</abbr>
TAGS
Tag Description Format Example
<address> Used to define <address> Skyward Publishers , O/p: Skyward Publishers ,
tag addresses #50/10 , 8th cross , 3rd Main #50/10 , 8th cross , 3rd Main
,Banglore-85.</address> , Banglore-85
<blockquo This defines the <blockquote>
te> tag start of a long <p> long quotation </p>
quotation </blockquote>
<center> This tag centers its <center>…text….</center> <center>this is center
enclosed text </center>
horizontally
<marquee This tag is used to <marquee direction="down/ up/ <marquee>text to be
> tags get a moving text right/ left” behavior=" scrolled</marquee>
alternate/slide” scrollamount=" n"
bgcolor=" colorname " loop=”n”
width=”n” height=”n” title=”text”>
this is scrolling text</marquee>
<font> tag Defines the font, <font face="font name“ <font face=”Arial”
color size of the color="color_name“ color=”red” size=”12pt”..font
text size="number“>...text..</font> tag…. </font>
Tags
<meta…text……./>Tag
This tag is used to specify the metadata information about a
document such as author, expiry date, list of keywords etc.
Format:
<Meta name="keywords'' content="BCA, MCA, BEST college,
KLE SNC" Http-equiv="Content-Type" content="text/html;
char set=UTF-8" />
This information is very important as it can assist the search
engines in finding the best match when user performs a search.
Search engine looks at metadata attached to a page – and rank it
higher than another page with less relevant metadata, or with no
metadata at all
Character Entities
Whenever a special characters or symbols like copyright
symbol, trade mark symbol, less than, greater than, pi
symbol etc need to displayed ,character entities are used:
It has 3parts:
- An ampersand(&).
- An entity name or # followed by a numeric value of a
character.
- semicolon(;).
SYMBOL NAMED NUMERIC DESCRIPTION
VALUE VALUE
π
π ϖ Greek pi
α
α α Greek small letter alpha
β
β β Greek small letter beta
Images
Images are very important to beautify as well as to depict many concepts on
the webpage.
Image Tag is represented as <img>. It inserts an image into an HTML
[Link] close the tag we use (/).
Syntax: <img attributes />
<img src=”URL” alt=”Text” align=”left/right/top/bottom/middle”
border=”n” width=”n” height=”n” hspace=”n” vspace=”n”/>
The 3 most popular image formats are:
GIF(Graphic InterchangeFormat)
JPEG(Joint Photographic ExpertsGroup)
PNG(Portable NetworkGraphics)
Indicatedwith .gif, .jpg, .png fileextensions.
Images
Attributes Description
Src Provides a path for the picture to be inserted into the web
page
Alt Displays a text if the picture is not diplayed on the web
browser
Align Specifies the position of the image on the web page
Border Specifies the width of the border around the image
Width Specifies how wide the picture should appear on the web page
Height Specifies how high the picture should appear on the web page
hspace [horizontal space] Specifies the amount of white space to the left and right side
of a
image
Vspce [vertical space] Specifies the amount of white space above and below the
image
<img Src="C:\Users\Admin\Downloads\[Link]" alt="Cannot
show" align="left" width ="1000" height ="700“>
Lists
There are 3 types of lists in HTML
Unordered List(UL)
Ordered List(OL)
Definition List(DL)
Unordered List(UL): Used when we want to make a list of bullet points
Specified as <ul> and </ul> tags
Each bullet point or line should be contained between <li> and </li> tags (List
Item)
<h4 > My Grocery list </h4>
<ul> Syntax:
o <li> Sugar </li> <ul type =“circle/disc/square”>
o <li> Eggs</li> <li> list item </li>
o <li> Rice</li> </ul>
o <li> Soap</li>
</ul>
Lists
Ordered Lists: Have elements preceded by numbers or letters.
They are meant to provide a sequence of ordered steps for an activity.
Numbering can be done using:
Arabic numbers (1,2,3….) Letters (A-Z and a-z)
Roman Numerals (i,ii,iii,iv,…… and I ,II,III,IV,V….)
The tags used to specify an ordered lists are <ol> and </ol>tags.
Ordered lists also uses<li>and </li> to list the items.
<h4 > My Favorite list of Companies</h4>
<ol>
o<li> TCS</li>
o <li> Wipro</li>
o <li> Infosys</li>
o <li>Reliance</li>
</ol>
Definition Lists
Definition lists
Definition lists consists of terms followed by its definitions.
Definition lists are specified with <dl> and </dl>tags.
And requires two more special tags first is for data term <dt> and </dt>and the
other is for data definition <dd>and </dd>tags.
Eg:
<dl>
<dt>BA </dt>
<dd> Bachelor of Arts</dd>
<dt>BSc</dt>
<dd> Bachelor of Science</dd>
<dt>BCom </dt>
<dd> Bachelor of Commerce</dd>
</dl>
Tables
A table is a collection of information arranged into related rows
and columns.
The intersection of a row and a column is known as a CELL.
Syntax: <table border=”n” bgcolor=”xxx” bordercolor=”yyy”
align=”left / right /center /top /bottom” width=”x / x%”
Cellpadding=”x” cellspacing=”x”>
………….</table>
To add rows to the table we use <tr> and </tr>tags.
To divide the rows into columns we use <td> and </td>tags
(i.e., The contents of the cell is specified with <td> and
</td>tag).
Tables
The column headings are specified with <th> and
</th>tags.
Normally <th> tag is used in the top row of the table to
replace the <td>tag.
All the attributes used the <td> cell can also be used in the
<th> tagalso.
We can specify the title to the table using <caption> and
</caption>tags.
Hyperlinks
A link is a pointer to some resource.
Web pages can contain links that take us directly to other pages and even
specific parts of a given webpage.
These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between web sites by clicking on words,
phrases and images.
Web links have 2 basic components:
A link: The tag in the main document (source) that refers to another
document.
A target / destination: The document (or particular location in the
document) to which the link points to.
Creating Hyperlinks
The tags used to produce links are the <a> and </a>,
called as anchor tag.
The anchor tag consists of two pieces of information:
The URL of the target document
The text needed to activate the hyperlink Syntax:
<a href="url">link_text</a>
The href (Hypertext reference) attribute is used to
specify the target of the link
The word “link_text” works as a link to the url specified.
Hyperlinks
Types of Links:
There are 3 different kinds of links we can have in the
web page:
INTERNAL: Link to a section on the current (same)
page or document.
LOCAL : Link to a page on the same server or
directory.
EXTERNAL: Link to a page or website on a different
server or directory.
Link Targets
How link to another website to open in a new window?
Usually links will open in the current window.
We can link to another website to open in a new window by using the
“target” attribute and setting the value to “_blank” with the anchor tag.
Ex: <ahref=”[Link] > Click here</a>
Other predefined values for target attribute are:
_blank - Opens the document in a new window or tab
_self: Loads the page into the current window.
_parent: Loads the page into the frame that is superior to the window the
hyperlink is in.
_top: cancels all windows and loads in full browser window.
The default value is _self.
Relative or Absolute Paths
<p><a
href="[Link]
<p><a href="[Link]">Rose
</a></p>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside
the <a> tag
<a href="[Link]
<img src="auto_failure.png" alt="HTML tutorial"
style="width:42px;height:42px;"></a>
LINK WITHIN A PAGE(NAMED ANCHORS /
INTERNAL LINKS)
How to create a hyperlink to a different part of the same
page?
To create a link to a different part of the same page the name attribute of
the <a> tag is used.
It is a two step process:
Create a link pointing to the anchor.
<a href=”#chapter” >click here to read the chapter</a>
Create the anchor itself.
<a name=”chapter1”></a>
Note: # (pound sign) indicates that the link is pointing to anchor on a
page. Anchor meaning a specific place in the middle of the page.
End of XHTML
Javascript and XHTML Documents
Document Object Model
Why is DOM required?
When an HTML file is loaded into the browser, the javascript can not
understand the HTML document directly.
A corresponding document is created(DOM).
DOM is basically the representation of the same HTML
document but in a different format with the use of objects.
Javascript interprets DOM easily i.e javascript can not understand the
tags(<h1>H</h1>) in HTML document but can understand object h1
in DOM.
Now, Javascript can access each of the objects (h1, p, etc) by using
different functions
Definition of DOM
"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 way that 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. It is the outmost element of the
object hierarchy.
Document object: Each HTML document that gets loaded into a window
becomes a document object. The document contains the content 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.
DOM
The DOM provides JavaScript application a standard way to access all the elements of the document
DOM is browser and platform independent
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
The Document Object Model(DOM) is an application programming interface(API) for XHTML documents..
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
In the JavaScript binding to the DOM, the elements of a
document are objects, with both Properties and Methods.
For example, the following XHTML element would be
represented as an object with two properties, type and name,
with the values “text” and “address”, respectively:
<input type =“text” name =“address”>
Element Access in Javascript
There are several ways the object associated with an XHTML
form element can be addressed in JavaScript.
However in general there are 3 different ways for accessing
elements in JavaScript:
1. Accessing form elements using forms array and elements
array
2. Accessing form elements using name attributes
3. Accessing form elements using getElementById() method
Accessing form elements using forms
array and elements array
SYNTAX:
[Link][number].elements[number
<script type="text/javascript">
function validate()
{
var Name = [Link][0].elements[0].value;
var age = [Link][0].elements[1].value;
var Phone =[Link][0].elements[2].value;
[Link]("Name is:" +Name +"<br>");
[Link]("age is:" +age +"<br>");
[Link]("Phone is:" +Phone +"<br>");
}
</script>
<body>
<form name="myForm" onsubmit="validate()">
<input type="text" name="Name"/> <br/><br/>
<input type="text" name="Age"/> <br/><br/>
<input type="text" name="Phone"/> <br/><br/>
<input type="submit" value="Send message"/> <br/><br/>
</form>
</body>
Accessing form elements using name
attributes
<script type="text/javascript">
function validate()
{
var name = [Link];
var age = [Link];
var phone =[Link];
[Link]("Name is:" +name +"<br>");
[Link]("Age is:" +age +"<br>");
[Link]("Phone is:" +phone +"<br>");
}
</script>
<form name="myForm" onsubmit="validate()">
<input type="text" name="Name"/> <br/><br/>
<input type="text" name="Age"/> <br/><br/>
<input type="text" name="Phone"/> <br/><br/>
<input type="submit" value="Send message"/> <br/><br/>
</form>
Accessing form elements using
getElementById() method
<script type="text/javascript">
function validate()
{
var name = [Link]("Name").value;
var age = [Link]("Age").value;
var phone =[Link]("Phone").value;
[Link]("Name is:" +name +"<br>");
[Link]("Age is:" +age +"<br>");
[Link]("Phone is:" +phone +"<br>");
}
<form name="myForm" onsubmit="validate()">
<input type="text" id="Name"/> <br/><br/>
<input type="text" id="Age"/> <br/><br/>
<input type="text" id="Phone"/> <br/><br/>
<input type="submit" value="Send message"/> <br/><br/>
</form>
Event and Event Handling
An event is a notification that something specific has
occurred
An event handler is a script that is implicitly executed in
response to the appearance of an event.
For example click is an event, onclick is an event handler that
will be executed
Examples of HTML events:
• When a user clicks the mouse- onclick
• When a web page has loaded- onload
• When the mouse moves over an element –onmouseover &
onmouseout
Events and their tag attributes
Event Tag attribute Event Attribute
blur onblur mouseout onmouseout
Change onchange mouseover onmouseover
Click onclick Reset onReset
Dblclick ondblclick
select onselect
Focus onfocus
submit onsubmit
Keydown onkeydown
unload onunload
Keypress onkeypress
Keyup onkeyup
Load onload
Mouseup onmouseup
mousedown onmousedown
mousemove onmousemove
Examples
<script type="text/javascript">
function over()
{
[Link]('key').innerHTML="Onmouseover event has occurred";
}
function out()
{
[Link]('key').innerHTML="Onmouseout event has occurred";
}
</script>
</head>
<body>
<h2 id="key" onmouseover="over()" onmouseout="out()">
Original Text
</h2>
Handling Events from Body Elements
The events most often created by body elements(body tag)
are load and unload.
The onload event occurs when an object has been loaded
The onunload event occurs once a page has unloaded (or the
browser window has been closed)
Onload events
Load event: The onload event handler is called when the HTML
document finishes loading into the browser window.
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Onunload event
The onunload event occurs once a page has unloaded (or the browser
window has been closed)
<script type="text/javascript">
function myFunction()
{
alert("Thank you for visiting W3Schools!");
}
</script>
</head>
<body onunload="myFunction()">
<h1>Welcome to my Home Page</h1>
<p>Close this window or press F5 to reload the page.</p>
</body>
Handling events from Button elements
The most important event associated with buttons is click event, which is most
widely used event in any web site
<body>
<p>Click the button to execute the <em>displayDate()</em>
function.</p>
<button onclick="displayDate()">Try it</button>
<script>
function displayDate()
{
[Link]("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
Handling Events from Text Box and
Password Elements
Text boxes and passwords can create four different events:
blur, focus, change, and select.
The Focus and Blur Events:
The onfocus event occurs when an element gets focus.
Onfocus is most often used with , <input>, <select>, and
<a>
Syntax:
In HTML:
<element onfocus="SomeJavaScriptCode">
In JavaScript:
[Link]=function(){SomeJavaScriptCode}
Onfocus event
<script type="text/javascript" >
function myFunction(x)
{
[Link]="yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
p>When the input field gets focus, a function is triggered which
changes the backgroundcolor.</p>
</body>
Onblur event
<script type="text/javascript" >
function myFunction()
{
var x=[Link]("fname");
[Link]=[Link]();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms
the input text to
upper case.</p>
Onselect event
The onselect event occurs after some text has been selected
in an element
Syntax
In HTML:
<element onselect="SomeJavaScriptCode">
In JavaScript:
[Link]=function(){SomeJavaScriptCode}
Onselect event
<script>
function myFunction()
{
alert("You have selected some text!");
}
</script>
</head>
<body>
Some text: <input type="text" value="Hello world!"
onselect="myFunction()">
</body>
Validating Form Input
The onsubmit event occurs when the submit button in a
form is clicked
This event allows the programmer to validate the form
before sending it off to the server
If the return value from the event handler is true, the form
will be submitted, if false it won’t be submitted
Syntax: onsubmit="JavaScriptCode
Validate Input password
<head>
<script type="text/javascript">
function isValid()
{ var password = [Link]('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<body>
<form name="PasswordField" action=""> Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();"> </form>
</body>
DOM2 EVENT MODEL
DOM2 model is a modularized interface.
DOM2 provides powerful means to deal with events using
event listeners.
2 important features of DOM 2:
A way to set several handlers for a specific event
Notion of event flow with captures and bubbling
Event Interface Event Types
Event Abort, blur, change, error, focus, load, reset, resize, scroll,
select, submit, unload
MouseEvent Click, mousedown, mousemove, mouseout, mouseover,
mouseup
Document tree
Event Propagation
When an event occurs, one event object is created at a node
in the document tree. For that event, the node is called the
target node.
The event propagation means travelling of an event from one
element to another element.
Event Propagation Methods
DOM2 does not include DOM 0 features, but DOM 0 features are still supported by browsers
DOM 2 is modularized - one module is Events, which has two
submodules, HTMLEvents and MouseEvents, whose interfaces are Event (blur, change, etc.)
and MouseEvent (click, mouseup, etc.)
Event propagation
The node of the document tree where the event is created is called the target node
The capturing phase (the first phase)
Events begin at the root and move toward the target node
Registered and enabled event handlers at nodes along the way are run
The second phase is at the target node
If there are registered but not enabled handlers there for the event, they are run
The third phase is the bubbling phase
Event goes back to the root; all encountered registered but not enabled handlers are run
Not all events bubble (e.g., load and unload events do not bubble. All of the mouse events bubble.)
Any handler can stop further event propagation by calling the stopPropagation method of
the Event object
DOM 2 model uses the Event object method, preventDefault, to stop default operations, such as
submission of a form, if an error has been detected
Event handling – a 3 Phase process
Phase 1 : Capturing Phase
The event starts at root node in the document tree and propagates
towards the target node. Once it reaches the target node it executes
the handler code.
Phase 2 : Target Node Handler Execution
The handler code in the target code is executed
Phase 3: Bubbling Phase
Event starts at target node and executes handler code in the target
node and then moves upward in document tree
DOM2 event model
DOM2 event model
Event Bubbling
<body>
<div id="MyPara1" onclick="alert('from the <div> tag');">
<p onclick="alert('From the <p> Tag');">My Best Book is
<em onclick="alert('From the <em> Tag');"> Web Programming
</em>
</p>
</div>
</body>
When we click web programming text, first it displays “From <em> tag”
then it displays “from <p> tag” and finally it displays “From <div> tag”.
EVENT HANDLER REGISTRATION
The handler registration in DOM2 event model is performed
by the method addEventListener, which is defined in the
EventTarget interface.
The addEventListener method must have 3 parameters:
1. first parameter is the event name specified as string literal
2. second parameter is the function name that has to be invoked
3. Third parameter is Boolean value; The value true is for
enabling the handler during capturing phase, the value false is
for enabling the handler during target phase or bubbling phase
Event Handler Registration
The value true is for enabling the handler during capturing phase, the
value false is for enabling the handler during bubbling phase
Syntax: [Link](eventType, function, UseCapture);
Event handler registration is done with the addEventListener method
Three parameters:
Name of the event, as a string literal
The handler function
A Boolean value that specifies whether the event is enabled during the
capturing phase [Link]("change", chkName, false);
Example:
[Link](“blur”, checkmail, true);
[Link](“submit”, validate, false);
Example
<html>
<head>
<title> Navigator Object</title>
<script type="text/javascript">
function validate()
{
var username = [Link]("nameText").value;
var password = [Link]("pwdText").value;
if ([Link]<8)
alert("The user name should be 8 characters");
if ([Link]<6)
alert("The password should be 6 characters");
}
function registerEvents()
{
var myform = [Link]("myForm");
[Link]("submit",validate,false);
}
</script>
</head>
<body onload="registerEvents();">
<form id="myForm">
<label> Enter User Name: </label><input type="text" id="nameText"/><br/><br/>
<label> Enter Password: </label><input type="password" id="pwdText"/><br/><br/>
<input type ="submit" id="submitButton"/>
</form>
</body>
</html>
The navigator Object
The navigator object contains information about the browser.
Navigator Object Properties:
Example
<script type="text/javascript">
function showProperties()
{
alert("The name of the browser is:" + [Link] + "\n" +
"The version of the browser is:" + [Link] + "\n" +
"The platform of the client is :" +[Link]);
}
</script>
</head>
<body>
<form id="myForm">
<input type="button" value="Click Me" onclick="showProperties();"/>
</form>
</body>
DOM Tree Traversal
Core DOM identifies each element in the tree as a node or
element object.
Each element in an XHTML document has a corresponding
ELEMENT object in the DOM representation
The ELEMENT object has methods to support
Traversing the document, that is, visiting each of the document nodes
Modifying the document
For example, removing and inserting child nodes
DOM Tree Structure
DOM Tree Traversal
Node Property Description
firstChild Returns the first child node of an element
lastChild Returns the last child node of an element
nextSibling Returns the next child node of an element at the same level as the
current child node
nodeName Returns the name of the node
nodeType Returns the type of the node as a number.
parentNode Returns the element that contains the current node
Example
<!DOCTYPE html>
function myFunction()
<head> {
<title> Tree Traversal </title> var bodynode=[Link]("myCollege");
alert([Link]);
<script type="text/javascript"> alert([Link]);
</script> alert([Link]);
alert([Link]);
</head>
}
<body id ="myCollege">
<h1> My Heading </h1>
<p> My first <em> paragraph </em> </p>
<b> This is bold tag </b>
</body>
</html>
DOM Tree Modification
Method Description
appendChild(new node) Appends a new node onto the end of the list of
child nodes
cloneNode(child option) Makes a clone of a node
hasChildNodes() Returns true if the node has children
removeChild(child node) Removes a child node from a list of children
Tree Modification
<!DOCTYPE html>
<head>
<title> Tree Traversal </title>
<script type="text/javascript">
function myFunction()
{
alert("Before creating a new paragraph");
var bodynode=[Link]("myCollege");
var pref = [Link]("p");
[Link](pref);
txt = [Link]("This is third para");
[Link](txt);
alert("After Creating New Paragraph");
}
</script>
</head>
<body id ="myCollege" onload="myFunction()";>
<p> This is first para </p>
<p> This is second para </p>
</body>
</html>
Summary
1 ONE MARK QUESTIONS
1. what is an event and event handler?
[Link] DOM
3. Explain the use of getElementById() method?
[Link] is the use of focus and blur?
II SEVEN/TEN MARK QUESTIONS
[Link] a brief note on Document Object Model
2. Discuss the three different ways for accessing elements in JavaScript with examples.
Or
2. Explain the element access using
a)Form and element array
b)Name attribute
c)GetElementByid() method
3. Discuss with examples
a. Handling Events from Body Elements
b. Handling events from Button elements
c. Handling Events from Text Box and Password Elements
Summary
4. Write a program to validate the user name and phone number that is input from user using javascript.
5. Discuss DOM2 event model.
6. Explain in detail the event propagation phases used in DOM2.
7. What is Event Handler Registration used in DOM2. Briefly explain with an example.
8. Write a note on the Navigator object. List any three properties used.
[Link] DOM tree traversal in javascript?
[Link] Event Propagation in detail.
[Link] the several ways for positioning elements on the web page
[Link] is Event propagation? what are the different methods?