Jump to content

JavaScript Programming/Events

Add links
From Wikiversity
JavaScript Programming
  1. Introduction
  2. Variables and Expressions
  3. Functions
  4. Events
  5. Conditions
  6. While Loops
  7. For Loops
  8. Arrays
  9. Date and Time
  10. Objects
  11. DOM and BOM
  12. Dynamic HTML
  13. Forms and Security
  14. AJAX and JSON
  15. Libraries and Frameworks
  16. Node.js REST API
Download Learning Guide

This lesson introduces JavaScript events.

Objectives and Skills

Objectives and skills for this lesson include:[1]

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

Readings

  1. Wikipedia: Event (computing)
  2. Event Reference MDN
  3. W3School: Global Event Attribytes
  4. HTML Event Attributes & Assign Events

Multimedia

  1. YouTube: JavaScript Tutorial for Beginners - 26 - getElementById method
  2. YouTube: JavaScript Tutorial for Beginners - 27 - getElementsByTagName method
  3. YouTube: JavaScript Tutorial for Beginners - 29 - getElementsByClassName
  4. YouTube: JavaScript Tutorial for Beginners - 30 - Replace content using innerHTML
  5. YouTube: JavaScript Tutorial for Beginners - 31 - Reading content using innerHTML
  6. YouTube: JavaScript Tutorial for Beginners - 32 - Changing an image
  7. YouTube: JavaScript Tutorial for Beginners - 33 - Intro to events
  8. YouTube: JavaScript Tutorial for Beginners - 34 - The mouseover event
  9. YouTube: JavaScript Tutorial for Beginners - 35 - Change image with mouseover
  10. YouTube: JavaScript Tutorial for Beginners - 49 - Follow up session
  11. YouTube: JavaScript Tutorial for Beginners - 50 - Confirmation box
  12. YouTube: What are JavaScript Events?

Examples

Activities

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 document.getElementById().innerText or document.getElementById().innerHTML 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, add 0.9999 and then convert the resulting value to an integer. Calculate the total cost of the paint as: gallons * price per gallon.[4]

Lesson Summary

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

Key Terms

DOM (Document Object Model)
The HTML DOM model is constructed as a tree of objects. The DOM defines a standard for accessing documents.[7]
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.[8]
event listener
It is attached to an element and fires a function when the event is detected on the element. [9]

See Also

https://idratherbewriting.com/events-and-listeners-javascript/

https://developer.mozilla.org/en-US/docs/Web/Events

References

  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. ↑ "JavaScript HTML DOM". www.w3schools.com. Retrieved 2019-09-15.
  8. ↑ https://www.w3schools.com/js/js_htmldom_events.asp
  9. ↑ https://www.w3schools.com/js/js_htmldom_eventlistener.asp
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Events&oldid=2060274"