Chapter W12. Java Applets in HTML pages

Chapter W12. Java Applets in HTML pages


Goals for this chapter: What is JavaScript? Simple Examples	rpm packages covered in this chapter: mysql (mysql) mysqladmin mysqldump
	All RPM packages (alphabetic order) RPM Index (ordered by groups and subgroups)

If one studies too zealously, one easily loses his pants
- A. Einstein

What is Javascript?

Javascript was the the Java programming language created by the alliance between Netscape and Sun Microsystems: You can check the Web site http://developer.iplanet.com/index.html to know the actual state of this alliance.

What is JAVA ?

When you write a source code for example in C language you want to create the binary, to run the compiler and generate the binary. The Binary will run only on the Operating System where you compile the program. For example if you compile the program on Linux, the program will run on any Linux system, but will not work in MacOS or MS Windows. The same is valid for any operating System.

With JAVA instead, you can compile the source and create a Class file. These class file, may run on any operating system, using the appropriate Java Virtual Machine.

The the chief architect of Java is James Gosling.

What is Javascript ?

Javascript is the JAVA source included in HTML pages capable to run inside the browser. Because the alliance was between Netscape and Sun, the first browser to use these Java script was the Netscape Navigator/Communicator browser. Then, Microsoft Corporation create its own version called JScript), that runs on its Explorer. Of course there are minimal difference and enhacements that each company propose to the market, inside the stable and common arena.

Some months ago was released the JavaScript language 1.5 (September 2000), specially for the new Netscape 6.X and its OpenSource version, Mozilla.

Table 1 JavaScript and Navigator versions

JavaScript version

Navigator version

JavaScript 1.0 Navigator 2.0

JavaScript 1.1 Navigator 3.0

JavaScript 1.2 Navigator 4.0-4.05

JavaScript 1.3 Navigator 4.06-4.7x

JavaScript 1.4 Navigator 4.06-4.7x

JavaScript 1.5 Navigator 6.0
Mozilla (open source browser)

**Table 1 JavaScript and Navigator versions**
JavaScript version	Navigator version
JavaScript 1.0	Navigator 2.0
JavaScript 1.1	Navigator 3.0
JavaScript 1.2	Navigator 4.0-4.05
JavaScript 1.3	Navigator 4.06-4.7x
JavaScript 1.4	Navigator 4.06-4.7x
JavaScript 1.5	Navigator 6.0 Mozilla (open source browser)

Simple Examples

Java and Javascript, like Linux and X Window are universe of information.

Javascript code is included in HTML page:

JAVASCRIPT CODE

</SCRIPT>

We here we will introduce the most common examples:

Digital clock
SubWindows browser.
Scroll data in the Browser Bar
Drag and drop features.

Digital Clock

A digital clock is present in different pages. It requeries a script and form.

<SCRIPT>
var dateform, dateform2
speed=1000
len=29
tid = 0;

function dodate()
{
f.date.value=new Date();
tid=window.setTimeout("dodate()",speed);
}

function start(x) {
f=x
tid=window.setTimeout("dodate()",speed);
}

function dodate1()
{
f.date.value=new Date();
tid=window.setTimeout("dodate1()",speed);
}

function start1(x) {
f=x
tid=window.setTimeout("dodate1()",speed);
}
function Clock()
{
document.write('<FORM name=dateform><input name=date size=')
document.write(len)
document.write(' value="Clock: Requires Javascript"></FORM>')
start(document.dateform);
}
</SCRIPT>

Please check the clock

The clock is called inside a form:

<FORM name=dateform><INPUT name=date size=29 value="Clock: Requires Javascript"></FORM>

SubWindows browser

Probably the most common javascritp effect is to get a subwindow clicking an image or a link. We call this effect the SubWindow browser. Get the effect is quite simple.

To get the effect is necessary to have a file that will includes the image and a "Close" button.

Then, we will assign a function to the image with the

<a href="javascript:my_unix()">

The script define the window characteristics like width, height, toolbar, etc.

<script language="JavaScript">
<!--
function my_unix()
{
window.open('unix.html','mywindow','width=1000,height=830,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=yes,resizable=yes');
}

//-->
</script>

</body>
</html>

Scroll data in bottom bar

One of the most use nice features is the possibility to have a message in the browser bottom bar.

Like before there are two positions that regard this.

One is the function and one is the point inside the source where we call the function.

The function is as follows:

<SCRIPT>
function scrollit_r2l(seed)
{
var m1 = "Visit Hot Links";
var m2 = "...................................";
var m3 = "some of the important links for Internet, Linux and Science Wordlwide ............................. updated constantly !";
var msg=m1+m2+m3;
var out = " ";
var c   = 1;
if (seed > 100) {
seed--;
var cmd="scrollit_r2l(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
   out+=" ";
}
out+=msg;
seed--;
var cmd="scrollit_r2l(" + seed + ")";
      window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
   out+=msg.substring(-seed,msg.length);
   seed--;
   var cmd="scrollit_r2l(" + seed + ")";
   window.status=out;
   timerTwo=window.setTimeout(cmd,100);
}
else {
   window.status=" ";
   timerTwo=window.setTimeout("scrollit_r2l(100)",75);
}
}
}
</SCRIPT>

