JavaScript I - DePaul University

Download Report

Transcript JavaScript I - DePaul University 

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



Web pages static



no way to do computation on the client side
example: form validation
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


JavaScript is





marketing move by Netscape
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




Easy to get in trouble


edit page
view in browser
no compilation / linking / libraries / etc
easy to skip documentation, proper coding
practices
Headaches


browser compatibility
browser-version compatibility
Best Practices

Naming


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



lower/upper for variable names e.g. "upperRight".
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


Program


h = marginR + offset;
PDL


add the right margin to the block offset to
find the horizontal position of the block
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


Outside of SCRIPT elements


HTML output as usual
Inside SCRIPT elements



Code is executed as read
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  ;



Grouping statements  { }


if foo { bar; }
Comments  // and /* */


a = a + 1;
// this is a comment
Case-sensitive
Objects

JavaScript uses objects


Methods



dot syntax to access fields and 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


document


methods and fields related to the browser
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




window.frames[]



an array containing all of the frames in a framed document
example: window.frame[0]
window.status



an object describing the user's browser
useful for code that depends on a particular browser version
example: window.navigator.appName
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



window.alert()



opens a dialog with a message
example: window.alert ("The system has crashed.")
window.confirm()




creates a new browser window (pop-up)
example: window.open ("www.cti.depaul.edu")
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



document.write / writeln



methods for adding content to the document
example: document.writeln ("foo");
document.forms


all the images in the document
example: document.images[2]
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


JavaScript doesn't require
X
X

A fixed-size collection of identically
typed data items distinguished by their
indices
fixed size
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