1 java script introduction su ling-yu csi668 april 2,2001
Post on 19-Dec-2015
214 views
TRANSCRIPT
![Page 1: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/1.jpg)
1
Java Script Introduction
Su Ling-Yu CSI668
April 2,2001
![Page 2: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/2.jpg)
2
OutlineWhat is Java Script?
Getting Started—using java script and provides basic examples.
Basic of Server-site Java Script
![Page 3: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/3.jpg)
3
The Birth of JavaScript
December 1995 Netscape and Sun Microsystems, Inc. announced JavaScript.
![Page 4: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/4.jpg)
4
What is JavaScript?
JavaScript is a scripting language developed by Netscape to add interactive features to Web documents.
![Page 5: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/5.jpg)
5
Client-Side & Server-Side Javascript
There are two types of JavaScript:
Client-side JavaScript
Server-side JavaScript
![Page 6: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/6.jpg)
6
Client Side Java Script
Client Side JavaScript runs in a users browser. There are three browsers that support Client Side JavaScript: Netscape Navigator (since version 2), Microsoft Internet Explorer (since version 3) and Opera (since version 3).
![Page 7: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/7.jpg)
7
Client Side Java Script TasksClient-side JavaScript statements embedded in an HTML page for these tasks:
Validating user input. checking values entered in forms are valid Prompting a user for confirmation and displaying error or informational dialog boxes Performing aggregate calculations (such as sums or averages) or other processing on data retrieved from the server Performing other functions that do not require information from the server
![Page 8: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/8.jpg)
8
Server Side Java Script
Netscape call server-side Java script as LiveWire Java script. LiveWire is an application development environment that uses JavaScript for creating server-based applications similar to CGI (Common Gateway Interface) programs. The server generates HTML dynamically; this HTML is then sent by the server over the network to the client, which displays the results.
![Page 9: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/9.jpg)
9
Live Wire
Netscape Server
![Page 10: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/10.jpg)
10
Server Side Java Script Tasks
Maintaining information through a series of client accesses
Maintaining data shared among several clients or applications
Accessing a database or files on the server Calling external libraries on the server
![Page 11: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/11.jpg)
11
![Page 12: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/12.jpg)
12
JavaScript and Java
JavaScript and Java are similar in some ways but fundamentally different in others.
![Page 13: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/13.jpg)
13
JAVA Script JAVA
Creators Netscape Sun Microsystems
Stand alone applications
Cannot be created Can be created
Compiled Interpreted (not compiled) by client.
Compiled bytecodes downloaded from server, executed on client.
Run Time Libraries
JavaScript runtime libraries required
JVM (Java Virtual Machine) Java Runtime Lib required
JavaScript and Java
![Page 14: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/14.jpg)
14
JAVA Script JAVASource code Code integrated with,
and embedded in, HTML.
Applets distinct from HTML (accessed from HTML pages).
Data Type Variable data types not declared (loose data typing).
Variable data types must be declared (strong typing).
Binding Dynamic binding. Object references checked at runtime.
Static binding. Object references must exist at compile-time.
![Page 15: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/15.jpg)
15
JAVA Script JAVAObject inheritance
Object-based. Uses built-in, extensible objects, but no classes or inheritance.
Object-oriented. Applets consist of object classes with inheritance.
![Page 16: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/16.jpg)
16
Getting Started
Introduce how to use java script and provides basic examples.
![Page 17: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/17.jpg)
17
Embedding JavaScript in HTMLYou can embed JavaScript in an HTML
document in the following ways:As statements and functions within a
<SCRIPT> tag.
<SCRIPT> JavaScript statements...</SCRIPT>
![Page 18: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/18.jpg)
18
Specifying a file of JavaScript code
The SRC attribute of the <SCRIPT> tag lets you specify a file as the JavaScript source (rather than embedding the JavaScript in the HTML). For example:
<HEAD><TITLE>My Page</TITLE><SCRIPT SRC="common.js">...</SCRIPT></HEAD><BODY>...
.
![Page 19: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/19.jpg)
19
Specifying a file of JavaScript code
The SRC attribute can specify any URL, relative or absolute. For example:
The SRC attribute can specify any URL,
relative or absolute.
For example: <SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js">
![Page 20: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/20.jpg)
20
Defining and calling functionsExample:The following example defines a simple function in the HEAD of a document and
then calls it in the BODY of the document:
<HEAD> <SCRIPT LANGUAGE="JavaScript"> sample page<!-- Hide script from old browsersfunction factorial(n) { if ((n == 0) || (n == 1))return 1 else {result = (n * factorial(n-1) ) return result }}// End script hiding from old browsers --></SCRIPT></HEAD><BODY><SCRIPT> document.write("The function returned ", factorial(1), "<BR>")document.write("The function returned ", factorial(2), "<BR>")document.write("The function returned ", factorial(3), "<BR>")document.write("The function returned ", factorial(4), "<BR>")</SCRIPT></BODY>
![Page 21: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/21.jpg)
21
Scripting event handlersEvent Applies to Occurs when Event
handler
abort images User aborts the loading of an image (for example by clicking a link or clicking the Stop button)
onAbort
blur windows, frames, and all form elements
User removes input focus from window, frame, or form element
onBlur
click buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
User clicks form element or link
onClick
change text fields, textareas, select lists
User changes value of element
onChange
![Page 22: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/22.jpg)
22
Scripting event handlers
Event Applies to
Occurs when Event handler
error images, windows
The loading of a document or image causes an error
onError
focus windows, frames, and all form elements
User gives input focus to window, frame, or form element
onFocus
load document body
User loads the page onLoad
mouseover links User moves mouse pointer over a link
onMouse- Over
mouseout areas, links User moves mouse pointer out of an area (client-side image map) or link
onMouseout
![Page 23: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/23.jpg)
23
Scripting event handlers
Event Applies to
Occurs when Event handler
select text fields, textareas
User selects form element's input field
onSelect
submit submit button
User submits a form onSubmit
reset forms User resets a form (clicks a Reset button)
onReset
unload document body
User exits the page onUnload
![Page 24: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/24.jpg)
24
Validating form input
One of the most important uses of JavaScript is to validate form input to server-based programs or CGI programs. This is useful because:
1. It reduces load on the server. "Bad data" are already filtered out when input is passed to the server-based program.
2. It reduces delays in case of user error. Validation otherwise has to be performed on the server, so data must travel from client to server, be processed, and then returned to client for valid input.
3. It simplifies the server-based program.
![Page 25: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/25.jpg)
25
Validating form input (Cont.)
Generally, you'll want to validate input in (at least) two places:
1. user enters each form element onChange event handler on each form ele
ment that you want validated. 2 User submits the form onClick event handler on the button that su
bmits the form.
![Page 26: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/26.jpg)
26
Validating form input
Example validation functions
Example page
![Page 27: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/27.jpg)
27
JavaScript object hierarchy
When you load a document in the browser, it creates a number of JavaScript objects with property values based on the HTML in the document and other pertinent information. These objects exist in a hierarchy that reflects the structure of the HTML page itself.
![Page 28: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/28.jpg)
28
JavaScript object (Cont.)
In this hierarchy, an object's "descendants" are properties of the object. For example, a form named form1 is an object as well as a property of document, and is referred to as document.form1.
![Page 29: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/29.jpg)
29
<HEAD><TITLE>A Simple Document</TITLE><SCRIPT>
function update(form) { alert("Form being updated")}</SCRIPT></HEAD><BODY><FORM NAME="myform" ACTION="foo.cgi" METHOD="get" >Enter a value:<INPUT TYPE="text" NAME="text1" VALUE="blahblah" SIZE=20 >Check if you want: <INPUT TYPE="checkbox" NAME="Check1" CHECKED onClick="update(this.form)"> Option #1<P><INPUT TYPE="button" NAME="button1" VALUE="Press Me" onClick="update(this.form)"></FORM></BODY>
These are the full names of the objects, based on the object hierarchy. document.myform, the form document.myform.Check1, the checkbox document.myform.button1, the button
![Page 30: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/30.jpg)
30
Every page has the following objects:1. window: the top-level object; has properties
that apply to the entire window. There is also a window object for each "child window" in a frames document.
2. document: contains properties based on the content of the document, such as title, background color.
3. location: has properties based on the current URL.
4. history: contains properties representing URLs the client has previously requested.
JavaScript object (Cont.)
![Page 31: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/31.jpg)
31
JavaScript object (Cont.)
Window object methods: open and close: Opens and closes a browser windowalert: Displays an Alert dialog box with a message. confirm: Displays a Confirm dialog box with OK and Cancel buttons. prompt: Displays a Prompt dialog box with a text field for entering a value. blur and focus: Removes focus from, or gives focus to a window. scroll: Scrolls a window to a specified coordinate. setTimeout: Evaluates an expression after the specified time.
![Page 32: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/32.jpg)
32
JavaScript object (Cont.)
document object methods write , writeln
location object methods reload, replace
history object methods go for example: history.go(-2)
loads the URL that is two entries back in the client's history list.
![Page 33: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/33.jpg)
33
Integrating Applet with JavaScript
Referencing applets example page
Example:
<APPLET CODE="colors.class" NAME="colors" WIDTH=400 HEIGHT=60>
</APPLET><FORM NAME="form1"><INPUT TYPE="text" SIZE="20" NAME="str"><INPUT TYPE="button" VALUE="Set String" onClick="document.colors.setString(document.form1.str.value)"></FORM>
![Page 34: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/34.jpg)
34
Basic Server side-JavaScript
![Page 35: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/35.jpg)
35
Server-side JavaScript
Processing a JavaScript page request
![Page 36: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/36.jpg)
36
JavaScript and Netscape Enterprise Server versions
JavaScript Version
Enterprise Server version
JavaScript 1.2 Netscape Enterprise Server 3.6 (NES 3.6)
JavaScript 1.4 Netscape Enterprise Server 4.0 (NES 4.0)
![Page 37: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/37.jpg)
37
Creating and running a JavaScript application
![Page 38: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/38.jpg)
38
Embedding Server Side JavaScript in HTML
The SERVER tag embed server-side JavaScript
in an HTML page. If request.ip is 156.12.4.2 the runtime engine generates the html:
<P>Your IP address is156.12.4.2
For example:
<html>>
<body><p>Your IP address is
<server> write(request.ip);</server>
</body></html>
![Page 39: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/39.jpg)
39
Connect to Database You can specify the following information w
hen you make a connection,either when creating a DbPool object or when calling the connect
method of DbPool or database:
connect (dbtype, serverName, userName, password, databaseName, maxConnections, commitFlag);
For Example:clientPool.connect("ORACLE", "myserver", "ENG", "p
wd1", “db1", 5,false);
![Page 40: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/40.jpg)
40
Server-side JavaScript objects Object Description
database Represents a database connection.
client Information about browser client individually
project information about an application
request information about a single HTTP request
server global information about the server
![Page 41: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/41.jpg)
41
Automatically Displaying Query Results
The simplest and quickest way to display the results of database queries is to use the SQLTable method of the database object or a Connection object.
For Example:
myconn.SQLTable("select * from videos");
The following is the first part of the table that could be generated by these statements:
![Page 42: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/42.jpg)
42
Executing SQL Statements
Using execute is referred to as performing passthrough SQL, because it passes SQL directly to the server.
For Example:
connobj.execute("DROP TABLE "+project.oldtable);
![Page 43: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/43.jpg)
43
Creating a Cursor you can create a cursor by calling the cursor methodof the associated database or Connection object. Creating the Cursor object also opens the cursor in the database . For example:custs = connobj.cursor ("select id, name, city from customer order by id"); // Before continuing, make sure a real cursor was returned
// and there was no database error.if ( custs && (connobj.majorErrorCode() == 0) ) {
custs.next(); // Get the first row // Display the values write ("<B>Customer Name:</B> " + custs.name + "<BR>"); write ("<B>City:</B> " + custs.city + "<BR>"); write ("<B>Customer ID:</B> " + custs.id);
custs.close(); //Close the cursor}
![Page 44: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/44.jpg)
44
Session Management Service
Over view Objects
![Page 45: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/45.jpg)
45
When the user first accesses the application, the application might assign a customer ID,
client.custID = getNextCustID();
To remove all expired custom client objects for the application, call the following function:
expireCustomClients()
![Page 46: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/46.jpg)
46
Reference
Netscape's web site
http://www.netscape.com
http://developer.netscape.com/
Internet Related Technologies
http://developer.irt.org/script/script.htm
Java script Knowledge Base and Faq
![Page 47: 1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d355503460f94a0cdd8/html5/thumbnails/47.jpg)
47
Thank You