LD06: JS Regex's and the DOM due Thu 02 Oct 13:20

Preparation for Lab Day

NOTE: The upcoming lab day is longer than most. If you don't complete all the steps before the end of lab time, you'll still credit credit for lab day. HOWEVER, you need to complete all remaining steps on your own (ASAP) since they will be needed in order to start on the homework assignment. Also, if you'd like to start the lab day early feel free to do so.

On Lab Day

1. NOTE: As you play around with regex's feel free to use https://regexr.com/ or https://regex101.com/ to help you construct and test your expressions. DO NOT look at solutions to these exercises from any source.
2. Make sure you don't have any uncommitted work in your workspace. Then pull from the upstream remote to get the new hw06 directory.
3. View the provided regex.html in your browser and verify that the existing Javascript code is running properly.
4. View the source of the page in your editor and decipher the regular expression used to match the IP number. Once you feel you understand how the existing code works, read and follow the instructions in the Javascript comment section to complete the IP number matching regex.
5. Modify your regex.html document by adding a new function called isValidPhoneNumber that will return true if the parameter passed to it is a valid phone number and will return false if it is not. Let's say a valid phone number fits one of these patterns: (xxx)xxx-xxxx, (xxx) xxx-xxxx, xxx-xxx-xxxx, or xxx-xxxx.

6. Write a testPhoneNumber() function and then call it with a variety of phone numbers.
7. Once you feel you have a good regex, find one or two other folks who are finishing this step at about the same time you are and have them look at your code and offer suggestions of patterns that may produce false positives or false negatives. Do the same for them.

8. Now move your attention to the clock.html file in hw06. Begin by viewing the page in the browser. Take note of the time and then refresh the page. The time should update.

9. Take time to view the code. Note the use of getElementById and innerHTML to manipulate the contents of the page with a dynamic value calculated by the Javascript program.

10. Put the three lines of Javascript code that get the time and display the time on the page into a separate function called displayTime.

11. Call the new displayTime method to verify it is working. Then, modify displayTime so that it updates the span tag with only the time portion of the date string. HINT: The Javascript const matches= str.match(regex) function can take a regular expression and will return matching segments in an array.

12. In the head of the document add CSS commands to style the time string so that it has a nice background, border, font, etc.

13. In the command sheet (https://josephus.sergeantservices.com/classes/all/javascriptcommandsheets/with.pdf, read briefly about the Javascript setInterval command and then use it to call your displayTime function once per second so it provides a running time.

14. Show your work to the instructor. If you finish early you can start work on the homework assignment.