CHAPTER 8 JavaScripts Introduction and the Syntax CSIT225 Internet Programming

UNIT 8 1 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 8 2 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 8 3 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 8 4 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 8 5 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 8 6 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 8 7 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 8 8 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 8 9 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 8 10 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 8 11 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 8 12 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 8 13 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 8 14 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 8 15 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 8 16 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 8 17 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 8 18 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 8 19 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 tag starts the script and a closing tag ends it: JavaScript program

UNIT 8 20 CSIT 225 – Internet Programming Incorporating JavaScript into HTML Including 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: JavaScript program 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. <!-- HIDE THE SCRIPT FROM OTHER BROWSERS JavaScript program // STOP HIDING FROM OTHER BROWSERS -->

UNIT 8 21 CSIT 225 – Internet Programming Incorporating JavaScript into HTML Including 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: JavaScript program 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. <!-- HIDE THE SCRIPT FROM OTHER BROWSERS JavaScript program // STOP HIDING FROM OTHER BROWSERS -->

UNIT 8 22 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:

UNIT 8 23 CSIT 225 – Internet Programming Incorporating JavaScript into HTML First Example: Listing 2.1 Here's the result: <!-- HIDE FROM OTHER BROWSERS // Output "It Works!" document.writeln("It works! "); // STOP HIDING FROM OTHER BROWSERS -->

UNIT 8 24 CSIT 225 – Internet Programming Incorporating JavaScript into HTML First Example (The Output):

UNIT 8 25 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 8 26 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! "); This command invokes the writeln() method, which is part of the document object. The semi-colon indicates the end of the command.

UNIT 8 27 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! "); }

UNIT 8 28 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 8 29 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 8 30 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 8 31 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 8 32 CSIT 225 – Internet Programming The Syntax Example 2: Ouputting Text This text is plain. <!-- HIDE FROM OTHER BROWSERS document.write("This text is bold. "); // STOP HIDING FROM OTHER BROWSERS -->

UNIT 8 33 CSIT 225 – Internet Programming The Syntax Example (Output)

UNIT 8 34 CSIT 225 – Internet Programming The Syntax Example 2: Ouputting Text <!-- HIDE FROM OTHER BROWSERS document.writeln("One,"); document.writeln("Two,"); document.write("Three "); document.write("..."); // STOP HIDING FROM OTHER BROWSERS -->

UNIT 8 35 CSIT 225 – Internet Programming The Syntax Example 3 (Output)