From studying a little bit of HTML, it's clear that webpages created using only HTML are static -- they don't change over time. That makes sense: HTML is a language that primarily describes the structure or layout of a page:

headings, lists, tables, paragraphs, links, images.

Of course, it includes some text formatting features, too, like

bold, italic, size, color, font

but even these are static features. Static pages are also passive in a sense — the user just reads them and may or may not really get their heads involved.

So, many people want to create dynamic or interactive pages that can change in response to the user. Many possibilities:

CGI, ASP, Dynamic HTML, Java applets, JavaScript

We're going to do some work with JavaScript in this class; it's the best choice for us for a number of reasons:

  • doesn't require access to a web server -- anyone can put JavaScript on their page
  • doesn't require special software (compilers) to create JavaScript
  • doesn't require tons of special knowledge to make interesting things happen

I. Overview of Javascript

  1. javascript is a high-level language that is interpreted - translated into machine language at the time of usage. It allows the introduction of dynamic, real-time changes, to the webpage the user is accessing. The user causes an "event", e.g. moving the mouse to press a button, and the programmer can use javascript to program a response.
  1. Developed at Netscape as a web programming language. Worked jointly with Sun Microsystems (who developed Java). The language is embedded in all Netscape browsers since 2.0 and all Internet Explorer browsers since 3.0.
  1. Characteristics of the language

Allows interactive content on a webpage

client-based - works on the users machine, not the remote server machine

Does not manipulate files - can not write files on either the user's machine or the server machine

Does not carry out graphics

  1. Important issues for javascript:
  2. case counts! it makes a difference if you write alert or ALERT. In HTML, it doesn't matter, but in JavaScript it does.(The language instructions are written in lowercase.
  3. spelling counts!documetn is very different from document; bcolor is different from bgcolor, etc.All instructions must be spelled correctly or the interpreter will not recognize them.
  4. spacing counts! words have to be separated by space (either the space key, or tab, or a new line). It's OK to have lots of space, but not OK to have none.
  5. punctuation counts!The correct punctuation must be used.
  1. the function alert("string"). The alert() function requests that the browser pop-up a small window than contains the words in the string. The alert must be all in lower case letters. The string can contain any letters, upper or lower case, numbers, or punctuation that the programmer wishes.
  1. How to insert javascript in a webpage; Use the HTML tag pair

<SCRIPT> and < /SCRIPT > :

<SCRIPT language="JavaScript">

alert(" your message goes here ");

</SCRIPT>

A window pop-ups in the webpage with the string "your message goes here " (no quotes appear in the window). A button labelled "ok" also is contained in the window. When the user clicks it with the mouse (an event), the window disappears and the next instruction in the javascript is executed or the next part of the HTML for that webpage is displayed.

  1. Introduce the function prompt("string"). The prompt() function allows the programmer to obtain input from the user. A window pops up with the string and an input box. After the user enters input into the box and clicks a button (the event), the window disappears and the next instruction in the javascript is executed or the next part of the HTML for that webpage is displayed.
  1. More on the prompt() method. The prompt() method also asks a question, but this time the user is asked for a text response and provided with some buttons. The examples we considered last time were of the form:

color = prompt("Choose a color (red, yellow, blue):")

document.bgColor = color;

and two buttons appeared in the window, OK and Cancel. There is an alternative version of prompt() which allows the programmer to give a default response:

var major = prompt("What is your major?", "CIS");

Now, the user will see the text box with the string "CIS" already present. There will be three buttons, OK, Clear and Cancel. Clear will remove the default response from the text box. The user can then type their own major and either click OK or Cancel. When OK is clicked, the string in the text box is retuned to major. If Cancel is clicked, a null value is returned to major.

You may not get to the rest in this lecture, the rest may be carried over to the next lecture

  1. Static write to a window, called a window object - no interaction

window.document.write("This is just a statement");

This statement can be interpreted as saying that the programmer wants to write a string, "This is just a statement", as in a document (also called an object in javascript), to the window. Inside javascript:

<SCRIPT LANGUAGE = "JavaScript">

<!-- Conceal from non-Javascript Browsers

window.document.write("This is just a statement");

//-->

</SCRIPT>

methods always carry out some action or change some property of an object.

  1. The keyword window for the window object can be assumed - rewrite above as:

document.write("This is just a statement");

Can change the color of parts of the document using another method. For example, change the color of the background

document.bgColor = color;

What colors can we use? The standard colors are white, yellow, orange, pink, magenta, red, green, cyan, blue, lightGray, darkGray, gray and black. So setting color to any of the strings above would produce a new background color.

  1. The confirm() method - programmer can ask the user a question. The user must then click either the OK button or the Cancel button. This is an interactive method, since to continue on the webpage the user must respond.

confirm("Do you like javascript?");

Now the user will click either an OK button or a Cancel button. What happens to their response? The programmer must store it in a variable:

var reply = confirm("Do you like javascript?");

If the user clicks OK, reply is set to true. If the user clicks Cancel, the reply is set to false. The programmer can use this data to write something to the webpage:

document.write("Your answer was" + reply );

Note how a string, "Your ..." was combined with the response from the confirm button.

1

cis10_6