• intro to client-side scripting
• what is javascript?
• exercise
• document object model
• objects, properties, methods & events
• more exercises
• final homework exercise

• scripting languages are not application development languages: cannot write programs that are compiled and then executed
• usually designed specifically to interact with the user and certain events
• when an event occurs, the browser executes the related action
• when interpretation is done by the machine where the program is stored, scripts are said to be server-side applications
• when interpretation is done by the browser, scripts are said to be client-side applications
• browsers must have scripting enabled (most do)
  • can be turned off - advantage to server-side scripting
• code is executed asynchronously, i.e., as needed
  • no need for server response - advantage to client-side scripting
• may include additional calls to server or page reloads
• source code is easily visible throught the browser as it is typically embedded in HTML pages or linked to as external files

• object-oriented scripting language.
• used to work with the objects associated with a web page document — the window, the document, the elements such as forms, images, links, etc.
• originally developed by Netscape and called LiveScript
• netscape collaborated with Sun Microsystems on modifications to the language and it was renamed JavaScript
• JavaScript is NOT Java
• common uses:
  • display a message box
  • select list navigation
  • edit and validate form information
  • create a new window with a specified size and screen position
  • image Rollovers
  • status Messages
  • display Current Date
  • calculations
• implementation:
  • place Javascript code as part of an event attached to an XHTML element (inline)
  • place Javascript code between <script> tags (embedded)
  • place Javascript code in anexternal file (external)
• the script tag:

  <script language="JavaScript" type="text/javascript">
<!--
alert("Welcome to Our Site");
// -->
</script>


1. Create a new (X)HTML document in HomeSite.
2. Give your page a new title of "Javascript Alert".
3. Copy the code above into the body of your document.
4. Save the page and open it in a browser window (or use the browse tab in HomeSite).

• the document object model (DOM) is the collection of objects, properties and methods on a page
• the DOM defines every object and element on a web page
• its hierarchical structure can be used to access page elements and apply styles to page elements
• a portion of the DOM is shown below:

  

• JavaScipt consists of a system of objects, properties and methods
• objects are manipulated when events occur
• an object is a thing or entity:
  • browser window
  • submit button
  • web page document
• Three object categories:
  • Native objects - objects supplied by JavaScript such as String, Number, Array, Image, Date, Math, etc.
  • Host objects - objects supplied to JavaScript by the browser environment, such as window, document, forms, etc.
  • User-defined objects - defined by you, the programmer
• a property is a characteristic or attribute of an object:
  • the background color of a web page document.
    document.bgcolor
  • the date the web page file was last modified.
    document.lastmodified
  • the src file of an image object
    image1.src
• a method is an action (a verb):
  • writing text to a web page document
    document.write()
  • submitting a form
    form1.submit()
• Events are actions that the visitor to the web page can take such as
• clicking (onclick),
• placing the mouse on an element (onmouseover),
• removing the mouse from an element (onmouseout),
• loading the page (onload),
• unloading the page (onunload), etc.
• JavaScript can be configured to perform actions when these and other events occur.
• The JavaScript code is added directly to the XHTML tag with the type of event as an attribute.
• The value of the event attribute will contain one or more JavaScript statements.
• Example:

  <a href="home.htm" onmouseover="alert('Click to go home')">Home</a>

1. Complete the hands-on practice on pages 541 (14.2), 544 (14.3) and 546 (14.4) of the text.
2. Download the week10 folder from the signalflare server.
3. Your instructor will walk you through the creation of two custom JavaScripts:
   1. Exercise one: creating rollover effects with images
   2. Exercise two: simple dropdown navigation menu

Complete Numbers 2, 3 and 4 in the Hands-On Exercises at the end of Chapter 14 in Web Development & Design Foundations. The exercises are on page 568-569.

Note: you can create several pages or put the scripts all on one page. Please upload the finished files to your web space and email your instructor with their location.

Exercise due in class in week eleven.