Drafted: 4/23/00;  4/9/02
Currently being created!

COSC 330

LEARNING MODULE VI
INTERACTIVITY IN WEB PAGES

       After learning how to present text and multimedia in a Web site we will spend the rest of the course considering how interactivity can be incorporated into Web pages.  LM VI  presents interactive techniques using roprietary development tools (Flash and Shockwave), Java, JavaScript, PHP, DHTML, and XML; because DHTML uses cascading style sheets, they are also covered in this learning module. { move CSS to the end of LM IV?}   W hat follows is a concise, practical introduction to what are complex programming languages.  It is NOT an in depth presentation of these languages nor a comprehensive treatment of how to use them in Web development.  Instead, with the exception of JavaScript, we focus on what can be done with these advanced copies and present some links to sources for further study. See the Study Guide for this learning module.

The Objectives of this learning module are to:

1. survey the technologies that allow one to add interactivity to a Web site,
2. introduce proprietary applications (e.g. Flash and Shockwave),
3. show how cut and paste techniques can be used to incorporate Java applets and JavaScript into Web pages, and
4. introduce JavaScript, which will be presented in more detail in LM VII and covered throughout the rest of the course.

This LM follows the sequence of chapters in Niederst, Web Design in a Nutshell, but modifies this in order to better associate related techniques. The sequence of presentations in this learning module is as follows.   You can click on any link to jump directly to that section.

1. OVERVIEW OF FLASH AND SHOCKWAVE
2. OVERVIEW JAVA
3. OVERVIEW OF JAVASCRIPT
4. OVERVIEW OF THE PHP SCRIPTING LANGUAGE
5. OVERVIEW OF DHTML
6. OVERVIEW OF XML

        ....

1. OVERVIEW OF PROPRIETARY APPLICATIONS, FLASH AND SHOCKWAVE (Niederst, Chapter 21):

1. FLASH, Macromedia's animated Web page development tool (from What Is):
1. Flash,  currently in version 5.0, is designed to facilitate the generation of vector graphics-based animation programs with
1. full-screen navigation interfaces,
2. graphic illustrations,
3. simple interactivity
in an antialiasing, resizable file format that is small enough to stream across a normal modem connection .
2. The software is popular on the Web, both because of its speed (vector-based sites, which can adapt to different display sizes and resolutions, play as they download) and for the smooth way it renders graphics. Flash files, unlike animated but raster graphics Graphics Interchange Format and JPEG, are compact, efficient, and designed for optimized delivery.
3. Known as a do-it-yourself animation package, Flash 4 gives Web designers the ability to import artwork using whatever bitmap or illustration tool they prefer, and to create animation and special effects, and add sound and interactivity. The content is then saved as file with a .SWF file name extension.
4. Web users with Intel Pentium or Power Macintosh processors can download Flash Player to view Flash content, which performs across multiple browsers and platforms. Flash is lauded for being one of the Web?s most accessible plug-in. According to an independent study cited by Macromedia, 89.9 percent of Web users already have Flash Player installed.
5. Disney, Volkswagen, Citibank, The New York Times, Cisco, and IBM are just a sampling of the thousands of sites that use Flash to jazz up graphics without sacrificing user bandwidth. First introduced in 1996, Flash was originally called FutureSplash Animator and was created by a company called FutureWave, a San Diego-based software developer. Itwas renamed Flash when Macromedia acquired FutureWave in 1997.
6. See the Macromedia site for Flash and take the feature tour .
7. See the five tips for developing efficient Flash animations from TechTV .
8. Check out  some of these Flash sites:
1. Flash Cartoons: http://www.twinkleland.com/
2. 
   
