Geometria

Introduction to JavaScript

[Home] [1 Intro] [2 Resp.-Anal.] [3 JavaScript] [4 JS Interf.] [5 Design] [6 Special] [7 Java-Interf.] [Reference]

Content:

What is JavaScript?
Embedding JavaScript into a HTML-page
Non-JavaScript browsers
Event-Handling
Functions
Object hierarchy in the HTML-document
Example of getting and setting object properties
Working with Radiobuttons
Windows and on-the-fly documents
Links
Exercises

What is JavaScript?

JavaScript is not Java!
Running JavaScript in Browsers

Embedding JavaScript into a HTML-page

Directly in the body of the HTML-page

<html>
<body>
<br>
This is a normal HTML document.
<br>
  <script language="JavaScript">
    document.write("This is JavaScript!")
  </script>
<br>
Back in HTML again.
</body>
</html>
This is a normal HTML document.

Back in HTML again.

In the head of the HTML-page

<html>
<head>
  <script language="JavaScript">
     document.write("This is JavaScript!")
  </script>
</head>
<body>
<br>
  This is a normal HTML document.
</body>
</html>

In a separate file

<html>
<head>
   <script language="JavaScript" src="MyJavaScriptFile.js">
   </script>
</head>
<body>
   This is a normal HTML document.
</body>
</html>

Non-JavaScript browsers

There is a way for hiding the source code from older browsers.
We will use the HTML-comments . Our new source code looks like this:

<html>
<body>
<br>
This is a normal HTML document.
<br>
  <script language="JavaScript">
  <!-- hide from old browsers

    document.write("This is JavaScript!")

  // -->
  </script>
<br>
Back in HTML again.
</body>
</html>

Event-Handling

Events and event handlers are very important for JavaScript programming. Events are mostly
caused by user actions, for example, if the user clicks on a button a Click-event occurs.

<form>
<input type="button" value="Test this example" onClick="alert('Yo')">
</form>

Other possible events are:

onBlur, onChange, onDblClick, onFocus, etc.

Functions

We will use functions in most of our JavaScript programs, so this is an important concept.

An example:

<html>
<head>
<script language="JavaScript">
<!-- hide

  function myFunction() {
    document.write("Welcome to my homepage!<br>");
    document.write("This is JavaScript!<br>");
  }

// -->
</script>
</head>
<body>
  myFunction();
  myFunction();
  myFunction();
</body>
</html>

Functions can also be used in combination with event-handlers. Please consider this example:

<html>
<head>
<script language="JavaScript">
<!-- hide

function calculation() {
  var x = 12;
  var y = 5;
  var result = x + y;
  alert(result);
}

// -->
</script>
</head>
<body>

<form>
  <input type="button" value="Calculate" onClick="calculation()">
</form>

</body>
</html>

Here you can test this example:

Object hierarchy in the HTML-document

JavaScript organizes all elements on a web-page in a hierarchy. Every element is seen as an
object and can have certain properties and methods.
With the help of JavaScript you can easily manipulate the object properties and call the object methods.

An example:

<html>
<head>
   <title>My homepage</title>
</head>

<body bgcolor=#ffffff>

<img src="home.gif" name="pic1" width=200 height=100>
  
<form name="myForm">
Name: 
<input type="text" name="name" value="bla bla bla">
e-Mail:
<input type="text" name="email" value="xyz@bla.com">
<input type="button" value="Push me" name="myButton" onClick="alert('Yo')">
</form>

<img src="ruler.gif" name="pic4" width=300 height=15>

<a href="http://www.geometria.de">My homepage</a>

</body>
</html>

Here is a screenshot of this page (some things are added with red color):

The following image illustrates the hierachy created by our example HTML-page:

Getting information about the properties of objects.

The commands looks like:

var nameInput = document.forms[0].elements[0].value;
var imageHeight = document.images[1].height.value;

Example of getting and setting object properties

Look at the following example.

