Java程序辅导

12/06/2014
1
Javascript
Aka Jscript, ECMAScript, etc
1
New programming languages
• You are now starting to learn TWO different 
programming languages
– Javascript
• Minor processing on client side
– Data checking
– Responsive interaction
– "Pretties"
– PHP
• Application programming on server side
– Business logic
– Database access
– HTML page generation
• Keep them separate in your mind
Well 4 languages if you include the declarative HTML and CSS languages!
2
I
n
t
e
r
n
e
t
Client:
Browser program:
Interprets HTML & CSS
to layout a page
Runs Javascript code
Lets user fill in a form
and handles submission
of request data
Server:
Server computer(s)
Web-server program
handles requests for
static resources (images,
text pages, movie files etc)
Dynamic content
(individualized responses)
generated by server side
programs
HTTP protocol (rules) define
form of request and response
messages sent across the
network.
3
Textbook?
• Why pay hundreds of dollars?
• It is all on the web for free.
– http://www.ecmascript.org/
• The nearest thing to a standard.  
The Ecmascript site has reference documentation (http://www.ecma-
international.org/publications/files/ECMA-ST/ECMA-262.pdf ) 
– http://w3schools.com/js/default.asp W3schools.com is a good 
place to look for introductory tutorials on anything related to 
WWW
– Webdeveloper has two tutorials 
• for novices 
http://www.webdevelopersnotes.com/tutorials/javascript/index.php3
• for programmers 
http://www.wdvl.com/Style/JavaScript/Tutorial/ )
• They are probably OK, but both are old (~1999)
4
Other web sites
– http://www.ibm.com/developerworks
• Lots of individual articles on Javascript:
– E.g. "Compare Javascript frameworks", J. Lennon
http://www.ibm.com/developerworks/web/library/wa-
jsframeworks/
– http://oreilly.com/javascript/
• Usual links to O'Reilly books, many downloadable 
chapters etc, plus articles and short examples
5
Other web sites
– http://www.tizag.com/javascriptT/
Quite detailed and lengthy tutorial
– Even some tutorials on youtube, e.g.
http://www.youtube.com/watch?v=2t3ZysHg3
Cc
6
12/06/2014
2
Different from CSCI114
• Programming in Javascript is well ... 
Quite unlike programming for CSCI114!
• Javascript
– The basic programming constructs are the same
• Variables
• Expressions
• Statements
• Iteration
• Conditional
• Function call
– But the overall way things work is very different
7
The best analogy to your previous 
programming experience – "Menu Select"
• Your CSCI114 programming exercises probably included 
some "menu select" exercise like the "UOW Fish & 
Chips" assignment of a few years ago-
– A new fish & chips restaurant called "UoW Fish & Chips" has just been opened, and the 
manager is looking forward to find a program that can satisfy his needs. Currently, the 
restaurant is only serving one type of dish, which costs $ 5.95.
The customers can order the number of dishes they want. The manager wants to use a 
computer program to perform the following tasks: 
• A customer must be able to order directly, specifying how many dishes he/she wants to buy. The 
program must respond with the cost of the order and the order number (an integer value). Every time 
the program is run, the order numbers start from 1 again.
• The manager wants to know what the maximum number of dishes was that was ordered by a 
customer in a single order. This figure must be reported in the total transaction report. The total 
transaction report must also indicate  the total cost of all the orders.
The total sales report can always be produced at any time whenever the manager wants to check the 
report.
• The program must be driven with a simple menu that will make its operation easier.
8
Menu select
Welcome to UoW Fish & Chips Restaurant
1. Make an order
2. Print the total order
3. Quit
Enter your choice: 1
• Menu select program
– Mainline is really just a "dispatcher"
• Pick up user request
• Invoke a function
int main(int argc, char** argv) {
int option;
initorder();
cout << “Welcome …”;
for(;;) {
cout << “Enter your choice:”;
cin >> option;
if(option==3) break;
else
if(option==2) doPrintOrder();
else
if(option==1) doMakeOrder();
}
return 0;
}
Dispatcher –
invoking functions
at user command
9
Javascript v menu select
• Difference from menu select?
– Instead of a text listing of options and a 
prompt
– Have an elaborate GUI style interface for 
entering the request 
• The browser picks up the user's request
– (Request is through keystroke or mouseclick)
• Request is dispatched to a Javascript 
function that you define
10
Javascript – everywhere?
• On client and on server?
– Occasionally you will see examples where there is a HTML page 
that contains multiple embedded Javascript sections
• Some marked as "execute on server"
• The rest marked as "execute on client"
• Some web-servers can be configured to interpret HTML pages that are 
being returned to check for server-side Javascript
– Server side code is analogous to a mainline function such as C++'s int main()
– Code gets executed by a script interpreter on server,
– Server takes output from code and inserts it into the HTML page replacing the 
server-side Javascript
– Modified page (still containing not yet processed client side Javascript) sent to 
client
• Relatively rare
• We won't use this style.
– Node.js
• Server side applications written in Javascript – again not part of CSCI110
11
Javascript – interaction in browser
• Browser can detect interactions such as:
– User moves mouse cursor over an element in page
– User clicks mouse button when cursor within an element in page
– User types characters
• You, the page author, can tag page elements with 
attributes that identify Javascript code that the browser is 
to run if certain specified actions occur
• You, the page author, define the Javascript functions 
– Placing them in a script section added to the head of the HTML 
page
– (Better) placing them in a separate Javascript file that gets linked 
to the HTML page
12
12/06/2014
3
Where from Javascript?
Eich
13
Netscape's scripting
• Javascript originated at Netscape
– It is an unusual language
• Syntax is fairly conventional and C-like
• It has "objects" – but it is not a conventional object-oriented 
language using classes, inheritance etc;
instead it was partly inspired by the language SELF and work at 
MIT's AI lab.
It uses "prototypes" rather than conventional classes.
– This is an exotic topic suitable for study in a 300-level "Programming Languages" 
subject
(Javascript classes, objects, and prototypes are explained briefly in 2nd
Javascript lecture)
• It typically runs in a host environment (usually a browser) and 
scripts work with collections objects supplied by the environment
– Document Object Model
– Browser Object Model
14
Mocha and Livescript
• Netscape's commercialization of the web 
included the idea of limited processing on the 
client for data validation etc.
• Brendan Eich created the language initially 
known as Mocha, then Livescript, then 
Javascript.
He implemented the first interpreter (in C) 
named SpiderMonkey
• Netscape's browser included support for the 
scripting language from late 1995.
15
Javascript and JScript
• The language was renamed Javascript
– Java was extremely fashionable at the time and Sun and 
Netscape had collaborated in adding Java applets to the 
Netscape browser
• Java recognized as too complex and too powerful for many amateur 
"web page programmers",
Javascript was to be their medium 
– There is no significant relationship between these two 
languages.
• With Netscape 2, Javascript became widely popular
• Microsoft was playing "catch up" with Internet Explorer
– Reverse engineered Javascript
– Created their own (inevitably incompatible) version JScript.
16
ECMAScript
• Netscape thought to have the language 
standardized to try to avoid endless conflicts 
over dialects
– European Computer Manufacturers Association, a 
European standardization authority, had reputation for 
working quickly
– So Netscape submitted a definition for the language 
to ECMA in 1996, and by 1997 there was a standard.
• Revised and enhanced editions in 1999 and 2009
17
Browser (in)compatibility
• Firefox, Opera etc are ECMA compliant
• Of course, Microsoft's Internet Explorer isn't.
• The difference in the Javascript dialects is 
actually quite small
• Incompatibilities arise mainly in relation to the 
environment provided by the browser ("browser 
object model") and the "document object model" 
that the browsers use to represent the structure 
of HTML pages
18
12/06/2014
4
Browser specific code
• There aren't major problems with simple scripts checking 
for empty input fields in forms etc.
• The problems arise with "dynamic HTML" – pop-up 
menus, roll-over effects, changes to the document etc.
– Here it is often necessary to have code of form:
if microsoft-browser doThis() else doThat()
• There are now Javascript toolkits (MooTools, JQuery 
etc) and libraries
– These libraries contain the code that sorts out how to handle 
different browsers
– The libraries define "application programmer interfaces" that are 
browser neutral
– We will look briefly at such toolkits later in session
19
Usage
• ~95% of browsers have Javascript enabled.
• Which means 5% don't!
– You are supposed to design a page so that it "degrades 
gracefully" when Javascript disabled
• No fancy features, but page can be read, links followed, forms 
submitted.
– Tiresome!
• It might sometimes be easier to have a