Mathematical Methods - Introduction to Computing - Lecture Slides, Slides of Introduction to Computing

Download Mathematical Methods - Introduction to Computing - Lecture Slides and more Slides Introduction to Computing in PDF only on Docsity!

CS101 Introduction to Computing

Lecture 35

Mathematical Methods

(Web Development Lecture 12)

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

Event Driven Programs

• Programs that can capture and respond to events are called ‘event-driven programs’
• JavaScript was specifically designed for writing such programs

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

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

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

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

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

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

But first, let’s plot the sine function…

Let’s first take a look at the plot, and then we will discuss how to draw it

Sine Function Plot

(^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( "sin(x)" ) ;

for( rowN = ht; rowN >= -ht; rowN = rowN - 1 ) { plotRow( rowN, ht, wd ) ; } } (^20)