Please check the data in the bottom bar

We call the function in the BODY TEXT definition.

<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EF" VLINK="#55188A" ALINK="#FF0000" onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);">

Drag and Drop features

Javascript supports drag-and-drop features.

We present here a simple example.

The example we present here is available at LinuxUtilities.org and is copyright by Future Technologies Inc.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="GENERATOR" content="Mozilla/4.72 [en] (X11; U; Linux 2.2.14-5.0 i686) [Netscape]">
   <title>Welcome to FTKernelConfigurator</title>
<script language='JavaScript'></script>
<script language='JavaScript' src='scripts/interactionClass.js'></script>
<script language='JavaScript' src='scripts/elemDragClass.js'></script>
<script language='JavaScript' src='scripts/behDragLayer.js'></script>
<script language='JavaScript' src='scripts/behCourseBuilder.js'></script>
<script language='JavaScript' src='scripts/behActions.js'></script>
<script language="JavaScript">

</script>
<script language="JavaScript">
<!--
function initPage() {
var navBar = parent.nav
var thisQuizPage = navBar.findPage(document.URL)
if (thisQuizPage.completed) {
    MM_setIntProps('G01.setDisabled(true);') // Disable the Knowledge Object
} else {
navBar.setTries(document.URL, 0)
}
}

// update tries, time and score
function updateQuiz() {
parent.nav.setTries(document.URL, G01.tries);
parent.nav.setTimes(document.URL, G01.time, G01.timeLimit);
parent.nav.setScores(document.URL, G01.score);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_initInteractions();initPage()" ">
<font size=-1></font> 
<table COLS=2 WIDTH="100%" NOSAVE >
<tr>
<td><font size=-1>Drag each icon on the <b>Module Area </b>(to load the
module in memory) or in the <b>Kernel Area</b> to configure the kernel
for the next compilation.</font><span name="G01question">
<br></span><interaction object="G01" name="dad_301" template="002_Drag and Drop\050_dad_3_04.agt" includesrc="interactionClass.js,elemDragClass.js,behDragLayer.js">
<div name="G01Layer"><form name="G01controls"></form></div>

<div id="Layer1" style="position:relative; width:200px; height:400px; z-index:1">
<div id="G01Drag1" style="position:absolute; left:9px; top:110px; width:96px; height:96px; visibility: visible"><img SRC="img/scsi.gif" NAME="G01Drag1Img" height=37 width=47></div>

<div id="G01Drag2" style="position:absolute; left:9px; top:159px; width:47px; height:37px; visibility: visible"><img SRC="img/network.gif" NAME="G01Drag2Img" height=37 width=47></div>

<div id="G01Drag3" style="position:absolute; left:9px; top:56px; width:96px; height:96px; visibility: visible"><img SRC="img/multimedia.gif" NAME="G01Drag3Img" height=37 width=47></div>

<div id="G01Drag4" style="position:absolute; left:8px; top:10px; width:96px; height:96px; visibility: visible"><img SRC="img/processor.gif" NAME="G01Drag4Img" height=37 width=47></div>

<div id="G01Target1" style="position:absolute; left:112px; top:11px; width:96px; height:96px; visibility: visible"><img SRC="img/kernelcfg.gif" NAME="G01Target1Img" BORDER=0 height=500 width=500>
          <br>
           
<br> </div>
</div>
<script language="JavaScript">
=
</script>
<cbi-select object="G01"></interaction></td>

<td>
<div align=right>
        <p><a href="compile.html" target="other1"><img SRC="img/compile.gif" BORDER=0 height=60 width=60></a></p>
        <p align="right"><b>Compile the </b></p>
        <p align="right"><b>Linux Kernel</b></p>
      </div>
</td>
</tr>
</table>
<font size=-1></font>
<br> 
</body>
</html>

You can move the objects inside other objects.

The previous is a simple example. It requeries the development of some scripts and Javascript techniques that will be covered in next editions in this training.

The example here is only to introduce its possibility.

The better mode to browse and learn JavaScript is to download, use and browse the Sun Microsystem, Java Development Kit.

Exercises

Visit java.sun.org
Download and install JDK from Sun. FTOSX includes this software.

Tests

What is Java ? What is JavaScript ?
List one difference between Java and C.
Who was the chief architect of Java ?
Is possible to drag and drop graphical elements with Javascript ?
What means JRE ?
What means JVM ?
What is J2EE^TM ? J2SE^TM
What is the latest Javascript version?
What is the JavaScript code necessary to lauch another window with a specific dimensions ?
What company develop Java ?

Read the answers to the exercises.

Check the Interactive Exam Cram WebMaster:

Internet Resources for this Chapter.