Scribd
Upload
80 views14 pages

BIT 4303 DL Chapter Seven & Eight

The DOM defines a standard way to access and manipulate HTML documents as a tree structure. With JavaScript and the DOM, HTML documents can be restructured by adding, removing, changing, or reordering elements on a page. AJAX allows asynchronous data retrieval, enabling web pages to request small bits of information from servers without reloading the entire page. This improves interactivity and speeds up web applications.

Uploaded by

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

BIT 4303 DL Chapter Seven & Eight

The DOM defines a standard way to access and manipulate HTML documents as a tree structure. With JavaScript and the DOM, HTML documents can be restructured by adding, removing, changing, or reordering elements on a page. AJAX allows asynchronous data retrieval, enabling web pages to request small bits of information from servers without reloading the entire page. This improves interactivity and speeds up web applications.

Uploaded by

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

Advanced Web @ Fred 2022

Chapter seven
What is the DOM?
The HTML Document Object Model (HTML DOM) defines a standard way for accessing and
manipulating HTML documents. It presents an HTML document as a tree-structure (a node tree),
with elements, attributes, and text.
With JavaScript you can restructure an entire HTML document. You can add, remove, change,
or reorder items on a page.
This access, along with methods and properties to add, move, change, or remove HTML
elements, is given through the Document Object Model (DOM).
All browsers have implemented this recommendation, and therefore, incompatibility problems in
the DOM have almost disappeared. It can be used by JavaScript to read and change HTML,
XHTML, and XML documents.

Document Tree (Node Tree)


<html>
<head>
<title> My title </title>
</head>
<body>
<h1> My header </h1>
<a href=“http://.... > My link </a>
</body>
</html>

Document Tree (Node Tree)

HTML DOM Example

<html>
<head>
Advanced Web @ Fred 2022

<script type="text/javascript">
function ChangeColor() {
document.body.bgColor="yellow" }
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>

HTML DOM Access Nodes


