Chapter 17 Fundamental Concepts Expressed in JavaScript Wednesday, April 9, 14
Chapter 17Fundamental Concepts Expressed in JavaScript
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Programming Concepts
• Programming is the act of writing an algorithm or program
• JavaScript is an embedded programming language
– JavaScript lives in a <script> element in a web page
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
JavaScript Runner Page
We can test JavaScript statements here:
http://www.headfirstlabs.com/books/hfjs/hfjs_handson.php
you can type in JavaScript code and run it directly in your web browser. You don't even have to create a file—just enter your code and click the Run button.
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
JavaScript Variables
• In programming terminology, variables are storage locations that hold values and have a name
• The values can change => vary• To change the value of a variable:
– assignment statement
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Variable Identifier Rules
• a variable’s name is called an identifier• must begin with a letter, followed by any
sequence of letters, numerals, or the underscore symbol
• Identifiers are not allowed to contain spaces, punctuation, etc.
• Identifiers are case sensitive
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Variable Declaration Statement
var area, radius;• This command declares that two identifiers
(area, radius) will be used as variables
• Every variable used must be declared
• Always use the var keyword
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Statement Terminator (;)
• A program is simply a list of statements;• Each statement must be terminated by a
semicolon;• JavaScript provides a feature called
Automatic Semicolon Insertion (ASI);• There are rarely problems in omitting
semicolons;• Best practice:
always include semicolons;
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Undefined Values
• The declaration states that the identifier is the name of a variable
• The name has no value at first, it is not defined
• It is a name that doesn’t name anything• The name is declared but there is no value
assigned yet– The value is undefined
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Initializing a Declaration
• Declaring variables with initial valuesvar taxRate = .088;var balanceDue = 0;var dayOfWeek;
• dayOfWeek has a special value The value is undefined
• This works, too:var taxRate = .088, balanceDue = 0;
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Three Basic Data Types of JavaScript
• There are three types of data in JavaScript programs that will be used in this book: 1. numbers, 2. strings (a.k.a. text)3. booleans
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Numbers
23.14159-234900000000
Math.random();
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Strings
• “Abc”• “Z”• “”• If our string contains single quotes, enclose
it in double quotes:var book = "That’s a great quote!";– quote swapping
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Boolean Values
• There are only two Boolean values: true and false
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
The Assignment Statement
• If variables are to change values in an algorithm or program, there should be a command to do so
• The assignment statement changes a variable’s value
• An assignment statement has three parts that always occur in this order:<variable> <assignment symbol> <expression>;
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Assignment Symbol
• Different programming languages use different symbols for indicating assignment
• The three most widely used symbols are:– The equal sign (=)– The colon/equal sign pair (:=)– The left pointing arrow (←)
• An example of an assignment is:
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Interpreting an Assignment Statement
• To understand how assignment works, you must think of a value flowing from the right side (expression side) to the left side (variable side)
• The assignment symbol should be read as “is assigned ” or “becomes” or “gets”
• These terms emphasize the role that the assignment symbol plays in changing the value of the variable named
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Interpreting an Assignment Statement
• example
var days = 44;var weeks = days / 7;alert(weeks);
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
An Expression and Its Syntax• expressions are anything that give you a value• most expressions are algebra-like formulas• Expressions are built of variables and operators:
– addition (+) and subtraction(–)– multiplication (*) and division (/ )
• These are called the arithmetic operators
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Arithmetic Operators+, -, *, /, %
• The modulus (mod) operation (%) divides two integers and returns the remainder
– The result of a % b is the remainder of integer division a / b
– Examples:
4 % 2 => 0
5 % 2 => 1
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Relational Operators• Relational operators make
comparisons between numerical values
• The outcome of the comparison is a Boolean value of true or false
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Logical Operators: &&
• Logical AND
– The && is the logical AND operator
– The outcome of a && b is true if both a and b are true; otherwise, it is false
var class = “199”, today = “Fri”;alert((class == “110”) && (today == “Wed”))//this alert displays false
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Logical AND
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Logical Operators: ||• Logical OR
– The outcome of a || b is true if:• either a is true or b is true• if they are both true
– It is false only if both are false
• && and || have lower precedence than the relational operators– Relational operators are always evaluated before logic
operators
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Logical Operators: !
• logical NOT (!) – It is a unary operator, taking only a single
operand– Its outcome is the opposite of the value of its
operand
– This alert will display true
var class = “CIS 110”; alert(!(class == “CIS 199”));
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Operator Overload (+)
• Operator overload is a technical term meaning the “use of an operator with different data types”
• Operators usually apply to a single data type– 4 + 5 produces the numerical result of 9
• If operands are strings, what does the+ mean?
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Concatenation
• + joins strings => concatenation
• The meaning of + is overloaded:
2 + 2 => 4, a number
“2” + “2” => “22”, a string
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Conditional Statement: IFvar waterTemp = parseInt(prompt(‘enter temp’));
if (waterTemp < 32)waterState = "Frozen";
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
if/else Statements
if (<Boolean expression>) <then-statement>;else <else-statement>;
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
if with elsevar waterTemp = parseInt(prompt(‘enter temp’));
if (waterTemp < 32)waterState = "Frozen";
else waterState = " Liquid ";
alert(" state = " + waterState);
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Statement Block: { }var waterTemp = parseInt(prompt(‘enter temp’));
if (waterTemp < 32) {waterState = "Frozen";
alert(" state = " + waterState);}else { waterState = " Liquid "; alert(" state = " + waterState);}
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
WaterStates Problem
Write a JavaScript that recognizes the states of water
Embed your script in a web page
Wednesday, April 9, 14
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Wednesday, April 9, 14