Lec 16 JavaScript - VI.pptx

(1)

CS1113 Web Programming

Lecture 16

Event Handling & Mathematical

Methods

(2)

Today’s Goal:

Event Handlers

• _{To become able to}_appreciate_{the concept of}

event handlers:

– _{What are they?}

– _{What do they do?}

(3)

What is Event Handling?

• _{Capturing events and responding}_{to them}

• The system sends events to the program and

the program responds to them as they arrive

• Events can include things a user does - like

(4)

Event Driven Programs

• _{Programs that can}_{capture and respond}_to

events are called ‘event-driven programs’

• _{JavaScript was}_{specifically designed}_{for writing}

such programs

(5)

JavaScript Handling of Events

• _{Events handlers are}_{placed in the BODY}_{part of}

a Web page as attributes in HTML tags

• _{Events can be captured and}_responded_to

directly with JavaScript one-liners embedded in

HTML tags in the BODY portion

• Alternatively, events can be captured in the

(6)

(7)

(8)

<INPUT

type=“submit”

name=“sendEmail” value=“Send eMail”

onMouseOver=

“if (document.sendEmail.sender.value == “”)

window.alert(‘Empty From field! Please correct’)”

(9)

That was event handling through

what we may call

‘in-line JavaScript’

(10)

In-Line JavaScript Event Handling (1)

• _{Event handlers are placed in the}_BODY_portion

of a Web page as attributes of HTML tags

• _The_{event handler attribute}_{consists of 3 parts:}

1. The identifier of the event handler 2. The equal sign

(11)

In-Line JavaScript Event Handling (2)

• _Multiple_{JavaScript statements (}_separated_by

semicolons) can be placed in that string, but all

have to fit in a single line; no newline

characters are allowed in that string

• Due to this limitation, sophisticated event

handling is not possible with in-line event

(12)

(13)

onMouseOver=“checkForm( )”

JavaScript that goes between the <SCRIPT>, </SCRIPT> tags:

JavaScript included as an attribute of the “Send eMail” button:

function checkForm() {

if ( document.sendEmail.sender.value == “”) {

window.alert( “Empty From field! Please correct” );

(14)

Usage Guideline

• _{For very short scripts}_{, “all code in the tag”}

works well

• _{The “}_{code in the HEAD portion}_{” is the right}

choice for developing larger JavaScript scripts

– _{It makes the code}_{easier to read}

(15)

(16)

(17)

onClick=“uolWindow()”

JavaScript included as an attribute of the “New Window” button:

function uolWindow() {

(18)

A Few of My Favorite Event Handlers

onClick

onDblClick

onMouseOver onMouseDown

onFocus _onBlur

(19)

There are many more: there is an

expanded, but still incomplete

list in

your book

(20)

onFocus & onBlur

• _{onFocus executes the specified JavaScript}

code when a window receives focus or when a

form element receives input focus

• onBlur executes the specified JavaScript code

(21)

(22)

JavaScript included as an attribute of the INPUT tag:

function checkAge( ) {

if( parseInt( document.form1.age.value ) < 12 ) {

window.alert( "Stop! You are younger than 12" ) ; }

(23)

<TITLE>onBlur( ) Demo</TITLE>

function checkAge() {

if( parseInt(document.form1.age.value) < 12) {

window.alert("Stop! You are younger than 12" ) ; }

}

</SCRIPT>

</HEAD>

<TD><INPUT type="text" name="age" onBlur="checkAge()"> </TD></TR><TR> <TD>Phone Number</TD>

(24)

onLoad & onUnload

• _{onLoad executes the specified JavaScript code}

when a new document is loaded into a window

• _{onUnload executes the specified JavaScript}

code when a user exits a document

(25)

• The onUnload attribute fires once a page has

unloaded (or the browser window has been closed).

• _onUnload_{occurs when the user navigates} away from the page (by clicking on a link, submitting a form, closing the browser

window, etc.)

(26)

(27)

• _{<!DOCTYPE html>} • _<HTML>

• _{<TITLE>Example of onLoad Event Handler</TITLE>} • _<HEAD>

• _{<SCRIPT type=“text/javascript">}

• _{function hello(){}

• _{window.alert("Hello there...\nThis is an example of onLoad.");}

• _}

• _</SCRIPT>

• _</HEAD>

• _<BODY_{onLoad="hello()"}_>

(28)

(29)

<TITLE>onLoad Demo</TITLE> <SCRIPT type=“text/JavaScript">

var seconds = 0;

// called when the page loads to begin the timer function startTimer() {

// 1000 milliseconds = 1 second

window.setInterval("updateTime()", 1000); }

// called every 1000 ms to update the timer function updateTime() {

++seconds;

document.getElementById("time").innerHTML = seconds; }

</SCRIPT> </HEAD>

(30)

More Uses for onLoad/onUnload?

• onLoad can be used to open multiple Windows

when a particular document is opened

• onUnload can be used to say “Thank you for

the visit” when a user is leaving a Web page

• At times, a user opens multiple inter-dependent

(31)

Enhancing Forms with JavaScript

• _{We do care about several things.}

– _{First values of individual form elements.}

– _{Event cause by those form element.}

– _{Event of entire form itself particular submitting} the form.

• _{You have given form and field inside it}

their own ids then you can ofcourse use

(32)

• _Or_{if your HTML form have either the}_name

property, you can use following format too:

(33)

Text Fields

• _{Main properties}

myTextField.value

• _{Main Events}

onfocus (the element trigger onfocus when go into it)

onblur (trigger when you leave it, onblur is always call when you leave the field)

(34)

CheckBoxes and Radio Buttons

• _{Main properties}

myCheckBox.checked (true or false)

• _{Main Events}

(35)

Form Events

(36)

A Note on Syntax (1)

• _{Mixed-case capitalization}_{of event handlers}

(e.g. onClick) is a convention (but not a

(37)

A Note on Syntax (2)

• _{At times, you may wish to use event handlers in}

JavaScript code enclosed in <SCRIPT>,

</SCRIPT> tags

• In those cases you have to strictly follow the

JavaScript rule for all event handler identifiers: they must all be typed in small case, e.g.

(38)

A misleading statement from Lecture 11

• _{I stated:}

JavaScript is case sensitive. Only the first of the

following will result in the desired function – the rest will generate errors or other undesirable events:

– _onMouseClick_–_OnMouseClick

– _onmouseclick_–_ONMOUSECLICK

(39)

MATH Object

• _Math.PI

– _{A property that gave us the value of Pi}

• Math.round( )

– _{A method that rounded a number to its nearest} integer

• _{Math.sin( )}

(40)

Mathematical Functions in JavaScript

• In addition to the simple arithmetic operations

(e.g. +, *, etc.) JavaScript supports several

advanced mathematical operations as well

• Notationaly, these functions are accessed by

referring to various methods of the Math object

(41)

(42)

Methods

sin( r ) cos( r ) tan( r ) asin( x ) acos( x ) atan( x )

atan2( x, y ) max( x, y ) min( x, y ) round( x ) floor( x ) ceil( x ) exp( x )

log( x ) abs( x ) sqrt( x )

(43)

sin(

r

)

,

cos(

r

)

,

tan(

r

)

Standard trigonometric functions

Returns the sine, cosine or tangent of ‘r’, where ‘r’ is specified in radians

EXAMPLE

(44)

asin(

x

)

,

acos(

x

)

,

atan(

x

)

Standard inverse-trigonometric functions

Returns the arcsine, arccosine or arctangent of ‘r’ in radians

EXAMPLE

(45)

Returns the square root of x

sqrt(

x

)

0.5  0.7071

Returns x

raised to the power y

pow(

x, y

)

2, 32 

(46)

Returns

Math.E raised to the power x

exp(

x

)

1  2.718281

Returns the the natural logarithm of x

log(

x

)

(47)

ceil(

x

)

Returns integer

nearest to x

Returns

largest integer that is less

than or equal to x

Returns smallest

integer that is greater than or equal to x

floor(

x

)

round(

x

)

1.1  1

12.5  13

1.1  1

12.5  12

1.1  2

(48)

Returns the

absolute value of x

abs(

x

)

(49)

random( )

Returns a randomly-selected, floating-point number between 0 and 1

EXAMPLE

document.write( Math.random( ) )

(50)

During Today’s Lecture …

• _{We looked at the concept of event-driven}

programs and event handlers

– _{What are they?}

– _{What do they do?}

– _{How do we benefit from them?}

• We wrote simple programs to demonstrate the