78
BIT116: Scripting Lecture 07 Operators & Conditionals

Operators & Conditionals. NO CLASS ON THURSDAY! "Day of Inquiry and Assembly" / Non-Instructional Day Assignment #1 posted It's a solo or pair

Embed Size (px)

Citation preview

Page 1: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

BIT116: ScriptingLecture 07

Operators & Conditionals

Page 2: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

2

Announcements for Tues, April 28 NO CLASS ON THURSDAY!

"Day of Inquiry and Assembly" / Non-Instructional Day

Assignment #1 posted It's a solo or pair assignment

Open Lab is now happening! Mon, Weds, Fri: 1pm -3pm in room CC1-221 (if 221 is occupied then check next door in CC1-210) Tues, Thurs: 3:30 – 5:10 in CC1-231 Open Lab will be canceled on the following dates because of scheduling conflicts in room CC1-

221: Friday April 15th

Friday, May 22nd

Page 3: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

3

Some Common JavaScript Methods & Properties

Page 4: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

4

What is the DOM?Document Object Model

<html> <head>

<title>My Title</title>

</head>

<body>

<a href=“…”>My link</a>

<h1>My header</h2>

Page 5: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

5

getElementById()

The getElementById() method returns the element that has the id attribute with the specified value.

This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.

Returns null if no elements with the specified id exists.

If more than one element with the specified id exists—although it shouldn't, since each instance of id should be unique—the getElementById() method returns the first element.

In HTML document:<p id=“txt_name”>My paragraph</h2>

var name_element = document.getElementById('txt_name');

is roughly equivalent to

var name_element = $('#txt_name');

Page 6: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

6

innerHTML Property

The innerHTML property either changes or returns the inner HTML of an element.

SyntaxIn HTML document:

<p id=“txt_name”>My <i>paragraph</i></p> // This continue the "non-jQuery" example from the prior slide

alert(name_element.innerHTML); // you’ll see My <i>paragraph</i>name_element.innerHTML = "<b>Hi</b>"; //changes to <p><b>Hi</b></p>

is pretty much equivalent to

// This continue the "jQuery" example from the prior slide alert(name_element.html() ); // you’ll see My <i>paragraph</i> name_element.html("<b>Hi</b>");

http://faculty.cascadia.edu/cduckett/bit116/Lecture_06/get_element_by_id.html

Page 7: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

7 Do Exercise 0

Page 8: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

8

Announcementsfor Thurs, May 7 ICE grades now up to date in ST

Prior to Lecture 5 in-class exercise (ICE) points were awarded for 'effort in class'

Lectures 5, 6, 7, 10 are awarded for completion of the listed exercises You don’t need to be 100% perfect on every single one, but I want to see most-if-not-all done,

and done to a high standard of work My goal is to get you to actually figure out how to do the work, and then give you points for it

'Buffer Day' is due date for all in-class work prior to that class My goal: I can't check 30 students work for the entire quarter during the last week of class

There's no specific work on that day (and free ICE & quiz points)

Page 9: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

9

Midterm Exam Thursday, May 14th

Next week, on Thursday

There is no practice exam

Paper-and-pencil only Memorize the HTML/CSS stuff that appeared in slides Remember the rules/patterns for dealing with HTML/CSS in case you see something not in

the slides

Page 10: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

10

Midterm Exam Generally speaking I'm going to focus on what we've spent time on in class…

…with the caveat that anything anywhere in this course is fair game.

I'm going to create the exam by going through the PowerPoint slides & In-Class Exercises, and focus the questions on that material

Page 11: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

11

JavaScript Operators

Page 12: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

12

JavaScript Operators

Operators do much of the work in scripts. So far, you have seen examples of the use of the assignment (=) and addition (+) operators.

JavaScript offers many other types of operators to perform various operations.

This lecture begins by giving you an introduction to the different types of JavaScript operators.

Then, you will learn about each operator and its use in scripts.

