JavaScript Programming/Date and Time

From Wikiversity
< JavaScript Programming
Revision as of 21:19, 16 March 2021 by Mareann (discuss | contribs) (→‎Examples: JavaScript Get Date Methods)
Jump to navigation Jump to search
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 objects using dates.

Objectives and Skills

Objectives and skills for this lesson include:[1]

  • Complete and debug code that uses objects
    • Properties; methods; instantiation; Date object; retrieve date and time parts; localize date format (MM/DD vs DD/MM); add and subtract dates

Readings

  1. Wikibooks: JavaScript/Dates

Multimedia

  1. YouTube: Date Objects
  2. YouTube: Display and Change the Time And Date With JavaScript
  3. YouTube: Date methods in JavaScript
  4. YouTube: Displaying the Current/Live Date & Time on a Web Page

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, add buttons and respond to click events, or set a timer interval and respond to interval 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 web page to display the current date and time. Rather than displaying the date and time as a single string, use output elements and Date methods to separately display the year, month, day, hour, minute, and second. Set a timer interval so the current time updates automatically every second.
  2. Create a web page with a date picker (input type="date"). When a user selects a date, use output elements to separately display the selected month, day, and year. Be sure to account for UTC/time zone when displaying the selected date.
  3. Create a web page with a date picker (input type="date"). Add number fields (input type="number") that allow the user to add years, months, and days to the selected date. Limit additional months to 0-11. Limit additional days to 0-30. As the number fields change, use an output element to display the result of adding the given years, months, and days to the selected date.
  4. Create a web page with two date pickers (input type="date"). When a user selects both dates, use output elements to display the number of years, months, and days between the two dates.
  5. Use JavaScript Date.now() and loops to time two different ways to implement the same thing. For example, is it faster to use a local variable or update an HTML element on each loop iteration?

Lesson Summary

  • The Date object is used to work with dates and times.[2]
  • By default, JavaScript will use the browser's time zone and display a date as a full-text string.[3]
  • Date objects are created with the new Date() constructor, which can take parameters: year, month, day, hours, minutes, seconds, milliseconds.[3]
  • JavaScript stores dates as the number of milliseconds since Unix Epoch (January 01, 1970, 00:00:00 UTC).[3]
  • The JavaScript Date object has a list of get methods that can be used to get date's infomation such as day, hours, minutes, etc.[4]
  • The JavaScript Date object also has a list of set methods that can be used to set date's information in a Date object.[5]

Key Terms

epoch Time
Epoch time or Unix time is a way to track time as a running total of seconds. This count starts at the Unix Epoch on January 1st, 1970 at UTC. Therefore, the Unix time stamp is merely the number of seconds between a particular date and the Unix Epoch.[6]
new date()
Returns a new Date object that represents the current date and time.[7]
prototype
Allows you to add properties and methods to an object.[8]
setInterval()
A method calls a function or evaluates an expression at specified intervals (in milliseconds).[9]
setTimeout()
A method calls a function or evaluates an expression after a specified number of milliseconds.[10]
UTC
The Universal Coordinated Time (UTC) is the time set by the World Time Standard.[11]

See Also

References

  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ W3Schools: JavaScript Date Reference
  3. ↑ 3.0 3.1 3.2 W3Schoolsː JavaScript Date Objects
  4. ↑ W3Schools: JavaScript Date Methods
  5. ↑ W3Schools: JavaScript Date Methods
  6. ↑ Epoch & Unix Timestamp
  7. ↑ "Date JavaScript API". www.javascripture.com. Retrieved 2020-10-20.
  8. ↑ [1]
  9. ↑ [2]
  10. ↑ [3]
  11. ↑ W3Schools: Universal Coordinated Time
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Date_and_Time&oldid=2268096"