Transcription

1 Internet Based Language: JavaScript Wing Fai Ng æ Rohit Pasari y November 24, 1998 Abstract Nowadays, JavaScript is a very popular internet based language for Web browsers. In this report, we present some basics and features of JavaScript, and introduce the object's hierarchy and event's handling in Netscape's Navigator. Comparisons between JavaScript and Java are made, together with their communications and connections on an HTML document. Important features of some JavaScript's objects are also presented. Our experiences in learning JavaScript and CGI are discussed, and an overall structure of our programming implementation on JavaScript is also included. Key Words. CGI, HTML, Java, JavaScript, Netscape 1 Introduction JavaScript is a cross platform, object based scripting language for client and server applications. JavaScript lets us create applications that run over the Internet. Client applications run in a browser, such as Netscape Navigator, and server applications run on a server, such as Netscape Enterprise Server. Server side JavaScript is an alternative to traditional CGI programming via Perl or C++. Client side JavaScript statements embedded in an HTML page can respond to user events such as mouse clicks, form input, and page navigation. One can write a JavaScript function to verify that users enter valid information into a form requesting a telephone number or zip code. Without any network transmission, the HTML page with embedded JavaScript can check the entered data and alert the user with a dialog box if the input is invalid. Windows can be popped up and used as remote controls linked to the original window. The full control over browser objects is what makes client side JavaScript so powerful. 2 ABC's of JavaScript To include JavaScripts in an HTML document, put them inside the tag: éscript éèscripté LANGUAGE=JavaScripté JavaScript's Codes æ Department of Mathematics and Computer Science, Kent State University, Kent, OH44242, U.S.A.. y Department of Mathematics and Computer Science, Kent State University, Kent, OH44242, U.S.A.. 1

2 2.1 Data Types There are four diæerent data types in JavaScript: numbers, strings, boolean and null. As opposed to many other languages, a variable data type is not declared explicitly but rather implicitly according to the initial value assigned. Also, unique to JavaScript is that there is no explicit distinction between integer and real valued numbers. The value null is often used to initialize variables which is automatically converted to initial values of other data types. For example, when used as a number it becomes 0. JavaScript interpreter uses the null value on two occasions: è1è built in functions return null under certain conditions, and è2è nonexistent properties evaluates to null. This is similar to the concept of bottom symbol in denotational semantics. 2.2 Variables Variables are the cornerstone of most programming and scripting languages. They serve as links between simple words in the script and the computer allocated memory. There is a limit to the amount of memory one can use, but since JavaScript programs are not heavy resource demanders, one needs not worry too much on this issue. JavaScript is a loosely typed language, so data type of variable need not be explicitly speciæed when creating a variable. As needed, data types are converted automatically during the course of the script execution. JavaScript interpreter looks at data type and determines the variable type which is an abstract interpretation. The downside of this is that it slows down the execution of program, needs advance memory management and garbage collection schemes. However, the plus points are that this makes a program more compressed and logical. Also, easier software maintenance and rapid prototyping is possible. One creates a variable by the use of the keyword var, its syntax is var variablename = initalvalue As mentioned earlier the type of variable is bound to data type that it was initialized with, but it can mutate itself to hold a data type of diæerent type. For example, the following is perfectly legal in JavaScript, var x = 4 x = "hello" èè here data typeforxisnumeric èè here it has been mutated to string type A point needs to be mentioned is that we can use a variable without declaring it by the preæx var. In such a case, this variable is assumed as global. 2.3 Expressions An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value; the value can be a number, a string, a logical value, or a bottom symbol. Conceptually, there are two types of expressions: those that assign a value to a variable, and those that simply have a value. For example, the expression x = 7 is an expression that assigns x the value seven. This expression itself evaluates to seven. Such expressions use assignment operators. On the other hand, the expression simply evaluates to seven; it does not perform an assignment. The operators used in such expressions are referred to simply as operators. JavaScript has the following types of expressions: 2

