JavaScript I

Report as inappropriate Your report has been received
Shared by: yurtgc548
Tags
Stats
views:: 7
posted:: 7/1/2012
language:: English
pages:: 45
Public Domain
Document Sample
							JavaScript I

ECT 270
Robin Burke
Outline
   JavaScript
      Programming
      Syntax
      Interacting with the browser
      Variables and data types
      Arrays
      Flow of control
      Function definitions
      Date object
   Homework #6
Why JavaScript?

   Web application round-trip expensive
       no way to do computation on the client side
       example: form validation
   Web pages static
       no way to allow users to interact with the
        page
       example: popup link menus
   What is needed
       client-side code
JavaScript
   Very little connection to Java
       marketing move by Netscape
   JavaScript is
       a scripting language
       for web clients
       interpreted
       untyped
   Dynamic HTML
       combination of JavaScript, CSS and DOM
       to create very flexible web page presentation
JavaScript history

 Introduced with Netscape 2.0
 MS copied with JScript

 In 1998, ECMAScript became a
  standard
     proprietary names still used
     ECMA sets minimum standards
JavaScript Programming

   Easy to work with
       edit page
       view in browser
       no compilation / linking / libraries / etc
   Easy to get in trouble
       easy to skip documentation, proper coding
        practices
   Headaches
       browser compatibility
       browser-version compatibility
Best Practices
   Naming
      lower/upper for variable names e.g. "upperRight".
   Documentation
        Documentation of each significant variable
        Sparse documentation within the body of a function (usually
         on the right side of expressions) so as not to interfere with
         understanding the flow of control
   Style
        Careful delineation of the start and end of functions
        Alignment of expressions so that differences between
         similar expressions can easily be spotted
   Embedded output
        Format HTML so it closely corresponds with the actual
         appearance of the output
   Goal = Understandable code
Our Practice: PDL

   Write PDL first as comments
     program design language
     what the program should do
     in "application" terms, not code terms
        • no variable names
        • no operators
   Integrate PDL with code as it is written
Example

   PDL
       add the right margin to the block offset to
        find the horizontal position of the block
   Program
       h = marginR + offset;
   PDL
       find the highest and lowest scores on exam
   Program
       ...
Our Practice:
Iterative Development
   Working ≠ Finished
   When the program works, ask
       how could it be improved?
       what are the vectors of change?
   Dimensions of improvement
       readability / organization
       compactness
       cleanliness
       modularity / flexibility
       efficiency
Our Practice: In-class coding

   Programming is an interactive activity
       hard to teach in lecture setting
   We'll program our examples together
Debugging JavaScript

   Browser settings
       Internet Options.../Advanced
         • Display a notification about every script
           error
         • Disable script debugging
JavaScript and HTML

   Identifying script sections
       <script> and </script>
   But some browser can't / don't
    process
       Problem
         • script becomes part of the page content
       Solution
         • enclose script in HTML comments
JavaScript skeleton
<html>
<head>
... HTML head content ...
<script language="JavaScript" type="text/javascript">
<!—
... code here executed on loading ...
//-->
</script>
</head>

<body>
... page content ...
<script language="JavaScript" type="text/javascript">
<!--
... code here executed during page rendering ...
//-->
</script>
... more page content ...
</body>

</html>
JavaScript execution model
   Interpreted
       Code is executed as read
   Outside of SCRIPT elements
       HTML output as usual
   Inside SCRIPT elements
       JavaScript evaluated
       May or may not result in output to the page
   At the end of the page
       JavaScript program terminates
       but code may still be resident
         • event handling
Basic syntax

 Familiar from Java
 Statement end  ;
       a = a + 1;
   Grouping statements  { }
       if foo { bar; }
   Comments  // and /* */
       // this is a comment
   Case-sensitive
Objects

   JavaScript uses objects
       dot syntax to access fields and methods
   Methods
       document.write ("foo");
       calls the method write on object
        document with argument "foo"
   Fields
       document.lastModified
       gets the date from the HTTP header
Interacting with the browser

   Built-in objects
   window
       methods and fields related to the browser
   document
       methods and fields related to a particular
        document displayed in the browser
   We can manipulate the browser and its
    contents programmatically
       dynamic HTML