Finally, you will learn about the order of precedence for operators, which determines which operations are performed before others.

Page 13: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

13

Understanding the Operator Types

An operator is a symbol or word in JavaScript that performs some sort of calculation, comparison, or assignment on one or more values. In some cases, an operator provides a shortcut to shorten the code so that you have less to type.

Common calculations include finding the sum of two numbers, combining two strings, or dividing two numbers. Some common comparisons might be to find out if two values are equal or to see if one value is greater than the other. A shortcut assignment operator might be used to assign a new value to a variable so that the variable name does need to be typed twice.

Page 14: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

14

Binary Operators – Basic reviewMost operators are binary operators, meaning that they operate on two values. The values that you use can be any sort of values you like. For instance, you could use two variables, two numbers, or a variable and a number. A few of these operators are able to perform a task on a single variable’s value.

As a quick example, you will remember as with Java that you can use the addition operator (+) to concatenate (glue together) two strings together. Here is an example of two string values being combined with the addition operator:

window.alert("Hello and " + "goodbye.");

You can also use the addition operator when one of the values is a variable, as in this example:

var part2 = "goodbye."window.alert("Hello and "+ part2);

The addition operator also works when both values are variables, as in the next example:

var part1 = "Hello and ";var part2 = "goodbye."window.alert(part1 + part2);

These examples illustrate how you can use binary operators with a number of values and/or variables. This allows you some flexibility in the way you code your scripts.

Page 15: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

15

Unary Operators

The three operators that work on single values are the increment, decrement, and unary negation operators.

The increment (++) and decrement (--) operators are actually shortcuts to adding or subtracting 1, so learning how to use them could save you some coding time.

The mathematical operators and their functions are summarized on the next slide. The following slides discuss each operator in more detail.

Page 16: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

16

Understanding the Operator TypesJavaScript uses several different types of operators:

• Mathematical These operators are most often used to perform mathematical calculations on two values. The mathematical operators will probably be the most familiar to you. They use symbols such as +, –, *, and /.

• Assignment These operators are used to assign new values to variables. • Comparison These operators are used to compare two values, two variables, or perhaps two longer

statements. They use symbols such as > (for “is greater than”) and < (for “is less than”).• Logical These operators are used to compare two conditional statements (or to operate on one

statement) to determine if the result is true and to proceed accordingly. They use symbols such as && (returns true if the statements on both sides of the operator are true) and || (returns true if a statement on either side of the operator is true).

• Bitwise These are logical operators that work at the bit level (ones and zeros). They use symbols like << (for left-shifting bits) and >> (for right-shifting bits).

• Special These are operators that perform other special functions of their own.

In this lecture, you will learn about each of these types of operators.

This will be a general overview of the function of each type of operator, so that you will better know the purpose of all the operator types when you put them to use later.

To begin, you’ll look at the mathematical operators in JavaScript.

Page 17: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

17

Arithmetic Operators

Page 18: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

18

Page 19: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

19

The Addition Operator: +As you have seen, the addition operator can be used to combine two strings. It is also used to add numbers in mathematical calculations.

Variables for Addition Results

One use of the addition operator is to add two numbers to get the mathematical result. When adding numerical values, you often assign the result to a variable and use the variable later to make use of the result. For example, to calculate the value of 4 plus 7 and show the result, you could code it like this:

var theSum = 4 + 7;window.alert(theSum);

The result is an alert that says 11.

To make the example a little more complex, you could change one of the numbers to a variable:

var num1 = 4;var theSum = num1 + 7;window.alert(theSum);

Page 20: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

20

The Addition Operator: + CONTINUED

Taking the example one step further, you could make both of the numbers variables:

var num1 = 4;var num2 = 7;var theSum = num1 + num2;window.alert(theSum);

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/addition.html

Page 21: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

21

The Addition Operator: + CONTINUED

Type Conversions in Addition Calculations

