chapter 8 javascripts introduction and the syntax csit225 internet programming
TRANSCRIPT
CHAPTER 8JavaScripts
Introduction and the Syntax
CSIT225 Internet Programming
UNIT 82
CSIT 225 – Internet Programming
Where does JavaScript Fit In
• Today, most of the browsers (IE, N.Navigator,…) bringing together a collection of useful Internet-access tools, such as a web client, mail client, ftp client, a news reader.
• Also any new tools and packages can be added to the web browsers.
• These capabilities include an applications programmer's interface (API) for plug-ins.
UNIT 83
CSIT 225 – Internet Programming
Terminology
• Plug-ins are program modules that dynamically extend the capability of an browser to handle new types of data and information, along with JavaScript and Java, which allow the addition of flexible programmability to Web pages.
UNIT 84
CSIT 225 – Internet Programming
Terminology
• Frames: The ability to divide a window into multiple, independent sections.
• Java: An object-oriented programming language for distributed applications.
• JavaScript: A simple, object-based programming (scripting) language used for client side programming.
• Java Applet: Applets are small applications that are included in Web pages and downloaded on demand to be executed by the client browser.
UNIT 85
CSIT 225 – Internet Programming
Terminology
• Class: Class is a term used in object-oriented programming to refer a set of related objects which share common characteristics.
Classes, and the ability to create new classes, are what make object-oriented programming a powerful and flexible programming model.
UNIT 86
CSIT 225 – Internet Programming
Some Features of JavaScript
• JavaScript Programs Are Built into Web Pages As opposed to the independent application files used to
deliver Java applets to Web browsers, the actual source code for JavaScript scripts can be included directly in Web pages.
This is distinct from Java applets which exist independently of the HTML Web pages.
• JavaScript Gives Programmers Access To Browser Properties JavaScript is integrated tightly into HTML and web
browsers. Developers have available to them a wide range of tools
and information to interact with the currently-loaded HTML document, as well as the current browser session.
UNIT 87
CSIT 225 – Internet Programming
Some Features of JavaScript
• JavaScript exposes properties related to the document windows, the history list, the loaded documents, frames, forms, and links to the programmer.
• In addition, JavaScript can be used to trap user events, such as changing form values or pointing at links, so that appropriate programs can be developed for each event.
UNIT 88
CSIT 225 – Internet Programming
Some Features of Java
Java and JavaScript: • Although they are related—JavaScript borrows
most of Java's syntax, for instance—they are fundamentally different and serve different purposes.
• They are complementary rather than competing with each other.
• Java is much more than a language for developing Web-based applications. It is designed to compete in a market of full-fledged, general-purpose programming languages such as C, C++, Pascal and FORTRAN.
UNIT 89
CSIT 225 – Internet Programming
Some Features of Java
Java and JavaScript: • Java is platform-independent and that it can be used
for both applications development and the development of in-line applets, or small applications, for Web pages.
• Like C++ and Smalltalk, Java is object-oriented and relies heavily on the syntax and style of C++.
• With this comes the steep learning curve of a high-end object-oriented programming language.
• Unlike most other general-purpose programming languages, Java is not compiled in the traditional sense.
UNIT 810
CSIT 225 – Internet Programming
Some Features of Java
Java and JavaScript: • Instead of compiling to native machine code, the Java
compiler converts source code into Java byte codes - a platform-independent representation of the Java program code - which are then run on a machine-dependent runtime interpreter.
• In this way, developers only need to develop and maintain one set of source code and compile it once, and the code can then be run using the runtime interpreters for any machine.
• Like all compiled languages, though, this adds the complexity of a compilation cycle to development and, especially, debugging.
UNIT 811
CSIT 225 – Internet Programming
Some Features of Java
Java and JavaScript: • However, to a certain degree like other compiled
languages, an efficient runtime engine means that Java should offer better performance than general-purpose interpreted scripting languages.
Fully Extensible• A fundamental feature of true object-oriented
languages is that they are extensible. • That is, programmers can create their own classes -
or groupings of objects and data structures - to extend the basic classes that are part of the programming languages.
UNIT 812
CSIT 225 – Internet Programming
Some Features of Java
Developing Stand-Alone Applications and Applets
• Java is famous because it can be used to develop applets that are delivered on the World Wide Web and executed in client Web browsers.
• However, Java can also be used to develop complete, platform-independent GUI applications using the Java runtime interpreter (like applications developed in Delphi, Visual Basic and C++).
• In contrast to Java, JavaScript joins the ranks of simple, easy-to-use scripting languages.
• Learning JavaScript is more easier then Java.
UNIT 813
CSIT 225 – Internet Programming
JavaScript
Derived from Java • JavaScript owes a lot to Java. • Its syntax and basic structure are similar to Java, even
if the range of functions and the style of programming can differ greatly.
• JavaScript started life as Netscape's own scripting language with the name LiveScript, but in late 1995, Sun endorsed the language, and it became JavaScript.
• JavaScript keeps more than just the basic syntax and structure of Java, it also borrows most of Java's flow constructs and implements some of the same security precautions, such as preventing applets from writing to the local disk.
UNIT 814
CSIT 225 – Internet Programming
JavaScript
An Interpreted Language• Unlike Java, JavaScript is an interpreted language.
Whereas in Java, source code is compiled prior to runtime, in an interpreted language source code files are executed directly at runtime in JavaScript.
• Interpreted languages offer several advantages - as well as several drawbacks.
• Interpreted languages such as JavaScript are generally simpler than compiled languages and are easy to learn.
• It is often easier to develop, change, and trouble-shoot programs because the need to recompile with each change is removed.
UNIT 815
CSIT 225 – Internet Programming
JavaScript
An Interpreted Language• On the negative side, It gives lower performance
compared with a compiled language.
Not Fully Extensible• Unlike Java, JavaScript is not fully extensible. • The JavaScript model is one of a limited set of base
objects, properties, methods, and data types, which provide enough capabilities to create client-side applications.
UNIT 816
CSIT 225 – Internet Programming
JavaScript
Not Fully Extensible• While users can create their own objects and write
functions, this is not the same as the classes and inheritance offered in Java and other object-oriented programming languages.
Integrated into HTML• Where Java is only loosely tied to HTML, JavaScript
is tightly integrated into HTML files.• Typically, entire scripts are in the same files as the
HTML that defines a page and are downloaded at the same time as the HTML files.
UNIT 817
CSIT 225 – Internet Programming
JavaScript
Performs Repetitive Tasks• JavaScript is most suited to producing small
programs, it is especially well-designed for repetitive, event-invoked tasks.
• For example, JavaScript is ideal for calculating the content of one field in a form based on changes to the data in another field.
• Each time the data changes, the JavaScript program to handle the event is invoked, and the new data for the other field is calculated and displayed
UNIT 818
CSIT 225 – Internet Programming
JavaScript
Designed for Programming User Events• Because of the way in which JavaScript is
integrated into the browser and can interact directly with HTML pages, JavaScript makes it possible to program responses to user events such as mouse clicks and data entry in forms.
• This adds interactivity to Web pages, makes forms dynamic and can decrease the bandwidth requirements and server load incurred by using forms and CGI programming.
UNIT 819
CSIT 225 – Internet Programming
JavaScript
No Code Hiding
• Because the source code of JavaScript script presently must be included as part of the HTML source code for a document, there is no way to protect code from being copied and reused by people who view your Web pages.
• This may be accepted as a weakness of JavaScript.
UNIT 820
CSIT 225 – Internet Programming
Incorporating JavaScript into HTML
• At the present time, all JavaScript scripts need to be included as an integral part of an HTML document. To do this the SCRIPT tag should be used.
The SCRIPT Tag• Including scripts in HTML is simple. Every script
must be contained inside a SCRIPT container tag. In other words, an opening <SCRIPT> tag starts the script and a closing </SCRIPT> tag ends it:
<SCRIPT> JavaScript program
</SCRIPT>
UNIT 821
CSIT 225 – Internet Programming
Incorporating JavaScript into HTMLIncluding JavaScript in an HTML File
The first, and easiest, way is to include the actual source code in the HTML file, using the following syntax:
<SCRIPT LANGUAGE="JavaScript"> JavaScript program
</SCRIPT>
Hiding Scripts from Other Browsers Of course, an immediate problem crops up with this type
of SCRIPT container: In order to avoid the browsers which don't support
JavaScript to attempt to display or parse the content of the script, the content should be written between HTML comment tags.
<SCRIPT LANGUAGE="JavaScript"> <!-- HIDE THE SCRIPT FROM OTHER
BROWSERS JavaScript program
// STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>
UNIT 822
CSIT 225 – Internet Programming
Incorporating JavaScript into HTMLIncluding JavaScript in an HTML File
The first, and easiest, way is to include the actual source code in the HTML file, using the following syntax:
<SCRIPT LANGUAGE="JavaScript"> JavaScript program
</SCRIPT>
Hiding Scripts from Other Browsers Of course, an immediate problem crops up with this type
of SCRIPT container: In order to avoid the browsers which don't support
JavaScript to attempt to display or parse the content of the script, the content should be written between HTML comment tags.
<SCRIPT LANGUAGE="JavaScript"> <!-- HIDE THE SCRIPT FROM OTHER
BROWSERS JavaScript program
// STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>
UNIT 823
CSIT 225 – Internet Programming
Incorporating JavaScript into HTML
Using External Files for JavaScript Programs • To make development and maintenance of
HTML files and JavaScript scripts easier, the JavaScript scripts can be kept in separate files and using the SRC attribute of the SCRIPT tag to include the JavaScript program in an HTML file.
• In its simplest form, the SRC construct can be used like this:
<SCRIPT LANGUAGE="JavaScript“ SRC="http://www.you.com/JavaScript.js">
</SCRIPT>
UNIT 824
CSIT 225 – Internet Programming
Incorporating JavaScript into HTML
First Example:<HTML> <HEAD>
<TITLE>Listing 2.1</TITLE> </HEAD> <BODY>
Here's the result: <SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS // Output "It Works!"
document.writeln("It works!<BR>"); // STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT> </BODY> </HTML>
UNIT 825
CSIT 225 – Internet Programming
Incorporating JavaScript into HTML
First Example (The Output):
UNIT 826
CSIT 225 – Internet Programming
Incorporating JavaScript into HTML
Comments in JavaScript• The line which begins with two slashes,
// Output "It Works!“
• Is a single-line JavaScript comment similar to those used in C++.
• Everything after the // until the end of the line is a comment.
• JavaScript also supports C-style multi-line comments, which start with /* and end with */:
/* This is
a comment
*/
UNIT 827
CSIT 225 – Internet Programming
The Syntax
• The basic syntax and structure of JavaScript looks familiar to anyone who has used C, C++, or Java.
• A JavaScript program is built with functions and statements, operators and expressions.
• The basic command unit is a one-line command or expression followed by a semi-colon;
• for example:document.writeln("It Works!<BR>");
• This command invokes the writeln() method, which is part of the document object.
• The semi-colon indicates the end of the command.
UNIT 828
CSIT 225 – Internet Programming
The Syntax
Command Blocks• Multiple commands can be combined into
command blocks using curly braces ({ and }). • Command blocks are used to group together sets
of JavaScript commands into a single unit, which can then be used for a variety of purposes, including loops and defining functions.
• Example: {
document.writeln("Does it work? "); document.writeln("It works!<BR>");
}
UNIT 829
CSIT 225 – Internet Programming
The Syntax
Embedded Command Blocks
• Command blocks can be embedded, as the following lines illustrate.
{
JavaScript code { More JavaScript code }
}
UNIT 830
CSIT 225 – Internet Programming
The Syntax
Case Sensitivity
• In JavaScript, object, property, and method names are case sensitive, as are all keywords, operators, and variable names.
• In this way, all the following commands are different (and some are illegal):
document.writeln("Test");
Document.Writeln("Test"); document.WriteLN("Test");
UNIT 831
CSIT 225 – Internet Programming
The Syntax
Outputting Text• In most programming languages, one of the basic
capabilities is to output—or display—text. • In JavaScript output can be directed to several places
including the current document window and pop-up dialog boxes.
• Output in the Client Window In JavaScript, programmers can direct output to the
client window in sequence with the HTML file.
• Generating alert and confirm boxes that include text and one or two buttons. Text and numbers can also be displayed in text and
TEXTAREA fields in a form.
UNIT 832
CSIT 225 – Internet Programming
The Syntax
Outputting Text• The document.write() and document.writeln()
Methods The document object in JavaScript includes two methods
designed for outputting text to the client window: write() : Acting like printf(“….”); of C writeln(): Acting like printf(“\n ….”); of C In JavaScript, methods are called by combining the
object name with the method name: object-name.property-name Data that the
method needs to perform its job is provided as an argument in the parentheses;
for example:document.write("Test"); document.writeln('Test');
UNIT 833
CSIT 225 – Internet Programming
The Syntax
Example 2:<HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD> <BODY> This text is plain.<BR> <B> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS document.write("This text is bold.</B>"); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML>
UNIT 834
CSIT 225 – Internet Programming
The Syntax
Example (Output)
UNIT 835
CSIT 225 – Internet Programming
The Syntax
Example 2:<HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS document.writeln("One,"); document.writeln("Two,"); document.write("Three "); document.write("..."); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </PRE> </BODY> </HTML>
UNIT 836
CSIT 225 – Internet Programming
The Syntax
Example 3 (Output)