Module 17

Web Systems and Technologies
IT 301
1
Instructor
Mr H.S. Mluba
Email:mluba.h@gmail.com
2
Web Systems and Technologies
MODULE 17-Active browser pages: Java Script
3
Instructor
Mr H.S. Mluba
Email:mluba.h@gmail.com
4
Module 17. Active browser pages: Java Script
 Introduction
 Manipulating page content
 Client-side form validation
 Hovering behaviors: image rollover
 JavaScript Object Notation
5
Introduction
 Over time, the HTML specification evolved to support event
handlers - custom code that executes when a browser event occurs
(e.g., when a user clicks on a link, when the mouse pointer hovers
over an element, or when data is entered into a form field).
 Implementing these handlers required a programming language
that would execute in the browser and interface with the page’s
document object model.
 The language that fulfilled this role was JavaScript.
6
Introduction
 JavaScript was developed initially for Netscape Navigator but is
now supported by most desktop browsers, including Microsoft’s
Internet Explorer.
 Despite being perceived as a simple scripting language, it is
actually a rather sophisticated object-oriented programming
language.
 Its name was coined in the flurry of excitement surrounding Sun’s
introduction of Java.
 Although JavaScript bears some remote structural resemblance to
Java, the languages are related in name only.
7
Introduction
 Browsers process JavaScript statements embedded in HTML
documents, as they interpret the documents.
 This embedding can take one of two forms.
 Inline JavaScript code and JavaScript stored in a separate file
8
Introduction
 Inline JavaScript code can be included in the page, in a block
delimited by <script> and </script> tags.
9
Introduction
 JavaScript stored in a separate file can be referenced through a
<script> tag with the src attribute set to the URL denoting the
location of the code:
 Although application/javascript is the designated Internet media

type for JavaScript code, text/javascript is still the more commonly
used value for the type parameter in the <script> tag, despite its
being deprecated.
10
Introduction
 Not all JavaScript processing happens at the same time.
 Some statements are interpreted prior to rendering the HTML
document, while others are interpreted as the document is
rendered:
 JavaScript code found in the <head> portion of the document
(either inline or externally referenced) is interpreted before the
HTML body is parsed and rendered. This often includes global
variable assignments and function definitions.
11
Introduction
 Some statements are interpreted prior to rendering the HTML
document, while others are interpreted as the document is
rendered:
 JavaScript code included within the body of the document (again,
either inline or externally referenced) is interpreted and executed
as the body is parsed and rendered. This may be appropriate if the
code refers to specific elements in the body, provided the code is
placed within the page after those elements.
 JavaScript may also be present within HTML elements on the
page, as handlers for events associated with those elements.The
handler code is executed only when the associated event (e.g.,
clicking a link) occurs:
12
Introduction
 Including JavaScript within HTML elements is deprecated,
because it intermixes code with presentation formatting.
 The preferred approach is to associate an element with a handler
declaratively, outside the document body:
 This assumes that the clickTheLink function has been declared

previously in inline or externally referenced JavaScript code. The
code fragment might look something like this:
13
Introduction
 Note that the clickTheLink function is defined before it is
referenced in the onclick handler.
 If this were not the case, a runtime error would occur. Note the
syntax: only the name of the function is used in the assignment
statement, without the parentheses associated with an actual
function call, i.e., we do not write clickTheLink().
14
 Introduction
15
Manipulating Page Content
 There are two main approaches to using JavaScript as a
mechanism for manipulating document content.
 The first approach is the trivial use of document.write statements.
This function, as its name implies, simply writes content into the
document.
 If the document.write statement is invoked as the page is loading,
the new content is inserted at the point in the document where it
has been invoked.
 If it is invoked after the page has loaded, it clears the existing
document content and starts the page from scratch. This approach
may be simple, but it is awkward, unreliable, and deprecated.
16
Manipulating Page Content
 The second approach is to use JavaScript methods for
manipulating the Document Object Model (DOM).
 Unlike document.write, these methods can be employed after the
browser has finished loading the page without causing the entire
document to be cleared.
 The DOM is organized as a tree with the document object as its
root.
17
 Introduction
18
Client-side form validation
 One of the most common uses of JavaScript is to perform client-
side validation of form entries.
 Without client-side logic to validate form field contents, it would
be necessary to perform all validation on the server, requiring a
request-response “roundtrip”. For each validation, it would be
necessary to:
 send a request to the server;
 allow the server-side application to perform validation;
 either continue processing based on the validated data in the
submitted form or tell the browser to redisplay the original form
(hopefully with detailed error messages) so that the user could re-
enter fields whose content was deemed invalid.
19
 We begin with “classic” validation using JavaScript. Note that this
is for historical purposes only. Better JavaScript validation
techniques are supported today and we discuss them in another
module.
 In the past, validation was accomplished most frequently through
the <form> tag’s onsubmit event handler, which is executed prior
to the submission of the form.
 If the code returned by the event handler evaluates to the Boolean
value true, the HTML form has passed validation and an HTTP
request is generated and submitted to the server.
 Otherwise, the code evaluates to false and no submission takes
place.
20
 Figure 17.1 provides a simple example of client-side form
validation using JavaScript.
 The form contains two fields and the <form> tag calls for the
execution of a JavaScript function, validate(), when the form is
submitted.
 This function examines the values entered in the two form fields
and determines whether they are valid.
 If either value is unacceptable, an appropriate error message is
appended to the string variable errors. Otherwise, the function
returns true, causing the form to be submitted to the server.
21
 Figure 17.1
22
 Figure 17.1
23
 With this approach, the validation process is initiated with the
submission of the form.
 As we mentioned previously, it is possible to perform validation
on a per-field basis, using the onchange or onblur JavaScript event
handlers in the <input> tags associated with individual form
fields.
 These handlers are invoked when a field’s value changes or when
the focus of the browser moves away from that field.
24
 Introduction
25
Hovering behaviors: image rollover
 JavaScript provides mechanisms to perform actions when the
mouse pointer is hovering over a region specified as a hyperlink
(e.g., presenting different images depending on the position of the
mouse pointer).
 The onmouseover and onmouseout attributes in the HTML anchor
tag (<a>) serve to define the respective handlers.
 The image rollover technique, shown in Figure 17.2, is a simple
illustration of onmouseover behavior.
 The <img> tag is identified through its name attribute, making it
possible to reference the image directly, using the
document.images object associated with the page.
26
 The src attribute of the <img> tag is set to the relative URL of the
default image (images/pic1a.jpg).
 When the mouse pointer hovers over the image (onmouseover),
JavaScript code is invoked to change the image’s location
(referenced by its src attribute) to a different URL, causing a
different image (images/pic1b.jpg) to be displayed.
 Similar code is invoked when the mouse pointer leaves the area
(onmouseout) to redisplay the original image.
27
 Figure 17.2: Simple implementation of onmouseover behavior.
28
 Incremental improvement of the previous script;
 The document.getElementById method is now the more
commonly used approach for selecting page elements, as it is least
susceptible to cross-browser incompatibilities. This requires a
change to the <img> tag to set the id attribute:
29
 Rather than including JavaScript assignment statements in handler
definitions within HTML tags, functions should be defined in the
HEAD section of the document (either inline or via an externally
referenced JavaScript source file). This way, the handler code
embedded in the HTML tags is limited to a simple function call as
depicted in figure 17.3.
 Instead of inserting handler code into HTML tags, the preferred
approach is to tie event handlers with page elements declaratively
depicted in figure 17.4.
30
 .Figure 17.3: Define function in HEAD section
31
 Figure 17.4
32
 Introduction
33
JavaScript Object Notation
 Before we wrap up our initial discussion of JavaScript, it is
worthwhile to mention JavaScript Object Notation (JSON).
 It is a native part of JavaScript that allows declaration of (and
access to) complex variable content, using a simple lightweight
notation (see Figure 17.5).
34
 Figure 17.5: A complex JavaScript object defined using JSON
35
 Brackets are used to wrap array constructs, while braces surround
maps (whose key-value pairs are denoted as key:value).
 In the example, the JavaScript variable complexThing contains a
variety of elements ranging from strings and a simple array of
numbers to an array of maps.
 These elements are directly addressable with dotted or bracketed
notation (Figure 17.6).
36
 Figure 17.6: Accessing attributes of the JavaScript object defined in
Figure 17.5.
37
 JSON is a common format for data transmitted from servers to
browsers in AJAX responses.
 Although many presume that AJAX necessarily involves responses
that are formatted as XML, XML is too complicated and
heavyweight for many applications.
 Using JSON means that the data is already in a format that
JavaScript understands natively. (Note the way the block of JSON
is directly assigned to the variable complexThing in Figure 17.5.)
JSON bears a very close resemblance to Yet Another Markup
Language (YAML), which is used for configuration files in Ruby
on Rails.
 We come back to JSON in our discussions of DHTML toolkits and
AJAX. 38
THANK YOU FOR YOUR
ATTENTION
39

Module 17

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 17

Uploaded by

Copyright:

Available Formats

Web Systems and Technologies

MODULE 17-Active browser pages: Java Script

 Manipulating page content

 Client-side form validation

 Hovering behaviors: image rollover

 JavaScript Object Notation

 Although application/javascript is the designated Internet media

 This assumes that the clickTheLink function has been declared

 Manipulating page content

 Client-side form validation

 Hovering behaviors: image rollover

 JavaScript Object Notation

 Manipulating page content

 Client-side form validation

 Hovering behaviors: image rollover

 JavaScript Object Notation

 Manipulating page content

 Client-side form validation

 Hovering behaviors: image rollover

 JavaScript Object Notation

 Manipulating page content

 Client-side form validation

 Hovering behaviors: image rollover

 JavaScript Object Notation

You might also like