The address for this web page is: www.crosswinds.net/~fishcaro/day_J5_assg_st.htm
On to the next lesson! Back to the COURSE SYLLABUS

J5. ASSIGNMENT STATEMENTS and BOOLEAN VALUES

This lesson begins the study of conditional statements in JavaScript, by studying two typical components: assignment statements, and boolean values.

INDEX CARD #J5:

ASSIGNMENT STATEMENTS (J5a)

What is an "assignment statement"? An assignment statement assigns a value to a variable. For example,
x = 5.2;
is an assignment statement. Think of x as specifying a particular location in memory, where you can put things. (Think of it as a folder in a filing cabinet, if you want!) You're putting the number 5.2 in that location with the previous statement.

One particularly important type of assignment statement looks like this:
x = x + 1;
In mathematics, a sentence like this is always FALSE, since no number is equal to itself plus 1. However, in programming, here's what x = x + 1; means:

Take the current value of x (which, if you're following along with this card, is 5.2).
Add 1 to the current value, giving 5.2 + 1 = 6.2.
Put this new value, 6.2, back in memory location x , over-writing the value that was there before.

BOOLEAN VALUES (J5b)

The number and string data types have infinitely many possible values. The boolean data type, however, has only two possible values: true and false .

Boolean values typically arise when two JavaScript objects are being compared. A comparison operator compares the values of two things, and returns either true or false depending on the result of the comparison.

For example, the statement
x == 5.2;
asks the question:
"Is x equal to 5.2?"
If memory location x is currently holding 5.2, then the value of true is returned; otherwise, false is returned.

Don't mix up these two DIFFERENT types of statements:

x = 5.2; an assignment statement; puts a 5.2 in memory location x
x == 5.2; a comparison statement; asks if the current value of x is 5.2

COMPARISON OPERATORS (J5c)

Here are the most-used comparison operators for numbers:

x == y : Asks the question: is x equal to y ?
x != y : Asks the question: is x not equal to y ?
This returns true when x and y are not equal; it returns false when x and y are equal.
x > y : Asks the question: is x greater than y ?
That is, does the number x live to the right of the number y on a number line?
x < y : Asks the question: is x less y ?
That is, does the number x live to the left of the number y on a number line?
x <= y : Asks the question: is x less than or equal to y ?
x >= y : Asks the question: is x greater than or equal to y ?

A SIMPLE CONDITIONAL STATEMENT (J5d)

Very often, you want to check a value of a variable: if a particular condition is met, you want to do something. If the condition isn't met, you want to do something else. That is, you want to make a decision based on the condition of a certain variable. Statements that accomplish this are called conditional statements.

Here's a simple conditional statement.

if (x == 1) {
  y = y + 2;
}
else {
  y = y - 2;
}

If x is equal to 1, then it increases the current value of y by 2.
Otherwise, it decreases the current value of y by 2.
This could be written more simply on one line, like this:

if (x == 1) {y = y + 2;} else {y = y - 2;}

Printable version of Index Card J5a

Printable version of Index Card J5b

Printable version of Index Card J5c

Printable version of Index Card J5d

WORKSHEET #J5:
In Netscape, bring up a JavaScript Interpreter Screen, as discussed in the previous lesson.
Type in each of the following, to explore assignment statements, comparison operators, and boolean values.
PREDICT what you'll get in each case BEFORE you press enter!
Identify each value of x as either a number or a string.

x = 5.2; x = x + 1; document.write("The value of x is " + x + " ");
x = 5.2; x = x - 1; document.write("The value of x is " + x + " ");
x = 5.2; x = x + 2*x; document.write("The value of x is " + x + " ");

x = 5.2; x == 5.2;
x = 5.2; x == 6.2;
x = 5.2; x == x;
x = 5.2; x == x+1;

x = 2; y = 3; x == y;
x = 2; y = 3; x != y;
x = 2; y = 3; x > y;
x = 2; y = 3; x < y;
x = 2; y = 3; x >= y;
x = 2; y = 3; x <= y;

x = 4; y = 4; x == y;
x = 4; y = 4; x != y;
x = 4; y = 4; x > y;
x = 4; y = 4; x < y;
x = 4; y = 4; x >= y;
x = 4; y = 4; x <= y;

x = 3; if (x == 3) {y = 1;} else {y = 2;} document.write("the value of y is " + y + " ");
x = 4; if (x == 3) {y = 1;} else {y = 2;} document.write("the value of y is " + y + " ");

x = 1; y = 2; if (x > 0) {y = y + 1;} else {y = y - 1;} document.write("the value of y is " + y + " ");
x = 1; y = 2; if (x < 0) {y = y + 1;} else {y = y - 1;} document.write("the value of y is " + y + " ");

Create an HTML document with a JavaScript program inside the <SCRIPT>container, to do the following:
- Set values of x and y . (You'll want to check your program with lots of different values.)
- If x and y are equal, then double y .
- Otherwise, cut y in half.
- Print out the current values of x and y .

ASSIGNMENT #J5:
(AJ5.1) Please continue with the tutorial located at: http://www.pageresource.com/jscript/index2.htm Work through the lesson titled:
JavaScript Alerts
Make sure that you can answer all the following questions:

What is the general form of the "alert" command?
Write the following code:

<BODY>
Here's a sample alert box:<BR>
<SCRIPT LANGUAGE="JavaScript">
alert('Hello there!');
</SCRIPT>
</BODY>

What do you need to do to get rid of an alert box?

What happens if you change the code slightly, pulling the sentence inside the SCRIPT container?

<BODY>
<SCRIPT LANGUAGE="JavaScript">
Here's a sample alert box:<BR>
alert('Hello there!');
</SCRIPT>
</BODY>

What happens if you use double quotes, instead of single quotes, like this?

<BODY>
Here's a sample alert box:<BR>
<SCRIPT LANGUAGE="JavaScript">
alert("Hello there!");
</SCRIPT>
</BODY>

Be able to write code (without looking at anything!) to bring up an alert box when a user moves their mouse over a link. In particular, write the code to create a link to "http://www.snap.com" that brings up an alert box saying "Do you REALLY want to go to snap.com?" when the mouse hovers over the link. The clickable area for the link should read: "Going to a search engine..."
Try it. Can you actually GET to "http://www.snap.com" with this link? Why or why not? If not, what keeps happening?
How can you get an alert box to appear even before the user sees any of the page contents? When will the page actually load?
Write code that causes the user to see an alert box that says "Oh the anticipation... Click here to see my WONDERFUL web page..." as they enter your page (and before they get to see your page).
How can you REALLY annoy your users with multiple alert boxes, before they even get to see your page?
Be able to write the code (without looking!) that creates a button that says: "Click here to see what I think of YOU!". When the button is clicked, an alert box appears that says: "You are the greatest person I have ever met!"