The web pages we've created up to this point have been static web pages, meaning that nothing on the page changes. You only see different content by loading different web pages. Moreover, everyone looking at that page sees exactly the same thing. All but the most basic sites these days have dynamic content, which means that user interactions can cause changes to the current page, or that websites have pages that look different to different users. Fancy websites like Google Maps are built around the idea of dynamic web content. To the right is an example of a simple piece of dynamic content. Click on the +'s and -'s and see what happens. Note that the URL never changes.
Dynamic content is only possible if user interactions (or sometimes other factors, like a timer going off) can cause some snippet of code to execute. The only question is whether that snippet of code executes on the client machine (meaning in the web browser) or on the server; i.e. do we have client-side scripting or server-side scripting. This is actually a simple question, but the consequences are important.
document. A script can write HTML code directly into the DOM using the function
document.write( ... ). The position of the script in the HTML file determines where the new HTML code appears, in that what you output simply replaces the
|ex0.html (see how this page is rendered)||ex1.html (see how this page is rendered)|
|Short program, long web page!||Remember, document.write(...) allows us to insert arbitrary HTML code! So this time we've added formatting.|
|ex2.html||Gets rendered as ...|
|fish, fish, red , blue .|
ex.jssimply contains the line
srcproperty doesn't have to come from the same site as the web page that's using it. You could have a site here at www.usna.edu that references a script from www.usma.edu, like this:
document.location. This variable holds the URL for the current page. So, enter
alert(document.location);into the interpreter field to the right and press enter. You should see an alert box pop up displaying the URL for this page. Setting the variable
document.locationto a new string value (it should be a URL!) causes the browser to load that page. So, try entering the following in the interpreter field to the right and press enter:
document.location = "http://www.usma.edu";If you did as I asked, thanks for coming back! One simple use of the behavior for setting
document.locationis redirection. If you're moving an important page from one URL to another, you can set up a blank page at the old URL that does nothing but immediately send the viewer to the new URL. Here's an example:
|ex3.html (see how this page is rendered)|
Okay, clearly the graduation clock should actually count down, so here's another version:Whenever you refresh the page, the two clocks will briefly be in sync.
Pretty much any e-mail client allows attachments, and you are
free to attach an HTML file to an e-mail. If the recipient
opens the attachment, it will be rendered by the recipient's
browser, and the browser almost certainly will execute
as an attachment an HTML file that does the
trick to redirect the recipient to a page of our choosing.
As long as the recipient opens the attachment, we can send him
to any page we like — automatically.
<IMG src="http://rona.academy.usna.edu/~sy110/f18.png">I can go check on rona's web server logs for GET requests of
/~sy110/f18.pngand find out exactly when that image was accessed ... i.e. exactly when my e-mails were opened. If I can match IP Addresses to hosts and hosts to users (there's services for that) I'll know exactly who opened my e-mail, and when they opened it. For this reason, many e-mail clients refuse to open remote images embedded in e-mails.