Download presentation
Presentation is loading. Please wait.
1
JavaScript I ECT 270 Robin Burke
2
Outline JavaScript Homework #6 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 Web pages static
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 JavaScript is Dynamic HTML
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 Documentation Style Embedded output
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; find the highest and lowest scores on exam ...
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
<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
14
JavaScript skeleton <html> <head>
... HTML head content ... <script language="JavaScript" type="text/javascript"> <!— ... code here executed on loading ... //--> </script> </head> <body> ... page content ... <!-- ... code here executed during page rendering ... ... more page content ... </body> </html>
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 Methods Fields
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 window.frames[] window.status window.history
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 window.navigator window.frames[] window.status window.history](http://slideplayer.com./slide/13405184/80/images/19/window+window.navigator+window.frames%5B%5D+window.status+window.history.jpg "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()")
20
window, cont'd opening new windows window.open window.alert()
creates a new browser window (pop-up) example: window.open (" 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:")
22
document document.images document.write / writeln document.forms
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
23
Elements We have access to the HTML elements in the document
change attributes change contents
24
Examples Hello, world Browser info Pop-up 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 But, for this class
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 JavaScript doesn't require Example
A fixed-size collection of identically typed data items distinguished by their indices JavaScript doesn't require fixed size identical types Example document.images[0]
28
Arrays cont'd Creating an array Accessing Legal but a bad idea
var a = new Array (); Accessing a[0] = 5; a[1] = "foo"; a[2] = 10; b = a[0] + a[2]; Legal but a bad idea
29
Example Image swap Image swap, with preloading Multi 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 Variant for object properties
for (i = 0; i < 5; i++) { ... repeated part ... } Variant for object properties for (i in documents)
34
Example Slide show once-through recycling
35
Functions In Java In JavaScript
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 Placement best place is in the HEAD element
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 Parameters can be
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 Zodiac page Meal of the day
Use JavaScript prompts to gather date of birth Display zodiac sign
45
Wednesday Lab 3
Similar presentations
