Java. Script Netscape's Interpreted object-based Scripting Language for the Web (client and server applications)
Netscape's Java. Script Guide • http: //wp. netscape. com/eng/mozilla/3. 0/han dbook/javascript/index. html Old Link: http: //developer. netscape. com/docs/manuals/javascript. html
W 3 C Links: • http: //www. w 3 schools. com/ • Java. Script Reference: http: //www. w 3 schools. com/jsref/default. asp • Java. Script Tutorial: http: //www. w 3 schools. com/js/default. asp
• Java. Script scripting language – Originally created by Netscape – Facilitates disciplined approach to designing computer programs – Enhances functionality and appearance of Web pages • Jscript – Microsoft’s version of Java. Script
Java. Script 1. 5 http: //www. mozilla. org/js/js 15. html http: //research. nihonsoft. org/javascript/ssjshtml/nes/ssjs/Server. JSv 14/Guidesanborns/Server/Online/Output/contents. htm http: //wp. netscape. com/computing/webbuilding/studio/feature 199811111. html http: //simplythebest. net/info/programming/javascripts. html • Core Java. Script 1. 5 http: //www. webreference. com/javascript/reference/core/ • Client-Side Java. Script v 1. 3 http: //docs. sun. com/source/816 -6408 -10/ • Server-Side Java. Script 1. 4 http: //docs. sun. com/app/docs/doc/816 -5930 -10? l=it Live. Wire Developer's Guide http: //www. wooten. net/livewire. htm
Proposed Java. Script 2. 0 and ECMAScript Edition 4 • See the Java. Script 2. 0 Page for a Netscape proposal for the next version of the Java. Script language. http: //www. mozilla. org/js/language/js 20/index. html
Java. Script
ECMAScript • Java. Script standard is known as ECMAScript. • Submitted for standardization in 1996 by Netscape. http: //www. ecma-international. org/publications/standards/Stnindex. htm
DOM • http: //www. w 3. org/DOM/
ECMA : www. ecma. ch http: //www. ecma-international. org/
View source of www. ecma. ch <html> <head> <title>Redirect to ecma-international. org</title> <script> set. Timeout("window. location. replace('http: //www. ecma-international. org')" , 5000) </script> </head> <body> </br> <h 1 align="center">We have moved to <a href="http: //www. ecmainternational. org">http: //www. ecma-international. org</a>, please update your favorites. </h 1> <h 2 align="center">Redirecting. . (within 5 seconds)</h 2> </body> </html>
Java. Script • Java. Script is currently supported by the Netscape Navigator (version 2 and above) and Internet Explorer (version 3. 0 and above). • Recently, Netscape presented Javascript 1. 1 to the ECMA (http: //www. ecma. ch/), where it has evolved into ECMAScript (or rather ECMA-262), "A general purpose, cross-platform programming language". • Netscape then proceeded to make extensions to Javascript, which became Javascript 1. 2 as supported in the Navigator component of Netscape Communicator. • Microsoft's JScript (v 3. 0 of which ships with Internet Explorer 4. 0) is currently the only full implementation of ECMAScript. • All Javascript 1. 2 extensions are also supported by Internet Explorer 4. 0 through its enhanced scripting object model. (Scripting Reference - Home. Site)
Javascript • Java. Script is currently supported by the Netscape Navigator (version 2 and above) and Internet Explorer (version 3. 0 and above). Recently, Netscape presented Javascript 1. 1 to the ECMA, where it has evolved into ECMAScript (or rather ECMA-262), "A general purpose, cross-platform programming language". Netscape then proceeded to make extensions to Javascript, which became Javascript 1. 2 as supported in the Navigator component of Netscape Communicator. Microsoft's JScript (v 3. 0 of which ships with Internet Explorer 4. 0) is currently the only full implementation of ECMAScript. All Javascript 1. 2 extensions are also supported by Internet Explorer 4. 0 through its enhanced scripting object model. • For more information on Java. Script, visit http: //www. mozilla. org/js/ for Netscape's Java. Script information, or http: //msdn. microsoft. com/scripting/ for Microsoft's scripting languages, or the ECMA site for the official ECMAScript specification. The information provided here only details how to include Java. Script scripts within HTML documents, not how to author actual scripts. Such information is well beyond the scope of this reference. • (Scripting Reference - Home. Site)
Java. Script • A Scripting Reference is now included in the HTMLib. • HTMLib is accessible from within the Home. Site application. • This details various methods of invoking scripts, and a description of the object models of both browsers. • Note that the Internet Explorer object model available through scripting languages covers every element, whereas the Netscape one doesn't. • How to access Scripting Reference in the HTMLib? – From within the “Home. Site 4. 5. 2” – click on the “Help” button • or choose “Open Help References Window” from the “Help” menu. – expand “HTML Reference” and – then “scripting reference”
Java. Script • A script is embedded in HTML within a <SCRIPT> element. <SCRIPT>. . . </SCRIPT> • The text of a script is inserted between <SCRIPT> and its end element. • Attributes within the <SCRIPT> element can be specified as follows: <SCRIPT LANGUAGE="Java. Script">. . . </SCRIPT> <script type=“text/Java. Script">. . . </script >
Scripting Object Models • The topics in the next slide are basically an object quick reference. • For scripting purposes, practically every part of the browser and HTML document can be treated as a discrete object that has several properties and methods that can be accessed and invoked respectively.
Java. Script Objects Java. Script has predefined objects for the • core language, as well as additions for • client-side and • server-side Java. Script.
Java. Script core Objects Java. Script has the following core objects: • Array, • Boolean, • Date, • Function, • Math, • Number, • Object, • String
Client-side objects
Scripting Object Model hierarchy:
Java. Script
Java. Script
Java. Script
More Java. Script Links • Java. Script Guide from Netscape (Complete Reference): – http: //developer. netscape. com/docs/manuals/javascript. html – http: //developer. netscape. com/docs/manuals/communicator/jsguide 4/index. htm • Very Good Site for Java Script: – http: //www. wsabstract. com/howto/ • Java. Script Object Reference: – http: //www. htmlstuff. com/programmer/jsobjects/index. html • The Java. Script Weenie - Free Java. Script tutorials, examples and reference mate – http: //javascriptweenie. com/ • Java. Script: – http: //www. geocities. com/Silicon. Valley/Sector/5765/About. html • All sorts of tutorials: – http: //www. eng. uc. edu/~jtilley/tutorial. html • Java. Script Basics: – http: //www. pageresource. com/jscript/jbasics. htm • Java. Script Book by Deitel & Deitel (Power. Point Lecture Notes): – http: //www. deitel. com/books/iw 3 htpepowerpt. htm
What is Java. Script? • It is a scripting language developed by Netscape to add interactivity and power to web documents. • Examples of Java. Script include: – live clocks, – rollover effects, – scrollers, popup windows – form validations, and so on. • Java. Script differs from most other programming languages in that it is relatively easy to master, even for people who have absolutely no programming experiences whatsoever.
Java. Script in Browsers • Web browsers can interpret client-side Java. Script statements embedded in an HTML page. When the browser (or client) requests such a page, the server sends the full content of the document, including HTML and Java. Script statements, over the network to the client. The client reads the page from top to bottom, • displaying the results of the HTML and • executing Java. Script statements as it goes.
Java. Script on the Server • On the server, you also embed Java. Script in HTML pages. • The server-side statements can connect to relational databases from different vendors, share information across users of an application, access the file system on the server, or communicate with other applications through Live. Connect and Java. • HTML pages with server-side Java. Script can also include clientside Java. Script. • In contrast to pure client-side Java. Script scripts, HTML pages that use server-side Java. Script are compiled into bytecode executable files. These application executables are run in concert with a Web server that contains the Java. Script runtime engine. This makes creating Java. Script applications a two-stage process.
Programs vs. Scripts • Programs - are written in a language (called programming language, e. g. , C++, Pascal), to execute it you need a compiler to translate it to machine code as a whole then execute. • Scripts are also programs - are written in a language (called scripting language, e. g. , Java. Script, PERL ), to execute this program you need an interpreter to translate it to machine code line by line then execute. – So, interpreted programs are slower compared to compiled programs.
Development of Java • In early 1990 programmers at Sun Microsystems began to develop an operating system to control appliances on the network using a language called Oak. • In 1995, Oak was modified and renamed Java to use on the Internet. • The programs written in Java need to compile to Byte Code first, which is machine code for a virtual machines, then run it using an Interpreter. • Independant Interpreters are available for different opeating system. E. g. , Hot. Java • Recent Browers incorporated Java interpreter.
Java Applet • Applets are small applications to run on client’s machine. • It is in separate file than the Web page itself. • The downloaded applet executed by the browser’s built-in interpreter, that reduces the burden on the server. • A Java applet first need to be compiled and needs JDK. • Java. Script is a subset of Java and don’t need to be compiled, it is an interpreted only language.
JScript • Jscript is a variation of Java. Script developed by Microsoft.
What's the difference between Java and Java. Script? • Java is completely different from Java. Script • Java is a full-fledged, object-oriented prog. lang. It belongs in the same league as C, C++, and other compiled languages. Also, you need to compile a Java program (using JDK) before you can run it, • whereas with Java. Script, no compilation is needed - simply open up a text editor, type it, save it, and your browser is ready to run it!
Writing your first script for your Web Page • A bare-bone script consists of only two lines: The <script></script> tag: <script> </script> • The actual Java. Script codes will fall inside this tag.
Java. Script Simple live clock • This script displays a "live" clock on your web page: • Source code: <script> function liveclock() { var curdate=new Date() document. writeln= curdate } liveclock() </script>
Java. Script live clock • This script displays a "live" clock on your web page: • Source code: <form name="time"> <input type="text" name="time 2" size=15> </form> <script> function liveclock(){ var curdate=new Date() var hours=curdate. get. Hours() var minutes=curdate. get. Minutes() var seconds=curdate. get. Seconds() var suffix="AM" if (hours>=12){ suffix="PM" if (hours>=13) hours-=12 } if (minutes<10) minutes="0"+minutes if (seconds<10) seconds="0"+seconds var thetime=hours+": "+minutes+": "+seconds+" "+suffix document. time 2. value=thetime set. Timeout("liveclock()", 1000) } liveclock() </script>
Where do your Java. Script codes go? • Any where inside the <html> </html> tags of your page. • The beginning of your code begins with <script> and ends with </script>.
Simple example of Java. Script! • <html> <head><title>This is an example page</title></head> <body> Welcome to the Java. Script course! <script language="Java. Script"> <!-document. write("This text is written using Java. Script!") //--> </script> </body> </html>
Explanation • As you can see, we began our script with the tag <script language="Java. Script"> • The part in orange is purely optional, but you should include them to remind yourself-and others that you are using Java. Script now. • The second and next to last lines of the above example are <!-- and //-->, which are the comment tags. These tags should ALWAYS be included to help hide your code against older browsers of both Netscape and IE. If you don't include them, and someone is using an old browser, the browser will just "dump" all your code as text onto the screen, in other words, not a pretty sight!
Explanation • The only "functional part" of this script is the document. write(". . . . ") part. It basically writes to the page whatever you put inside the quotation marks. Don't worry so much about why this is so yet, we will discuss this in detail later. We end this entire code with </script> This terminates your script, and brings you back to html.
Comments • Like html, you can insert comments in your Java. Script codes. Comments are ignored by the browser, used for documentation of your code. • Syntax of inserting comments are: // for single-lined comments, or /* for multiple ones. . . */ • For example: <script language="Java. Script"> <!-// this script does nothing and is useless! /* Hay, don't involve me in this! */ //--> </script>
Units of programming • Java. Script, like many programming languages, relies on – objects, – functions, and – event handlers (are functions as well) to create workable programs.
Object-Based Programming • Java. Script is a Object-Based Programming language. • Java. Script is a language that revolves around the "object" concept, meaning that the majority of what you do with Java. Script involves merely picking of one Java. Script's pre-made code and accessing it.
Using the document object to explain objects. • The document object is one of the most important objects of Java. Script. Lets have a look at a very simple Java. Script code. The script below writes out a line of text onto the web page: document. write("This text is written using javascript!") · · "document" is the object in the above example. "write" is the method of this object. (Think of it as the arm and legs of this object that allows it to do something-anything.
method and property • Java. Script is a language of objects, and all objects (95%) of them have both methods and properties. "Document" is just one of the many objects that essentially make up Java. Script as a language • learn these objects, and you are a Java. Script programmer! It is the object that controls the layout of a Web page background color, text, images etc. Now, the word "write" is a method of the document object. • Most objects have more than one method and property (You'll see what property is very soon), and this is true for the document object as well. Lets have a look at some of the others that the document object possesses.
document Object Properties Methods bg. Color (changes bgcolor) write last. Modified (gives date of document's last change) referrer (gives URL of the page that linked here) fg. Color (changes foreground color (text)) (writes something) writeln (writes in new line)
Properties of the document object • They are static attributes of the object. Lets say you want to write out the date and time of the last modification to your page onto the screen. Here's what you would do: • <script> var modified. Date =document. last. Modified document. write("This page was last modified: "+ modified. Date) </script> • Output: This page was last modified: 10/30/97 03: 40: 56
date object • Lets say you want to write out the date and time on your page. Here is how you would use the date object, call the constructor Date(): <html> <head> <title>Exapmle of Client-side Java. Script alert</title> </head> <body> <script> var curdate=new Date() document. write(curdate) </script> </body> </html> • Output: Tue Nov 28 15: 09: 14 EST 2000
Java. Script Functions • What are functions? Functions are chunks of code that together achieve a more complex task, and are not executed until you call them. • The basic syntax of a function is: function whatever_name() { function codes are entered here }
Creating your own Java. Script functions function test() { document. write("Hello there!") } • We've just created a simple function.
Calling a Java. Script function • Note that if only the function were within your <script></script> tags, you will not see "Hello there" on your screen. Like the car you own, it does not drive by itself. To "drive" it, you have to call it: function test() { document. write("Hello there!") } test() • Now the function is ”called", and you will see the words "Hello there!" on the browser screen.
Functions with Parameters • The beauty of functions is that it can receive data from the "outside" world and process it. The term parameter is used as a definition for "what goes into the function. " You can supply different data into the function each time. What this means is that you can create one function, and use it over and over again. An example should clear up this. Lets do an example that calculates the area of a rectangle. The formula is : (width * height) function area(w, h) { var area = w * h alert(area+" sq ft") } area(2, 3) area(5, 7) area(3, 2)
Prompting for Data <script> function cal_secs(age) { var temp=age*365*24*60*60 alert("You have lived "+temp+" seconds!") } var x=prompt("Please enter your age") cal_secs(x) </script>
Functions that return a value function diameter(x) { temp=2*x return temp } • Look at the part in red. This function will take in a radius of a circle, and return the diameter. Lets see how this function may be used in a script: <script> var d=diameter(5) //d will contain 10 var a=3. 14*diameter(5) //a will contain 31. 4 </script>
Java. Script Object Reference • Java. Script has a wide variety of objects you can use when programming, and each of them have different properties you can control or display through the use of methods. This list should make your programming jobs in Java. Script a little easier. Client-side Java. Script objects Anchor, Applet, Array, Boolean, Button, Checkbox, Date, document, event, File. Upload, form, Frame, Function, Hidden, History, Image, Java. Array, Java. Class, Java. Object, Java. Package, Layer Link, Location, Math, Mime. Type, Navigator, netscape, Number, Object, Option, Packages, Password, Plugin, Radio, Reg. Exp, Reset, screen, Select, String, Style, Submit, Sun, Textarea, window. • Java. Script Guide from Netscape (Complete Reference): http: //developer. netscape. com/docs/manuals/communicator/jsguide 4/index. htm • Quick Reference from Shelly Cahsman: http: //www. scsite. com/js/qr. htm • Java. Script Object Reference:
Java. Script Complete Reference • Java. Script Complete Reference from Danny Goodman (4 Pages): http: //www. dannyg. com/update. html (NS 4_Obj. pdf) • Java. Script Guide from Netscape (Complete Reference): http: //developer. netscape. com/docs/manuals/communicator/jsguide 4/index. htm there is a pdf file available (jsguide. pdf) • Quick Reference from Shelly Cahsman: http: //www. scsite. com/js/qr. htm • Java. Script Object Reference: http: //www. htmlstuff. com/programmer/jsobjects/index. html
Client-side Java. Script objects
Client-side Java. Script objects In this hierarchy, an object's "descendants" are properties of the object. For example, a form named form 1 is an object as well as a property of document, and is referred to as document. form 1
Client-side Java. Script objects Every page has the following objects: navigator: 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. 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: contains properties based on the content of the document, such as title, background color, links, and forms. location: has properties based on the current URL. history: contains properties representing URLs the client has previously requested.
Client-side Java. Script objects • Depending on its content, the document may contain other objects. For instance, each form (defined by a FORM tag) in the document has a corresponding Form object. • To refer to specific properties, you must 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, the following refers to the value property of a text field named text 1 in a form named myform in the current document: document. myform. text 1. value
"event handlers" in Java. Script • A Java. Script function or series of statements to handle an event. • They are Java. Script code that are not added inside the <script> tags, but rather, inside the html tags, that execute Java. Script when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. The basic syntax of these event handlers is: name_of_handler="Java. Script code here" • For example: on. Click="alert('hello!')"
Create an event handler for an HTML tag • To create an event handler for an HTML tag, add an event handler attribute to the tag. Put Java. Script code in quotation marks as the attribute value. • The general syntax is : <TAG event. Handler="Java. Script Code"> where TAG is an HTML tag, event. Handler is the name of the event handler, and Java. Script Code is a sequence of Java. Script statements.
Assigning a function call to the button's on. Click event handler • For example, suppose you have created a Java. Script function called compute. You make Browser call this function when the user clicks a button by assigning the function call to the button's on. Click event handler: <INPUT TYPE="button" VALUE="Calculate" on. Click="compute(this. form)"> Ref: http: //developer. netscape. com/docs/manuals/communicator/jsguide 4/evnt. htm#1009710
The function inform() is invoked when the user clicks the button. • <script> function inform() { alert("You have activated me by clicking the grey button! Note that the event handler is added within the event that it handles, in this case, the form button event tag") } </script> <form> <input type="button" name="test" value="Click me" onclick="inform()"> </form>
Try this: (it will change the background color of a document interactively) <form name="go"> <input type="checkbox" name="C 1" onclick="document. bg. Color='lightblue'"> <input type="checkbox" name="C 2" onclick="document. bg. Color='lightyellow'"> input type="checkbox" name="C 3" onclick="document. bg. Color='lightgreen'"> </form> Ref: http: //www. wsabstract. com/howto/
on. Mouseover, on. Mouseout • These handlers are used exclusively with links. . The following example writes something to the status bar (at the bottom of your screen) whenever a mouse cursor hovers over the link, and deletes it when the mouse moves away. <a href="blabla. htm" onmouseover="status='Do not click here, its empty!'; return true" onmouseout="status=' '">Don't Click Here</a>
The alert, confirm, and prompt boxes • The three "commands" involved in creating alert, confirm, and prompt boxes are: window. alert() window. confirm() window. prompt()
window. alert() • This command pops up a message box displaying whatever you put in it. For example: <body> <script> window. alert("Welcome!To my page") </script> </body>
A Note on Data Types • Java. Script - loosely typed language – Does not require variable to have type before use in program (unlike other languages) – Variable can contain a value of any data type – Java. Script often converts between values of different types automatically • When declaring variables – If not given value, variable has undefined value – To indicate variable has no value, assign it null
Скачать презентацию Java Script Netscape s Interpreted object-based Scripting Language for
2514f833568648562559d65a55005303.ppt