JavaScript

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

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

Recent Version: JavaScript 1.5 http://www.mozilla.org/js/ http://www.mozilla.org/js/js15.html http://developer.netscape.com/docs/manuals/javascript.html • Core JavaScript 1.5 • Client-Side JavaScript v1.3 • Server-Side JavaScript 1.4

Proposed JavaScript 2.0 and ECMAScript Edition 4 • See the JavaScript 2.0 Page for a Netscape proposal for the next version of the JavaScript language. http://www.mozilla.org/js/language/js20/index.html

JavaScript

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

ECMA : www.ecma.ch

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 (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 (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. (Scripting Reference - HomeSite)

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. • 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. • (Scripting Reference - HomeSite)

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 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”

JavaScript • 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="JavaScript">. . .</SCRIPT> <script type=“text/JavaScript">. . .</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.

JavaScript Objects JavaScript has predefined objects for the • core language, as well as additions for • client-side and • server-side JavaScript.

JavaScript coreObjects JavaScript has the following core objects: • Array, • Boolean, • Date, • Function, • Math, • Number, • Object, • String

Client-side objects

Scripting Object Model hierarchy:

JavaScript

More JavaScript Links • JavaScript Guide from Netscape (Complete Reference): • http://developer.netscape.com/docs/manuals/javascript.html • 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

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.

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.

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.

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

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

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!

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 JavaScript codes will fall inside this tag.

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

JavaScript live clock • This script displays a "live" clock on your web page: • Source code: <form name="time"><input type="text" name="time2" size=15></form><script>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<10)minutes="0"+minutesif (seconds<10)seconds="0"+secondsvar thetime=hours+":"+minutes+":"+seconds+" "+suffixdocument.time.time2.value=thetimesetTimeout("liveclock()",1000)}liveclock()</script>

Where do your JavaScript 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 JavaScript! • <html><head><title>This is an example page</title></head><body>Welcome to the JavaScript course!<script language="JavaScript"></script></body></html>

Explanation • As you can see, we began our script with the tag <script language="JavaScript"> • 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!

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 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: <script language="JavaScript"></script>

Units of programming • JavaScript, like many programming languages, relies on • objects, • functions, and • event handlers (are functions as well) to create workable programs.

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.

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.

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 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 Methods write (writes something) writeln (writes in new line) 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))

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 modifiedDate modifiedDate =document.lastModifieddocument.write("This page was last modified: "+ modifiedDate)</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 JavaScript alert</title> </head> <body> <script> var curdate=new Date() document.write(curdate) </script> </body> </html> • Output: Tue Nov 28 15:09:14 EST 2000

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}

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

Calling a JavaScript 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*60alert("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*xreturn 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 10var a=3.14*diameter(5) //a will contain 31.4</script>

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,LayerLink,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

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT

JAVASCRIPT

JavaScript