1. JavaScript Netscape's Interpreted object-based Scripting Language for the Web (client and server applications)

2. JavaScript 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 JavaScript

3. ECMAScript JavaScript standard is known as ECMAScript. Submitted for standardization in 1996 by Netscape.

4. ECMA : www.ecma.ch

5. JavaScript JavaScript 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 (v3.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.ECMA (Scripting Reference - HomeSite)

6. Javascript JavaScript 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 (v3.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.ECMA For more information on JavaScript, visit http://www.mozilla.org/js/ for Netscape's JavaScript 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 JavaScript scripts within HTML documents, not how to author actual scripts. Such information is well beyond the scope of this reference.http://www.mozilla.org/js/http://msdn.microsoft.com/scripting/ECMA (Scripting Reference - HomeSite)

7. JavaScript A Scripting Reference is now included in the HTMLib. HTMLib is accessible from within the HomeSite 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 “HomeSite” –click on the “Help” button or choose “Open Help References Window” from the “Help” menu. –expand “HTML Reference” and –then “scripting reference”

8. JavaScript A script is embedded in HTML within a element. –... The text of a script is inserted between and its end element. Attributes within the element can be specified as follows: –...

9. Scripting Object Models The topics in the next slide are basically an object quick reference and should not be treated as any kind of replacement for the documentation provided by either Microsoft or Netscape. 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. The hierarchy is as follows :

10. Scripting Object Models

11. JavaScript Links JavaScript Guide from Netscape (Complete Reference): –http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm Very Good Site for Java Script: –http://www.wsabstract.com/howto/ JavaScript Object Reference: –http://www.htmlstuff.com/programmer/jsobjects/index.html The JavaScript Weenie - Free JavaScript tutorials, examples and reference mate –http://javascriptweenie.com/ JavaScript: –http://www.geocities.com/SiliconValley/Sector/5765/About.html All sorts of tutorials: –http://www.eng.uc.edu/~jtilley/tutorial.html JavaScript Basics: –http://www.pageresource.com/jscript/jbasics.htm JavaScript Book by Deitel & Deitel (PowerPoint Lecture Notes): –http://www.deitel.com/books/iw3htpepowerpt.htm

12. What is JavaScript? It is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include: –live clocks, –rollover effects, –scrollers, popup windows –form validations, and so on. JavaScript differs from most other programming languages in that it is relatively easy to master, even for people who have absolutely no programming experiences whatsoever.

13. JavaScript in Browsers Web browsers can interpret client-side JavaScript 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 JavaScript statements, over the network to the client. The client reads the page from top to bottom, displaying the results of the HTML and executing JavaScript statements as it goes.

14. JavaScript on the Server On the server, you also embed JavaScript 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 LiveConnect and Java. HTML pages with server-side JavaScript can also include client-side JavaScript. In contrast to pure client-side JavaScript scripts, HTML pages that use server-side JavaScript are compiled into bytecode executable files. These application executables are run in concert with a Web server that contains the JavaScript runtime engine. This makes creating JavaScript applications a two-stage process.

15. 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., JavaScript, 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 comapred to compiled programs.

16. 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., HotJava Recent Browers incorporated Java interpreter.

17. 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. JavaScript is a subset of Java and don’t need to be compiled, it is an interpreted only language.

18. JScript Jscript is a variation of JavaScript developed by Microsoft.

19. What's the difference between Java and JavaScript? Java is completely different from JavaScript 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 JavaScript, no compilation is needed- simply open up a text editor, type it, save it, and your browser is ready to run it!

20. Writing your first script for your Web Page A bare-bone script consists of only two lines: The tag: The actual JavaScript codes will fall inside this tag.

21. JavaScript Simple live clock This script displays a "live" form clock on your web page: Source code: function liveclock() { var curdate=new Date() document.writeln= curdate } liveclock()

22. JavaScript live clock This script displays a "live" form clock on your web page: Source code: function liveclock(){ var curdate=new Date() var hours=curdate.getHours() var minutes=curdate.getMinutes() var seconds=curdate.getSeconds() var suffix="AM" if (hours>=12){ suffix="PM" if (hours>=13) hours-=12 } if (minutes

23. Where do your JavaScript codes go? Any where inside the tags of your page. The beginning of your code begins with and ends with.

24. Simple example of JavaScript! This is an example page Welcome to the JavaScript course!

25. Explanation As you can see, we began our script with the tag The part in orange is purely optional, but you should include them to remind yourself-and others that you are using JavaScript now. The second and next to last lines of the above example are, 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!

26. 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 This terminates your script, and brings you back to html.

27. Comments Like html, you can insert comments in your JavaScript 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 multiple ones...*/ For example:

28. Units of programming JavaScript, like many programming languages, relies on –objects, –functions, and –event handlers to create workable programs.

29. Object-Based Programming JavaScript is a Object-Based Programming language. JavaScript is a language that revolves around the "object" concept, meaning that the majority of what you do with JavaScript involves merely picking of one JavaScript's pre-made code and accessing it.

30. Using the document object to explain objects. The document object is one of the most important objects of JavaScript. Lets have a look at a very simple JavaScript 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.

31. method and property JavaScript 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 JavaScript as a language learn these objects, and you are a JavaScript programmer! It is the object that controls the layout of a webpage- 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.

32. document Object Properties bgColor (changes bgcolor) lastModified (gives date of document's last change) referrer (gives URL of the page that linked here) fgColor (changes foreground color (text)) Methods write (writes something) writeln (writes in new line)

33. 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: var modifiedDate modifiedDate =document.lastModified document.write("This page was last modified: "+ modifiedDate) Output: This page was last modified: 10/30/97 03:40:56

34. 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(): Exapmle of Client-side JavaScript alert var curdate=new Date() document.write(curdate) Output: Tue Nov 28 15:09:14 EST 2000

35. JavaScript 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 }

36. Creating your own JavaScript functions function test() { document.write("Hello there!") } We've just created a simple function.

37. Calling a JavaScript function Note that if only the function were within your 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.

38. 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)

39. Prompting for Data 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)

40. 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: var d=diameter(5) //d will contain 10 var a=3.14*diameter(5) //a will contain 31.4

41. JavaScript Object Reference JavaScript 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 JavaScript a little easier. Client-side JavaScript objects Anchor, Applet, Array, Boolean, Button, Checkbox, Date, document, event, FileUpload, form, Frame, Function, Hidden, History, Image, Java, JavaArray, JavaClass, JavaObject, JavaPackage, Layer Link, Location, Math, MimeType, Navigator, netscape, Number, Object, Option, Packages, Password, Plugin, Radio, RegExp, Reset, screen, Select, String, Style, Submit, Sun, Text, Textarea, window. JavaScript Guide from Netscape (Complete Reference): http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm Quick Reference from Shelly Cahsman: http://www.scsite.com/js/qr.htm JavaScript Object Reference: http://www.htmlstuff.com/programmer/jsobjects/index.html

42. JavaScript Complete Reference JavaScript Complete Reference from Danny Goodman (4 Pages): http://www.dannyg.com/update.html(NS4_Obj.pdf) JavaScript Guide from Netscape (Complete Reference): http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm there is a pdf file available (jsguide.pdf) Quick Reference from Shelly Cahsman: http://www.scsite.com/js/qr.htm JavaScript Object Reference: http://www.htmlstuff.com/programmer/jsobjects/index.html

43. Client-side JavaScript objects

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

45. Client-side JavaScript 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. 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.

46. Client-side JavaScript 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 text1 in a form named myform in the current document : document.myform.text1.value

47. "event handlers" in JavaScript A JavaScript function or series of statements to handle an event. They are JavaScript code that are not added inside the tags, but rather, inside the html tags, that execute JavaScript 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="JavaScript code here" For example: onClick="alert('hello!')"

48. 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 JavaScript code in quotation marks as the attribute value. The general syntax is : where TAG is an HTML tag, eventHandler is the name of the event handler, and JavaScript Code is a sequence of JavaScript statements.

49. Assigning a function call to the button's onClick event handler For example, suppose you have created a JavaScript function called compute. You make Browser call this function when the user clicks a button by assigning the function call to the button's onClick event handler: Ref: http://developer.netscape.com/docs/manuals/communicator/jsguide4/evnt.htm#1009710

50. The function inform() is invoked when the user clicks the button. 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") }

51. Try this: (it will change the background color of a document interactively) input type="checkbox" name="C3" onclick="document.bgColor='lightgreen'"> Ref: http://www.wsabstract.com/howto/

52. onMouseover,onMouseout 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. Don't Click Here

53. The alert, confirm, and prompt boxes The three "commands" involved in creating alert, confirm, and prompt boxes are:  window.alert()  window.confirm()  window.prompt()

54. window.alert() This command pops up a message box displaying whatever you put in it. For example: window.alert("Welcome!To my page")

55. Lab Exercise Show the time and date to a Web page. Add a greeting to a Web page based on the time of day. Using mouse event handlers create rollover effect. Display messages when a Web page is opened.

56. JavaScript - 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 –JavaScript 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 9.13 A Note on Data Types