For example, in the code below, we have added the creation of a new Date object (dateNow) to web page. Then, in the body of the page, we can extract and print our date information. (To keep the example simple, we have purposely placed nothing else on the web page, and limited the formatting to a bare minimum!)
If you use this code on your web page, you are likely to notice two things:
For the second problem, we will need to check the value and prepend a "0", if needed (if the value is <10). To accomplish this, we will need to utilize two simple 'if' statements as well as introduce two additional temporary variables.
Both of these solutions are reflected in the code below and are followed by a screen capture of the resulting page.
Next, we will make the page a tad more complex. If we would like to update the time, we currently have to reload the page. However, by inserting a form and a function that recalculates and displays the time, we can have the function update the clock's time.
To accomplish this, we will add the form, our text in the form, and a text field to display the clock's time. We will also add the updateForm function to recalculate and update the results. Finally, we will add a timer to make it all happen. The source code is listed below.
Pay particular attention to the form (named timeForm), text field (named timeField). They become important in the updateForm function. Once the page loads and the form is displayed, we set a timer (the setTimeout call) to call our function updateForm after 1000 milliseconds (1 second).
Then, after 1 second, the updateForm function is called. Within the body of the function, a new Date object is created, the appropriate values obtained and then formatted using a few extra temporary variables (minvalue and secvalue). Next, the form updates the value of the timeField in the timeForm, which updates what is displayed to the user (thereby updating the clock). Before the function is done, we reset the timer (call setTimeout again) so that the form is updated in another second.
One last thing to point out with this example is that we only change the hours, minutes, and seconds in the updateForm function. If you watch the form for a long enough time you will notice that the day, month, or year do not change! This is not a bug, it was done by design (to keep the example simple, and to lead you to Lab Activity #2)!
Let's say we have a form that asks the user to enter his or her name and email address. Before storing this information on our server (so that we can send them spam email later, for example), we wish to ensure that:
Now that we have our form. We'll want to create a function that checks the values of both fields in the forms when the user hits the "Submit results" button. Essentially this function will display an alert window if it finds an error.
Next, we check the length of the namevalue temporary variable. This variable currently holds the contents of the form's textfield named 'username'. If the length of the value is <1 character long, then we know it was not filled in and left blank. If this is the case, we present the user with an alert message and set our valid flag to false.
We next examine the emailvalue variable's length (to see if it is blank) and if it contains an at-symbol. To check for the symbol, we will use the indexOf method and pass it the at-symbol character. If the symbol is not present in the variable emailvalue, then the method will return a -1 value to us. So, if either the length is less than 1 character, or if the value does not contain the at-symbol, we present an alert to the user and set the flag.
Finally, as the function finishes, we return the value of the valid variable. How we tie it all together is the subject of the next bit of code...
We will add the onSubmit attribute to the form tag in our web page. The onSubmit attribute will call the specified function (checkForm) and obtain the result returned by the function. If the value is 'false', the form will not be submitted. If the value is anything else, the form will then be submitted to the server for processing.
Thus, our final result looks like the following:
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis.