Post on 19-Dec-2015
transcript
1
Java Script Introduction
Su Ling-Yu CSI668
April 2,2001
2
OutlineWhat is Java Script?
Getting Started—using java script and provides basic examples.
Basic of Server-site Java Script
3
The Birth of JavaScript
December 1995 Netscape and Sun Microsystems, Inc. announced JavaScript.
4
What is JavaScript?
JavaScript is a scripting language developed by Netscape to add interactive features to Web documents.
5
Client-Side & Server-Side Javascript
There are two types of JavaScript:
Client-side JavaScript
Server-side JavaScript
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).
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
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.
9
Live Wire
Netscape Server
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
11
12
JavaScript and Java
JavaScript and Java are similar in some ways but fundamentally different in others.
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
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.
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.
16
Getting Started
Introduce how to use java script and provides basic examples.
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>
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>...
.
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">
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>
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
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
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
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.
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.
26
Validating form input
Example validation functions
Example page
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.
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.
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
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.)
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.
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.
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>
34
Basic Server side-JavaScript
35
Server-side JavaScript
Processing a JavaScript page request
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)
37
Creating and running a JavaScript application
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>
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);
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
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:
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);
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}
44
Session Management Service
Over view Objects
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()
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
47
Thank You