Transcript CIS101 week 10

CIS101
Introduction to Computing
Week 10
Agenda



Your questions
Class presentations: Your Mad Libs
JavaScript: Arithmetic and Events



Lesson 03, 04, and 05
This week online
Next class
Your Mad Lib


Students will demonstrate their Mad Lib
for the class
Access your Mad Lib from your Web
space
Lesson 03 Topics





Use the arithmetic operators +, -, *, / to solve
problems
Use the assignment operator(=) to give a numeric
value to a variable
How operator precedence controls the order in
which an expression is calculated
Use the alert method to display information
Use the Math object in calculations
Using Arithmetic Operators



Arithmetic operations in JavaScript are
carried out with arithmetic symbols
Same as math class (except
multiplication is * rather than x)
These symbols are called arithmetic
operators
Arithmetic Operators(cont.)

The addition operator +
A + B yields the sum of A plus B

The subtraction operator –
A - B yields the difference A minus B

The multiplication operator *
A * B yields the product A multiplied by B

The division operator /
A / B yields the dividend of A divided by B
Expressions



Expression is computer science term for
formula
Expression in JavaScript can combine
variables, numbers, and arithmetic operators
Example:
var num1 = 6;
var num2 = 3;
num1 * 2 is an expression that yields 12
num1/num2 is an expression that yields 2
Assignment Operator and
Expressions

Expressions used with the assignment
operator give a value to a variable
var length = 5;
var width = 6;
var area = length * width;
(area now has a value of 30)
Expressions can combine
arithmetic operators

Expressions can also have more
than one operator:
var length = 5;
var width = 6;
var perimeter;
perimeter = length*2 + width * 2;

Perimeter now has a value of 22
Multiple operators


The computer can only execute one
operation at a time
When an expression has more than
one operator, they have to be
carried out in order determined by
rule of mathematics known as
“operator precedence”
Operator precedence



The operator precedence rules
determine the order of evaluation
Next slide summarizes operator
precedence
Operations are carried out in order
from top to bottom
Operator Precedence Table
Type of Operator
Example of Operators
Parentheses
(Overrides others)
()
Multiplication, Division
*, /
Addition, Subtraction
+, -
Assignment
=
The alert method



The alert method is used to display a
small pop up window
See example on p. 3-5
Syntax:
alert(“message”);
In the lab




This lab uses arithmetic operators and alert
statement
Create a new HTML document using 1st Page
2000 named lesson0301.html
Enter the code on p. 3-6 exactly as you see it
Add code to calculate perimeter and display
its value with alert statement (p. 3-8)
Student Modifications




Change the first document.write statement
to an alert statement
Add the following variables: base, height and
triangleArea
Use assignment operator to store values in
base and height
Calculate and display the area of a triangle
(formula is ½*base*height)
Student Modifications cont.





Add variables radius, circleArea,
circleCircumference
Use assignment operator to assign value to
radius
Calculate and display the area and
circumference of a circle using the Math.PI
Math.PI is a defined constant that is part of
Math object
Math.PI stores the value of PI
Lesson 04 Topics





Data types
String data versus numeric data
How input data (from the prompt method) is
stored as a string
Why you need to format input data for arithmetic
How to use built in JavaScript functions to format
input data for arithmetic (parseInt, parseFloat, and
eval)
Data Types



Data type is a category of information
used by a programming language
Identifies the type (kind) of information
a program can represent
JavaScript has three basic data types:



String
Numeric
Boolean
String data vs. numeric data



String data is used to input and output
information
Numeric data can carry out arithmetic
All information in a computer is stored using
just 0s and 1s


Inside the computer, strings and numbers use
different patterns to store information
Need to change a string pattern into a number
pattern before computer can execute arithmetic
String data versus Numeric
data


When the prompt method is used to
collect data from a Web page visitor,
information input is a string
Information in the form of a string must
be formatted as a number before it can
be used for arithmetic
How to convert strings to
numbers

Use these JavaScript methods



The parseFloat() method
The parseInt() method
The eval() method
The parseFloat() Method


Syntax:
var number=parseFloat(string1);
parseFloat takes the value stored in string1
and translates it to a decimal format and
stores the number in the variable number
The parseInt() Method


Syntax:
var wholeNumber=parseInt(string1):
parseFloat takes the value stored in
string1 and translates it to a decimal
format and stores the number in the
variable number
The eval() Method



The eval() method evaluates a numeric
expression in the form of a string and
returns its value
Syntax:
var result=eval(string1);
Where string1 is a numeric expression
in string format
In the lab




Use JavaScript methods to convert user input
from string format to numeric format and
then carry out arithmetic operations
Create a new HTML document using 1st Page
2000
Enter the code on p. 4-6 exactly as you see it
Click preview button to test out the code
Student Modifications