3 Arithmetic: evaluates to a number, for example, 4 String: evaluates to a character string, for example, "Fred" Logical: evaluates to true or false The special keyword null denotes a null value. In contrast, variables that have not been assigned a value are undeæned and cause a runtime error if used as numbers or as numeric variables. Array elements that have not been assigned a value, however, evaluate to false. 2.4 Overview of Statements Supported by JavaScript The statements fall into the following categories: Conditional statements: Loop Statements: Object Manipulation Statements and Operators: Comments: if...else, and switch for, while, do while, labeled, break, and continue for...in, new, this, and with single line èèèè and multiline èè*...*èè 2.5 JavaScript Follows an Object Oriented Paradigm An object is a programming abstraction that groups data with the code that operates on it. An object encapsulates related data and functions in a single cohesive unit. Functions associated with objects are known as methods. There are language supplied objects like Date and user can also deæne his own types. Below is a list of language provided objects: Array, Boolean, Date, Function, Math, Number, RegExp, and String. We now brieæy look at some of the methods that are provided with each of these objects. Array: Date: Function: Math: String: concatèè, joinèè, popèè, pushèè, reverseèè, shiftèè, sliceèè, spliceèè, sortèè, unshiftèè getdateèè, getdayèè, gethoursèè, getminutesèè, getmonthèè, getsecondsèè, gettimeèè, gettimezoneoæsetèè, getyearèè, setdateèè, setdayèè, sethoursèè, setminutesèè, setmonthèè, setsecondsèè, settimeèè, setyearèè, togmt- Stringèè, tolocalestringèè, parseèè, UTCèè resetèè, submitèè absèè, acosèè, asinèè, atanèè, ceilèè, cosèè, expèè, æoorèè, logèè, maxèè, minèè, powèè, randomèè, roundèè, sinèè, sqrtèè, tanèè anchorèè, bigèè, blinkèè, boldèè, charatèè, charcodeatèè, æxedèè, fromcharcodeèè, fontcolorèè, fontsizeèè, indexofèè, italicsèè, lastindexofèè, linkèè, replaceèè, searchèè, smallèè, splitèè, strikeèè, subèè, substringèè, supèè, tolowercaseèè, touppercaseèè 2.6 JavaScript Reæection and HTML Layout JavaScript object property values are based on the content of an HTML document, and is referred to as reæection because these property values reæect the HTML. Generally, the Navigator performs layout èthe process by which the Navigator transforms HTML tags into graphical display in our computerè happens sequentially in the Navigator. The Navigator starts at the 3

4 top of the HTML document and works downward, displaying output to the screen as it goes. Because of this "top down" behavior, JavaScript reæects only HTML that it has encountered. Although JavaScript can be included at any place inside an HTML document, but it is an error to change a property of an object by JavaScript before an object's existence is established by the Navigator. JavaScript has several "top level" functions predeæned in the language, such as: cleartimeoutèè, settimeoutèè, evalèè, isnanèè, Numberèè, Stringèè, parseintèè, parsefloatèè, escapeèè, unescapeèè, taintèè, and untaintèè. The predeæned JavaScript settimeoutèè function is used to specify a time delay to evaluate an expression, which is very useful for performing graphics animation or to act as a timer. The syntax of using settimeoutèè is: id=settimeoutèfucntion name, time-delayè where "function name" is the function to invoke after "time-delay" milliseconds. 3 Navigator's Object Hierarchy and Navigator's Object Arrays 3.1 Navigator's Object Hierarchy When we load a document in Navigator, 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 reæects the structure of the HTML page itself. Figure 1 illustrates this object hierarchy. In this hierarchy, an object's "descendants" are properties of the object, and every page has the following objects: navigator: window: document: location: history: has properties for the name and version of the Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client. 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. contains properties based on the content of the document, such as title, background color, links, and forms. has properties based on the current URL. contains properties representing URLs the client has previously requested. Depending on its content, the document may contain other objects. To refer to speciæc properties, we can specify the object name and all its ancestors. Generally, an object gets its name from the NAME attribute of the corresponding HTML tag. For example, document.myform.text1.value refers to the value property of a text æeld named text1 in a form named myform in the current document. Further, if an object is on a form, we must include the form name when referring to that object, even if the object does not need to be on a form. For example, images do not need to be on a form. The following code refers to an image that is on a form: 4

5 Figure 1: Object Hierarchy in Netscape 5

