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 = length*2 + 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

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 ½*base*height)

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

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

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

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

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: • <a href="#" onClick = "alert('This is what it does!');">Click this link!</a>

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: • <form><input type="button" value="Click Me" onClick="alert('You clicked a button');"></form>

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: • <a href=”#” onMouseOver = “alert(‘You are over this link’);”>Mouse Over Link</a>

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: • <a href=”#” onMouseOut = “alert(‘You are now off this link’);”>Mouse Out Event</a>

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: • <a href="#" onMouseOver="window.status='over first'; return true;">First</a>

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 week’s quiz • Concepts, chapter 5, “Input”

45. Next class meeting • Bring your JavaScript book to class • Continue with JavaScript