JavaScript Events and Event Handlers

• An event is an action that occurs within a Web browser or Web document.

• An event handler is a statement that tells browsers what code to run in response to the specified event.

• To insert an event handler as an HTML attribute, use the HTML code:

<element onevent = “script”>• Example:

JavaScript Events

Two Important JavaScript Objects

• The Date object contain information about a specified date and time.

• The Math object is an object that can be used for performing mathematical tasks and storing mathematical values.

Creating a Date Object

• To store a date and time in a variable, use the JavaScript command

variable = new Date("month day, year hours:minutes:seconds");

where variable is the name of the variable that contains the date object, and month, day, year, hours (24-hour clock), minutes, and seconds indicate the date and time to be stored in the object.

• To create a date object containing the current date and time, use the constructor:

variable = new Date();

Get and Set Date Methods

• Date methods can be used to get information from a date object or to set a date object’s values

The Set Date Methods

Math Methods

• Math methods are functions used for performing advanced calculations and mathematical operations such as:

Constants in the Math Object

• The Math object also stores numeric values for mathematical constants:

Operators in JavaScript

• An operator is a symbol used to act upon an item or a variable within a JavaScript expression.

• The variables or expressions that operators act upon are called operands.

• Types of operators:– Arithmetic - Logical– Assignment - Conditional– Comparison

Binary Arithmetic Operators

Some Other Arithmetic Operators

• Increment operator: increases the value of the operand by 1. Example: x++;

• Decrement operator: decreases the value of the operand by 1. Example: x--;

• Negation operator: changes the sign of an item’s value

Example: -x

Assignment Operators

Comparison Operators

Logical Operators

• Logical operators allow you to connect several expressions together.

Conditional Operators

• A conditional operator performs a comparison test and assigns one value if the condition is true and another value if the condition is false.

Example:

var ampm = (hour < 12) “AM” : “PM” ;

A Complete Example: Putting It All Together

Let’s create a web page that simulates rolling a pair of dice.

1. Display a button on the screen.

2. When the user presses the button (an event), use the Math object to generate a random number between 1 and 6. Do this twice.

3. Display the value of the dice roll in an alert popup on the web page.

Save this file! We’ll be adding more to the web page next week.