6 document.myform.myphoto.src='jc.jpg' The following code refers to an image that is not on a form: 3.2 Navigator's Object Arrays document.myphoto.src='jc.jpg' Some Navigator objects have properties whose values are themselves arrays. They are also called collections, which are arrays of elements that we can refer to by indices. These arrays are used to store information, and their sizes can grow and shrink dynamically. Table 1 describes those properties of objects that have arrays as values. Object Property Description document anchors Reæects a document's éaé tags that contain a NAME attribute in source order applets Reæects a document's éappleté tags in source order embeds Reæects a document's éembedé tags in source order forms images Reæects a document's éformé tags in source order Reæects a document's éimgé tags in source order èimages created with the Imageèè constructor are not included in the images arrayè links Reæects a document's éarea HREF="..."é tags, éa HREF="..."é tags, and Link objects created with the link method in source order Function arguments Reæects the arguments to a function Form elements Reæects a form's elements èsuch as Checkbox, Radio, and Text objectsè in source order select options Reæects the options in a Select object èéoptioné tagsè in source order window frames Reæects all the éframeé tags in a window containing a éframeseté tag in source order history Reæects a window's history entries navigator mimetypes Reæects all the MIME types supported by the client èeither internally, via helper applications, or by plug-insè plugins Reæects all the plug-ins installed on the client in source order Table 1: Predeæned JavaScript arrays Furthermore, we can index arrays by either their ordinal number or their name èif deænedè. For example, suppose an HTML document has only one form, and the ærst element in this form is deæned as: éinput TYPE="text" NAME="Name1"é Then we can refer to this form element by document.formsë0ë.elementsë"name1"ë or document.formsë0ë.elementsë0ë. 6

7 4 Important Objects in Navigator's Object Hierarchy 4.1 Window and Frame Objects The window object is the "parent" object for all other objects in Navigator, and we can create multiple windows in a Navigator JavaScript application. A Frame object is deæned by the FRAME tag in a FRAMESET document. Frame objects have the same properties and methods as window objects and diæer only in the way they are displayed. The window object has numerous useful methods, for example: open and close: alert: conærm: prompt: blur and focus: scrollto: setinterval: settimeout: Opens and closes a browser window, and we can specify the size of the window, change its content and add button bar, location æeld and other attributes in it. Displays an Alert dialog box with a message. Displays a Conærm dialog box with OK and Cancel buttons. Displays a Prompt dialog box with a text æeld for entering a value. Removes focus from, or gives focus to a window. Scrolls a window to a speciæed coordinate. Evaluates an expression or calls a function each time the speciæed period elapses. Evaluates an expression or calls a function once after the speciæed period elapses. Window also has several properties that we can set, like location and status. Property location is used to redirect the client to another URL, and status property to used to set the message in the status bar at the bottom of the client window. Furthermore, we can refer to the properties, methods, and event handlers of the current window or another window èif the other window is namedè, by using any of the following techniques: self or window: top or parent: The name of a window variable: Omit the window name: self and window are synonyms for the current window. top and parent are synonyms that we can use in place of the window name. top refers to the topmost Navigator window, and parent can be used by a frame to refer to the frameset window that contains that frame. The window variable is the variable speciæed when a window is opened. Because the existence of the current window is assumed, by default it refers to the name of the window when we call its methods and assign its properties. 4.2 Document Object Document object is a very useful Navigator object, since its write and writeln methods can generate an HTML page on the æy. Each page has only one document object. The document object has a number of properties that reæect the colors of the background, text, and links in a page, like: bgcolor, fgcolor, linkcolor, alinkcolor, and vlinkcolor. Other useful document properties include lastmodiæed, the date the document was last modiæed, 7

