JavaScript, Part 3 Instructor: Charles Moen CSCI/CINF 4230.

JavaScript, Part 3

Instructor: Charles Moen

CSCI/CINF 4230

2

Events

Events are fired by actions that happen in a document, e.g. a user clicks a button or submits a form

JavaScript programs are event-driven• The program waits for some user action

– Clicking a link or a check box

– Submitting a form

– Loading a page

• An action triggers an event – e.g. click, submit, or load events

• Then a function is executed as a result of the event firing

JavaScript (Koch)

3

Event Handlers

Event handlers are the functions that are executed when a particular event fires

We add GUI controls and event handlers to a Web page to make it interactive

• The user interacts with a control – e.g., by changing the value in a form field or clicking on a submit button

• The event handler function is notified of this event

• Then the function executes

JavaScript (Koch, Ding)

4

Some Events

Mouse events are available on all HTML elements Interface events are fired after certain mouse or key actions, e.g., the submit

event fires after a user clicks on a submit button

Mouse events Interface events Keyboard events

click blur keydown

dblclick focus keypress

mousedown change keyup

mousemove load

mouseout unload

mouseover submit

mouseup resize

scroll


5

Some Commonly Used Events

click• An element is clicked once

mouseover• The mouse moves over an element

change• The value of an element changes

load• A page has been completely loaded in the browser

submit• A user submits a form


6

A Simple Example

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Event Handling Example</title> </head> <body> <form method="post" action="hello.aspx"> <input type="button" value="Click me" onclick="alert('Hello');"/> </form> </body></html>

JavaScript

Add “on” in front of the event name

7

Event Handler Registration

Method 1: Inline event handlers• Add an attribute to an HTML element

• Works in all browsers

• Deprecated because behaviour is not separated from structure

<form method="GET" action="" onsubmit="addSandwich(this);return false;"></form>

Method 2: Register event handlers in the script• Best practice

JavaScript (Koch)

An inline event handlerAdd “on” in front of the event name

8

Register Event Handlers in the Script

Event-handling attributes are properties of elements in JavaScript Assign the event handler function to the element’s property for a

particular event

function initForm() { var theForm = document.getElementById("sandwichform"); theForm.onsubmit=addSandwich;}

JavaScript (Koch)

<form method="GET" action="" id="sandwichform">



</form>

myscripts.js

The property for the submit event The event handler (do not use the parentheses)

9

The load Event

Fires when the page is completely loaded in the browser Script initialization can be triggered by the load event

JavaScript (Koch)


window.onload = initForm;

myscripts.js

This assignment is executed immediately, because it is not in a function.

Whenever the load event fires, the initForm function will execute

The event handler (do not use the parentheses)

10

this

When used inside a function body, “this” refers to the object that the function belongs to

If we assign a function as an object’s event handler, then it belongs to that object

JavaScript (Koch)