Source code:

<html>
<head>
<script language="JavaScript">

function calculate() {
  var a = document.MyForm.Textfield_a.value;
  var b = document.MyForm.Textfield_b.value;
  var result = eval(a) + eval(b);

  document.MyForm.Textfield_result.value = result;
}
</script>
</head>

<body>
<form name="MyForm" action="">

<p> <i>a</i> = 
<input type="text" name="Textfield_a" size="4" maxlength="4" value="1">
</p>

<p> <i>b</i> = 
<input type="text" name="Textfield_b" size="4" maxlength="4" value="1">
</p>

<p> 
<input type="button" name="Button_calculate" value="Calculate" 
       onClick="calculate()">
</p>

<p> <i>a + b</i> = 
<input type="text" name="Textfield_result" size="4" maxlength="4" value="?">
</p>

</form>
</body>
</html>

Working with Radiobuttons

The following example shows, how to work with radiobuttons:

      <form name="formRB" action="">
<p><input type="radio" name="radiobutton" value="1" 
    onClick="alert('Radiobutton 1 checked!')" checked>Radiobutton 1</p>

<p><input type="radio" name="radiobutton" value="2" 
    onClick="alert('Radiobutton 2 checked!')">Radiobutton 2</p>

<p><input type="radio" name="radiobutton" value="3" 
    onClick="alert('Radiobutton 3 checked!')">Radiobutton 3</p>

<p><input type="radio" name="radiobutton" value="4" 
    onClick="alert('Radiobutton 4 checked!')">Radiobutton 4</p>
</form>

Our last example shows how to find out, which radiobutton from a list of radiobuttons is selected.

<html>
<head>
<script language="JavaScript">
<!-- 

function checkRadiobuttons() {

    if (document.rblist.radiobutton[0].checked == true) {
        alert("Radiobutton 1 is selected");
        return;
    } // if

    if (document.rblist.radiobutton[1].checked == true) {
        alert("Radiobutton 2 is selected");
        return;
    } // if

    if (document.rblist.radiobutton[2].checked == true) {
        alert("Radiobutton 3 is selected");
        return;
    } // if

    if (document.rblist.radiobutton[3].checked == true) {
        alert("Radiobutton 4 is selected");
        return;
    } // if

}

// -->
</script>
</head>
<body>

<form name="rblist">
  <input type="button" value="Calculate" onClick="checkRadiobuttons()">
  <p><input type="radio" name="radiobutton" value="1" checked>Radiobutton 1</p>
  <p><input type="radio" name="radiobutton" value="2">Radiobutton 2</p>
  <p><input type="radio" name="radiobutton" value="3">Radiobutton 3</p>
  <p><input type="radio" name="radiobutton" value="4">Radiobutton 4</p>
</form>

</body>
</html>

Here you can test this example:

Windows and on-the-fly documents

A description how to create own windows is given in Voodoo's Introduction to JavaScript.

Click here to jump directly into the chapter about windows.

Links

Voodoo's Introduction to JavaScript (local)
Most of the text and examples on this page are from this tutorial.
Offical Netscape JavaScript Reference
Offical Netscape Client Side JavaScript Reference 1.3
SelfHTML (only in German)

Exercises

Exercise 1

Develop a HTML-document similar to the calculation example. Change in the JavaScript-function
calculate() the line

var result = eval(a) + eval(b);

var result = a + b;

What does happen?

Exercise 2

Develop a HTML-document similar to the calculation example. Add a list with four radiobuttons
labeled with "+", "-", "/" and "*". Depending on these radiobuttons the two numbers should be
calculated correctly.

Hint: Use the command: "if (...boolean expression ...) { ... some code ... } else { ... some code ... }"

Exercise 3

Choose a Geometria sketch and add a button to the HTML-document.
By pushing the button a new small window should open and present a hint or an additional
information to the Geometria sketch.
The window should be closed by pushing a second button within the window.