2. SHOCKWAVE  (from What Is):
1. Shockwave, developed by Macromedia, is a family of multimedia players. Web users with Windows and Mac platforms can download the Shockwave players from the Macromedia site and use it to display and hear Shockwave files.
1. By early 1997, according to Macromedia, 17 million copies of Shockwave had been downloaded.
2. To create Shockwave files, you use Macromedia Director (and several related programs).
1. (from Tech Encyclopedia ) A popular multimedia authoring program for Windows and Macintosh from Macromedia. Runtime versions can be run, edited and switched between Windows and Mac platforms. Shockwave is a browser plug-in that lets output from Macromedia's Director, Authorware and Freehand packages be viewed on the Web.
2. Director was initially introduced as MacroMind Director for the Mac in 1989, and it has been the de facto standard for Macintosh multimedia authoring. Before the Windows authoring version was introduced, a Windows player was available to run Director movies created on the Mac
3. Shockwave is especially popular for interactive games. A popular download is Poprocket (http://www.poprocket.com).
4. Macromedia has identified over 2,000 sites that offer Shockwave files, including sites for General Motors, Nissan, Kodak, Microsoft, Intel and Apple.
5. You can download the Shockwave players from Macromedia's Shockwave page.
6. Two other leading multimedia players on the Web are Quicktime and MPEG.
7. See the Macromedia site for Macromedia Director Shockwave where you can download the Shockwave players.  Take the feature tour to get an overall impression of Shockwave

       Java is a high-level, general purpose, platform independent, purely object-oriented programming language that is designed for efficient software development for a distributed (networked) computer environment. It was created at Sun Microsystems to develop advanced software for consumer electronics. C++ was originally chosen for this project, but the code often required extensive debugging and was difficult to maintain. Realizing that a completely new language was needed, the development team started with C++ but removed many of its problematic and seldom-used features and added primitives for distributed computing and other modern features. The result was Java, familiar (because of its syntactic similarities to C++) and simple (at least when compared to C++!). Because of its special capabilities for network programming, it has become, since about 1995, "the" development language for Internet and intranet applications.

1. Java is object-oriented, which means that, software developers think in terms of "objects" which have a "state" (definded by its " attributes") and "behavior"( defined by its "methods").  For example, consider a window on a computer screen; its attributes would include its location, its size, whether or not it scrolls, etc and some of its methods would would be subprograms that define its abililty to be opened or closed, moved, resized, etc.  In other words object-oriented programing (OOP) is a human-oriented view of programming rather than a computer-oriented view. Characteristic of OOP include:
1. Similar objects can take advantage of being part of the same "class" of objects.  A class is an abstract "template" for creating objects , but an object is a concrete "instance" of a class.  For example the idea of a computer window would be a class, but the actual window which contains the text you are reading is an "instance" of the class window.  Each instance of the class window would have different values of      (1) (location, size, etc.) but all would share the same  (2) (movable, resizeable, etc.)
2. Perhaps the greatest asset of OOP is its built-in facilities for reusing code, making software development more efficient.  This can be accomplished three basic ways:
1. Classes can inherit the code (attributes and/or methods) from a parent class (or superclass).  Inheritance is used to "derive a subclass from a superclass", i.e. the subclass inherits the attributes and methods of the superclass and new attributes and methods can be added thus distinguishing the subclass.  Thus the subclass is a special case of the superclass and one can describe inheritance as an "IsA" relationship between classes, e.g. a the Car class could be a subclass of a        (3) class or a "car IsA        (4) ".
2. Classes can contain other classes, i.e. incorporate code already written for other classes.  Containership (the proper word is "aggregation ") is called a "HasA" relationship between the classes, the Car class would be defined with an engine as an     (5), but if Engine were a class itself, one would say that the Car class HasA Engine class, i.e. the Engine class is contained within the Car class.
3. Methods within a class can make use of other classes as well.  This is called the "UsesA" relationship between classes.  For example a method called "drive" of the Car class might be written using the class SteeringWheel (must be one word), in which case one would say the Car class UsesA SteeringWheel class.
3. The methods of a class are "mini-programs" that define the class's behaviors, one method for each behavior. The logic of method can be completely defined using only three control structures: (They are called "control" structures because they are used to control the flow of execution of the method.)  They are:
1. sequence, the default execution is one instruction after another unless modified by selection or repetition constructs,
2. selection (IF-THE-ELSE; also called IF-ELSE) allows a logical expression to select one of two alternative blocks of code to execute,
3. repetition (WHILE, or FOR loops or recursion) allows a logical expression to govern the repetition of a block of code.
Note that, although sturctured control structures are essential to OOP languages, there are languages that use the same sturctures (e.g. C, Pascal, etc.) but which are not OOP languages, i.e. they do not have the features of section A.b, above.
4. Objects are thought of as "nouns" that a user might relate to rather than the traditional procedural "verbs" which are used as method names.
2. The language is unusual among programming languages in that it is designed to facilitate the creation of two types of software, "applications", "applets", and "servlets".
1. Applications are stand-alone programs in the traditional sense but are based purely on object oriented technology.
2. Applets are a unique innovation of Java.  They are "miniature applications" that are specifically designed to be called from within HTML documents.
1. They must be downloaded from a server in order to be executed on a client. (See COSC 390 Fig. II-1 {FIX!} .)  However they are never stored on the client and are nomrally  prevented from accessing files on the client, although this restriction is being relaxed in new versions of Java.
2. Applets are typically used to add animations or user interactiviey to a Web page.
3. Servlets are an even newer concept unique to Java.  Servlets also "miniprograms" but, unlike applets, they are not downloaded in order to be executed on a client; instead, servlets are executed on the server and, if necessary, its output is downloaded to a client.
3. Java’s most innovative features are its facilities for distributed computing. These include:
1.                  (6) (described above)
2. unique set of Internet/intranet primitives from which programs can be constructed, e.g. class libraries (reusable subprograms) for TCP/IP protocols. Java code can access objects (other programs) across the Internet/intranet via URLs as easily as on a local file system. Java 1.1 and higher also has built-in ability to access objects on remote computers.
3. built in facilities for handling security problems inherent in distributed systems. This makes it easier to develop reliable, virus-free, tamper-free systems . The reliability goal means it was designed to be secure (hacker resistant) and robust (bug resistant). Being robust ensures that a Java instruction can not contain the address of data storage in another program or in the operating system itself, because errors in such instructions will cause the program (or even the operating system itself) to  "crash." The Java virtual machine makes a number of checks on each object to ensure integrity.
4. Java is designed to be run on the "Java Virtual Machine" (JVM), an "abstract computer architecture" that is modelled in the Java programming environment. The Java compiler translates the Java source code (files with a .java extension) into architecture-neutral bytecode (files with a .class extension) . (See COSC 390 Fig. II-1 {FIX!} .) Bytecode (a sequence of 8 bit codes) can be executed by a Java interpreter or just in time compiler (JIT) to deliver output to the user.  This implements a "three-tier client server architecture " where the (7) is the middleware level between source code and object code, i.e. the Java source code is compiled into    (8) that is, in turn, automatically translated,  when it is downloaded, into the      (9) code of the particular CPU.
1. bytecode is designed to be both easy to interpret on any machine and easily translated (by a JIT)  into native machine code at load time.
2. Since the software developer need write only one source code program, this gives Java applications their "platform independence". (This means tha a Java program does not depend on the                             nor          (10 ) so a program will run on any computer system that has a (11). Java bytecode can be run anywhere in a network on any server or any client that has a Java virtual machine .)  This is the origin of Sun Microsystem’s Java Slogan:

         which has been expanded, with the advent of the Java component model, Java Beans, to read:

Write Once, run anywhere, reuse everywhere!

 
On Wednesday, Nov. 18, 1998, Sun won a stunning court decision against Microsoft requiring that Microsoft stop its efforts to "pollute" Java in order to destroy its platform independence!  "It's an unqualified victory for Sun," said Rich Gray, a partner at Bergeson, Eliopoulos, Grady & Gray in San Jose, California. (Mr. Gray is not retained by either side.) "This decision gives complete credence to the government's theory that Microsoft has engaged in anticompetitive activities to undercut Java, the most important cross-platform technology." Details can be found here .  A related story can be found on Microsoft's War on Java .
5. Java is the heart of the NC (network computer) concept that, after an overhyped introduction, may still become a dominant technology; See COSC 390 Fig. II-2 {FIX!} .
6. For more information on Java see the following:
1. The home of Java is at Sun Microsystems' Java page, http://java.sun.com/ .
2. An incredible source of links to Java sites, applets you can download, tutorials on Java, etc is Gamelan at http://www.gamelan.com /.
3. Excellent introductory tutorials on Java are found on IBM's Web site at http://www.ibm.com/java/education/intro/courseoptions.htm
7. EXAMPLES:
1. The following news ticker from 7@m News on the Net  can be added to a Web page by accessing: http://www.7am.com/

You can find the code responsible for calling and displaying the output of this applet by selecting Page Source From the View menu in Navigator.  The code is:
 
<applet CODE="sevenAMNewsTicker.class" CODEBASE="http://www.7am.com/java" WIDTH=450 HEIGHT=15>
<br><param NAME="channels" VALUE="+WORLDnews +CHRISTIANnews +USAnews +SPORTSnews">
<br><param NAME="target" VALUE="_blank">
<br></applet></ol>


It might be easier to distinguish in a page by itself; click here.

2. 
   

3. OVERVIEW OF JAVASCRIPT, A VHLL COMPLIMENT TO JAVA: (See handout, "Spotlight on JavaScript."):

1. JavaScript is a cross-platform, object-based scripting language for both client and server applications, but is primarily used for client side scripting. In computer programming, a script is a  sequence of instructions that is interpreted, i.e. executed by another program rather than by the CPU.   In other words, unlike languages, like Java and C++, where programs must be completely translated (compiled) into machine language (object code) in order to be executed by the CPU, JavaScript code is executed directly, line by line, by a program (called an interpreter") that is associated with the particular Web browser.  (Unfortunately this can defeat the cross-platform feature when companies use no-standard compilers in their browser, like Microsoft's  Internet Explorer.)

1. JavaScript was designed to augment the human interface with a Web site by providing animation and user interactivity.  (See LM VII, section 0.1.B and Moncur, Hour 3 for specific examples of JavaScript applications.
2. JavaScript is called a VHLL (very high level language) or 4GL (fourth generation language) because it is a special purpose language (e.g. JavaScript was designed specifically to add functionality to HTML documents via scripts).  VHLL are very powerful in their area of application, but are limited to that area.  Therefore, in their area of application, you can do more with a few lines of code with a VHLL than you can with a HLL (high level language) like Java, C++, etc.  However HLL are much more general, being useable in virtually any area of application.
3. Client-side JavaScript is desinged to be embedded directly in HTML. It allows you to create dynamic, interactive Web-based applications that run completely within a Web browser ; you don't have to write any programs that run on the Web server, like you must do with CGI scripts, or must be downloaded fromt the server like Java  (12). JavaScript can be embedded in an HTML document four different ways:
1. as statements and functions written within the HTML <SCRIPT> tag (currently, this is the primary use),
2. by specifying a file as the JavaScript source,
3. by specifying a JavaScript expression as the value of an HTML attribute, and
4. as event handlers within certain other HTML tags (mostly form elements)
4. JavaScript is not a "native" feature of the Java environment, i.e. it was not developed by Sun or any standards organization as part of or an extension of Java itself.  The origin of JavaScript was "LiveScript", a scripting language, developed by Netscape, for writing scripts that could be inserted directly into HTML code in order to add functionality to Web pages. However, Netscape renamed Livescript as "JavaScript", and, in cooperation with Sun, Netscape has integrated JavaScript into the Java environment, enabling Java and JavaScript to exchange messages and data.    As a result JavaScript has become, by far, the most popular scripting language of HTML.
5. JavaScript is a "work in progress ".  The latest version of the language, JavaScript 1.5, is supported by Netscape 6 and most of it is compatable with Internet Explorer 5.5 and their later versions.   The first standard version (JavaScript 1.1) was named ECMAScript; JavaScript 1.5 is defined in ECMAScript 262, Third Edition.  and explained in Netscape's Core JavaScript Reference 1.5.
1. Unfortunately, Microsoft's characteristic unwillingness to work with platform independent standards has fragmented the JavaScript community as well.  They have a modification of ECMAScript called JScript.  (See the explanation of JScript in the Webopedia.)
6. JavaScript is "object-based" (rather than "object oriented") because it has very limited OOP features. It provides built-in objects but it does not have data types nor the ability to control access to object properties , and it has limited inheritance (via the prototype mechanism). ( The idea that JavaScript is not an OOP language is debatable because their are alternative ways to implemment OOP features, and advanced JavaScript does have facilities similar to those of standard OOP languages; these will be covered in LM 7.  Therefore we will adopt the approach that JavaScript does not have the facilities of "typical" OOP languages.) However, being a "work-in-progress", it might have such features incorporated later.
1. The syntax of JavaScript control structures is identical to that of Java, C, and C++ for  features that are common to these lanaguages. However, JavaScript, a "very high level programming language", is fundamentally different from these "high level languages"!  (See the handout,JavaScript Overview. )
2. Visual JavaScript , written entirely in Java, is a new visual IDE (integrated development environment) tool that lets a company's software developers rapidly build Crossware applications (applications that run across Intranets and Extranets) without writing software code.
3. JavaScript is a simpler than Java and is used for different purposes. It can only be embedded directly in        (13), so can not run as a stand alone application like Java programs can.  On the other hand, it is more flexible and easier to use for simple tasks like animation. However, although you can write reasonably robust and complete Web applications using JavaScript alone, JavaScript is not a substitute for Java. In fact, JavaScript is a good client-side complement to Java; using the two together allows you to create more complex applications than are possible with JavaScript alone.
7. EXAMPLES:
1. For two illustrative examples of JavaScript click here.  You can see the JavaScript by selecting Page Source from the V iew menu.
2. Another "fun JavaScript" can be found here .
8. JavaScript, Java, HTML/DHTML complement (or should complement) each other.  See the article, by the "ScriptBoy", Danny Goodman called Java vs. JavaScript -- The Impact of Dynamic HTML.    A provocative article on the importance of using learning JavaScript, learn JavaScirpt...now! by Dan Shafer is also worth reading.
9. Other Web sites concerning JavaScript include:
1. C|NET's Web development site, Builder.com found at: http://builder.cnet.com/Programming/JsSpotlight/?st.bl.pr.pr4.feat.1245.
2. An introductory tutorial on JavaScript, by C|NET, can be accessed at http://builder.cnet.com/Programming/Javascript/?st.bl.prog.feat .

4. OVERVIEW OF THE PHP SCRIPTING LANGUAGE (From WhatIs.com):

1. In Web programming, PHP is a script language and interpreter, similar to JavaScript and Microsoft's VBScript, that is freely available and used primarily on Linux Web servers. PHP (the initials come from the earliest version of the program, which was called "Personal Home Page Tools") is a cross-platform alternative to Microsoft's Active Server Page (ASP) technology (which runs only on Microsoft's Windows NT servers). As with ASP, the PHP script is embedded within a Web page along with its HTML. Before the page is sent to a user that has requested it, the Web server calls PHP to interpret and perform the operations called for in the PHP script. An HTML page that includes a PHP script is typically given a file name suffix of ".php" ".php3," or ".phtml". Like ASP, PHP can be thought of as "dynamic HTML pages," since content will vary based on the results of interpreting the script. from the Screen Savers, 4/19/200.
2. PHP is free and offered under an open source license. The latest version is PHP3.
3. Selected Links
1. The PHP home page offers more information.
2. There is an Introductory Tutorial .
3. And a history of PHP .
4. Zend is a new PHP interpreter (that also does some precompiling) so that PHP scripts can be run more quickly on larger, more complicated Web sites.
5. Programmers using PHP may want to know about PX: PHP Code Exchange .

PHP Builder is a site with articles and suggestions for PHP developers.