CIS101 Introduction to Computing - PowerPoint PPT Presentation

About This 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:134
Avg rating:3.0/5.0
Slides: 46
Provided by: CathyD150
Learn more at: http://csis.pace.edu
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com