8 referrer, the previous URL the client visited, and URL, the URL of the document. The cookie property enables one to get and set cookie values. The document object is the ancestor for all the Anchor, Applet, Area, Form, Image, Layer, Link, and Plugin objects in a page. 4.3 Form Object Each form in a document creates a form object, and each document can contain more than one form. Form objects are stored in an array called forms. The ærst form ètopmost in a pageè is formsë0ë, the second formsë1ë, and so on. Likewise, elements in a form, such as text æelds, radio buttons, and so on, are stored in an elements array, and the ærst element in the ærst form can be referred as document.formsë0ë.elementsë0ë Each form element has a form property that is a reference to the element's parent form. This property isvery useful in event handling, since it can be used to refer to another element on the current form. 4.4 Location Object The location object has properties based on the current URL. For example, the hostname property is the server and domain name of the server hosting the document. The location object has two methods: 4.5 History Object reload forces a reload of the window's current document. replace loads the speciæed URL over the current history entry. The history object contains a list of strings representing the URLs the client has visited. Each entry in the history array is a string containing a URL. We can access the current, next, and previous history entries by using the history object's current, next, and previous properties. We can also redirect the client to any history entry by using the go method. The history list is displayed in the Navigator Go menu. 4.6 Navigator Object The navigator object contains information about the version of Navigator in use. For example, the appname property speciæes the name of the browser, and the appversion property speciæes version information for the Navigator. The navigator object helps us in determing what browser a page is running, and hence let us to write JavaScript in an HTML document that works for diæerent types of browsers. This is the main use of a navigator object. For example, Microsoft Internet Explorer use JScript, which is somewhat diæerent from that of JavaScript used in Netscape. With the navigator object, we can write codes in an HTML document that can work for both type of browsers: 8

9 éscript if if éèscripté LANGUAGE = JAVASCRIPTé ènavigator.appname == "Netscape"èf Some Code g ènavigator.appname == "Microsoft Internet Explorer"è f Other Code g 4.7 Event Object Starting from Netscape 4.0 this feature was added èthis feature is also in Javaè. Each event has an associated event object. The event object provides information about the event, such as the type of event and the location of the cursor at the time of the event. When an event occurs, and if an event handler has been written to handle the event, the event object is sent as an argument to the event handler. We will explore event handlings in the next section. 5 JavaScript's Event Driven Approach JavaScript applications in the Navigator are largely event driven. Events are actions that occur usually as a result of something the user does. For example, clicking a button is an event, as is changing a text æeld or moving the mouse over a link. For JavaScript to react to an event, we need to deæne event handlers. Event handlers corresponds to their associated events. They are scripts that execute automatically when events occur. Most deferred JavaScript functions èdeæned within the éheadé of an HTML æleè are called by event handers. Each event handler is associated with an event. Event handlers are embedded in documents as attributes of HTML tags to which JavaScript codes are assigned. The general syntax is: étag eventhandler="javascript code"é Table 2 is a comprehensive list of all the events and their associated handlers. 6 JavaScript and Java JavaScript and Java are similar in some ways but fundamentally diæerent in others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript supports most Java expression syntax and basic control æow constructs. In contrast to Java's compile time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype based object model instead of the more common class based object model. The prototype based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods. Java is an object oriented programming language designed for fast execution and type safety. Type safety means, for instance, that we can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's object oriented model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript authoring. In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dbase. These scripting languages oæer programming tools to a much 9

10 Event Applies to Occurs when Event handler Abort images User aborts the loading of an onabort image èfor example by clicking a link or clicking the Stop buttonè Blur windows and all form User removes input focus elements onblur from window or form element Change text æelds, textareas, select User changes value of element onchange lists Click buttons, radio buttons, checkboxes, User clicks form element or onclick submit buttons, reset buttons, links link DragDrop windows User drops an object onto the ondragdrop browser window, such as dropping a æle on the browser window Error images, windows The loading of a documenton onerror or image causes an error Focus windows and all form elements User gives input focus to window onfocus or form element KeyDown documents, images, links, text User depresses a key onkeydown areas KeyPress documents, images, links, text User presses or holds down a onkeypress areas key KeyUp documents, images, links, text User releases a key onkeyup areas Load document body User loads the page in the onload Navigator MouseDown documents, buttons, links User depresses a mouse button onmousedown MouseMove nothing by default User moves the cursor onmousemove MouseOut areas, links User moves cursor out of a onmouseout client-side image map or link MouseOver links User moves cursor over a link onmouseover MouseUp documents, buttons, links User releases a mouse button onmouseup Move windows User or script moves a window onmove Reset forms User resets a form èclicks a Reset onreset buttonè Resize windows User or script resizes a window onresize Select text æelds, textareas User selects form element's input onselect æeld Submit forms User submits a form onsubmit Unload document body User exits the page onunload Table 2: JavaScript's Event Handling 10

