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

2. 2 Outline What is Java Script? Getting Started—using java script and provides basic examples. Basic of Server-site Java Script

3. 3 The Birth of JavaScript December 1995 Netscape and Sun Microsystems, Inc. announced JavaScript.

4. 4 What is JavaScript? JavaScript is a scripting language developed by Netscape to add interactive features to Web documents.

5. 5 Client-Side & Server-Side Javascript There are two types of JavaScript: Client-side JavaScript Server-side JavaScript

6. 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. 7 Client Side Java Script Tasks Client-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. 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. 9 Live Wire Netscape Server

10. 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. 11

12. 12 JavaScript and Java JavaScript and Java are similar in some ways but fundamentally different in others.

13. 13 JAVA ScriptJAVA Creators NetscapeSun Microsystems Stand alone applications Cannot be createdCan 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. 14 JAVA ScriptJAVA Source 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. 15 JAVA ScriptJAVA Object inheritance Object-based. Uses built-in, extensible objects, but no classes or inheritance. Object-oriented. Applets consist of object classes with inheritance.

16. 16 Getting Started Introduce how to use java script and provides basic examples.

17. 17 Embedding JavaScript in HTML You can embed JavaScript in an HTML document in the following ways: As statements and functions within a tag. JavaScript statements...

18. 18 Specifying a file of JavaScript code The SRC attribute of the tag lets you specify a file as the JavaScript source (rather than embedding the JavaScript in the HTML). For example: My Page.......

19. 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:

20. 20 Defining and calling functions Example: The following example defines a simple function in the HEAD of a document and then calls it in the BODY of the document: sample page <!-- Hide script from old browsers function factorial(n) { if ((n == 0) || (n == 1)) return 1 else {result = (n * factorial(n-1) ) return result }} // End script hiding from old browsers --> document.write("The function returned ", factorial(1), " ") document.write("The function returned ", factorial(2), " ") document.write("The function returned ", factorial(3), " ") document.write("The function returned ", factorial(4), " ")

21. 21 Scripting event handlers EventApplies toOccurs whenEvent handler abort imagesUser 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. 22 Scripting event handlers EventApplies toOccurs whenEvent 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 pageonLoad mouseover linksUser moves mouse pointer over a link onMouse- Over mouseout areas, linksUser moves mouse pointer out of an area (client-side image map) or link onMouseout

23. 23 Scripting event handlers EventApplies toOccurs whenEvent handler select text fields, textareas User selects form element's input field onSelect submit submit buttonUser submits a formonSubmit reset formsUser resets a form (clicks a Reset button) onReset unload document body User exits the pageonUnload

24. 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. 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 element that you want validated. 2 User submits the form onClick event handler on the button that submits the form.

26. 26 Validating form input Example validation functions Example page

27. 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. 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. 29 A Simple Document function update(form) { alert("Form being updated")} Enter a value: Check if you want: Option #1 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. 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. 31 JavaScript object (Cont.) Window object methods: open and close: Opens and closes a browser window alert: 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. 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. 33 Integrating Applet with JavaScript Referencing applets example page example page Example: <INPUT TYPE="button" VALUE="Set String" onClick="document.colors.setString(document.form1.str.value)">

34. 34 Basic Server side-JavaScript

35. 35 Server-side JavaScript Processing a JavaScript page request

36. 36 JavaScript and Netscape Enterprise Server versions JavaScript VersionEnterprise Server version JavaScript 1.2Netscape Enterprise Server 3.6 (NES 3.6) JavaScript 1.4Netscape Enterprise Server 4.0 (NES 4.0)

37. 37 Creating and running a JavaScript application

38. 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: Your IP address is 156.12.4.2 For example: > Your IP address is write(request.ip);

39. 39 Connect to Database You can specify the following information when 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", "pwd1", “ db1", 5,false);

40. 40 Server-side JavaScript objects ObjectDescription 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. 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. 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. 43 Creating a Cursor you can create a cursor by calling the cursor method of 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 (" Customer Name: " + custs.name + " "); write (" City: " + custs.city + " "); write (" Customer ID: " + custs.id); custs.close(); //Close the cursor }

44. 44 Session Management Service Over view Objects

45. 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. 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. 47 Thank You