Advanced Web Design: AD650

COURSE CALENDAR | WEEK 09 CLASS OUTLINE | HOMEWORK |

  1. AD650 Learning Forum: New Technique presentation
  2. Finish Midterm Project Critique
  3. Browser Cam introduction and user set up.
  4. XTHML, CSS and JavaScript (the Behavior Layer)
  5. Introduction to Javascript (from the DOM Scripting book):
    • JavaScript Defined
      JavaScript is a scripting language that's used to add interactivity and dynamic behaviors to web pages and applications. JavaScript can interact with other components of a web page, such as HTML and CSS, to make them change in real time, or respond to user events.... more.
    • A Brief History of JavaScript
      JavaScript fist appeared in 1995 in Netscape 2. IE quickly released it's own version called VBScript in IE3. A standard was created by the European Computer Manufacturers Association (ECMA) called ECMA script. DHTML became a popular and then dirty buzzword as the browser wars were fought in the late 1990's and as each browser used it's own Document Object Model. DOM Scripting is the correct term for describing the interaction of XHTML, CSS and Javascript.
    • The DOM
      The Document Object Model is an API (Application Programming Interface). It is an agreed upon standard that makes it possible for programs and scripts to dynamically access and update documents on the web. The W3C created a DOM that could be used by many different programming languages. Real world examples are Morse Code, Time Zones, the Periodic Table of Elements.
  6. JavaScript Syntax (the structural rules of a language)
    1. Statements: A series of instructions (diagram)
    2. Comments: Like HTML comments, they are used to keep track what's happening in your script. (diagram)
    3. Keywords: Predefined terms, like var or Array
    4. Variables: Things that are subject to change, like mood and age. (diagram)
      • Parts of a Variable (diagram)
      • Variable names are case sensitive and can't contain spaces or puncuation.
      • Assignment: Giving value to a variable, like happy or 25
      • Contains: When an assignment has been given, the variable mood "contains" the value happy.
      • Declare: Before assignment values to a variable the variable should be introduced or "declared".
      • Literal: Something that is literally written out in Javascript code, like "happy".
      • Scalars: A variable that can only have one value at a time, like Strings, Numbers and Boolean Values
      • Data Types
      • Data Types: Strings
        • Strings consist of 0 or more characters and must be enclosed in either single or double quotes.
        • Escaping is used when a quote is used as part of a the string. The backslash character is used.
      • Data Types: Numbers
        • Floating-point numbers (decimals) and negative numbers can be used.
      • Data Types: Boolean Values
        • Boolean data has only two possible values: true or false
      • Arrays: A grouping of multiple values under the same name, for example you can have a variable called Beatles that contains all four band members. (diagram)
        • An Element is a one of the values in an array.
        • The Length is the number of elements that you want the array to contain.
        • Populating is adding elements to an array.
        • The Index is where you specify the order of the array.
        • Numeric Array has an incremental number index starting from 0
        • Associative Array uses a string instead of a number for its index.

Homework| Week 9

  1. DOM Scripting Prep
    • Read through Chapter 1 and 2 from the DOM Scripting book to get an understanding of the Javascript basics.
  2. Preparing your XHTML files
    • If you haven't already done so, create a XHTML template page for each level of your site, with properly structured, semantically correct XHTML. Create the CSS for each main division. You can refer to this tutorial if you need help getting started. Test in Browser Cam along the way.
  3. Midterm Practical Exam