1 Chapter 18 Programming Basics When it comes to being precise about an algorithm, a programming language is better than English

2 5 Cool Things… 1.Variables and Arithmetic (Today) 2.Branches for variety (Today) 3.Using Functions (Next week) 4.Building your own Functions (2 weeks) 5.Loops to repeat (3 weeks)

3 Begin with HTML HTML is static … the contents of the file are displayed as given My Test Page What is ? My Test Page What is ?

4 JavaScript Needs HTML JavaScript must be surrounded by tags in a Web page... My Test Page What is ? Put your JavaScript code here My Test Page What is ? Put your JavaScript code here Script tags can be used anywhere in file

5 Browsers Process JS When the browser comes to JavaScript, it processes it immediately My Test Page What is ? alert( ); My Test Page What is ? alert( ); Page not fully loaded

6 JS Can Build Pages JavaScript can add to a page using the document.write command... My Test Page The sum equals document.write( ); My Test Page The sum equals document.write( );

7 JavaScript is Cool JavaScript has many slick applications We move on now to the basics, but first... This is what is possible (UW JS project)

8 Names In Programming In normal language, names, and the things they name -- their values -- usually cannot be separated In programming most names change values … a consequence of finite specification Titles (US_Open_Champ), Offices (Mayor), Roles (Juliet), etc. are familiar examples of names that change values Rules, Processes and Directions exploit the variable value: “Juliet moves to the window”

9 Some Variables and their Values Name (Identifier) Current ValuePrevious Values US PresidentGeorge BushBill Clinton, Abe Lincoln Chief JusticeJohn RobertsWilliam Renquist Warren Burger James BondPierce BrosnanRoger Moore, Sean Connery

10 Variables Names in programming are identifiers The things they name are their values The package -- identifier & value -- is a variable, implying a possible change Identifiers have a specific structure in every programming language JS: letters, digits, _ start with letter, case sen. X x textOut MI5 long_variables_are_OK rate hypens-not-OK 007 no spaces end

11 Declarations To declare variables is to state what variables will be used Required … put declarations first in program Use the word: var Follow with a list of variables separated by, Terminate all statements with a semicolon ; var x, input1, input2, rate; Give variables an initial value with = var interestRate = 4, pi = ;

12 Quiz (answers at end of slides) Question 1: declare two variables in JavaScript to hold a person's weight and height. Question 2: declare a variable to hold a person's age and initialize it to 24.

13 Values Programming languages allow several types of values: numeric, strings of letters, Boolean numbers: e not numbers: 1, % 7±2 strings: "abc" 'efg' " " "B&B's" "" not strings: ' ' ' "a ' "\" Boolean: true false not Boolean: T F yes no

14 More Quiz Question 3: Which declarations are expressed incorrectly or with illegal values var Pres=“Bush”; var city=“Rome’; var money=$1.50; var age=42,000; var cost=0.75var w=’59,000’;

15 The Assignment Statement Variables are changed using the assignment statement Example: age=33; weight=150; age=weight; This means value of the right side of the = is placed in the variable on the left Read this as "age becomes 33" "weight becomes 150" "age becomes the value of weight" (or 150)

16 Assignment The universal form of assignment: For example... day = hours/24; value of the variable on the left is changed to have the new value of expression on right read “=” as “is assigned” “becomes” “gets” right-to-left value flow = is different in math and programming

17 More Assignment Flow of data is always right to left Programming is not algebra: age=17; Read: "Age becomes 17" age = age + 1; Read: "Age becomes Age + 1 (17+1 or 18)" Q:What value is now in age? (A: 18)

18 Expressions Expressions are like “formulas” saying how to manipulate existing values to compute new values, e.g. hours/24 Operators: + - * / % produce numbers Operators: = > on numbers (or strings for == and !=) produce Booleans Operators: && || ! on Booleans produce Booleans Grouping by parentheses is OK and smart seconds = ((days*24 + hours)*60 + min)*60

19 More Quiz Question 4: after these statements, what value is in variable writer? var writer = "Tolstoy“; var composer="Mozart“; var singer="Pavarotti"; singer=composer; writer=singer;

20 Still More Quiz Question 5: after these statements, what value is in variable x? var x=4, y=5, z=6; x=y+z; y=x; z=y+1; x=z;

21 Overloading Plus The + can be used to add numbers or join strings (concatenate)  10 "a" + "b" + "c"  "abc" '5' + '5'  '55' The operand type determines the operation Combine a number and string??? 5 + '5'  '55' Rule: With an operand of each type, convert number to string, concatenate  is the symbol for “has the value” Huh?—means another version of +

22 First JS Program, Revisited Rewrite earlier code with variables My Test Page The sum equals var anumber = 2.0, another, answer; another = 2.0; answer = anumber + another; document.write(answer); My Test Page The sum equals var anumber = 2.0, another, answer; another = 2.0; answer = anumber + another; document.write(answer);

23 Demo--Greeting The following program just reads your name and displays a greeting: var name; name=prompt("Please identify yourself: "); alert("Hello, " + name + “, how are you?”);

24 Demo Dissected var name; // declare a variable called name name=prompt("Please identify yourself: "); // Asks for data and stores in name alert("Hello, " + name + “, how are you?”); // displays a message with your name in it

25 Demo2 – Guess birth year The following program just reads your name and age and displays a unique greeting based on your age: var name, age, year; name=prompt("Please identify yourself: "); age=prompt("How old are you?"); year=2006 – age; alert("Hello, " + name + ", were you born in " + year + "?");

26 Conditional Conditionals test if an expression is true or not General form … if ( ) ; For example if (day == "Friday") evening_plan = "party";

27 If-Then-Else Branch both ways with If-Then-Else if ( ) ; else ; Example … if ((year%4)== 0) { leapYear = true; febDays = febDays+1; } else leapYear = false;

28 Demo3 – Modified Greeting The following program just reads your name and age and displays a unique greeting based on your age: var name, age; name=prompt("Please identify yourself: "); age=prompt("How old are you?"); if (age < 30) alert("Hello, " + name + ", whazzup?"); else alert("Hello, " + name + ", old chap, how do you do?");

29 Demo3 – Notice the pattern For many programs, the sequence of statements is the same 1) Declare variables 2) Input data you need to do the calculation 3) Process the data 4) Display the answer

30 Summary Programming is the exact specification of an algorithm JavaScript is typical … with many rules Learning strategy Do the reading first Practicing is better than memorizing for learning the rules Use the program-save-reload-check plan Precision is your best friend

31 Answers (don’t peek!) Answer 1: var weight, height; Answer 2: var age=24; Answer 3: $1.50 is illegal (no $) “Rome’—can’t start “ end ‘ 42,000 should be 42000

32 Answers, cont Answer 4: after the following statements, what value is in variable writer? var writer = "Tolstoy"; ( writer becomes "Tolstoy") var composer="Mozart"; ( composer becomes "Mozart") var singer="Pavarotti"; ( singer becomes "Pavarotti") singer=composer; (singer becomes composer ("Mozart")) writer=singer;( writer becomes singer ("Mozart")) Answer: "Mozart"

33 Answers, cont Answer 5: after the following statements, what value is in variable x? var x=4, y=5, z=6; (x gets a 4, y gets 5, z gets 6) x=y+z; ( x becomes y + z (5 +6) or 11) y=x; ( y becomes the current value of x (11)) z=y+1; (z becomes the current value of y + 1 (11 + 1) or 12) x=z;(x becomes z (12)) Answer: 12