Lecture 9a: Dynamic Pages and Scripting

What You Will Learn Today

1. Explain different types of dynamic pages, elements and content.
2. Use meta tags for dynamic and non-dynamic content.
3. Describe scripting languages, use script tags, and write and debug scripts.
4. Use properties and methods of a browser's objects, including windows and documents.

What is a Dynamic Page?

• Dynamic means active, changing or moving.
• Dynamic elements are used to attract attention and provide interactive feedback.
• Many elements and types of content can be called dynamic.

Types of Dynamic Content

• animation, audio and video files
• page transitions, automatic refresh and forwarding
• changing text (moving, scrolling, blinking, etc.)
• visual change (in text, images, colours, etc.) in response to user actions
• automatically generated HTML
• automatically generated data
• forms processing (validation, calculation)

Ways to Provide Dynamic Content

• animation, audio and video files
• certain HTML tags e.g. <blink>, <marquee>
• <meta> tags (in the HTML head section)
• title and alt attributes (to provide "tool tips" when the mouse moves over an element)
• plug-ins e.g. Flash
• Cascading Style Sheets; Dynamic HTML
• JavaScript, Visual Basic Script and other client-side scripting languages
• Java Server Pages, PHP, and other server-side scripting languages; server databases
• Java applets

Dynamic Meta Tags

• Create a page transition or filter (Microsoft Internet Explorer 4.0 only)
  • <meta http=equiv="Page-Enter" content="blendTrans(duration=1.0)">
• Automatically forward to another page after some seconds; useful when you have moved a page
  • <meta http-equiv="refresh" content="5;URL=http://home.umu.ac.ug/">

Other (Non-Dynamic) Meta Tags

• Identify the author of a page
  • <meta name="author" content="Firstname Lastname">
• Specify the page creation date
  • <meta name="date" content="2003-11-04">
• Specify keywords for search engines
  • <meta name="keywords" content="Internet Technologies, Web Authoring">
• Provide a description of the page for search engines
  • <meta name="description" content="Overview of dynamic content and scripting languages.">
• Specify the character set (for the document's language, e.g. Arabic, Chinese, Unicode)
  • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
• Indicate that the page and its links should not be indexed by search engines
  • <meta name="robots" content="noindex,nofollow">

Scripting Languages

• Client-side scripting languages provide flexibility, interactivity and immediate response without increasing server load.
• Scripting may reduce the accessibility of your page. Scripts are often ignored by search engines.
• Visual Basic Script (VBScript) was designed by Microsoft for Internet Explorer.
  • VBScript syntax is similar to Visual Basic syntax.
• JavaScript was designed by Netscape for Netscape Navigator.
  • JavaScript is supported by most browsers including Internet Explorer.
  • JavaScript syntax is similar to Java syntax.
• DHTML is a combination of CSS and a client-side scripting language to produce dynamic effects.

Script Tags

• Scripts should specify the scripting language using the type attribute.
  • (The language attribute is deprecated and should be avoided.)
  • <script type="text/javascript"></script>
• An HTML comment hides script code from some very old browsers that do not recognize the script tag.
  • <script type="text/javascript"><!-- code goes here //--></script>
• Script code can be put in a separate file with a .js extension.
  • Many HTML documents can use the same script file.
  • <script type="text/javascript" src="filename.js"></script>
• Scripts can be executed when the document is loaded or when an event occurs.
• Scripts in the head of the document are loaded when the document loads.
  • They are useful for defining functions that will be used in the body.
• Scripts in the body can generate HTML code that becomes part of the document.
  • <script type="text/javascript">
document.writeln("<p>URL:" + document.URL + "</p>");
document.writeln("<p>Last modified:" + document.lastModified + "</p>");
</script>
• Scripts within elements can be activated when an event occurs, e.g. when a page loads or a button or link is clicked.
  • <body onLoad="javascript:alert('Welcome!')">
  • <input type="button" onClick="javascript:alert('You clicked.')">
  • <a href="javascript:alert('You clicked.')">Click here.</a>
• For accessibility, provide a <noscript> tag for browsers which have disabled JavaScript.

Writing and Debugging Scripts

• You can use many concepts you may have learned in another programming language like C or Java.
• JavaScript is case sensitive. Unlike Java, JavaScript object names are generally all lowercase.
• Extra spaces are allowed (except e.g. in a variable name or before or after a dot).
• Make sure you have matching pairs when using parentheses ( ), bracksts [ ], braces { }, and quotes " ".
• When embedding quotes, put single quotes inside double quotes or vice-versa, or use a backslash before the quote.
• Always test in more than one browser in case you have used browser-dependent code.
• Most browsers come with a JavaScript console and/or debugging window.
  • In Mozilla, click the Tools menu and go to Web Development.
  • Usually the line number of the error will be indicated.
  • You can view multiple errors, often by scrolling.
  • Often if you fix the first error several others will also be fixed.

Objects

• Each part of the browser window is treated as a unit called an object.
  • Each object has properties (similar to HTML attributes) which include size, location and type.
  • Each object has methods (like functions in many programming languages) which are actions the object can perform.
• Objects are organized in a hierarchy, with documents at the root level and descendants as properties.
• To refer to an object's properties and methods, separate names with a dot.
  • document.forms[0].elements[0] refers to the first element in the first form of the document.

Browser Objects

• window: the top level window, or a frame window.
  • window descendants include frame, location, history and document.
• frame: a frame within the window.
  • The frameset window is named top. Other frames are named using the name attribute or frames array.
• location: the current URL.
  • location.reload() reloads the current page.
• history: the list of URLs previously loaded by the browser.
  • history.back() loads the previous page (equivalent to clicking the Back button).
  • history.forward() loads the page before the user clicked Back.
  • history.go(number) goes a number of pages back (negative) or forward (positive), or reloads (0).
• document: the current page.
  • document descendants (arrays of objects) include links, images, applets and forms.

Properties and Methods of Windows

• location: the URL of the document
• status: text of the message in the status bar
• open(URL,name,controls) opens a window with specified content, name, size, and navigation controls.
• close() closes the window.
• alert(message) shows an informational message.
• confirm(message) displays a confirm dialog box. If the user clicks OK it returns true, if Cancel, false.
• prompt(message, default_text) prompts the user for information; you can store the result in a variable.

Properties and Methods of Documents

• fgColor, bgColor, linkColor, alinkColor, vlinkColor: the body colors (foreground, background, and links)
• title: the document title (cannot be changed by a script)
• URL: the URL of the document (if changed, a new page will be loaded instead)
• referrer: the URL of the last visited document
• lastModified: the date the document was last modified
• write(string): write text and HTML tags into the current document
• writeln(string): like write() but adds a new line

To Do After Class

• The final project design specification and Lab 8 are due Friday. Project 4 and Lab 9 are due next Friday.
• References: Reding & Vodnik Unit H-I, Carey ch. 8-9, Musciano & Kennedy ch. 12-13, McFedries ch. 16-17, Hofstetter pp. 162-165
• Electronic References: my JavaScript examples, JavaScript 1.3 Guide, JavaScript 1.3 Reference, HTML 4.0 ch. 18