Modify the code on p. 4-6 to prompt users to
enter the age of their dog, using parseFloat(),
convert the dog’s age to human years using
the following formula
dogToHumanYears = ((dogAge-1) * 7) + 9

Do other conversions, from cat years (cats
live about 20 years) to human years. Look on
the internet for other possibilities
Lesson 05 Topics





Event driven programming
Events and event handlers
The onClick event handler for hyperlinks
The onClick event handler for buttons
(forms)
The mouse event handlers onMouseOver
and onMouseOut
Event Driven Programming


Event driven programs use events as
triggers for program execution
Use JavaScript to create event driven
Web Pages


User actions determine the course of code
execution
Behavior and appearance of event driven
Web page influenced by user
What are events?


Events are actions taken by the user
Examples:






Clicking a button
Clicking a check box
Entering text into a text field
Moving the mouse pointer over a hyperlink
Changing the contents of a text box
Entering or leaving a text box
What are event handlers?


Event handlers are the JavaScript code
that handles (responds) to an event
Event handlers are pre-defined
keywords in JavaScript
Event Handlers (cont.)



An event handler is a special attribute
associated with hyperlinks, buttons and other
elements of a web page
Events handlers always begin with on
Examples are:



onClick – responds to single mouse click
onMouseOver – responds when mouse arrow
moves over a Web page element such as a link or
button
onMouseOut – responds when mouse arrow
moves off a Web page element
onClick Event Handler for
Hyperlinks


onClick event handler responds when
user clicks a hyperlink
Example: this code displays an alert
message when the link is clicked:

<a href="#" onClick = "alert('This is what it
does!');">Click this link!</a>
The onClick Event Handler for
Buttons



Buttons are elements of HTML forms
Create a button by including an an input tag
with type set to button inside a form tag
Buttons also have onClick event handlers with
the same syntax as links:

<form>
<input type="button" value="Click Me"
onClick="alert('You clicked a button');">
</form>
Mouse Event Handlers


The onMouseOver event handler is triggered
when the mouse is moved over a link
Syntax for onMouseOver:


onMouseOver = “JavaScript statement(s)”
Example:

<a href=”#” onMouseOver = “alert(‘You are over this
link’);”>Mouse Over Link</a>
Mouse Event Handlers (cont.)


The onMouseOut event handler is triggered
when the mouse is moved off a link
Syntax for onMouseOut:


onMouseOut = “JavaScript statement(s)”
Example:

<a href=”#” onMouseOut = “alert(‘You are now off this
link’);”>Mouse Out Event</a>
Mouse Event and the Window
Status Bar



You can use onMouseOver event handler to
write a message in the window status bar
The window status bar is the thin grey bar at
the bottom of the browser window
An Example:

<a href="#" onMouseOver="window.status='over
first'; return true;">First</a>
In the lab



First example uses events to change the
background color of your Web
document
Create a new HTML document using 1st
Page 2000, then enter the code on p. 511 exactly as you see it
Click preview button to test each color
Now add these modifications

Add three more colors




You will need three more links and event handlers
See Appendix C for additional colors
Select six contrasting colors for the fgColor
property (color of text)
For all six links, insert a second statement
changing the fgColor property to the selected
contrasting color
OnClick for buttons



This example implements onClick event
handler for buttons
Nearly identical syntax to onclick event
handler for hyperlinks
onClick event handler responds when
visitor clicks button
OnClick button example




Save work from previous exercise
Start new html document named
lesson0502.html
Enter code on p. 5-13
Modification: add another button and
use its onClick event hander to display a
different message
Swapping Images




Common JavaScript trick swaps images when
a mouse arrow passes over a link or an image
When mouse arrow goes over an image the
picture changes
Need to first create a hyperlink using an
image
This is needed because mouse events are not
defined for images, are only defined for links
and buttons
Image Swap Example




Save your earlier work
Open up a new html document and save it with the
name lesson0502.html
Download zipped file js101images.zip from my web
site (http://csis.pace.edu/~dwyer)
Unzip these files




blueArrow.gif
redArrow.gif
Enter the code on p. 5-14 exactly as you see it
Modification: find two other images on the internet,
copy them into your code folder, and change the
code to swap the two new images instead
JavaScript Homework

Select one of the following exercises:




Exercise 3_1, 3_2, 3_3, 3_4 or
Exercise 5_1, 5_2, 5_3, 5_4
Hand in printout of your HTML
document
Upload your solution to your web space
This week online

Readings



Concepts, chapter 5, “Input”
JavaScript 101
Lesson 03, Lesson 04, Lesson 05
This week’s quiz

Concepts, chapter 5, “Input”
Next class meeting


Bring your JavaScript book to class
Continue with JavaScript