# CIS101 Introduction to Computing - PowerPoint PPT Presentation

Title:

## CIS101 Introduction to Computing

Description:

### 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 ... – PowerPoint PPT presentation

Number of Views:159
Avg rating:3.0/5.0
Slides: 46
Provided by: CathyD150
Category:
Tags:
Transcript and Presenter's Notes

Title: CIS101 Introduction to Computing

1
CIS101Introduction to Computing
• Week 10

2
Agenda
• JavaScript Arithmetic and Events
• Lesson 03, 04, and 05
• This week online
• Next class

3
• Students will demonstrate their Mad Lib for the
class

4
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

5
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

6
Arithmetic Operators(cont.)
• 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

7
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

8
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)

9
Expressions can combine arithmetic operators
• Expressions can also have more than one operator
• var length 5
• var width 6
• var perimeter
• perimeter length2 width 2
• Perimeter now has a value of 22

10
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

11
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

12
Operator Precedence Table

Type of Operator Example of Operators
Parentheses(Overrides others) ( )
Multiplication, Division , /
Assignment
13
• The alert method is used to display a small pop
up window
• See example on p. 3-5
• Syntax

14
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)

15
Student Modifications
• Change the first document.write statement to an
• 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 ½baseheight)

16
Student Modifications cont.
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

17
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)

18
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

19
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

20
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

21
How to convert strings to numbers
• Use these JavaScript methods
• The parseFloat() method
• The parseInt() method
• The eval() method

22
The parseFloat() Method
• Syntax
• var numberparseFloat(string1)
• parseFloat takes the value stored in string1 and
translates it to a decimal format and stores the
number in the variable number

23
The parseInt() Method
• Syntaxvar wholeNumberparseInt(string1)
• parseFloat takes the value stored in string1 and
translates it to a decimal format and stores the
number in the variable number

24
The eval() Method
• The eval() method evaluates a numeric expression
in the form of a string and returns its value
• Syntax
• var resulteval(string1)
• Where string1 is a numeric expression in string
format

25
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

26
Student Modifications
• Modify the code on p. 4-6 to prompt users to
enter the age of their dog, using parseFloat(),
convert the dogs 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

27
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

28
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

29
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

30
What are event handlers?
• Event handlers are the JavaScript code that
handles (responds) to an event
• Event handlers are pre-defined keywords in
JavaScript

31
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

32
• onClick event handler responds when user clicks a
• Example this code displays an alert message when
• lta href"" onClick "alert('This is what it

33
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
• ltformgtltinput type"button" value"Click Me"

34
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
• lta href onMouseOver alert(You are over

35
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
• lta href onMouseOut alert(You are now off

36
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
• lta href"" onMouseOver"window.status'over
first' return true"gtFirstlt/agt

37
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. 5-11 exactly as you see
it
• Click preview button to test each color

38
• 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

39
OnClick for buttons
• This example implements onClick event handler for
buttons
• Nearly identical syntax to onclick event handler
• onClick event handler responds when visitor
clicks button

40
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

41
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

42
Image Swap Example
• Open up a new html document and save it with the
name lesson0502.html
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

43
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

44
This week online