CIS101 Introduction to Computing

1
CIS101Introduction to Computing

• Week 10

2
Agenda

• Your questions
• Class presentations Your Mad Libs
• JavaScript Arithmetic and Events
• Lesson 03, 04, and 05
• This week online
• Next class

3
Your Mad Lib

• Students will demonstrate their Mad Lib for the
  class
• Access your Mad Lib from your Web space

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

• 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

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 , /
Addition, Subtraction , -
Assignment
13
The alert method

• The alert method is used to display a small pop
  up window
• See example on p. 3-5
• Syntax
• alert(message)

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
  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 ½baseheight)

16
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

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 for Hyperlinks

• onClick event handler responds when user clicks a
  hyperlink
• Example this code displays an alert message when
  the link is clicked
• lta href"" onClick "alert('This is what it
  does!')"gtClick this link!lt/agt

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
  same syntax as links
• ltformgtltinput type"button" value"Click Me"
  onClick"alert('You clicked a button')"gtlt/formgt

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
  this link)gtMouse Over Linklt/agt

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
  this link)gtMouse Out Eventlt/agt

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

39
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

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

• 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

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
• Upload your solution to your web space

44
This week online

• Readings
• Concepts, chapter 5, Input
• JavaScript 101Lesson 03, Lesson 04, Lesson 05
  
• This weeks quiz
• Concepts, chapter 5, Input

45
Next class meeting

• Bring your JavaScript book to class
• Continue with JavaScript