javascript i ect 270 robin burke. outline midterm answers javascript programming syntax interacting...
TRANSCRIPT
![Page 1: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/1.jpg)
JavaScript I
ECT 270
Robin Burke
![Page 2: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/3.jpg)
Midterm
High = 100 (1) Low = 43 Avg = 78
0
1
2
3
4
5
6
7
8
90+ 80+ 70+ 60+ < 60
![Page 4: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/4.jpg)
Midterm answers
![Page 5: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/5.jpg)
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
![Page 6: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/7.jpg)
JavaScript history
Introduced with Netscape 2.0 MS copied with JScript In 1998, ECMAScript became a
standardproprietary names still usedECMA sets minimum standards
![Page 8: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/8.jpg)
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
![Page 9: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/10.jpg)
Our Practice: PDL
Write PDL first as commentsprogram design languagewhat the program should doin "application" terms, not code terms
• no variable names• no operators
Integrate PDL with code as it is written
![Page 11: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/11.jpg)
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
...
![Page 12: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/12.jpg)
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
![Page 13: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/13.jpg)
Our Practice: In-class coding
Programming is an interactive activityhard to teach in lecture setting
We'll program our examples together
![Page 14: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/14.jpg)
Debugging JavaScript
Browser settingsInternet Options.../Advanced
• Display a notification about every script error
• Disable script debugging
![Page 15: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/15.jpg)
JavaScript and HTML
Identifying script sections<script> and </script>
But some browser can't / don't processProblem
• script becomes part of the page content
Solution• enclose script in HTML comments
![Page 16: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/16.jpg)
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>
![Page 17: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/17.jpg)
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
![Page 18: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/18.jpg)
Basic syntax
Statement end ;a = a + 1;
Grouping statements { }if foo { bar; }
Comments // and /* */// this is a comment
JavaScript is case-sensitive
![Page 19: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/19.jpg)
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
![Page 20: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/21.jpg)
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()
![Page 22: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/22.jpg)
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:")
![Page 23: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/23.jpg)
![Page 24: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/25.jpg)
Elements
We have access to the HTML elements in the documentchange attributeschange contents
![Page 26: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/26.jpg)
Examples
Hello, worldwrite text to the pagewrite HTML to the page
Browser infowrite browser appName and version
to the page Pop-up
use the alert and open methods
![Page 27: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/27.jpg)
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
![Page 28: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/28.jpg)
Declaration
Variables do not have to be declaredusing a variables makes it exist
But, for this classall variables must be declaredunlike Java, not types
Declaration var foo;
![Page 29: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/29.jpg)
Arrays
NormallyA fixed-size collection of identically
typed data items distinguished by their indices
JavaScript doesn't requireX fixed sizeX identical types
Example document.images[0]
![Page 30: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/30.jpg)
Arrays cont'd
Creating an arrayvar a = new Array ();
Accessinga[0] = 5;
a[1] = "foo";
a[2] = 10;
b = a[0] + a[2];
![Page 31: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/31.jpg)
Example
Image swapwait for alert, then swap images
Image swap, with preloading Multi image swap
![Page 32: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/32.jpg)
Control flow
Standard options available Conditional Loops
forwhiledo
![Page 33: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/33.jpg)
If statement
The same as Javaif test
{ ... if part ...
}
else
{ ... else part ...
}
![Page 34: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/34.jpg)
Example
Conditional image displaydisplay second image if user answers
"OK" to a confirmation
![Page 35: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/35.jpg)
For loop
Mostly the same as Javafor (i = 0; i < 5; i++)
{ ... repeated part ...
}
Variant for object propertiesfor (i in documents)
{ ... repeated part ...
}
![Page 36: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/36.jpg)
Example
Slide showonce-through
Slide showrecycling
![Page 37: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/37.jpg)
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
![Page 38: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/38.jpg)
Functions cont'd
Syntaxfunction name(parameter list)
{
... function code ...
}
Placementbest place is in the HEAD element
• recall skeleton
must be before first invocation
![Page 39: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/39.jpg)
Function cont'd
Functions need not return a value different from VB
If a function does return a value, usereturn value;
Scope variables declared with var inside a function
• are local
different from Java• all variables in a method are local
![Page 40: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/40.jpg)
Example
slide show with functions
![Page 41: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/41.jpg)
The Date object
JavaScript has a built-in object classes for programmers to use
The Date objectused in the homeworkrelevant for doing time and date
computations• days until Chirstmas in book
contains both date and time
![Page 42: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/42.jpg)
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
![Page 43: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/43.jpg)
Components of the date
Accessors getYear() returns year getMonth () returns month getDay (), getHours(), getMinutes(), getSeconds()
Calculations from millisecond representation
![Page 44: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/44.jpg)
Using lastModified date
document.lastModifiedreturns a Date in String formnot in JavaScript date form
Must use the Date constructornew Date (document.lastModified)
![Page 45: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/45.jpg)
Example
Greetings How long ago modified?
![Page 46: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/46.jpg)
Final Project
Teams up to size 3solo OK
Tourism siteyou decide destination
Presentation11/24in classdemonstrate the site
![Page 47: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/47.jpg)
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
![Page 48: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/48.jpg)
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
![Page 49: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/49.jpg)
Final Project cont'd
Do'splan aheadsketch on paper firststart early and make steady progress
Don'tsHTML editor"Borrowed" JavaScriptLast minute rush
![Page 50: JavaScript I ECT 270 Robin Burke. Outline Midterm answers JavaScript Programming Syntax Interacting with the browser Variables and data types Arrays Flow](https://reader036.vdocuments.us/reader036/viewer/2022081512/56649f125503460f94c256ca/html5/thumbnails/50.jpg)
Homework #6
Case 1 Chapter 8Meal of the day
Zodiac pageUse JavaScript prompts to gather date
of birthDisplay zodiac sign