11 wider audience because of their easier syntax, specialized built-in functionality, and minimal requirements for object creation. Table 3 is a summary of the comparisons between JavaScript and Java. JavaScript Interpreted ènot compiledè by client. Object-based. No distinction between types of objects. Inheritance is through the prototype mechanism and properties and methods can be added to any object dynamically. Code integrated with, and embedded in, HTML. Variable data types not declared èloose typingè. Dynamic binding. Object references checked at runtime. Cannot automatically write to hard disk. Java Compiled bytecodes downloaded from server, executed on client. Object-oriented. Objects are divided into classes and instances with all inheritance through the class hierarchy. Classes and instances cannot have properties or methods added dynamically. Applets distinct from HTML èaccessed from HTML pagesè. Variable data types must be declared èstrong typingè. Static binding. Object references must exist at compile-time. Cannot automatically write to hard disk. Table 3: JavaScript compared to Java 7 Live Connect between Java and JavaScript LiveConnect enables communication between JavaScript and Java applets in an HTML document, and between JavaScript and plug-ins loaded on a page. LiveConnect is enabled by default in Navigator 3.0 and later version, and both Java and JavaScript must be enabled for LiveConnect to work. 7.1 JavaScript to Java Communication LiveConnect provides three ways for JavaScript to communicate with Java: æ Call Java methods directly. æ Control Java applets. æ Control Java plug-ins Accessing Java Directly JavaScript can make direct calls to Java methods through the Java Console window. In JavaScript, Java packages and classes are properties of the Packages object. Use Java syntax to refer to Java objects in JavaScript as: ëpackages.ëpackagename.classname.methodname 11

12 The name Packages is optional for java, sun, and netscape packages. java, sun, and netscape are aliases for Packages.java, Packages.sun, and Packages.netscape respectively. The name Packages is required for other packages. In addition, we can even use Java class constructors in JavaScript. For example, the following JavaScript code creates a Java Date object and prints it to the Java Console: Controlling Java Applets var mydate = new java.util.dateèè System.out.printlnèmyDateè We can use JavaScript to control the behavior of a Java applet without knowing much about the internal construction of the applet. All public variables, methods, and properties of an applet are available for JavaScript access. Each applet in a document is reæected in JavaScript as document.appletname, where appletname is the value of the NAME attribute of the éappleté tag. The applets array also contains all the applets in a page. Thus, we can refer to elements of the array through the applet name èas in an associative arrayè or by the ordinal number of the applet on the page èstarting from zeroè. In addition, all public variables declared in an applet, and its ancestor classes and packages are applet are available to JavaScript as methods and properties of the Applet object. We can get and set property values, call methods that return string, numeric, and boolean values of an applet. For example, if the ærst applet in a document ètopmost of the pageè has a public method methodèint nè, we can refer to it in JavaScript by: document.appletsë0ë.methodè30è Controlling Java Plug-ins Each plug-in in a document is reæected in JavaScript as an element in the embeds array. If the plug-in is associated with the Java class netscape.plugin.plugin, then we can access its static variables and methods the way we access an applet's variables and methods Data Type Conversion Values passed from JavaScript to Java are converted as follows: æ Strings, numbers and Boolean values are converted to Java String, Float, and Boolean objects respectively. æ Objects that are wrappers around Java objects are unwrapped. æ Other objects are wrapped with a JSObject. This means that all JavaScript values appear in Java as objects of class java.lang.object. To use them, generally we need to cast them to the appropriate subclass of Object, for example: èstringè window.getmemberè"name"è; èjsobjectè window.getmemberè"document"è; 12

