In preparation for lab day go through the 56 mini-lessons of the Regex 101
tutorial found here: https://regexlearn.com/learn. When you reach the
final “congratulations” screen, take a screenshot and attach it to the lab day
assignment in Canvas.
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.
- 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.
- In your repository create a directory named hw06 and work in it.
- Copy the document https://josephus.hsutx.edu/classes/w1/source/regex.html
into hw06.
- Visit the page and verify that the Javascript code is running properly.
- 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.
- 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.
- Write a testPhoneNumber() function and then call it with a variety
of phone numbers.
- 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.
- Copy the document https://josephus.hsutx.edu/classes/w1/source/clock.html
into hw06.
- 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.
- Put the three lines of Javascript code that get the time and display
the time on the page into a separate function called displayTime.
- 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.
- In the head of the document add CSS commands to style the time string so that
it has a nice background, border, font, etc.
- 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.
- Show your work to the instructor. If you finish early you can start
work on the homework assignment.