It is important to note how JavaScript performs type conversion when working with the mathematical operators. When you use the addition and other mathematical operators, you need to be aware that JavaScript automatically converts different values, like an integer (a nondecimal numeric value) and a float (a decimal numeric value) to the appropriate type. For instance, you might have the following code:

var num1 = 4.73; // This is a floatvar num2 = 7; // This is an intvar theSum = num1 + num2;window.alert(theSum);

JavaScript added the integer and the float together and gave back a float: 11.73.

JavaScript does this often, so you need to make sure that you have the right sort of values when you begin adding.

Page 22: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

22

The Addition Operator: + CONTINUED

Type Conversions in Addition Calculations CONTINUED

If you add a number and a string, the result will come out as though you had added two strings. Look at this example:

var num1 = 4; // This is an intvar num2 = "7"; // This is a stringvar theSum = num1 + num2;window.alert(theSum);

This looks as if it would be adding the numbers 4 and 7, since they both appear to be numbers. The trouble is that the 7 is a string in this case, not a number, because it has quotes around it. This causes the 4 to be converted to a string, and then the two strings are combined, not added.

The result would be: "4" + "7" = 47.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/stringsnumbers.html

Page 23: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

23

The Addition Operator: + CONTINUED

Special Rules for Addition in JavaScript

• If one of the operands is NaN, the result will be NaN• If one of the operands is a string, the other operand is converted into a string and the strings are

concatenated.• If both operands are strings, the strings are concatenated.

Page 24: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

24 Do Exercise #1

Page 25: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

25

Operator Review Slides The following slides are being left here for you to read through on your own

They're mostly review (y'all know how subtraction works )

Question: Who can explain the Increment (++), Decrement (--) operators?

The review slides have the same background as this slide

Page 26: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

26

The Subtraction Operator: -The subtraction operator is used to subtract the value on its right side from the value on its left side, as in mathematics. Here is an example:

var theResult = 10 - 3;window.alert(theResult);

This code simply subtracts 3 (the number on the right of the operator) from 10 (the number on the left of the operator). The result is an alert that says 7.

As with the addition operator, you can use variables to hold the numbers you are working with, as in this example:

var num1 = 10;var num2 = 3;var theResult = num1 - num2;window.alert(theResult);

The result is the same as the previous example: an alert that says 7.

Page 27: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

27

The Subtraction Operator: - CONTINUED

Special Rules for Subtraction in JavaScript

• If one of the operands is NaN, the result will be NaN• If one of the operands is a data type other than a number, JavaScript will try to convert that data type and

perform the division; if it can't, the result will be NaN.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/subtraction.html

Page 28: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

28

The Multiplication Operator: *The multiplication operator is used to multiply the value on its right side by the value on its left side. Again, this is just like mathematical multiplication.

The next example shows this operator in action:

var num1 = 4;var num2 = 5;var theTotal = num1 * num2;window.alert(theTotal);

Here, you get an alert that says 20, the result of 4 times 5.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/multiplication.html

Page 29: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

29

The Multiplication Operator: * CONTINUED

Special Rules for Multiplication in JavaScript

• If one of the operands is NaN, the result will be NaN• If one of the operands is a data type other than a number, JavaScript will try to convert that data type and

perform the division; if it can't, the result will be NaN.

Page 30: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

30

The Division Operator: /The division operator is used to divide the value on its left side by the value on its right side. For example, the code 4/2 means 4 divided by 2 and gives the result of 2.

For a JavaScript example of this in action, take a look at this code:

var num1 = 10;var num2 = 2;var theResult = num1/num2;window.alert(theResult);

This gives you an alert that says 5, the result of dividing 10 by 2.

Page 31: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

31

The Division Operator: / CONTINUED

Division by Zero

When you use the division operator, you need to be careful that you do not end up dividing by zero in some way. If you do, the result is going to be either infinity or undefined, depending on your browser. The code that follows shows an example of this happening (although it is unlikely to occur exactly in this way):

var num1=10;var num2=0;var theresult=num1/num2;window.alert(theresult);

