Download presentation
Presentation is loading. Please wait.
1
for the Web (client and server applications)
JavaScript Netscape's Interpreted object-based Scripting Language for the Web (client and server applications)
2
Netscape's JavaScript Guide
Old Link:
3
W3C Links: http://www.w3schools.com/ JavaScript Reference:
JavaScript Tutorial:
4
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
5
JavaScript 1.5 http://www.mozilla.org/js/
sanborns/Server/Online/Output/contents.htm Core JavaScript 1.5 Client-Side JavaScript v1.3 Server-Side JavaScript 1.4 LiveWire Developer's Guide
6
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.
7
JavaScript
8
ECMAScript JavaScript standard is known as ECMAScript.
Submitted for standardization in 1996 by Netscape.
9
DOM
10
ECMA : www.ecma.ch http://www.ecma-international.org/
11
View source of www.ecma.ch
<html> <head> <title>Redirect to ecma-international.org</title> <script> setTimeout("window.location.replace(' , 5000) </script> </head> <body> <br></br> <h1 align="center">We have moved to <a href=" <br> please update your favorites.</h1> <h2 align="center">Redirecting.... (within 5 seconds)</h2> </body> </html>
12
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 through its enhanced scripting object model. (Scripting Reference - HomeSite)
13
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 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 for Netscape's JavaScript information, or 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)
14
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”
15
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 >
16
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.
17
JavaScript Objects JavaScript has predefined objects for the
core language, as well as additions for client-side and server-side JavaScript.
18
JavaScript core Objects
JavaScript has the following core objects: Array, Boolean, Date, Function, Math, Number, Object, String
19
Client-side objects
20
Scripting Object Model hierarchy:
21
JavaScript
22
JavaScript
23
JavaScript
24
More JavaScript Links JavaScript Guide from Netscape (Complete Reference): Very Good Site for Java Script: JavaScript Object Reference: The JavaScript Weenie - Free JavaScript tutorials, examples and reference mate JavaScript: All sorts of tutorials: JavaScript Basics: JavaScript Book by Deitel & Deitel (PowerPoint Lecture Notes):
25
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.
26
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.
27
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.
28
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.
29
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.
30
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.
31
JScript Jscript is a variation of JavaScript developed by Microsoft.
32
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!
33
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.
34
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>
35
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"+minutes if (seconds<10) seconds="0"+seconds var thetime=hours+":"+minutes+":"+seconds+" "+suffix document.time.time2.value=thetime setTimeout("liveclock()",1000) } liveclock() </script>
36
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>.
37
Simple example of JavaScript!
<html> <head><title>This is an example page</title></head> <body> Welcome to the JavaScript course! <script language="JavaScript"> <!-- document.write("This text is written using JavaScript!") //--> </script> </body> </html>
38
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 <!-- 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!
39
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.
40
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"> <!-- // this script does nothing and is useless! /* Hay, don't involve me in this! */ //--> </script>
41
Units of programming JavaScript, like many programming languages, relies on objects, functions, and event handlers (are functions as well) to create workable programs.
42
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.
43
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.
44
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.
45
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)
46
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.lastModified document.write("This page was last modified: "+ modifiedDate) </script> Output: This page was last modified: 10/30/97 03:40:56
47
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
48
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 }
49
Creating your own JavaScript functions
function test() { document.write("Hello there!") } We've just created a simple function.
50
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.
51
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)
52
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>
53
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 </script>
54
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): Quick Reference from Shelly Cahsman: JavaScript Object Reference:
55
JavaScript Complete Reference
JavaScript Complete Reference from Danny Goodman (4 Pages): (NS4_Obj.pdf) JavaScript Guide from Netscape (Complete Reference): there is a pdf file available (jsguide.pdf) Quick Reference from Shelly Cahsman: JavaScript Object Reference:
56
Client-side JavaScript objects
57
Client-side JavaScript objects
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
58
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.
59
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
60
"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 <script> 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!')"
61
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 : <TAG eventHandler="JavaScript Code"> where TAG is an HTML tag, eventHandler is the name of the event handler, and JavaScript Code is a sequence of JavaScript statements.
62
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: <INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)"> Ref:
63
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>
64
Try this: (it will change the background color of a document interactively)
<form name="go"> <input type="checkbox" name="C1" onclick="document.bgColor='lightblue'"> <input type="checkbox" name="C2" onclick="document.bgColor='lightyellow'"> input type="checkbox" name="C3" onclick="document.bgColor='lightgreen'"> </form> Ref:
65
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. <a href="blabla.htm" onmouseover="status='Do not click here, its empty!';return true" onmouseout="status=' '">Don't Click Here</a>
66
The alert, confirm, and prompt boxes
The three "commands" involved in creating alert, confirm, and prompt boxes are: window.alert() window.confirm() window.prompt()
67
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>
68
A Note on Data Types 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
Similar presentations