13 7.2 Java to JavaScript Communication To access JavaScript methods, properties, and data structures from a Java applet, we need to import the Netscape javascript package: import netscape.javascript.* The package netscape.javascript deænes the JSObject class and the JSException exception object. Further, the author of an HTML page must permit an applet to access JavaScript by specifying the MAYSCRIPT attribute of the éappleté tag. This prevents an applet from accessing JavaScript on a page without the knowledge of the page author. Attempting to access JavaScript from an applet that does not have the MAYSCRIPT attribute generates an exception. The MAYSCRIPT tag is needed only for Java to access JavaScript; it is not needed for JavaScript to access Java Accessing JavaScript Objects and Properties Before an applet can access JavaScript, we must get a handle for the Navigator window by using the getwindow method in the class netscape.javascript.jsobject, and pass it to the Applet object. Then, getmember method in the class netscape.javascript.jsobject lets us to access each JavaScript objects èand propertiesè in a containership path in turn. In fact, JavaScript objects appear as instances of the class netscape.javascript.jsobject in Java. For example, if the JavaScript object document.testform.jazz is a checkbox, then the following Java code can be used to access its checked property: public void initèè í win = JSObject.getWindowèthisè; JSObject doc = èjsobjectè win.getmemberè"document"è; JSObject myform = èjsobjectè doc.getmemberè"testform"è; JSObject check = èjsobjectè myform.getmemberè"jazz"è; Boolean ischecked = èbooleanè check.getmemberè"checked"è; í Calling JavaScript Methods The eval method in the class netscape.javascript.jsobject let us evaluate an arbitrary JavaScript expression by using eval to access a JavaScript method. The syntax to call JavaScript methods is as follows: JSObject.getWindowèè.evalè"expression"è where expression is a JavaScript expression that evaluates to a JavaScript method call. Another way to call JavaScript methods is with the call method of JSObject. We can use the following syntax to call a JavaScript method from Java, if passing of Java objects as arguments is intended: JSObject.callèmethodName, argarrayè 13

14 where argarray is an Array ofjava objects used to pass arguments to the JavaScript method. In fact, we can call user-deæned functions in an HTML page from a Java applet with the same syntax, by using a user-deæned function name as methodname. Notice that to pass primitive values to a JavaScript method, we need to use the Java object wrappers èsuch asinteger, Float, and Booleanè, and then populate an Array with such objects. Moreover, for functions that receive no arguments, args2 needs to be declared as an array with no elements Data Type Conversion Values passed from Java to JavaScript are converted as follows: æ Java byte, char, short, int, long, æoat, and double are converted to JavaScript numbers. æ A Java boolean is converted to a JavaScript boolean. æ An object of class JSObject is converted to the original JavaScript object. æ An object of any other class is converted to a JavaScript wrapper, which can be used to access methods and æelds of the Java object. Converting this wrapper to a string will call the tostring method on the original object; converting to a number will call the æoatvalue method if possible and fail otherwise. Converting to a boolean will attempt to call the booleanvalue method in the same way. æ Java arrays are converted to a JavaScript pseudo-array object; this object behaves just like a JavaScript Array object: we can access it with the syntax arraynameëindexë èwhere index is an integerè, and determine its length with arrayname.length. 8 Some Application Examples 8.1 Status Bar The status bar is found at the bottom of the browser window. It normally displays the current status of the document being loaded. In terms of JavaScript, the status bar is a direct property of the window object. It is normally represented as window.status. One can also refer to the status bar of the current window as self.status. The contents of the status bar should never tried to be read as it usually generates an error, however setting its value is permitted. In fact this gives us the capability to create banners. Deferred scripts èthe functions that are deæned within the éheadé tag of the html documentè are used to write to the status bar. Another feature that has gained popularity is that when mouse is pointing over a link something related to it is displayed in the status bar. The event handler onmouseover is used for this purpose. It is important to know that this event handler should always return the value true. Besides creating fun stuæ like banners status bar can be used as an additional output device for displaying critical values while debugging the script. While working on this project we developed banners of several types. One was T-Banner in which the output was written to the status bar giving the eæect of as if someone was typing character by character. Another was N-Banner or the normal banner in which the text æowed from right to left. Lastly we also tried the R-Banner which displays the characters randomly. 14

