• intro to client-side scripting
• what is javascript?
• hands-on practice (in class)
• document object model
• objects, properties, methods & events
• hands-on practice (in class)
• homework 5 (last homework)

• 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>


• Practice exercise 14.1 Alert Message Box starting p. 562 of text (7th ed.)

• 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 HTML 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>

Working with the DOM and Event Handlers

• practice exercise 14.2 DOM property, starting p. 566 of text (7th ed.)
• practice exercise 14.3 Event Handling, starting p. 568 of text (7th ed.)

Variables and Functions: Intro to programming concepts

• practice exercise 14.5 Input Prompt, starting p. 572 of text (7th ed.) [ variablewrite2.html file]
• practice exercise 14.6 Decision Making, starting p. 576 of text (7th ed.)
• practice exercise 14.7 Function, starting p. 579 of text (7th ed.)

Complete Numbers 3, 4 and 5 in the Hands-On Exercises at the end of Chapter 14 in Web Development & Design Foundations (7th ed.). The exercises are on page 605.

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