Scribd
Upload
54 views47 pages

Cs101 Lec35.pps

This document discusses JavaScript event handling and mathematical methods. It provides an example of plotting a sine wave function using JavaScript's Math object. Key points covered include how event handlers work, common event types like onLoad and onClick, and mathematical methods like Math.sin(), Math.round(), Math.PI, and others.

Uploaded by

Shahbaz khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPS, PDF, TXT or read online on Scribd
54 views47 pages

Cs101 Lec35.pps

This document discusses JavaScript event handling and mathematical methods. It provides an example of plotting a sine wave function using JavaScript's Math object. Key points covered include how event handlers work, common event types like onLoad and onClick, and mathematical methods like Math.sin(), Math.round(), Math.PI, and others.

Uploaded by

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

CS101 Introduction to Computing

Lecture 35
Mathematical Methods
(Web Development Lecture 12)

1
During the last lecture we discussed
Event handling
• 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


capabilities of a few event handlers
2
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


clicking the mouse - or things that the system
itself does - like updating the clock. Today we
will exclusively focus on user-events
3
Event Driven Programs
• Programs that can capture and respond to
events are called ‘event-driven programs’

• JavaScript was specifically designed for writing


such programs

4
JavaScript’s 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


HTML code, and then directed to a JavaScript
function for an appropriate response 5
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
3. A string consisting of JavaScript statements
enclosed in double or single quotes

6
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
handling

7
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
– It allows the reuse of a function for multiple event
handlers

8
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


when a window loses focus or a form element
loses focus

9
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

10
A Note on Syntax (1)
• Mixed-case capitalization of event handlers
(e.g. onClick) is a convention (but not a
requirement) for JavaScript event handlers
defined in HTML code

11
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.
‘onclick’ or ‘onmouseover’

12
Today’s Goal
(Mathematical Methods)

• We will look at JavaScript’s Math object

• We will look at solutions for simple problems


using various methods of the Math object

13
But first, let’s plot the sine function…

14
Problems & Solutions
• JavaScript doesn’t support drawing of graphics

• However, crude graphics can be put together


with the help of various text characters or tables

• One cannot write a character at a random


location on the screen using JavaScript

• Instead, the graph has to be drawn from top to


bottom, one row at a time – just like when
regular text is written to a document 15
Let’s first take a look at the plot, and
then we will discuss how to draw it

16
17
So, all we want to do is plot the first
full-cycle of a sine function.

And - to make things interesting - we


would like to have control over the
height and width of the plot

18
<HTML>
<HEAD>
<TITLE>Sine Function Plot</TITLE>
<SCRIPT>
function plotSine( ) {
…
}
…
</SCRIPT>
</HEAD>
<BODY onLoad="plotSine( )">
</BODY>
</HTML> 19
function plotSine( ) {

var ht, wd, rowN ; // rowN is the row number


ht = 15 ; // height of the half cycle
wd = 90 ; // width of the plot

document.write(
"<H1 align = 'center'>sin(x)</H1>" ) ;

for( rowN = ht; rowN >= -ht; rowN = rowN - 1 ) {


plotRow( rowN, ht, wd ) ;
}
} 20
function plotRow( rowN, ht, wd ) {
var theta, rowE ; // rowE is the row element
var row = new Array( wd ) ;

for ( rowE=0; rowE <= wd; rowE = rowE + 1 ) {


theta = 2 * Math.PI * rowE / wd ;

if( rowN == Math.round(ht * Math.sin( theta )))


row[ rowE ] = "*" ;
else
row[ rowE ] = "&nbsp;" ;
}
writeRow ( row, wd ) ;
21
}
function writeRow( row, wd ) {

var rowE ;

document.write(
"<FONT face = 'courier' size = '-2'>" ) ;

for( rowE = 0; rowE <= wd; rowE = rowE + 1 ) {


document.write ( row[ rowE ] ) ;
}

document.write( "<BR></FONT>" ) ;
} 22
Drawing the x- and y-axes

23
function plotRow( rowN, ht, wd==) {0 )
if( rowE
var theta, rowE ; row[ rowE ] = "|" ;
var row = new Array(
elsewd ) ;
if( rowN == 0 )
for ( rowE=0; rowE <= wd; rowE = rowE + 1 ) {
row[ rowE ] = "-" ;
theta = 2 * Math.PI * else
rowE / wd ;

if( rowN == Math.round(ht * Math.sin( theta )))


row[ rowE ] = "*" ;
else
row[ rowE ] = "&nbsp;" ;
}
writeRow ( row, wd ) ;
24
}
25
That was a sine wave that we looked at.

How about a cosine?

Or a tangent?

Or, even, the natural logarithm?

26
Today We Have Seen 3 New Elements

• 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( )
– A method that gave us the sine of an angle

• All 3 belong to JavaScript’s Math object 27


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

• Moreover, this object also contains several


useful mathematical constants as its properties

• This object has no use, but of a placeholder


28
Properties
Math.PI
Note the
Math.E CAPITAL
Math.LN2 lettering
of all
Math.LN10 properties
Math.LOG2E
Math.LOG10E
Math.SQRT2
Math.SQRT1_2 29
Methods
sin( r ) sqrt( x ) round( x )
cos( r ) pow( x, y ) floor( x )
tan( r ) ceil( x )
asin( x ) exp( x )
acos( x ) log( x ) abs( x )
atan( x )
atan2( x, y ) max( x, y )
max( x, y )

random( )
30
sin( r ), cos( r ), tan( r )
Standard trigonometric functions

Returns the sine, cosine or tangent of ‘r’,


where ‘r’ is specified in radians

EXAMPLE
document.write( Math.cos( Math.PI / 4 ) )

0.7071067811865476
31
asin( x ), acos( x ), atan( x )
Standard inverse-trigonometric functions

Returns the arcsine, arccosine or arctangent of ‘r’


in radians

EXAMPLE
document.write( Math.asin( 1 ) )

1.5707963267948965
32
sqrt( x ) pow( x, y )
Returns the Returns x
square root of raised to the
x power y

0.5  0.7071 2, 32 
4294967296

33
exp( x ) log( x )
Returns Returns the
Math.E raised the natural
to the power x logarithm of x

1  2.718281 Math.E  1

34
round( x ) floor( x ) ceil( x )
Returns Returns Returns
integer largest integer smallest
nearest to x that is less integer that is
than or equal greater than
to x or equal to x
1.1  1 1.1  1 1.1  2
12.5  13 12.5  12 12.5  13
-13.9  -14 -13.9  -14 -13.9  -13
35
abs( x )
Returns the
absolute value
of x

1.1  1.1
-12.5  12.5
00
36
min( x, y ) max( x, y )
Returns the Returns the
smaller of x larger of x and
and y y

2, 4  2 2, 4  4
-12, -5  -12 -12, -5  -5

37
random( )
Returns a randomly-selected, floating-point
number between 0 and 1

EXAMPLE
document.write( Math.random( ) )

0.9601111965589273

38
random( ): Example

Design a Web page that displays the


result of the rolling of a 6-sided die on
user command

39
****

40
<HTML>
<HEAD>
<TITLE>Electronic Die</TITLE>
<SCRIPT>
function rollDie( ) { … }
</SCRIPT>
</HEAD>
<BODY>
<FORM … > … </FORM>
</BODY>
</HTML> 41
<FORM name="form1" method="post" action="">

<INPUT type="submit" name="Submit"


value="Roll Die" onMouseOver="rollDie( )">

<INPUT type="text" name="die" size="12">

</FORM>

42
function rollDie( ) { Asterisk

var dieN, dieDots, dots ;


dieDots = "* " ;

dieN = Math.round( 6 * Math.random( ) ) ;

for( dots = 2; dots <= dieN; dots = dots + 1 ) {


dieDots = dieDots + "* " ;
}
document.form1.die.value = dieDots ;
43
}
The program shown here has a flaw: It will
not come-up with all six numbers with a
uniform probability.

In fact, it is biased against 6’es & for 1’s

How? 44
Assignment #12
• Develop a Web page that displays an order
taking form
• It takes the number of items required for each
product, multiplies with the prices, sums them
up, adds the GST, and displays the total value
of the order
• Make sure to declare all variables that you use
in the main code as well as the functions

Further information on this assignment will be provide on


the CS101 Web site 45
During Today’s Lecture …
• We looked at the properties and methods of
JavaScript’s Math object

• We produced solutions for simple problems


using several methods of the Math object

46
Next (the 13 ) Web Dev Lecture:
th

String Manipulation
• To become familiar with a few methods used
for manipulating strings

• To become able to solve simple problems


involving strings

47

You might also like