chapter 8 javascripts introduction and the syntax csit225 internet programming

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


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


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


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


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


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


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



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



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



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



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


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


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


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


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


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


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


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


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


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">  </SCRIPT>

UNIT 822


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">  </SCRIPT>

UNIT 823



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



First Example:<HTML> <HEAD>

<TITLE>Listing 2.1</TITLE> </HEAD> <BODY>

Here's the result: <SCRIPT LANGUAGE="JavaScript">



</SCRIPT> </BODY> </HTML>

UNIT 825



First Example (The Output):

UNIT 826



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


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


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


The Syntax

Embedded Command Blocks

• Command blocks can be embedded, as the following lines illustrate.

{

JavaScript code { More JavaScript code }

}

UNIT 830


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


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


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


The Syntax

Example 2:<HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD> <BODY> This text is plain.<BR> <B> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> </HTML>

UNIT 834


The Syntax

Example (Output)

UNIT 835


The Syntax

Example 2:<HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </PRE> </BODY> </HTML>

UNIT 836


The Syntax

Example 3 (Output)

chapter 8 javascripts introduction and the syntax csit225 internet programming

Documents