window
   window.navigator
      an object describing the user's browser
        useful for code that depends on a particular browser version
        example: window.navigator.appName
   window.frames[]
        an array containing all of the frames in a framed document
        example: window.frame[0]
   window.status
        access to the contents of the status bar in the browser
        example: window.status
   window.history
        access to the browser's history list
        example: window.history.back()
window, cont'd
   opening new windows
   window.open
        creates a new browser window (pop-up)
        example: window.open ("www.cti.depaul.edu")
   window.alert()
        opens a dialog with a message
        example: window.alert ("The system has crashed.")
   window.confirm()
        opens a dialog that the user can OK or cancel
        returns true if OK
        example: window.confirm ("Proceed to erase hard disk?")
   window.prompt()
      opens a dialog that returns a value
        example:window.prompt("Enter user id:")
document
   document.images
       all the images in the document
       example: document.images[2]
   document.write / writeln
       methods for adding content to the document
       example: document.writeln ("foo");
   document.forms
       all the forms in the document
   document.all
       all the HTML elements in the document
Elements

   We have access to the HTML
    elements in the document
     change attributes
     change contents
Examples

   Hello, world
     write text to the page
     write HTML to the page
   Browser info
       write browser appName and version
        to the page
   Pop-up
       use the alert and open methods
Variables and data types
   JavaScript data types
      numeric
      string
      boolean
      object reference
        • like in Java
      ignore book viz. "null"
   Remember
      JavaScript is untyped
      no type declarations
      you have to keep track of what is stored where
Declaration

   Variables do not have to be declared
       using a variable makes it exist
   But, for this class
     all variables must be declared
     unlike Java, no types

   Declaration
       var foo;
Arrays

   Normally
       A fixed-size collection of identically
        typed data items distinguished by their
        indices
   JavaScript doesn't require
    X   fixed size
    X   identical types
   Example
       document.images[0]
Arrays cont'd

   Creating an array
    var a = new Array ();

   Accessing
    a[0] = 5;
    a[1] = "foo";
    a[2] = 10;
    b = a[0] + a[2];

   Legal but a bad idea
Example

   Image swap
       wait for alert, then swap images
 Image swap, with preloading
 Multi image swap
Control flow

 Standard options available
 Conditional

 Loops
     for
     while
     do
If statement

    The same as Java
     if test
     { ... if part ...
     }
     else
     { ... else part ...
     }
Example

   Conditional image display
       display second image if user answers
        "OK" to a confirmation
For loop

   Mostly the same as Java
    for (i = 0; i < 5; i++)
    { ... repeated part ...
    }

   Variant for object properties
    for (i in documents)
    { ... repeated part ...
    }
Example

   Slide show
       once-through
   Slide show
       recycling
Functions

   In Java
       you wrote functions associated with classes
         • methods
   In JavaScript
       we won't be defining new classes
       we write functions with global scope
         • can be called anywhere on the page
       next week we'll see how functions can be
        called from events
       functions can also simplify programs
Functions cont'd

   Syntax
    function name(parameter list)
    {
      ... function code ...
    }

   Placement
       best place is in the HEAD element
         • recall skeleton
       must be before first invocation
Function cont'd

   Functions need not return a value
       different from VB
   If a function does return a value, use
    return value;
   Scope
       variables declared with var inside a function
         • are local
       different from Java
         • all variables in a method are local
Example

   slide show with functions
The Date object

 JavaScript has a built-in object
  classes for programmers to use
 The Date object
     used in the homework
     relevant for doing time and date
      computations
         • days until Chirstmas in book
       contains both date and time
Date object, cont'd
   Constructor
       new Date (parameters)
   Parameters can be
       a single string
         new Date ("October 27, 2003");
       a list of values
         new Date (2003, 9, 27);
       empty = current date and time
         new Date ();
   Internal representation
       count of milliseconds
Components of the date

   Accessors
       getYear() returns year
       getMonth () returns month
       getDay (),
       getHours(),
       getMinutes(),
       getSeconds()
   Calculations from millisecond
    representation
Using lastModified date

   document.lastModified
     returns a Date in String form
     not in JavaScript date form

   Must use the Date constructor
    new Date (document.lastModified)
Example

 Greetings
 How long ago modified?
Homework #6

   Case 1 Chapter 8
       Meal of the day
   Zodiac page
     Use JavaScript prompts to gather date
      of birth
     Display zodiac sign
Wednesday

   Lab 3