JavaScript I - PowerPoint PPT Presentation

Loading...

PPT – JavaScript I PowerPoint presentation | free to download - id: 1b285-YTc2O



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

JavaScript I

Description:

browser compatibility. browser-version compatibility. Best Practices. Naming ... Zodiac page. Use JavaScript prompts to gather date of birth. Display zodiac ... – PowerPoint PPT presentation

Number of Views:56
Avg rating:3.0/5.0
Slides: 46
Provided by: rbu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: JavaScript I


1
JavaScript I
  • ECT 270
  • Robin Burke

2
Outline
  • JavaScript
  • Programming
  • Syntax
  • Interacting with the browser
  • Variables and data types
  • Arrays
  • Flow of control
  • Function definitions
  • Date object
  • Homework 6

3
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

4
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

5
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

6
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

7
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

8
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

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

10
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

11
Our Practice In-class coding
  • Programming is an interactive activity
  • hard to teach in lecture setting
  • We'll program our examples together

12
Debugging JavaScript
  • Browser settings
  • Internet Options.../Advanced
  • Display a notification about every script error
  • Disable script debugging

13
JavaScript and HTML
  • Identifying script sections
  • and
  • But some browser can't / don't process
  • Problem
  • script becomes part of the page content
  • Solution
  • enclose script in HTML comments

14
JavaScript skeleton
  • ... HTML head content ...
  • t"
  • ... code here executed on loading ...
  • //--
  • ... page content ...
  • t"
  • ... more page content ...

15
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

16
Basic syntax
  • Familiar from Java
  • Statement end ?
  • a a 1
  • Grouping statements ?
  • if foo bar
  • Comments ? // and / /
  • // this is a comment
  • Case-sensitive

17
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

18
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

19
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.frame0
  • 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()

20
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
  • examplewindow.prompt("Enter user id")

21
(No Transcript)
22
document
  • document.images
  • all the images in the document
  • example document.images2
  • 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

23
Elements
  • We have access to the HTML elements in the
    document
  • change attributes
  • change contents

24
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

25
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

26
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

27
Arrays
  • Normally
  • A fixed-size collection of identically typed data
    items distinguished by their indices
  • JavaScript doesn't require
  • fixed size
  • identical types
  • Example
  • document.images0

28
Arrays cont'd
  • Creating an array
  • var a new Array ()
  • Accessing
  • a0 5
  • a1 "foo"
  • a2 10
  • b a0 a2
  • Legal but a bad idea

29
Example
  • Image swap
  • wait for alert, then swap images
  • Image swap, with preloading
  • Multi image swap

30
Control flow
  • Standard options available
  • Conditional
  • Loops
  • for
  • while
  • do

31
If statement
  • The same as Java
  • if test
  • ... if part ...
  • else
  • ... else part ...

32
Example
  • Conditional image display
  • display second image if user answers "OK" to a
    confirmation

33
For loop
  • Mostly the same as Java
  • for (i 0 i
  • ... repeated part ...
  • Variant for object properties
  • for (i in documents)
  • ... repeated part ...

34
Example
  • Slide show
  • once-through
  • Slide show
  • recycling

35
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

36
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

37
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

38
Example
  • slide show with functions

39
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

40
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

41
Components of the date
  • Accessors
  • getYear() returns year
  • getMonth () returns month
  • getDay (),
  • getHours(),
  • getMinutes(),
  • getSeconds()
  • Calculations from millisecond representation

42
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)

43
Example
  • Greetings
  • How long ago modified?

44
Homework 6
  • Case 1 Chapter 8
  • Meal of the day
  • Zodiac page
  • Use JavaScript prompts to gather date of birth
  • Display zodiac sign

45
Wednesday
  • Lab 3
About PowerShow.com