function addSandwich() { var mySandwich = ""; for (var i=0; i<this.length; i++) { var element = this.elements[i];


return false;}


window.onload = initForm;

Since the “addSandwich” function belongs to the form, we can use “this” to refer to the form itself

When we assigned the function as an event handler of “theForm,” the function became a method of the form object and “belongs” to it.

function addSandwich(mySandwichForm) { var mySandwich = ""; for (var i=0; i<mySandwichForm.length; i++) { var element = mySandwichForm.elements[i];


}

In the original function, we had to pass the form as an argument

11

Advanced Event Handler Registration

The script-based event handler registration, as described so far, is considered the “traditional” approach because it is part of the Netscape 3 standard

PROBLEM: • With the traditional approach, only one function can be

registered for any one particular event

Advanced event handler registration allows many event handlers for the same event on the same element

• W3C event handler registration

• Microsoft event handler registration

JavaScript (Koch)

12

W3C Event Handler Registration

Supported by Mozilla and Safari, but not by Microsoft IE


window.addEventListener("load",initForm,false);

JavaScript (Koch)

myscripts.js

Use the “addEventListener” method of the object that gets the event handler

Three arguments:

1. The event name as a string

2. The event handler function

3. A boolean

false = the event bubbles up (the usual choice)

true = the event is captured

13

Microsoft Event Handler Registration

Supported by Microsoft IE, but not Mozilla and Safari


window.attachEvent("onload",initForm);

JavaScript (Koch)

myscripts.js

Use the “attachEvent” method of the object that gets the event handler

Two arguments:

1. The event name as a string, with “on” in front of the name

2. The event handler function

14

Cross Browser Support

Browser detection (deprecated)• Check the value of navigator.userAgent, and then branch to handle each

browser differently

• Early technique that is unreliable now, because the userAgent value is unpredictable

JavaScript (Koch)

Object detection• If your script uses an object or method, first check whether it exists in the

browser

• You don’t need to know the browser identity

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Event Handling Example</title> <script> document.write(navigator.userAgent); </script> </head> <body> </body></html>

Browser detection scripts attempt to search the value of this property for the name of the browser.


if (window.addEventListener) { window.addEventListener("load",initForm,false);}else if (window.attachEvent) { window.attachEvent("onload",initForm);}

myscripts.js

15

Object Detection

If your script uses an object or method, first check whether it exists in the browser; if it doesn’t exist, then return

Works with any browser, any object, any method

JavaScript (Koch)

Testing whether this method exists

17

DHTML

Dynamic HTML

A buzzword, not a standard• Adding visual effects to Web pages by using JavaScript and the

DOM to change the CSS styles of HTML elements

Some common uses today• Rollover buttons

• Dropdown menus

• Animations

JavaScript (Koch, Wikipedia)

18

Background About DHTML

First introduced in the Netscape and IE version 4 browsers• The ability to add visual effects to the dynamically was exciting, because

Web pages had always been static documents

• The problem: Most users still had version 3 browsers

Also, Netscape and IE tried to be as incompatible as possible• Browser sniffing was recommended for dealing with incompatibilities

• Hooks to elements were treated differently

JavaScript (Koch, Wikipedia, Yue)

<div id="greeting" style="position:absolute;">Hello</div>

var greetingDiv = document.layers["greeting"];

In Netscape

<div id="greeting">Hello</div>

var greetingDiv = document.all["greeting"];

In IE

19

A Simple ExampleJavaScript (Koch, Wikipedia, Yue)

<script type="text/javascript">function moveRight(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.left='100px';}function makeRed(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.color='red';}function makeBold(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.fontWeight='bold';}function makeInvisible(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.visibility='hidden';}function reset(){ var greetingDiv = document.getElementById('greeting'); greetingDiv.style.left=0; greetingDiv.style.color='black'; greetingDiv.style.fontWeight='normal'; greetingDiv.style.visibility='visible';}</script>

20

More Examples

http://www.w3schools.com/dhtml/dhtml_examples.asp

JavaScript (W3schools)

21

innerHTML

A property of an element• All of the HTML in the element

Not part of the DOM

Introduced by Microsoft in IE4, and supported by most browsers today

JavaScript (Keith, Yue)

<html><head><script>function testInnerHtml() { var emptyDiv = document.getElementById("empty"); emptyDiv.innerHTML = "<p>Some <em>new</em> text.</p>";}</script></head><body><p><a href="#" onclick="testInnerHtml();return false;">Test innerHTML</a></p><div id="empty"></div></body></html>

22

Using innerHTMLJavaScript (Keith, Yue)

23

References

Ding, Wei, “JavaScript” UHCL lecture slides, 2008.

Keith, Jeremy. DOM Scripting: Web Design with JavaScript and the Document Object Model. friends of ED, 2005.

Koch, Peter-Paul, PPK on JavaScript. New Riders, 2007.

Schultz, David and Craig Cook, Beginning HTML with CSS and XHTML: Modern Guide and Reference. Apress, 2007.

Shannon, Ross. “DHTML Explained”. (2008) [Online]. Available: http://www.yourhtmlsource.com/javascript/dhtmlexplained.html

W3Schools Online Web Tutorials. “JavaScript Tutorial”. [Online]. Available: http://www.w3schools.com/js/default.asp

Wikipedia. “DHTML”. [Online]. Available:http://en.wikipedia.org/wiki/Dynamic_HTML

Yue, Kwok-Bun, “An Introduction to JavaScript” UHCL lecture notes, 2000.

Yue, Kwok-Bun, “An Introduction to Dynamic HTML” UHCL lecture notes, 2000.

JavaScript, Part 3 Instructor: Charles Moen CSCI/CINF 4230.

Documents

Transcript of JavaScript, Part 3 Instructor: Charles Moen CSCI/CINF 4230.