Wikiversity

JavaScript Programming/Events

< JavaScript Programming

This lesson introduces JavaScript events.

Objectives and Skills

edit

Objectives and skills for this lesson include:[1]

  • Identify and handle HTML events
    • onchange; onmouseover; onload; onclick; onmouseout; onkeydown

Readings

edit
  1. Wikipedia: Event (computing)
  2. Wikibooks: JavaScript/Event handling
  3. Wikibooks: JavaScript/W3C event handlers

Multimedia

edit
  1. YouTube: What are JavaScript Events?
  2. YouTube: JavaScript Tutorial for Beginners - 33 - Intro to events
  3. YouTube: JavaScript 2021 Tutorial 9 - Calling functions from events
  4. YouTube: JavaScript Tutorial for Beginners - 32 - Changing an image
  5. YouTube: JavaScript Tutorial for Beginners - 34 - The mouseover event
  6. YouTube: addEventListener() - Beau teaches JavaScript
  7. YouTube: JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?
  8. YouTube: A Complete Overview of JavaScript Events - All You Need To Know
  9. Simplilearn: Understand JavaScript Events with Examples

Examples

edit

Activities

edit

Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.

  1. Create a program to prompt the user for hours worked per week and rate per hour and then calculate and display their weekly, monthly, and annual gross pay (hours * rate). Base monthly and annual calculations on 12 months per year and 52 weeks per year.[2]
  2. Create a program that asks the user how old they are in years, and then calculate and display their approximate age in months, days, hours, and seconds. For example, a person 1 year old is 12 months old, 365 days old, etc.
  3. Review MathsIsFun: US Standard Lengths. Create a program that asks the user for a distance in miles, and then calculate and display the distance in yards, feet, and inches, or ask the user for a distance in miles, and then calculate and display the distance in kilometers, meters, and centimeters.
  4. Review MathsIsFun: Area of Plane Shapes. Create a program that asks the user for the dimensions of different shapes and then calculate and display the area of the shapes. Do not include shape choices. That will come later. For now, just include multiple shape calculations in sequence.
  5. Create a program that calculates the area of a room to determine the amount of floor covering required. The room is rectangular with the dimensions measured in feet with decimal fractions. The output needs to be in square yards. There are 3 linear feet to a yard.[3]
  6. Create a program that helps the user determine how much paint is required to paint a room and how much it will cost. Ask the user for the length, width, and height of a room, the price of a gallon of paint, and the number of square feet that a gallon of paint will cover. Calculate the total area of the four walls as 2 * length * height + 2 * width * height Calculate the number of gallons as: total area / square feet per gallon Note: You must round up to the next full gallon. To round up, use the Math.ceil function. Calculate the total cost of the paint as: gallons * price per gallon.[4]

Lesson Summary

edit
  • Events are actions or occurrences that happen in the system you are programming[5]
  • Events occur when the user clicks a button, presses a key on the keyboard, submits a form, resizes the window, etc. JavaScript can detect and react to such events by executing the code.[6]
  • Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires. [7]
  • For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.[8]
  • Event propagation is a way of defining the element order when an event occurs. If you have one element inside a second element, and the user clicks on the first element, which element's "click" event should be handled first?[9]
  • In bubbling the innermost element's event is handled first and then the outer.[10]
  • In capturing the outer most element's event is handled first and then the inner[11]
  • Data on events can include not only the type of event, but when it occurred and what caused it to occur. [12]

Key Terms

edit
DOM (Document Object Model)
The HTML DOM model is constructed as a tree of objects. The DOM defines a standard for accessing documents.[13]
event
A function can be called when an event occurs such as the user clicking on an element. Some other examples of events in JavaScript are mouseover, mouseout, input, and onload.[14]
event handler
An event that can be handled is something happening in a browser window, including a document loading, the user clicking a mouse button, the user pressing a key, and the browser screen changing size. When a function is assigned to handle an event type, that function is run when an event of the event type occurs. Examples include "onclick" and "onmouseover"[15]
event listener
It is attached to an element and fires a function when the event is detected on the element. [16]
onchange
An HTML element has been changed such as a user changing an input field value. (Sometimes still have to hit enter on keyboard to trigger.)[17]
onclick
An HTML event when the user clicks an HTML element.[18]
onkeydown
An HTML event when the user pushes a keyboard key.[19]
onload
The browser has finished loading the page.[19]
onmouseout
The user moves the mouse away from an HTML element.[17]
onmouseover
An HTML event when the user moves the mouse over an HTML element.[17]
Touch Event
A set of HTML events that occur when a user touches a touch-based device.[17]

See Also

edit

References

edit
  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ PythonLearn: Variables, expressions, and statements
  3. ↑ Wikibooks: Programming Fundamentals/Practice: Data and Operators
  4. ↑ Wikibooks: Programming Fundamentals/Practice: Data and Operators
  5. ↑ https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
  6. ↑ https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
  7. ↑ https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
  8. ↑ https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
  9. ↑ https://www.w3schools.com/js/js_htmldom_eventlistener.asp
  10. ↑ https://www.w3schools.com/js/js_htmldom_eventlistener.asp
  11. ↑ https://www.w3schools.com/js/js_htmldom_eventlistener.asp
  12. ↑ "Event (computing)". Wikipedia. 2021-01-12. https://en.wikipedia.org/w/index.php?title=Event_(computing)&oldid=999891699. 
  13. ↑ "JavaScript HTML DOM". www.w3schools.com. Retrieved 2019-09-15.
  14. ↑ https://www.w3schools.com/js/js_htmldom_events.asp
  15. ↑ "JavaScript/Event handling - Wikibooks, open books for an open world". en.wikibooks.org. Retrieved 2020-09-16.
  16. ↑ https://www.w3schools.com/js/js_htmldom_eventlistener.asp
  17. ↑ 17.0 17.1 17.2 17.3 "JavaScript Events". www.w3schools.com. Retrieved 2020-09-16.
  18. ↑ "JavaScript Events". www.w3schools.com. Retrieved 2020-09-16.
  19. ↑ 19.0 19.1 "JavaScript Events". www.w3schools.com. Retrieved 2020-09-16.
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Events&oldid=2611028"