1 / 16

JavaScript Events and Event Handlers

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:

gafna
Download Presentation

JavaScript Events and Event Handlers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 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:

  2. JavaScript Events

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

  4. 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();

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

  6. The Set Date Methods

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

  8. Constants in the Math Object The Math object also stores numeric values for mathematical constants:

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

  10. Binary Arithmetic Operators

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

  12. Assignment Operators

  13. Comparison Operators

  14. Logical Operators Logical operators allow you to connect several expressions together.

  15. 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: varampm = (hour < 12) “AM” : “PM” ;

  16. A Complete Example: Putting It All Together Let’s create a web page that simulates rolling a pair of dice. Display a button on the screen. When the user presses the button (an event), use the Math object to generate a random number between 1 and 6. Do this twice. 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.

More Related