If you placed this code in a document, you might see an alert box like this:

Infinity

Page 32: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

32

The Division Operator: / CONTINUED

Type Conversions in Division Calculations

Another thing to remember with division is that if you have two values that do not divide evenly, the result is converted into a float, and thus will have decimal places. The code that follows shows an example:

var num1 = 3;var num2 = 4;var theResult = num1/num2;window.alert(theResult);

The result in this case is 0.75, which is what you see in the alert box. Some browsers may not show the 0 before the decimal, and display just .75 in the alert box instead.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/division.html

Page 33: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

33

The Division Operator: / CONTINUED

Special Rules for Division in JavaScript

• If one of the operands is NaN, the result will be NaN• If zero is divided by zero, the result will be NaN• If any number is divided by zero, the result will be Infinity• If one of the operands is a data type other than a number, JavaScript will try to convert that data type and

perform the division; if it can't, the result will be NaN.

Page 34: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

34

The Increment Operator: ++The increment operator can be used on either side of the value on which it operates. It increases the value it is operating on by 1, just like adding 1 to the value. The actual result depends on whether the operator is used before or after the value it works on, called the operand. This operator is often used with variables, and often within loops .

The Increment Operator Before the Operand

When the increment operator is placed before the operand, it increases the value of the operand by 1, and then the rest of the statement is executed. Here is an example:

var num1 = 2;var theResult = ++num1;

In this case, the variable num1 begins with a value of 2. However, when the code assigns the value to the variable theResult, it increments the value of num1 before the assignment takes place. The increment occurs first because the increment operator is in front of the operand.

So, the value of num1 is set to 3 (2+1) and is then assigned to the variable theResult, which gets a value of 3.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/increment_before.html

Page 35: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

35

The Increment Operator: ++ CONTINUED

The Increment Operator After the Operand

If you place the increment operator after the operand, it changes the value of the operand after the assignment.

Consider this example:

var num1 = 2;var theResult = num1++;

As in the previous example, num1 begins with the value of 2. On the next line, the increment operator is used after the operand. This means that the code assigns the current value of num1 to the variable theResult, and after that is done, it increments the value of num1. So, only after this assignment is complete do you have a new value for num1. The variable theResult is given a value of 2, and then num1 is changed to 3. If you use num1 after this, it will have a value of 3.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/increment_after.html

Page 36: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

36

The Increment Operator: ++ CONTINUED

Another way to see how the increment operator works before and after the operand is to run the following script in your browser. Notice what the values are in the first alert and what they are in the second alert.

num1 = 2;result = ++num1;alert("num1 = " + num1 + " result = " + result);num1 = 2;result = num1++;alert("num1 = " + num1 + " result = " + result);

In the first alert box, you will see num1 = 3 result = 3. Since the ++ operator is used before the operand here, the value of num1 is increased by 1 and then assigned to the result variable. In the second alert box, you will see num1 = 3 result = 2. This is because the ++ operator is used after the operand, so the value of num1 is increased after it has been assigned to the result variable. The result variable gets a value of 2, but num1 will be increased to 3.

Note: Don’t worry if the difference between using the increment operator before and after the operand is still not clear to you. When you learn how to use loops later in the quarter, you will see how the placement of this operator can be quite important.

Page 37: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

37

The Decrement Operator: --The decrement operator works in the same way as the increment operator, but it subtracts 1 from the operand rather than adding 1 to it. As with the increment operator, its placement before or after the operand is important.

If you place the decrement operator before the operand, the operand is decremented, and then the remainder of the statement is executed. Here is an example:

var num1 = 2;var theResult = --num1;

Here, the variable num1 is given a value of 2. In the next line, the code subtracts 1 from num1 and then assigns the result to the variable theResult. Thus, the variable theResult ends up with a value of 1 (2–1).

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/decrement_before.html

Page 38: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

38

The Decrement Operator: -- CONTINUED

When you place the operator after the operand, as in the next example, the rest of the statement is executed and the operand is decremented afterward:

