CIS101 Introduction to Computing Week 10 Spring 2004

Agenda Your questions Group Topics Meeting Use JavaScript to Make a Mad Lib This week online Next class

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 OperatorExample 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 1 st 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 1 st 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: Click this link!

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:

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: Mouse Over Link

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: Mouse Out Event

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

In the lab First example uses events to change the background color of your Web document Create a new HTML document using 1 st Page 2000, then enter the code on p 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 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 ( Unzip these files blueArrow.gif redArrow.gif Enter the code on p 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 Internet JavaScript Libraries contain thousands code examples you can copy and paste into your Web documents This assignment shows you how to find JavaScript examples and use them in a page yourself See Assignments, week 11

Homework cont. Find an interesting JavaScript example Copy and paste it into a Web documents Upload the document and any required files (i.e. images) to your Web space You will demo your example in class next week

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