1 / 50

JavaScript I

JavaScript I. ECT 270 Robin Burke. Outline. Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow of control Function definitions Date object Final Project Homework #6. Midterm. High = 100 (1) Low = 43 Avg = 78.

harrissarah
Download Presentation

JavaScript I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript I ECT 270 Robin Burke

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

  3. Midterm • High = 100 (1) • Low = 43 • Avg = 78

  4. Midterm answers

  5. 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

  6. 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

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

  8. 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

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

  10. 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

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

  12. 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

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

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

  15. 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

  16. 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>

  17. 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

  18. Basic syntax • Statement end  ; • a = a + 1; • Grouping statements  { } • if foo { bar; } • Comments  // and /* */ • // this is a comment • JavaScript is case-sensitive

  19. 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

  20. 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 • The point • we manipulate the browser and its contents programmatically

  21. 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()

  22. 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:")

  23. 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

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

  25. 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

  26. 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

  27. Declaration • Variables do not have to be declared • using a variables makes it exist • But, for this class • all variables must be declared • unlike Java, not types • Declaration • var foo;

  28. 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.images[0]

  29. 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];

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

  31. Control flow • Standard options available • Conditional • Loops • for • while • do

  32. If statement • The same as Java if test { ... if part ... } else { ... else part ... }

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

  34. 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 ... }

  35. Example • Slide show • once-through • Slide show • recycling

  36. 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

  37. 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

  38. 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

  39. Example • slide show with functions

  40. 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

  41. 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

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

  43. 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)

  44. Example • Greetings • How long ago modified?

  45. Final Project • Teams up to size 3 • solo OK • Tourism site • you decide destination • Presentation • 11/24 • in class • demonstrate the site

  46. Final Project cont'd • Requirements • 9 pages • CSS • navigation • 1 dynamic effect • Pages • home page • order form • with validation • slide show • credits page • 5 other pages

  47. Final Project cont'd • Rubric • 15% presentation • 20% design and layout • 65% technical • For an "A" • all required elements • visual appeal • easy to use • attractive design • effort commensurate with team size

  48. Final Project cont'd • Do's • plan ahead • sketch on paper first • start early and make steady progress • Don'ts • HTML editor • "Borrowed" JavaScript • Last minute rush

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

More Related