var num1 = 2;var theResult = num1--;

This time, the variable theResult is assigned a value of 2, and then num1 is decremented to 1.

If you use num1 after this line, it will have a value of 1.

As with the increment operator, the decrement operator becomes important when you work with loops, as you will learn in a later lecture.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/decrement_after.html

Page 39: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

39

The Unary Negation Operator: -Unary negation is the use of the subtraction sign on only a single operand. This operator creates a negative number or negates the current sign of the number (positive or negative). Here is an example of assigning a negative value to a number:

var negnum = -3;

This defines a variable with a value of negative 3. Basically, the operator tells the browser that the 3 is “not positive,” because it negates the default sign of positive by placing the negation operator ahead of the number.You can also use the unary negation operator to help show the addition or subtraction of a negative number, as in this example:

var theResult = 4 +( -3);

Notice the parentheses around the –3 portion of the statement. As in math, you can use parentheses to set the order of operations (as you’ll learn later in this chapter) or just to clarify the order visually. Here, the parentheses aren’t necessary, but they help organize that code so that you can see that it is adding –3 to 4. You could have written this code as well:

var theResult = 4 + -3; // This doesn’t look as nice, but it still works.

Page 40: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

40

The Unary Negation Operator: - CONTINUED

You may be thinking that an even easier way to write the same thing looks like this:

var theResult = 4 - 3;

You’re right, this is the simplest way to write it; but it uses subtraction rather than unary negation.

To make it appear more clearly, you could use this operator on a variable value, which simply negates the sign on the number represented by the variable:

var x = 4;var y = 3;var z = -y;

This assigns the variable z the unary negated value of y, which is –3.

Now that you’ve learned about the mathematical operators, it’s time to turn to the assignment operators.

Page 41: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

41

Assignment Operators

Page 42: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

42

Assignment Operators

Understanding Assignment Operators

Assignment operators assign a value to a variable. They do not compare two items, nor do they perform logical tests.

When you learned about variables in Chapter 3, you saw how the basic assignment operator, the single equal sign (=), is used to give an initial value or a new value to a variable, as in this example:

var myTime = 0;

As you know, this assigns a value of 0 to a variable myTime.

The other assignment operators also give new values to variables, but they do so in slightly different ways because they perform a simple calculation as well. These operators are particularly useful within loops, as you’ll learn in later lectures.

Page 43: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

43

The Assignment Operator: =You have been using the assignment operator since the good ol' days of Java.

It assigns the value on the right side of the operator to the variable on the left side, as in this example:

var population = 1500000;

This assigns the value of 1500000 to the variable population.

RIGHT to LEFT

Page 44: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

44

Comparison Operators

Page 45: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

45

Understanding Comparison Operators

Comparison operators are often used with conditional statements and loops in order to perform actions only when a certain condition is met.

Since these operators compare two values, they return a Boolean value of either true or false, depending on the values on either side of the operator.

Page 46: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

46

Page 47: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

47

The Is-Equal-To Operator: ==For the == operator to return true, the values or statements on each side must be equal. They cannot just be close; they must return as equal. If the values do not return as equal, the == operator returns false.

Note: a statement such as “4”== 4 will return true because JavaScript will convert the number 4 to the string “4” for you. If you want this statement to return false, you should use the strict is-identical-to operator (===), discussed in a later slide.

Page 48: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

48

Page 49: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

49

The Is-Equal-To Operator: == CONTINUED

As with the other operators, you can use variables with comparison operators. If the values of the variables are equal, the comparison will return true. Otherwise, it will return false. Suppose that you have declared the following variables:

var num1 = 2;var num2 = 5;var num3 = 5;

The following comparison would return true:

mum2 == num3;

The next comparison would return false:

mum1 == num3;

NOTE: Remember that the is-equal-to operator (==) is for comparison. Be careful not to accidentally use the assignment operator (=) in its place, because it can cause your scripts to work incorrectly.

Page 50: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

