1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001

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


31


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


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

Documents

1 Java Script Introduction Su Ling-Yu CSI668 April 2,2001