JavaScript Programming

Tom Kelliher, CS 102

Feb. 22, 1999

Administrivia

Announcements

Quiz on Friday: Internet history, JavaScript.

Specifics on JavaScript Wednesday.

Assignment

If you have the JavaScript book, read Chapters 1 and 5. Programming assignment next time.

From Last Time

Program design.

Outline

HTML framework for JavaScript programs. Example program.
Relational conditions. Two ways of controlling a loop.
I/O statements in JavaScript.

Coming Up

Finish JavaScript. Begin FrontPage.

HTML Framework for JavaScript Programs

The starting point:

<html>
<head>
</head>
<body>
<script language="JavaScript">
<!--
// Start your program following the next line.

// Start with variable declarations.

// Continue with the code of your program.

// The end of your program should precede this line.
// -->
</script>
</body>
</html>

There is a copy of this on the S: drive in the Kelliher folder. The name of the file is javascript.html.

Problem: Write a JavaScript program which counts from 1 to a user-supplied limit.

Analyze the problem: inputs, outputs, calculations.
Design the pseudocode.

Write the program:

<html>
<head>
</head>
<body>
<script language="JavaScript">
<!--
// Start your program following the next line.
// Start with variable declarations.

var i;
var limit;

// Continue with the code of your program.

document.write("This program will count from 1 to a limit which you "
               + "supply.<p>");

limit = prompt("Please enter the limit: ", "10");

while (limit < 1)
   limit = prompt("Please enter a limit greater than 1: ", "10");

i = 1;

while (i <= limit)
{
   document.write(i + "<br>");
   i = i + 1;
}

document.write("<p>Goodbye!");
// The end of your program should precede this line.
// -->
</script>
</body>
</html>

Look on the class homepage for this program.

Relational Conditions in JavaScript

== : Equal --- true if both sides have the same value. Example:
```
if (age == 29)
   write.document("Are you really 29?<br>");
```

!= : Not equal --- true if both sides have different values. Example:

sum = 0;
input = prompt("Input value: ", "");

// 0 is a sentinel value.
while (input != 0)
{
   sum = sum + input;
   input = prompt("Next input value: ", "");
}

< : Less than --- true if the left side is less than the right side. Example:

i = 0;
limit = prompt("Enter a limit: ", "10");

// limit is the number of times the loop should execute.
// (This requires that i have an appropriate initial value.)
while (i < limit)
{
   document.write(i + "<br>");
   i = i + 1;
}

If we wanted to count from 1 to limit, would this loop do that? Is the comment correct?

<= : Less than or equal --- true if the left side is less than or equal to the right side.
> : Greater than --- true if the left side is greater than the right side.
>= : Greater than or equal --- true if the left side is greater than or equal to the right side.

I/O Statements in JavaScript

Input

Statement form:

variable = prompt(promptString, defaultValue);

where:

variable is the variable receiving the input value.
promptString is the prompt to be printed in the dialog box. It must be quoted.
defaultValue is the default input value. It must be quoted. It may be "", indicating no default value.

Output

Statement form:

document.write(outputString);

where outputString is:

A single quoted string.
A variable.
The concatenation of quoted strings and variables. Use + as the concatenation operation. Example:
```
document.write("Your age is: " + age + "<br>");
```

The output may have HTML tags within it. Two useful tags:

<br> --- line break.
<p> --- paragraph break.

Thomas P. Kelliher
Mon Feb 22 09:08:07 EST 1999

Tom Kelliher