50

The Is-Not-Equal-To Operator: !=The != operator is the opposite of the == operator. Instead of returning true when the values on each side of the operator are equal, the != operator returns true when the values on each side of it are not equal. The only way this operator returns a false value is if it finds that the values on both sides of the operator are equal.

The following table shows some examples of statements that use the != operator, their return values, and the reason they return true or false.

Page 51: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

51

The Is-Greater-Than Operator: >When the is-greater-than operator is used, the comparison returns true only if the value on the left side of the operator is greater than the value on the right side. Like the other operators, the > operator works with string values as well as numeric ones.

But how can one string be greater than another string?

In the case of strings, a lowercase letter is greater than an uppercase letter, and an uppercase letter is greater than a number.

When comparing strings, JavaScript first checks the first letter of the string for a difference. If there is no difference, it moves on to the next character, then the next one, and so on, until it finds a difference or reaches the end of the string. If the two values on each side of the > operator are equal, it returns false. If the value on the right side is greater, this also returns false.

The following table shows examples of statements that use the > operator.

Page 52: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

52

Page 53: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

53

The Is-Less-Than Operator: <The is-less-than operator works in reverse from the is-greater-than operator. Rather than returning true when the value on the left is greater, the is-less-than operator returns true when the value on the left side of the operator is less than the value on the right side of the operator.

This comparison operator returns false if the value on the left side of the operator is greater than or equal to the value on the right side.

Page 54: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

54

The Is-Greater-Than-or-Equal-to Operator: >=The >= operator is slightly different from the comparison operators you’ve read about so far. This operator adds an option for the values on both sides to be equal and still have the comparison return true. So, to return true, the value on the left side of the operator must be greater than or equal to the value on the right side. An is-greater-than-or-equal-to comparison will return false only if the value on the left side is less than the value on the right side.

Page 55: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

55

The Is-Less-Than-or-Equal-to Operator: <=Much like the >= operator, the <= operator adds the possibility for the values on each side to be equal. With the is-less-than-or-equal-to operator, a value of true is returned if the value on the left side of the operator is less than or equal to the value on the right side of the operator.

Page 56: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

56

The Strict Is-Equal-to (or "Is-Identical-to") Operator: ===For the === operator to return true, the values or statements on each side must be equal and must be of the same type.

This means that if you use a statement such as 3===“3”, the operator will return false because the value on the left is a number and the value on the right is a string; the values are of different types.

Whereas the is-equal-to (==) operator first attempts to convert the values on each side of the operator to the same type and then determines if they are equal, the strict is-equal-to operator automatically returns false if the values are not of the same type.

The following table shows examples of statements that use the === operator.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/strict_equals.html

Page 57: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

57

Page 58: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

58

The Strict Is-Not- Equal-to (or "Is-Not-Identical-to") Operator: !==For the !== operator to return true, the values or statements on each side must not be equal or must not be of the same type. This means that if you use a statement such as 3!==“3”, the operator will return true because the value on the left is a number and the value on the right is a string; the values are of different types (and thus not strictly equal).

Whereas the is-not-equal-to (!=) operator first attempts to convert the values on each side of the operator to the same type and then determines if they are not equal, the strict is-not-equal-to operator (!==) automatically returns true if the values are not of the same type.

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/strict_not_equals.html

Page 59: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

59

Logical Operators

Page 60: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

60

The Logical Operators

The three logical operators allow you to compare two conditional statements to see if one or both of the statements is true and to proceed accordingly. The logical operators can be useful if you want to check on more than one condition at a time and use the results.

Like the comparison operators, the logical operators return either true or false, depending on the values on either side of the operator.

Page 61: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

61

The AND Operator: &&The logical && operator returns true if the comparisons on both sides of the && operator are true. If one or both comparisons on either side of the operator are false, a value of false is returned.

Page 62: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

62

The OR Operator: ||The logical || operator returns true if the comparison on either side of the operator returns true. So, for this to return true, only one of the statements on one side needs to evaluate to true. To return false, the comparisons on both sides of the operator must return false.

