Overview: Programming Concepts Formulating an algorithm or program Concepts from JavaScript Fully general programming language Designed for making active web pages/apps

Programming Concepts Not enough for fancy web pages, but these provide a basic set of first capabilities Names, values, variables Declarations Data types, numbers, string literals and Booleans Assignment Expressions Conditionals

Names, Values, And Variables A Name is a symbol that represents something Names Have Changing Values U.S. President: Barack Obama Names in a Program Are Called Variables “variable”: reminds us that the value associated with the symbol can vary Values associated with a variable change in programs using the assignment statement ( = )

Names and Changing Values

Identifiers and Their Rules Identifier is character sequence that is a variable's name Formed following specific rules Must begin with a letter or underscore ( _ ) followed by any sequence of letters, digits, or underscore characters Cannot contain spaces Case sensitive

Identifiers and Their Rules Valid Invalid firstOne 1stOne first1 first-1 First_1 first$1 First_One first One fIRSToNE First1! _special 5 very_long_name_ok happy:) For each invalid identifier, what rule is broken?

A Variable Declaration Statement Declaration: State variables which will be used var radius, area; Variable declaration is a type of statement Can have many var statements in a program

The Statement Terminator Program is a list of statements Each statement is terminated by the statement terminator symbol JavaScript: semicolon ( ; )

Rules for Declaring Variables Must declare variables before use Declaration can appear anywhere Often first (“up top”) Undefined values Only has value if initialized or assigned var speed; speed = 42;

Initializing a Declaration Setting initial value var speed = 42; Related variables may be declared together var numA = 27, numB, numC;

Three Basic Date Types in JavaScript Values are grouped into related categories called data types numbers strings (used for text) Booleans (used for logic)

Rules for Writing Numbers No "units" or commas Can have about 10 significant digits and can range from 10-324 to 10308 Values with no decimal point are integers 10 1567238 -487 -776734551 0 Values with a decimal point are real, or floating point 10.0 3.1415926 -478934.4 0.000101101111

Strings Strings are sequences of characters Surrounded with single ( ' ' ) or double quotes ( " " ) Initialization var hairColor = "black", sign= 'Leo'; var greeting = "Hello, how are you today?"

Rules for Writing Strings in JavaScript Allow most characters except return (Enter), backspace, tab, \ Double quoted strings can contain single quoted strings and vice versa ( “My dog ‘Spot’ is a yellow Lab” )

Rules for Writing Strings in JavaScript Any number of characters allowed in a string Even " " (empty string) Quotes do not count in figuring a string’s length Empty string is length 0 " " has length 1

Literals Literal: term for a string or number value String Literals stored in memory Quotes are removed Any character can be stored in memory Even characters that cannot be typed var twoTabs = “\t\t”, singQuote=“\’”

Boolean Values Two logical values: true and false Not identifiers or strings Used implicitly; only occasionally for initializing variables Mostly used in comparisons (if (x < 5)) var done = false, simpleMode = true, speed = 42;

The Assignment Statement Used to change a variable's value <variable> <assignment symbol> <expression> ; Assignment Symbol In JavaScript, the equal sign ( = )

Interpreting an Assignment Statement Read assignment symbol as "gets“ speed = 42 * 3; Expression is evaluated first If there are any variables in it, their current value is used Then computed value becomes value of variable on left side

A Key Point about Assignment Programming is not Algebra Consider this statement x = x + 1 18-24

An Expression and its Syntax Expression is math-like formula Built out of values and operators standard arithmetic operators relational operators compare values logical operators and string operators too

Arithmetic Operators Add, subtract, multiply, divide ( +, -, *, / ) Multiplication must be given explicitly 2ab in math => 2 * a * b Multiply and divide take precedence over add and subtract Override with parens

Arithmetic Operators Modulus or mod ( % ) divides two integers and returns remainder No exponentiation Binary operators operate on two operands like + and * and % Unary operators operate on one operand like - for negation

Relational Operators Make comparisons between numeric values Outcome is a Boolean value, true or false < less than <= less than or equal to == equal to (note difference between = and ==) != not equal to >= greater than or equal to > greater than 5 < 10 evaluates to true 8.54 == 14.7 evaluates to false speed > 42 depends

Logical Operators Used with Boolean values Logical And Logical Or Operator is && Outcome of a && b is true if both a and b are true; otherwise it is false Logical Or Operator is || Outcome of a || b is true if either a is true or b is true Logical Not Operator is ! Unary operator. Outcome is opposite of value of operand

Logical Operators To test two or more relationships together Teenagers are older than 12 and younger than 20 var age = 6 Evaluate age > 12 && age < 20 age > 12 evaluates to false age < 20 evaluates to true Finally, false && true evaluates to false Try it for var age = 14

Operators (cont'd) Operator Overload Addition 4 + 5 produces 9 Use of one operator symbol with different data types Example: + Addition 4 + 5 produces 9 Concatenation "four" + "five" produces "fourfive"

A Conditional Statement Conditional statements: perform tests based on variable values if ( <Boolean expression> ) <then-statement> ; Boolean expression is usually a relational expression

If Statements and Their Flow of Control Boolean statement (predicate), is evaluated If outcome is true, then-statement is performed If outcome is false, then-statement is skipped

Compound Statements Then-statement can be a sequence of statements (compound stmt) Group with curly braces { } if (waterTempC < 0) { waterState = “solid”; description = “ice”; }

if/else Statements To execute statements if a condition is false if ( <Boolean expression> ) { <then-statements>; } else { <else-statements>; } Boolean expression is evaluated first If outcome is true, then-statements are executed and else-statements are skipped If outcome is false, then-statements are skipped and else-statements are executed

Nested if/else Statements A then-statement (or an else-statement) can contain another if/else By rule, an else is associated with closest preceding if Use curly braces to avoid confusion

Nested if/else Statements if (<Boolean exp1>) if (< Boolean exp2>) { <then-stmts for exp2>; } else { <else-stmts for exp2>; if (<Boolean exp1>) { if (< Boolean exp2>) { <then-stmts for exp2>; } else { <else-stmts for exp1>;

Freely Use Braces for Clarity if (flip1 == guess1) { if (flip2 == guess2) score = “win win”; else score = “win lose”; } else { // here we lost the first score = “lose win”; score = “lose lose”;

The Espresso Program (again)

The Espresso Program Line 3 is a basic conditional statement Lines 4-4c use an if statement with conditionals in the then statement Line 5 uses basic if statement Lines 6, 7 compute using arithmetic operators Try tracing the logic for a “double tall latte” drink=“latte”; ounce=12; shots=2;

Summary Variables: names and values Initialization and assignment Data types Expressions

Summary Operators Conditional statements Compound statements Arithmetic Relational Logical Conditional statements Compound statements