Although more complex in nature than our previous application, this example will still be relatively simple. However it is good practice to separate the various elements of our project so that the logic and the display do not get unnecessarily mixed together. To help keep things separate, we will create the following files:
index.php This is our main display file, containing mostly HTML.
functions.php A helper file, used to retrieve SQL information.
stylesheet.css Stylesheet for our document, controls visual layout.
Again, many of these files could be combined, but by separating them we are making our code easier to maintain and expand later. Let’s take a closer look now at each of the files.
// create new script element and set its relative URL
// attach (load) script element to document head
// update hint box value
// clear interval (if one has been set) & update hint box value
// set new interval
Each function is relatively simple, and probably self-explanatory with the help of the inline commenting. However, let’s take a brief look at each to make sure there is no confusion.
The ‘display_hint’ function receives as a parameter a simple string of text. It then appends to that string the text “Status: ”, and updates our ‘hint box’ to display the resulting string. This function acts as a helper for ‘reset_hint’ and ‘show_hint’, which we will now look at.
The ‘reset_hint’ function does two things. First it clears any interval that may be set for our ‘hint box’, then it updates the status text to show “Ready” using our helper function, ‘display_hint’.
The ‘show_hint’ function acts in much the same way as the ‘reset_hint’ function does. First it clears any pre-existing interval, then it updates the ‘hint box’ display value using our helper function, ‘display_hint’. The only exception is that ‘show_hint’ displays the text it receives as a parameter, instead of displaying a default value.
Lastly, the ‘set_timeout’ function simply creates an interval, and attaches it to our ‘hint box’. This interval then waits for approximately two seconds to elapse before calling the ‘reset_hint’ function to clear any rollover text and return to the default “Ready” message.
blog comments powered by Disqus