IT8501 WT Topic22

TOPIC WISE CLASS NOTES
Unit Number: III Topic Number: 22 Lecture Number: 22/45
Name of the Faculty / Designation : Mrs.S.Fathima Chandhini,Assistant Professor

Course : IT8501 – Web Technology
Program : B.Tech – Information Technology
Topics : DOM Event Handling, Accommodating
Noncompliant Browsers Properties of window
Resources required to handle the class :( VAK - Visuals, Audio, Kinesthetic.)
Visual PPT
Audio Live explanation
Kinesthetic Workbook
@Visual: What are you going to show the students to learn in the class? – Example: PPT, a
video with or without audio, a model, a demonstration, etc.
*Audio: What are you going to make the student listen in the class?
Example: You live explanation, a recorded audio, a video with audio
#Kinesthetic: What are you going to make the students do physically in the class?
Example: Use a workbook and make them work on it and learn by doing
_______________________________________________________________
$ as per the course plan and will vary based on the credits
Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Technology
1
STEP 1: LEARNING OUTCOMES:
DOM Event Handling,
Accommodating Noncompliant Browsers Properties of window.
After the session, the student should be able to:
1. Understand the basic concepts DOM event handling.
2. Illustrate JavaScript programs to develop the dynamic web page.
3. Develop dynamic web page to solve the real time problems.
STEP 2: ACQUISITION
(The subtopics under the main topic being handled are listed. Under each sub topic, the entire detail is to be
prepared. This helps in handling the class with focus and confidence).
3.6 DOM Event Handling:

A JavaScript can be executed when an event occurs, like when a user clicks, Detecting pressed keys,
Getting focus on an HTML element.The on-event handler is usually named with the event it reacts to,
like onclick, onkeypress, onfocus, etc.
o mouse events (MouseEvent): mousedown, mouseup, click, dblclick, mousemove,
mouseover, mousewheel, mouseout, contextmenu
o keyboard events (KeyboardEvent): keydown, keypress, keyup
o form events: focus, blur, change, submit
o window events: scroll, resize, hashchange, load, unload
Examples of HTML events:
o When a user clicks the mouse
o When a web page has loaded
o When an image has been loaded
o When the mouse moves over an element
o When an input field is changed
o When an HTML form is submitted
3.6.1.DOM2 Methods for Generating Common Events
o blur -> anchor, input, select, textarea
o click ->input (type button, checkbox, radio, reset, or submit)
o focus -> anchor, input, select, textarea

Technology
1
o select ->input (type text, file, or password), textareaWhen a user strokes a key
Example: Write a DHTML Program for displaying Date using Javascript.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Output:
Example 2:Write a Javascript program for mouseover and mouseout event to change the CSS in
HTML
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
3.7.Accommodating Non-Compliant Browser
This is used check the browser compatibility mode and display the web page based on the
compatibility.If there is no possibility to display the web page in specified format then the page itself

Technology
1
shows error message indicating that the browser you are using is not supported by the current page use
specified browser to display the web page.
Example:This is /www.ildashboard.com site is specifically designed for Internet Explorer (IE). if we
try to open this website in FireFox(FF) then you will get error message.Our Application detected that
you are using browser other than IE6 and above. This website has been designed to best fit with
Internet explorer 6.0 and above.
Your browser Detail :
Type = Firefox3.6.15
Name = Firefox
Version = 3.6.15
Major Version = 3
Minor Version = 0.6
Platform = WinNT
Is Beta = False
Is Crawler = False
Is AOL = False
Is Win16 = False
Is Win32 = True
Supports Frames = True
Supports Tables = True
Supports Cookies = True
Supports VBScript = False
Supports JavaScript = 1.4
Supports Java Applets = True
Supports ActiveX Controls = False
3.8 Properties of window
The window object represents an open window in a browser.If a document contain frames (<iframe>
tags), the browser creates one window object for the HTML document, and one additional window
object for each frame.
3.8.1.Detecting Host Objects
A famous example of this specification allowance (taken to a perverse extreme) is the case of host
objects in Internet Explorer that are implemented as ActiveX objects. Simply evaluating their methods
(as well as some properties) will cause an exception to be thrown.Below is the sample code.
var el = document.createElement('div');
var parent = el.offsetParent; // IE throws an exception here
if (window.external && window.external.addFavorite) {
// Though the method exists, IE will never get here
window.alert('Found it!');
} else {
window.alert('No such object or method');

Technology
1
}
3.8.2 Java Script Browser Detection

<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
STEP 3: PRACTICE/TESTING
3. a. Short answer questions to check learning in the class
1. __________ is an appropriate event handler for input text among the below options ?
2. _____________ is an appropriate when an event occurs when the user clicks
on an element?
3. Identify the correct code in order to fetch the value entered in username text field?
< body>
< form name="register">
Enter username < input value="John" id="name" name="username">
< /form>
< /body>
4. ________ property is used to obtain the browser vendor and version information.
5. _______ object is the top of the hierarchy?
6. The history object is part of the window object and is accessed through the
_________ property.
3. b. Questions to use in tests and examinations with CO and K level:

S.No Two Marks Questions RBT Course
Level Outcomes

Technology
1
1 Define event. RBT-2 CO504.2
2 List the different types of events. RBT-2 CO504.2
3 Discuss any two keyboard events. RBT-2 CO504.2
4 Write a DHTML Program for displaying Date using
RBT-3 CO504.3
Javascript.
5 Write a Javascript program for mouseover and
RBT-3 CO504.3
mouseout event to change the CSS in HTML
6 List the properties of window object. RBT-2 CO504.2
Descriptive type questions
1 Explain in detail about event object and event listeners
RBT-2 CO504.2
with an example.
2 Explain validation in JavaScript? Write the registration
form for the creation of email account with all possible RBT-3 CO504.6
validations using java script.
3 Discuss on window object with example. RBT-2 CO504.2

Technology
1

IT8501 WT Topic22

Uploaded by

Copyright:

Available Formats

You might also like

IT8501 WT Topic22

Uploaded by

Document Information

Original Description:

Original Title

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

IT8501 WT Topic22

Uploaded by

Copyright:

Available Formats

TOPIC WISE CLASS NOTES

Unit Number: III Topic Number: 22 Lecture Number: 22/45

Name of the Faculty / Designation : Mrs.S.Fathima Chandhini,Assistant Professor

Resources required to handle the class :( VAK - Visuals, Audio, Kinesthetic.)

Audio Live explanation

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

3.6 DOM Event Handling:

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

3.8.2 Java Script Browser Detection

3. b. Questions to use in tests and examinations with CO and K level:

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

Prepared By: S.Fathima Chandhini, Assistant Professor, Dept. of Information

You might also like