Page 63: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

63

The NOT Operator: !The logical ! operator can be used on a single comparison to say, “If this is not the case, then return true.” Basically, it can make an expression that would normally return false return true, or make an expression that would normally return true return false.

Page 64: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

64

Special Operators

Page 65: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

65

Special Operators

There are a number of special operators in JavaScript that are used to perform specific tasks, or to aid in shortening code. Don’t be discouraged if many of the terms used in this table look unfamiliar. Objects, arrays, and other unfamiliar terms are discussed in later lectures. Many of these operators will be reintroduced at the appropriate point in the later lectures, where their purpose can be expressed more clearly.

Page 66: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

66

Conditional Statements

Page 67: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

67

What is a Conditional Statement?

A conditional statement is a statement that you can use to execute a bit of code based on a condition or to do something else if that condition is not met. You can think of a conditional statement as being a little like cause and effect.

Here's an example:

"If a variable named myMoney is greater than 1000, send an alert that says my finances are OK. Otherwise, send an alert saying I need more money!"

Page 68: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

68

The if , if/else , if/else if/else Statements

if statement: use this statement to execute some code once only if a specified condition is true

if...else statement: use this statement to execute some code if the condition is true and another code if the condition is false

if...else if....else statement: use this statement to select one of many blocks of code to be executed

Page 69: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

69

The if Statement (Example)

if (hour < 18){   show = "Good day";}

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/if.html

Page 70: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

70

The if…else Statement (Example)

if (hour < 18){ show = "Good day";}else{ show = "Good evening";}

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/ifelse.html

Page 71: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

71

The if…else if…else Statement (Example)

if (hour < 12){

show = "Good morning";}else if ( hour < 18 ){

show = "Good afternoon";}else if ( hour < 22 ){ show = "Good evening";} else{

show = "Goodnight!";}

http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/ifelseifelse.html

Page 72: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

72 Do Exercises#3, #4, #5, #6

(You may also want to do exercise #2, to warm up)

Page 73: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

73

The switch Statement

The switch statement is used to perform different action based on different conditions.

Use the switch statement to select one of many blocks of code to be executed.

Page 74: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

74

var day = new Date().getDay(); // Note that Sunday = 0, Monday = 1, Tuesday = 2, etc.

switch (day){

case 0: currentDay = "Today is Sunday"; break;

case 1: currentDay = "Today is Monday"; break;

case 2: currentDay = "Today is Tuesday"; break;

case 3: currentDay = "Today is Wednesday"; break;

case 4: currentDay = "Today is Thursday"; break;

case 5: currentDay = "TGIF!"; break;

case 6: currentDay = "Today is Saturday"; break;} Example: http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/switch1.html

Page 75: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

75

var day = new Date().getDay();

switch (day){

case 0: currentDay = "Today is Sunday"; break;

case 6: currentDay = "Today is Saturday"; break;

default: // Use default to specify what to do if there's no match   currentDay = "Looking forward to a spectacular Weekend!";}

Example: http://faculty.cascadia.edu/cduckett/bit116/Lecture_07/switch2.html

Page 76: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

76 Do Exercise #7

Page 77: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

77

Memorize these:Operators:

Arithmetic +: concatentation vs. addition ++ / --

You do NOT need to remember the 'before or after' thing Assignment

Don't need to remember the compound assignment operators (+= , -=, etc)

Comparison Recognize: ===, !===

Logical operators

If statement, if/else statement, if … else if … else if pattern

Page 78: Operators & Conditionals.  NO CLASS ON THURSDAY!  "Day of Inquiry and Assembly" / Non-Instructional Day  Assignment #1 posted  It's a solo or pair

78

Recognize these:

DOMMemorize what the acronym stands forBe able to talk about it in genereral terms

getElementByIdinnerHTML

Exception: Memorize how to convert from getElementById/innerHTML to jQuery

switch