Introduction to Programming (in JavaScript)

Introduction to Programming(in JavaScript) David Stotts Computer Science Department UNC Chapel Hill

The Road Less Traveled Robert Frost Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. Then took the other, as just as fair, And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.

The Big Six(4) Decision Making 0. data (types, simple information) 1. data storage (variables, assignment) 2. data retrieval (expressions, evaluation) 3. repetition (loops) 4. decision making (conditionals) 5. procedure abstraction (functions) 6. data abstraction (arrays) 7. objects: all-the-above, wrapped up

4: Decision Making Decision Making (conditional statements) • Often we wish to choose to follow one execution path or another, but not both • The decision of which way to go is based on some condition being true, or false • Famous conditionals: “If the glove doesn’t fit, you must acquit“ “One if by land, two if by sea”

If you come to a fork in the road, take it Yogi Berra (supposedly) Self referential Conditional about conditionals (we love this sort of thing)

What...is the airspeed velocity of an unladen swallow? If answer is correct then you cross otherwise you get tossed the fork in the road two roads diverge… long you stand, look down one, … take the other

Statement Blocks • Collections of statements in JavaScript can be grouped in “curly braces” { …. } called a block Loop body is a statement block, in { …. } • Conditional has a statement block for each “tine on the fork”… • “if-then-else” statement : two tined fork, a block for “then” and another block for “else” • one block will be executed and the other block skipped… like in the following flow chart

Control Flow Control flow of conditionals can be thought of with flow charts yes no correct ? “then” block You’re tossed You cross Both paths move on from here to the statement after the entire conditional “else” block

What...is the airspeed velocity of an unladen swallow? if (reply == 15.3) { //“then” block crossing statements } else { //“otherwise” block getting tossed statements } if-then-else statement

if-then-else Example varnum; num = Number(prompt(“number?”)); if (num%2==0) { alert(num+“ is even”); } else { alert(num+“ is odd”); } decides whether a number is even or odd

Combine loops and conditionals varnum; varnEven=0; varnOdd=0; num= Number(prompt("number?")); while (num!=0) { if (num%2==0) { alert(num+ " is even"); nEven++; } else { alert(num+ " is odd"); nOdd++; } num= Number(prompt("number?")); } alert("We saw "+nEven+" evens, and "+nOdd+" odds");

“if-then” Statement age = … dep = false if-then age = Number(prompt(“age?”); dep = false; if (age < 18) { dep = true; minors++; } people++; yes age<18 ? no dep = true minors++ No else block then block is either executed, or skipped people++

Just for Kicks… age = … dep = false This is the same as age = Number(prompt(“age?”); dep = false; if (age < 18) { dep = true; minors++; } else { } people++; no yes age<18 ? dep = true minors++ empty “else “ block people++

“if-then-else-if” Statement var speed, violation, points; if (speed >= 100) { violation = “brainless driving”; points = 10; } else if (speed >= 80) { violation = “reckless driving”; points = 5; } else if (speed >= 65) { violation = “hasty driving”; points = 2; } else { violation = “none”; points = 0; } Here, a 4-pronged fork 4 statement blocks Only one will execute

“if-then-else-if” Statement Only one block of statements will execute Others are skipped yes no speed >=100 ? yes no speed >=80? 100 block yes no speed >=65? 80 block under 65 block 65 block Here we know speed < 100 AND speed >=80

OK Let’s Review We have accumulated enough stuff to make some fairly complex programs now 0. data (types, simple information) 1. data storage (variables, assignment) 2. data retrieval (expressions, evaluation) 3. repetition (loops) 4. decision making (conditionals)

OK Let’s Review Statements • Assignment • For loop • While loop • Variable declaration • User input • Screen output Blocks • Collections, groups of statements Control flow • Sequences, one statement after another • Looping, repetition of a statement block • Branching, forking, decision making: skipping blocks

OK Let’s Review Variable Usage Patterns • Counter • Accumulator Simulated Execution • Draw a memory map • Play computer running your program • Create variables in the map when you see a declaration • Change variable values when see assignment • Trace the control flow through blocks, loops, branches

Introduction to Programming (in JavaScript)