ch. 17 fit5, cis 110 13f

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



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.







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



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



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



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;



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



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;



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



Numbers

23.14159-234900000000

Math.random();



Strings

• “Abc”• “Z”• “”• If our string contains single quotes, enclose

it in double quotes:var book = "That’s a great quote!";– quote swapping



Boolean Values

• There are only two Boolean values: true and false



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>;



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:



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



Interpreting an Assignment Statement

• example

var days = 44;var weeks = days / 7;alert(weeks);



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



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



Relational Operators• Relational operators make

comparisons between numerical values

• The outcome of the comparison is a Boolean value of true or false



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



Logical AND



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



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”));



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?



Concatenation

• + joins strings => concatenation

• The meaning of + is overloaded:

2 + 2 => 4, a number

“2” + “2” => “22”, a string



Conditional Statement: IFvar waterTemp = parseInt(prompt(‘enter temp’));

if (waterTemp < 32)waterState = "Frozen";



if/else Statements

if (<Boolean expression>) <then-statement>;else <else-statement>;



if with elsevar waterTemp = parseInt(prompt(‘enter temp’));

if (waterTemp < 32)waterState = "Frozen";

else waterState = " Liquid ";

alert(" state = " + waterState);



Statement Block: { }var waterTemp = parseInt(prompt(‘enter temp’));

if (waterTemp < 32) {waterState = "Frozen";

alert(" state = " + waterState);}else { waterState = " Liquid "; alert(" state = " + waterState);}



WaterStates Problem

Write a JavaScript that recognizes the states of water

Embed your script in a web page