15 8.2 Cookies Cookies are a general mechanism which server-side applications èsuch as CGIè and client-side JavaScript can use to store textual data on the client side for the purpose of later retreival. They are titbits of information, stored in a browser dependent format on the client machine. On the Unix platform, Netscape holds all the cookies under the $HOMEè.netscape directory, with the æle name cookies which isa simple text æle format. A cookie is introduced to the client in an HTTP request, usually by the CGI script, using the syntax: Set-Cookie: NAME=VALUE; expires=date; path=pathname; domain=domain NAME; secure Below is a brief explanation of what the attributes are: name=value: expires=date: path=pathname: domain=domain name: secure: name is the name of the cookie by which it can be referenced later, in fact, this provides the only way to access the cookie in future. This is used for setting the expiration date of the cookie. If it is not set explicitly then the cookie lasts as long as the current session. This can be set by using the Date object provided by the JavaScript language. path speciæes a subset of URLs in a domain for which a cookie is valid. If the path is not speciæed, then it is assumed to be that of the document that uses the cookie. This is used for searching a valid cookie. The default value is the host name of the server which generates the cookie response. If speciæed then it means that the response from the client to the server will be sent over the secure communication links only. This is important for applications that needs the users credit card number. A cookie can be overwritten by creating a same cookie with the same name and path as an existing one. To instantly delete a cookie it can be written with an expired one. Also it is possible for the browser to delete cookies if and when they exceed the permissible level. Some of the limitations on cookies are as follows: æ The client can hold upto 300 cookies. æ A cookie can be upto 4KB, including its name values. Cookies which exceeds this limits are trimmed to æt. æ A maximum of 20 cookies per server or domain name are allowed. A client is not expected to exceed these limits. If such is the case then the oldest cookies are deleted. The cookie that we implemented is a reminder for a month. It has a lifetime of a month. It does takes it size to a very high limit with the possibility ofexceeding 3100 bytes depending on the user setting, but care is taken if the size does reach the limitation of 4000 bytes. 15

16 9 Experiences 9.1 Some of Our Experiences on JavaScript The two main Web browsers today are Netscape Navigator and Microsoft Internet Exploer. Because JavaScript is a Netscape product and since they are slow to supply the speciæcation to Microsoft, so Microsoft simply reverse engineered JavaScript, creating its own version named JScript. For most purposes, JavaScript and JScript are close enough that we don't need to worry about the diæerences. But in some cases, there are indeed diæerences. For example, all HTML elements can be treated as objects in Internet Exploer, but that's not true in Netscape Navigator. Thus, to write a single HTML document that works in both browsers, we need to use the browser's navigator object to determine the type of browser and write appropriate codes for each of them. It reveals how important standardization's on JavaScript can help and save programmer's times and eæorts. While we were writing and testing JavsScript scripts, we found that Internet Explorer and Navigator report errors in the script in diæerent ways. The former pops up and separate alert windows for every error it encounters in the script where as the latter the errors are displayed in a separate console which has to be explicitly invoked by the user when he types "javascript:" at the location box. Since JavaScript is intended for ease of use, it is not very restrictive insyntax. For example, a string can be double-quoted, single-quoted or even not quoted. An expression can be ended with or without a semi-colon and in some situations, a function name can be followed by an optional pair of parentheses. This maybe an advantage for JavaScript to be widely accepted, but it leads people to have a bad programming practice, even though it was designed by the programmers and not language architects. Out of the many features of JavaScript, we learned the usefulness of using settimeoutèè and cleartimeoutèè functions to add dynamic behavior to a Web page. For example, graphical animations, scrolling texts and clocks can be done easily with settimeoutèè functions. Designing remote control was fun and understanding cookies was quit a learning experience. After a long time working on JavaScript, you will dream about it at night! 9.2 Some Non JavaScript Experiences Besides learning JavaScript during the course of this project we had chance to learn some Cascading Style Sheet features and CGI programming. We tried to implement both inline and external style sheets. All the æles in the directory use the external style sheet æle report.css which is located in the directory stylesheets. Inline style sheet example can be found in the æle head.html. This feature is indeed very powerful and we feel that it can come in quite handy for an eæcient maintenance and development ofaweb site. CGI programming was also interesting to understand and implement. We wrote our CGI programs in C and implemented to create a mailing list. The veriæcation of input data is done at the client side and upon successful submission, the CGI program "mlist" is executed. The program simply appends the mailing address to the æle "maillist.txt". Here in our department one needs to put CGI programs on the CGI machine at cgi.mcs.kent.edu. 16

