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

3. 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

6. 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 ( = )

7. Names and Changing Values

8. 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

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

10. 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

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

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

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

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

15. Rules for Writing Numbers
No "units" or commas
Can have about 10 significant digits and can range from to 10308
Values with no decimal point are integers
Values with a decimal point are real, or floating point

16. 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?"

17. 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” )

18. 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

19. 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=“\’”

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

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

23. 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

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

25. 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

26. 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

27. 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

28. 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 < evaluates to true
8.54 == evaluates to false
speed > depends

29. 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

30. 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

31. 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"

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

33. 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

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

35. 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

36. 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

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

38. 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”;

39. The Espresso Program (again)

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

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

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