The getElementById() method returns the element with the specified ID:
document.getElementById("someID");
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
l The getElementsByTagName() method returns all elements (as a nodeList) with the
specified tag name.
document.getElementsByTagName("p");
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{ // do something with each paragraph }

JavaScript Objects

Window: The top level object in the JavaScript hierarchy. The Window object represents a
browser window. A Window object is created automatically with every instance of a <body> or
<frameset> tag
Navigator: Contains information about the client's browser
Screen: Contains information about the client's display screen
History: Contains the visited URLs in the browser window
Location: Contains information about the current URL

DOM Objects
DOM Anchor DOM Area
DOM Base DOM Body
DOM Button DOM Event
DOM Form DOM Frame
DOM Frameset DOM IFrame
DOM Image DOM Input Button
DOM Input Checkbox DOM Input File
DOM Input Hidden DOM Input Password
DOM Input Radio DOM Input Reset
DOM Input Submit DOM Input Text
DOM Link DOM Meta
DOM Object DOM Option
DOM Select DOM Style
Advanced Web @ Fred 2022

DOM Table DOM TableCell


DOM TableRow DOM Textarea

Window Example
<html>
<body>
<script type="text/javascript">
window.status="Some text in the
status bar!!"
</script>
</body>
</html>

<html>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200, height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>
</body>
</html>

Browser Example
<html>
<body>
<script type="text/javascript">
document.write("<p>Name: ")
document.write(navigator.appName + "</p>")
</script>
</body>
</html>

Screen Example
<html>
<body>
<script type="text/javascript">
document.write("<p>Width: ")
document.write(screen.width + "</p>")
</script>
</body>
</html>

Anchor Example
<html>
<head>
Advanced Web @ Fred 2022

<script type="text/javascript">
function changeLink() {
document.getElementById('myAnchor').innerHTML="W3Schools";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank"; }
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>

Table Example
<head>
<script type="text/javascript">
function changevalue() {
var x=document.getElementById('mytable').cells
x[0].innerHTML=“Ali"
x[1].innerHTML=“Veli"
x[2].innerHTML=“Selami" }
</script>
</head>
<body>
<table id="mytable" border=1>
<tr>
<td id="col1"> John </td>
<td id="col2"> Doe </td>
<td id="col3"> Alaska </td>
</tr>
</table>
<input type="button" value="Change value" onclick="changevalue()">
Advanced Web @ Fred 2022

Chapter eight
What is DHTML?

DHTML stands for Dynamic HTML.

DHTML is the art of making HTML pages dynamic.

DHTML is a combination of technologies used to create dynamic and interactive Web sites.
(Combination of HTML 4.0, Style Sheets, DOM and JavaScript)

DHTML is not a standard defined by W3C. DHTML is a "marketing term" - used by Netscape
and Microsoft to describe the new technologies the 4.x generation browsers would support.

DHTML Technologies

HTML 4.0
Cascading Style Sheets (CSS)
The Document Object Model (DOM)
JavaScript

DHTML CSS Positioning

First, the element must specify the position attribute (relative or absolute).

Then we can set the following CSS-P attributes:

• left - the element's left position

• top - the element's top position

• visibility - specifies whether an element should be visible or hidden

• z-index - the element's stack order

• filter - add more style effects to your text and images

Layer 2

<div style="position:relative;

font-size:50px; z-index:2;">LAYER 1</div>

<div style="position:relative; top:-50; left:5; color:red;

font-size:80px; z-index:1">LAYER 2</div>

DHTML Document Object Model

Remember DOM from previous slides


Advanced Web @ Fred 2022

<html>
<body>
<h1 id="header">My header </h1> <script type="text/javascript">
document.getElementById('header').style.
color="red"
</script>
</body>
</html>

DHTML Event Handlers

With an event handler you can do something with an element when an event occurs.

<html>
<head>
<script type="text/javascript">
function changecolor() { document.getElementById('header').style.color="red" }
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()"> Click on this text</h1>
</body>
</html>

HTML 4.0 Event Handlers

Event Occurs when...

onabort a user aborts page loading

onblur a user leaves an object

onchange a user changes the value of an object

onclick a user clicks on an object

ondblclick a user double-clicks on an object

onfocus a user makes an object active


Advanced Web @ Fred 2022

onkeydown a keyboard key is on its way down

onkeypress a keyboard key is pressed

onkeyup a keyboard key is released

a page is finished loading. Note: In Netscape this event occurs during the
onload
loading of a page!

onmousedown a user presses a mouse-button

onmousemove a cursor moves on an object

onmouseover a cursor moves over an object

onmouseout a cursor moves off an object

onmouseup a user releases a mouse-button

onreset a user resets a form

onselect a user selects content on a page

onsubmit a user submits a form

onunload a user closes a page

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a technique for creating better, faster, and more
interactive web applications.

AJAX is a browser technology independent of web server software.

AJAX is based on the following web standards:


Advanced Web @ Fred 2022

• JavaScript

• XML

• HTML

• CSS

Ajax is a way of developing Web applications that combines:

XHTML and CSS standards based presentation. Interaction with the page through the DOM.

Data interchange with XML and XSLT. Asynchronous data retrieval with XMLHttpRequest.

JavaScript to tie it all together. AJAX = Asynchronous JavaScript and XML

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript
XMLHttpRequest object. With this object, your JavaScript can trade data with a web server,
without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server,
allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX Uses HTTP Requests

In traditional web applications, the user will have to click the "Submit" button to send/get the
information, wait for the server to respond, then a new page will load with the results.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript
XMLHttpRequest object. With an HTTP request, a web page can make a request to, and get a
response from a web server - without reloading the page.

The user will stay on the same page, and he or she will not notice that scripts request pages, or
send data to a server in the background.

The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer can update a page with data from the
server after the page has loaded.

AJAX was made popular in 2005 by Google (with Google Suggest).

AJAX Browser Support

Different browsers use different methods to create the XMLHttpRequest object.


Advanced Web @ Fred 2022

Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript
object called XMLHttpRequest.

The XMLHttpRequest Object

The onreadystatechange Property: stores the function that will process the response from a
server.

The readyState Property: The readyState property holds the status of the server's response.

The responseText Property: The data sent back from the server can be retrieved with the
responseText property.

AJAX Example

<html>
<body>
<script type="text/javascript">

function ajaxFunction() {
var xmlHttp;
try {

// Firefox, Opera 8.0+, Safari


xmlHttp=new XMLHttpRequest();}
catch (e) {

// Internet Explorer
try {
xmlHttp=new activeXObject("Msxml2.XMLHTTP");}
catch (e)
{
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText; } }
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
Advanced Web @ Fred 2022

Name:

<input type="text"
onkeyup="ajaxFunction();“
name="username" />

Time:

<input type="text" name="time" />

</form>

</body>

</html>

What is E4X?

E4X is a new extension to JavaScript. E4X adds direct support for XML to JavaScript.

E4X is an official JavaScript standard.

JavaScript = ECMAScript.

ECMAScript is the official name for JavaScript. ECMAScript is the same as JavaScript.

ECMA (The European Computer Manufacturers Association) is the organization standardizing


JavaScript. E4X = JavaScript for XML.

XML as a JavaScript Object

With E4X, you can declare an XML object variable the same way as you declare a Date or an
Array object variable:

var x = new XML()

var y = new Date()

var z = new Array()

E4X Example

<note>
<date>2002-08-01</date> <to>Tove</to>
<from>Jani</from> <heading>Reminder</heading> <body>
Don't forget me this weekend!
</body>
</note>
Advanced Web @ Fred 2022

var x = new XML()


x= <note>
<date>2002-08-01</date>
<to>Tove</to>
<from>Jani</from> <heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
For the XML example above, the JavaScript statement:

document.write(x.from)

will produce the output:

Jani

Quite simple. Don't you think?

Example without E4X

var xmlDoc
//code for Internet Explorer
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async=false;
xmlDoc.load("note.xml")
displaymessage()
}// code for Mozilla, Firefox, etc.
else (document.implementation && document.implementation.createDocument)
{xmlDoc= document.implementation.createDocument("","",null)
xmlDoc.load("note.xml");
xmlDoc.onload=displaymessage
}
function displaymessage()
{
document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue)
}

Example with E4X

var xmlDoc=new XML()


xmlDoc.load("note.xml")
document.write(xmlDoc.body)
Advanced Web @ Fred 2022

Limited Browser Support for E4X

None of the mainstream browsers are currently supporting E4X.

A beta version of the Mozilla engine (1.8) has limited support for E4X. The first browser to
support E4X is expected to be Firefox 1.1.

Support for E4X is also expected in a later version of Internet Explorer.

What is WML?

Wireless Markup Language.

WML is a content format for devices that implement the Wireless Application Protocol (WAP)
specification, such as mobile phones.

WML documents are XML documents that validate against the WML (currently version 1.3)
DTD (Document Type Definition).

WML is used to create pages that can be displayed in a WAP browser.

Pages in WML are called DECKS. Decks are constructed as a set of CARDS.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"http://www.phone.com/dtd/wml11.dtd" >
<wml>
<card id="main" title="First Card">
<p mode="wrap">This is a sample
WML page.</p>
</card>
</wml>

What is WMLScript?

WMLScript is the scripting language used in WML pages.

WMLScript is a light version of the JavaScript language.

WML scripts are not embedded in the WML pages. WML pages only contains references to
script URLs.

WMLScript is compiled into byte code on the server before it is sent to the WAP browser.

WMLScript is a part of the WAP specification.


Advanced Web @ Fred 2022

What is WMLScript used for?

WMLScript is used to validate user input.

WMLScript is used to generate message boxes and dialog boxes locally, to view error messages
and confirmations faster.

WMLScript is used to access facilities of the user agent.

How to call a WMLScript from a WML page (1)

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"


"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="no1" title="Go to URL">
<do type="options" label="Go">
<go href="check.wmls#go_url('W3Schools')"/>
</do>
</card>
</wml>

How to call a WMLScript from a WML page (2)

Here is the WML page called check.wmls:


extern function go_url(the_url){
if (the_url=="W3Schools") { WMLBrowser.go
("http://www.w3schools.com/wap.wml")
}
}

Servlets vs. Java Applications

Servlets do not have a main(). The main() is in the server


Entry point to servlet code is via call to a method (doGet() in the example)
Servlet interaction with end user is indirect via request/response object APIs
Actual HTTP request/response processing is handled by the server
Advanced Web @ Fred 2022

Primary servlet output is typically HTML.


Running Servlets

End of Chapter Eight

You might also like