17 10 Conclusion JavaScript is indeed a powerful contender for leading the internet based languages. Its unique execution capability from inside the browser at the client side makes Web pages lively and interactive. Its design represents the next generation of software for internet and is: designed for creating network centric applications, complementary and integrated with Java and HTML, open and cross platform. To summarize we quote, Rose Ann Giordano, vice president of the Internet Business Group at Digital Equipment Corp., "Tools like JavaScript will unleash a new wave of creativity and transform the Internet in ways no one can predict". 11 References 1. Stephen Asbury, Jason Mathews, Selena Sol, Kevin Greer, Jason Matthews, CGI How-To: The Deænitive CGI Scripting Problem-Solver, Waite Group Pr., Daniel J. Berlin, CGI Programming Unleashed, Sams Net, Arman Danesh, Teach Yourself JAVASCRIPT 1.1 in a Week, Second Edition, Sams Net, David Flanagan, JavaScript: The Deænitive Guide, 3rd Edition, O'Reilly, Danny Goodman, JavaScript Bible, 3rd Edition, IDG Books Worldwide, Steven Holzner, JavaScript Complete, McGraw-Hill, Laura Lemay and Arman Danesh, Teach Yourself Web Publishing With Html 4 in a Week, 4th Edition, Sams net, Thomas A. Powell, HTML: The Complete Reference, McGraw-Hill, Yehuda Shiran and Tomer Shiran, Learn Advanced JavaScript Programming, Wordware Publishing Inc., Janice Winsor and Brian Freeman, Jumping JavaScript, Sun Microsystems Press, Some useful links: On Netscape's JavaScript æ æ On Microsoft's JScript æ æ About Resources on JavaScript æ 17

18 æ JavaScriptForumè æ About Java and JavaScript æ 12 Appendix The organization of our programming implementations on JavaScript is depicted in Figure 2 /vol/bansal/gradresearch/users/rpasari/public_html stylesheets news image download documents cgi-bin wheel.java wheel.class Seminar.html remote.html Our.html McsNews.html index.html head.html siteoverall.css report.css *.html *.jpg *.gif report.ps features.html jslinks.html javaandjs.html reply.c mlist.html mlist.c Figure 2: Organization of our programming implementations on JavaScript Below is a brief description of the æle hierarchy: æ head.html: Cookies are implemented in this æle. It has an input æled that can submit an address to the CGI program mlist, and add that address in an mailing list. æ index.html: Features on connections and communications between JavaScript and Java are implemented in this æle. Passing arguments between JavaScript and Java applet are implemented, together with the use of Java Objects and Java Console window in JavaScript. The applet "wheel.class" is loaded by this æle, and the use of location object is also illustrated. æ McsNews.html: Diæerent kinds of windows are included in this æle. Besides ordinary windows, alert boxes, conærm boxes and prompt boxes are also included. By using the date object, diæerent HTML æles are automatically loaded, depending on the value of the 18

19 date. Try the "Today's message" button as an example. In addition, navigator objects are also included to determine the browser's type. Further, after a user's click on the "Enjoy:" button, a window which consists of a submittable form comes out, and can call the CGI program reply. æ Our.html: Graphics animations, scrolling text and a countdown counter are used to illustrate the strengths of settimeout functions. Diæerent event handlers are used to change images, and used to display messages and images before clicking a link. Dynamic changes of a link's value are also implemented. The use of JavaScript on document.bgcolor property and history objects are also demonstrated, together with some JavaScript computational abilities. æ remote.html: A remote control created by JavaScript. æ Seminar.html: It demonstrates the communication between a group of radio buttons and check boxes by using JavaScript. Computational capacity of JavaScript is also implemented. Moreover, date objects are used to displaytoday's date, and to displayaclock with the use of settimeout functions. Simple stylesheet properties on éh1é are also implemented. æ wheel.java: A Java program which is used to create an applet. æ wheel.class: Compiled Java bytecodes from wheel.java. In subdirectory: æ cgi-bin, it consists of all the CGI programs used in our project. æ documents, it consists of three HTML æles. javaandjs.html describes the connection between Java and JavaScript, jslinks.html consists of useful links to JavaScript, and features consists of some useful features of JavaScript. æ image, it consists of all the "gif" images and "jpg" images used by all the HTML æles. æ news, it consists of all the HTML æle that may be called by "McsNews.html". æ download, it consists of a downloadable postscript æle, report.ps, of our report. æ stylesheets, it consists of two.css æles, which are used to control the style of our report. 19